/* global React */
// Reportes y analítica — tablero de gestión general de la Contraloría.
// KPIs y gráficas dinámicas (filtros que recalculan en vivo) + exportar + historial.

const { useState: useStateRp, useMemo: useMemoRp } = React;

// ---------- Gauge circular para KPIs ----------
function RpArc({ value, tone }) {
  const r = 22, c = 2 * Math.PI * r;
  const offset = c * (1 - (value || 0) / 100);
  const color =
    tone === 'ok' ? 'var(--sem-success)' :
    tone === 'warn' ? 'var(--sem-warning-bg)' :
    tone === 'danger' ? 'var(--sem-danger)' :
    'var(--cgr-primary)';
  return (
    <svg width="54" height="54" viewBox="0 0 54 54">
      <circle cx="27" cy="27" r={r} fill="none" stroke="var(--cgr-border)" strokeWidth="4" />
      <circle cx="27" cy="27" r={r} fill="none" stroke={color} strokeWidth="4" strokeLinecap="round"
        strokeDasharray={c} strokeDashoffset={offset} transform="rotate(-90 27 27)" />
    </svg>
  );
}

function RpKpi({ icon, label, num, sub, tone, gauge }) {
  const I = window.Icons;
  return (
    <div className={`kpi${tone ? ' is-' + tone : ''}`}>
      <div className="kpi__head">
        <div className="kpi__icon">{React.createElement(I[icon], { size: 16 })}</div>
        <div className="kpi__label">{label}</div>
      </div>
      <div className="kpi__num-row">
        <div className="kpi__num">{num}</div>
        {gauge != null && <RpArc value={gauge} tone={tone} />}
      </div>
      {sub && <div className="kpi__sub">{sub}</div>}
    </div>
  );
}

// ---------- Donut de semáforo (estado de cumplimiento) ----------
function RpDonut({ ok, partial, bad }) {
  const total = (ok + partial + bad) || 1;
  const r = 52, cx = 70, cy = 70, sw = 18, c = 2 * Math.PI * r;
  const segs = [
    { v: ok, color: 'var(--sem-success)' },
    { v: partial, color: 'var(--sem-warning-bg)' },
    { v: bad, color: 'var(--sem-danger)' },
  ];
  let acc = 0;
  const cumpl = Math.round((ok / total) * 100);
  return (
    <div className="rp-donut">
      <svg width="140" height="140" viewBox="0 0 140 140">
        <circle cx={cx} cy={cy} r={r} fill="none" stroke="var(--cgr-divider)" strokeWidth={sw} />
        {segs.map((s, i) => {
          const frac = s.v / total;
          const dash = frac * c;
          const el = (
            <circle key={i} cx={cx} cy={cy} r={r} fill="none" stroke={s.color} strokeWidth={sw}
              strokeDasharray={`${dash} ${c - dash}`} strokeDashoffset={-acc * c}
              transform={`rotate(-90 ${cx} ${cy})`} />
          );
          acc += frac;
          return el;
        })}
        <text x={cx} y={cy - 1} textAnchor="middle" className="rp-donut__num">{cumpl}%</text>
        <text x={cx} y={cy + 17} textAnchor="middle" className="rp-donut__lbl">cumplidos</text>
      </svg>
      <div className="rp-donut__legend">
        <span><span className="dot-status is-ok"></span> Cumplidos <strong>{ok}</strong></span>
        <span><span className="dot-status is-warn"></span> Parciales <strong>{partial}</strong></span>
        <span><span className="dot-status is-danger"></span> No cumplidos <strong>{bad}</strong></span>
      </div>
    </div>
  );
}

// ---------- Línea de evolución ----------
function RpSpark({ data, w = 360, h = 96 }) {
  if (!data || !data.length) return null;
  const pad = 6;
  const min = Math.min(...data.map(d => d.v)) - 4;
  const max = Math.max(...data.map(d => d.v)) + 4;
  const step = (w - pad * 2) / (data.length - 1);
  const pts = data.map((d, i) => {
    const x = pad + i * step;
    const y = h - pad - ((d.v - min) / (max - min)) * (h - pad * 2);
    return [x, y];
  });
  const pathD = pts.map((p, i) => (i === 0 ? 'M' : 'L') + p[0].toFixed(1) + ' ' + p[1].toFixed(1)).join(' ');
  const areaD = pathD + ` L${pts[pts.length - 1][0].toFixed(1)} ${h - pad} L${pts[0][0].toFixed(1)} ${h - pad} Z`;
  const last = pts[pts.length - 1];
  return (
    <svg className="spark" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" width="100%" height={h}>
      <defs>
        <linearGradient id="rep-spark-fill" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="rgba(45,74,138,0.18)" />
          <stop offset="100%" stopColor="rgba(45,74,138,0.00)" />
        </linearGradient>
      </defs>
      <path d={areaD} fill="url(#rep-spark-fill)" />
      <path d={pathD} fill="none" stroke="var(--cgr-primary)" strokeWidth="1.75" strokeLinejoin="round" />
      <circle cx={last[0]} cy={last[1]} r="3.5" fill="var(--cgr-primary)" stroke="#fff" strokeWidth="1.5" />
    </svg>
  );
}

// ---------- Barras apiladas por mecanismo ----------
function RpMechBars({ items }) {
  return (
    <div className="mech-stack">
      {items.map(m => {
        const okPct = (m.ok / m.total) * 100;
        const prPct = (m.partial / m.total) * 100;
        const bdPct = (m.bad / m.total) * 100;
        return (
          <div className="mech-stack__row" key={m.id}>
            <div className="mech-stack__head">
              <strong>{m.label}</strong>
              <span className="mech-stack__total mono">{m.total}</span>
            </div>
            <div className="mech-stack__bar">
              <span className="seg is-ok" style={{ width: okPct + '%' }} title={`Cumplidos ${m.ok}`}></span>
              <span className="seg is-warn" style={{ width: prPct + '%' }} title={`Parciales ${m.partial}`}></span>
              <span className="seg is-danger" style={{ width: bdPct + '%' }} title={`No cumplidos ${m.bad}`}></span>
            </div>
            <div className="mech-stack__legend">
              <span><span className="dot-status is-ok"></span>{m.ok}</span>
              <span><span className="dot-status is-warn"></span>{m.partial}</span>
              <span><span className="dot-status is-danger"></span>{m.bad}</span>
            </div>
          </div>
        );
      })}
    </div>
  );
}

// ---------- Ranking de instituciones (toggle carga / cumplimiento) ----------
function RpInstBars({ items, metric }) {
  const max = Math.max(...items.map(i => i.total));
  const sorted = metric === 'cumplimiento'
    ? [...items].sort((a, b) => b.cumpl - a.cumpl)
    : [...items].sort((a, b) => b.total - a.total);
  return (
    <div className="inst-bars">
      {sorted.slice(0, 7).map(it => {
        const w = metric === 'cumplimiento' ? it.cumpl : (it.total / max) * 100;
        const tone = it.cumpl >= 75 ? 'is-ok' : it.cumpl >= 55 ? 'is-warn' : 'is-danger';
        return (
          <div className="inst-bars__row" key={it.inst}>
            <div className="inst-bars__label" title={it.inst}>{it.inst}</div>
            <div className="inst-bars__track">
              <span className={`inst-bars__fill ${metric === 'cumplimiento' ? tone : ''}`} style={{ width: w + '%' }}></span>
              <span className="inst-bars__total mono">{metric === 'cumplimiento' ? it.cumpl + '%' : it.total}</span>
            </div>
            <div className={`inst-bars__cumpl ${tone} mono`}>{metric === 'cumplimiento' ? it.total + ' comp.' : it.cumpl + '%'}</div>
          </div>
        );
      })}
    </div>
  );
}

function RpSeg({ value, options, onChange }) {
  return (
    <div className="rep-seg">
      {options.map(o => (
        <button type="button" key={o.v} className={value === o.v ? 'is-on' : ''} onClick={() => onChange(o.v)}>{o.l}</button>
      ))}
    </div>
  );
}

function ReportesScreen({ roleId, user, onOpenDetalle }) {
  const I = window.Icons;
  const MECH = window.MECANISMO_DIST || [];
  const INST = window.INST_RANKING || [];
  const EVO = window.EVO_SERIES || [];
  const COMP = window.COMPROMISOS || [];
  const recientes = window.REPORTES_RECIENTES || [];
  const org = (user && user.org) || 'Contraloría General de la República';
  const esInst = roleId === 'institucion';

  const [mech, setMech] = useStateRp('Todos');
  const [periodo, setPeriodo] = useStateRp('2024 — 2026');
  const [rango, setRango] = useStateRp('todo');
  const [instMetric, setInstMetric] = useStateRp('carga');

  // Recalcular distribución según el mecanismo seleccionado
  const dist = useMemoRp(() => {
    if (mech !== 'Todos') {
      const m = MECH.find(x => x.label === mech);
      if (m) return { total: m.total, ok: m.ok, partial: m.partial, bad: m.bad };
    }
    return MECH.reduce((a, m) => ({ total: a.total + m.total, ok: a.ok + m.ok, partial: a.partial + m.partial, bad: a.bad + m.bad }), { total: 0, ok: 0, partial: 0, bad: 0 });
  }, [mech]);

  const pct = (n) => dist.total ? Math.round((n / dist.total) * 100) : 0;
  const cumplGlobal = mech === 'Todos'
    ? (EVO.length ? EVO[EVO.length - 1].v : 0)
    : (dist.total ? Math.round(((dist.ok + dist.partial * 0.5) / dist.total) * 100) : 0);

  const evoData = rango === '12m' ? EVO.slice(-12) : EVO;
  const evoNow = evoData.length ? evoData[evoData.length - 1].v : 0;
  const evoDelta = evoData.length ? evoNow - evoData[0].v : 0;

  // Plazos / riesgo (sobre los compromisos en seguimiento)
  const plazos = useMemoRp(() => ({
    venc: COMP.filter(c => c.d < 0).length,
    sem: COMP.filter(c => c.d >= 0 && c.d <= 7).length,
    mes: COMP.filter(c => c.d > 7 && c.d <= 30).length,
    mas: COMP.filter(c => c.d > 30).length,
  }), [mech]);

  return (
    <div data-screen-label="06 Reportes y analítica">
      <div className="page-head">
        <div>
          <div className="page-head__eyebrow">{org}</div>
          <h1 className="page-head__title">Reportes y analítica</h1>
          <p className="page-head__sub">
            Panel de gestión del cumplimiento país en los mecanismos anticorrupción evaluados —
            MESICIC, UNCAC y OCDE. Indicadores y gráficas para el seguimiento general de la Contraloría;
            los filtros recalculan todo en vivo.
          </p>
        </div>
        <div className="page-head__actions">
          <button type="button" className="btn btn--ghost"><I.Download size={14} /> Exportar (PDF)</button>
          <button type="button" className="btn btn--secondary"><I.Download size={14} /> Exportar (Excel)</button>
        </div>
      </div>

      {/* Filtros dinámicos */}
      <div className="rep-filters">
        <label className="rep-filter">
          <span className="rep-filter__lbl"><I.Globe size={13} /> Mecanismo</span>
          <select value={mech} onChange={e => setMech(e.target.value)}>
            <option value="Todos">Todos los mecanismos</option>
            {MECH.map(m => <option key={m.id} value={m.label}>{m.label}</option>)}
          </select>
        </label>
        <label className="rep-filter">
          <span className="rep-filter__lbl"><I.Calendar size={13} /> Período</span>
          <select value={periodo} onChange={e => setPeriodo(e.target.value)}>
            <option>2024 — 2026</option>
            <option>2026 (año en curso)</option>
            <option>Último trimestre</option>
            <option>Histórico completo</option>
          </select>
        </label>
        <div className="rep-filters__note"><I.Sparkles size={13} /> Mostrando {dist.total} compromisos{mech !== 'Todos' ? ` · ${mech}` : ''}</div>
      </div>

      {/* KPIs */}
      <div className="kpi-grid">
        <RpKpi icon="ListChecks" label="Compromisos activos" num={dist.total} sub={mech === 'Todos' ? 'En los 3 mecanismos' : mech} />
        <RpKpi icon="Sparkles" label="Cumplimiento global" num={cumplGlobal + '%'} sub={`${evoDelta >= 0 ? '+' : ''}${evoDelta} pts en el período`} gauge={cumplGlobal} />
        <RpKpi icon="CheckCircle2" label="Cumplidos" num={dist.ok} sub={pct(dist.ok) + '% del total'} tone="ok" gauge={pct(dist.ok)} />
        <RpKpi icon="AlertCircle" label="Parcialmente cumplidos" num={dist.partial} sub={pct(dist.partial) + '% — zona gris'} tone="warn" gauge={pct(dist.partial)} />
        <RpKpi icon="XCircle" label="No cumplidos" num={dist.bad} sub={pct(dist.bad) + '% — requieren plan'} tone="danger" gauge={pct(dist.bad)} />
      </div>

      {/* Fila 1: semáforo + evolución + plazos */}
      <div className="rep-grid rep-grid--3">
        <div className="card chart-card">
          <div className="card__head"><h3>Estado de cumplimiento</h3><span className="meta">{mech === 'Todos' ? 'País' : mech}</span></div>
          <div className="card__body"><RpDonut ok={dist.ok} partial={dist.partial} bad={dist.bad} /></div>
        </div>

        <div className="card chart-card">
          <div className="card__head">
            <h3>Evolución del cumplimiento</h3>
            <RpSeg value={rango} onChange={setRango} options={[{ v: '12m', l: '12 m' }, { v: 'todo', l: 'Todo' }]} />
          </div>
          <div className="card__body">
            <div className="evo-big">
              <div className="evo-big__num">{evoNow}%</div>
              <div className={`evo-big__delta${evoDelta < 0 ? ' is-down' : ''}`}>{evoDelta >= 0 ? '↑' : '↓'} {Math.abs(evoDelta)} pts {rango === '12m' ? '(12 meses)' : 'acumulado'}</div>
            </div>
            <RpSpark data={evoData} />
            <div className="rep-axis"><span>{evoData[0] && evoData[0].m}</span><span>{evoData[evoData.length - 1] && evoData[evoData.length - 1].m}</span></div>
          </div>
        </div>

        <div className="card chart-card">
          <div className="card__head"><h3>Plazos y riesgo</h3><span className="meta">en seguimiento</span></div>
          <div className="card__body">
            <div className="rp-plazos">
              <div className="rp-plazo is-danger"><strong>{plazos.venc}</strong><small>Vencidos</small></div>
              <div className="rp-plazo is-warn"><strong>{plazos.sem}</strong><small>Vencen ≤ 7 días</small></div>
              <div className="rp-plazo is-info"><strong>{plazos.mes}</strong><small>8 – 30 días</small></div>
              <div className="rp-plazo"><strong>{plazos.mas}</strong><small>Más de 30 días</small></div>
            </div>
            <div className="rep-risknote"><I.AlertTriangle size={13} /> {plazos.venc + plazos.sem} compromisos requieren atención esta semana.</div>
          </div>
        </div>
      </div>

      {/* Fila 2: por mecanismo + ranking instituciones */}
      <div className="rep-grid rep-grid--2">
        <div className="card chart-card">
          <div className="card__head"><h3>Cumplimiento por mecanismo</h3><span className="meta">3 mecanismos</span></div>
          <div className="card__body"><RpMechBars items={MECH} /></div>
        </div>

        <div className="card chart-card">
          <div className="card__head">
            <h3>Ranking de instituciones</h3>
            <RpSeg value={instMetric} onChange={setInstMetric} options={[{ v: 'carga', l: 'Carga' }, { v: 'cumplimiento', l: 'Cumplimiento' }]} />
          </div>
          <div className="card__body"><RpInstBars items={INST} metric={instMetric} /></div>
        </div>
      </div>

      {/* Reportes generados */}
      <div className="card table-card" style={{ marginTop: 20 }}>
        <div className="card__head">
          <div>
            <h3>Reportes generados</h3>
            <div className="meta">Exportaciones recientes · disponibles por 90 días</div>
          </div>
          <button type="button" className="btn btn--ghost btn--sm"><I.Eye size={13} /> Ver todos</button>
        </div>
        <div className="table-wrap">
          <table className="data-table">
            <thead>
              <tr><th>ID</th><th>Reporte</th><th>Generado</th><th>Por</th><th>Formato</th><th>Tamaño</th><th></th></tr>
            </thead>
            <tbody>
              {recientes.map(r => (
                <tr key={r.id}>
                  <td className="mono">{r.id}</td>
                  <td className="cell-title">{r.titulo}<div className="cell-meta"><span>{r.filas} registros</span></div></td>
                  <td className="mono">{r.generado}</td>
                  <td>{r.autor}</td>
                  <td><span className={`file__type file__type--${r.formato.toLowerCase()}`}>{r.formato.toUpperCase()}</span></td>
                  <td className="mono">{r.peso}</td>
                  <td><button type="button" className="btn btn--ghost btn--sm"><I.Download size={12} /></button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ReportesScreen });