/* global React */
// Portal Público ciudadano — vista externa, lectura
// Diseño visual distinto al app interno: más generoso, con foco en datos abiertos.

const { useState: useStatePr } = React;

function PortalPublicoScreen() {
  const I = window.Icons;
  const kpis = window.PORTAL_KPIS;
  const [busqueda, setBusqueda] = useStatePr('');
  const [tabDataset, setTabDataset] = useStatePr('todos');

  return (
    <div data-screen-label="08 Portal Público" className="portal">
      {/* Banner de vista previa */}
      <div className="portal-preview-banner">
        <I.Eye size={13} />
        <span>Vista previa del portal público ciudadano · Esta es la cara externa de la plataforma</span>
        <button type="button" className="link" style={{ marginLeft: 'auto' }}>
          Abrir en pestaña aparte <I.ArrowUpRight size={11} />
        </button>
      </div>

      {/* Hero */}
      <section className="portal-hero">
        <div className="portal-hero__inner">
          <div className="portal-hero__badge">
            <I.Globe size={12} /> Datos abiertos · CGR Paraguay
          </div>
          <h1 className="portal-hero__title">
            Compromisos internacionales del Estado paraguayo
          </h1>
          <p className="portal-hero__sub">
            Seguimiento ciudadano del cumplimiento de las recomendaciones recibidas
            por Paraguay ante los mecanismos anticorrupción MESICIC (OEA), UNCAC (ONU) y OCDE.
          </p>

          <div className="portal-search">
            <I.Search size={16} />
            <input
              type="text"
              placeholder="Buscar por institución, palabra clave o ID de recomendación…"
              value={busqueda}
              onChange={e => setBusqueda(e.target.value)}
            />
            <button type="button" className="btn btn--primary">Buscar</button>
          </div>

          <div className="portal-hero__quick">
            <span>Consultas frecuentes:</span>
            <button type="button">¿Cuál es el % de cumplimiento país?</button>
            <button type="button">Compromisos de Cancillería</button>
            <button type="button">Ronda V MESICIC</button>
          </div>
        </div>

        <div className="portal-hero__viz">
          <div className="portal-gauge">
            <svg viewBox="0 0 200 200" width="200" height="200">
              <defs>
                <linearGradient id="gauge-grad" x1="0" y1="0" x2="1" y2="1">
                  <stop offset="0%" stopColor="#2d4a8a" />
                  <stop offset="100%" stopColor="#c9a961" />
                </linearGradient>
              </defs>
              <circle cx="100" cy="100" r="80" fill="none" stroke="rgba(255,255,255,0.15)" strokeWidth="14" />
              <circle cx="100" cy="100" r="80" fill="none" stroke="url(#gauge-grad)" strokeWidth="14"
                strokeLinecap="round"
                strokeDasharray={2 * Math.PI * 80}
                strokeDashoffset={2 * Math.PI * 80 * (1 - kpis.cumplimiento / 100)}
                transform="rotate(-90 100 100)" />
              <text x="100" y="95" textAnchor="middle" fontSize="44" fontWeight="700" fill="#fff" fontFamily="'Inter', sans-serif">
                {kpis.cumplimiento}%
              </text>
              <text x="100" y="120" textAnchor="middle" fontSize="11" fill="rgba(255,255,255,0.7)" letterSpacing="2" fontFamily="'Inter', sans-serif">
                CUMPLIMIENTO PAÍS
              </text>
            </svg>
            <small>Actualizado al 21 de mayo de 2026</small>
          </div>
        </div>
      </section>

      {/* KPI tira pública */}
      <section className="portal-kpis">
        <PKpi icon="ListChecks" num={kpis.total} label="Compromisos vigentes" sub="MESICIC · UNCAC · OCDE" />
        <PKpi icon="Building2" num={kpis.instituciones} label="Instituciones reportantes" sub="Distribuidos en todo el Estado" />
        <PKpi icon="CheckCircle2" tone="ok" num={kpis.cumplidos} label="Compromisos cumplidos" sub={`${Math.round(kpis.cumplidos/kpis.total*100)}% del total`} />
        <PKpi icon="AlertCircle" tone="warn" num={kpis.parciales} label="Parcialmente cumplidos" sub="En proceso de implementación" />
        <PKpi icon="XCircle" tone="danger" num={kpis.noCumplidos} label="No cumplidos" sub="Con plan de acción requerido" />
      </section>

      {/* Distribución por mecanismo */}
      <section className="portal-section">
        <header>
          <h2>Estado por mecanismo internacional</h2>
          <p>Cómo se distribuyen los compromisos entre las tres convenciones anticorrupción que evalúan a Paraguay.</p>
        </header>
        <div className="portal-mech-grid">
          {window.MECANISMO_DIST.map(m => {
            const cumpl = Math.round((m.ok / m.total) * 100);
            return (
              <article key={m.id} className={`portal-mech portal-mech--${m.id}`}>
                <div className="portal-mech__head">
                  <span className={`mech-tag mech-tag--${m.id}`}>{m.label}</span>
                  <strong className="mono">{m.total}</strong>
                </div>
                <div className="portal-mech__bigpct">{cumpl}%</div>
                <div className="portal-mech__sub">cumplimiento al período actual</div>
                <div className="mech-stack__bar" style={{ marginTop: 12 }}>
                  <span className="seg is-ok"     style={{ width: (m.ok / m.total * 100) + '%' }}></span>
                  <span className="seg is-warn"   style={{ width: (m.partial / m.total * 100) + '%' }}></span>
                  <span className="seg is-danger" style={{ width: (m.bad / m.total * 100) + '%' }}></span>
                </div>
                <div className="portal-mech__legend">
                  <span><span className="dot-status is-ok"></span>{m.ok} cumpl.</span>
                  <span><span className="dot-status is-warn"></span>{m.partial} parc.</span>
                  <span><span className="dot-status is-danger"></span>{m.bad} no cumpl.</span>
                </div>
                <button type="button" className="portal-mech__cta">
                  Explorar {m.label} <I.ArrowRight size={11} />
                </button>
              </article>
            );
          })}
        </div>
      </section>

      {/* Datos abiertos */}
      <section className="portal-section">
        <header>
          <h2>Datos abiertos</h2>
          <p>Datasets descargables para uso ciudadano, académico y periodístico. Datos actualizados diariamente.</p>
        </header>
        <div className="chips" style={{ marginBottom: 14 }}>
          {[
            { v: 'todos', l: 'Todos los datasets' },
            { v: 'csv', l: 'CSV' },
            { v: 'excel', l: 'Excel' },
            { v: 'pdf', l: 'PDF' },
          ].map(it => (
            <button key={it.v} type="button"
              className={`chip${tabDataset === it.v ? ' is-active' : ''}`}
              onClick={() => setTabDataset(it.v)}>
              {it.l}
            </button>
          ))}
        </div>
        <div className="portal-ds-grid">
          {window.PORTAL_DATASETS
            .filter(d => tabDataset === 'todos' || d.formato.toLowerCase() === tabDataset)
            .map(d => (
            <article key={d.id} className="ds-card">
              <span className={`file__type file__type--${d.formato.toLowerCase()}`}>{d.formato.toUpperCase()}</span>
              <h4>{d.titulo}</h4>
              <div className="ds-card__meta">
                <span>{d.size}</span>
                <span>· Actualizado {d.actualizado}</span>
              </div>
              <div className="ds-card__foot">
                <small><I.Download size={11} /> {d.downloads.toLocaleString('es-PY')} descargas</small>
                <button type="button" className="btn btn--primary btn--sm">
                  <I.Download size={12} /> Descargar
                </button>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* Top instituciones */}
      <section className="portal-section">
        <header>
          <h2>Instituciones con más compromisos</h2>
          <p>Las instituciones del Estado paraguayo responsables del mayor número de recomendaciones internacionales.</p>
        </header>
        <div className="portal-ranking">
          {window.INST_RANKING.slice(0, 8).map((it, i) => {
            const tone = it.cumpl >= 75 ? 'ok' : it.cumpl >= 55 ? 'warn' : 'danger';
            return (
              <div key={it.inst} className="portal-rank-row">
                <div className="portal-rank-row__pos">#{i + 1}</div>
                <div className="portal-rank-row__inst">
                  <strong>{it.inst}</strong>
                  <small>{it.total} compromisos</small>
                </div>
                <div className="portal-rank-row__bar">
                  <div className={`portal-rank-row__fill is-${tone}`} style={{ width: it.cumpl + '%' }}></div>
                </div>
                <div className={`portal-rank-row__pct mono is-${tone}`}>{it.cumpl}%</div>
              </div>
            );
          })}
        </div>
      </section>

      {/* Noticias / actualizaciones */}
      <section className="portal-section">
        <header>
          <h2>Últimas actualizaciones</h2>
          <p>Hitos relevantes de la plataforma y del seguimiento país.</p>
        </header>
        <div className="portal-news">
          {window.PORTAL_NOTICIAS.map((n, i) => (
            <article key={i} className="news-card">
              <small>{n.fecha}</small>
              <h4>{n.titulo}</h4>
              <p>{n.resumen}</p>
              <button type="button" className="link">Leer más <I.ArrowRight size={11} /></button>
            </article>
          ))}
        </div>
      </section>

      {/* Footer ciudadano */}
      <footer className="portal-footer">
        <div className="portal-footer__brand">
          <div className="portal-footer__logo">CGR</div>
          <div>
            <strong>Contraloría General de la República</strong>
            <small>Plataforma de Compromisos Internacionales · Datos públicos</small>
          </div>
        </div>
        <div className="portal-footer__cols">
          <div>
            <strong>Datos abiertos</strong>
            <ul>
              <li>API pública</li>
              <li>Documentación de datos</li>
              <li>Términos de uso</li>
            </ul>
          </div>
          <div>
            <strong>Marco normativo</strong>
            <ul>
              <li>Ley N° 7389/2024</li>
              <li>Convención Interamericana</li>
              <li>UNCAC · Convención ONU</li>
              <li>OCDE Anti-Bribery</li>
            </ul>
          </div>
          <div>
            <strong>Participación ciudadana</strong>
            <ul>
              <li>Audiencias públicas</li>
              <li>Reportar inconsistencia</li>
              <li>Solicitudes de información</li>
            </ul>
          </div>
        </div>
        <div className="portal-footer__legal">
          <small>© 2026 Contraloría General de la República del Paraguay. Información pública en cumplimiento de la Ley N° 5282/14 de Libre Acceso Ciudadano.</small>
        </div>
      </footer>
    </div>
  );
}

function PKpi({ icon, num, label, sub, tone }) {
  const I = window.Icons;
  const ICON = I[icon];
  return (
    <div className={`p-kpi${tone ? ' is-' + tone : ''}`}>
      <div className="p-kpi__icon"><ICON size={18} /></div>
      <div className="p-kpi__num mono">{typeof num === 'number' ? num.toLocaleString('es-PY') : num}</div>
      <div className="p-kpi__label">{label}</div>
      <small>{sub}</small>
    </div>
  );
}

Object.assign(window, { PortalPublicoScreen });