/* ==========================================================================
   Aurelia Books - Admin Dashboard & Management Pages (Light Mode)
   AdminLayout, Dashboard, Books, Orders, Users, Coupons, Categories
   ========================================================================== */
(function () {
  const { useState, useEffect, useCallback, useRef, useMemo } = React;

  /* ══════════════════════════════════════════════════════════════════════
     ADMIN LAYOUT
     ══════════════════════════════════════════════════════════════════════ */
  function AdminLayout({ children }) {
    const { currentPath, navigate } = window.useRouter();
    const { user, handleLogout } = window.useApp();
    const [sidebarOpen, setSidebarOpen] = useState(false);

    const menuItems = [
      { path: '/admin',            icon: 'fa-chart-pie',     label: 'Dashboard Overview' },
      { path: '/admin/books',      icon: 'fa-book',          label: 'Book Management' },
      { path: '/admin/orders',     icon: 'fa-receipt',       label: 'Order Management' },
      { path: '/admin/users',      icon: 'fa-users',         label: 'User Accounts' },
      { path: '/admin/coupons',    icon: 'fa-ticket',        label: 'Discount Coupons' },
      { path: '/admin/categories', icon: 'fa-layer-group',   label: 'Book Categories' },
    ];

    return (
      <div className="flex min-h-screen bg-warmbg text-stone-900">
        {/* Mobile Overlay */}
        {sidebarOpen && (
          <div className="fixed inset-0 z-30 bg-stone-900/50 backdrop-blur-sm lg:hidden" onClick={() => setSidebarOpen(false)}></div>
        )}

        {/* Sidebar */}
        <aside className={`fixed lg:sticky top-0 left-0 z-40 h-screen w-64 bg-white border-r border-stone-200
                          flex flex-col transition-transform duration-300 lg:translate-x-0 shadow-sm
                          ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}`}>
          {/* Header */}
          <div className="p-5 border-b border-stone-100">
            <div className="flex items-center gap-3 cursor-pointer" onClick={() => navigate('/admin')}>
              <div className="w-9 h-9 bg-gradient-to-br from-amber-600 to-amber-700 rounded-xl flex items-center justify-center shadow-md text-white">
                <i className="fa-solid fa-chart-pie text-sm"></i>
              </div>
              <div>
                <h2 className="font-serif font-bold text-base text-stone-900 leading-tight">Admin Portal</h2>
                <p className="text-[10px] text-amber-700 font-semibold uppercase tracking-wider">Aurelia Press</p>
              </div>
            </div>
          </div>

          {/* Nav List */}
          <nav className="flex-1 p-3 space-y-1 overflow-y-auto custom-scrollbar">
            <p className="text-[10px] font-bold text-stone-400 uppercase tracking-widest px-3 pt-2 pb-1">Management</p>
            {menuItems.map(item => {
              const isActive = currentPath === item.path;
              return (
                <button key={item.path}
                        onClick={() => { navigate(item.path); setSidebarOpen(false); }}
                        className={`w-full flex items-center gap-3 px-3.5 py-2.5 rounded-xl text-xs font-semibold transition-all
                                   ${isActive
                                     ? 'bg-amber-50 text-amber-900 border border-amber-200 shadow-sm'
                                     : 'text-stone-600 hover:bg-stone-50'}`}>
                  <i className={`fa-solid ${item.icon} w-5 text-center ${isActive ? 'text-amber-700' : 'text-stone-400'}`}></i>
                  {item.label}
                  {isActive && <div className="ml-auto w-1.5 h-1.5 bg-amber-600 rounded-full"></div>}
                </button>
              );
            })}
          </nav>

          {/* Footer */}
          <div className="p-4 border-t border-stone-100 space-y-2">
            <button onClick={() => navigate('/')}
                    className="w-full flex items-center gap-2 px-3 py-2 rounded-xl text-xs text-stone-600
                               hover:text-amber-700 hover:bg-amber-50 transition-all font-medium">
              <i className="fa-solid fa-store text-amber-600"></i>
              <span>Back to Bookstore</span>
            </button>
            <div className="flex items-center gap-2.5 px-3 py-2 bg-stone-50 rounded-2xl border border-stone-200">
              <div className="w-7 h-7 bg-amber-600 rounded-full flex items-center justify-center text-white text-xs font-bold">
                {user ? (user.fullName || 'A').charAt(0).toUpperCase() : 'A'}
              </div>
              <div className="flex-1 min-w-0">
                <p className="text-xs font-bold text-stone-900 truncate">{user?.fullName || 'Admin'}</p>
                <p className="text-[10px] text-stone-400 truncate">{user?.email}</p>
              </div>
              <button onClick={handleLogout} className="text-stone-400 hover:text-rose-600 transition-colors" title="Sign Out">
                <i className="fa-solid fa-right-from-bracket text-xs"></i>
              </button>
            </div>
          </div>
        </aside>

        {/* Main Area */}
        <div className="flex-1 min-w-0">
          {/* Top Navbar */}
          <header className="sticky top-0 z-20 bg-white/90 backdrop-blur-md border-b border-stone-200 px-6 py-3.5 flex items-center justify-between shadow-sm">
            <button onClick={() => setSidebarOpen(true)} className="lg:hidden text-stone-600 hover:text-stone-900 p-2">
              <i className="fa-solid fa-bars text-lg"></i>
            </button>
            <div className="font-serif text-sm font-bold text-stone-800">
              {menuItems.find(m => m.path === currentPath)?.label || 'Dashboard'}
            </div>
            <div className="text-xs text-stone-500 font-medium">
              {new Date().toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric' })}
            </div>
          </header>

          {/* Body */}
          <div className="p-6">
            {children}
          </div>
        </div>
      </div>
    );
  }

  /* ══════════════════════════════════════════════════════════════════════
     DASHBOARD PAGE
     ══════════════════════════════════════════════════════════════════════ */
  function AdminDashboardPage() {
    const { showToast } = window.useApp();
    const formatCurrency = window.formatCurrency;
    const LoadingSpinner = window.LoadingSpinner;

    const [stats, setStats] = useState(null);
    const [loading, setLoading] = useState(true);
    const chartRef = useRef(null);

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

    const loadDashboard = async () => {
      setLoading(true);
      try {
        const res = await ApiClient.getAdminDashboard();
        if (res.data) setStats(res.data);
      } catch (err) { showToast(err.message, 'error'); }
      finally { setLoading(false); }
    };

    // Draw canvas chart for light mode
    useEffect(() => {
      if (!stats || !stats.monthlyRevenue || !chartRef.current) return;
      drawChart(chartRef.current, stats.monthlyRevenue);
    }, [stats]);

    const drawChart = (canvas, data) => {
      if (!data || data.length === 0) return;
      const ctx = canvas.getContext('2d');
      const rect = canvas.parentElement.getBoundingClientRect();
      const dpr = window.devicePixelRatio || 1;

      canvas.width = rect.width * dpr;
      canvas.height = 260 * dpr;
      canvas.style.width = rect.width + 'px';
      canvas.style.height = '260px';
      ctx.scale(dpr, dpr);

      const w = rect.width;
      const h = 260;
      const padding = { top: 20, right: 20, bottom: 40, left: 70 };
      const chartW = w - padding.left - padding.right;
      const chartH = h - padding.top - padding.bottom;

      ctx.clearRect(0, 0, w, h);

      const maxVal = Math.max(...data.map(d => Number(d.revenue) || 0), 1);
      const barW = Math.min(42, (chartW / data.length) - 10);
      const gap = (chartW - barW * data.length) / (data.length + 1);

      // Grid
      const gridLines = 4;
      ctx.strokeStyle = '#e7e5e4';
      ctx.lineWidth = 1;
      ctx.fillStyle = '#78716c';
      ctx.font = '11px Plus Jakarta Sans, sans-serif';
      ctx.textAlign = 'right';
      for (let i = 0; i <= gridLines; i++) {
        const y = padding.top + (chartH / gridLines) * i;
        const val = maxVal - (maxVal / gridLines) * i;
        ctx.beginPath();
        ctx.moveTo(padding.left, y);
        ctx.lineTo(w - padding.right, y);
        ctx.stroke();
        ctx.fillText((val / 1000000).toFixed(1) + 'M', padding.left - 8, y + 4);
      }

      // Bars
      data.forEach((item, i) => {
        const val = Number(item.revenue) || 0;
        const barH = (val / maxVal) * chartH;
        const x = padding.left + gap + i * (barW + gap);
        const y = padding.top + chartH - barH;

        // Gradient
        const grad = ctx.createLinearGradient(x, y, x, y + barH);
        grad.addColorStop(0, '#d97706');
        grad.addColorStop(1, '#b45309');
        ctx.fillStyle = grad;

        const radius = Math.min(6, barW / 2, barH / 2);
        ctx.beginPath();
        ctx.moveTo(x + radius, y);
        ctx.lineTo(x + barW - radius, y);
        ctx.quadraticCurveTo(x + barW, y, x + barW, y + radius);
        ctx.lineTo(x + barW, y + barH);
        ctx.lineTo(x, y + barH);
        ctx.lineTo(x, y + radius);
        ctx.quadraticCurveTo(x, y, x + radius, y);
        ctx.fill();

        ctx.fillStyle = '#44403c';
        ctx.font = '10px Plus Jakarta Sans, sans-serif';
        ctx.textAlign = 'center';
        ctx.fillText(item.label || '', x + barW / 2, h - padding.bottom + 18);
      });
    };

    if (loading) return <LoadingSpinner text="Loading dashboard statistics..." />;
    if (!stats) return null;

    const statCards = [
      { label: 'Total Revenue', value: formatCurrency(stats.totalRevenue), icon: 'fa-coins',        bg: 'bg-amber-50 border-amber-200', text: 'text-amber-800' },
      { label: 'Total Orders',  value: stats.totalOrders,                 icon: 'fa-receipt',       bg: 'bg-indigo-50 border-indigo-200', text: 'text-indigo-800' },
      { label: 'Total Books',   value: stats.totalBooks,                   icon: 'fa-book',          bg: 'bg-purple-50 border-purple-200', text: 'text-purple-800' },
      { label: 'Customers',     value: stats.totalCustomers,               icon: 'fa-users',         bg: 'bg-emerald-50 border-emerald-200', text: 'text-emerald-800' },
      { label: 'Pending Orders', value: stats.pendingOrders,                icon: 'fa-clock',         bg: 'bg-rose-50 border-rose-200', text: 'text-rose-800' },
    ];

    return (
      <div className="space-y-6">
        <h1 className="font-serif text-2xl font-bold text-stone-900">Dashboard Overview</h1>

        {/* Cards */}
        <div className="grid grid-cols-2 lg:grid-cols-5 gap-4">
          {statCards.map((card, i) => (
            <div key={i} className={`p-4 rounded-3xl border ${card.bg} transition-all hover:scale-[1.02] shadow-sm`}>
              <div className="flex items-center justify-between mb-2">
                <span className="text-xs text-stone-600 font-semibold">{card.label}</span>
                <i className={`fa-solid ${card.icon} ${card.text}`}></i>
              </div>
              <div className="font-serif text-2xl font-bold text-stone-900">{card.value}</div>
            </div>
          ))}
        </div>

        {/* Revenue Chart */}
        <div className="bg-white border border-stone-200 rounded-3xl p-6 shadow-sm">
          <h3 className="font-serif font-bold text-stone-900 mb-4 flex items-center gap-2">
            <i className="fa-solid fa-chart-bar text-amber-600"></i>
            Monthly Revenue Trajectory
          </h3>
          <div className="w-full">
            <canvas ref={chartRef}></canvas>
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* Top Selling Books */}
          <div className="bg-white border border-stone-200 rounded-3xl p-6 shadow-sm">
            <h3 className="font-serif font-bold text-stone-900 mb-4 flex items-center gap-2">
              <i className="fa-solid fa-fire text-amber-600"></i>
              Bestselling Titles
            </h3>
            {stats.topSellingBooks && stats.topSellingBooks.length > 0 ? (
              <div className="space-y-3">
                {stats.topSellingBooks.map((book, i) => (
                  <div key={i} className="flex items-center gap-3 bg-stone-50 p-3 rounded-2xl border border-stone-200">
                    <span className={`w-7 h-7 rounded-lg flex items-center justify-center text-xs font-bold ${
                      i === 0 ? 'bg-amber-500 text-white' : 'bg-stone-200 text-stone-700'
                    }`}>
                      #{i + 1}
                    </span>
                    <img src={book.coverImage || 'https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?auto=format&fit=crop&w=100&q=80'}
                         className="w-9 h-12 object-cover rounded-lg shadow-sm" alt="" />
                    <div className="flex-1 min-w-0">
                      <p className="font-serif text-xs font-bold text-stone-900 truncate">{book.title}</p>
                      <p className="text-[10px] text-stone-500">Sold: {book.totalSold} Copies</p>
                    </div>
                    <span className="text-xs font-extrabold text-amber-800">{formatCurrency(book.totalRevenue)}</span>
                  </div>
                ))}
              </div>
            ) : (
              <p className="text-xs text-stone-400 text-center py-8">No data available yet</p>
            )}
          </div>

          {/* Quick Actions */}
          <div className="bg-white border border-stone-200 rounded-3xl p-6 shadow-sm">
            <h3 className="font-serif font-bold text-stone-900 mb-4 flex items-center gap-2">
              <i className="fa-solid fa-bolt text-amber-600"></i>
              Quick Actions
            </h3>
            <div className="grid grid-cols-2 gap-3">
              <button onClick={() => window.location.hash = '#/admin/books'}
                      className="p-4 bg-stone-50 border border-stone-200 rounded-2xl hover:border-amber-400 transition-all text-left">
                <i className="fa-solid fa-plus text-amber-600 mb-2"></i>
                <p className="text-xs font-bold text-stone-900">Add New Book</p>
                <p className="text-[10px] text-stone-500">Create new catalog title</p>
              </button>
              <button onClick={() => window.location.hash = '#/admin/orders'}
                      className="p-4 bg-stone-50 border border-stone-200 rounded-2xl hover:border-indigo-400 transition-all text-left">
                <i className="fa-solid fa-truck text-indigo-600 mb-2"></i>
                <p className="text-xs font-bold text-stone-900">Fulfill Orders</p>
                <p className="text-[10px] text-stone-500">{stats.pendingOrders} Orders Pending</p>
              </button>
              <button onClick={() => window.location.hash = '#/admin/users'}
                      className="p-4 bg-stone-50 border border-stone-200 rounded-2xl hover:border-emerald-400 transition-all text-left">
                <i className="fa-solid fa-user-plus text-emerald-600 mb-2"></i>
                <p className="text-xs font-bold text-stone-900">Manage Users</p>
                <p className="text-[10px] text-stone-500">{stats.totalCustomers} Accounts</p>
              </button>
              <button onClick={() => window.location.hash = '#/admin/coupons'}
                      className="p-4 bg-stone-50 border border-stone-200 rounded-2xl hover:border-purple-400 transition-all text-left">
                <i className="fa-solid fa-ticket text-purple-600 mb-2"></i>
                <p className="text-xs font-bold text-stone-900">Discount Coupons</p>
                <p className="text-[10px] text-stone-500">Create promotion</p>
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  /* ══════════════════════════════════════════════════════════════════════
     ADMIN BOOKS PAGE
     ══════════════════════════════════════════════════════════════════════ */
  function AdminBooksPage() {
    const { showToast } = window.useApp();
    const formatCurrency = window.formatCurrency;
    const Pagination = window.Pagination;
    const Modal = window.Modal;
    const ConfirmDialog = window.ConfirmDialog;
    const LoadingSpinner = window.LoadingSpinner;

    const [books, setBooks] = useState([]);
    const [loading, setLoading] = useState(true);
    const [page, setPage] = useState(0);
    const [pageData, setPageData] = useState({ totalPages: 0, totalElements: 0 });
    const [search, setSearch] = useState('');
    const [editBook, setEditBook] = useState(null);
    const [deleteId, setDeleteId] = useState(null);
    const [categories, setCategories] = useState([]);

    const fetchBooks = useCallback(async () => {
      setLoading(true);
      try {
        const params = { page, size: 10 };
        if (search) params.keyword = search;
        const res = await ApiClient.getAdminBooks(params);
        if (res.data) {
          setBooks(res.data.content || []);
          setPageData({ totalPages: res.data.totalPages || 0, totalElements: res.data.totalElements || 0 });
        }
      } catch (err) { showToast(err.message, 'error'); }
      finally { setLoading(false); }
    }, [page, search]);

    useEffect(() => { fetchBooks(); }, [fetchBooks]);
    useEffect(() => {
      ApiClient.getCategories().then(r => { if (r.data) setCategories(r.data); }).catch(() => {});
    }, []);

    const handleSave = async (e) => {
      e.preventDefault();
      const form = e.target;
      const data = {
        title: form.title.value,
        isbn: form.isbn.value,
        price: parseFloat(form.price.value),
        discountPrice: form.discountPrice.value ? parseFloat(form.discountPrice.value) : null,
        description: form.description.value,
        categoryId: parseInt(form.categoryId.value),
        stockQuantity: parseInt(form.stockQuantity.value),
        coverImage: form.coverImage.value || null,
        active: true,
      };

      try {
        if (editBook && editBook.id) {
          await ApiClient.updateBook(editBook.id, data);
          showToast('Book updated successfully!', 'success');
        } else {
          await ApiClient.createBook(data);
          showToast('Book created successfully!', 'success');
        }
        setEditBook(null);
        fetchBooks();
      } catch (err) { showToast(err.message, 'error'); }
    };

    const handleDelete = async () => {
      try {
        await ApiClient.deleteBook(deleteId);
        showToast('Book deleted successfully', 'success');
        fetchBooks();
      } catch (err) { showToast(err.message, 'error'); }
    };

    return (
      <div className="space-y-5">
        <div className="flex flex-wrap items-center justify-between gap-4">
          <h1 className="font-serif text-2xl font-bold text-stone-900">Book Catalog Management</h1>
          <button onClick={() => setEditBook({})}
                  className="px-4 py-2 bg-gradient-to-r from-amber-600 to-amber-700 text-white font-bold rounded-2xl shadow transition-all hover:shadow-lg text-xs">
            <i className="fa-solid fa-plus mr-2"></i>Add New Book
          </button>
        </div>

        {/* Search Input */}
        <div className="relative max-w-sm">
          <i className="fa-solid fa-magnifying-glass absolute left-3.5 top-1/2 -translate-y-1/2 text-stone-400 text-xs"></i>
          <input value={search} onChange={e => { setSearch(e.target.value); setPage(0); }}
                 placeholder="Search by title, ISBN..."
                 className="warm-light-input pl-10 py-2 text-xs" />
        </div>

        {/* Table */}
        {loading ? <LoadingSpinner /> : (
          <>
            <div className="bg-white border border-stone-200 rounded-3xl overflow-hidden shadow-sm">
              <div className="overflow-x-auto">
                <table className="w-full text-left text-xs">
                  <thead>
                    <tr className="border-b border-stone-200 text-stone-500 font-bold uppercase tracking-wider bg-stone-50">
                      <th className="p-4">ID</th>
                      <th className="p-4">Book Details</th>
                      <th className="p-4">Category</th>
                      <th className="p-4">Price</th>
                      <th className="p-4">Stock</th>
                      <th className="p-4 text-center">Actions</th>
                    </tr>
                  </thead>
                  <tbody>
                    {books.map(b => (
                      <tr key={b.id} className="border-b border-stone-100 hover:bg-stone-50 transition-colors">
                        <td className="p-4 text-stone-400 font-mono text-[11px]">#{b.id}</td>
                        <td className="p-4">
                          <div className="flex items-center gap-3">
                            <img src={b.coverImage || 'https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?auto=format&fit=crop&w=100&q=80'}
                                 className="w-9 h-12 object-cover rounded-md shadow-sm border border-stone-200" alt="" />
                            <div>
                              <p className="font-serif font-bold text-stone-900">{b.title}</p>
                              <p className="text-[10px] text-stone-400">ISBN: {b.isbn}</p>
                            </div>
                          </div>
                        </td>
                        <td className="p-4 font-semibold text-stone-700">{b.categoryName || '—'}</td>
                        <td className="p-4">
                          <span className="text-amber-800 font-bold">{formatCurrency(b.discountPrice || b.price)}</span>
                          {b.discountPrice && <span className="text-[10px] text-stone-400 line-through ml-1">{formatCurrency(b.price)}</span>}
                        </td>
                        <td className="p-4">
                          <span className={`text-[10px] font-bold px-2 py-0.5 rounded-full border ${
                            b.stockQuantity > 10 ? 'bg-emerald-50 text-emerald-800 border-emerald-200' : 'bg-rose-50 text-rose-800 border-rose-200'
                          }`}>
                            {b.stockQuantity ?? 0}
                          </span>
                        </td>
                        <td className="p-4 text-center">
                          <div className="flex justify-center gap-2">
                            <button onClick={() => setEditBook(b)}
                                    className="p-1.5 bg-amber-50 text-amber-700 rounded-lg hover:bg-amber-100 transition-all">
                              <i className="fa-solid fa-pen-to-square"></i>
                            </button>
                            <button onClick={() => setDeleteId(b.id)}
                                    className="p-1.5 bg-rose-50 text-rose-700 rounded-lg hover:bg-rose-100 transition-all">
                              <i className="fa-solid fa-trash"></i>
                            </button>
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
            <Pagination currentPage={page} totalPages={pageData.totalPages}
                        totalElements={pageData.totalElements} onPageChange={setPage} />
          </>
        )}

        {/* Modal */}
        <Modal isOpen={editBook !== null} onClose={() => setEditBook(null)}
               title={editBook?.id ? 'Edit Book Details' : 'Add New Book'} maxWidth="max-w-lg">
          <form onSubmit={handleSave} className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="col-span-2">
                <label className="block text-xs font-bold text-stone-700 mb-1">Book Title *</label>
                <input name="title" required defaultValue={editBook?.title || ''} className="admin-input" />
              </div>
              <div>
                <label className="block text-xs font-bold text-stone-700 mb-1">ISBN Code</label>
                <input name="isbn" defaultValue={editBook?.isbn || ''} className="admin-input" />
              </div>
              <div>
                <label className="block text-xs font-bold text-stone-700 mb-1">Category</label>
                <select name="categoryId" defaultValue={editBook?.categoryId || ''} className="admin-input">
                  <option value="">Select Category</option>
                  {categories.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
                </select>
              </div>
              <div>
                <label className="block text-xs font-bold text-stone-700 mb-1">Standard Price *</label>
                <input name="price" type="number" required defaultValue={editBook?.price || ''} className="admin-input" />
              </div>
              <div>
                <label className="block text-xs font-bold text-stone-700 mb-1">Discount Price</label>
                <input name="discountPrice" type="number" defaultValue={editBook?.discountPrice || ''} className="admin-input" />
              </div>
              <div>
                <label className="block text-xs font-bold text-stone-700 mb-1">Stock Quantity *</label>
                <input name="stockQuantity" type="number" required defaultValue={editBook?.stockQuantity ?? 0} className="admin-input" />
              </div>
              <div>
                <label className="block text-xs font-bold text-stone-700 mb-1">Cover Image URL</label>
                <input name="coverImage" defaultValue={editBook?.coverImage || ''} className="admin-input" />
              </div>
              <div className="col-span-2">
                <label className="block text-xs font-bold text-stone-700 mb-1">Description / Synopsis</label>
                <textarea name="description" rows="3" defaultValue={editBook?.description || ''} className="admin-input"></textarea>
              </div>
            </div>
            <button type="submit"
                    className="w-full py-2.5 bg-amber-600 hover:bg-amber-700 text-white font-bold rounded-xl transition-all text-xs">
              {editBook?.id ? 'Update Book' : 'Create Book'}
            </button>
          </form>
        </Modal>

        <ConfirmDialog isOpen={deleteId !== null} onClose={() => setDeleteId(null)} onConfirm={handleDelete}
                       title="Delete Book?" message="Are you sure you want to remove this book from catalog?" />
      </div>
    );
  }

  /* ══════════════════════════════════════════════════════════════════════
     ADMIN ORDERS PAGE
     ══════════════════════════════════════════════════════════════════════ */
  function AdminOrdersPage() {
    const { showToast } = window.useApp();
    const formatCurrency = window.formatCurrency;
    const Pagination = window.Pagination;
    const LoadingSpinner = window.LoadingSpinner;

    const [orders, setOrders] = useState([]);
    const [loading, setLoading] = useState(true);
    const [page, setPage] = useState(0);
    const [pageData, setPageData] = useState({ totalPages: 0, totalElements: 0 });
    const [filterStatus, setFilterStatus] = useState('');

    const statuses = ['PENDING', 'CONFIRMED', 'PROCESSING', 'SHIPPING', 'DELIVERED', 'CANCELLED'];

    const fetchOrders = useCallback(async () => {
      setLoading(true);
      try {
        const params = { page, size: 10 };
        if (filterStatus) params.orderStatus = filterStatus;
        const res = await ApiClient.getAdminOrders(params);
        if (res.data) {
          setOrders(res.data.content || []);
          setPageData({ totalPages: res.data.totalPages || 0, totalElements: res.data.totalElements || 0 });
        }
      } catch (err) { showToast(err.message, 'error'); }
      finally { setLoading(false); }
    }, [page, filterStatus]);

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

    const handleUpdateStatus = async (orderId, newStatus) => {
      try {
        await ApiClient.updateOrderStatus(orderId, newStatus);
        showToast('Order status updated successfully', 'success');
        fetchOrders();
      } catch (err) { showToast(err.message, 'error'); }
    };

    return (
      <div className="space-y-5">
        <h1 className="font-serif text-2xl font-bold text-stone-900">Customer Order Fulfillment</h1>

        {/* Filter Pills */}
        <div className="flex flex-wrap gap-2">
          <button onClick={() => { setFilterStatus(''); setPage(0); }}
                  className={`px-3 py-1.5 rounded-full text-xs font-semibold border ${
                    !filterStatus ? 'bg-amber-100 border-amber-300 text-amber-900' : 'bg-white border-stone-200 text-stone-600'
                  }`}>
            All Statuses
          </button>
          {statuses.map(s => (
            <button key={s} onClick={() => { setFilterStatus(s); setPage(0); }}
                    className={`px-3 py-1.5 rounded-full text-xs font-semibold border ${
                      filterStatus === s ? 'bg-amber-100 border-amber-300 text-amber-900' : 'bg-white border-stone-200 text-stone-600'
                    }`}>
              {s}
            </button>
          ))}
        </div>

        {loading ? <LoadingSpinner /> : (
          <>
            <div className="bg-white border border-stone-200 rounded-3xl overflow-hidden shadow-sm">
              <div className="overflow-x-auto">
                <table className="w-full text-left text-xs">
                  <thead>
                    <tr className="border-b border-stone-200 text-stone-500 font-bold uppercase tracking-wider bg-stone-50">
                      <th className="p-4">Order Code</th>
                      <th className="p-4">Customer</th>
                      <th className="p-4">Total Price</th>
                      <th className="p-4">Payment</th>
                      <th className="p-4">Fulfillment Status</th>
                      <th className="p-4">Date</th>
                    </tr>
                  </thead>
                  <tbody>
                    {orders.map(o => (
                      <tr key={o.id} className="border-b border-stone-100 hover:bg-stone-50 transition-colors">
                        <td className="p-4 font-mono font-bold text-amber-800">{o.orderCode}</td>
                        <td className="p-4">
                          <p className="font-bold text-stone-900">{o.receiverName}</p>
                          <p className="text-[10px] text-stone-400">{o.receiverPhone}</p>
                        </td>
                        <td className="p-4 font-extrabold text-amber-800">{formatCurrency(o.totalAmount)}</td>
                        <td className="p-4 font-semibold text-stone-700">{o.paymentMethod}</td>
                        <td className="p-4">
                          <select value={o.orderStatus} onChange={e => handleUpdateStatus(o.id, e.target.value)}
                                  className="warm-light-input py-1 px-2 text-xs">
                            {statuses.map(s => <option key={s} value={s}>{s}</option>)}
                          </select>
                        </td>
                        <td className="p-4 text-stone-400 text-[11px]">
                          {o.createdAt ? new Date(o.createdAt).toLocaleDateString('en-US') : '—'}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
            <Pagination currentPage={page} totalPages={pageData.totalPages}
                        totalElements={pageData.totalElements} onPageChange={setPage} />
          </>
        )}
      </div>
    );
  }

  /* ══════════════════════════════════════════════════════════════════════
     ADMIN USERS PAGE
     ══════════════════════════════════════════════════════════════════════ */
  function AdminUsersPage() {
    const { showToast } = window.useApp();
    const Pagination = window.Pagination;
    const LoadingSpinner = window.LoadingSpinner;

    const [users, setUsers] = useState([]);
    const [loading, setLoading] = useState(true);
    const [page, setPage] = useState(0);
    const [pageData, setPageData] = useState({ totalPages: 0, totalElements: 0 });
    const [search, setSearch] = useState('');

    const fetchUsers = useCallback(async () => {
      setLoading(true);
      try {
        const params = { page, size: 10 };
        if (search) params.search = search;
        const res = await ApiClient.getAdminUsers(params);
        if (res.data) {
          setUsers(res.data.content || []);
          setPageData({ totalPages: res.data.totalPages || 0, totalElements: res.data.totalElements || 0 });
        }
      } catch (err) { showToast(err.message, 'error'); }
      finally { setLoading(false); }
    }, [page, search]);

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

    const handleToggleStatus = async (userId, currentEnabled) => {
      try {
        await ApiClient.updateUserStatus(userId, { enabled: !currentEnabled });
        showToast(`User status updated successfully`, 'success');
        fetchUsers();
      } catch (err) { showToast(err.message, 'error'); }
    };

    return (
      <div className="space-y-5">
        <h1 className="font-serif text-2xl font-bold text-stone-900">User Account Management</h1>

        <div className="relative max-w-sm">
          <i className="fa-solid fa-magnifying-glass absolute left-3.5 top-1/2 -translate-y-1/2 text-stone-400 text-xs"></i>
          <input value={search} onChange={e => { setSearch(e.target.value); setPage(0); }}
                 placeholder="Search by name, email..."
                 className="warm-light-input pl-10 py-2 text-xs" />
        </div>

        {loading ? <LoadingSpinner /> : (
          <>
            <div className="bg-white border border-stone-200 rounded-3xl overflow-hidden shadow-sm">
              <div className="overflow-x-auto">
                <table className="w-full text-left text-xs">
                  <thead>
                    <tr className="border-b border-stone-200 text-stone-500 font-bold uppercase tracking-wider bg-stone-50">
                      <th className="p-4">ID</th>
                      <th className="p-4">Reader Name</th>
                      <th className="p-4">Email Address</th>
                      <th className="p-4">Phone</th>
                      <th className="p-4">Account Status</th>
                      <th className="p-4 text-center">Action</th>
                    </tr>
                  </thead>
                  <tbody>
                    {users.map(u => (
                      <tr key={u.id} className="border-b border-stone-100 hover:bg-stone-50 transition-colors">
                        <td className="p-4 text-stone-400 font-mono text-[11px]">#{u.id}</td>
                        <td className="p-4">
                          <div className="flex items-center gap-2">
                            <div className="w-7 h-7 bg-amber-100 text-amber-800 rounded-full flex items-center justify-center font-bold text-xs">
                              {(u.fullName || 'U').charAt(0).toUpperCase()}
                            </div>
                            <span className="font-bold text-stone-900">{u.fullName}</span>
                          </div>
                        </td>
                        <td className="p-4 text-stone-600">{u.email}</td>
                        <td className="p-4 text-stone-500">{u.phone || '—'}</td>
                        <td className="p-4">
                          <span className={`text-[10px] font-bold px-2 py-0.5 rounded-full border ${
                            u.enabled !== false ? 'bg-emerald-50 text-emerald-800 border-emerald-200' : 'bg-rose-50 text-rose-800 border-rose-200'
                          }`}>
                            {u.enabled !== false ? 'Active' : 'Disabled'}
                          </span>
                        </td>
                        <td className="p-4 text-center">
                          <button onClick={() => handleToggleStatus(u.id, u.enabled !== false)}
                                  className={`px-3 py-1 rounded-lg text-xs font-bold transition-all ${
                                    u.enabled !== false ? 'bg-rose-50 text-rose-700 hover:bg-rose-100' : 'bg-emerald-50 text-emerald-700 hover:bg-emerald-100'
                                  }`}>
                            {u.enabled !== false ? 'Disable' : 'Enable'}
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
            <Pagination currentPage={page} totalPages={pageData.totalPages}
                        totalElements={pageData.totalElements} onPageChange={setPage} />
          </>
        )}
      </div>
    );
  }

  /* ══════════════════════════════════════════════════════════════════════
     ADMIN COUPONS PAGE
     ══════════════════════════════════════════════════════════════════════ */
  function AdminCouponsPage() {
    const { showToast } = window.useApp();
    const formatCurrency = window.formatCurrency;
    const Modal = window.Modal;
    const ConfirmDialog = window.ConfirmDialog;
    const LoadingSpinner = window.LoadingSpinner;

    const [coupons, setCoupons] = useState([]);
    const [loading, setLoading] = useState(true);
    const [editCoupon, setEditCoupon] = useState(null);
    const [deleteId, setDeleteId] = useState(null);

    const fetchCoupons = async () => {
      setLoading(true);
      try {
        const res = await ApiClient.getAdminCoupons();
        if (res.data) setCoupons(res.data);
      } catch (err) { showToast(err.message, 'error'); }
      finally { setLoading(false); }
    };

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

    const handleSave = async (e) => {
      e.preventDefault();
      const form = e.target;
      const data = {
        code: form.code.value,
        discountType: form.discountType.value,
        discountValue: parseFloat(form.discountValue.value),
        minimumAmount: form.minimumAmount.value ? parseFloat(form.minimumAmount.value) : null,
        maxUsage: form.maxUsage.value ? parseInt(form.maxUsage.value) : null,
        startDate: form.startDate.value || null,
        endDate: form.endDate.value || null,
        active: true,
      };

      try {
        if (editCoupon && editCoupon.id) {
          await ApiClient.updateCoupon(editCoupon.id, data);
          showToast('Coupon updated successfully!', 'success');
        } else {
          await ApiClient.createCoupon(data);
          showToast('Coupon created successfully!', 'success');
        }
        setEditCoupon(null);
        fetchCoupons();
      } catch (err) { showToast(err.message, 'error'); }
    };

    const handleDelete = async () => {
      try {
        await ApiClient.deleteCoupon(deleteId);
        showToast('Coupon deleted successfully', 'success');
        fetchCoupons();
      } catch (err) { showToast(err.message, 'error'); }
    };

    return (
      <div className="space-y-5">
        <div className="flex items-center justify-between">
          <h1 className="font-serif text-2xl font-bold text-stone-900">Discount Coupons Management</h1>
          <button onClick={() => setEditCoupon({})}
                  className="px-4 py-2 bg-gradient-to-r from-amber-600 to-amber-700 text-white font-bold rounded-2xl text-xs">
            <i className="fa-solid fa-plus mr-2"></i>Create Coupon
          </button>
        </div>

        {loading ? <LoadingSpinner /> : (
          <div className="bg-white border border-stone-200 rounded-3xl overflow-hidden shadow-sm">
            <div className="overflow-x-auto">
              <table className="w-full text-left text-xs">
                <thead>
                  <tr className="border-b border-stone-200 text-stone-500 font-bold uppercase tracking-wider bg-stone-50">
                    <th className="p-4">Code</th>
                    <th className="p-4">Type</th>
                    <th className="p-4">Value</th>
                    <th className="p-4">Min Amount</th>
                    <th className="p-4">Usage</th>
                    <th className="p-4">Expiry Date</th>
                    <th className="p-4 text-center">Action</th>
                  </tr>
                </thead>
                <tbody>
                  {coupons.map(c => (
                    <tr key={c.id} className="border-b border-stone-100 hover:bg-stone-50 transition-colors">
                      <td className="p-4 font-mono font-bold text-amber-800">{c.code}</td>
                      <td className="p-4 text-stone-600 font-medium">{c.discountType}</td>
                      <td className="p-4 font-extrabold text-amber-800">
                        {c.discountType === 'PERCENTAGE' ? `${c.discountValue}%` : formatCurrency(c.discountValue)}
                      </td>
                      <td className="p-4 text-stone-500">{c.minimumAmount ? formatCurrency(c.minimumAmount) : '—'}</td>
                      <td className="p-4 text-stone-700 font-medium">{c.currentUsage || 0} / {c.maxUsage || '∞'}</td>
                      <td className="p-4 text-stone-400">
                        {c.endDate ? new Date(c.endDate).toLocaleDateString('en-US') : '—'}
                      </td>
                      <td className="p-4 text-center">
                        <div className="flex justify-center gap-2">
                          <button onClick={() => setEditCoupon(c)}
                                  className="p-1.5 bg-amber-50 text-amber-700 rounded-lg hover:bg-amber-100">
                            <i className="fa-solid fa-pen-to-square"></i>
                          </button>
                          <button onClick={() => setDeleteId(c.id)}
                                  className="p-1.5 bg-rose-50 text-rose-700 rounded-lg hover:bg-rose-100">
                            <i className="fa-solid fa-trash"></i>
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {/* Coupon Form Modal */}
        <Modal isOpen={editCoupon !== null} onClose={() => setEditCoupon(null)}
               title={editCoupon?.id ? 'Edit Coupon' : 'Create New Coupon'} maxWidth="max-w-md">
          <form onSubmit={handleSave} className="space-y-4">
            <div>
              <label className="block text-xs font-bold text-stone-700 mb-1">Coupon Code *</label>
              <input name="code" required defaultValue={editCoupon?.code || ''} className="admin-input" placeholder="e.g. WELCOME10" />
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-xs font-bold text-stone-700 mb-1">Discount Type</label>
                <select name="discountType" defaultValue={editCoupon?.discountType || 'PERCENTAGE'} className="admin-input">
                  <option value="PERCENTAGE">Percentage (%)</option>
                  <option value="FIXED_AMOUNT">Fixed Amount</option>
                </select>
              </div>
              <div>
                <label className="block text-xs font-bold text-stone-700 mb-1">Value *</label>
                <input name="discountValue" type="number" required defaultValue={editCoupon?.discountValue || ''} className="admin-input" />
              </div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-xs font-bold text-stone-700 mb-1">Min Order Value</label>
                <input name="minimumAmount" type="number" defaultValue={editCoupon?.minimumAmount || ''} className="admin-input" />
              </div>
              <div>
                <label className="block text-xs font-bold text-stone-700 mb-1">Max Usage</label>
                <input name="maxUsage" type="number" defaultValue={editCoupon?.maxUsage || ''} className="admin-input" />
              </div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-xs font-bold text-stone-700 mb-1">Start Date</label>
                <input name="startDate" type="date" defaultValue={editCoupon?.startDate ? editCoupon.startDate.split('T')[0] : ''} className="admin-input" />
              </div>
              <div>
                <label className="block text-xs font-bold text-stone-700 mb-1">End Date</label>
                <input name="endDate" type="date" defaultValue={editCoupon?.endDate ? editCoupon.endDate.split('T')[0] : ''} className="admin-input" />
              </div>
            </div>
            <button type="submit"
                    className="w-full py-2.5 bg-amber-600 hover:bg-amber-700 text-white font-bold rounded-xl transition-all text-xs">
              {editCoupon?.id ? 'Update Coupon' : 'Create Coupon'}
            </button>
          </form>
        </Modal>

        <ConfirmDialog isOpen={deleteId !== null} onClose={() => setDeleteId(null)} onConfirm={handleDelete}
                       title="Delete Coupon?" message="Are you sure you want to remove this discount coupon?" />
      </div>
    );
  }

  /* ══════════════════════════════════════════════════════════════════════
     ADMIN CATEGORIES PAGE
     ══════════════════════════════════════════════════════════════════════ */
  function AdminCategoriesPage() {
    const { showToast } = window.useApp();
    const Modal = window.Modal;
    const ConfirmDialog = window.ConfirmDialog;
    const LoadingSpinner = window.LoadingSpinner;

    const [categories, setCategories] = useState([]);
    const [loading, setLoading] = useState(true);
    const [editCat, setEditCat] = useState(null);
    const [deleteId, setDeleteId] = useState(null);

    const fetchCategories = async () => {
      setLoading(true);
      try {
        const res = await ApiClient.getAdminCategories();
        if (res.data) setCategories(res.data);
      } catch (err) { showToast(err.message, 'error'); }
      finally { setLoading(false); }
    };

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

    const handleSave = async (e) => {
      e.preventDefault();
      const form = e.target;
      const data = {
        name: form.name.value,
        description: form.description.value || null,
      };

      try {
        if (editCat && editCat.id) {
          await ApiClient.updateCategory(editCat.id, data);
          showToast('Category updated successfully!', 'success');
        } else {
          await ApiClient.createCategory(data);
          showToast('Category created successfully!', 'success');
        }
        setEditCat(null);
        fetchCategories();
      } catch (err) { showToast(err.message, 'error'); }
    };

    const handleDelete = async () => {
      try {
        await ApiClient.deleteCategory(deleteId);
        showToast('Category deleted successfully', 'success');
        fetchCategories();
      } catch (err) { showToast(err.message, 'error'); }
    };

    return (
      <div className="space-y-5">
        <div className="flex items-center justify-between">
          <h1 className="font-serif text-2xl font-bold text-stone-900">Book Categories Management</h1>
          <button onClick={() => setEditCat({})}
                  className="px-4 py-2 bg-gradient-to-r from-amber-600 to-amber-700 text-white font-bold rounded-2xl text-xs">
            <i className="fa-solid fa-plus mr-2"></i>Add Category
          </button>
        </div>

        {loading ? <LoadingSpinner /> : (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            {categories.map(c => (
              <div key={c.id} className="bg-white border border-stone-200 rounded-3xl p-5 shadow-sm hover:border-amber-400 transition-all group">
                <div className="flex items-start justify-between mb-2">
                  <div className="w-9 h-9 bg-amber-100 rounded-xl flex items-center justify-center text-amber-800">
                    <i className="fa-solid fa-layer-group"></i>
                  </div>
                  <div className="flex gap-1">
                    <button onClick={() => setEditCat(c)}
                            className="p-1.5 bg-amber-50 text-amber-700 rounded-lg hover:bg-amber-100">
                      <i className="fa-solid fa-pen-to-square"></i>
                    </button>
                    <button onClick={() => setDeleteId(c.id)}
                            className="p-1.5 bg-rose-50 text-rose-700 rounded-lg hover:bg-rose-100">
                      <i className="fa-solid fa-trash"></i>
                    </button>
                  </div>
                </div>
                <h3 className="font-serif font-bold text-stone-900 text-base mb-1">{c.name}</h3>
                <p className="text-xs text-stone-500 line-clamp-2">{c.description || 'No description provided'}</p>
              </div>
            ))}
          </div>
        )}

        {/* Modal */}
        <Modal isOpen={editCat !== null} onClose={() => setEditCat(null)}
               title={editCat?.id ? 'Edit Category' : 'Create Category'} maxWidth="max-w-sm">
          <form onSubmit={handleSave} className="space-y-4">
            <div>
              <label className="block text-xs font-bold text-stone-700 mb-1">Category Name *</label>
              <input name="name" required defaultValue={editCat?.name || ''} className="admin-input" />
            </div>
            <div>
              <label className="block text-xs font-bold text-stone-700 mb-1">Description</label>
              <textarea name="description" rows="3" defaultValue={editCat?.description || ''} className="admin-input"></textarea>
            </div>
            <button type="submit"
                    className="w-full py-2.5 bg-amber-600 hover:bg-amber-700 text-white font-bold rounded-xl transition-all text-xs">
              {editCat?.id ? 'Update Category' : 'Create Category'}
            </button>
          </form>
        </Modal>

        <ConfirmDialog isOpen={deleteId !== null} onClose={() => setDeleteId(null)} onConfirm={handleDelete}
                       title="Delete Category?" message="Are you sure you want to remove this category?" />
      </div>
    );
  }

  /* ── Export ──────────────────────────────────────────────────────────── */
  Object.assign(window, {
    AdminLayout, AdminDashboardPage, AdminBooksPage, AdminOrdersPage,
    AdminUsersPage, AdminCouponsPage, AdminCategoriesPage
  });
})();