// screens-admin3.jsx — Subscriptions & accounts (§9), Add new case (§11)
const { useState: uSc, useMemo: uMc } = React;

/* ============================================================
   §9 — SUBSCRIPTIONS & ACCOUNTS  ·  الاشتراكات والحسابات
   ============================================================ */
function AcctSummary({ icon, value, cur, label, tone }) {
  const tn = tone === "green"
    ? { bg: "var(--green-tint)", fg: "#5b8a2c" }
    : { bg: "var(--teal-tint)", fg: "var(--teal)" };
  return (
    <div className="card money-card" style={{ background: "var(--teal-tint-2)", border: "1px solid var(--line-2)" }}>
      <span className="money-ic" style={{ background: tn.bg, color: tn.fg }}><Icon name={icon} /></span>
      <div>
        <div className="money-val num">{value}{cur && <span className="cur">{cur}</span>}</div>
        <div className="money-lbl">{label}</div>
      </div>
    </div>
  );
}

function BalanceCell({ n }) {
  return n > 0
    ? <span className="bal-pos num">{egp(n)}</span>
    : <span className="bal-zero num">٠</span>;
}

function Accounts({ nav, patients, openPatient, toast }) {
  const [q, setQ] = uSc("");
  const [tab, setTab] = uSc("all");
  const rows = uMc(() => {
    const withSub = patients.filter((p) => p.sub);
    return withSub.filter((p) => {
      if (tab !== "all" && p.sub.status !== tab) return false;
      const term = q.trim();
      if (term && !p.name.includes(term) && !(p.caseId || "").includes(term)) return false;
      return true;
    });
  }, [patients, q, tab]);

  const TABS = [["all", "الكل"], ["active", "نشط"], ["expired", "منتهي"], ["paused", "متوقف"]];
  const COLS = ["رقم الحالة", "الاسم", "نوع الاشتراك", "البداية", "النهاية", "القيمة", "المدفوع", "المتبقي", "طريقة الدفع", "الحالة"];

  // real Excel-friendly CSV of the currently-filtered rows (UTF-8 BOM so Arabic renders in Excel)
  const exportCsv = () => {
    const esc = (v) => {
      const s = String(v == null ? "" : v);
      return /[",\n\r]/.test(s) ? '"' + s.replace(/"/g, '""') + '"' : s;
    };
    const lines = [COLS.join(",")];
    rows.forEach((p) => {
      lines.push([
        p.caseId, p.name, p.sub.type, p.sub.start, p.sub.end,
        p.sub.value, p.sub.paid, p.sub.balance, p.sub.method, subMeta(p.sub.status).label,
      ].map(esc).join(","));
    });
    const csv = String.fromCharCode(0xFEFF) + lines.join("\r\n");
    const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url; a.download = "nutrition-vibes-accounts.csv";
    document.body.appendChild(a); a.click(); document.body.removeChild(a);
    setTimeout(() => URL.revokeObjectURL(url), 1500);
    toast("اتجهّز ملف Excel للتنزيل ✓");
  };

  return (
    <AdminShell nav={nav} active="accounts">
      <div className="fade-in">
        <div className="row between wrap" style={{ gap: 14, marginBottom: 8 }}>
          <div>
            <h1 className="greet" style={{ fontSize: 28 }}>الاشتراكات والحسابات</h1>
            <div className="sub" style={{ marginTop: 4 }}>كل اشتراك ومدفوعاته في مكان واحد</div>
          </div>
          <button className="btn btn-secondary btn-sm" onClick={exportCsv}><Icon name="note" />تصدير Excel</button>
        </div>

        {/* summary strip */}
        <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 16, margin: "20px 0 26px" }}>
          <AcctSummary icon="wallet" value={egp(MONEY.totalRevenue)} cur="ج.م" label="إجمالي الإيرادات" />
          <AcctSummary icon="coins"  value={egp(MONEY.monthRevenue)} cur="ج.م" label="إيرادات الشهر" />
          <AcctSummary icon="refresh" value={MONEY.activeSubs} label="اشتراكات نشطة" tone="green" />
        </div>

        {/* controls */}
        <div className="row between wrap" style={{ gap: 14, marginBottom: 20 }}>
          <div className="row wrap" style={{ gap: 10 }}>
            {TABS.map(([k, l]) => (
              <button key={k} className={`chip ${tab === k ? "active" : ""}`} onClick={() => setTab(k)}>{l}</button>
            ))}
          </div>
          <div className="search" style={{ minWidth: 240, maxWidth: 340 }}>
            <Icon name="search" /><input placeholder="ابحث باسم أو رقم حالة..." value={q} onChange={(e) => setQ(e.target.value)} />
          </div>
        </div>

        {/* table (desktop) */}
        <div className="card" style={{ padding: "6px 10px", overflowX: "auto" }}>
          <div className="subs-table-wrap">
            <table className="subs-table">
              <thead>
                <tr>{COLS.map((c) => <th key={c}>{c}</th>)}</tr>
              </thead>
              <tbody>
                {rows.map((p) => {
                  const m = subMeta(p.sub.status);
                  return (
                    <tr key={p.id} onClick={() => openPatient(p.id)}>
                      <td><span className="case-id">{p.caseId}</span></td>
                      <td style={{ fontWeight: 800 }}>{p.name}</td>
                      <td>{p.sub.type}</td>
                      <td className="muted">{p.sub.start.replace(" 2026", "")}</td>
                      <td className="muted">{p.sub.end.replace(" 2026", "")}</td>
                      <td className="num">{egp(p.sub.value)}</td>
                      <td className="num">{egp(p.sub.paid)}</td>
                      <td><BalanceCell n={p.sub.balance} /></td>
                      <td>{p.sub.method}</td>
                      <td><span className={`pill ${m.cls}`} style={{ fontSize: 12 }}><i className="dot" />{m.label}</span></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>

          {/* stacked cards (mobile) */}
          <div className="subs-cards" style={{ padding: "12px 6px" }}>
            {rows.map((p) => {
              const m = subMeta(p.sub.status);
              return (
                <div key={p.id} className="card card-pad" onClick={() => openPatient(p.id)} style={{ cursor: "pointer" }}>
                  <div className="row between" style={{ marginBottom: 12 }}>
                    <div className="row" style={{ gap: 10 }}>
                      <span className="case-badge">{p.caseId}</span>
                      <b style={{ fontSize: 16 }}>{p.name}</b>
                    </div>
                    <span className={`pill ${m.cls}`} style={{ fontSize: 12 }}><i className="dot" />{m.label}</span>
                  </div>
                  <div className="sub-card-row"><span className="k">نوع الاشتراك</span><span className="v">{p.sub.type}</span></div>
                  <div className="sub-card-row"><span className="k">المدة</span><span className="v">{p.sub.start.replace(" 2026", "")} ← {p.sub.end.replace(" 2026", "")}</span></div>
                  <div className="sub-card-row"><span className="k">القيمة / المدفوع</span><span className="v num">{egp(p.sub.value)} / {egp(p.sub.paid)} ج.م</span></div>
                  <div className="sub-card-row"><span className="k">المتبقي</span><span className="v"><BalanceCell n={p.sub.balance} /></span></div>
                  <div className="sub-card-row"><span className="k">طريقة الدفع</span><span className="v">{p.sub.method}</span></div>
                </div>
              );
            })}
          </div>

          {rows.length === 0 && <div className="muted" style={{ textAlign: "center", padding: 30 }}>مفيش اشتراكات في الفلتر ده 🌿</div>}
        </div>
      </div>
    </AdminShell>
  );
}

/* ============================================================
   §11 — ADD NEW CASE  ·  إضافة حالة جديدة
   ============================================================ */
function endFromStart(pkgKey) {
  const pk = SUB_PACKAGES.find((x) => x.k === pkgKey);
  if (!pk || !pk.weeks) return "—";
  // simple mock: today (8 يونيو) + weeks
  const map = { 4: "8 يوليو 2026", 8: "8 أغسطس 2026", 12: "8 سبتمبر 2026" };
  return map[pk.weeks] || "—";
}

function AddCase({ nav, onSave }) {
  const [name, setName] = uSc("");
  const [phone, setPhone] = uSc("");
  const [category, setCategory] = uSc(CATEGORY_OPTIONS[0]);
  const [clinical, setClinical] = uSc("نشط");
  const [withSub, setWithSub] = uSc(false);
  const [pkg, setPkg] = uSc("شهر");
  const [start, setStart] = uSc(arToday());
  const [value, setValue] = uSc("");
  const [paid, setPaid] = uSc("");
  const [method, setMethod] = uSc("كاش");

  const end = endFromStart(pkg);
  const balance = Math.max(0, (+value || 0) - (+paid || 0));

  const save = () => {
    if (!name.trim()) return;
    onSave({
      name: name.trim(), phone: phone.trim(), category: category, clinical: clinical,
      sub: withSub ? { pkg: pkg, value: value, paid: paid, method: method } : null,
    });
  };

  return (
    <AdminShell nav={nav} active="cases">
      <div className="fade-in" style={{ maxWidth: 680 }}>
        <a className="btn btn-ghost btn-sm" onClick={() => nav("cases")} style={{ marginBottom: 14, paddingInline: 0 }}><Icon name="arrow" />رجوع للحالات</a>
        <h1 className="greet" style={{ fontSize: 28, marginBottom: 4 }}>إضافة حالة جديدة</h1>
        <p className="muted" style={{ fontSize: 15, marginBottom: 22 }}>سجّلي بيانات الحالة، والاشتراك لو حابة دلوقتي.</p>

        {/* auto case number */}
        <div className="card card-pad" style={{ background: "var(--teal-tint-2)", border: "1px solid var(--line-2)", marginBottom: 22, display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap" }}>
          <span style={{ width: 44, height: 44, borderRadius: 13, background: "#fff", display: "grid", placeItems: "center", color: "var(--teal)", flex: "none" }}><Icon name="cases" style={{ width: 22, height: 22 }} /></span>
          <div style={{ flex: 1, minWidth: 180 }}>
            <div style={{ fontSize: 13, fontWeight: 700, color: "var(--ink-3)" }}>رقم الحالة</div>
            <div className="row" style={{ gap: 8, marginTop: 3 }}>
              <span className="case-badge" style={{ background: "#fff" }}>تلقائي</span>
            </div>
          </div>
          <span className="muted" style={{ fontSize: 13.5, fontWeight: 600 }}>بيتسجّل تلقائي لكل حالة جديدة</span>
        </div>

        {/* section: بيانات الحالة */}
        <div className="card card-pad" style={{ marginBottom: 20 }}>
          <h3 className="section-title" style={{ fontSize: 18 }}>بيانات الحالة</h3>
          <div className="stack" style={{ gap: 18 }}>
            <div className="field">
              <label className="field-label">الاسم <span style={{ color: "var(--apple)" }}>*</span></label>
              <input className="input" value={name} onChange={(e) => setName(e.target.value)} placeholder="اسم الحالة" />
            </div>
            <div className="field">
              <label className="field-label">رقم الموبايل</label>
              <input className="input num" value={phone} onChange={(e) => setPhone(e.target.value)} dir="ltr" style={{ textAlign: "right" }} placeholder="01•••••••••" />
            </div>
            <div className="field">
              <label className="field-label">التصنيف</label>
              <select className="input" value={category} onChange={(e) => setCategory(e.target.value)}>
                {CATEGORY_OPTIONS.map((c) => <option key={c} value={c}>{c}</option>)}
              </select>
            </div>
            <div className="field">
              <label className="field-label">حالة المريض</label>
              <select className="input" value={clinical} onChange={(e) => setClinical(e.target.value)}>
                {CLINICAL_OPTIONS.map((c) => <option key={c} value={c}>{c}</option>)}
              </select>
            </div>
          </div>
        </div>

        {/* section: الاشتراك (collapsible) */}
        <div className="card card-pad" style={{ marginBottom: 22 }}>
          <label className="row between" style={{ cursor: "pointer", gap: 12 }}>
            <span className="section-title" style={{ marginBottom: 0, fontSize: 18 }}><Icon name="wallet" style={{ width: 20, height: 20, color: "var(--teal)" }} />إضافة اشتراك الآن؟</span>
            <input type="checkbox" checked={withSub} onChange={(e) => setWithSub(e.target.checked)} style={{ width: 22, height: 22, accentColor: "var(--teal)" }} />
          </label>
          {withSub && (
            <div className="stack fade-in" style={{ gap: 18, marginTop: 20 }}>
              <div className="field">
                <label className="field-label">نوع الاشتراك</label>
                <div className="row wrap" style={{ gap: 8 }}>
                  {SUB_PACKAGES.map((pk) => (
                    <button key={pk.k} className={`chip ${pkg === pk.k ? "active" : ""}`} onClick={() => setPkg(pk.k)}>
                      {pk.k}{pk.sessions ? ` · ${pk.sessions} سيشن` : ""}
                    </button>
                  ))}
                </div>
              </div>
              <div className="grid" style={{ gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                <div className="field">
                  <label className="field-label">تاريخ البداية</label>
                  <input className="input" value={start} onChange={(e) => setStart(e.target.value)} />
                </div>
                <div className="field">
                  <label className="field-label">تاريخ النهاية (تلقائي)</label>
                  <input className="input" value={end} readOnly style={{ background: "var(--bg-2)", color: "var(--ink-2)" }} />
                </div>
              </div>
              <div className="grid" style={{ gridTemplateColumns: "1fr 1fr 1fr", gap: 16 }}>
                <div className="field">
                  <label className="field-label">قيمة الاشتراك</label>
                  <input className="input num" type="number" value={value} onChange={(e) => setValue(e.target.value)} dir="ltr" style={{ textAlign: "right" }} placeholder="0" />
                </div>
                <div className="field">
                  <label className="field-label">المدفوع</label>
                  <input className="input num" type="number" value={paid} onChange={(e) => setPaid(e.target.value)} dir="ltr" style={{ textAlign: "right" }} placeholder="0" />
                </div>
                <div className="field">
                  <label className="field-label">المتبقي (تلقائي)</label>
                  <input className="input num" value={egp(balance)} readOnly dir="ltr" style={{ textAlign: "right", background: balance > 0 ? "var(--amber-tint)" : "var(--bg-2)", color: balance > 0 ? "#9a6c14" : "var(--ink-2)", fontWeight: 800 }} />
                </div>
              </div>
              <div className="field">
                <label className="field-label">طريقة الدفع</label>
                <div className="row wrap" style={{ gap: 8 }}>
                  {PAY_METHODS.map((mm) => (
                    <button key={mm} className={`chip ${method === mm ? "active" : ""}`} onClick={() => setMethod(mm)}>{mm}</button>
                  ))}
                </div>
              </div>
            </div>
          )}
        </div>

        <button className="btn btn-primary btn-lg btn-block" onClick={save} disabled={!name.trim()}
          style={{ opacity: name.trim() ? 1 : .55, cursor: name.trim() ? "pointer" : "not-allowed" }}>
          <Icon name="check" />حفظ الحالة
        </button>
      </div>
    </AdminShell>
  );
}

Object.assign(window, { Accounts, AddCase });