import React, { useEffect, useState } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate, useLocation } from 'react-router-dom';
import { Layout } from './components/Layout';
import { Dashboard } from './components/Dashboard';
import { ProductList } from './components/ProductList';
import { ProductEditor } from './components/ProductEditor';
import { ProductDetails } from './components/ProductDetails';
import { Login } from './components/Login';
import { Channels } from './components/Channels';
import { UserManagement } from './components/UserManagement';
import { VendorManagement } from './components/VendorManagement';
import { Inventory } from './components/Inventory';
import { Orders } from './components/Orders';
import { AIAttributeConfig as AIAttributeConfigurator } from './components/admin/AIAttributeConfig';
import { CustomerManagement } from './components/admin/CustomerManagement';
import { CustomerPreferenceConfig } from './components/admin/CustomerPreferenceConfig';
import { getCurrentUser, logout } from './services/authService';
import { getTheme, saveTheme } from './services/themeService';
import { User, UserRole, Theme, OrderItem, Product } from './types';

// Customer Components
import { CustomerLogin } from './components/customer/CustomerLogin';
import { CustomerSignup } from './components/customer/CustomerSignup';
import { ShopLayout } from './components/customer/ShopLayout';
import { ShopHome } from './components/customer/ShopHome';
import { Cart } from './components/customer/Cart';
import { ScentQuiz } from './components/customer/ScentQuiz';
import { CustomerProductDetails } from './components/customer/CustomerProductDetails';
import { Catalog } from './components/customer/Catalog';
import { RecommendationResults } from './components/customer/RecommendationResults';
import { Story } from './components/customer/Story';
import { Profile as CustomerProfile } from './components/customer/Profile';
import { Orders as CustomerOrders } from './components/customer/CustomerOrders';
import { OnboardingQuestionnaire } from './components/customer/OnboardingQuestionnaire';
import { GiftGenieTool } from './components/customer/GiftGenieTool';
import { CoupleSyncTool } from './components/customer/CoupleSyncTool';
import { ScentCompareTool } from './components/customer/ScentCompareTool';
import { EvolutionEngineTool } from './components/customer/EvolutionEngineTool';
import { ScentWardrobeTool } from './components/customer/ScentWardrobeTool';
import { EventStylistTool } from './components/customer/EventStylistTool';
import { ScentComposerTool } from './components/customer/ScentComposerTool';
import { EchoSphereTool } from './components/customer/EchoSphereTool';

const ThemeManager: React.FC<{ currentTheme: Theme }> = ({ currentTheme }) => {
  const location = useLocation();
  
  useEffect(() => {
    const isAdminRoute = location.pathname.startsWith('/admin') || 
                        ['/products', '/inventory', '/orders', '/channels', '/users', '/vendors'].some(path => location.pathname.startsWith(path));
    
    if (isAdminRoute) {
      document.documentElement.setAttribute('data-theme', currentTheme);
    } else {
      document.documentElement.removeAttribute('data-theme');
    }
  }, [location.pathname, currentTheme]);

  return null;
};

export default function App() {
  const [user, setUser] = useState<User | null>(getCurrentUser());
  const [currentTheme, setCurrentTheme] = useState<Theme>(getTheme());
  const [cart, setCart] = useState<OrderItem[]>([]);

  const handleThemeChange = (theme: Theme) => {
    setCurrentTheme(theme);
    saveTheme(theme);
  };

  const handleLogin = () => {
    setUser(getCurrentUser());
  };

  const handleLogout = async () => {
    await logout();
    setUser(null);
  };

  // Cart Logic
  const addToCart = (product: Product) => {
    if (user?.role === UserRole.CUSTOMER) {
      fetch('/api/recommendation-events', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          userId: user.id,
          productId: product.id,
          eventType: 'add_to_cart',
          metadata: {
            source: 'storefront',
            productName: product.productName,
            brandName: product.brandName
          }
        })
      }).catch(() => undefined);
    }

    setCart(prev => {
      const existing = prev.find(item => item.productId === product.id);
      if (existing) {
        return prev.map(item => item.productId === product.id ? { ...item, quantity: item.quantity + 1 } : item);
      }
      return [...prev, {
        productId: product.id,
        variantId: product.variants[0]?.id || 'default',
        productName: product.productName,
        variantName: product.variants[0]?.name || 'Standard',
        quantity: 1,
        price: product.variants[0]?.price || 0,
        image: product.images[0]
      }];
    });
  };

  const updateQuantity = (productId: string, delta: number) => {
    setCart(prev => prev.map(item => {
      if (item.productId === productId) {
        return { ...item, quantity: Math.max(1, item.quantity + delta) };
      }
      return item;
    }));
  };

  const removeItem = (productId: string) => {
    setCart(prev => prev.filter(item => item.productId !== productId));
  };

  // Auto-logout after 30 minutes of inactivity
  useEffect(() => {
    if (!user) return;

    const INACTIVITY_TIMEOUT = 30 * 60 * 1000; // 30 minutes
    let timeoutId: NodeJS.Timeout;

    const resetTimer = () => {
      if (timeoutId) clearTimeout(timeoutId);
      timeoutId = setTimeout(() => {
        console.log("User inactive for 30 minutes. Logging out...");
        handleLogout();
      }, INACTIVITY_TIMEOUT);
    };

    // Initial start
    resetTimer();

    // Events to track activity
    const events = ['mousemove', 'keydown', 'click', 'scroll', 'touchstart'];
    events.forEach(event => window.addEventListener(event, resetTimer));

    return () => {
      if (timeoutId) clearTimeout(timeoutId);
      events.forEach(event => window.removeEventListener(event, resetTimer));
    };
  }, [user]);

  useEffect(() => {
    // App is ready
  }, []);

  const isInternal = user && (user.role === UserRole.ADMIN || user.role === UserRole.EDITOR);
  const isCustomer = user && user.role === UserRole.CUSTOMER;
  const requiresOnboarding = Boolean(user?.role === UserRole.CUSTOMER && user?.questionnaireStatus?.requiresOnboarding);

  return (
    <Router>
      <ThemeManager currentTheme={currentTheme} />
      <Routes>
        {/* --- CUSTOMER PORTAL ROUTES --- */}
        <Route path="/" element={
          requiresOnboarding ? <Navigate to="/welcome" /> : (
            <ShopLayout user={user} cartCount={cart.reduce((a,b) => a + b.quantity, 0)}>
              <ShopHome user={user} addToCart={addToCart} />
            </ShopLayout>
          )
        } />
        
        <Route path="/login" element={<CustomerLogin onLogin={handleLogin} />} />
        <Route path="/signup" element={<CustomerSignup onSignup={handleLogin} />} />
        <Route path="/quiz" element={<ScentQuiz />} />
        <Route path="/welcome" element={<OnboardingQuestionnaire user={user} onComplete={handleLogin} />} />
        
        <Route path="/about" element={
           <ShopLayout user={user} cartCount={cart.reduce((a,b) => a + b.quantity, 0)}>
             <Story />
           </ShopLayout>
        } />
        
        <Route path="/shop" element={
           <ShopLayout user={user} cartCount={cart.reduce((a,b) => a + b.quantity, 0)}>
             <Catalog user={user} addToCart={addToCart} />
           </ShopLayout>
        } />

        <Route path="/shop/results" element={
           <ShopLayout user={user} cartCount={cart.reduce((a,b) => a + b.quantity, 0)}>
             <RecommendationResults user={user} addToCart={addToCart} />
           </ShopLayout>
        } />

        <Route path="/shop/product/:id" element={
           <ShopLayout user={user} cartCount={cart.reduce((a,b) => a + b.quantity, 0)}>
             <CustomerProductDetails user={user} addToCart={addToCart} />
           </ShopLayout>
        } />

        <Route path="/cart" element={
           <ShopLayout user={user} cartCount={cart.reduce((a,b) => a + b.quantity, 0)}>
             <Cart 
               items={cart} 
               updateQuantity={updateQuantity} 
               removeItem={removeItem} 
               clearCart={() => setCart([])}
               user={user}
             />
           </ShopLayout>
        } />

        <Route path="/profile" element={
           <ShopLayout user={user} cartCount={cart.reduce((a,b) => a + b.quantity, 0)}>
             <CustomerProfile user={user} onUpdate={handleLogin} />
           </ShopLayout>
        } />

        <Route path="/customer/orders" element={
           <ShopLayout user={user} cartCount={cart.reduce((a,b) => a + b.quantity, 0)}>
             <CustomerOrders user={user} />
           </ShopLayout>
        } />

        <Route path="/tools/gift-genie" element={
           <ShopLayout user={user} cartCount={cart.reduce((a,b) => a + b.quantity, 0)}>
             <GiftGenieTool user={user} addToCart={addToCart} />
           </ShopLayout>
        } />

        <Route path="/tools/couple-sync" element={
           <ShopLayout user={user} cartCount={cart.reduce((a,b) => a + b.quantity, 0)}>
             <CoupleSyncTool user={user} addToCart={addToCart} />
           </ShopLayout>
        } />

        <Route path="/tools/scent-compare" element={
           <ShopLayout user={user} cartCount={cart.reduce((a,b) => a + b.quantity, 0)}>
             <ScentCompareTool user={user} addToCart={addToCart} />
           </ShopLayout>
        } />

        <Route path="/tools/evolution-engine" element={
           <ShopLayout user={user} cartCount={cart.reduce((a,b) => a + b.quantity, 0)}>
             <EvolutionEngineTool user={user} addToCart={addToCart} />
           </ShopLayout>
        } />

        <Route path="/tools/scent-wardrobe" element={
           <ShopLayout user={user} cartCount={cart.reduce((a,b) => a + b.quantity, 0)}>
             <ScentWardrobeTool user={user} addToCart={addToCart} />
           </ShopLayout>
        } />

        <Route path="/tools/event-stylist" element={
           <ShopLayout user={user} cartCount={cart.reduce((a,b) => a + b.quantity, 0)}>
             <EventStylistTool user={user} addToCart={addToCart} />
           </ShopLayout>
        } />

        <Route path="/tools/scent-composer" element={
           <ShopLayout user={user} cartCount={cart.reduce((a,b) => a + b.quantity, 0)}>
             <ScentComposerTool user={user} addToCart={addToCart} />
           </ShopLayout>
        } />

        <Route path="/tools/echo-sphere" element={
           <ShopLayout user={user} cartCount={cart.reduce((a,b) => a + b.quantity, 0)}>
             <EchoSphereTool user={user} addToCart={addToCart} />
           </ShopLayout>
        } />

        {/* --- ADMIN PORTAL ROUTES --- */}
        <Route path="/admin/login" element={
          user && (isInternal || user.role === UserRole.VENDOR) ? <Navigate to="/admin" /> : <Login onLogin={handleLogin} />
        } />
        
        <Route path="/admin" element={
          isInternal || (user && user.role === UserRole.VENDOR) ? (
            <Layout user={user!} onLogout={handleLogout} currentTheme={currentTheme} onThemeChange={handleThemeChange}>
              <Dashboard user={user!} />
            </Layout>
          ) : <Navigate to="/admin/login" />
        } />

        <Route path="/products" element={
          user && !isCustomer ? (
            <Layout user={user} onLogout={handleLogout} currentTheme={currentTheme} onThemeChange={handleThemeChange}>
              <ProductList user={user} />
            </Layout>
          ) : <Navigate to="/admin/login" />
        } />

        {/* Create New Product */}
        <Route path="/products/new" element={
          user && !isCustomer ? (
            <Layout user={user} onLogout={handleLogout} currentTheme={currentTheme} onThemeChange={handleThemeChange}>
              <ProductEditor user={user} />
            </Layout>
          ) : <Navigate to="/admin/login" />
        } />

        {/* Edit Product */}
        <Route path="/products/:id/edit" element={
          user && !isCustomer ? (
            <Layout user={user} onLogout={handleLogout} currentTheme={currentTheme} onThemeChange={handleThemeChange}>
              <ProductEditor user={user} />
            </Layout>
          ) : <Navigate to="/admin/login" />
        } />

        {/* View Product Details */}
        <Route path="/products/:id" element={
          user && !isCustomer ? (
            <Layout user={user} onLogout={handleLogout} currentTheme={currentTheme} onThemeChange={handleThemeChange}>
              <ProductDetails user={user} />
            </Layout>
          ) : <Navigate to="/admin/login" />
        } />

        <Route path="/inventory" element={
          user && !isCustomer ? (
            <Layout user={user} onLogout={handleLogout} currentTheme={currentTheme} onThemeChange={handleThemeChange}>
              <Inventory user={user} />
            </Layout>
          ) : <Navigate to="/admin/login" />
        } />

        <Route path="/orders" element={
          user && !isCustomer ? (
            <Layout user={user} onLogout={handleLogout} currentTheme={currentTheme} onThemeChange={handleThemeChange}>
              <Orders user={user} />
            </Layout>
          ) : <Navigate to="/admin/login" />
        } />

        <Route path="/channels" element={
          user && !isCustomer ? (
            <Layout user={user} onLogout={handleLogout} currentTheme={currentTheme} onThemeChange={handleThemeChange}>
              <Channels user={user} />
            </Layout>
          ) : <Navigate to="/admin/login" />
        } />

         <Route path="/users" element={
          isInternal ? (
            <Layout user={user!} onLogout={handleLogout} currentTheme={currentTheme} onThemeChange={handleThemeChange}>
              <UserManagement />
            </Layout>
          ) : <Navigate to="/admin" />
        } />

        <Route path="/vendors" element={
          isInternal ? (
            <Layout user={user!} onLogout={handleLogout} currentTheme={currentTheme} onThemeChange={handleThemeChange}>
              <VendorManagement />
            </Layout>
          ) : <Navigate to="/admin" />
        } />

        <Route path="/admin/customers" element={
          isInternal ? (
            <Layout user={user!} onLogout={handleLogout} currentTheme={currentTheme} onThemeChange={handleThemeChange}>
              <CustomerManagement />
            </Layout>
          ) : <Navigate to="/admin" />
        } />

        <Route path="/admin/preferences" element={
          isInternal ? (
            <Layout user={user!} onLogout={handleLogout} currentTheme={currentTheme} onThemeChange={handleThemeChange}>
              <CustomerPreferenceConfig />
            </Layout>
          ) : <Navigate to="/admin" />
        } />

        <Route path="/admin/attributes" element={
          isInternal ? (
            <Layout user={user!} onLogout={handleLogout} currentTheme={currentTheme} onThemeChange={handleThemeChange}>
              <AIAttributeConfigurator />
            </Layout>
          ) : <Navigate to="/admin" />
        } />
      </Routes>
    </Router>
  );
}