/* Pólix — Dashboard / Inicio */
function Dashboard() {
  const { data, go, openPoliza, openSiniestro, hoy, t } = useApp();
  const { polizas, clientes, siniestros, companias, ramos } = data;

  const activas = polizas.filter((p) => { const k = ventStatus(p, hoy).key; return k !== "vencida" && k !== "anulada"; }).length;
  const venceMes = polizas.filter((p) => { const k = ventStatus(p, hoy).key; return k === "mes" || k === "critico"; });
  const vencidas = polizas.filter((p) => ventStatus(p, hoy).key === "vencida");
  const abiertos = siniestros.filter((s) => s.estado === "Abierto" || s.estado === "En análisis");
  const primaCartera = polizas.reduce((a, p) => a + (p.mensual ? p.total * 12 : p.total), 0);

  // próximos vencimientos: ordenados por días restantes (incluye vencidas arriba)
  const prox = polizas
    .map((p) => ({ p, s: ventStatus(p, hoy) }))
    .filter((x) => x.s.key !== "anulada" && x.s.days <= 60)
    .sort((a, b) => a.s.days - b.s.days)
    .slice(0, 7);

  // cartera por ramo
  const porRamo = Object.keys(ramos).map((r) => ({
    r, meta: ramos[r], n: polizas.filter((p) => p.ramo === r).length,
  })).sort((a, b) => b.n - a.n);
  const maxRamo = Math.max(...porRamo.map((x) => x.n), 1);

  const getCo = (id) => companias.find((c) => c.id === id);
  const getCli = (id) => clientes.find((c) => c.id === id);

  const accent = t.dashStyle === "acento";

  return (
    <div className="view-in">
      {/* Hero / saludo + acciones */}
      <div className="between wrap" style={{ marginBottom: 22 }}>
        <div>
          <h2 style={{ fontSize: 24 }}>Hola, Federico 👋</h2>
          <div className="muted" style={{ marginTop: 2 }}>
            {fmtHoyLong(hoy)} · {venceMes.length} pólizas vencen este mes · {abiertos.length} siniestros abiertos
          </div>
        </div>
        <div className="row wrap">
          <button className="btn btn-ghost" onClick={() => go("comparador")}><Icon name="sparkle" size={16} />Cotizar</button>
          <button className="btn btn-primary" onClick={() => go("polizas", { nueva: true })}><Icon name="plus" size={16} />Nueva póliza</button>
        </div>
      </div>

      {/* KPIs */}
      <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(190px, 1fr))", marginBottom: 22 }}>
        <StatCard icon="file" iconColor={accent ? "#fff" : "var(--primary)"} iconBg={accent ? "var(--primary)" : "var(--primary-soft)"}
          label="Pólizas activas" value={activas} delta={`${polizas.length} en cartera`} deltaDir="flat" />
        <StatCard icon="clock" iconColor="oklch(0.55 0.12 65)" iconBg="var(--warn-bg)"
          label="Vencen este mes" value={venceMes.length} delta={vencidas.length ? `${vencidas.length} ya vencidas` : "al día"} deltaDir={vencidas.length ? "down" : "up"} />
        <StatCard icon="claims" iconColor="var(--danger)" iconBg="var(--danger-bg)"
          label="Siniestros abiertos" value={abiertos.length} delta={`${siniestros.length} históricos`} deltaDir="flat" />
        <StatCard icon="users" iconColor="var(--info)" iconBg="var(--info-bg)"
          label="Clientes" value={clientes.length} delta="+2 este mes" deltaDir="up" />
        <StatCard icon="wallet" iconColor="var(--ok)" iconBg="var(--ok-bg)"
          label="Prima anual cartera" value={fmtMoney(primaCartera)} valueSize={22} delta="UYU / año" deltaDir="flat" />
      </div>

      <div className="grid" style={{ gridTemplateColumns: "minmax(0, 1.7fr) minmax(0, 1fr)", alignItems: "start" }}>
        {/* Próximos vencimientos */}
        <div className="card">
          <div className="card-head between">
            <div className="row" style={{ gap: 10 }}>
              <h3>Control de vencimientos</h3>
              <Pill kind="warn" dot={false}>{venceMes.length} este mes</Pill>
            </div>
            <button className="btn btn-soft btn-sm" onClick={() => go("polizas", { filtro: "vence" })}>Ver todas<Icon name="chevronRight" size={14} /></button>
          </div>
          <div className="table-wrap">
            <table className="tbl">
              <thead><tr><th>Cliente</th><th>Póliza</th><th>Compañía</th><th>Vence</th><th>Estado</th></tr></thead>
              <tbody>
                {prox.map(({ p, s }) => {
                  const cli = getCli(p.clienteId);
                  return (
                    <tr key={p.id} onClick={() => openPoliza(p.id)}>
                      <td><div className="cell-main">{cli ? nombreCompleto(cli) : "—"}</div></td>
                      <td><span className="mono cell-sub">{p.numero}</span></td>
                      <td><CoChip co={getCo(p.companiaId)} /></td>
                      <td><div className="cell-main num">{fmtDate(p.fin)}</div><div className="cell-sub">{s.days < 0 ? `hace ${-s.days}d` : `en ${s.days}d`}</div></td>
                      <td><StatusPill poliza={p} hoy={hoy} /></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>

        {/* Lateral: siniestros + cartera por ramo */}
        <div className="grid">
          <div className="card">
            <div className="card-head between"><h3>Siniestros abiertos</h3>
              <button className="btn btn-soft btn-sm" onClick={() => go("siniestros")}>Ver<Icon name="chevronRight" size={14} /></button>
            </div>
            <div style={{ padding: "6px 0" }}>
              {abiertos.length === 0 && <div className="empty" style={{ padding: 30 }}>Sin siniestros abiertos 🎉</div>}
              {abiertos.map((s) => {
                const cli = getCli(s.clienteId);
                return (
                  <button key={s.id} onClick={() => openSiniestro(s.id)}
                    style={{ width: "100%", textAlign: "left", border: "none", background: "none", padding: "11px var(--card-pad)", borderBottom: "1px solid var(--border)", display: "flex", gap: 12, alignItems: "center" }}>
                    <span className="ico-wrap" style={{ width: 34, height: 34, margin: 0, borderRadius: 9, background: "var(--danger-bg)", color: "var(--danger)", display: "grid", placeItems: "center", flex: "none" }}><Icon name="claims" size={17} /></span>
                    <span style={{ minWidth: 0, flex: 1 }}>
                      <span style={{ display: "block", fontWeight: 700, fontSize: 13.5 }}>{s.tipo}</span>
                      <span className="cell-sub" style={{ display: "block", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{cli ? nombreCompleto(cli) : "—"} · {fmtDate(s.fecha)}</span>
                    </span>
                    <Pill kind={s.estado === "Abierto" ? "danger" : "warn"} dot={false}>{s.estado}</Pill>
                  </button>
                );
              })}
            </div>
          </div>

          <div className="card card-pad">
            <div className="between" style={{ marginBottom: 16 }}><h3 style={{ fontSize: 15.5 }}>Cartera por ramo</h3><span className="muted" style={{ fontSize: 12.5 }}>{polizas.length} pólizas</span></div>
            <div className="grid" style={{ gap: 13 }}>
              {porRamo.map(({ r, meta, n }) => (
                <div key={r}>
                  <div className="between" style={{ marginBottom: 5 }}>
                    <span className="row" style={{ gap: 8 }}><span className="swatch" style={{ width: 9, height: 9, borderRadius: 3, background: meta.color }} /><span style={{ fontWeight: 600, fontSize: 13 }}>{meta.label}</span></span>
                    <span className="num" style={{ fontWeight: 700, fontSize: 13 }}>{n}</span>
                  </div>
                  <div className="progress"><span style={{ width: (n / maxRamo * 100) + "%", background: meta.color }} /></div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
window.Dashboard = Dashboard;