// screens-admin2.jsx — Patient case page, Cases list, Feedback moderation
const { useState: uSb } = React;

/* ============================================================
   PATIENT CASE PAGE
   ============================================================ */
function QuickAction({ icon, label, onClick, tone }) {
  return (
    <button className="card card-hover" onClick={onClick}
      style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 9, padding: "18px 10px", cursor: "pointer", border: "1px solid var(--line)", background: "#fff" }}>
      <span style={{ width: 46, height: 46, borderRadius: 14, background: tone === "amber" ? "var(--amber-tint)" : tone === "grey" ? "var(--grey-tint)" : "var(--teal-tint)", display: "grid", placeItems: "center", color: tone === "amber" ? "var(--amber)" : tone === "grey" ? "var(--grey)" : "var(--teal)" }}>
        <Icon name={icon} style={{ width: 23, height: 23 }} />
      </span>
      <span style={{ fontSize: 13.5, fontWeight: 700, color: "var(--ink-2)", textAlign: "center" }}>{label}</span>
    </button>
  );
}

function AddSessionModal({ patient, onClose, onSave }) {
  const [date, setDate] = uSb("8 يونيو 2026");
  const [weight, setWeight] = uSb(patient.weights[patient.weights.length - 1]?.w || 80);
  const [commit, setCommit] = uSb(8);
  const [note, setNote] = uSb("");
  return (
    <Modal title="إضافة جلسة" onClose={onClose}
      footer={<button className="btn btn-primary btn-lg btn-block" onClick={() => onSave({ date, weight, commit, note })}>حفظ الجلسة</button>}>
      <div className="field">
        <label className="field-label">التاريخ</label>
        <input className="input" value={date} onChange={(e) => setDate(e.target.value)} />
      </div>
      <div className="field">
        <label className="field-label">الوزن (كجم)</label>
        <input className="input num" type="number" value={weight} onChange={(e) => setWeight(e.target.value)} dir="ltr" style={{ textAlign: "right" }} />
      </div>
      <div className="field">
        <label className="field-label row between">الالتزام<b className="num" style={{ color: "var(--teal-700)", fontSize: 17 }}>{commit}/10</b></label>
        <input className="range" type="range" min="1" max="10" value={commit} onChange={(e) => setCommit(+e.target.value)} />
      </div>
      <div className="field">
        <label className="field-label">ملاحظة</label>
        <div className="row wrap" style={{ gap: 8, marginBottom: 4 }}>
          {NOTE_TEMPLATES.map((tpl) => (
            <button key={tpl} className="chip" style={{ fontSize: 12.5, padding: "7px 12px" }} onClick={() => setNote(tpl)}>{tpl}</button>
          ))}
        </div>
        <textarea className="textarea" style={{ minHeight: 90 }} value={note} onChange={(e) => setNote(e.target.value)} placeholder="اكتبي ملاحظتك..." />
      </div>
    </Modal>
  );
}

function Patient({ nav, patient, back, addSession, quickAction }) {
  const [modal, setModal] = uSb(false);
  if (!patient) return null;
  const m = statusMeta(patient.status);
  return (
    <AdminShell nav={nav} active="cases">
      <div className="fade-in">
        <a className="btn btn-ghost btn-sm" onClick={back} style={{ marginBottom: 14, paddingInline: 0 }}><Icon name="arrow" />رجوع</a>

        {/* header */}
        <div className="row between wrap" style={{ gap: 16, marginBottom: 24 }}>
          <div className="row" style={{ gap: 16 }}>
            <span style={{ width: 60, height: 60, borderRadius: "50%", background: "var(--teal-tint)", display: "grid", placeItems: "center", color: "var(--teal-700)", fontWeight: 800, fontSize: 24, flex: "none" }}>{patient.name[0]}</span>
            <div>
              <div className="row" style={{ gap: 12 }}>
                <h1 style={{ fontSize: 28 }}>{patient.name}</h1>
                <StatusPill status={patient.status} />
              </div>
              <div className="row wrap" style={{ gap: 16, marginTop: 6, color: "var(--ink-3)", fontSize: 14.5, fontWeight: 600 }}>
                <span className="row" style={{ gap: 5 }}><Icon name="phone" style={{ width: 16, height: 16 }} />{patient.phone}</span>
                <span>بدأت المتابعة: {patient.start}</span>
              </div>
            </div>
          </div>
        </div>

        <div className="patient-grid">
          {/* LEFT: hero stat + chart */}
          <div className="stack" style={{ gap: 22 }}>
            <div className="card card-pad" style={{ textAlign: "center", padding: 28 }}>
              <div style={{ fontSize: 15, fontWeight: 700, color: "var(--ink-2)", marginBottom: 16 }}>السيشنات المتبقية</div>
              <div style={{ position: "relative", width: 168, height: 168, margin: "0 auto" }}>
                <Ring value={patient.remaining} total={patient.total} size={168} stroke={14} />
                <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center" }}>
                  <div>
                    <div className="num bignum" style={{ fontSize: 64, color: "var(--teal)" }}>{patient.remaining}</div>
                    <div className="muted num" style={{ fontSize: 14.5, fontWeight: 600 }}>من إجمالي {patient.total}</div>
                  </div>
                </div>
              </div>
            </div>

            <div className="card card-pad">
              <h3 className="section-title" style={{ fontSize: 17, marginBottom: 4 }}><Icon name="weight" style={{ width: 20, height: 20, color: "var(--teal)" }} />تطوّر الوزن</h3>
              <WeightChart weights={patient.weights} />
            </div>
          </div>

          {/* RIGHT: actions + timeline */}
          <div className="stack" style={{ gap: 22 }}>
            <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(96px, 1fr))", gap: 12 }}>
              <QuickAction icon="plus" label="إضافة جلسة" onClick={() => setModal(true)} />
              <QuickAction icon="note" label="ملاحظة" onClick={() => quickAction("تمت إضافة ملاحظة")} />
              <QuickAction icon="gift" label="جلسة هدية" onClick={() => quickAction("اتضافت جلسة هدية 🎁")} />
              <QuickAction icon="refresh" label="تجديد / باقة" onClick={() => quickAction("تم فتح تجديد الباقة")} />
              <QuickAction icon="pause" label="إيقاف مؤقت" tone="grey" onClick={() => quickAction("تم الإيقاف المؤقت")} />
            </div>

            <div className="card card-pad">
              <h3 className="section-title" style={{ fontSize: 18 }}>السجل الكامل</h3>
              <div className="timeline">
                {(patient.timeline || []).slice().reverse().map((e, i) => (
                  <div key={i} className="tl-item">
                    <span className={`tl-dot ${e.t === "gift" ? "gift" : e.t === "credit" ? "credit" : ""}`} />
                    <div className="tl-date">{e.date}</div>
                    <div className="tl-body">
                      {e.text}{e.tag && <b style={{ color: "var(--teal-700)" }}> ({e.tag})</b>}
                      {e.meta && <div className="tl-meta">{e.meta.map((mm, j) => <span key={j} className="tl-tag">{mm}</span>)}</div>}
                      {e.note && <div style={{ marginTop: 6, fontSize: 14, color: "var(--ink-2)", fontStyle: "normal" }}>📝 {e.note}</div>}
                    </div>
                  </div>
                ))}
                {(!patient.timeline || patient.timeline.length === 0) && <p className="muted">مفيش سجل بعد.</p>}
              </div>
            </div>
          </div>
        </div>
      </div>

      {modal && <AddSessionModal patient={patient} onClose={() => setModal(false)} onSave={(s) => { addSession(patient.id, s); setModal(false); }} />}
    </AdminShell>
  );
}

/* ============================================================
   CASES LIST
   ============================================================ */
function Cases({ nav, patients, openPatient }) {
  const [q, setQ] = uSb("");
  const [tab, setTab] = uSb("all");
  const filtered = patients.filter((p) => {
    if (q.trim() && !p.name.includes(q.trim())) return false;
    if (tab === "active") return p.status === "active";
    if (tab === "ending") return p.status === "ending";
    if (tab === "paused") return p.status === "paused" || p.status === "expired";
    return true;
  });
  return (
    <AdminShell nav={nav} active="cases">
      <div className="fade-in">
        <div className="admin-topbar">
          <div><h1 className="greet" style={{ fontSize: 28 }}>الحالات</h1><div className="sub" style={{ marginTop: 4 }}>{patients.length} حالة في القائمة</div></div>
          <div className="search"><Icon name="search" /><input placeholder="ابحثي باسم الحالة..." value={q} onChange={(e) => setQ(e.target.value)} /></div>
        </div>
        <div className="row wrap" style={{ gap: 10, marginBottom: 20 }}>
          {[["all", "الكل"], ["active", "نشطة"], ["ending", "قرب يخلص"], ["paused", "متوقفة/منتهية"]].map(([k, l]) => (
            <button key={k} className={`chip ${tab === k ? "active" : ""}`} onClick={() => setTab(k)}>{l}</button>
          ))}
        </div>
        <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 16 }}>
          {filtered.map((p) => {
            const c = countColor(p.remaining, p.status);
            const col = c === "green" ? "var(--green)" : `var(--${c})`;
            return (
              <div key={p.id} className="card card-pad card-hover" onClick={() => openPatient(p.id)} style={{ cursor: "pointer" }}>
                <div className="row between" style={{ marginBottom: 14 }}>
                  <div className="row" style={{ gap: 11 }}>
                    <span style={{ width: 42, height: 42, borderRadius: "50%", background: "var(--teal-tint)", display: "grid", placeItems: "center", color: "var(--teal-700)", fontWeight: 800 }}>{p.name[0]}</span>
                    <div>
                      <div style={{ fontWeight: 800, fontSize: 16 }}>{p.name}</div>
                      <div className="muted num" style={{ fontSize: 13 }}>{p.phone}</div>
                    </div>
                  </div>
                  <StatusPill status={p.status} />
                </div>
                <div className="row between" style={{ borderTop: "1px solid var(--line)", paddingTop: 14 }}>
                  <span className="muted" style={{ fontSize: 13.5 }}>آخر جلسة: {p.last}</span>
                  <span className="num" style={{ fontWeight: 800, fontSize: 17, color: col }}>باقي {p.remaining}</span>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </AdminShell>
  );
}

/* ============================================================
   FEEDBACK MODERATION
   ============================================================ */
function Moderation({ nav, pending, published, onApprove, onReject }) {
  const [tab, setTab] = uSb("pending");
  return (
    <AdminShell nav={nav} active="admin-feedback">
      <div className="fade-in">
        <h1 className="greet" style={{ fontSize: 28, marginBottom: 4 }}>مراجعة الآراء</h1>
        <p className="muted" style={{ fontSize: 15, marginBottom: 22 }}>مفيش رأي بيظهر للجميع غير لما توافقي عليه.</p>

        <div className="row" style={{ gap: 10, marginBottom: 22 }}>
          <button className={`chip ${tab === "pending" ? "active" : ""}`} onClick={() => setTab("pending")}>بانتظار المراجعة ({pending.length})</button>
          <button className={`chip ${tab === "published" ? "active" : ""}`} onClick={() => setTab("published")}>المنشورة</button>
        </div>

        <div className="stack" style={{ gap: 14, maxWidth: 760 }}>
          {tab === "pending" && pending.map((f) => (
            <div key={f.id} className="card card-pad fade-in">
              <div className="row between" style={{ marginBottom: 10 }}>
                <div className="row" style={{ gap: 10 }}>
                  <span style={{ width: 38, height: 38, borderRadius: "50%", background: "var(--teal-tint)", display: "grid", placeItems: "center", color: "var(--teal-700)", fontWeight: 800 }}>{f.name ? f.name[0] : "؟"}</span>
                  <div>
                    <b style={{ fontSize: 15.5 }}>{f.name || "بدون اسم"}</b>
                    <div className="muted" style={{ fontSize: 13 }}>{f.date}</div>
                  </div>
                </div>
                <Stars value={f.rating} size={16} />
              </div>
              <p style={{ fontSize: 16, lineHeight: 1.8, marginBottom: 16, textWrap: "pretty" }}>“{f.text}”</p>
              <div className="row" style={{ gap: 10 }}>
                <button className="btn btn-green btn-sm" onClick={() => onApprove(f.id)}><Icon name="check" />نشر</button>
                <button className="btn btn-danger-soft btn-sm" onClick={() => onReject(f.id)}>رفض</button>
              </div>
            </div>
          ))}
          {tab === "pending" && pending.length === 0 && <div className="card card-pad muted" style={{ textAlign: "center" }}>مفيش آراء مستنية مراجعة 🌿</div>}

          {tab === "published" && published.map((f) => (
            <div key={f.id} className="card card-pad">
              <div className="row between" style={{ marginBottom: 10 }}>
                <div className="row" style={{ gap: 10 }}>
                  <span style={{ width: 38, height: 38, borderRadius: "50%", background: "var(--teal-tint)", display: "grid", placeItems: "center", color: "var(--teal-700)", fontWeight: 800 }}>{f.name ? f.name[0] : "؟"}</span>
                  <b style={{ fontSize: 15.5 }}>{f.name || "بدون اسم"}</b>
                </div>
                <div className="row" style={{ gap: 10 }}>
                  <Stars value={f.rating} size={16} />
                  <span className="pill pill-green" style={{ fontSize: 12 }}><i className="dot" />منشور</span>
                </div>
              </div>
              <p style={{ fontSize: 16, lineHeight: 1.8, textWrap: "pretty" }}>“{f.text}”</p>
            </div>
          ))}
        </div>
      </div>
    </AdminShell>
  );
}

/* ============================================================
   SETTINGS (light placeholder — nav target)
   ============================================================ */
function Settings({ nav }) {
  return (
    <AdminShell nav={nav} active="settings">
      <div className="fade-in">
        <h1 className="greet" style={{ fontSize: 28, marginBottom: 4 }}>الإعدادات</h1>
        <p className="muted" style={{ fontSize: 15, marginBottom: 22 }}>إعدادات الحساب وأيام المتابعة.</p>
        <div className="stack" style={{ gap: 14, maxWidth: 620 }}>
          {[
            ["أيام المتابعة", "الاثنين والخميس", "calendar"],
            ["الملف الشخصي", "ندى حسن توفيق · أخصائية تغذية علاجية", "user"],
            ["الإشعارات", "تنبيهات الحالات القريبة من الانتهاء", "bell"],
            ["اللوجو والهوية", "لوجو Nutrition Vibes وألوان الهوية", "leaf"],
          ].map(([t, d, ic]) => (
            <div key={t} className="card card-pad row between">
              <div className="row" style={{ gap: 14 }}>
                <span style={{ width: 44, height: 44, borderRadius: 13, background: "var(--teal-tint)", display: "grid", placeItems: "center", color: "var(--teal)" }}><Icon name={ic} style={{ width: 22, height: 22 }} /></span>
                <div><div style={{ fontWeight: 700, fontSize: 16 }}>{t}</div><div className="muted" style={{ fontSize: 14 }}>{d}</div></div>
              </div>
              <Icon name="arrow" style={{ width: 18, height: 18, color: "var(--ink-3)", transform: "scaleX(-1)" }} />
            </div>
          ))}
        </div>
      </div>
    </AdminShell>
  );
}

Object.assign(window, { Patient, AddSessionModal, Cases, Moderation, Settings });