'use client';

import { useAppStore } from '@/store/app-store';
import { hydrateLangStore } from '@/store/lang-store';
import { Header } from '@/components/layout/header';
import { Footer } from '@/components/layout/footer';
import { HomePage } from '@/components/sections/home-page';
import { SearchPage } from '@/components/sections/search-page';
import { ReportPage } from '@/components/sections/report-page';
import { LoginPage } from '@/components/sections/login-page';
import { RegisterPage } from '@/components/sections/register-page';
import { DashboardPage } from '@/components/sections/dashboard-page';
import { AdminPage } from '@/components/sections/admin-page';
import { AnalyticsPage } from '@/components/sections/analytics-page';
import { ReportDetailPage } from '@/components/sections/report-detail-page';
import { AIDetectPage } from '@/components/sections/ai-detect-page';
import { ProfilePage } from '@/components/sections/profile-page';
import { HowItWorksPage } from '@/components/sections/how-it-works-page';
import { FaqPage } from '@/components/sections/faq-page';
import { CheckNumberPage } from '@/components/sections/check-number-page';
import { useEffect, useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { ArrowUp } from 'lucide-react';
import { Button } from '@/components/ui/button';

function BackToTopButton() {
  const [show, setShow] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setShow(window.scrollY > 400);
    };
    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  return (
    <AnimatePresence>
      {show && (
        <motion.div
          initial={{ opacity: 0, scale: 0.8 }}
          animate={{ opacity: 1, scale: 1 }}
          exit={{ opacity: 0, scale: 0.8 }}
          className="fixed bottom-6 right-6 z-40"
        >
          <Button
            size="icon"
            onClick={scrollToTop}
            className="h-10 w-10 rounded-full bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 shadow-lg shadow-emerald-500/25"
          >
            <ArrowUp className="h-4 w-4" />
          </Button>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

export default function Home() {
  const currentPage = useAppStore((s) => s.currentPage);
  const setUser = useAppStore((s) => s.setUser);

  useEffect(() => {
    // Check for saved user session
    const savedUser = localStorage.getItem('scamchecker_user');
    if (savedUser) {
      try {
        setUser(JSON.parse(savedUser));
      } catch {
        localStorage.removeItem('scamchecker_user');
      }
    }

    // Seed database on first load
    fetch('/api/seed', { method: 'POST' }).catch(() => {});

    // Hydrate language store from localStorage
    hydrateLangStore();
  }, [setUser]);

  // Scroll to top when page changes
  useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }, [currentPage]);

  const renderPage = () => {
    switch (currentPage) {
      case 'home':
        return <HomePage />;
      case 'search':
        return <SearchPage />;
      case 'report':
        return <ReportPage />;
      case 'login':
        return <LoginPage />;
      case 'register':
        return <RegisterPage />;
      case 'dashboard':
        return <DashboardPage />;
      case 'admin':
        return <AdminPage />;
      case 'analytics':
        return <AnalyticsPage />;
      case 'report-detail':
        return <ReportDetailPage />;
      case 'ai-detect':
        return <AIDetectPage />;
      case 'profile':
        return <ProfilePage />;
      case 'how-it-works':
        return <HowItWorksPage />;
      case 'faq':
        return <FaqPage />;
      case 'check-number':
        return <CheckNumberPage />;
      default:
        return <HomePage />;
    }
  };

  return (
    <div className="min-h-screen flex flex-col bg-background cyber-grid">
      <Header />
      <main className="flex-1">
        {renderPage()}
      </main>
      <Footer />
      <BackToTopButton />
    </div>
  );
}
