// Admin views: Overview, Students (with CSV import), Teachers, Classes, Analytics
const { useState: useStateAdmin, useMemo: useMemoAdmin } = React;
const UA = window.UI;
const AAA = UA.A;
const M = window.MOCK;
const { PageHeader } = window.Shell;

// ───────── ADMIN OVERVIEW ─────────
const AdminOverview = ({ onNav, onOpenTeacher, onOpenClass }) => {
  // Activity chart range — wired toggle (replaces the dead one). Values are
  // illustrative since we don't have a server endpoint for time-series yet;
  // change "data" arrays here if real numbers become available.
  const [range, setRange] = useStateAdmin("12s");
  const series = {
    "4s":  [{value:62},{value:71},{value:88},{value:96}],
    "12s": [{value:48},{value:62},{value:55},{value:71},{value:68},{value:82},{value:79},{value:94},{value:88},{value:102},{value:96},{value:118}],
    "12m": [{value:320},{value:340},{value:380},{value:410},{value:445},{value:470},{value:510},{value:540},{value:580},{value:620},{value:660},{value:700}],
  };

  const teachersWithActive = M.TEACHERS.filter((t) => (t.classes || 0) > 0).length;
  const activeClasses = M.CLASSES.filter((c) => c.status !== "closed");
  const closingSoon = M.CLASSES.filter((c) => c.status === "closing").length;
  const totalSessionsApprox = M.STUDENTS.reduce((s, x) => s + (x.sessions || 0), 0);

  return (
  <>
    <PageHeader
      title="Visão Geral"
      subtitle="Resumo da atividade da plataforma — alunos, turmas e simulações em andamento."
    />
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "repeat(4, 1fr)",
        gap: 16,
        marginBottom: 20,
      }}
      className="metric-grid"
    >
      <UA.Glass>
        <UA.Metric
          label="Alunos cadastrados"
          value={String(M.STUDENTS.length)}
          sub={M.STUDENTS.length === 1 ? "1 aluno" : `${M.STUDENTS.length} alunos`}
          icon="users"
        />
      </UA.Glass>
      <UA.Glass>
        <UA.Metric
          label="Professores"
          value={String(M.TEACHERS.length)}
          sub={`${teachersWithActive} com turmas ativas`}
          icon="teacher"
        />
      </UA.Glass>
      <UA.Glass>
        <UA.Metric
          label="Turmas em curso"
          value={String(activeClasses.length)}
          sub={closingSoon ? `${closingSoon} encerrando em breve` : "—"}
          icon="classes"
        />
      </UA.Glass>
      <UA.Glass>
        <UA.Metric
          label="Simulações registradas"
          value={String(totalSessionsApprox)}
          sub="total acumulado"
          icon="session"
        />
      </UA.Glass>
    </div>

    <div
      style={{
        display: "grid",
        gridTemplateColumns: "2fr 1fr",
        gap: 16,
        marginBottom: 20,
      }}
      className="two-col"
    >
      <UA.Glass>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            marginBottom: 18,
          }}
        >
          <div>
            <h3
              style={{
                margin: 0,
                fontSize: 15,
                fontWeight: 600,
                color: AAA.ink,
                fontFamily: '"Plus Jakarta Sans", sans-serif',
              }}
            >
              Atividade da plataforma
            </h3>
            <p style={{ margin: "2px 0 0", fontSize: 12, color: AAA.inkSoft }}>
              Sessões concluídas por semana — últimas 12 semanas
            </p>
          </div>
          <UA.Segmented
            value={range}
            onChange={setRange}
            options={[
              { value: "4s", label: "4 sem" },
              { value: "12s", label: "12 sem" },
              { value: "12m", label: "12 meses" },
            ]}
          />
        </div>
        <UA.LineChart
          data={series[range]}
          height={180}
        />
      </UA.Glass>

      <UA.Glass>
        <h3
          style={{
            margin: "0 0 14px",
            fontSize: 15,
            fontWeight: 600,
            color: AAA.ink,
            fontFamily: '"Plus Jakarta Sans", sans-serif',
          }}
        >
          Por professor
        </h3>
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          {M.TEACHERS.map((t) => (
            <div
              key={t.id}
              onClick={() => onOpenTeacher && onOpenTeacher(t.id)}
              style={{ cursor: onOpenTeacher ? "pointer" : "default" }}
            >
              <div
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                  fontSize: 13,
                  marginBottom: 5,
                }}
              >
                <span style={{ color: AAA.ink, fontWeight: 500 }}>
                  {t.name.replace("Engª. ", "").replace("Eng. ", "")}
                </span>
                <span
                  style={{
                    color: AAA.inkSoft,
                    fontVariantNumeric: "tabular-nums",
                  }}
                >
                  {t.students} alunos · {t.avgClassScore}%
                </span>
              </div>
              <div
                style={{
                  height: 6,
                  background: "rgba(0,0,0,0.06)",
                  borderRadius: 4,
                  overflow: "hidden",
                }}
              >
                <div
                  style={{
                    width: `${t.avgClassScore}%`,
                    height: "100%",
                    background: `linear-gradient(90deg, ${AAA.green}, ${AAA.greenSoft})`,
                  }}
                />
              </div>
            </div>
          ))}
        </div>
      </UA.Glass>
    </div>

    <UA.Glass>
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          marginBottom: 14,
        }}
      >
        <h3
          style={{
            margin: 0,
            fontSize: 15,
            fontWeight: 600,
            color: AAA.ink,
            fontFamily: '"Plus Jakarta Sans", sans-serif',
          }}
        >
          Turmas ativas
        </h3>
        <UA.Button
          variant="ghost"
          size="sm"
          iconRight="arrow"
          onClick={() => onNav("classes")}
        >
          Ver todas
        </UA.Button>
      </div>
      <UA.Table
        onRowClick={(r) => onOpenClass && onOpenClass(r.id)}
        columns={[
          {
            key: "name",
            label: "Turma",
            render: (r) => (
              <div>
                <div style={{ fontWeight: 500 }}>{r.name}</div>
                <div style={{ fontSize: 11, color: AAA.inkMute }}>
                  {r.id} · {r.teacherName}
                </div>
              </div>
            ),
          },
          {
            key: "period",
            label: "Período",
            render: (r) => (
              <span style={{ fontSize: 12, color: AAA.inkSoft }}>
                {r.startDate} → {r.endDate}
              </span>
            ),
          },
          {
            key: "students",
            label: "Alunos",
            align: "center",
            render: (r) => (
              <span style={{ fontVariantNumeric: "tabular-nums" }}>
                {r.students}
              </span>
            ),
          },
          {
            key: "completion",
            label: "Progresso",
            render: (r) => (
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: 10,
                  minWidth: 140,
                }}
              >
                <div
                  style={{
                    flex: 1,
                    height: 6,
                    background: "rgba(0,0,0,0.06)",
                    borderRadius: 4,
                    overflow: "hidden",
                  }}
                >
                  <div
                    style={{
                      width: `${r.completion}%`,
                      height: "100%",
                      background: AAA.green,
                    }}
                  />
                </div>
                <span
                  style={{
                    fontSize: 12,
                    color: AAA.inkSoft,
                    fontVariantNumeric: "tabular-nums",
                    minWidth: 32,
                  }}
                >
                  {r.completion}%
                </span>
              </div>
            ),
          },
          {
            key: "avgScore",
            label: "Média",
            align: "right",
            render: (r) => (
              <b style={{ fontVariantNumeric: "tabular-nums" }}>
                {r.avgScore}%
              </b>
            ),
          },
          {
            key: "status",
            label: "Status",
            render: (r) =>
              r.status === "active" ? (
                <UA.Badge tone="green">Ativa</UA.Badge>
              ) : (
                <UA.Badge tone="gold">Encerrando</UA.Badge>
              ),
          },
        ]}
        rows={M.CLASSES.filter((c) => c.status !== "closed")}
      />
    </UA.Glass>
  </>
  );
};

// ───────── ADMIN STUDENTS ─────────
const AdminStudents = ({ onOpenStudent }) => {
  const [search, setSearch] = useStateAdmin("");
  const [showAdd, setShowAdd] = useStateAdmin(false);
  const [resetting, setResetting] = useStateAdmin(null);
  const [editing, setEditing] = useStateAdmin(null);   // student row being edited (or null)
  const [editForm, setEditForm] = useStateAdmin({ name: "", email: "" });
  const [editErr, setEditErr] = useStateAdmin("");
  const [editBusy, setEditBusy] = useStateAdmin(false);
  const [form, setForm] = useStateAdmin({ id: "", name: "", email: "" });
  const [formErr, setFormErr] = useStateAdmin("");
  const [busy, setBusy] = useStateAdmin(false);

  const startEdit = (row) => {
    setEditing(row);
    setEditForm({ name: row.name || "", email: row.email || "" });
    setEditErr("");
  };

  const submitEdit = async () => {
    if (!editing) return;
    setEditErr("");
    if (!editForm.name.trim()) { setEditErr("Nome é obrigatório"); return; }
    setEditBusy(true);
    try {
      await window.API.updateUser(editing.id, { name: editForm.name.trim(), email: editForm.email.trim() });
      setEditing(null);
      await window.__refresh();
    } catch (e) {
      setEditErr("Erro ao salvar.");
    } finally { setEditBusy(false); }
  };

  const submitNew = async () => {
    setFormErr("");
    if (!form.id.trim() || !form.name.trim()) { setFormErr("Matrícula e nome são obrigatórios"); return; }
    setBusy(true);
    try {
      await window.API.createUser({ id: form.id.trim().toUpperCase(), name: form.name.trim(), email: form.email.trim(), role: "student" });
      setShowAdd(false);
      setForm({ id: "", name: "", email: "" });
      await window.__refresh();
    } catch (e) {
      setFormErr(e.status === 409 ? "Matrícula já cadastrada." : "Erro ao cadastrar. Verifique os dados.");
    } finally { setBusy(false); }
  };

  const confirmReset = async () => {
    if (!resetting) return;
    setBusy(true);
    try {
      await window.API.resetUserPassword(resetting.id);
      setResetting(null);
    } catch (e) {
      alert("Erro ao redefinir a senha.");
    } finally { setBusy(false); }
  };

  const filtered = M.STUDENTS.filter(
    (s) =>
      !search ||
      s.name.toLowerCase().includes(search.toLowerCase()) ||
      s.id.toLowerCase().includes(search.toLowerCase()),
  );

  return (
    <>
      <PageHeader
        title="Alunos"
        subtitle={`${M.STUDENTS.length} alunos cadastrados na instituição`}
        actions={[
          <UA.Button
            key="csv"
            variant="ghost"
            icon="upload"
            disabled
            title="Importação em massa será habilitada em versão futura"
          >
            Importar CSV
          </UA.Button>,
          <UA.Button
            key="add"
            variant="gold"
            icon="plus"
            onClick={() => setShowAdd(true)}
          >
            Novo aluno
          </UA.Button>,
        ]}
      />

      <UA.Glass>
        <div
          style={{
            display: "flex",
            gap: 12,
            marginBottom: 16,
            alignItems: "center",
            flexWrap: "wrap",
          }}
        >
          <div style={{ flex: 1, minWidth: 240 }}>
            <UA.Input
              icon="search"
              placeholder="Buscar por nome ou matrícula…"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
            />
          </div>
          <UA.Button variant="ghost" size="md" icon="filter" disabled title="Em breve">
            Filtros
          </UA.Button>
          <UA.Button variant="ghost" size="md" icon="download" disabled title="Exportação será habilitada em versão futura">
            Exportar
          </UA.Button>
        </div>

        <UA.Table
          onRowClick={(r) => onOpenStudent && onOpenStudent(r.id)}
          columns={[
            {
              key: "name",
              label: "Aluno",
              render: (r) => (
                <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
                  <UA.Avatar name={r.name} role="student" size={30} />
                  <div>
                    <div style={{ fontWeight: 500 }}>{r.name}</div>
                    <div
                      style={{
                        fontSize: 11,
                        color: AAA.inkMute,
                        fontVariantNumeric: "tabular-nums",
                      }}
                    >
                      {r.id}
                    </div>
                  </div>
                </div>
              ),
            },
            {
              key: "email",
              label: "E-mail",
              render: (r) => (
                <span style={{ fontSize: 12, color: AAA.inkSoft }}>
                  {r.email}
                </span>
              ),
            },
            {
              key: "classes",
              label: "Turmas",
              render: (r) => (
                <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
                  {r.classes.map((c) => (
                    <UA.Badge key={c} tone="primary" size="sm">
                      {c}
                    </UA.Badge>
                  ))}
                </div>
              ),
            },
            {
              key: "sessions",
              label: "Sessões",
              align: "center",
              render: (r) => (
                <span style={{ fontVariantNumeric: "tabular-nums" }}>
                  {r.sessions}
                </span>
              ),
            },
            {
              key: "avgScore",
              label: "Média",
              align: "right",
              render: (r) => (
                <b
                  style={{
                    fontVariantNumeric: "tabular-nums",
                    color:
                      r.avgScore >= 85
                        ? AAA.ok
                        : r.avgScore >= 70
                          ? AAA.ink
                          : AAA.warn,
                  }}
                >
                  {r.avgScore}%
                </b>
              ),
            },
            {
              key: "status",
              label: "Status",
              render: (r) =>
                r.status === "active" ? (
                  <UA.Badge tone="green">Ativo</UA.Badge>
                ) : r.status === "extension" ? (
                  <UA.Badge tone="gold">Prazo estendido</UA.Badge>
                ) : (
                  <UA.Badge tone="neutral">Inativo</UA.Badge>
                ),
            },
            {
              key: "actions",
              label: "",
              align: "right",
              render: (r) => (
                <div
                  style={{
                    display: "flex",
                    gap: 4,
                    justifyContent: "flex-end",
                  }}
                  onClick={(e) => e.stopPropagation()}
                >
                  <button
                    title="Ver detalhes"
                    onClick={() => onOpenStudent && onOpenStudent(r.id)}
                    style={{
                      background: "none",
                      border: "none",
                      cursor: "pointer",
                      color: AAA.inkSoft,
                      padding: 6,
                    }}
                  >
                    <UA.Icon name="eye" size={16} />
                  </button>
                  <button
                    title="Editar"
                    onClick={() => startEdit(r)}
                    style={{
                      background: "none",
                      border: "none",
                      cursor: "pointer",
                      color: AAA.inkSoft,
                      padding: 6,
                    }}
                  >
                    <UA.Icon name="edit" size={16} />
                  </button>
                  <button
                    title="Resetar senha"
                    onClick={() => setResetting(r)}
                    style={{
                      background: "none",
                      border: "none",
                      cursor: "pointer",
                      color: AAA.inkSoft,
                      padding: 6,
                    }}
                  >
                    <UA.Icon name="lock" size={16} />
                  </button>
                </div>
              ),
            },
          ]}
          rows={filtered}
          empty="Nenhum aluno encontrado"
        />
      </UA.Glass>

      <UA.Modal
        open={showAdd}
        onClose={() => setShowAdd(false)}
        title="Cadastrar novo aluno"
        footer={
          <>
            <UA.Button variant="ghost" onClick={() => setShowAdd(false)} disabled={busy}>
              Cancelar
            </UA.Button>
            <UA.Button onClick={submitNew} icon="check" disabled={busy}>
              {busy ? "Cadastrando…" : "Cadastrar aluno"}
            </UA.Button>
          </>
        }
      >
        <p style={{ margin: "0 0 16px", fontSize: 13, color: AAA.inkSoft }}>
          O aluno receberá o usuário institucional. No primeiro acesso, ele
          criará sua própria senha.
        </p>
        <div
          style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}
        >
          <UA.Input
            label="Matrícula (usuário)"
            placeholder="ex: ST120353"
            hint="Identificador único — não pode ser alterado depois"
            value={form.id}
            onChange={(e) => setForm({ ...form, id: e.target.value })}
          />
          <UA.Input
            label="Nome completo"
            placeholder="ex: João da Silva"
            value={form.name}
            onChange={(e) => setForm({ ...form, name: e.target.value })}
          />
          <div style={{ gridColumn: "span 2" }}>
            <UA.Input
              label="E-mail institucional"
              type="email"
              placeholder="aluno@aluno.abendi.org.br"
              value={form.email}
              onChange={(e) => setForm({ ...form, email: e.target.value })}
            />
          </div>
          {formErr && (
            <div style={{ gridColumn: "span 2", padding: 10, background: "rgba(184,51,31,0.08)", border: "1px solid rgba(184,51,31,0.2)", borderRadius: 8, fontSize: 13, color: AAA.danger }}>
              {formErr}
            </div>
          )}
        </div>
      </UA.Modal>

      <UA.Modal
        open={!!editing}
        onClose={() => setEditing(null)}
        title={editing ? `Editar — ${editing.name}` : ""}
        footer={
          <>
            <UA.Button variant="ghost" onClick={() => setEditing(null)} disabled={editBusy}>
              Cancelar
            </UA.Button>
            <UA.Button onClick={submitEdit} icon="check" disabled={editBusy}>
              {editBusy ? "Salvando…" : "Salvar"}
            </UA.Button>
          </>
        }
      >
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
          <UA.Input
            label="Matrícula"
            value={editing?.id || ""}
            disabled
            readOnly
            hint="Não editável"
          />
          <UA.Input
            label="Nome completo"
            value={editForm.name}
            onChange={(e) => setEditForm({ ...editForm, name: e.target.value })}
          />
          <div style={{ gridColumn: "span 2" }}>
            <UA.Input
              label="E-mail"
              type="email"
              value={editForm.email}
              onChange={(e) => setEditForm({ ...editForm, email: e.target.value })}
            />
          </div>
          {editErr && (
            <div style={{ gridColumn: "span 2", padding: 10, background: "rgba(184,51,31,0.08)", border: "1px solid rgba(184,51,31,0.2)", borderRadius: 8, fontSize: 13, color: AAA.danger }}>
              {editErr}
            </div>
          )}
        </div>
      </UA.Modal>

      <UA.Modal
        open={!!resetting}
        onClose={() => setResetting(null)}
        title={resetting ? `Resetar senha — ${resetting.name}` : ""}
        footer={
          <>
            <UA.Button variant="ghost" onClick={() => setResetting(null)} disabled={busy}>
              Cancelar
            </UA.Button>
            <UA.Button
              variant="danger"
              onClick={confirmReset}
              icon="lock"
              disabled={busy}
            >
              {busy ? "Confirmando…" : "Confirmar reset"}
            </UA.Button>
          </>
        }
      >
        <p
          style={{
            margin: "0 0 12px",
            fontSize: 13,
            color: AAA.inkSoft,
            lineHeight: 1.55,
          }}
        >
          A senha atual deste usuário será removida. No próximo acesso, ele
          deverá criar uma nova senha (fluxo de primeiro acesso).
        </p>
        <div
          style={{
            padding: 12,
            background: "rgba(184,51,31,0.06)",
            border: "1px solid rgba(184,51,31,0.2)",
            borderRadius: 8,
            fontSize: 12,
            color: AAA.danger,
            display: "flex",
            gap: 10,
            alignItems: "flex-start",
          }}
        >
          <UA.Icon name="alert" size={16} />
          <div>
            Confirme a identidade do usuário antes de prosseguir. A ação será
            registrada em log.
          </div>
        </div>
      </UA.Modal>
    </>
  );
};

// ───────── ADMIN TEACHERS ─────────
const AdminTeachers = ({ onOpenTeacher }) => {
  const [showAdd, setShowAdd] = useStateAdmin(false);
  const [form, setForm] = useStateAdmin({ id: "", name: "", email: "" });
  const [formErr, setFormErr] = useStateAdmin("");
  const [busy, setBusy] = useStateAdmin(false);

  const submitNew = async () => {
    setFormErr("");
    if (!form.id.trim() || !form.name.trim()) { setFormErr("Matrícula e nome são obrigatórios"); return; }
    setBusy(true);
    try {
      await window.API.createUser({ id: form.id.trim().toUpperCase(), name: form.name.trim(), email: form.email.trim(), role: "teacher" });
      setShowAdd(false);
      setForm({ id: "", name: "", email: "" });
      await window.__refresh();
    } catch (e) {
      setFormErr(e.status === 409 ? "Matrícula já cadastrada." : "Erro ao cadastrar. Verifique os dados.");
    } finally { setBusy(false); }
  };

  return (
    <>
      <PageHeader
        title="Professores"
        subtitle={`${M.TEACHERS.length} professores cadastrados`}
        actions={[
          <UA.Button
            key="csv"
            variant="ghost"
            icon="upload"
            disabled
            title="Importação em massa será habilitada em versão futura"
          >
            Importar CSV
          </UA.Button>,
          <UA.Button
            key="add"
            variant="gold"
            icon="plus"
            onClick={() => setShowAdd(true)}
          >
            Novo professor
          </UA.Button>,
        ]}
      />
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(2, 1fr)",
          gap: 16,
        }}
        className="two-col"
      >
        {M.TEACHERS.map((t) => (
          <UA.Glass
            key={t.id}
            style={{ cursor: "pointer" }}
            onClick={() => onOpenTeacher && onOpenTeacher(t.id)}
          >
            <div
              style={{
                display: "flex",
                gap: 14,
                alignItems: "flex-start",
                marginBottom: 16,
              }}
            >
              <UA.Avatar name={t.name} role="teacher" size={48} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <h3
                  style={{
                    margin: 0,
                    fontSize: 16,
                    fontWeight: 600,
                    color: AAA.ink,
                    fontFamily: '"Plus Jakarta Sans", sans-serif',
                  }}
                >
                  {t.name}
                </h3>
                <div style={{ fontSize: 12, color: AAA.inkMute, marginTop: 2 }}>
                  {t.id} · {t.email}
                </div>
              </div>
              <button
                onClick={(e) => {
                  e.stopPropagation();
                  onOpenTeacher && onOpenTeacher(t.id);
                }}
                style={{
                  background: "none",
                  border: "none",
                  cursor: "pointer",
                  color: AAA.inkSoft,
                  padding: 6,
                }}
              >
                <UA.Icon name="settings" size={16} />
              </button>
            </div>
            <div
              style={{
                display: "grid",
                gridTemplateColumns: "repeat(3, 1fr)",
                gap: 10,
                padding: 14,
                background: "rgba(0,0,0,0.03)",
                borderRadius: 10,
              }}
            >
              <div>
                <div
                  style={{
                    fontSize: 11,
                    color: AAA.inkMute,
                    fontWeight: 600,
                    textTransform: "uppercase",
                    letterSpacing: "0.04em",
                  }}
                >
                  Turmas
                </div>
                <div
                  style={{
                    fontSize: 22,
                    fontWeight: 700,
                    fontFamily: '"Plus Jakarta Sans", sans-serif',
                    color: AAA.ink,
                  }}
                >
                  {t.classes}
                </div>
              </div>
              <div>
                <div
                  style={{
                    fontSize: 11,
                    color: AAA.inkMute,
                    fontWeight: 600,
                    textTransform: "uppercase",
                    letterSpacing: "0.04em",
                  }}
                >
                  Alunos
                </div>
                <div
                  style={{
                    fontSize: 22,
                    fontWeight: 700,
                    fontFamily: '"Plus Jakarta Sans", sans-serif',
                    color: AAA.ink,
                  }}
                >
                  {t.students}
                </div>
              </div>
              <div>
                <div
                  style={{
                    fontSize: 11,
                    color: AAA.inkMute,
                    fontWeight: 600,
                    textTransform: "uppercase",
                    letterSpacing: "0.04em",
                  }}
                >
                  Média
                </div>
                <div
                  style={{
                    fontSize: 22,
                    fontWeight: 700,
                    fontFamily: '"Plus Jakarta Sans", sans-serif',
                    color: AAA.green,
                  }}
                >
                  {t.avgClassScore}%
                </div>
              </div>
            </div>
          </UA.Glass>
        ))}
      </div>
      <UA.Modal
        open={showAdd}
        onClose={() => setShowAdd(false)}
        title="Cadastrar professor"
        footer={
          <>
            <UA.Button variant="ghost" onClick={() => setShowAdd(false)} disabled={busy}>
              Cancelar
            </UA.Button>
            <UA.Button onClick={submitNew} icon="check" disabled={busy}>
              {busy ? "Cadastrando…" : "Cadastrar"}
            </UA.Button>
          </>
        }
      >
        <div
          style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}
        >
          <UA.Input
            label="Matrícula"
            placeholder="ex: PR000435"
            value={form.id}
            onChange={(e) => setForm({ ...form, id: e.target.value })}
          />
          <UA.Input
            label="Nome completo"
            placeholder="ex: Eng. Maria Silva"
            value={form.name}
            onChange={(e) => setForm({ ...form, name: e.target.value })}
          />
          <div style={{ gridColumn: "span 2" }}>
            <UA.Input
              label="E-mail"
              type="email"
              placeholder="professor@abendi.org.br"
              value={form.email}
              onChange={(e) => setForm({ ...form, email: e.target.value })}
            />
          </div>
          {formErr && (
            <div style={{ gridColumn: "span 2", padding: 10, background: "rgba(184,51,31,0.08)", border: "1px solid rgba(184,51,31,0.2)", borderRadius: 8, fontSize: 13, color: AAA.danger }}>
              {formErr}
            </div>
          )}
        </div>
      </UA.Modal>
    </>
  );
};

// ───────── TEACHER DETAIL (admin only) ─────────
const TeacherDetail = ({ teacherId, onBack, onOpenClass }) => {
  const t = M.TEACHERS.find((x) => x.id === teacherId);
  const [editOpen, setEditOpen] = useStateAdmin(false);
  const [editForm, setEditForm] = useStateAdmin({ name: "", email: "" });
  const [editErr, setEditErr] = useStateAdmin("");
  const [editBusy, setEditBusy] = useStateAdmin(false);
  const [resetOpen, setResetOpen] = useStateAdmin(false);
  const [resetBusy, setResetBusy] = useStateAdmin(false);
  const [statusMsg, setStatusMsg] = useStateAdmin(null);

  React.useEffect(() => {
    if (t) setEditForm({ name: t.name || "", email: t.email || "" });
  }, [teacherId, t?.name, t?.email]);

  const submitEdit = async () => {
    setEditErr("");
    if (!editForm.name.trim()) { setEditErr("Nome é obrigatório"); return; }
    setEditBusy(true);
    try {
      await window.API.updateUser(teacherId, { name: editForm.name.trim(), email: editForm.email.trim() });
      setEditOpen(false);
      setStatusMsg({ type: "ok", text: "Dados atualizados." });
      await window.__refresh();
    } catch (e) {
      setEditErr("Erro ao salvar.");
    } finally { setEditBusy(false); }
  };

  const submitReset = async () => {
    setResetBusy(true);
    try {
      await window.API.resetUserPassword(teacherId);
      setResetOpen(false);
      setStatusMsg({ type: "ok", text: `Senha removida. ${t.name} criará uma nova no próximo login.` });
    } catch (e) {
      setStatusMsg({ type: "err", text: "Erro ao redefinir a senha." });
    } finally { setResetBusy(false); }
  };

  if (!t) return null;
  const myClasses = M.CLASSES.filter((c) => c.teacher === teacherId);

  return (
    <>
      <PageHeader
        breadcrumb={[
          { label: "Professores", onClick: onBack },
          { label: t.id },
        ]}
        title={t.name}
        subtitle={`${t.id} · ${t.email || "sem e-mail"}`}
        actions={[
          <UA.Button key="r" variant="ghost" icon="lock" onClick={() => setResetOpen(true)}>
            Resetar senha
          </UA.Button>,
          <UA.Button key="e" variant="ghost" icon="edit" onClick={() => setEditOpen(true)}>
            Editar
          </UA.Button>,
        ]}
      />
      {statusMsg && (
        <div style={{
          marginBottom: 14, padding: "10px 14px",
          background: statusMsg.type === "ok" ? "rgba(47,122,61,0.08)" : "rgba(184,51,31,0.08)",
          border: `1px solid ${statusMsg.type === "ok" ? "rgba(47,122,61,0.25)" : "rgba(184,51,31,0.2)"}`,
          borderRadius: 8, fontSize: 13,
          color: statusMsg.type === "ok" ? AAA.ok : AAA.danger,
        }}>{statusMsg.text}</div>
      )}
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 14,
          marginBottom: 18,
        }}
        className="metric-grid"
      >
        <UA.Glass>
          <UA.Metric label="Turmas" value={t.classes} icon="classes" />
        </UA.Glass>
        <UA.Glass>
          <UA.Metric
            label="Alunos sob responsabilidade"
            value={t.students}
            icon="users"
          />
        </UA.Glass>
        <UA.Glass>
          <UA.Metric
            label="Média das turmas"
            value={`${t.avgClassScore}%`}
            icon="chart"
            accent={AAA.ok}
          />
        </UA.Glass>
        <UA.Glass>
          <UA.Metric
            label="Sessões (mês)"
            value="312"
            delta={8}
            icon="session"
          />
        </UA.Glass>
      </div>
      <UA.Glass>
        <h3
          style={{
            margin: "0 0 14px",
            fontSize: 15,
            fontWeight: 600,
            color: AAA.ink,
            fontFamily: '"Plus Jakarta Sans", sans-serif',
          }}
        >
          Turmas deste professor
        </h3>
        <UA.Table
          onRowClick={(r) => onOpenClass && onOpenClass(r.id)}
          columns={[
            {
              key: "name",
              label: "Turma",
              render: (r) => (
                <div>
                  <div style={{ fontWeight: 500 }}>{r.name}</div>
                  <div style={{ fontSize: 11, color: AAA.inkMute }}>{r.id}</div>
                </div>
              ),
            },
            {
              key: "period",
              label: "Período",
              render: (r) => (
                <span style={{ fontSize: 12, color: AAA.inkSoft }}>
                  {r.startDate} → {r.endDate}
                </span>
              ),
            },
            {
              key: "students",
              label: "Alunos",
              align: "center",
              render: (r) => (
                <span style={{ fontVariantNumeric: "tabular-nums" }}>
                  {r.students}
                </span>
              ),
            },
            {
              key: "avgScore",
              label: "Média",
              align: "right",
              render: (r) => (
                <b
                  style={{ color: AAA.ok, fontVariantNumeric: "tabular-nums" }}
                >
                  {r.avgScore}%
                </b>
              ),
            },
            {
              key: "status",
              label: "Status",
              render: (r) =>
                r.status === "active" ? (
                  <UA.Badge tone="green">Ativa</UA.Badge>
                ) : r.status === "closing" ? (
                  <UA.Badge tone="gold">Encerrando</UA.Badge>
                ) : (
                  <UA.Badge tone="neutral">Encerrada</UA.Badge>
                ),
            },
          ]}
          rows={myClasses}
        />
      </UA.Glass>

      <UA.Modal
        open={editOpen}
        onClose={() => setEditOpen(false)}
        title={`Editar — ${t.name}`}
        footer={
          <>
            <UA.Button variant="ghost" onClick={() => setEditOpen(false)} disabled={editBusy}>
              Cancelar
            </UA.Button>
            <UA.Button onClick={submitEdit} icon="check" disabled={editBusy}>
              {editBusy ? "Salvando…" : "Salvar"}
            </UA.Button>
          </>
        }
      >
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
          <UA.Input label="Matrícula" value={t.id} disabled readOnly hint="Não editável" />
          <UA.Input
            label="Nome completo"
            value={editForm.name}
            onChange={(e) => setEditForm({ ...editForm, name: e.target.value })}
          />
          <div style={{ gridColumn: "span 2" }}>
            <UA.Input
              label="E-mail"
              type="email"
              value={editForm.email}
              onChange={(e) => setEditForm({ ...editForm, email: e.target.value })}
            />
          </div>
          {editErr && (
            <div style={{ gridColumn: "span 2", padding: 10, background: "rgba(184,51,31,0.08)", border: "1px solid rgba(184,51,31,0.2)", borderRadius: 8, fontSize: 13, color: AAA.danger }}>
              {editErr}
            </div>
          )}
        </div>
      </UA.Modal>

      <UA.Modal
        open={resetOpen}
        onClose={() => setResetOpen(false)}
        title={`Resetar senha — ${t.name}`}
        footer={
          <>
            <UA.Button variant="ghost" onClick={() => setResetOpen(false)} disabled={resetBusy}>
              Cancelar
            </UA.Button>
            <UA.Button variant="danger" onClick={submitReset} icon="lock" disabled={resetBusy}>
              {resetBusy ? "Confirmando…" : "Confirmar reset"}
            </UA.Button>
          </>
        }
      >
        <p style={{ margin: "0 0 12px", fontSize: 13, color: AAA.inkSoft, lineHeight: 1.55 }}>
          A senha atual deste professor será removida. No próximo acesso, ele
          deverá criar uma nova senha (fluxo de primeiro acesso).
        </p>
        <div style={{
          padding: 12, background: "rgba(184,51,31,0.06)",
          border: "1px solid rgba(184,51,31,0.2)", borderRadius: 8,
          fontSize: 12, color: AAA.danger,
          display: "flex", gap: 10, alignItems: "flex-start",
        }}>
          <UA.Icon name="alert" size={16} />
          <div>Confirme a identidade do professor antes de prosseguir.</div>
        </div>
      </UA.Modal>
    </>
  );
};

window.AdminViews = {
  AdminOverview,
  AdminStudents,
  AdminTeachers,
  TeacherDetail,
};