/* eslint-disable */
/* =============================================================
   AdminPage — internal admin console (fullscreen, own shell)
   Sub-views from hash param:
     #/admin · /users · /userdetail · /content · /payments
     · /reports · /notes · /ai · /support · /settings · /logs
   Reads globals: Icon, HDToast
   ============================================================= */
(function () {
  const { useState } = React;

  const NAV = [
    { id: "admin", icon: "overview", ar: "نظرة عامة", en: "Overview" },
    { id: "beta", icon: "crown", ar: "طلبات البيتا", en: "Beta access" },
    { id: "users", icon: "users", ar: "المستخدمون", en: "Users" },
    { id: "reports", icon: "download", ar: "التقارير وملفات PDF", en: "Reports & PDF" },
    { id: "notes", icon: "edit", ar: "ملاحظات المستخدمين", en: "User notes" },
    { id: "ai", icon: "sparkle", ar: "جلسات الذكاء الاصطناعي", en: "AI sessions" },
    { id: "payments", icon: "crown", ar: "الفوترة والاشتراكات", en: "Billing" },
    { id: "support", icon: "support", ar: "الدعم والمساعدة", en: "Support" },
    { id: "content", icon: "guide", ar: "إدارة المحتوى", en: "Content" },
    { id: "settings", icon: "settings", ar: "إعدادات النظام", en: "System settings" },
    { id: "logs", icon: "clock", ar: "سجلات النشاط", en: "Activity logs" },
  ];

  const Donut = ({ segments, total, label }) => {
    let acc = 0; const stops = segments.map((s) => { const from = acc; acc += s.v; return `${s.c} ${(from / total) * 100}% ${(acc / total) * 100}%`; }).join(", ");
    return (
      <div className="adm-donut" style={{ background: `conic-gradient(${stops})` }}>
        <div className="adm-donut-center"><b>{total.toLocaleString()}</b><span>{label}</span></div>
      </div>
    );
  };
  const Bars = ({ data, max }) => (
    <div className="adm-bars">{data.map((v, i) => <div key={i} className="adm-bar" style={{ height: `${(v / max) * 100}%` }} />)}</div>
  );
  const Line = ({ series, w = 520, h = 180 }) => {
    const maxV = Math.max(...series.flatMap((s) => s.points));
    const pts = (arr) => arr.map((v, i) => `${(i / (arr.length - 1)) * w},${h - (v / maxV) * (h - 10)}`).join(" ");
    return (
      <svg className="adm-line-svg" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
        {series.map((s, i) => <polyline key={i} fill="none" stroke={s.c} strokeWidth="2.5" points={pts(s.points)} />)}
      </svg>
    );
  };

  /* الحساب المفتوح في شاشة التفاصيل. الراوتر يستهلك خانة الـparam
     للـview، فلا مكان لمعرّفٍ ثانٍ في المسار — ويُحفَظ هنا. */
  let SELECTED_ACCOUNT = null;

  window.AdminPage = function AdminPage({ lang, onRoute, param }) {
    const ar = lang === "ar";
    const view = param || "admin";
    const tt = (a, e) => (ar ? a : e);
    const toast = (type, title, msg) => window.HDToast && HDToast.show({ type, title, msg });
    const cur = NAV.find((n) => n.id === view) || NAV[0];

    const Body = () => {
      if (view === "users") return <Users ar={ar} onRoute={onRoute} tt={tt} />;
      if (view === "beta") return <BetaApps ar={ar} tt={tt} toast={toast} />;
      if (view === "userdetail") return <UserDetail ar={ar} onRoute={onRoute} tt={tt} toast={toast} accountId={SELECTED_ACCOUNT} />;
      if (view === "content") return <Content ar={ar} tt={tt} toast={toast} />;
      if (view === "payments") return <Payments ar={ar} tt={tt} />;
      if (view === "admin") return <Dashboard ar={ar} onRoute={onRoute} tt={tt} toast={toast} />;
      return <Generic cur={cur} ar={ar} tt={tt} />;
    };

    return (
      <div className="admin-root">
        <aside className="adm-side">
          <div className="adm-brand"><span className="adm-brand-orb"><Icon.sparkle size={18} /></span><div className="adm-brand-tx"><strong>HUMAN DESIGN</strong><span>{tt("لوحة الإدارة", "Admin console")}</span></div></div>
          <nav className="adm-nav">
            {NAV.map((n) => { const I = Icon[n.icon] || Icon.overview; return (
              <button key={n.id} className={`adm-nav-item ${view === n.id ? "active" : ""}`} onClick={() => onRoute("admin/" + n.id)}><I size={17} /><span>{ar ? n.ar : n.en}</span></button>
            ); })}
          </nav>
          <div className="adm-side-foot">
            {/* كان «المستوى: بريميوم» — والدفع أُزيل من المنتج (§12). */}
            <span className="pf-h"><Icon.crown size={15} /> {tt("صلاحية كاملة", "Full access")}</span>
            <span>{tt("لوحة الإدارة الكاملة", "Full admin access")}</span>
            <button className="adm-exit" onClick={() => onRoute("home")}><Icon.chevRight size={13} /> {tt("الخروج إلى التطبيق", "Exit to app")}</button>
          </div>
        </aside>

        <div className="adm-main">
          <header className="adm-top">
            <div className="adm-top-pickers">
              <span className="adm-pick"><Icon.calendar size={14} /> {tt("مايو 2025", "May 2025")}</span>
              <span className="adm-pick"><Icon.clock size={14} /> {tt("آخر 7 أيام", "Last 7 days")}</span>
            </div>
            <div className="adm-title-block"><div className="adm-title">{ar ? cur.ar : cur.en}</div><div className="adm-crumb">{tt("مركز إدارة نظام Human Design", "Human Design admin")}</div></div>
            <div className="adm-top-actions">
              <button className="adm-bell"><Icon.bell size={17} /><b>8</b></button>
              <div className="adm-user"><div className="adm-user-tx"><strong>{tt("عبدالرحمن محمد", "Abdulrahman M.")}</strong><span>{tt("مدير النظام", "System admin")}</span></div><div className="adm-user-av">{tt("ع", "A")}</div></div>
            </div>
          </header>
          <div className="adm-body fade-in" key={view}><Body /></div>
        </div>
      </div>
    );
  };

  // ════════════════════════════ DASHBOARD ════════════════════════════
  function Dashboard({ ar, onRoute, tt, toast }) {
    const kpis = [
      { l: tt("النظام Uptime", "Uptime"), v: "99.98%", d: "+0.02%", up: true, ic: "lock", a: "green" },
      { l: tt("جلسات AI المعلّمة", "Flagged AI"), v: "23", d: "-8.6%", up: true, ic: "sparkle", a: "gold" },
      { l: tt("ملاحظات غير محلولة", "Open notes"), v: "89", d: "-5.6%", up: true, ic: "edit", a: "violet" },
      { l: tt("التقارير المصدرة", "Reports"), v: "652", d: "+11.1%", up: true, ic: "download", a: "violet" },
      { l: tt("خرائط اليوم", "Charts today"), v: "1,842", d: "+15.3%", up: true, ic: "guide", a: "violet" },
      { l: tt("مختبرو Beta", "Beta testers"), v: "3,284", d: "+8.7%", up: true, ic: "crown", a: "gold" },
      { l: tt("إجمالي المستخدمين", "Total users"), v: "28,451", d: "+12.4%", up: true, ic: "users", a: "violet" },
    ];
    const acts = [
      { ic: "guide", t: tt("تم إنشاء خريطة جديدة", "New chart created"), s: tt("من قِبل سارة محمد", "by Sara M."), m: tt("منذ 5 دقائق", "5m ago") },
      { ic: "download", t: tt("تصدير تقرير PDF", "PDF report exported"), s: tt("من قِبل أحمد خالد", "by Ahmed K."), m: tt("منذ 12 دقيقة", "12m ago") },
      { ic: "edit", t: tt("ملاحظة جديدة من مستخدم", "New user note"), s: tt("من قِبل نورة العتيبي", "by Noura"), m: tt("منذ 18 دقيقة", "18m ago") },
      { ic: "sparkle", t: tt("جلسة AI مكتملة", "AI session completed"), s: tt("من قِبل محمد السبيعي", "by Mohammed"), m: tt("منذ 25 دقيقة", "25m ago") },
      { ic: "users", t: tt("تم تحديث بيانات مستخدم", "User data updated"), s: tt("من قِبل النظام", "by system"), m: tt("منذ 40 دقيقة", "40m ago") },
    ];
    const tickets = [
      { id: "#HD-2025-04812", t: tt("مشكلة في تحميل الخريطة", "Chart load issue"), st: "high", stl: tt("مفتوحة", "Open"), m: tt("منذ 10 دقائق", "10m") },
      { id: "#HD-2025-04811", t: tt("طلب تصدير تقرير PDF", "PDF export request"), st: "mid", stl: tt("قيد المعالجة", "In progress"), m: tt("منذ 25 دقيقة", "25m") },
      { id: "#HD-2025-04810", t: tt("استفسار عن الاشتراك", "Subscription query"), st: "violet", stl: tt("مفتوحة", "Open"), m: tt("منذ 40 دقيقة", "40m") },
      { id: "#HD-2025-04809", t: tt("خطأ في الجلسة الصوتية", "Voice session error"), st: "low", stl: tt("مغلقة", "Closed"), m: tt("منذ ساعة", "1h") },
    ];
    return (
      <React.Fragment>
        <div className="adm-kpis">
          {kpis.map((k, i) => { const I = Icon[k.ic] || Icon.overview; return (
            <div key={i} className={`adm-kpi accent-${k.a}`}>
              <div className="adm-kpi-top"><span className="adm-kpi-label">{k.l}</span><span className="adm-kpi-ic"><I size={16} /></span></div>
              <div className={`adm-kpi-val ${k.a}`}>{k.v}</div>
              <div className={`adm-kpi-delta ${k.up ? "up" : "down"}`}>{k.d} {tt("عن الأسبوع السابق", "vs last week")}</div>
            </div>
          ); })}
        </div>

        <div className="adm-grid-2">
          <div className="adm-card">
            <div className="adm-card-h"><h3>{tt("نظرة عامة على الاستخدام", "Usage overview")}</h3><span className="adm-pick"><Icon.clock size={13} /> {tt("آخر 7 أيام", "7 days")}</span></div>
            <div className="adm-line-wrap"><Line series={[{ c: "#C084FF", points: [800,1100,950,1400,1250,1500,1300] }, { c: "#62DDFF", points: [500,700,650,900,820,1000,880] }, { c: "#5FD6B5", points: [300,420,380,560,500,640,560] }]} /></div>
            <div className="adm-line-legend"><span><i style={{ background: "#C084FF" }} />{tt("المستخدمون النشطون", "Active users")}</span><span><i style={{ background: "#62DDFF" }} />{tt("الخرائط المنشأة", "Charts")}</span><span><i style={{ background: "#5FD6B5" }} />{tt("التقارير المصدرة", "Reports")}</span></div>
          </div>
          <div className="adm-card">
            <div className="adm-card-h"><h3>{tt("الخرائط المنشأة يوميًا", "Charts per day")}</h3><span className="adm-pick">{tt("آخر 30 يومًا", "30 days")}</span></div>
            <Bars data={[800,1200,950,1400,1700,1300,1100,1500,1250,1600,1450,1800,1350,1550,1200,1400,1650,1300,1500,1100,1350,1600,1250,1450,1700,1300,1550,1200,1400,1500]} max={1900} />
          </div>
        </div>

        <div className="adm-grid-3">
          <div className="adm-card">
            <div className="adm-card-h"><h3>{tt("حالة النظام", "System health")}</h3><span className="adm-row-meta">{tt("آخر فحص منذ دقيقتين", "2m ago")}</span></div>
            <div className="adm-health">
              {[[tt("الخوادم الرئيسية","Core servers"),"ok"],[tt("قاعدة البيانات","Database"),"ok"],[tt("خدمات AI","AI services"),"ok"],[tt("تخزين الملفات","File storage"),"watch"],[tt("بريد النظام","System mail"),"ok"]].map((r,i)=>(
                <div key={i} className="adm-health-row"><span>{r[0]}</span><span className={`adm-pill ${r[1]}`}>{r[1]==="ok"?tt("سليم","Healthy"):tt("تنبيه","Watch")}</span></div>
              ))}
            </div>
          </div>
          <div className="adm-card">
            <div className="adm-card-h"><h3>{tt("ملاحظات حسب الأولوية", "Notes by priority")}</h3></div>
            <div className="adm-donut-wrap">
              <Donut total={89} label={tt("إجمالي", "total")} segments={[{ v: 28, c: "#F45F5F" }, { v: 34, c: "#F8C648" }, { v: 27, c: "#5FD6B5" }]} />
              <div className="adm-donut-legend">
                <div className="adm-dl-row"><i style={{ background: "#F45F5F" }} />{tt("عالية", "High")}<b>28</b></div>
                <div className="adm-dl-row"><i style={{ background: "#F8C648" }} />{tt("متوسطة", "Medium")}<b>34</b></div>
                <div className="adm-dl-row"><i style={{ background: "#5FD6B5" }} />{tt("منخفضة", "Low")}<b>27</b></div>
              </div>
            </div>
          </div>
          <div className="adm-card">
            <div className="adm-card-h"><h3>{tt("النشاطات الأخيرة", "Recent activity")}</h3><button className="adm-card-link">{tt("عرض الكل", "View all")}</button></div>
            <div className="adm-rows">
              {acts.slice(0,4).map((a,i)=>{ const I=Icon[a.ic]||Icon.overview; return (
                <div key={i} className="adm-row"><span className="adm-row-ic"><I size={15} /></span><div className="adm-row-tx"><strong>{a.t}</strong><span>{a.s}</span></div><span className="adm-row-meta">{a.m}</span></div>
              ); })}
            </div>
          </div>
        </div>

        <div className="adm-grid-2">
          <div className="adm-card">
            <div className="adm-card-h"><h3>{tt("أحدث تذاكر الدعم", "Recent support tickets")}</h3><button className="adm-card-link" onClick={()=>onRoute("admin/support")}>{tt("عرض الكل", "View all")}</button></div>
            <div className="adm-rows">
              {tickets.map((t,i)=>(
                <div key={i} className="adm-row"><span className={`adm-pill ${t.st}`}>{t.stl}</span><div className="adm-row-tx"><strong>{t.t}</strong><span className="num">{t.id}</span></div><span className="adm-row-meta">{t.m}</span></div>
              ))}
            </div>
          </div>
          <div className="adm-card">
            <div className="adm-card-h"><h3>{tt("المهام المطلوبة", "Open tasks")}</h3><span className="adm-pill violet">7</span></div>
            <div className="adm-rows">
              {[[tt("مراجعة ملاحظات المستخدمين","Review user notes"),"high"],[tt("التحقق من جلسات AI المعلّمة","Verify flagged AI"),"high"],[tt("اعتماد تقارير PDF المعلّقة","Approve pending PDFs"),"mid"],[tt("مراجعة طلبات الدعم","Review support"),"mid"],[tt("تحديث بيانات Beta Testers","Update beta testers"),"low"]].map((r,i)=>(
                <div key={i} className="adm-row"><span className={`adm-pill ${r[1]}`}>{r[1]==="high"?tt("عالية","High"):r[1]==="mid"?tt("متوسطة","Med"):tt("منخفضة","Low")}</span><div className="adm-row-tx"><strong>{r[0]}</strong></div></div>
              ))}
            </div>
          </div>
        </div>

        <div className="adm-quick">
          {[["users",tt("إدارة المستخدمين","Manage users"),"users"],["download",tt("إنشاء تقرير جديد","New report"),"reports"],["sparkle",tt("مراقبة جلسات AI","Monitor AI"),"ai"],["bell",tt("إرسال إشعار","Send notification"),"notes"]].map((q,i)=>{ const I=Icon[q[0]]||Icon.overview; return (
            <button key={i} className="adm-qa" onClick={()=>onRoute("admin/"+q[2])}><span className="adm-qa-ic"><I size={18} /></span><div><strong>{q[1]}</strong><span>{tt("إدارة وتحكّم","Manage & control")}</span></div></button>
          ); })}
        </div>
      </React.Fragment>
    );
  }

  // ════════════════════════════ USERS LIST ════════════════════════════
  /* كانت هذه الجدول ثمانية مستخدمين وهميين بأعمدة خططٍ مدفوعة
     (بريميوم · احترافي · تجربة) — والدفع أُزيل من المنتج بالكامل
     (§12)، فالعمود نفسه كان يناقض قرارًا محسومًا. صارت تقرأ الحسابات
     الفعلية من ChartStore، والأزرار تعمل فعلًا. */
  function Users({ ar, onRoute, tt }) {
    const { useState, useEffect } = React;
    const [tick, setTick] = useState(0);
    const [q, setQ] = useState("");
    const [flt, setFlt] = useState("all");
    useEffect(() => window.ChartStore.subscribe(() => setTick((t) => t + 1)), []);

    const all = window.ChartStore.listAccounts();
    const STATUS = {
      pending:   { ar: "قيد المراجعة", en: "Pending",   cls: "watch" },
      approved:  { ar: "نشط",          en: "Active",    cls: "ok" },
      rejected:  { ar: "مرفوض",        en: "Rejected",  cls: "high" },
      suspended: { ar: "موقوف",        en: "Suspended", cls: "high" },
    };
    const norm = (s) => String(s || "").toLowerCase();
    const rows = all.filter((u) => {
      if (flt !== "all" && u.status !== flt) return false;
      if (!q.trim()) return true;
      return norm(u.name).includes(norm(q)) || norm(u.email).includes(norm(q));
    });

    const toast = (title, msg) =>
      window.HDToast && HDToast.show({ type: "success", title: title, msg: msg || "" });

    const act = (u, what) => {
      if (what === "approve" && u.appId) {
        ChartStore.setBetaStatus(u.appId, "approved");
        toast(tt("تم القبول", "Approved"), u.email);
      } else if (what === "reject" && u.appId) {
        ChartStore.setBetaStatus(u.appId, "rejected");
        toast(tt("تم الرفض", "Rejected"), u.email);
      } else if (what === "suspend") {
        const r = ChartStore.setSuspended(u.id, !u.suspended);
        if (r.error === "is_admin") return toast(tt("لا يمكن إيقاف الأدمن", "Can't suspend the admin"));
        toast(u.suspended ? tt("رُفع الإيقاف", "Unsuspended") : tt("أُوقف مؤقّتًا", "Suspended"), u.email);
      } else if (what === "reset") {
        const r = ChartStore.resetPassword(u.id);
        if (r.ok) toast(tt("كلمة مرور مؤقّتة", "Temporary password"), r.temp);
      } else if (what === "delete") {
        /* الحذف يمحو بيانات الميلاد معه (§5.1) — لا رجعة، فيُستأذَن. */
        const ok = window.confirm(tt(
          `حذف ${u.email} نهائيًّا؟ ستُحذف خرائطه وبيانات ميلاده معه.`,
          `Delete ${u.email} permanently? Their charts and birth data go with them.`));
        if (!ok) return;
        const r = ChartStore.deleteAccount(u.id);
        if (r.error === "is_admin") return toast(tt("لا يمكن حذف الأدمن", "Can't delete the admin"));
        toast(tt("حُذف الحساب", "Account deleted"), u.email);
      }
    };

    return (
      <div className="adm-card">
        <div className="adm-toolbar">
          <div className="adm-search">
            <Icon.search size={14} />
            <input value={q} onChange={(e) => setQ(e.target.value)}
                   placeholder={tt("ابحث عن مستخدم أو بريد…", "Search user or email…")} />
          </div>
          {[["all", tt("الكل", "All")], ["pending", tt("قيد المراجعة", "Pending")],
            ["approved", tt("نشط", "Active")], ["suspended", tt("موقوف", "Suspended")],
            ["rejected", tt("مرفوض", "Rejected")]].map(([k, label]) => (
            <button key={k} className={`adm-filter ${flt === k ? "is-on" : ""}`} onClick={() => setFlt(k)}>{label}</button>
          ))}
        </div>
        <div className="adm-table-wrap">
          <table className="adm-table">
            <thead><tr>
              <th>{tt("المستخدم", "User")}</th>
              <th>{tt("الحالة", "Status")}</th>
              <th>{tt("الخرائط", "Charts")}</th>
              <th>{tt("إجراءات", "Actions")}</th>
            </tr></thead>
            <tbody>
              {rows.map((u) => {
                const st = STATUS[u.status] || STATUS.approved;
                return (
                  <tr key={u.id}>
                    <td>
                      <button className="adm-user-cell adm-user-open"
                              onClick={() => { SELECTED_ACCOUNT = u.id; onRoute("admin/userdetail"); }}
                              title={tt("عرض التفاصيل والطلب", "Open details and application")}>
                        <span className="adm-mini-av">{(u.name || "?").charAt(0)}</span>
                        <div>
                          <div style={{ color: "#fff" }}>
                            {u.name}
                            {u.isAdmin && <span className="adm-pill violet" style={{ marginInlineStart: 6 }}>{tt("أدمن", "Admin")}</span>}
                          </div>
                          <div className="num" style={{ fontSize: 11, color: "var(--text-dim)" }}>{u.email}</div>
                        </div>
                      </button>
                    </td>
                    <td><span className={`adm-pill ${st.cls}`}>{ar ? st.ar : st.en}</span></td>
                    <td className="num">{u.charts}</td>
                    <td>
                      <div className="adm-actions">
                        {u.status === "pending" && u.appId && (
                          <React.Fragment>
                            <button className="adm-act ok" onClick={() => act(u, "approve")}>{tt("قبول", "Approve")}</button>
                            <button className="adm-act warn" onClick={() => act(u, "reject")}>{tt("رفض", "Reject")}</button>
                          </React.Fragment>
                        )}
                        {!u.isAdmin && (
                          <React.Fragment>
                            <button className="adm-act" onClick={() => act(u, "suspend")}>
                              {u.suspended ? tt("رفع الإيقاف", "Unsuspend") : tt("إيقاف", "Suspend")}
                            </button>
                            <button className="adm-act" onClick={() => act(u, "reset")}>{tt("كلمة مرور", "Reset pw")}</button>
                            <button className="adm-act danger" onClick={() => act(u, "delete")}>{tt("حذف", "Delete")}</button>
                          </React.Fragment>
                        )}
                      </div>
                    </td>
                  </tr>
                );
              })}
              {rows.length === 0 && (
                <tr><td colSpan={4} style={{ textAlign: "center", padding: "26px 0", color: "var(--text-dim)" }}>
                  {q.trim() || flt !== "all"
                    ? tt("لا حساب يطابق هذا الفلتر.", "No account matches this filter.")
                    : tt("لا حسابات بعد.", "No accounts yet.")}
                </td></tr>
              )}
            </tbody>
          </table>
        </div>
        <div className="adm-pager">
          <span className="adm-row-meta">
            {tt(`${rows.length} من ${all.length} حساب`, `${rows.length} of ${all.length} accounts`)}
          </span>
        </div>
      </div>
    );
  }

  // ════════════════════════════ USER DETAIL ════════════════════════════
  /* كانت هذه الشاشة ملفًّا وهميًّا بالكامل: اسم مخترَع، رقم جوّال،
     بطاقة ائتمان «•••• 4242» وخطة «بريميوم» — في منتجٍ أُزيل منه
     الدفع كلّيًّا (§12). صارت تقرأ حسابًا حقيقيًّا.

     وأهمّ ما تعرضه إجابات الطلب وبيانات الميلاد: §5.1 يشترط أن
     تدخل بيانات الميلاد قبل الموافقة كي يراجع الأدمن الخريطة قبل
     منح الوصول — وهذا هو المكان الذي تُراجَع فيه. */
  function UserDetail({ ar, onRoute, tt, toast, accountId }) {
    const [tick, setTick] = useState(0);
    useEffect(() => window.ChartStore.subscribe(() => setTick((t) => t + 1)), []);
    const all = window.ChartStore.listAccounts();
    const u = all.find((a) => a.id === accountId) || all[0];

    if (!u) {
      return (
        <div className="adm-card">
          <p style={{ color: "var(--text-dim)", padding: 20 }}>
            {tt("لا حساب لعرضه.", "No account to show.")}
          </p>
        </div>
      );
    }

    const STATUS = {
      pending:   { ar: "قيد المراجعة", en: "Pending",   cls: "watch" },
      approved:  { ar: "نشط",          en: "Active",    cls: "ok" },
      rejected:  { ar: "مرفوض",        en: "Rejected",  cls: "high" },
      suspended: { ar: "موقوف",        en: "Suspended", cls: "high" },
    };
    const st = STATUS[u.status] || STATUS.approved;
    const A = u.answers || {};
    const FREQ = { once: tt("مرة أسبوعيًّا", "Once a week"), few: tt("٢–٣ مرات", "2–3 times"), daily: tt("يوميًّا", "Daily") };
    const LVL = { new: tt("مبتدئ", "New"), some: tt("عنده فكرة", "Some"), deep: tt("متعمّق", "Deep") };

    const act = (what) => {
      if (what === "approve" && u.appId) { ChartStore.setBetaStatus(u.appId, "approved"); toast && toast(tt("تم القبول", "Approved")); }
      else if (what === "reject" && u.appId) { ChartStore.setBetaStatus(u.appId, "rejected"); toast && toast(tt("تم الرفض", "Rejected")); }
      else if (what === "suspend") { ChartStore.setSuspended(u.id, !u.suspended); toast && toast(u.suspended ? tt("رُفع الإيقاف", "Unsuspended") : tt("أُوقف", "Suspended")); }
      else if (what === "reset") { const r = ChartStore.resetPassword(u.id); if (r.ok) toast && toast(tt("كلمة مرور مؤقّتة: ", "Temp password: ") + r.temp); }
    };

    return (
      <React.Fragment>
        <button className="adm-filter" onClick={() => onRoute("admin/users")} style={{ alignSelf: "flex-start" }}>
          <Icon.chevRight size={13} /> {tt("المستخدمون", "Users")}
        </button>
        <div className="adm-card">
          <div className="adm-profile">
            <div className="adm-prof-av">{(u.name || "?").charAt(0)}</div>
            <div className="adm-prof-tx">
              <h2>{u.name}</h2>
              <span className="em">{u.email}</span>
              <div className="adm-prof-tags">
                <span className={`adm-pill ${st.cls}`}>{ar ? st.ar : st.en}</span>
                {u.isAdmin && <span className="adm-pill violet">{tt("أدمن", "Admin")}</span>}
              </div>
            </div>
            <div className="adm-prof-meta">
              <div className="adm-pm"><em>{tt("الخرائط", "Charts")}</em><span className="num">{u.charts}</span></div>
              <div className="adm-pm"><em>{tt("تاريخ التسجيل", "Registered")}</em><span>{u.createdAt ? String(u.createdAt).slice(0, 10) : "—"}</span></div>
            </div>
          </div>
        </div>

        <div className="adm-card">
          <div className="adm-card-h"><h3>{tt("إجابات الطلب", "Application answers")}</h3></div>
          {u.answers ? (
            <div className="adm-kv">
              <div className="adm-kv-row"><span>{tt("وتيرة الملاحظات", "Feedback cadence")}</span><b>{FREQ[A.freq] || "—"}</b></div>
              <div className="adm-kv-row"><span>{tt("الخبرة بالهيومان ديزاين", "HD experience")}</span><b>{LVL[A.level] || "—"}</b></div>
              <div className="adm-kv-row" style={{ alignItems: "flex-start" }}>
                <span>{tt("لماذا يريد الانضمام", "Why they want in")}</span>
                <b style={{ maxWidth: "60%", lineHeight: 1.8, fontWeight: 400 }}>{A.why || "—"}</b>
              </div>
            </div>
          ) : (
            <p style={{ color: "var(--text-dim)", padding: "8px 2px" }}>
              {tt("لا طلب مرتبط بهذا الحساب.", "No application attached to this account.")}
            </p>
          )}
        </div>

        <div className="adm-card">
          <div className="adm-card-h"><h3>{tt("إجراءات", "Actions")}</h3></div>
          <div className="adm-actions" style={{ padding: "4px 2px" }}>
            {u.status === "pending" && u.appId && (
              <React.Fragment>
                <button className="adm-act ok" onClick={() => act("approve")}>{tt("قبول", "Approve")}</button>
                <button className="adm-act warn" onClick={() => act("reject")}>{tt("رفض", "Reject")}</button>
              </React.Fragment>
            )}
            {!u.isAdmin && (
              <React.Fragment>
                <button className="adm-act" onClick={() => act("suspend")}>{u.suspended ? tt("رفع الإيقاف", "Unsuspend") : tt("إيقاف", "Suspend")}</button>
                <button className="adm-act" onClick={() => act("reset")}>{tt("إعادة تعيين كلمة المرور", "Reset password")}</button>
              </React.Fragment>
            )}
          </div>
        </div>
      </React.Fragment>
    );
  }


  // ════════════════════════════ CONTENT APPROVAL ════════════════════════════
  function Content({ ar, tt, toast }) {
    const stats = [["violet",tt("المسودات","Drafts"),"23"],["gold",tt("قيد المراجعة","In review"),"18"],["green",tt("معتمد","Approved"),"142"],["red",tt("مرفوض","Rejected"),"7"]];
    const rows = [
      [tt("شرح بوابة الرأس","Head gate"),"MOD-GATE-001",tt("عربي","AR"),tt("البوابات","Gates"),"v1.3",tt("سارة النجار","Sara"),"review"],
      [tt("شرح بوابة الرأس","Head gate"),"MOD-GATE-001-EN",tt("إنجليزي","EN"),"Gates","v1.2",tt("سارة جونسون","Sarah"),"approved"],
      [tt("ملف شخصي - أساسي","Profile base"),"MOD-PROF-BASE",tt("عربي","AR"),tt("الملفات","Profiles"),"v2.1",tt("محمد العتيبي","Mohammed"),"approved"],
      [tt("التوجيه اليومي","Daily guidance"),"MOD-DAILY-GUIDE",tt("عربي","AR"),tt("التوجيه","Guidance"),"v3.0",tt("أحمد حكيم","Ahmed"),"approved"],
      [tt("تحليل القنوات","Channels"),"MOD-REPORT-CHANNELS",tt("عربي","AR"),tt("التقارير","Reports"),"v1.8",tt("نورة المطيري","Noura"),"rejected"],
      [tt("أساسيات التصميم","Basics"),"MOD-BASICS-101",tt("عربي","AR"),tt("أساسيات","Basics"),"v1.0",tt("سارة النجار","Sara"),"approved"],
    ];
    const stMap = { review:["mid",tt("قيد المراجعة","In review")], approved:["ok",tt("معتمد","Approved")], rejected:["high",tt("مرفوض","Rejected")] };
    return (
      <React.Fragment>
        <div className="adm-kpis">
          {stats.map((s,i)=>(<div key={i} className={`adm-kpi accent-${s[0]}`}><div className="adm-kpi-top"><span className="adm-kpi-label">{s[1]}</span></div><div className={`adm-kpi-val ${s[0]}`}>{s[2]}</div><div className="adm-kpi-delta">{tt("وحدة محتوى","content units")}</div></div>))}
        </div>
        <div className="adm-card">
          <div className="adm-toolbar">
            <div className="adm-search"><Icon.search size={14} /><input placeholder={tt("بحث في الوحدات…","Search units…")} /></div>
            <span className="adm-filter"><Icon.chevDown size={13} /> {tt("كل اللغات","All langs")}</span>
            <span className="adm-filter"><Icon.chevDown size={13} /> {tt("كل الحالات","All states")}</span>
          </div>
          <div className="adm-table-wrap">
            <table className="adm-table">
              <thead><tr><th>{tt("عنوان الوحدة","Title")}</th><th>{tt("اللغة","Lang")}</th><th>{tt("الفئة","Category")}</th><th>{tt("الإصدار","Ver")}</th><th>{tt("الكاتب","Author")}</th><th>{tt("الحالة","Status")}</th></tr></thead>
              <tbody>
                {rows.map((r,i)=>(<tr key={i}><td><div style={{color:"#fff"}}>{r[0]}</div><div className="num" style={{fontSize:10.5,color:"var(--text-dim)"}}>{r[1]}</div></td><td><span className="adm-pill violet">{r[2]}</span></td><td>{r[3]}</td><td className="num">{r[4]}</td><td><div className="adm-user-cell"><span className="adm-mini-av">{r[5][0]}</span>{r[5]}</div></td><td><span className={`adm-pill ${stMap[r[6]][0]}`}>{stMap[r[6]][1]}</span></td></tr>))}
              </tbody>
            </table>
          </div>
          <div className="adm-pager"><span className="adm-row-meta">{tt("عرض 1-6 من 190","1-6 of 190")}</span><div className="adm-pager-nums"><button className="active">1</button><button>2</button><button>3</button><button>4</button></div></div>
        </div>
      </React.Fragment>
    );
  }

  // ════════════════════════════ PAYMENTS ════════════════════════════
  function Payments({ ar, tt }) {
    const kpis = [
      { l: tt("الإيرادات الشهرية (MRR)","MRR"), v: "$124,580", d: "+12.8%", up: true, a: "green" },
      { l: tt("الاشتراكات النشطة","Active subs"), v: "3,284", d: "+8.7%", up: true, a: "violet" },
      { l: tt("المدفوعات الفاشلة","Failed"), v: "23", d: "-18.6%", up: true, a: "red" },
      { l: tt("المبالغ المستردة","Refunds"), v: "$2,145", d: "-6.2%", up: false, a: "gold" },
      { l: tt("تحويلات التجربة","Trial conv."), v: "42.6%", d: "+5.4%", up: true, a: "violet" },
      { l: tt("متوسط قيمة الطلب","AOV"), v: "$45.72", d: "+3.1%", up: true, a: "violet" },
    ];
    const subs = [
      [tt("سارة العنبري","Sara"),"sara@example.com",tt("نشط","Active"),"ok","$49.00","Stripe"],
      [tt("أحمد الشهري","Ahmed"),"ahmed@example.com",tt("نشط","Active"),"ok","$29.00","Mada"],
      [tt("نورة السبيعي","Noura"),"noura@example.com",tt("تجربة","Trial"),"mid","$0.00","Stripe"],
      [tt("محمد القحطاني","Mohammed"),"mohammed@example.com",tt("فشل الدفع","Failed"),"high","$49.00","Stripe"],
      [tt("ريم الشمري","Reem"),"reem@example.com",tt("نشط","Active"),"ok","$19.00","Mada"],
    ];
    return (
      <React.Fragment>
        <div className="adm-kpis">
          {kpis.map((k,i)=>(<div key={i} className={`adm-kpi accent-${k.a}`}><div className="adm-kpi-top"><span className="adm-kpi-label">{k.l}</span></div><div className={`adm-kpi-val ${k.a}`}>{k.v}</div><div className={`adm-kpi-delta ${k.up?"up":"down"}`}>{k.d}</div></div>))}
        </div>
        <div className="adm-card">
          <div className="adm-card-h"><h3>{tt("الاشتراكات","Subscriptions")}</h3><span className="adm-filter">{tt("تصدير","Export")}</span></div>
          <div className="adm-table-wrap"><table className="adm-table">
            <thead><tr><th>{tt("المستخدم","User")}</th><th>{tt("الحالة","Status")}</th><th>{tt("المبلغ","Amount")}</th><th>{tt("مزوّد الدفع","Provider")}</th></tr></thead>
            <tbody>{subs.map((r,i)=>(<tr key={i}><td><div className="adm-user-cell"><span className="adm-mini-av">{r[0][0]}</span><div><div style={{color:"#fff"}}>{r[0]}</div><div className="num" style={{fontSize:11,color:"var(--text-dim)"}}>{r[1]}</div></div></div></td><td><span className={`adm-pill ${r[3]}`}>{r[2]}</span></td><td className="num">{r[4]}</td><td>{r[5]}</td></tr>))}</tbody>
          </table></div>
        </div>
        <div className="adm-grid-2">
          {/* حُذف رسما «الإيرادات» و«توزيع الاشتراكات حسب الخطة»: لا
              إيراد ولا اشتراكات في هذا المنتج (§12). حلّ محلّهما توزيعُ
              حالات الحسابات الفعلية — رقمٌ يعنيه الأدمن فعلًا. */}
          <div className="adm-card">
            <div className="adm-card-h"><h3>{tt("توزيع حالات الحسابات","Accounts by status")}</h3></div>
            <div className="adm-donut-wrap">
              {(() => {
                const accs = window.ChartStore.listAccounts();
                const by = { approved: 0, pending: 0, suspended: 0, rejected: 0 };
                accs.forEach((a) => { by[a.status] = (by[a.status] || 0) + 1; });
                const rows = [
                  ["#5FD6B5", tt("نشط", "Active"), by.approved],
                  ["#F8C648", tt("قيد المراجعة", "Pending"), by.pending],
                  ["#9872FF", tt("موقوف", "Suspended"), by.suspended],
                  ["#F45F5F", tt("مرفوض", "Rejected"), by.rejected],
                ];
                const total = accs.length || 1;
                return (
                  <React.Fragment>
                    <Donut total={accs.length} label={tt("حساب", "accounts")}
                           segments={rows.filter((r) => r[2] > 0).map((r) => ({ v: r[2], c: r[0] }))} />
                    <div className="adm-donut-legend">
                      {rows.map((r, i) => (
                        <div key={i} className="adm-dl-row">
                          <i style={{ background: r[0] }} />{r[1]}
                          <b>{r[2]} · {Math.round((r[2] / total) * 100)}%</b>
                        </div>
                      ))}
                    </div>
                  </React.Fragment>
                );
              })()}
            </div>
          </div>
        </div>
      </React.Fragment>
    );
  }

  // ════════════════════════════ BETA APPLICATIONS ════════════════════════════
  function BetaApps({ ar, tt, toast }) {
    const [, tick] = useState(0);
    const apps = window.ChartStore ? ChartStore.listBetaApps() : [];
    const FREQ = { once: tt("مرة/أسبوع", "Once/wk"), few: tt("2–3 مرات", "2–3×"), daily: tt("يوميًا", "Daily") };
    const LEVEL = { new: tt("مبتدئ", "New"), some: tt("عنده فكرة", "Some"), deep: tt("متعمّق", "Deep") };
    const STATUS = {
      pending: ["mid", tt("قيد المراجعة", "Pending")],
      approved: ["ok", tt("مقبول", "Approved")],
      rejected: ["high", tt("مرفوض", "Rejected")],
      waitlist: ["violet", tt("قائمة انتظار", "Waitlist")],
    };
    const count = (s) => apps.filter((a) => a.status === s).length;
    const decide = (id, status) => {
      const r = ChartStore.setBetaStatus(id, status);
      tick((t) => t + 1);
      if (status === "approved" && r && r.token) toast("success", tt("تم القبول", "Approved"), tt("اتولّد رابط الدخول — انسخه وابعته للمستخدم.", "Access link generated — copy & send it."));
      else if (status === "rejected") toast("info", tt("تم الرفض", "Rejected"), "");
      else if (status === "waitlist") toast("info", tt("قائمة الانتظار", "Waitlisted"), "");
    };
    const copyLink = (token) => {
      const link = ChartStore.magicLink(token);
      if (navigator.clipboard) navigator.clipboard.writeText(link).then(() => toast("success", tt("اتنسخ الرابط", "Link copied"), ""), () => {});
      else toast("info", link, "");
    };
    const kpis = [["mid", tt("قيد المراجعة", "Pending"), count("pending")], ["ok", tt("مقبول", "Approved"), count("approved")], ["violet", tt("قائمة انتظار", "Waitlist"), count("waitlist")], ["high", tt("مرفوض", "Rejected"), count("rejected")]];

    return (
      <React.Fragment>
        <div className="adm-kpis">
          {kpis.map((s, i) => (
            <div key={i} className={`adm-kpi accent-${s[0]}`}><div className="adm-kpi-top"><span className="adm-kpi-label">{s[1]}</span></div><div className={`adm-kpi-val ${s[0]}`}>{s[2]}</div><div className="adm-kpi-delta">{tt("طلب", "applications")}</div></div>
          ))}
        </div>

        {apps.length === 0 ? (
          <div className="adm-card"><div className="adm-generic">
            <span className="adm-generic-ic"><Icon.crown size={26} /></span>
            <h3>{tt("لا توجد طلبات بعد", "No applications yet")}</h3>
            <p>{tt("طلبات الانضمام للبيتا تظهر هنا. جرّب التقديم من صفحة الدخول لرؤية الطلب.", "Beta applications appear here. Try applying from the sign-in page to see one.")}</p>
          </div></div>
        ) : (
          <div className="beta-apps">
            {apps.map((a) => {
              const st = STATUS[a.status] || STATUS.pending;
              return (
                <div key={a.id} className="beta-app" data-galaxy-ui>
                  <div className="beta-app-h">
                    <div className="beta-app-id">
                      <span className="adm-mini-av">{(a.name || a.email)[0]}</span>
                      <div><strong>{a.name || tt("بدون اسم", "No name")}</strong><span className="num">{a.email}</span></div>
                    </div>
                    <span className={`adm-pill ${st[0]}`}>{st[1]}</span>
                  </div>
                  <div className="beta-app-tags">
                    <span className="beta-tag"><Icon.clock size={12} /> {FREQ[a.answers.freq] || "—"}</span>
                    <span className="beta-tag"><Icon.sparkle size={12} /> {LEVEL[a.answers.level] || "—"}</span>
                  </div>
                  <p className="beta-app-why"><span>{tt("لماذا يريد الانضمام:", "Why they want in:")}</span> {a.answers.why || "—"}</p>
                  {a.status === "approved" && a.token && (
                    <button className="beta-link" onClick={() => copyLink(a.token)}>
                      <Icon.share size={13} /> {tt("نسخ رابط الدخول (الماجيك لينك)", "Copy access link")}
                    </button>
                  )}
                  <div className="beta-app-actions">
                    {a.status !== "approved" && <button className="beta-btn ok" onClick={() => decide(a.id, "approved")}><Icon.check size={13} /> {tt("قبول", "Approve")}</button>}
                    {a.status !== "waitlist" && a.status !== "approved" && <button className="beta-btn wait" onClick={() => decide(a.id, "waitlist")}>{tt("قائمة انتظار", "Waitlist")}</button>}
                    {a.status !== "rejected" && <button className="beta-btn no" onClick={() => decide(a.id, "rejected")}>{tt("رفض", "Reject")}</button>}
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </React.Fragment>
    );
  }

  // ════════════════════════════ GENERIC SECTION ════════════════════════════
  function Generic({ cur, ar, tt }) {
    const I = Icon[cur.icon] || Icon.overview;
    return (
      <div className="adm-card"><div className="adm-generic">
        <span className="adm-generic-ic"><I size={26} /></span>
        <h3>{ar ? cur.ar : cur.en}</h3>
        <p>{tt("هذا القسم الإداري متصل بنظام Human Design ويعرض بياناته الحيّة عند تفعيل البيئة. التصميم والتنقّل جاهزان.", "This admin section connects to the Human Design system and shows live data once the environment is active. Layout and navigation are ready.")}</p>
      </div></div>
    );
  }
})();