/* Panel lateral de resumen del recurso (pestaña Calendario) */
const { useMemo: useMemoS } = React;

function OccRing({ pct, size = 84 }) {
  const r = (size - 12) / 2, c = 2 * Math.PI * r;
  const clamped = Math.min(pct, 150);
  const frac = Math.min(clamped / 100, 1.5);
  const col = occColor(pct);
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
      <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="var(--bg)" strokeWidth="10" />
      <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={col} strokeWidth="10" strokeLinecap="round"
        strokeDasharray={c} strokeDashoffset={c * (1 - Math.min(frac, 1))}
        transform={`rotate(-90 ${size / 2} ${size / 2})`} />
      {pct > 100 && <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="var(--rojo)" strokeWidth="10" strokeLinecap="round"
        strokeDasharray={c} strokeDashoffset={c * (1 - (frac - 1))}
        transform={`rotate(-90 ${size / 2} ${size / 2})`} opacity="0.85" />}
      <text x="50%" y="50%" textAnchor="middle" dy="0.35em" fontFamily="var(--font-head)" fontWeight="700" fontSize="19" fill="var(--tinta)">{pct}%</text>
    </svg>
  );
}

function ResourceSidePanel({ resource, events, year, month }) {
  const CL = window.CL, CLA = window.CLA;
  const occ = useMemoS(() => CLA.monthOccupation(events, resource.id, year, month), [events, resource, year, month]);
  const resEvents = useMemoS(() => events.filter((e) => e.resourceId === resource.id), [events, resource]);

  const vacDays = monthVacDays(events, resource.id, year, month, "vacaciones");
  const licDays = monthVacDays(events, resource.id, year, month, "licencia");
  const team = CL.TEAMS.find((t) => t.id === resource.pmId);
  const solicitudes = resEvents.filter((e) => e.type === "asignacion");

  return (
    <div>
      <div className="side-card">
        <div className="profile-card">
          <div className="avatar" style={{ background: avatarColor(resource.id) }}>{resource.initials}</div>
          <div>
            <div className="pc-name">{resource.name}</div>
            <div className="pc-role">{resource.role} · Equipo {team.team}</div>
          </div>
        </div>
      </div>

      <div className="side-card">
        <div className="sc-title">Ocupación · {CL.MONTHS[month]} {year}</div>
        <div className="occ-ring-wrap">
          <OccRing pct={occ.pct} />
          <div>
            <div className="occ-cap">{occ.asignados} de {occ.disponibles} días laborables con carga</div>
            {occ.overloadDays > 0 && <div style={{ marginTop: 8 }}><span className="chip bad">{Icon.alert({ width: 12, height: 12 })} {occ.overloadDays} días en sobrecarga</span></div>}
            {occ.pct >= 75 && occ.pct <= 100 && <div style={{ marginTop: 8 }}><span className="chip ok">Carga saludable</span></div>}
            {occ.pct < 75 && occ.disponibles > 0 && <div style={{ marginTop: 8 }}><span className="chip warn">Capacidad disponible</span></div>}
          </div>
        </div>
      </div>

      <div className="side-card">
        <div className="sc-title">Resumen del mes</div>
        <div className="mini-row"><span className="k"><span className="dotk" style={{ background: "var(--accent-2)" }}></span>Días laborables</span><span className="v tnum">{CL.workingDaysInMonth(year, month)}</span></div>
        <div className="mini-row"><span className="k"><span className="dotk" style={{ background: "var(--ev-vac)" }}></span>Días de vacaciones</span><span className="v tnum">{vacDays}</span></div>
        <div className="mini-row"><span className="k"><span className="dotk" style={{ background: "var(--ev-lic)" }}></span>Días de licencia</span><span className="v tnum">{licDays}</span></div>
        <div className="mini-row"><span className="k"><span className="dotk" style={{ background: "var(--rojo)" }}></span>Feriados del mes</span><span className="v tnum">{holidaysInMonth(year, month)}</span></div>
      </div>

      <div className="side-card">
        <div className="sc-title">Solicitudes asignadas ({solicitudes.length})</div>
        {solicitudes.length === 0 && <div style={{ fontSize: 12, color: "var(--muted)" }}>Sin solicitudes asignadas.</div>}
        {solicitudes.map((s) => (
          <div key={s.id} className="mini-row">
            <span className="k" style={{ flexDirection: "column", alignItems: "flex-start", gap: 2 }}>
              <span style={{ display: "flex", alignItems: "center", gap: 7, color: "var(--tinta)", fontWeight: 600 }}>
                <span className="dotk" style={{ background: colorFor(s) }}></span>{s.projectId}
              </span>
              <span style={{ fontSize: 11, color: "var(--muted-2)", paddingLeft: 16 }}>{s.start} → {s.end}</span>
            </span>
            <span className={"chip " + estadoClass(s.estado)}>{estadoLabel(s.estado)}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function monthVacDays(events, rid, year, month, type) {
  const CL = window.CL;
  let n = 0;
  events.filter((e) => e.resourceId === rid && e.type === type).forEach((e) => {
    let d = CL.parseISO(e.start), end = CL.parseISO(e.end);
    for (; d.getTime() <= end.getTime(); d = CL.addDays(d, 1)) {
      if (d.getFullYear() === year && d.getMonth() === month && CL.isWorkingDay(d)) n++;
    }
  });
  return n;
}
function holidaysInMonth(year, month) {
  const CL = window.CL;
  return CL.holidaysForYear(year).filter((h) => { const d = CL.parseISO(h.date); return d.getMonth() === month && !CL.isWeekend(d); }).length;
}
const AV_COLORS = ["#E11D2A", "#7C3AED", "#BE185D", "#4F46E5", "#A21CAF", "#DB2777", "#6D28D9", "#C026A8"];
function avatarColor(id) {
  let h = 0; for (let i = 0; i < id.length; i++) h = (h * 31 + id.charCodeAt(i)) >>> 0;
  return AV_COLORS[h % AV_COLORS.length];
}

Object.assign(window, { ResourceSidePanel, avatarColor, OccRing });