/* students.jsx — 学生 list + StudentDetail */
const { useState: uS } = React;

function StudentsList({ state, goStudent, onAddStudent }) {
  const { calc, fmt } = window.LP;
  const [q, setQ] = uS("");
  const [filter, setFilter] = uS("all");

  let list = state.students;
  if (q.trim()) {
    const k = q.toLowerCase();
    list = list.filter((s) => (s.name + " " + s.cnName).toLowerCase().includes(k));
  }
  if (filter === "active") list = list.filter((s) => s.status === "active");
  if (filter === "low") list = list.filter((s) => ["low", "over"].includes(calc.balanceState(s)));

  return (
    <div className="view">
      <div className="page-head">
        <div>
          <h1>Data Library <span className="page-head-en">Student Catalog</span></h1>
          <p className="page-sub">{state.students.length} students · source of truth for entry and filters</p>
        </div>
        <Button variant="primary" icon={<Icon.plus size={16} />} onClick={onAddStudent}>Add student</Button>
      </div>

      <div className="toolbar">
        <div className="search">
          <Icon.search size={16} />
          <input placeholder="Search student / alias..." value={q} onChange={(e) => setQ(e.target.value)} />
        </div>
        <div className="seg">
          {[["all", "全部"], ["active", "活跃"], ["low", "需关注"]].map(([k, l]) => (
            <button key={k} className={filter === k ? "is-active" : ""} onClick={() => setFilter(k)}>{l}</button>
          ))}
        </div>
      </div>

      <div className="student-grid">
        {list.map((s) => <StudentCard key={s.id} s={s} onClick={() => goStudent(s.id)} />)}
        {list.length === 0 && <EmptyState icon={<Icon.users size={26} />} title="没有匹配的学生" />}
      </div>
    </div>
  );
}

function StudentCard({ s, onClick }) {
  const { calc, fmt } = window.LP;
  const rem = calc.remainingMinutes(s);
  const credited = calc.creditedMinutes(s);
  const bs = calc.balanceState(s);
  const last = calc.lastSessionDate(s);
  const toneMap = { ok: "green", low: "amber", over: "red", none: "neutral" };
  return (
    <div className="scard" onClick={onClick}>
      <div className="scard-top">
        <Avatar name={s.name} size={42} state={bs} />
        <div className="scard-id">
          <strong>{s.name}</strong>
          {s.cnName && <span className="muted">{s.cnName}</span>}
        </div>
        {s.status !== "active" && <Badge tone="neutral">暂停</Badge>}
      </div>
      <div className="scard-balance">
        <div className="scard-rem">
          <span className={`big mono ${bs === "over" ? "neg" : bs === "low" ? "warn" : ""}`}>{credited ? fmt.hrs(rem) : "—"}</span>
          <em>剩余课时{credited ? ` / ${fmt.hoursDecimal(credited)}` : ""}</em>
        </div>
        {bs !== "none" && <Badge tone={toneMap[bs]} dot>{bs === "over" ? "超额" : bs === "low" ? "不足" : "正常"}</Badge>}
      </div>
      {credited > 0 && <ProgressBar value={rem} max={credited} state={bs} />}
      <div className="scard-foot">
        <span>{calc.totalSessions(s)} sessions</span>
        <span className="muted">最近 {last ? fmt.date(last) : "—"}</span>
      </div>
    </div>
  );
}

/* ---------- Detail ---------- */
function StudentDetail({ state, studentId, back, dispatch, openModal }) {
  const { calc, fmt } = window.LP;
  const s = state.students.find((x) => x.id === studentId);
  if (!s) return null;
  const rem = calc.remainingMinutes(s);
  const credited = calc.creditedMinutes(s);
  const used = calc.usedMinutes(s);
  const bs = calc.balanceState(s);
  const toneMap = { ok: "green", low: "amber", over: "red", none: "neutral" };

  const sessions = [...(s.sessions || [])].sort((a, b) => (a.date < b.date ? 1 : -1));

  return (
    <div className="view">
      <button className="back-link" onClick={back}><Icon.chevL size={16} /> 学生列表</button>

      <div className="detail-head">
        <Avatar name={s.name} size={64} state={bs} />
        <div className="detail-id">
          <div className="detail-name">
            <h1>{s.name}</h1>
            {s.status !== "active" && <Badge tone="neutral">暂停</Badge>}
            {(s.tags || []).map((t) => <Badge key={t} tone="blue">{t}</Badge>)}
          </div>
          {s.cnName && <p className="page-sub">{s.cnName}</p>}
        </div>
        <div className="detail-actions">
          <Button variant="ghost" size="sm" icon={<Icon.edit size={15} />} onClick={() => openModal({ type: "student", student: s })}>编辑</Button>
          <Button variant="primary" size="sm" icon={<Icon.plus size={15} />} onClick={() => openModal({ type: "session", studentId: s.id })}>记一次课</Button>
        </div>
      </div>

      {/* balance band */}
      <div className="balance-band">
        <div className="bb-main">
          <div className="bb-figure">
            <span className={`bb-value mono ${bs === "over" ? "neg" : bs === "low" ? "warn" : ""}`}>{credited ? fmt.hrs(rem) : "—"}</span>
            <span className="bb-label">剩余课时{bs !== "none" && <Badge tone={toneMap[bs]} dot>{bs === "over" ? "已超额" : bs === "low" ? "不足 2h" : "正常"}</Badge>}</span>
          </div>
          {credited > 0 && <ProgressBar value={rem} max={credited} state={bs} />}
        </div>
        <div className="bb-stats">
          <div><em>已购</em><span className="mono">{fmt.hrs(credited)}</span></div>
          <div><em>已用</em><span className="mono">{fmt.hrs(used)}</span></div>
          <div><em>Sessions</em><span className="mono">{calc.totalSessions(s)}</span></div>
        </div>
      </div>

      <div className="detail-grid">
        <div className="detail-main">
          <Card pad={false}>
            <div className="card-pad section-head-inline">
              <SectionHead title="Session 记录" count={sessions.length} />
            </div>
            {sessions.length === 0 ? (
              <div className="card-pad"><EmptyState icon={<Icon.clock size={24} />} title="还没有 session" hint="点「记一次课」开始记录" action={<Button variant="secondary" size="sm" icon={<Icon.plus size={15} />} onClick={() => openModal({ type: "session", studentId: s.id })}>记一次课</Button>} /></div>
            ) : (
              <div className="session-table">
                {sessions.map((x) => (
                  <SessionRow key={x.id} x={x} onEdit={() => openModal({ type: "session", studentId: s.id, session: x })}
                    onPin={() => dispatch({ type: "togglePin", studentId: s.id, sessionId: x.id })}
                    onDelete={() => openModal({ type: "confirm", title: "删除 session", message: `确认删除「${x.topic || x.goal}」(${fmt.date(x.date)})？`, onConfirm: () => dispatch({ type: "delSession", studentId: s.id, sessionId: x.id }) })} />
                ))}
              </div>
            )}
          </Card>
        </div>

        <div className="detail-side">
          <Card>
            <SectionHead title="套餐 / Packages" count={(s.packages || []).length} action={<IconButton label="加套餐" icon={<Icon.plus size={16} />} onClick={() => openModal({ type: "package", studentId: s.id })} />} />
            <div className="pkg-list">
              {(s.packages || []).length === 0 && <p className="muted sm">暂无套餐</p>}
              {(s.packages || []).map((p) => (
                <div key={p.id} className="pkg-row">
                  <div className="pkg-row-body">
                    <strong>{p.label}</strong>
                    <span className="muted sm">{fmt.dateLong(p.date)} · {fmt.hoursDecimal(p.minutes)}{p.note ? " · " + p.note : ""}</span>
                  </div>
                  <div className="pkg-row-act">
                    <IconButton label="编辑" icon={<Icon.edit size={15} />} onClick={() => openModal({ type: "package", studentId: s.id, pkg: p })} />
                    <IconButton label="删除" danger icon={<Icon.trash size={15} />} onClick={() => openModal({ type: "confirm", title: "删除套餐", message: `删除「${p.label}」？余额将重新计算。`, onConfirm: () => dispatch({ type: "delPackage", studentId: s.id, pkgId: p.id }) })} />
                  </div>
                </div>
              ))}
            </div>
          </Card>

          <Card>
            <div className="pricing-head">
              <SectionHead title="报价 / 备注" action={<IconButton label="编辑报价" icon={<Icon.edit size={15} />} onClick={() => openModal({ type: "pricing", studentId: s.id })} />} />
            </div>
            {s.pricingNote ? <pre className="pricing-note">{s.pricingNote}</pre> : <p className="muted sm">暂无报价备注</p>}
          </Card>
        </div>
      </div>
    </div>
  );
}

function SessionRow({ x, onEdit, onPin, onDelete }) {
  const { fmt } = window.LP;
  return (
    <div className={"session-row" + (x.pinned ? " is-pinned" : "")}>
      <div className="sr-date mono">{fmt.date(x.date)}</div>
      <div className="sr-body">
        <div className="sr-top">
          <span className="sr-goal">{x.goal}</span>
          {x.billable === false && <Badge tone="neutral">单次</Badge>}
        </div>
        <div className="sr-topic">{x.topic || "—"}</div>
        {x.note && <div className="sr-note"><Icon.doc size={13} /> {x.note}</div>}
      </div>
      <div className="sr-dur mono">{fmt.hrs(x.minutes)}</div>
      <div className="sr-act">
        <IconButton label={x.pinned ? "取消置顶" : "置顶"} active={x.pinned} icon={<Icon.pin size={15} />} onClick={onPin} />
        <IconButton label="编辑" icon={<Icon.edit size={15} />} onClick={onEdit} />
        <IconButton label="删除" danger icon={<Icon.trash size={15} />} onClick={onDelete} />
      </div>
    </div>
  );
}

Object.assign(window, { StudentsList, StudentDetail });