// screens-admin1.jsx — Admin shell, Dashboard, Follow-up day (today)
const { useState: uSa, useMemo: uM } = React;

/* ============================================================
   ADMIN SHELL (right-side nav, RTL; bottom tab bar on mobile)
   ============================================================ */
function AdminShell({ nav, active, children }) {
  const items = [
    { k: "dashboard", label: "الرئيسية", icon: "home" },
    { k: "today", label: "يوم المتابعة", icon: "calendar" },
    { k: "cases", label: "الحالات", icon: "cases" },
    { k: "admin-feedback", label: "آراء المتابعين", icon: "chat" },
    { k: "settings", label: "الإعدادات", icon: "gear" },
  ];
  return (
    <div className="admin-shell">
      <main className="admin-main">{children}</main>
      <aside className="side-nav">
        <Logo onClick={() => nav("dashboard")} />
        <nav style={{ display: "flex", flexDirection: "column", flex: 1 }}>
          {items.map((it) => (
            <a key={it.k} className={`side-link ${active === it.k ? "active" : ""}`} onClick={() => nav(it.k)}>
              <Icon name={it.icon} /><span>{it.label}</span>
            </a>
          ))}
        </nav>
        <div className="side-foot">
          <a className="side-link side-logout" onClick={() => nav("home")}>
            <Icon name="logout" /><span>تسجيل الخروج</span>
          </a>
        </div>
      </aside>
    </div>
  );
}

/* ============================================================
   DASHBOARD
   ============================================================ */
function StatCard({ value, label, accent }) {
  const ac = { green: "var(--teal)", amber: "var(--amber)", ink: "var(--ink)" }[accent] || "var(--ink)";
  const bg = { green: "var(--green-tint)", amber: "var(--amber-tint)", ink: "var(--bg-2)" }[accent] || "var(--bg-2)";
  return (
    <div className="card card-pad" style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <span style={{ width: 38, height: 6, borderRadius: 999, background: ac, opacity: .9 }} />
      <span className="bignum num" style={{ fontSize: 48, color: ac }}>{value}</span>
      <span style={{ fontSize: 15, fontWeight: 600, color: "var(--ink-2)", textWrap: "balance" }}>{label}</span>
    </div>
  );
}

function Dashboard({ nav, patients, openPatient }) {
  const [q, setQ] = uSa("");
  const alerts = uM(() => patients.filter((p) => p.status === "expired" || p.remaining <= 2)
    .sort((a, b) => (a.status === "expired" ? -1 : 0) - (b.status === "expired" ? -1 : 0) || a.remaining - b.remaining), [patients]);
  const results = q.trim() ? patients.filter((p) => p.name.includes(q.trim())) : [];

  return (
    <AdminShell nav={nav} active="dashboard">
      <div className="fade-in">
        {/* topbar */}
        <div className="admin-topbar">
          <div>
            <div className="greet">أهلًا د. ندى 🌿</div>
            <div className="sub">{TODAY_LABEL}</div>
          </div>
          <div className="search" style={{ position: "relative" }}>
            <Icon name="search" />
            <input placeholder="ابحثي باسم الحالة..." value={q} onChange={(e) => setQ(e.target.value)} />
            {results.length > 0 && (
              <div className="card" style={{ position: "absolute", top: "calc(100% + 8px)", insetInlineEnd: 0, width: 280, padding: 6, zIndex: 30, boxShadow: "var(--shadow-md)" }}>
                {results.slice(0, 6).map((p) => (
                  <div key={p.id} onClick={() => { openPatient(p.id); }} className="row between" style={{ padding: "10px 12px", borderRadius: 10, cursor: "pointer" }}
                    onMouseEnter={(e) => e.currentTarget.style.background = "var(--bg)"} onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}>
                    <span style={{ fontWeight: 700, fontSize: 14.5 }}>{p.name}</span>
                    <span className={`num`} style={{ color: `var(--${countColor(p.remaining, p.status) === "green" ? "green" : countColor(p.remaining, p.status)})`, fontWeight: 800 }}>{p.remaining}</span>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>

        {/* stat row */}
        <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(170px, 1fr))", gap: 16, marginBottom: 28 }}>
          <StatCard value={STATS.active} label="الحالات النشطة" accent="ink" />
          <StatCard value={STATS.endingSoon} label="فاضلهم سيشنات قليلة" accent="amber" />
          <StatCard value={STATS.notFollowed} label="لسه متتابعوش الأسبوع ده" accent="amber" />
          <StatCard value={STATS.followedThisWeek} label="اتتابعوا الأسبوع ده" accent="green" />
        </div>

        <div className="dash-grid">
          {/* alerts */}
          <div className="card card-pad">
            <h2 className="section-title"><Icon name="bell" style={{ width: 22, height: 22, color: "var(--amber)" }} />تنبيهات محتاجة انتباهك</h2>
            <div className="stack" style={{ gap: 10 }}>
              {alerts.map((p) => {
                const c = p.status === "expired" || p.remaining <= 1 ? "red" : "amber";
                return (
                  <div key={p.id} className="row between" style={{ background: c === "red" ? "var(--red-tint)" : "var(--amber-tint)", borderRadius: 14, padding: "14px 16px", gap: 12, flexWrap: "wrap" }}>
                    <div className="row" style={{ gap: 12 }}>
                      <span style={{ width: 10, height: 10, borderRadius: "50%", background: c === "red" ? "var(--red)" : "var(--amber)", flex: "none" }} />
                      <div>
                        <div style={{ fontWeight: 800, fontSize: 16 }}>{p.name}</div>
                        <div style={{ fontSize: 14, color: c === "red" ? "#b1473e" : "#9a6c14", fontWeight: 600 }}>{alertLabel(p)}</div>
                      </div>
                    </div>
                    <button className="btn btn-sm btn-secondary" onClick={() => openPatient(p.id)}>فتح الحالة</button>
                  </div>
                );
              })}
            </div>
          </div>

          {/* today shortcut */}
          <div className="card card-pad" style={{ background: "var(--teal-tint-2)", border: "1px solid var(--line-2)" }}>
            <div className="row" style={{ gap: 10, marginBottom: 8 }}>
              <span style={{ width: 44, height: 44, borderRadius: 14, background: "#fff", display: "grid", placeItems: "center", color: "var(--teal)" }}><Icon name="calendar" style={{ width: 24, height: 24 }} /></span>
              <h3 style={{ fontSize: 19 }}>متابعة النهاردة</h3>
            </div>
            <p className="muted" style={{ fontSize: 15.5, marginBottom: 18, lineHeight: 1.7 }}>النهاردة يوم متابعة. عندك حالات مستنية تتابعيها.</p>
            <button className="btn btn-primary btn-block" onClick={() => nav("today")}>ابدئي يوم المتابعة<Icon name="arrow" /></button>
          </div>
        </div>
      </div>
    </AdminShell>
  );
}

/* ============================================================
   FOLLOW-UP DAY (today) — fast work list
   ============================================================ */
function Today({ nav, patients, openPatient, markFollowed }) {
  const [filter, setFilter] = uSa("pending"); // all | pending | done
  const pending = patients.filter((p) => !p.followed && p.status !== "expired");
  const done = patients.filter((p) => p.followed);
  const list = filter === "all" ? [...pending, ...done] : filter === "pending" ? pending : done;

  return (
    <AdminShell nav={nav} active="today">
      <div className="fade-in">
        <div style={{ marginBottom: 22 }}>
          <h1 className="greet" style={{ fontSize: 28 }}>يوم المتابعة</h1>
          <div className="sub" style={{ marginTop: 4 }}>الاثنين 8 يونيو</div>
          <p style={{ fontSize: 17, color: "var(--ink-2)", marginTop: 10 }}>
            <b className="num" style={{ color: "var(--teal-700)", fontSize: 20 }}>{pending.length}</b> حالة لسه محتاجة متابعة النهاردة
          </p>
        </div>

        <div className="row" style={{ gap: 10, marginBottom: 22 }}>
          {[["all", "الكل"], ["pending", "لسه"], ["done", "اتتابعوا"]].map(([k, l]) => (
            <button key={k} className={`chip ${filter === k ? "active" : ""}`} onClick={() => setFilter(k)}>{l}</button>
          ))}
        </div>

        <div className="stack" style={{ gap: 14, maxWidth: 760 }}>
          {list.map((p) => {
            const c = countColor(p.remaining, p.status);
            const col = c === "green" ? "var(--green)" : `var(--${c})`;
            const m = statusMeta(p.status);
            if (p.followed) {
              return (
                <div key={p.id} className="card" style={{ display: "flex", alignItems: "center", gap: 16, padding: "18px 22px", background: "var(--teal-tint-2)", borderColor: "var(--line-2)" }}>
                  <span style={{ width: 46, height: 46, borderRadius: "50%", background: "var(--teal)", display: "grid", placeItems: "center", color: "#fff", flex: "none" }}><Icon name="check" style={{ width: 26, height: 26 }} /></span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontWeight: 800, fontSize: 17, cursor: "pointer" }} onClick={() => openPatient(p.id)}>{p.name}</div>
                    <div style={{ color: "var(--teal-700)", fontWeight: 700, fontSize: 14.5 }}>اتسجلت ✓</div>
                  </div>
                  <span className="num" style={{ fontSize: 22, fontWeight: 800, color: col }}>باقي {p.remaining}</span>
                </div>
              );
            }
            return (
              <div key={p.id} className="card card-hover" style={{ display: "flex", alignItems: "center", gap: 18, padding: "18px 22px", flexWrap: "wrap" }}>
                <div style={{ flex: 1, minWidth: 140 }}>
                  <div className="row" style={{ gap: 10, marginBottom: 4 }}>
                    <span style={{ fontWeight: 800, fontSize: 18, cursor: "pointer" }} onClick={() => openPatient(p.id)}>{p.name}</span>
                    <span className={`pill ${m.cls}`} style={{ fontSize: 12 }}>{m.label}</span>
                  </div>
                  <div className="muted" style={{ fontSize: 13.5 }}>آخر جلسة: {p.last}</div>
                </div>
                <div style={{ textAlign: "center", minWidth: 78 }}>
                  <div className="num bignum" style={{ fontSize: 34, color: col, lineHeight: 1 }}>{p.remaining}</div>
                  <div style={{ fontSize: 12.5, fontWeight: 700, color: col }}>باقي</div>
                </div>
                <button className="btn btn-green" onClick={() => markFollowed(p.id)} style={{ flex: "none" }}>
                  <Icon name="check" />تمت المتابعة
                </button>
              </div>
            );
          })}
          {list.length === 0 && <div className="card card-pad muted" style={{ textAlign: "center" }}>مفيش حالات هنا 🌿</div>}
        </div>
      </div>
    </AdminShell>
  );
}

Object.assign(window, { AdminShell, Dashboard, Today });