/* Vista KPIs */
const { useMemo: useMemoK } = React;

function KpiBadge({ status, children }) { return <span className={"chip " + status}>{children}</span>; }

function KpisView({ events, scope, year }) {
  const CL = window.CL, CLA = window.CLA;
  const k = useMemoK(() => CLA.computeKpis(events, scope, year), [events, scope, year]);
  const teamOcc = useMemoK(() => CLA.teamOccupations(events, year), [events, year]);
  const teamReq = useMemoK(() => CLA.teamRequestCounts(events), [events]);

  const scopeLabel = scope.type === "all" ? "Todos los equipos"
    : scope.type === "team" ? "Equipo " + (CL.TEAMS.find((t) => t.id === scope.id)?.team)
    : CL.RESOURCE_MAP.get(scope.id)?.name;

  const maxReq = Math.max(...teamReq.map((t) => t.n), 1);
  const occSpread = Math.max(...teamOcc.map((t) => t.pct)) - Math.min(...teamOcc.map((t) => t.pct));

  const cards = [
    { label: "% Cumplimiento de fechas", val: k.cumplimiento, u: "%", meta: "Meta ≥ 90%", status: k.cumplimiento >= 90 ? "ok" : k.cumplimiento >= 75 ? "warn" : "bad", sub: `${k.aTiempo} de ${k.completadas} entregas a tiempo` },
    { label: "% Ocupación promedio", val: k.ocupacion, u: "%", meta: "Meta 75–95%", status: k.ocupacion >= 75 && k.ocupacion <= 95 ? "ok" : k.ocupacion > 95 ? "bad" : "warn", sub: k.ocupacion > 100 ? "Sobrecarga del recurso/equipo" : "Capacidad utilizada" },
    { label: "Solicitudes atendidas", val: k.atendidas, u: "", meta: "En el periodo", status: "ok", sub: `${scopeLabel}` },
    { label: "Promedio días por solicitud", val: k.promDias, u: "días", meta: "Meta ≤ 20 días", status: k.promDias <= 20 ? "ok" : "warn", sub: "Días laborables promedio" },
    { label: "Solicitudes en riesgo", val: k.enRiesgo, u: "", meta: "Meta ≤ 10%", status: k.atendidas > 0 && k.enRiesgo / k.atendidas <= 0.1 ? "ok" : k.enRiesgo === 0 ? "ok" : "bad", sub: k.atendidas > 0 ? Math.round(k.enRiesgo / k.atendidas * 100) + "% del total" : "—" },
    { label: "Dispersión de carga", val: occSpread, u: "pts", meta: "Meta ≤ 15 pts", status: occSpread <= 15 ? "ok" : "warn", sub: "Diferencia entre equipos" },
  ];

  return (
    <div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 12, marginBottom: 16 }}>
        <h2 style={{ fontFamily: "var(--font-head)", fontSize: 18, margin: 0, letterSpacing: "-.01em" }}>Indicadores · {year}</h2>
        <span style={{ fontSize: 13, color: "var(--muted)" }}>Alcance: <b style={{ color: "var(--accent)" }}>{scopeLabel}</b></span>
      </div>

      <div className="kpi-grid">
        {cards.map((c, i) => (
          <div key={i} className="kpi-card">
            <div className="kpi-label">{c.label}</div>
            <div className="kpi-val tnum">{c.val}<span className="u">{c.u}</span></div>
            <div className="kpi-meta">
              <KpiBadge status={c.status}>{c.meta}</KpiBadge>
              <span style={{ color: "var(--muted-2)", fontSize: 11 }}>{c.sub}</span>
            </div>
          </div>
        ))}
      </div>

      <div className="kpi-section-title"><span className="bar"></span>Comparativa entre los 5 equipos</div>
      <div className="two-col">
        <div className="panel-card">
          <h3>Ocupación promedio por equipo</h3>
          <div className="pc-sub">Distribución de la carga laboral anual. Verde claro = saludable, rojo = sobrecarga.</div>
          {teamOcc.map((t) => (
            <div key={t.id} className="bar-row">
              <span className="bl"><span className="dotk" style={{ background: avatarColor(t.id) }}></span>{t.team}</span>
              <div className="bar-track"><div className="bar-fill" style={{ width: Math.min(t.pct, 150) / 1.5 + "%", background: t.pct > 100 ? "linear-gradient(90deg,var(--morado),var(--rojo))" : undefined }}></div></div>
              <span className="bar-val tnum">{t.pct}%</span>
            </div>
          ))}
        </div>
        <div className="panel-card">
          <h3>Solicitudes atendidas por equipo</h3>
          <div className="pc-sub">Cantidad de atención por equipo y solicitudes en riesgo/retrasadas.</div>
          {teamReq.map((t) => (
            <div key={t.id} className="bar-row">
              <span className="bl"><span className="dotk" style={{ background: avatarColor(t.id) }}></span>{t.team}</span>
              <div className="bar-track">
                <div className="bar-fill" style={{ width: (t.n / maxReq * 100) + "%", background: "linear-gradient(90deg,var(--accent-2),var(--accent))" }}></div>
              </div>
              <span className="bar-val tnum">{t.n}{t.riesgo > 0 && <span style={{ color: "var(--rojo)", fontSize: 11 }}> · {t.riesgo}⚠</span>}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="kpi-section-title"><span className="bar"></span>Propuesta de KPIs para seguimiento</div>
      <div className="panel-card" style={{ padding: 0, overflow: "hidden" }}>
        <table className="catalog">
          <thead>
            <tr>
              <th style={{ paddingTop: 14 }}>Indicador</th>
              <th style={{ paddingTop: 14 }}>Definición</th>
              <th style={{ paddingTop: 14 }}>Fórmula</th>
              <th style={{ paddingTop: 14 }}>Meta</th>
              <th style={{ paddingTop: 14 }}>Frecuencia</th>
            </tr>
          </thead>
          <tbody>
            {CL.KPI_CATALOG.map((kpi) => (
              <tr key={kpi.key}>
                <td className="kn">{kpi.nombre}</td>
                <td className="kdef">{kpi.definicion}</td>
                <td className="kf">{kpi.formula}</td>
                <td className="kmeta">{Icon.target({ width: 13, height: 13, style: { verticalAlign: "-2px", marginRight: 4, color: "var(--accent)" } })}{kpi.meta}</td>
                <td style={{ color: "var(--muted)" }}>{kpi.frecuencia}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

Object.assign(window, { KpisView });