import {useState} from 'react';
import {Header} from '@/components/Header';
import {Hero} from '@/components/Hero';
import {Gallery} from '@/components/Gallery';
import {LoginDialog} from '@/components/LoginDialog';
import {AddArtworkDialog} from '@/components/AddArtworkDialog';
import {useAuth} from '@/hooks/useAuth';
import {useArtwork} from '@/hooks/useArtwork';

function App() {
  const {isAuthenticated, login, logout} = useAuth();
  const {artworks, loading, error, addArtwork, deleteArtwork} = useArtwork();
  const [loginOpen, setLoginOpen] = useState(false);
  const [addArtworkOpen, setAddArtworkOpen] = useState(false);

  return (
    <div style={{display: 'flex', width: '100vw', height: '100vh', flexDirection: 'column'}}>
      <div className="min-h-screen bg-background" style={{margin: 'auto'}}>
        <Header isAuthenticated={isAuthenticated} onLoginClick={() => setLoginOpen(true)} onLogout={logout} />

        <main>
          <Hero />
          {loading && (
            <div className="container px-4 py-12 text-center">
              <p className="text-muted-foreground">Loading artworks...</p>
            </div>
          )}
          {error && (
            <div className="container px-4 py-12">
              <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md text-center">
                {error}
              </div>
            </div>
          )}
          {!loading && !error && (
            <Gallery artworks={artworks} isAuthenticated={isAuthenticated} onDelete={deleteArtwork} onAddClick={() => setAddArtworkOpen(true)} />
          )}

          {/*
        TODO (AZ): Waiting on client to provide bio...
        <section id="about" className="py-12 md:py-20 bg-muted/50">
          <div className="container px-4 md:px-6">
            <div className="mx-auto max-w-3xl space-y-4">
              <h2 className="text-3xl font-bold tracking-tight">About the Artist</h2>
              <div className="space-y-4 text-muted-foreground">
                <p>
                  Albert Jeffers is a contemporary visual artist whose work explores the dynamic relationship between color, texture, and emotion. With a career
                  spanning over two decades, his paintings have been exhibited in galleries across the world.
                </p>
                <p>
                  Drawing inspiration from both natural landscapes and urban environments, Albert's work seeks to capture fleeting moments of beauty and
                  transform them into lasting visual experiences. His unique approach combines traditional techniques with contemporary sensibilities.
                </p>
                <p>
                  Each piece is a meditation on the interplay between light and shadow, movement and stillness, inviting viewers to discover their own emotional
                  connections within the work.
                </p>
              </div>
            </div>
          </div>
        </section> */}
        </main>

        <footer className="border-t py-6 md:py-8">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center justify-between gap-4 md:flex-row">
              <p className="text-sm text-muted-foreground">© 2025 Albert Jeffers. All rights reserved.</p>
              <div className="flex gap-4">
                <a href="https://www.instagram.com/albert_jeffers_og/" className="text-sm text-muted-foreground hover:text-primary transition-colors">
                  Instagram
                </a>
              </div>
            </div>
          </div>
        </footer>

        <LoginDialog open={loginOpen} onOpenChange={setLoginOpen} onLogin={login} />

        <AddArtworkDialog open={addArtworkOpen} onOpenChange={setAddArtworkOpen} onAdd={addArtwork} />
      </div>
    </div>
  );
}

export default App;
