"use client";

import { useEffect } from 'react';

import { useStore } from '@/lib/store';
import { Navbar } from "@/components/Navbar";
import { Gallery } from "@/components/Gallery";
import { PromptHero } from "@/components/PromptHero";
import { Settings } from "@/components/Settings";
import { PromptLibrary } from "@/components/PromptLibrary";
import { UploadHistory } from "@/components/UploadHistory";
import { GrokChat } from "@/components/GrokChat";
import { CookieExpiredDialog } from "@/components/CookieExpiredDialog";


export default function Home() {
  const { currentView, setCurrentView, loadGallery } = useStore();

  useEffect(() => {
    loadGallery();
  }, [loadGallery]);

  return (
    <div className="flex h-screen w-full bg-background text-foreground overflow-hidden font-sans flex-col">
      {/* Top Navbar */}
      <Navbar />

      {/* Main Content Area */}
      <main className="flex-1 relative flex flex-col h-full w-full overflow-hidden mt-16">

        {/* Scrollable Container */}
        <div className="flex-1 overflow-y-auto w-full scroll-smooth">
          <div className="min-h-full w-full max-w-[1600px] mx-auto p-4 md:p-6 pb-20">

            {/* Always show Hero on Create View */}
            {currentView === 'gallery' && (
              <>
                <PromptHero />
                <Gallery />
              </>
            )}

            {currentView === 'settings' && <Settings />}

            {currentView === 'library' && (
              <PromptLibrary onSelect={(p) => setCurrentView('gallery')} />
            )}

            {currentView === 'history' && <UploadHistory />}

          </div>
        </div>
      </main>

      {/* Floating AI Chat */}
      <GrokChat />
      <CookieExpiredDialog />
    </div>
  );
}