function StatCard({ icon, label, n, sub }) {
  return (
    <div className="stat">
      <div className="stat-top"><Icon name={icon} size={15} />{label}</div>
      <div className="stat-n">{n}</div>
      <div className="stat-sub" dangerouslySetInnerHTML={{ __html: sub }} />
    </div>
  );
}

// `perfil` e `podeEditar` chegam do shell (RF-USUARIOS-01/02). Hoje o painel não
// os consome — nenhum de seus elementos é privativo de perfil —, mas recebê-los
// mantém a decisão de acesso num lugar só, o `app-portal.jsx`.
function DashboardView({ onGoPatients, onOpenPatient, perfil, podeEditar }) {
  const [cases, setCases] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const user = { nome: "Bem-vindo(a)" };

  React.useEffect(() => {
    setLoading(true);
    window.API.listCases({ limit: 50 }).then(data => {
      setCases((data.items || []).filter(item => item.status !== "archived"));
      setLoading(false);
    }).catch(() => {
      setCases([]);
      setLoading(false);
    });
  }, []);

  const published = cases.filter(c => c.status === "published").length;
  const recentP = cases.slice(0, 4);

  return (
    <div className="scroll">
      <div className="page fade-in">
        <div className="page-head">
          <div style={{ flex: 1 }}>
            <div className="page-eyebrow">Visão geral</div>
            <h1 className="page-title">Bom dia, {user.nome.split(" ")[0]}.</h1>
            <p className="page-desc">Acompanhe o acervo clínico e o uso nos óculos Meta Quest.</p>
          </div>
        </div>

        <div className="stats mb5">
          <StatCard icon="patients" label="Casos" n={loading ? "—" : cases.length}
            sub={`<b>${published}</b> publicados`} />
          <StatCard icon="headset" label="Execuções no mês" n="—"
            sub="em breve" />
          <StatCard icon="pulse" label="Sessões hoje" n="—"
            sub="em breve" />
        </div>

        {loading ? (
          <div style={{ textAlign: "center", padding: "var(--sp-6)", color: "var(--text-faint)" }}>
             Carregando casos...
          </div>
        ) : (
          <div className="grid-2-main" style={{ display: "grid", gap: "var(--sp-5)" }}>
            <div className="card" style={{ overflow: "hidden" }}>
              <div className="row" style={{ justifyContent: "space-between", padding: "var(--sp-4) var(--sp-5)", borderBottom: "1px solid var(--border)" }}>
                <div className="strong" style={{ fontSize: 15 }}>Casos recentes</div>
                <button className="crumb-link" onClick={onGoPatients}>Ver acervo →</button>
              </div>
              <table className="tbl">
                <tbody>
                  {recentP.map(p => (
                    <tr key={p.id} onClick={() => onOpenPatient(p.id)}>
                      <td style={{ width: "55%" }}>
                        <div className="row-name">
                          <div className="row-avatar">{(p.nome || "?").split(" ").map(w => w[0]).slice(0, 2).join("") || "?"}</div>
                          <div>
                            <div className="row-title">{p.nome}</div>
                            <div className="row-sub">{p.ref} · por {p.data && p.data.pessoais ? p.data.pessoais.idade + " anos · " + p.data.pessoais.profissao : ""}</div>
                          </div>
                        </div>
                      </td>
                      <td>{p.data && p.data.diagnostico ? <Tag kind="accent">{p.data.diagnostico.queixaClassificada || "—"}</Tag> : null}</td>
                      <td style={{ textAlign: "right" }}><Badge status={p.status} /></td>
                    </tr>
                  ))}
                  {recentP.length === 0 && (
                    <tr><td colSpan={3} style={{ textAlign: "center", padding: "var(--sp-5)", color: "var(--text-faint)" }}>Nenhum caso cadastrado.</td></tr>
                  )}
                </tbody>
              </table>
            </div>

            <div className="card" style={{ overflow: "hidden" }}>
              <div className="row" style={{ justifyContent: "space-between", padding: "var(--sp-4) var(--sp-5)", borderBottom: "1px solid var(--border)" }}>
                 <div className="strong" style={{ fontSize: 15 }}>Sessões recentes</div>
                <Tag icon="headset">Meta Quest 3s</Tag>
              </div>
              <div style={{ padding: "var(--sp-2) var(--sp-3)" }}>
                <div style={{ padding: "var(--sp-5)", textAlign: "center", color: "var(--text-faint)", fontSize: 13 }}>
                   Histórico de sessões em breve.
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

window.DashboardView = DashboardView;