/* global React */
// Reportes Aprobados — vista Cancillería (solo lectura)
// Acceso a reportes consolidados aprobados por la CGR para envío internacional.

const { useState: useStateAp } = React;

function ReportesAprobadosScreen({ user }) {
  const I = window.Icons;
  const reportes = window.REPORTES_APROBADOS;

  const [filter, setFilter] = useStateAp('todos');
  const [orgFilter, setOrgFilter] = useStateAp('Todos');

  const filtered = reportes.filter(r => {
    if (filter === 'nuevos' && !r.isNew) return false;
    if (filter === 'archivados' && r.estado !== 'archivado') return false;
    if (orgFilter !== 'Todos' && !r.organismo.includes(orgFilter)) return false;
    return true;
  });

  const nuevos = reportes.filter(r => r.isNew).length;
  const totales = reportes.length;
  const archivados = reportes.filter(r => r.estado === 'archivado').length;

  return (
    <div data-screen-label="06 Reportes Aprobados">
      {/* Header */}
      <div className="page-head">
        <div>
          <div className="page-head__eyebrow">{user.org}</div>
          <h1 className="page-head__title">Reportes Aprobados</h1>
          <p className="page-head__sub">
            Documentos consolidados aprobados por la CGR, listos para envío a los organismos
            internacionales. Acceso de solo lectura.
          </p>
        </div>
        <div className="page-head__actions">
          <button type="button" className="btn btn--ghost">
            <I.Bell size={14} /> Suscribirse a nuevos reportes
          </button>
          <button type="button" className="btn btn--secondary">
            <I.MessageSquare size={14} /> Solicitar a la CGR
          </button>
        </div>
      </div>

      {/* Strip: KPIs simples */}
      <div className="compkpi-row" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
        <div className="compkpi">
          <div className="compkpi__icon"><I.FileText size={15} /></div>
          <div className="compkpi__body">
            <div className="compkpi__num">{totales}</div>
            <div className="compkpi__label">Reportes aprobados</div>
            <div className="compkpi__sub">Trazabilidad completa</div>
          </div>
        </div>
        <div className="compkpi is-ok">
          <div className="compkpi__icon"><I.Sparkles size={15} /></div>
          <div className="compkpi__body">
            <div className="compkpi__num">{nuevos}</div>
            <div className="compkpi__label">Nuevos desde última visita</div>
            <div className="compkpi__sub">Listos para envío internacional</div>
          </div>
        </div>
        <div className="compkpi">
          <div className="compkpi__icon"><I.Inbox size={15} /></div>
          <div className="compkpi__body">
            <div className="compkpi__num">{archivados}</div>
            <div className="compkpi__label">Archivados</div>
            <div className="compkpi__sub">Ciclos cerrados</div>
          </div>
        </div>
      </div>

      {/* Filters */}
      <div className="filters" style={{ marginTop: 12 }}>
        <div className="chips">
          {[
            { v: 'todos', l: `Todos · ${totales}` },
            { v: 'nuevos', l: `● Nuevos · ${nuevos}` },
            { v: 'archivados', l: `Archivados · ${archivados}` },
          ].map(it => (
            <button key={it.v} type="button"
              className={`chip${filter === it.v ? ' is-active' : ''}`}
              onClick={() => setFilter(it.v)}>
              {it.l}
            </button>
          ))}
        </div>
        <div className="filters__spacer"></div>
        <div className="chips">
          {['Todos', 'OEA', 'ONU', 'OCDE'].map(o => (
            <button key={o} type="button"
              className={`chip${orgFilter === o ? ' is-active' : ''}`}
              onClick={() => setOrgFilter(o)}>
              {o === 'Todos' ? 'Todos los organismos' : o}
            </button>
          ))}
        </div>
      </div>

      {/* Cards */}
      <div className="reportes-grid">
        {filtered.map(r => <ReporteAprobadoCard key={r.id} r={r} />)}
      </div>

      {filtered.length === 0 && (
        <div className="empty">
          <I.FileText size={28} />
          <h4>Sin reportes con esos criterios</h4>
          <p>Cambia los filtros para ver el conjunto completo.</p>
        </div>
      )}
    </div>
  );
}

function ReporteAprobadoCard({ r }) {
  const I = window.Icons;
  const orgClass =
    r.organismo.includes('MESICIC') ? 'mesicic' :
    r.organismo.includes('UNCAC')   ? 'uncac'   :
    r.organismo.includes('OCDE')    ? 'ocde'    : 'mesicic';

  return (
    <article className={`rap-card${r.estado === 'archivado' ? ' is-archived' : ''}`}>
      {r.isNew && <span className="rap-card__new"><I.Sparkles size={10} /> Nuevo</span>}

      <div className="rap-card__head">
        <span className={`mech-tag mech-tag--${orgClass}`}>{r.organismo}</span>
        <span className="rap-card__period">{r.periodo}</span>
      </div>

      <h3 className="rap-card__title">{r.titulo}</h3>
      <p className="rap-card__resumen">{r.resumen}</p>

      <div className="rap-card__cov">
        <div className="rap-cov__head">
          <small>Cobertura del informe</small>
          <strong className="mono">{r.cobertura.total} recomendaciones · {r.cobertura.pct}% cumplim. global</strong>
        </div>
        <div className="rap-cov__bar">
          <span className="seg is-ok"     style={{ width: (r.cobertura.cumplidos / r.cobertura.total * 100) + '%' }}></span>
          <span className="seg is-warn"   style={{ width: (r.cobertura.parciales / r.cobertura.total * 100) + '%' }}></span>
          <span className="seg is-danger" style={{ width: (r.cobertura.noCumplidos / r.cobertura.total * 100) + '%' }}></span>
        </div>
        <div className="rap-cov__legend">
          <span><span className="dot-status is-ok"></span>{r.cobertura.cumplidos} cumplidos</span>
          <span><span className="dot-status is-warn"></span>{r.cobertura.parciales} parciales</span>
          <span><span className="dot-status is-danger"></span>{r.cobertura.noCumplidos} no cumplidos</span>
        </div>
      </div>

      <div className="rap-card__meta">
        <div><small>Aprobado por</small><strong>{r.aprobadoPor}</strong></div>
        <div><small>Fecha aprobación</small><strong>{r.aprobadoEl}</strong></div>
        <div><small>Documento</small><strong>{r.paginas} pp · {r.peso}</strong></div>
      </div>

      <div className="rap-card__files">
        {r.archivos.map((f, i) => {
          const ext = f.split('.').pop().toLowerCase();
          return (
            <button key={i} type="button" className="rap-file">
              <span className={`file__type file__type--${ext}`}>{ext.toUpperCase()}</span>
              <span>{f}</span>
              <I.Download size={12} />
            </button>
          );
        })}
      </div>

      <div className="rap-card__actions">
        <button type="button" className="btn btn--primary btn--sm">
          <I.Eye size={13} /> Ver reporte completo
        </button>
        <button type="button" className="btn btn--secondary btn--sm">
          <I.Download size={13} /> Descargar paquete
        </button>
      </div>
    </article>
  );
}

Object.assign(window, { ReportesAprobadosScreen });