// admin-app.jsx — Standalone admin app with login, sidebar, routing

function AdminApp() {
  const [authed, setAuthed] = React.useState(() => sessionStorage.getItem('istabraq_admin') === '1');
  const [lang, setLang] = React.useState('ar');
  const [route, setRoute] = React.useState('dashboard');
  const [sideOpen, setSideOpen] = React.useState(false);

  React.useEffect(() => {
    document.documentElement.lang = lang;
    document.documentElement.dir = lang === 'ar' ? 'rtl' : 'ltr';
  }, [lang]);

  if (!authed) {
    return <AdminLogin onAuth={() => { sessionStorage.setItem('istabraq_admin', '1'); setAuthed(true); }} lang={lang} setLang={setLang} />;
  }

  return (
    <div className="adm-app" data-lang={lang}>
      <AdminSidebar route={route} setRoute={(r) => { setRoute(r); setSideOpen(false); }}
                    lang={lang} setLang={setLang}
                    open={sideOpen} onClose={() => setSideOpen(false)}
                    onLogout={() => { sessionStorage.removeItem('istabraq_admin'); setAuthed(false); }} />

      <main className="adm-main" data-screen-label={route}>
        <AdminTopbar route={route} onMenu={() => setSideOpen(true)} lang={lang} />

        <div className="adm-content">
          {route === 'dashboard'    && <FinanceDashboard    lang={lang} />}
          {route === 'transactions' && <FinanceTransactions lang={lang} />}
          {route === 'expenses'     && <FinanceExpenses     lang={lang} />}
          {route === 'invoices'     && <FinanceInvoices     lang={lang} />}
          {route === 'pnl'          && <FinancePnL          lang={lang} />}
          {route === 'tax'          && <FinanceTax          lang={lang} />}
          {route === 'products'     && <AdminProducts       lang={lang} />}
          {route === 'orders'       && <AdminOrders         lang={lang} />}
          {route === 'analytics'    && <AdminStats          lang={lang} />}
          {route === 'customers'    && <AdminCustomers      lang={lang} />}
          {route === 'settings'     && <AdminSettings       lang={lang} />}
        </div>
      </main>
    </div>
  );
}

function AdminLogin({ onAuth, lang, setLang }) {
  const t = (ar, en) => lang === 'ar' ? ar : en;
  const [email, setEmail] = React.useState('admin@istabraq.ae');
  const [pwd, setPwd] = React.useState('••••••••');
  const submit = (e) => { e.preventDefault(); onAuth(); };
  return (
    <div className="adm-login" data-lang={lang}>
      <div className="adm-login-l">
        <div className="adm-login-brand">
          <div className="brand-mark" style={{ fontSize: 44 }}>{t('استبرق', 'ISTABRAQ')}</div>
          <div className="brand-mark-en" style={{ fontSize: 12, marginTop: 6 }}>{t('Admin Dashboard · لوحة التحكم', 'Admin Dashboard')}</div>
        </div>
        <form onSubmit={submit} className="adm-login-form">
          <div className="eyebrow">{t('تسجيل الدخول', 'Sign in')}</div>
          <h1 className="h-display" style={{ fontSize: 'clamp(40px, 5vw, 56px)', lineHeight: 1, margin: '8px 0 32px' }}>
            {t('أهلاً بعودتك.', 'Welcome back.')}
          </h1>
          <div className="field"><label>{t('البريد الإلكتروني', 'Email')}</label><input type="email" value={email} onChange={e => setEmail(e.target.value)} autoFocus /></div>
          <div className="field" style={{ marginTop: 20 }}><label>{t('كلمة المرور', 'Password')}</label><input type="password" value={pwd} onChange={e => setPwd(e.target.value)} /></div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 20, fontSize: 12, color: 'var(--ink-3)' }}>
            <label style={{ display: 'inline-flex', alignItems: 'center', gap: 6, cursor: 'pointer' }}>
              <input type="checkbox" defaultChecked /> {t('تذكّرني', 'Remember me')}
            </label>
            <a style={{ cursor: 'pointer', color: 'var(--ink-2)' }}>{t('نسيت كلمة المرور؟', 'Forgot password?')}</a>
          </div>
          <button className="btn full lg" style={{ marginTop: 32 }} type="submit">
            <I.lock /> {t('دخول الإدارة', 'Enter dashboard')}
          </button>
          <div style={{ marginTop: 28, padding: 14, background: 'var(--bg-2)', borderRadius: 4, fontSize: 11, color: 'var(--ink-3)' }}>
            <strong style={{ color: 'var(--ink-2)' }}>{t('وصول آمن', 'Secure access')} · </strong>
            {t('هذه اللوحة مخصّصة للإدارة فقط. اتصال مشفّر TLS 1.3.', 'Admin only. Encrypted TLS 1.3 connection.')}
          </div>
        </form>
        <div className="adm-login-foot">
          <a href="Istabraq Perfumery.html" style={{ color: 'var(--ink-3)', fontSize: 12 }}><I.arrowL /> {t('العودة إلى المتجر', 'Back to storefront')}</a>
          <div className="lang-toggle">
            <button className={lang === 'ar' ? 'active' : ''} onClick={() => setLang('ar')}>ع</button>
            <button className={lang === 'en' ? 'active' : ''} onClick={() => setLang('en')}>EN</button>
          </div>
        </div>
      </div>
      <div className="adm-login-r">
        <div className="adm-login-bottle" />
        <div className="adm-login-quote">
          <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.5)' }}>{t('بيان', 'Manifesto')}</div>
          <p>{t('"من قلب الهند إلى خزانتك. كل قطرة، كل دفتر، كل عميل."', '"From the heart of India to your shelf. Every drop, every ledger, every customer."')}</p>
        </div>
      </div>
    </div>
  );
}

function AdminSidebar({ route, setRoute, lang, setLang, open, onClose, onLogout }) {
  const t = (ar, en) => lang === 'ar' ? ar : en;
  const groups = [
    {
      title: t('المالية', 'Finance'),
      items: [
        { id: 'dashboard',    label: t('لوحة الإيرادات', 'Overview'),       icon: <I.chart /> },
        { id: 'transactions', label: t('المعاملات',       'Transactions'),   icon: <I.wallet /> },
        { id: 'expenses',     label: t('المصاريف',        'Expenses'),       icon: <I.expense /> },
        { id: 'invoices',     label: t('الفواتير',        'Invoices'),       icon: <I.invoice /> },
        { id: 'pnl',          label: t('الأرباح والخسائر', 'P & L'),          icon: <I.income /> },
        { id: 'tax',          label: t('الضرائب',          'VAT & Tax'),      icon: <I.tax /> },
      ],
    },
    {
      title: t('المتجر', 'Store'),
      items: [
        { id: 'products',  label: t('المنتجات', 'Products'),  icon: <I.box /> },
        { id: 'orders',    label: t('الطلبات',  'Orders'),    icon: <I.receipt /> },
        { id: 'analytics', label: t('التحليلات', 'Analytics'), icon: <I.chart /> },
        { id: 'customers', label: t('العملاء',  'Customers'), icon: <I.users /> },
        { id: 'settings',  label: t('الإعدادات', 'Settings'),  icon: <I.settings /> },
      ],
    },
  ];

  return (
    <>
      {open && <div className="adm-side-back" onClick={onClose} />}
      <aside className={'adm-side' + (open ? ' open' : '')}>
        <div className="adm-side-brand">
          <div className="brand-mark">{t('استبرق', 'ISTABRAQ')}</div>
          <div className="brand-mark-en">Admin · لوحة التحكم</div>
        </div>

        <nav className="adm-side-nav">
          {groups.map(g => (
            <div key={g.title} className="adm-side-group">
              <div className="adm-side-title">{g.title}</div>
              {g.items.map(it => (
                <a key={it.id} className={'adm-side-link' + (route === it.id ? ' on' : '')}
                   onClick={() => setRoute(it.id)}>
                  {it.icon}<span>{it.label}</span>
                </a>
              ))}
            </div>
          ))}
        </nav>

        <div className="adm-side-foot">
          <div className="adm-side-user">
            <div className="adm-side-avatar">A</div>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 500 }}>{t('المدير', 'Admin')}</div>
              <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>admin@istabraq.ae</div>
            </div>
          </div>
          <div className="adm-side-foot-row">
            <div className="lang-toggle">
              <button className={lang === 'ar' ? 'active' : ''} onClick={() => setLang('ar')}>ع</button>
              <button className={lang === 'en' ? 'active' : ''} onClick={() => setLang('en')}>EN</button>
            </div>
            <button className="adm-side-logout" onClick={onLogout}><I.logout /> {t('خروج', 'Sign out')}</button>
          </div>
          <a href="Istabraq Perfumery.html" className="adm-side-store">
            ↗ {t('عرض المتجر', 'View storefront')}
          </a>
        </div>
      </aside>
    </>
  );
}

function AdminTopbar({ route, onMenu, lang }) {
  const t = (ar, en) => lang === 'ar' ? ar : en;
  const labels = {
    dashboard: t('لوحة الإيرادات', 'Financial Overview'),
    transactions: t('المعاملات', 'Transactions'),
    expenses: t('المصاريف', 'Expenses'),
    invoices: t('الفواتير', 'Invoices'),
    pnl: t('الأرباح والخسائر', 'Profit & Loss'),
    tax: t('الضرائب', 'VAT & Tax'),
    products: t('المنتجات', 'Products'),
    orders: t('الطلبات', 'Orders'),
    analytics: t('التحليلات', 'Analytics'),
    customers: t('العملاء', 'Customers'),
    settings: t('الإعدادات', 'Settings'),
  };
  return (
    <header className="adm-top">
      <button className="adm-menu-btn" onClick={onMenu} aria-label="menu"><I.menu /></button>
      <div className="adm-top-crumbs">
        <span>{t('الإدارة', 'Admin')}</span>
        <span className="sep">/</span>
        <span style={{ color: 'var(--ink)' }}>{labels[route] || route}</span>
      </div>
      <div className="adm-top-right">
        <div className="adm-search">
          <I.search />
          <input placeholder={t('ابحث في كل شيء…', 'Search anything…')} />
          <span className="adm-search-key">⌘K</span>
        </div>
        <button className="icon-btn"><I.user /></button>
      </div>
    </header>
  );
}

window.AdminApp = AdminApp;