"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 { CookieExpiredDialog } from "@/components/CookieExpiredDialog";
import { BottomNav } from "@/components/BottomNav";

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

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

  const handleTabChange = (tab: 'create' | 'library' | 'uploads' | 'settings') => {
    if (tab === 'create') setCurrentView('gallery');
    else if (tab === 'uploads') setCurrentView('history');
    else setCurrentView(tab);
  };

  const getActiveTab = () => {
    if (currentView === 'gallery') return 'create';
    if (currentView === 'history') return 'uploads';
    return currentView as 'create' | 'library' | 'uploads' | 'settings';
  };

  return (
    <div className="flex h-[100dvh] w-full bg-background text-foreground overflow-hidden font-sans flex-col relative">
      {/* Top Navbar - Mobile Header */}
      <Navbar />

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

        {/* Scrollable Container */}
        <div className="flex-1 overflow-y-auto w-full scroll-smooth no-scrollbar pt-16 pb-24 md:pb-0">
          <div className="w-full max-w-lg md:max-w-7xl mx-auto p-4 md:p-6 min-h-full">

            {/* 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>

      {/* Bottom Navigation (Mobile & Desktop App-like) */}
      <BottomNav currentTab={getActiveTab()} onTabChange={handleTabChange} />

      <CookieExpiredDialog />
    </div>
  );
}