/* ==========================================================================
   Aurelia Books - Main Application Shell (E-Commerce Standard Architecture)
   AppContext Provider + Router + Page Renderer + Portfolio Demo Mode
   ========================================================================== */
(function () {
  const { useState, useEffect, useCallback, useMemo, createContext, useContext } = React;

  /* ── Global Currency Formatter ─────────────────────────────────────── */
  window.formatCurrency = function (amount) {
    if (amount == null) return '$0.00';
    return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(amount / 25000);
  };

  /* ══════════════════════════════════════════════════════════════════════
     APP CONTEXT
     ══════════════════════════════════════════════════════════════════════ */
  const AppContext = createContext(null);
  window.AppContext = AppContext;

  window.useApp = function useApp() {
    const ctx = useContext(AppContext);
    if (!ctx) throw new Error('useApp must be used within <AppProvider>');
    return ctx;
  };

  /* ══════════════════════════════════════════════════════════════════════
     APP COMPONENT
     ══════════════════════════════════════════════════════════════════════ */
  function App() {
    const { currentPath } = window.useRouter();

    /* ── Auth State ─────────────────────────────────────────────────── */
    const [user, setUser] = useState(ApiClient.getUser());
    const [isAuthOpen, setIsAuthOpen] = useState(false);
    const [authMode, setAuthMode] = useState('login');

    /* ── Demo Modal State ────────────────────────────────────────────── */
    const [isDemoModalOpen, setIsDemoModalOpen] = useState(() => {
      // Show demo modal once on initial visit if not logged in
      return !ApiClient.getToken();
    });

    /* ── Cart State ─────────────────────────────────────────────────── */
    const [cart, setCart] = useState(null);
    const [isCartOpen, setIsCartOpen] = useState(false);

    /* ── Toast State ────────────────────────────────────────────────── */
    const [toasts, setToasts] = useState([]);

    /* ── Search State ───────────────────────────────────────────────── */
    const [searchQuery, setSearchQuery] = useState('');

    /* ── Toast Helper ───────────────────────────────────────────────── */
    const showToast = useCallback((message, type = 'info') => {
      const id = Date.now() + Math.random();
      setToasts(prev => [...prev, { id, message, type }]);
      setTimeout(() => {
        setToasts(prev => prev.filter(t => t.id !== id));
      }, 3500);
    }, []);

    /* ── Cart Actions ───────────────────────────────────────────────── */
    const fetchCart = useCallback(async () => {
      if (!ApiClient.getToken()) { setCart(null); return; }
      try {
        const res = await ApiClient.getCart();
        if (res.data) setCart(res.data);
      } catch (err) { console.error(err); }
    }, []);

    const handleAddToCart = useCallback(async (bookId) => {
      if (!ApiClient.getToken()) {
        setIsDemoModalOpen(true);
        return;
      }
      try {
        await ApiClient.addToCart(bookId, 1);
        showToast('Book added to shopping cart!', 'success');
        fetchCart();
      } catch (err) { showToast(err.message, 'error'); }
    }, [fetchCart, showToast]);

    const handleUpdateCartQty = useCallback(async (itemId, qty) => {
      if (qty <= 0) return handleRemoveCartItem(itemId);
      try {
        await ApiClient.updateCartItem(itemId, qty);
        fetchCart();
      } catch (err) { showToast(err.message, 'error'); }
    }, [fetchCart, showToast]);

    const handleRemoveCartItem = useCallback(async (itemId) => {
      try {
        await ApiClient.removeCartItem(itemId);
        showToast('Item removed from cart', 'info');
        fetchCart();
      } catch (err) { showToast(err.message, 'error'); }
    }, [fetchCart, showToast]);

    /* ── Auth Actions ───────────────────────────────────────────────── */
    const handleLogout = useCallback(() => {
      ApiClient.removeToken();
      setUser(null);
      setCart(null);
      setIsAuthOpen(false);
      setIsCartOpen(false);
      showToast('Signed out successfully', 'info');
      window.location.hash = '#/';
    }, [showToast]);

    /* ── Init ────────────────────────────────────────────────────────── */
    useEffect(() => { fetchCart(); }, [fetchCart]);

    useEffect(() => {
      const handler = () => { setUser(null); setCart(null); };
      window.addEventListener('auth-changed', handler);
      return () => window.removeEventListener('auth-changed', handler);
    }, []);

    /* ── Context Value ──────────────────────────────────────────────── */
    const appValue = useMemo(() => ({
      user, setUser,
      cart, setCart, fetchCart,
      isCartOpen, setIsCartOpen,
      isAuthOpen, setIsAuthOpen,
      authMode, setAuthMode,
      toasts, showToast,
      searchQuery, setSearchQuery,
      handleAddToCart, handleUpdateCartQty, handleRemoveCartItem,
      handleLogout,
    }), [user, cart, isCartOpen, isAuthOpen, authMode, toasts, searchQuery,
         fetchCart, handleAddToCart, handleUpdateCartQty, handleRemoveCartItem, handleLogout, showToast]);

    /* ── Routing ────────────────────────────────────────────────────── */
    const isAdminRoute = currentPath.startsWith('/admin');

    // Admin Guard
    if (isAdminRoute && (!user || !user.roles || !user.roles.includes('ROLE_ADMIN'))) {
      return (
        <AppContext.Provider value={appValue}>
          <window.Header onOpenDemoModal={() => setIsDemoModalOpen(true)} />
          <main className="max-w-7xl mx-auto px-6 py-20 text-center flex-1">
            <div className="w-16 h-16 bg-amber-100 text-amber-700 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl">
              <i className="fa-solid fa-shield-halved"></i>
            </div>
            <h2 className="font-serif text-2xl font-bold text-stone-900 mb-2">Admin Access Required</h2>
            <p className="text-xs text-stone-600 mb-6">Please sign in with an Administrator account to access the management portal.</p>
            <div className="flex justify-center gap-3">
              <button onClick={() => setIsDemoModalOpen(true)}
                      className="px-6 py-2.5 bg-amber-600 hover:bg-amber-700 text-white font-bold rounded-2xl transition-all text-xs flex items-center gap-2">
                <i className="fa-solid fa-key"></i>
                <span>Use Demo Admin Account (1-Click)</span>
              </button>
            </div>
          </main>
          <window.Footer />
          <window.AuthModal />
          <window.DemoAccountModal isOpen={isDemoModalOpen} onClose={() => setIsDemoModalOpen(false)} />
          <window.DemoFloatingBadge onOpenDemoModal={() => setIsDemoModalOpen(true)} />
          <window.ToastContainer />
        </AppContext.Provider>
      );
    }

    /* ── Render Admin Routes ────────────────────────────────────────── */
    if (isAdminRoute) {
      let AdminPage;
      switch (currentPath) {
        case '/admin':            AdminPage = window.AdminDashboardPage;   break;
        case '/admin/books':      AdminPage = window.AdminBooksPage;       break;
        case '/admin/orders':     AdminPage = window.AdminOrdersPage;      break;
        case '/admin/users':      AdminPage = window.AdminUsersPage;       break;
        case '/admin/coupons':    AdminPage = window.AdminCouponsPage;     break;
        case '/admin/categories': AdminPage = window.AdminCategoriesPage;  break;
        default:                  AdminPage = window.AdminDashboardPage;
      }

      return (
        <AppContext.Provider value={appValue}>
          <window.AdminLayout>
            <AdminPage />
          </window.AdminLayout>
          <window.CartDrawer />
          <window.AuthModal />
          <window.DemoAccountModal isOpen={isDemoModalOpen} onClose={() => setIsDemoModalOpen(false)} />
          <window.DemoFloatingBadge onOpenDemoModal={() => setIsDemoModalOpen(true)} />
          <window.ToastContainer />
        </AppContext.Provider>
      );
    }

    /* ── Render Customer Routes ─────────────────────────────────────── */
    let PageComponent;
    if (currentPath === '/' || currentPath === '') {
      PageComponent = window.HomePage; // Storefront Landing
    } else if (currentPath.startsWith('/catalog') || currentPath === '/books') {
      PageComponent = window.CatalogPage; // Dedicated Catalog Page
    } else if (window.matchRoute('/book/:slug', currentPath)) {
      PageComponent = window.BookDetailPage;
    } else if (currentPath === '/checkout') {
      PageComponent = window.CheckoutPage;
    } else if (currentPath === '/orders') {
      PageComponent = window.OrdersPage;
    } else {
      PageComponent = window.HomePage;
    }

    return (
      <AppContext.Provider value={appValue}>
        <div className="min-h-screen flex flex-col bg-warmbg">
          <window.Header onOpenDemoModal={() => setIsDemoModalOpen(true)} />
          <PageComponent />
          <window.Footer />
        </div>
        <window.CartDrawer />
        <window.AuthModal />
        <window.DemoAccountModal isOpen={isDemoModalOpen} onClose={() => setIsDemoModalOpen(false)} />
        <window.DemoFloatingBadge onOpenDemoModal={() => setIsDemoModalOpen(true)} />
        <window.ToastContainer />
      </AppContext.Provider>
    );
  }

  /* ══════════════════════════════════════════════════════════════════════
     BOOTSTRAP
     ══════════════════════════════════════════════════════════════════════ */
  ReactDOM.createRoot(document.getElementById('root')).render(
    <window.RouterProvider>
      <App />
    </window.RouterProvider>
  );
})();