/* Vista Resumen Anual — heatmap recursos × meses */
const { useMemo: useMemoA } = React;

function AnnualHeatmap({ events, scope, year, onPickResource, setTip }) {
  const CL = window.CL, CLA = window.CLA;

  // qué equipos mostrar según scope
  const teams = useMemoA(() => {
    if (scope.type === "team") return CL.TEAMS.filter((t) => t.id === scope.id);
    if (scope.type === "resource") {
      const r = CL.RESOURCE_MAP.get(scope.id);
      return CL.TEAMS.filter((t) => t.id === r.pmId);
    }
    return CL.TEAMS;
  }, [scope]);

  // matriz de ocupación
  const matrix = useMemoA(() => {
    const m = {};
    teams.forEach((t) => t.resources.forEach((r) => {
      m[r.id] = [];
      for (let mo = 0; mo < 12; mo++) m[r.id].push(CLA.monthOccupation(events, r.id, year, mo));
    }));
    return m;
  }, [events, teams, year]);

  function tip(e, r, mo, o) {
    const html = `<b>${r.name}</b><div class='tip-row'><span>${CL.MONTHS[mo]} ${year}</span><b>${o.pct}% ocupación</b></div><div class='tip-row'><span>Días con carga</span><b>${o.asignados}/${o.disponibles}</b></div>` + (o.overloadDays > 0 ? `<div class='tip-row'><span style='color:#fda4af'>Sobrecarga</span><b style='color:#fda4af'>${o.overloadDays} días</b></div>` : "");
    setTip({ x: e.clientX + 12, y: e.clientY + 14, html });
  }

  return (
    <div>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16, flexWrap: "wrap", gap: 12 }}>
        <div>
          <h2 style={{ fontFamily: "var(--font-head)", fontSize: 18, margin: 0, letterSpacing: "-.01em" }}>Resumen anual de carga · {year}</h2>
          <div style={{ fontSize: 13, color: "var(--muted)", marginTop: 3 }}>Ocupación promedio mensual por recurso. Solo días laborables de Lima, Perú.</div>
        </div>
      </div>

      <div className="heat-card">
        <div className="heat-scroll">
          <table className="heat-table">
            <thead>
              <tr>
                <th className="heat-corner">Recurso</th>
                {CL.MONTHS_SHORT.map((m) => <th key={m} className="heat-mh">{m}</th>)}
              </tr>
            </thead>
            <tbody>
              {teams.map((t) => (
                <React.Fragment key={t.id}>
                  <tr className="heat-team-row">
                    <td colSpan={13}>
                      <span style={{ display: "inline-flex", alignItems: "center", gap: 9 }}>
                        <span className="team-dot" style={{ background: avatarColor(t.id) }}></span>
                        Equipo {t.team} · {t.pm}
                        <span style={{ color: "var(--muted-2)", fontWeight: 500, fontSize: 11, marginLeft: 4 }}>
                          {Math.round(t.resources.reduce((s, r) => s + CLA.yearOccupation(events, r.id, year), 0) / t.resources.length)}% prom.
                        </span>
                      </span>
                    </td>
                  </tr>
                  {t.resources.map((r) => (
                    <tr key={r.id}>
                      <td className="heat-rname">
                        <span className="avatar" style={{ width: 26, height: 26, borderRadius: 7, background: avatarColor(r.id) }}>{r.initials}</span>
                        <span>
                          <button onClick={() => onPickResource(r.id)} style={{ background: "none", border: "none", padding: 0, fontWeight: 600, fontSize: 12.5, color: "var(--tinta)", cursor: "pointer", textAlign: "left" }}>{r.name}</button>
                          <div style={{ fontSize: 10.5, color: "var(--muted-2)" }}>{r.role}</div>
                        </span>
                      </td>
                      {matrix[r.id].map((o, mo) => (
                        <td key={mo} className="heat-cell">
                          <div className="heat-box" style={{ background: occColor(o.pct), color: occText(o.pct) }}
                            onMouseEnter={(e) => tip(e, r, mo, o)} onMouseMove={(e) => tip(e, r, mo, o)} onMouseLeave={() => setTip(null)}>
                            {o.disponibles === 0 ? "—" : o.pct}
                          </div>
                        </td>
                      ))}
                    </tr>
                  ))}
                </React.Fragment>
              ))}
            </tbody>
          </table>
        </div>
        <div className="heat-legend">
          <span style={{ fontWeight: 600 }}>Menor carga</span>
          <div className="heat-scale">
            {[5, 30, 55, 80, 100, 120, 145].map((p) => <span key={p} style={{ background: occColor(p) }}></span>)}
          </div>
          <span style={{ fontWeight: 600 }}>Sobrecarga</span>
          <span style={{ marginLeft: "auto", color: "var(--muted-2)" }}>El número indica el % de ocupación. "—" = mes sin días disponibles (vacaciones/feriados).</span>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AnnualHeatmap });