/* global React */
// Reportes (HU.5.2 · HU.5.3)
// Builder de reportes + plantillas + historial de generaciones

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

function ReportesScreen({ roleId, user, onOpenDetalle }) {
  const I = window.Icons;
  const templates = window.REPORT_TEMPLATES;
  const recientes = window.REPORTES_RECIENTES;

  // Builder state
  const [tplId, setTplId] = useStateRp('consol_pais');
  const [mech, setMech] = useStateRp('MESICIC');
  const [period, setPeriod] = useStateRp('2024 — 2026');
  const [inst, setInst] = useStateRp(roleId === 'institucion' ? 'Min. de Hacienda' : 'Todas (47)');
  const [estado, setEstado] = useStateRp('Todos');
  const [formato, setFormato] = useStateRp('PDF');
  const [includeLogo, setIncludeLogo] = useStateRp(true);
  const [includeAnexos, setIncludeAnexos] = useStateRp(true);

  const tpl = templates.find(t => t.id === tplId) || templates[0];

  // Estimación de filas según filtros
  const filasEstimadas = useMemoRp(() => {
    let base = mech === 'MESICIC' ? 118 : mech === 'UNCAC' ? 156 : mech === 'OCDE' ? 253 : 527;
    if (estado === 'Cumplidos') base = Math.round(base * 0.35);
    if (estado === 'Parciales') base = Math.round(base * 0.47);
    if (estado === 'No cumplidos') base = Math.round(base * 0.15);
    if (inst !== 'Todas (47)' && roleId !== 'institucion') base = Math.round(base / 8);
    if (roleId === 'institucion') base = 23;
    return base;
  }, [mech, estado, inst, roleId]);

  return (
    <div data-screen-label="06 Reportes">
      {/* Header */}
      <div className="page-head">
        <div>
          <div className="page-head__eyebrow">{user.org}</div>
          <h1 className="page-head__title">Reportes</h1>
          <p className="page-head__sub">
            Genera reportes exportables en Excel y PDF
            {roleId === 'institucion'
              ? ' sobre la cartera de tu institución.'
              : ' con encabezado institucional, listos para uso interno o envío internacional.'}
          </p>
        </div>
        <div className="page-head__actions">
          <button type="button" className="btn btn--ghost">
            <I.Inbox size={14} /> Mis reportes guardados
          </button>
          <button type="button" className="btn btn--secondary">
            <I.Settings size={14} /> Plantillas guardadas
          </button>
        </div>
      </div>

      {/* Builder + Preview */}
      <div className="reportes-builder">
        {/* Left: template + filters */}
        <div className="builder-left">
          <div className="form-section">
            <header className="form-section__head">
              <h3>1 · Tipo de reporte</h3>
              <p>Elige una plantilla. Cada una define la estructura final del archivo.</p>
            </header>
            <div className="tpl-grid">
              {templates.map(t => {
                const ICON = I[t.icon];
                return (
                  <button
                    key={t.id}
                    type="button"
                    className={`tpl-card${tplId === t.id ? ' is-selected' : ''}${t.feature ? ' tpl-card--feature' : ''}`}
                    onClick={() => setTplId(t.id)}
                  >
                    <div className="tpl-card__icon"><ICON size={16} /></div>
                    <div className="tpl-card__body">
                      <strong>{t.label}</strong>
                      <small>{t.desc}</small>
                      <div className="tpl-card__meta">
                        <I.Users size={10} /> {t.audience}
                      </div>
                    </div>
                    {tplId === t.id && (
                      <div className="tpl-card__check"><I.CheckCircle2 size={14} /></div>
                    )}
                  </button>
                );
              })}
            </div>
          </div>

          <div className="form-section">
            <header className="form-section__head">
              <h3>2 · Filtros del reporte</h3>
              <p>Define el alcance del reporte. Los filtros se combinan entre sí.</p>
            </header>
            <div className="form-section__body">
              <div className="form-row form-row--2">
                <label className="field">
                  <span className="field__label">Mecanismo</span>
                  <select value={mech} onChange={e => setMech(e.target.value)}>
                    <option>Todos los mecanismos</option>
                    <option>MESICIC</option>
                    <option>UNCAC</option>
                    <option>OCDE</option>
                  </select>
                </label>
                <label className="field">
                  <span className="field__label">Período</span>
                  <select value={period} onChange={e => setPeriod(e.target.value)}>
                    <option>2024 — 2026</option>
                    <option>2026-Q1 (ene-mar)</option>
                    <option>2026-Q2 (abr-jun)</option>
                    <option>Histórico completo</option>
                    <option>Personalizado…</option>
                  </select>
                </label>
              </div>
              <div className="form-row form-row--2">
                <label className="field">
                  <span className="field__label">Institución</span>
                  <select value={inst} onChange={e => setInst(e.target.value)} disabled={roleId === 'institucion'}>
                    <option>Todas (47)</option>
                    <option>SENAC</option>
                    <option>Min. de Hacienda</option>
                    <option>Ministerio Público</option>
                    <option>Min. del Interior</option>
                    <option>Min. de Justicia</option>
                    <option>SEPRELAD</option>
                  </select>
                  {roleId === 'institucion' && (
                    <span className="field__hint">Limitado a tu institución por política de acceso.</span>
                  )}
                </label>
                <label className="field">
                  <span className="field__label">Estado de cumplimiento</span>
                  <select value={estado} onChange={e => setEstado(e.target.value)}>
                    <option>Todos</option>
                    <option>Cumplidos</option>
                    <option>Parciales</option>
                    <option>No cumplidos</option>
                    <option>Vencidos sin avance</option>
                  </select>
                </label>
              </div>
            </div>
          </div>

          <div className="form-section">
            <header className="form-section__head">
              <h3>3 · Formato de salida</h3>
              <p>Define la presentación. Todos los formatos incluyen encabezado institucional CGR.</p>
            </header>
            <div className="form-section__body">
              <div className="format-row">
                {tpl.format.concat(tpl.id === 'plazos_riesgo' ? ['CSV'] : []).map(f => (
                  <button
                    key={f}
                    type="button"
                    className={`format-btn format-btn--${f.toLowerCase()}${formato === f ? ' is-selected' : ''}`}
                    onClick={() => setFormato(f)}
                  >
                    <span className={`file__type file__type--${f.toLowerCase()}`}>{f.toUpperCase()}</span>
                    <span>{f === 'PDF' ? 'Documento ejecutivo' : f === 'Excel' ? 'Datos tabulados' : 'Dataset crudo'}</span>
                  </button>
                ))}
              </div>
              <div className="form-row form-row--2" style={{ marginTop: 8 }}>
                <label className="toggle-row" style={{ background: 'transparent' }}>
                  <input type="checkbox" checked={includeLogo} onChange={e => setIncludeLogo(e.target.checked)} />
                  <span className="toggle-row__label" style={{ fontSize: 12.5 }}>Incluir logo CGR y título institucional</span>
                </label>
                <label className="toggle-row" style={{ background: 'transparent' }}>
                  <input type="checkbox" checked={includeAnexos} onChange={e => setIncludeAnexos(e.target.checked)} />
                  <span className="toggle-row__label" style={{ fontSize: 12.5 }}>Incluir anexos de evidencias y enlaces</span>
                </label>
              </div>
            </div>
          </div>
        </div>

        {/* Right: live preview */}
        <aside className="builder-right">
          <div className="report-preview">
            <div className="report-preview__head">
              <div>
                <small>Vista previa</small>
                <strong>{tpl.label}</strong>
              </div>
              <span className={`file__type file__type--${formato.toLowerCase()}`}>{formato}</span>
            </div>

            <div className="report-preview__page">
              {includeLogo && (
                <div className="rp-letterhead">
                  <div className="rp-letterhead__logo">CGR</div>
                  <div>
                    <strong>Contraloría General de la República</strong>
                    <small>Plataforma de Compromisos Internacionales · Reporte oficial</small>
                  </div>
                </div>
              )}
              <h2 className="rp-title">{tpl.label}{mech !== 'Todos los mecanismos' ? ` · ${mech}` : ''}</h2>
              <div className="rp-meta">
                <span><strong>Período:</strong> {period}</span>
                <span><strong>Generado:</strong> 21 may 2026</span>
                <span><strong>Por:</strong> {user.name}</span>
                {roleId !== 'institucion' && <span><strong>Institución:</strong> {inst}</span>}
              </div>

              <div className="rp-summary">
                <div className="rp-summary__box"><small>Registros incluidos</small><strong className="mono">{filasEstimadas}</strong></div>
                <div className="rp-summary__box"><small>Estado filtrado</small><strong>{estado}</strong></div>
                <div className="rp-summary__box"><small>Formato</small><strong>{formato}</strong></div>
              </div>

              {tpl.id === 'consol_pais' ? (
                <table className="rp-table">
                  <thead>
                    <tr>
                      <th>Recomendación</th>
                      <th>Medidas adoptadas</th>
                      <th>Resultados</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>
                        <span className="mono">MES-V-038</span><br/>
                        Fortalecimiento del régimen de declaración jurada de funcionarios públicos…
                      </td>
                      <td>Implementación DJB-e con cobertura 76% (2025). Decreto 4567/25…</td>
                      <td>217.000 declaraciones presentadas · 32 verificaciones sustantivas iniciadas…</td>
                    </tr>
                    <tr>
                      <td>
                        <span className="mono">UNC-Cap.II-014</span><br/>
                        Tipificación del soborno transnacional conforme al art. 16…
                      </td>
                      <td>Proyecto de ley en mesa técnica con MP. Avance normativo: 60%…</td>
                      <td>Borrador socializado con 4 instituciones. Aún sin aprobación legislativa.</td>
                    </tr>
                    <tr className="rp-table__more">
                      <td colSpan={3}>… + {filasEstimadas - 2} compromisos adicionales</td>
                    </tr>
                  </tbody>
                </table>
              ) : (
                <table className="rp-table">
                  <thead>
                    <tr>
                      <th>ID</th>
                      <th>Recomendación</th>
                      <th>Institución</th>
                      <th>Estado</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr><td className="mono">MES-V-038</td><td>Régimen de declaración jurada…</td><td>SENAC</td><td><span className="status is-warn">Parcial</span></td></tr>
                    <tr><td className="mono">UNC-Cap.II-014</td><td>Soborno transnacional…</td><td>Min. Justicia</td><td><span className="status is-warn">Parcial</span></td></tr>
                    <tr><td className="mono">OCDE-W-009</td><td>Cooperación judicial intl.…</td><td>Min. Público</td><td><span className="status is-warn">Parcial</span></td></tr>
                    <tr><td className="mono">MES-V-040</td><td>Conflicto de intereses…</td><td>Min. Hacienda</td><td><span className="status is-ok">Cumplido</span></td></tr>
                    <tr className="rp-table__more"><td colSpan={4}>… + {filasEstimadas - 4} compromisos adicionales</td></tr>
                  </tbody>
                </table>
              )}

              <div className="rp-footer">
                <small>Página 1 de {Math.ceil(filasEstimadas / 18)} · Estructura estándar {tpl.id === 'consol_pais' ? 'MESICIC' : 'CGR'}</small>
              </div>
            </div>
          </div>

          <button type="button" className="btn btn--primary btn--big">
            <I.Download size={15} /> Generar y descargar reporte
          </button>
          <button type="button" className="btn btn--secondary btn--big">
            <I.MessageSquare size={14} /> Enviar a un destinatario
          </button>

          <div className="builder-note">
            <I.AlertCircle size={13} />
            <small>
              El reporte se genera con los datos disponibles al momento de la solicitud.
              Quedará registrado en el historial con tu usuario, fecha y filtros aplicados.
            </small>
          </div>
        </aside>
      </div>

      {/* Recent reports */}
      <div className="card table-card" style={{ marginTop: 24 }}>
        <div className="card__head">
          <div>
            <h3>Reportes generados recientemente</h3>
            <div className="meta">Tus últimos reportes y los de tu equipo · 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>
                    <div style={{ display: 'flex', gap: 4 }}>
                      <button type="button" className="btn btn--ghost btn--sm"><I.Download size={12} /></button>
                      <button type="button" className="btn btn--ghost btn--sm"><I.MessageSquare size={12} /></button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ReportesScreen });