(() => {
/* global React, Icons, MOCK, toast */
const { useState, useMemo } = React;

/* =========================================================
   TEAMS
   ========================================================= */

function TeamCard({ t, onClick, isSelected }) {
  const pct = Math.round((t.captured / t.count) * 100);
  const status = pct === 100 ? "complete" : pct === 0 ? "pending" : "in-progress";
  const statusColor = pct === 100 ? "var(--mint)" : pct === 0 ? "var(--muted-2)" : "var(--coral)";
  return (
    <button onClick={onClick} className={`card hover`} style={{
      textAlign: "left", padding: 18, position: "relative", overflow: "hidden",
      borderColor: isSelected ? "var(--mint)" : "var(--line)",
      boxShadow: isSelected ? "0 0 0 3px var(--mint-soft)" : "",
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 16, gap: 8 }}>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 22, letterSpacing: "-0.01em", lineHeight: 1, whiteSpace: "nowrap" }}>{t.dept}</div>
          <div className="mono" style={{ fontSize: 11, color: "var(--muted-2)", marginTop: 4 }}>{t.unit}</div>
        </div>
        <span className="pill" style={{
          background: pct === 100 ? "var(--mint-soft)" : pct === 0 ? "var(--paper-2)" : "var(--coral-soft)",
          color: statusColor, borderColor: "transparent",
          whiteSpace: "nowrap", flex: "0 0 auto",
        }}>
          <span className="dot" />{status === "in-progress" ? "active" : status}
        </span>
      </div>

      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 8, whiteSpace: "nowrap" }}>
        <span style={{ fontFamily: "var(--font-display)", fontSize: 28, lineHeight: 1 }}>
          {t.captured}<span style={{ color: "var(--muted-2)", fontSize: 18 }}>&nbsp;/&nbsp;{t.count}</span>
        </span>
        <span className="mono" style={{ fontSize: 12, color: statusColor, fontWeight: 600 }}>{pct}%</span>
      </div>

      <div style={{ height: 5, borderRadius: 99, background: "var(--paper-2)", overflow: "hidden" }}>
        <div style={{
          width: `${pct}%`, height: "100%",
          background: pct === 100 ? "var(--mint)" : pct === 0 ? "transparent" : "var(--coral)",
          borderRadius: 99,
          transition: "width 1s cubic-bezier(.2,.8,.2,1)",
        }} />
      </div>

      <div style={{ marginTop: 14, paddingTop: 12, borderTop: "1px solid var(--line)",
                   display: "flex", justifyContent: "space-between", fontSize: 11.5, color: "var(--muted)" }}>
        <span>{t.count} enrolled</span>
        <span>Last screen · May 14</span>
      </div>
    </button>
  );
}

function ScreenTeams({ go }) {
  const [showAdd, setShowAdd] = useState(false);
  const [filter, setFilter] = useState("all");
  const [unit, setUnit] = useState("");
  const [dept, setDept] = useState("");

  const filtered = MOCK.teams.filter(t => {
    if (filter === "all") return true;
    const pct = t.captured / t.count;
    if (filter === "complete") return pct === 1;
    if (filter === "pending") return pct === 0;
    if (filter === "progress") return pct > 0 && pct < 1;
    return true;
  });

  const handleAdd = (e) => {
    e.preventDefault();
    if (!unit || !dept) return;
    toast(`Added ${dept} · ${unit}`);
    setUnit(""); setDept(""); setShowAdd(false);
  };

  return (
    <div className="screen col" style={{ gap: 24 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
        <div>
          <div className="eyebrow">{MOCK.teams.length} sections · {MOCK.teams.reduce((s,t)=>s+t.count,0)} students</div>
          <h1 className="h-display" style={{ marginTop: 8, fontSize: 36 }}>Teams &amp; sections</h1>
        </div>
        <div className="row">
          <div className="row" style={{ gap: 4, background: "var(--paper-2)", padding: 4, borderRadius: 10, border: "1px solid var(--line)" }}>
            {[
              { id: "all",     label: "All" },
              { id: "complete",label: "Complete" },
              { id: "progress",label: "In progress" },
              { id: "pending", label: "Pending" },
            ].map(t => (
              <button key={t.id} onClick={() => setFilter(t.id)} style={{
                padding: "6px 14px", borderRadius: 7, fontSize: 12, fontWeight: 600,
                background: filter === t.id ? "var(--surface)" : "transparent",
                color: filter === t.id ? "var(--ink)" : "var(--muted)",
                boxShadow: filter === t.id ? "var(--shadow-1)" : "",
                transition: "all .18s",
              }}>{t.label}</button>
            ))}
          </div>
          <button className="btn btn-mint" onClick={() => setShowAdd(s => !s)}>
            <Icons.Plus size={14} /> New team
          </button>
        </div>
      </div>

      {/* Add team form (animated expand) */}
      <div style={{
        maxHeight: showAdd ? 200 : 0,
        opacity: showAdd ? 1 : 0,
        overflow: "hidden",
        transition: "max-height .35s cubic-bezier(.2,.8,.2,1), opacity .25s",
      }}>
        <form onSubmit={handleAdd} className="card" style={{
          display: "grid", gridTemplateColumns: "1fr 1fr auto", gap: 14, alignItems: "end",
          background: "var(--ink)", color: "var(--paper)", borderColor: "transparent",
        }}>
          <div className="field">
            <label className="field-label" style={{ color: "rgba(246,241,231,0.5)" }}>Grade / Department</label>
            <input className="input" value={dept} onChange={e => setDept(e.target.value)}
                   placeholder="e.g. Grade 5"
                   style={{ background: "rgba(246,241,231,0.06)", color: "var(--paper)", borderColor: "rgba(246,241,231,0.12)" }} />
          </div>
          <div className="field">
            <label className="field-label" style={{ color: "rgba(246,241,231,0.5)" }}>Section / Unit no.</label>
            <input className="input" value={unit} onChange={e => setUnit(e.target.value)}
                   placeholder="e.g. E-503"
                   style={{ background: "rgba(246,241,231,0.06)", color: "var(--paper)", borderColor: "rgba(246,241,231,0.12)" }} />
          </div>
          <div className="row" style={{ gap: 8 }}>
            <button type="button" onClick={() => setShowAdd(false)} className="btn btn-ghost"
                    style={{ borderColor: "rgba(246,241,231,0.15)", color: "var(--paper)" }}>Cancel</button>
            <button type="submit" className="btn btn-mint" disabled={!unit || !dept}>Add team</button>
          </div>
        </form>
      </div>

      {/* Grid */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))", gap: 16 }} className="stagger">
        {filtered.map(t => (
          <TeamCard key={t.id} t={t} onClick={() => go("patients", t)} />
        ))}
      </div>
    </div>
  );
}

window.ScreenTeams = ScreenTeams;

/* =========================================================
   PATIENTS — individual + bulk import
   ========================================================= */

function StatusPill({ status }) {
  const map = {
    complete: { label: "Complete", cls: "mint" },
    partial:  { label: "Partial",  cls: "coral" },
    pending:  { label: "Pending",  cls: "" },
  };
  const m = map[status];
  return <span className={`pill ${m.cls}`}><span className="dot" />{m.label}</span>;
}

function ScreenPatients({ go }) {
  const [mode, setMode] = useState("list"); // list | add | bulk
  const [search, setSearch] = useState("");
  const [dragOver, setDragOver] = useState(false);

  // Add form
  const [form, setForm] = useState({ name: "", age: "", gender: "F", contact: "", email: "", team: "Grade 3 · C-301" });

  const filtered = MOCK.patients.filter(p =>
    !search ||
    p.name.toLowerCase().includes(search.toLowerCase()) ||
    p.id.toLowerCase().includes(search.toLowerCase()) ||
    p.dept.toLowerCase().includes(search.toLowerCase())
  );

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!form.name || !form.age) return;
    toast(`Registered ${form.name} — ID STU-${10260 + Math.floor(Math.random() * 100)}`);
    setForm({ name: "", age: "", gender: "F", contact: "", email: "", team: "Grade 3 · C-301" });
    setMode("list");
  };

  return (
    <div className="screen col" style={{ gap: 24 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
        <div>
          <div className="eyebrow">{MOCK.patients.length} students · {MOCK.org.cycle}</div>
          <h1 className="h-display" style={{ marginTop: 8, fontSize: 36 }}>Patients</h1>
        </div>
        <div className="row">
          <div className="search" style={{ minWidth: 320 }}>
            <Icons.Search size={16} stroke="var(--muted-2)" />
            <input value={search} onChange={e => setSearch(e.target.value)}
                   placeholder="Search by name, ID, grade…" />
          </div>
          <button className="btn btn-ghost" onClick={() => setMode("bulk")}>
            <Icons.Upload size={14} /> Bulk import
          </button>
          <button className="btn btn-mint" onClick={() => setMode("add")}>
            <Icons.Plus size={14} /> Add patient
          </button>
        </div>
      </div>

      {mode === "list" && (
        <div className="card" style={{ padding: 0, overflow: "hidden" }}>
          <div style={{
            display: "grid",
            gridTemplateColumns: "120px 1.4fr 1fr 70px 1fr 110px 80px 32px",
            padding: "12px 20px",
            background: "var(--paper-2)",
            borderBottom: "1px solid var(--line)",
            fontSize: 10.5, letterSpacing: ".08em", textTransform: "uppercase",
            color: "var(--muted)", fontWeight: 600,
          }}>
            <div>ID</div><div>Name</div><div>Section</div><div>Age</div>
            <div>Status</div><div>Captures</div><div>Report</div><div />
          </div>
          <div className="stagger">
          {filtered.map((p) => (
            <div key={p.id} className="patient-row" style={{
              display: "grid",
              gridTemplateColumns: "120px 1.4fr 1fr 70px 1fr 110px 80px 32px",
              padding: "14px 20px", alignItems: "center",
              borderBottom: "1px solid var(--line)",
              fontSize: 13.5, transition: "background .18s",
              cursor: "pointer",
            }}
            onMouseEnter={(e) => e.currentTarget.style.background = "var(--paper-2)"}
            onMouseLeave={(e) => e.currentTarget.style.background = ""}>
              <span className="mono" style={{ fontSize: 11.5, color: "var(--muted)" }}>{p.id}</span>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <div style={{
                  width: 28, height: 28, borderRadius: 8,
                  background: ["var(--mint-soft)","var(--coral-soft)","var(--gold-soft)","#ece8f7","#f7e3ec"][p.id.charCodeAt(p.id.length-1) % 5],
                  color: "var(--ink)",
                  display: "grid", placeItems: "center",
                  fontFamily: "var(--font-display)", fontSize: 13,
                }}>{p.name[0]}</div>
                <div>
                  <div style={{ fontWeight: 600 }}>{p.name} {p.flagged && <span style={{ color: "var(--coral)", marginLeft: 6 }} title="Flagged">●</span>}</div>
                  <div style={{ fontSize: 11, color: "var(--muted-2)" }}>{p.gender} · enrolled {p.date}</div>
                </div>
              </div>
              <div>
                <div style={{ fontSize: 13 }}>{p.dept}</div>
                <div className="mono" style={{ fontSize: 11, color: "var(--muted-2)" }}>{p.unit}</div>
              </div>
              <div className="mono">{p.age}</div>
              <div><StatusPill status={p.status} /></div>
              <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                <span className="mono" style={{ fontSize: 12 }}>{p.captures}/5</span>
                <div style={{ flex: 1, height: 4, borderRadius: 99, background: "var(--paper-2)", overflow: "hidden" }}>
                  <div style={{
                    width: `${(p.captures/5)*100}%`, height: "100%",
                    background: p.captures === 5 ? "var(--mint)" : "var(--coral)",
                    transition: "width .8s cubic-bezier(.2,.8,.2,1)"
                  }} />
                </div>
              </div>
              <div>
                {p.pdf ? (
                  <span style={{ color: "var(--mint)", display: "inline-flex", alignItems: "center", gap: 4, fontSize: 12 }}>
                    <Icons.Check size={13} /> Sent
                  </span>
                ) : (
                  <span style={{ color: "var(--muted-2)", fontSize: 12 }}>—</span>
                )}
              </div>
              <button className="icon-btn" style={{ width: 30, height: 30, border: 0, background: "transparent" }}>
                <Icons.Dots size={16} />
              </button>
            </div>
          ))}
          </div>
        </div>
      )}

      {mode === "add" && (
        <div style={{ display: "grid", gridTemplateColumns: "1fr 320px", gap: 24, alignItems: "start" }}>
          <div className="card" style={{ padding: 28 }}>
            <button onClick={() => setMode("list")} className="maglink" style={{ fontSize: 12, color: "var(--muted)", marginBottom: 14 }}>← Back to patients</button>
            <h2 className="h-section" style={{ fontSize: 32 }}>Register patient</h2>
            <p className="lede" style={{ marginTop: 8 }}>An individual ID will be auto-generated and emailed to the parent's contact.</p>

            <form onSubmit={handleSubmit} className="stagger" style={{ marginTop: 24, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              <div className="field" style={{ gridColumn: "span 2" }}>
                <label className="field-label">Full name</label>
                <input className="input" value={form.name} onChange={e => setForm({...form, name: e.target.value})} placeholder="Aarav Mehta" />
              </div>
              <div className="field">
                <label className="field-label">Age</label>
                <input className="input" type="number" value={form.age} onChange={e => setForm({...form, age: e.target.value})} placeholder="8" />
              </div>
              <div className="field">
                <label className="field-label">Gender</label>
                <div className="row" style={{ gap: 6, background: "var(--paper-2)", padding: 4, borderRadius: 10, border: "1px solid var(--line)" }}>
                  {["F","M","Other"].map(g => (
                    <button key={g} type="button" onClick={() => setForm({...form, gender: g})}
                            style={{
                              flex: 1, padding: "8px 0", borderRadius: 7, fontSize: 13, fontWeight: 600,
                              background: form.gender === g ? "var(--surface)" : "transparent",
                              color: form.gender === g ? "var(--ink)" : "var(--muted)",
                              boxShadow: form.gender === g ? "var(--shadow-1)" : "",
                              transition: "all .15s",
                            }}>{g}</button>
                  ))}
                </div>
              </div>
              <div className="field">
                <label className="field-label">Contact no.</label>
                <input className="input" value={form.contact} onChange={e => setForm({...form, contact: e.target.value})} placeholder="+91 98000 12345" />
              </div>
              <div className="field">
                <label className="field-label">Parent email</label>
                <input className="input" value={form.email} onChange={e => setForm({...form, email: e.target.value})} placeholder="parent@email.com" />
              </div>
              <div className="field" style={{ gridColumn: "span 2" }}>
                <label className="field-label">Team / Section</label>
                <select className="input" value={form.team} onChange={e => setForm({...form, team: e.target.value})}>
                  {MOCK.teams.map(t => <option key={t.id}>{t.dept} · {t.unit}</option>)}
                </select>
              </div>
              <div className="row" style={{ gridColumn: "span 2", justifyContent: "flex-end", gap: 10, marginTop: 8 }}>
                <button type="button" className="btn btn-ghost" onClick={() => setMode("list")}>Cancel</button>
                <button type="submit" className="btn btn-mint" disabled={!form.name || !form.age}>
                  Register patient <Icons.ArrowR size={14} />
                </button>
              </div>
            </form>
          </div>

          <div className="col" style={{ gap: 16 }}>
            <div className="card-paper card" style={{ padding: 18 }}>
              <div className="eyebrow">What happens next</div>
              <ol style={{ paddingLeft: 18, margin: "12px 0 0", fontSize: 13, lineHeight: 1.7, color: "var(--ink-2)" }}>
                <li>Individual ID generated</li>
                <li>Welcome email sent to parent</li>
                <li>Patient appears in capture queue</li>
                <li>Reports auto-delivered after screening</li>
              </ol>
            </div>
            <div className="card" style={{ padding: 18 }}>
              <div className="eyebrow">Prefer bulk?</div>
              <p style={{ fontSize: 13, color: "var(--muted)", margin: "10px 0 14px", lineHeight: 1.5 }}>
                Upload a CSV with up to 500 students at once. Auto-validates duplicates by email.
              </p>
              <button className="btn btn-soft" onClick={() => setMode("bulk")}>
                <Icons.Upload size={14} /> Switch to bulk import
              </button>
            </div>
          </div>
        </div>
      )}

      {mode === "bulk" && (
        <div className="col" style={{ gap: 16 }}>
          <button onClick={() => setMode("list")} className="maglink" style={{ fontSize: 12, color: "var(--muted)", alignSelf: "flex-start" }}>← Back to patients</button>
          <div className="card" style={{ padding: 28 }}>
            <h2 className="h-section" style={{ fontSize: 32 }}>Bulk import</h2>
            <p className="lede" style={{ marginTop: 8 }}>Drop a CSV with name, age, gender, contact, email, team.</p>

            <div
              className={`dropzone ${dragOver ? "active" : ""}`}
              style={{ marginTop: 22 }}
              onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
              onDragLeave={() => setDragOver(false)}
              onDrop={(e) => { e.preventDefault(); setDragOver(false); toast(`Importing ${e.dataTransfer.files.length || 1} file(s)…`); }}>
              <div style={{
                width: 56, height: 56, borderRadius: 16,
                background: "var(--mint-soft)", color: "var(--mint)",
                display: "grid", placeItems: "center", margin: "0 auto 14px",
              }}><Icons.Cloud size={26} /></div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 24 }}>Drop your CSV here</div>
              <div style={{ fontSize: 13, color: "var(--muted)", marginTop: 4 }}>or click to browse · up to 500 rows · 5 MB max</div>
              <div className="row" style={{ justifyContent: "center", gap: 10, marginTop: 18 }}>
                <button className="btn btn-mint" onClick={() => toast("Opening file picker…")}><Icons.Upload size={14} />Browse files</button>
                <button className="btn btn-ghost"><Icons.Download size={14} />Download template</button>
              </div>
            </div>

            <div style={{
              marginTop: 22, padding: 16,
              background: "var(--paper-2)", borderRadius: 12, border: "1px solid var(--line)",
              display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16,
            }}>
              {[
                { k: "Format",      v: "CSV, UTF-8" },
                { k: "Columns",     v: "6 required, 2 optional" },
                { k: "Validation",  v: "Email-deduped" },
              ].map((s, i) => (
                <div key={i}>
                  <div className="eyebrow">{s.k}</div>
                  <div style={{ marginTop: 4, fontSize: 13, fontWeight: 600 }}>{s.v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

window.ScreenPatients = ScreenPatients;

})();