window.BetaReview = function BetaReview({ lang, onLangToggle, onOpenChart, onConfirmOwnChart }) {
  const { useState } = React;
  const ar = lang === "ar";
  const t = (arabic, english) => ar ? arabic : english;
  const [filter, setFilter] = useState("all");
  const [query, setQuery] = useState("");
  const [selectedId, setSelectedId] = useState(null);
  const [busy, setBusy] = useState(false);
  const [notice, setNotice] = useState(null);
  const [view, setView] = useState("applications");
  const detailRef = React.useRef(null);
  const queue = ChartStore.listBetaApps();
  const statuses = {
    pending: t("قيد المراجعة", "Pending"),
    approved: t("مقبول", "Approved"),
    rejected: t("مرفوض", "Rejected"),
    suspended: t("موقوف", "Suspended"),
  };
  const filters = { all: t("كل الطلبات", "All applications"), ...statuses };
  const applicantName = (item) => [item.first_name, item.last_name].filter(Boolean).join(" ");
  const visible = queue.filter((item) => (filter === "all" || item.status === filter) &&
    applicantName(item).toLocaleLowerCase().includes(query.trim().toLocaleLowerCase()));
  const selected = visible.find((item) => item.user_id === selectedId);
  const date = (value) => value ? new Intl.DateTimeFormat(ar ? "ar-EG" : "en-GB", { dateStyle: "medium" }).format(new Date(value)) : "—";
  const options = {
    level: { new: t("مبتدئ", "New"), some: t("عندي فكرة", "Familiar"), deep: t("متعمّق", "Advanced") },
    goal: { decisions: t("قراراتي", "My decisions"), self: t("أفهم نفسي", "Understand myself"), chart: t("أفهم شارت", "Understand a chart") },
    pace: { guided: t("خطوة بخطوة", "Step by step"), short: t("جلسات قصيرة", "Short sessions"), open: t("استكشاف مفتوح", "Open exploration") },
    freq: { once: t("مرة أسبوعيًا", "Once a week"), few: t("مرتين في الأسبوع", "Twice a week"), daily: t("يوميًا", "Daily") },
  };

  async function refresh() {
    setBusy(true);
    setNotice(null);
    try {
      await Promise.all([ChartStore.refreshBetaApps(), ChartStore.refreshAccessRequests(), ChartStore.refreshMemberPermissions?.()]);
    } catch {
      setNotice({ error: true, text: t("تعذّر تحديث الطلبات.", "Could not refresh applications.") });
    } finally {
      setBusy(false);
    }
  }

  async function changePermission(key, enabled) {
    setBusy(true);
    setNotice(null);
    try {
      await ChartStore.setMemberPermission(selected.user_id, key, enabled);
      setNotice({ text: t("تم حفظ صلاحيات المستخدم.", "Member permissions saved.") });
    } catch {
      setNotice({ error: true, text: t("تعذّر حفظ الصلاحيات. جرّب تاني.", "Could not save permissions. Try again.") });
    } finally {
      setBusy(false);
    }
  }

  async function reviewAccess(request, status) {
    setBusy(true);
    setNotice(null);
    try {
      await ChartStore.reviewAccess(request.user_id, request.section, status);
      setNotice({ text: t("تم تحديث طلب الوصول.", "Access request updated.") });
    } catch {
      setNotice({ error: true, text: t("تعذّر حفظ القرار. حدّث الطلبات قبل المحاولة تاني.", "Could not save the decision. Refresh applications before retrying.") });
    } finally {
      setBusy(false);
    }
  }

  async function review(status) {
    setBusy(true);
    setNotice(null);
    try {
      await ChartStore.setBetaStatus(selected.user_id, status, selected.status);
      setNotice({ text: t("تم تحديث حالة الطلب.", "Application status updated.") });
    } catch {
      setNotice({ error: true, text: t("تعذّر حفظ القرار. حدّث الطلبات قبل المحاولة تاني.", "Could not save the decision. Refresh applications before retrying.") });
    } finally {
      setBusy(false);
    }
  }

  function selectApplication(id) {
    setSelectedId(id);
    if (window.matchMedia("(max-width: 760px)").matches) {
      requestAnimationFrame(() => {
        detailRef.current?.focus();
        detailRef.current?.scrollIntoView({ block: "start" });
      });
    }
  }

  return (
    <main className="beta-console" dir={ar ? "rtl" : "ltr"}>
      <header className="beta-console-header">
        <div className="beta-console-brand"><BrandOrb size={44} energy={1.2} /><div>
          <strong>Spade’s Life Explained</strong><span>{t("لوحة الإدارة", "Administration")}</span>
        </div></div>
        <div className="beta-console-actions">
          <button className="beta-btn wait" type="button" onClick={onLangToggle}>{t("English", "العربية")}</button>
          <button className="beta-btn wait" type="button" onClick={refresh} disabled={busy}>{t("تحديث الطلبات", "Refresh applications")}</button>
          <button className="beta-btn wait" type="button" onClick={() => ChartStore.logout()}>{t("تسجيل خروج", "Sign out")}</button>
        </div>
      </header>
      <div className="beta-console-body">
        <div className="beta-console-title">
          <span className="eyebrow">{t("إدارة البيتا", "Beta administration")}</span>
          <h1>{t("طلبات الانضمام", "Beta applications")}</h1>
          <p>{t("راجع اختيارات الرحلة وحدد مين يبدأ التجربة.", "Review journey preferences and decide who joins the beta.")}</p>
        </div>
        <nav className="beta-console-actions beta-console-views" aria-label={t("أقسام الإدارة", "Administration sections")}>
          {Object.entries({ applications: t("طلبات الانضمام", "Applications"), access: t("طلبات الوصول", "Access requests"), charts: t("الشارتات", "Charts") })
            .map(([key, label]) => <button type="button" key={key} className="beta-btn wait" aria-pressed={view === key} onClick={() => { setView(key); setNotice(null); }}>{label}</button>)}
        </nav>
        {notice && <p className={notice.error ? "beta-console-error" : "beta-console-notice"} role={notice.error ? "alert" : "status"}>{notice.text}</p>}
        {view === "access" && <section className="beta-console-panel">
          <h2>{t("طلبات الوصول", "Access requests")}</h2>
          {!ChartStore.accessRequests().length && <p className="beta-console-empty">{t("مفيش طلبات وصول لسه.", "No access requests yet.")}</p>}
          {ChartStore.accessRequests().map((request) => {
            const owner = queue.find((item) => item.user_id === request.user_id);
            return <div className="beta-console-entry" key={request.user_id + request.section}>
              <div><strong>{owner ? applicantName(owner) : request.user_id}</strong><p>{BetaAccess.labels[request.section]?.[ar ? 0 : 1]} · {statuses[request.status]}</p></div>
              {request.status === "pending" && <div className="beta-console-actions">
                <button type="button" className="beta-btn ok" disabled={busy} onClick={() => reviewAccess(request, "approved")}>{t("افتح القسم", "Grant access")}</button>
                <button type="button" className="beta-btn no" disabled={busy} onClick={() => reviewAccess(request, "rejected")}>{t("ارفض الطلب", "Decline request")}</button>
              </div>}
            </div>;
          })}
        </section>}
        {view === "charts" && <section className="beta-console-panel">
          <h2>{t("الشارتات المحفوظة", "Saved charts")}</h2>
          {!ChartStore.listCharts().some((chart) => chart.ownerId === ChartStore.currentUser()?.id) &&
            <button type="button" className="beta-btn wait" onClick={onConfirmOwnChart}>{t("أكّد بيانات شارتك", "Confirm your own chart")}</button>}
          {!ChartStore.listCharts().length && <p className="beta-console-empty">{t("مفيش شارتات محفوظة لسه.", "No saved charts yet.")}</p>}
          {ChartStore.listCharts().map((chart) => <div key={chart.id} className="beta-console-entry">
            <div><strong dir="auto">{ar ? chart.nameAr || chart.name : chart.nameEn || chart.name}</strong><p>{date(chart.createdAt)}</p></div>
            <div className="beta-console-actions">
              <button type="button" className="beta-btn wait" onClick={() => onOpenChart(chart.id, false)}>{t("افتح الشارت", "Open chart")}</button>
              <button type="button" className="beta-btn wait" onClick={() => onOpenChart(chart.id, true)}>{t("صحّح بيانات الميلاد", "Correct birth details")}</button>
            </div>
          </div>)}
        </section>}
        {view === "applications" && <><nav className="beta-console-metrics" aria-label={t("فلترة حسب الحالة", "Filter by status")}>
          {Object.entries(filters).map(([status, label]) => (
            <button type="button" key={status} aria-pressed={filter === status} onClick={() => setFilter(status)}>
              <span>{label}</span><strong>{status === "all" ? queue.length : queue.filter((item) => item.status === status).length}</strong>
            </button>
          ))}
        </nav>
        <div className="beta-console-workspace">
          <section className="beta-console-panel">
            <div className="beta-console-panel-head">
              <h2>{filters[filter]}</h2>
              <label className="beta-console-search"><span>{t("بحث بالاسم", "Search by name")}</span>
                <input type="search" value={query} onChange={(event) => setQuery(event.target.value)} placeholder={t("اسم المتقدّم", "Applicant name")} />
              </label>
            </div>
            {visible.length ? <ul className="beta-console-list">
              {visible.map((item) => <li key={item.user_id}>
                <button type="button" aria-pressed={selected?.user_id === item.user_id} onClick={() => selectApplication(item.user_id)}>
                  <span><strong dir="auto">{applicantName(item)}</strong><small>{date(item.created_at)}</small></span>
                  <span className="beta-console-status" data-status={item.status}>{statuses[item.status]}</span>
                </button>
              </li>)}
            </ul> : <p className="beta-console-empty">{queue.length ? t("مفيش طلبات مطابقة للبحث أو الفلتر.", "No applications match this search or filter.") : t("لسه مفيش طلبات انضمام.", "No applications yet.")}</p>}
          </section>
          <section ref={detailRef} tabIndex={-1} className="beta-console-panel beta-console-detail" aria-label={t("تفاصيل الطلب", "Application details")}>
            {selected ? <>
              <div className="beta-console-panel-head">
                <div><span className="eyebrow">{t("تفاصيل الطلب", "Application details")}</span><h2 dir="auto">{applicantName(selected)}</h2></div>
                <span className="beta-console-status" data-status={selected.status}>{statuses[selected.status]}</span>
              </div>
              <dl className="beta-console-answers">
                {Object.entries({ level: t("الخبرة", "Experience"), goal: t("الهدف", "Goal"), pace: t("الإيقاع", "Pace"), freq: t("الملاحظات", "Feedback") }).map(([key, label]) =>
                  <div key={key}><dt>{label}</dt><dd>{options[key][selected.answers?.[key]] || "—"}</dd></div>
                )}
              </dl>
              {typeof selected.answers?.why === "string" && selected.answers.why.trim() && <p className="beta-console-reason" dir="auto">{selected.answers.why}</p>}
              {selected.status === "approved" && <fieldset className="beta-permission-options" disabled={busy}>
                <legend>{t("صلاحيات الرحلة", "Journey permissions")}</legend>
                {[
                  ["full_access", t("افتح كل مراحل الرحلة والمحتوى الخاص فورًا", "Open every journey stage and restricted resource now")],
                  ["guide_sample", t("الخريطة التعليمية في الدليل", "Educational chart in the guide")],
                  ["glossary", t("المعجم وتفاصيل المصطلحات", "Glossary and term details")],
                ].map(([key, label]) => {
                  const grants = ChartStore.memberPermissions?.(selected.user_id) || {};
                  return <label key={key}><input type="checkbox"
                    checked={!!(grants.full_access || grants[key])}
                    disabled={key !== "full_access" && !!grants.full_access}
                    onChange={(event) => changePermission(key, event.target.checked)} /> {label}</label>;
                })}
              </fieldset>}
              <div className="beta-console-actions">
                {[["approved", "ok", t("قبول الطلب", "Approve")], ["rejected", "no", t("رفض الطلب", "Reject")], ["suspended", "wait", t("إيقاف الوصول", "Suspend")]].map(([status, tone, label]) =>
                  <button key={status} type="button" className={`beta-btn ${tone}`} disabled={busy || selected.status === status} onClick={() => review(status)}>{label}</button>
                )}
              </div>
            </> : <p className="beta-console-empty">{t("اختار طلب لعرض اختيارات الرحلة واتخاذ القرار.", "Select an application to review the journey preferences and make a decision.")}</p>}
          </section>
        </div></>}
      </div>
    </main>
  );
};