'use client';

import React, { useEffect } from 'react';
import { AppProvider, useApp } from '@/context/AppContext';
import Navbar from '@/components/Navbar';
import Hero from '@/components/Hero';
import StorefrontView from '@/components/StorefrontView';
import PortfolioView from '@/components/PortfolioView';
import AdminDashboardView from '@/components/AdminDashboardView';
import UserProfileView from '@/components/UserProfileView';
import CartDrawer from '@/components/CartDrawer';
import EmailNotificationToast from '@/components/EmailNotificationToast';
import Footer from '@/components/Footer';
import { motion, AnimatePresence } from 'motion/react';
import { supabase } from '@/src/supabaseClient';

// Dynamic View Switcher internal conductor
function StorefrontAndPortfolioHub() {
  const { activeView, theme, isLoggedIn, sessionStatus } = useApp();

  useEffect(() => {
    const checkSecureView = async () => {
      if (activeView === 'profile' || activeView === 'admin') {
        const { data: { session } } = await supabase.auth.getSession();
        const storedUser = typeof window !== 'undefined' ? localStorage.getItem('vgb_current_user') : null;
        
        if (!session && !storedUser && !isLoggedIn && sessionStatus === 'unauthenticated') {
          window.location.href = `/login?redirectTo=${encodeURIComponent('/?view=' + activeView)}`;
        }
      }
    };
    checkSecureView();
  }, [activeView, isLoggedIn, sessionStatus]);

  const isDark = theme === 'dark';

  return (
    <div className={`min-h-screen flex flex-col justify-between relative overflow-hidden transition-colors duration-500 font-sans ${
      isDark ? 'bg-[#020205] text-slate-100' : 'bg-[#f8fafc] text-slate-900'
    }`}>
      {/* Ambient Liquid Background */}
      <div className={`absolute top-[-100px] left-[-100px] w-[400px] h-[400px] rounded-full blur-[120px] pointer-events-none z-0 transition-colors duration-500 ${
        isDark ? 'bg-cyan-500/20' : 'bg-cyan-400/15'
      }`} />
      <div className={`absolute bottom-[-100px] right-[-100px] w-[500px] h-[500px] rounded-full blur-[150px] pointer-events-none z-0 transition-colors duration-500 ${
        isDark ? 'bg-purple-600/20' : 'bg-purple-500/15'
      }`} />

      {/* Decorative Grid Overlay */}
      <div className={`absolute inset-0 [background-size:40px_40px] pointer-events-none transition-opacity duration-500 z-0 ${
        isDark 
          ? 'bg-[radial-gradient(#ffffff08_1px,transparent_1px)] opacity-50' 
          : 'bg-[radial-gradient(#00000008_1px,transparent_1px)] opacity-40'
      }`} />

      {/* Primary Layout elements */}
      <div className="w-full flex-1 flex flex-col pt-6 z-10 relative">
        
        {/* Navigation bar */}
        <Navbar />

        {/* View conductor */}
        <main className="flex-1 mt-4 relative">
          <AnimatePresence mode="wait">
            <motion.div
              key={activeView}
              initial={{ opacity: 0, y: 18 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -18 }}
              transition={{ duration: 0.35, ease: [0.16, 1, 0.3, 1] }}
              className="w-full"
            >
              {activeView === 'storefront' && (
                <div>
                  {/* High converting Hero */}
                  <Hero />
                  {/* Product catalog with categories */}
                  <StorefrontView />
                </div>
              )}

              {activeView === 'portfolio' && (
                <div>
                  {/* Visual custom works portfolios */}
                  <PortfolioView />
                </div>
              )}

              {activeView === 'admin' && (
                <div>
                  {/* Control panels Kanban and revenue tools */}
                  <AdminDashboardView />
                </div>
              )}

              {activeView === 'profile' && (
                <div>
                  <UserProfileView />
                </div>
              )}
            </motion.div>
          </AnimatePresence>
        </main>

        {/* Dynamic global Shopping Cart and briefs sliding sheet */}
        <CartDrawer />
        
        {/* Real-time SMTP simulated alerts indicator */}
        <EmailNotificationToast />
      </div>

      {/* Global sleek design footer */}
      <Footer />
    </div>
  );
}

export default function Home() {
  return (
    <AppProvider>
      <StorefrontAndPortfolioHub />
    </AppProvider>
  );
}