window.BetaAccess = {
  labels: {
    guide: ["الدليل", "Guide"],
    overview: ["أساسيات شارتك", "Your chart essentials"],
    centers: ["المراكز", "Centers"],
    gates: ["البوابات والقنوات", "Gates and channels"],
    planets: ["الكواكب", "Planets"],
    learn: ["المعجم وتفاصيل المصطلحات", "Glossary and term details"],
    compass: ["بوصلة اليوم", "Daily compass"],
  },
  section(route) {
    return { gate: "gates", channel: "gates", center: "centers", planet: "planets" }[route] || route;
  },
  schedule(answers, start) {
    const { level, goal, pace } = answers || {};
    const first = goal === "decisions" ? "guide" : goal === "self" ? "centers"
      : level === "deep" ? "gates" : level === "some" ? "centers" : "overview";
    const next = level === "deep" ? ["gates", "planets", "centers"] : ["overview", "centers", "gates"];
    const sections = [...new Set([first, ...next])].slice(0, 3);
    const delay = ({ guided: 24, short: 6, open: 0 }[pace] ?? 24) * 3600000;
    return sections.map((section, index) => ({ section, opensAt: new Date(start).getTime() + delay * index }));
  },
  permits(key) {
    if (!ChartStore.remote || ChartStore.isAdmin()) return true;
    const permissions = ChartStore.memberPermissions?.();
    return !!(permissions?.full_access || permissions?.[key]);
  },
  state(route, now = Date.now()) {
    const section = this.section(route);
    if (section === "learn") return { section, open: this.permits("glossary"), adminOnly: true };
    if (!this.labels[section] || section === "overview" || section === "guide" || this.permits("full_access")) return { open: true };
    const entry = this.schedule(ChartStore.journeyAnswers(), ChartStore.getActiveChart()?.createdAt)
      .find((stage) => stage.section === section);
    const request = ChartStore.accessRequests().find((item) => item.section === section);
    return { section, opensAt: entry?.opensAt, request, open: request?.status === "approved" || (entry && now >= entry.opensAt) };
  },
};

window.BetaLocked = function BetaLocked({ lang, route }) {
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState(false);
  const ar = lang === "ar";
  const t = (arabic, english) => ar ? arabic : english;
  const { section, opensAt, request, adminOnly } = BetaAccess.state(route);
  if (adminOnly) return (
    <section className="card-glass beta-journey">
      <span className="eyebrow"><Icon.lock size={14} /> {t("وصول خاص", "Restricted access")}</span>
      <h1>{BetaAccess.labels[section][ar ? 0 : 1]}</h1>
      <p>{t("القسم ده بيتفتح من إدارة البيتا.", "The beta team enables this section.")}</p>
    </section>
  );
  async function send() {
    setBusy(true);
    setError(false);
    try {
      if (request) await ChartStore.refreshAccessRequests();
      else await ChartStore.requestAccess(section);
    }
    catch { setError(true); }
    finally { setBusy(false); }
  }
  return (
    <section className="card-glass beta-journey">
      <span className="eyebrow">{t("الوصول للرحلة", "Journey access")}</span>
      <h1>{BetaAccess.labels[section][ar ? 0 : 1]}</h1>
      <p>{opensAt ? t("المرحلة هتتفتح تلقائيًا في", "This stage opens automatically on") + " " +
        new Intl.DateTimeFormat(ar ? "ar-EG" : "en-GB", { dateStyle: "medium", timeStyle: "short" }).format(opensAt)
        : t("القسم ده خارج ترتيب رحلتك الحالي.", "This section is outside your current journey.")}</p>
      {request ? <p role="status">{request.status === "pending" ? t("طلب الوصول قيد المراجعة.", "Your access request is under review.") : t("طلب الوصول اترفض.", "Your access request was declined.")}</p>
        : <button type="button" className="btn-outline" disabled={busy} onClick={send}>{opensAt ? t("اطلب فتح بدري", "Request early access") : t("اطلب الوصول", "Request access")}</button>}
      {error && <p role="alert">{t("تعذّر إرسال الطلب. جرّب تاني.", "Could not submit your request. Try again.")}</p>}
      {request?.status === "pending" && <button type="button" className="btn-outline" disabled={busy} onClick={send}>{t("حدّث حالة الطلب", "Refresh request status")}</button>}
    </section>
  );
};

window.BetaJourney = function BetaJourney({ lang, onRoute }) {
  const chart = ChartStore.getActiveChart();
  if (!chart || ChartStore.isAdmin()) return null;
  const ar = lang === "ar";
  const schedule = BetaAccess.schedule(ChartStore.journeyAnswers(), chart.createdAt);
  const otherSections = Object.keys(BetaAccess.labels).filter((section) => section !== "overview" && (section !== "learn" || BetaAccess.state(section).open) && !schedule.some((stage) => stage.section === section));
  return (
    <section className="card-glass beta-journey" aria-label={ar ? "رحلتك" : "Your journey"}>
      <h2>{ar ? "رحلتك" : "Your journey"}</h2>
      <div className="beta-journey-actions">{schedule.map(({ section }, index) => (
        <button key={section} type="button" className="btn-outline" onClick={() => onRoute(section)}>
          {index + 1}. {BetaAccess.labels[section][ar ? 0 : 1]} {!BetaAccess.state(section).open && <Icon.lock size={14} />}
        </button>
      ))}</div>
      <details>
        <summary>{ar ? "أقسام خارج ترتيب الرحلة" : "Other sections"}</summary>
        <div className="beta-journey-actions">{otherSections.map((section) => <button key={section} type="button" className="btn-outline" onClick={() => onRoute(section)}>
          {BetaAccess.labels[section][ar ? 0 : 1]} {!BetaAccess.state(section).open && <Icon.lock size={14} />}
        </button>)}</div>
      </details>
    </section>
  );
};