/* global React */
// Slide-over panel: Cargar Avance (Institución Reportante)
// HU.2.1 (carga + evidencias), HU.2.2 (historial), HU.2.3 (devolución/ajuste)

const { useState: useStateA } = React;

function CargarAvancePanel({ open, compromisoId, onClose, onSubmit }) {
  const I = window.Icons;

  // Buscar el compromiso si se pasó un id
  const compromiso = compromisoId
    ? window.MIS_COMPROMISOS.find(c => c.id === compromisoId)
    : window.MIS_COMPROMISOS.find(c => c.estadoCiclo === 'returned') || window.MIS_COMPROMISOS[0];

  const isReturned = compromiso?.estadoCiclo === 'returned';

  const [tab, setTab] = useStateA('avance'); // avance | historial
  const [descripcion, setDescripcion] = useStateA(
    isReturned
      ? 'En atención a la observación, se adjunta la matriz de conciliación específica por dependencia para el 2do trimestre 2025…'
      : ''
  );
  const [medidas, setMedidas] = useStateA('');
  const [resultados, setResultados] = useStateA('');
  const [files, setFiles] = useStateA(
    isReturned
      ? [{ name: 'matriz_conciliacion_2Q2025.xlsx', size: '224 KB', type: 'xlsx' }]
      : []
  );
  const [links, setLinks] = useStateA([]);
  const [newLink, setNewLink] = useStateA('');
  const [obsAtendidas, setObsAtendidas] = useStateA(new Set());

  if (!open || !compromiso) return null;

  const addLink = () => {
    if (!newLink.trim()) return;
    setLinks(ls => [...ls, { url: newLink, label: '' }]);
    setNewLink('');
  };

  const toggleObs = i => {
    setObsAtendidas(prev => {
      const next = new Set(prev);
      if (next.has(i)) next.delete(i); else next.add(i);
      return next;
    });
  };

  const dueText =
    compromiso.d < 0 ? `Vencido hace ${Math.abs(compromiso.d)} días` :
    compromiso.d === 0 ? 'Vence hoy' :
    `Vence en ${compromiso.d} días`;

  return (
    <div className="sheet-overlay" role="dialog" aria-modal="true" aria-label="Cargar avance">
      <div className="sheet-scrim" onClick={onClose}></div>

      <aside className="sheet sheet--wide">
        {/* Header */}
        <header className="sheet__head sheet__head--ctx">
          <div className="sheet__ctx">
            <div className="sheet__eyebrow">
              <I.Upload size={13} /> Cargar avance
              {isReturned && <span className="sheet__chip sheet__chip--warn"><I.AlertCircle size={11} /> Devuelto para ajuste</span>}
            </div>
            <h2 className="sheet__title">{compromiso.text}</h2>
            <div className="sheet__meta">
              <span className="mono">{compromiso.id}</span>
              <span><span className={`mech-tag mech-tag--${compromiso.mecanismo.toLowerCase()}`}>{compromiso.mecanismo}</span> · {compromiso.ronda}</span>
              <span><I.Building2 size={12} /> Líder: {compromiso.lider}</span>
              <span className={compromiso.d <= 7 ? 'is-soon' : ''}>
                <I.Clock size={12} /> {dueText} <small>({compromiso.plazo})</small>
              </span>
              <window.StatusPill estado={compromiso.estado} />
            </div>
          </div>
          <button type="button" className="sheet__close" onClick={onClose} aria-label="Cerrar">
            <I.XCircle size={20} />
          </button>
        </header>

        {/* Tabs */}
        <div className="tabs tabs--inset">
          <button type="button" className={`tab${tab === 'avance' ? ' is-active' : ''}`} onClick={() => setTab('avance')}>
            <I.Upload size={13} /> Cargar avance
          </button>
          <button type="button" className={`tab${tab === 'historial' ? ' is-active' : ''}`} onClick={() => setTab('historial')}>
            <I.Clock size={13} /> Historial <span className="tab__badge">{window.HISTORIAL_AVANCES.length}</span>
          </button>
          <button type="button" className={`tab${tab === 'evidencias' ? ' is-active' : ''}`} onClick={() => setTab('evidencias')}>
            <I.FileText size={13} /> Evidencias acumuladas
          </button>
        </div>

        {/* Body */}
        <div className="sheet__body sheet__body--split">
          {tab === 'avance' && (
            <>
              <div className="sheet__main">
                {/* Observación destacada de la CGR (HU.2.3) */}
                {isReturned && (
                  <div className="returned-box">
                    <div className="returned-box__head">
                      <I.AlertCircle size={15} />
                      <strong>Observación de la CGR — atender solo lo siguiente</strong>
                      <small>· {compromiso.obsFecha} · {compromiso.observador}</small>
                    </div>
                    <p className="returned-box__body">{compromiso.observacion}</p>

                    <div className="returned-box__divider">
                      <small>Marcar cada punto como atendido al completarlo. La carga aplica únicamente a estos puntos.</small>
                    </div>

                    <ul className="obs-checklist">
                      {window.OBSERVACIONES_PUNTUALES.map((o, i) => (
                        <li key={i} className={obsAtendidas.has(i) ? 'is-done' : ''}>
                          <button type="button" className="obs-check" onClick={() => toggleObs(i)}>
                            {obsAtendidas.has(i) ? <I.CheckCircle2 size={14} /> : <span className="obs-check__empty"></span>}
                          </button>
                          <div className="obs-content">
                            <strong>{o.campo}</strong>
                            <small>{o.desc}</small>
                          </div>
                          <span className={`obs-status ${obsAtendidas.has(i) ? 'is-done' : ''}`}>
                            {obsAtendidas.has(i) ? 'Atendido' : 'Pendiente'}
                          </span>
                        </li>
                      ))}
                    </ul>
                  </div>
                )}

                {/* Descripción del avance */}
                <FormSection
                  title={isReturned ? 'Descripción del ajuste *' : 'Descripción del avance *'}
                  sub={isReturned
                    ? 'Indica qué acciones realizaste para atender las observaciones de la CGR.'
                    : 'Resumen ejecutivo del avance del período. La CGR lo verá como primer contenido del reporte.'}
                >
                  <textarea
                    rows="5"
                    value={descripcion}
                    onChange={e => setDescripcion(e.target.value)}
                    placeholder="Implementamos el módulo de verificación cruzada con SET, cubriendo el 76% de las dependencias…"
                  />
                  <div className="field__counter">{descripcion.length} caracteres · sugerido 300-700</div>
                </FormSection>

                {/* Estructura MESICIC */}
                {!isReturned && (
                  <FormSection
                    title="Reporte estructurado · formato MESICIC"
                    sub="Opcional pero recomendado. Esta estructura se utiliza en el informe consolidado país."
                  >
                    <Field label="Medidas adoptadas">
                      <textarea rows="3" value={medidas} onChange={e => setMedidas(e.target.value)}
                        placeholder="Decreto 4567/25 · implementación del módulo DJB-e · capacitación de 412 funcionarios…" />
                    </Field>
                    <Field label="Resultados obtenidos">
                      <textarea rows="3" value={resultados} onChange={e => setResultados(e.target.value)}
                        placeholder="217.000 declaraciones presentadas · 32 verificaciones sustantivas iniciadas…" />
                    </Field>
                  </FormSection>
                )}

                {/* Evidencias */}
                <FormSection title="Evidencias *" sub="Adjunta documentos, imágenes, enlaces o datasets que respalden el avance.">
                  <div className="evi-tabs">
                    <span className="evi-tab is-active"><I.FileText size={12} /> Archivos</span>
                    <span className="evi-tab"><I.Link2 size={12} /> Enlaces URL</span>
                    <span className="evi-tab"><I.FileBarChart size={12} /> Datos estadísticos</span>
                    <span className="evi-tab"><I.Eye size={12} /> Imágenes</span>
                  </div>

                  <div className="filedrop">
                    <div className="filedrop__zone">
                      <I.Upload size={22} />
                      <strong>Arrastra archivos aquí o haz clic para seleccionar</strong>
                      <small>PDF, DOCX, XLSX, PNG, JPG · máx. 25 MB por archivo</small>
                    </div>
                    {files.length > 0 && (
                      <ul className="files">
                        {files.map((f, i) => (
                          <li key={i} className="file">
                            <span className={`file__type file__type--${f.type}`}>{f.type.toUpperCase()}</span>
                            <span>{f.name}</span>
                            <small>· {f.size}</small>
                            <button type="button" className="file__del" aria-label="Quitar"
                              onClick={() => setFiles(fs => fs.filter((_, idx) => idx !== i))}>
                              <I.XCircle size={14} />
                            </button>
                          </li>
                        ))}
                      </ul>
                    )}
                  </div>

                  <div className="link-add">
                    <input type="text" placeholder="https://institucion.gov.py/portal/…" value={newLink}
                      onChange={e => setNewLink(e.target.value)} />
                    <button type="button" className="btn btn--secondary btn--sm" onClick={addLink}>
                      <I.Link2 size={13} /> Agregar enlace
                    </button>
                  </div>
                  {links.length > 0 && (
                    <ul className="files files--links">
                      {links.map((l, i) => (
                        <li key={i} className="file">
                          <I.Link2 size={13} />
                          <span>{l.url}</span>
                          <button type="button" className="file__del" onClick={() => setLinks(ls => ls.filter((_, idx) => idx !== i))}>
                            <I.XCircle size={14} />
                          </button>
                        </li>
                      ))}
                    </ul>
                  )}
                </FormSection>

                {/* Aviso de veracidad */}
                <div className="veracidad">
                  <I.AlertCircle size={14} />
                  <small>
                    Recuerda: la institución es responsable de la veracidad e integridad
                    de la información cargada. La CGR revisa y valida pero la responsabilidad
                    primaria de la información es de quien la carga (regla CGR 14).
                  </small>
                </div>
              </div>

              {/* Aside derecho */}
              <aside className="sheet__rail">
                <div className="rail-card">
                  <div className="rail-card__head"><h4>Ciclo del reporte</h4></div>
                  <div className="rail-card__body">
                    <CicloStepper estadoCiclo={compromiso.estadoCiclo} />
                  </div>
                </div>

                <div className="rail-card">
                  <div className="rail-card__head"><h4>Tu rol en esta recomendación</h4></div>
                  <div className="rail-card__body rail-card__body--tight">
                    <div className="rail-pair"><small>Tu institución</small><strong>Min. de Hacienda · UTA</strong></div>
                    <div className="rail-pair"><small>Rol</small><strong>{compromiso.rol}</strong></div>
                    <div className="rail-pair"><small>Líder asignado</small><strong>{compromiso.lider}</strong></div>
                    <div className="rail-pair"><small>Plazo interno</small><strong className="mono">{compromiso.plazo}</strong></div>
                  </div>
                </div>

                <div className="rail-card rail-card--accent">
                  <div className="rail-card__head"><h4>¿Necesitas ayuda?</h4></div>
                  <div className="rail-card__body">
                    <p>
                      Si tienes dudas sobre el alcance del avance o las evidencias requeridas,
                      consulta directamente a la CGR.
                    </p>
                    <button type="button" className="btn btn--secondary btn--sm">
                      <I.MessageSquare size={13} /> Consultar a la CGR
                    </button>
                  </div>
                </div>
              </aside>
            </>
          )}

          {tab === 'historial' && (
            <div className="sheet__main sheet__main--full">
              <FormSection title={`Historial de avances — ${window.HISTORIAL_AVANCES.length} cargas`} sub="Versiones anteriores cargadas por tu institución para esta recomendación, en orden cronológico inverso.">
                <ol className="history-list">
                  {window.HISTORIAL_AVANCES.map((h, i) => (
                    <li key={i} className={`history-item history-item--${h.estado}`}>
                      <div className="history-item__head">
                        <div className="history-item__date">
                          <strong>{h.fecha}</strong>
                          <small>{h.autor}</small>
                        </div>
                        <span className={`status ${h.estado === 'returned' ? 'is-warn' : h.estado === 'approved' ? 'is-ok' : 'is-info'}`}>
                          {h.estadoLabel}
                        </span>
                      </div>
                      <p className="history-item__desc">{h.descripcion}</p>
                      <div className="history-item__evi">
                        {h.evidencias.map((e, j) => {
                          const isLink = e.startsWith('http');
                          const ext = e.split('.').pop().toLowerCase();
                          return (
                            <span key={j} className="file file--inline">
                              {isLink ? <I.Link2 size={11} /> : <span className={`file__type file__type--${ext}`}>{ext.toUpperCase()}</span>}
                              <span>{isLink ? new URL(e).hostname : e}</span>
                            </span>
                          );
                        })}
                      </div>
                    </li>
                  ))}
                </ol>
              </FormSection>
            </div>
          )}

          {tab === 'evidencias' && (
            <div className="sheet__main sheet__main--full">
              <FormSection title={`Evidencias acumuladas — ${compromiso.evidencias}`} sub="Todos los documentos, enlaces e imágenes adjuntados en los reportes anteriores. Puedes reutilizarlos en este reporte.">
                <div className="evi-grid">
                  {[
                    { name: 'informe_implementacion_v1.pdf', size: '1.8 MB', type: 'pdf', date: '14 abr 2026', from: 'Ciclo 1' },
                    { name: 'matriz_cobertura_2026Q1.xlsx', size: '224 KB', type: 'xlsx', date: '03 may 2026', from: 'Ciclo 2' },
                    { name: 'capturas_modulo.png', size: '912 KB', type: 'png', date: '14 abr 2026', from: 'Ciclo 1' },
                    { name: 'circular_MH_023.pdf', size: '184 KB', type: 'pdf', date: '03 may 2026', from: 'Ciclo 2' },
                    { name: 'reporte_trimestral.pdf', size: '2.1 MB', type: 'pdf', date: '03 may 2026', from: 'Ciclo 2' },
                    { name: 'https://hacienda.gov.py/conflictos-intereses', size: 'URL', type: 'link', date: '14 abr 2026', from: 'Ciclo 1' },
                  ].map((f, i) => (
                    <div key={i} className="evi-card">
                      <div className="evi-card__head">
                        {f.type === 'link'
                          ? <span className="file__type file__type--link"><window.Icons.Link2 size={11} /></span>
                          : <span className={`file__type file__type--${f.type}`}>{f.type.toUpperCase()}</span>
                        }
                        <span className="evi-card__from">{f.from}</span>
                      </div>
                      <div className="evi-card__name">{f.name}</div>
                      <div className="evi-card__meta">{f.size} · {f.date}</div>
                      <button type="button" className="btn btn--ghost btn--sm">Reutilizar</button>
                    </div>
                  ))}
                </div>
              </FormSection>
            </div>
          )}
        </div>

        {/* Footer */}
        <footer className="sheet__foot">
          <div className="sheet__foot-left">
            {isReturned && (
              <span className="muted">
                <I.AlertCircle size={13} /> Atiende los {window.OBSERVACIONES_PUNTUALES.length} puntos antes de enviar. Lo no observado no se reescribe.
              </span>
            )}
            {!isReturned && (
              <span className="muted">
                <I.AlertCircle size={13} /> Tus cambios se guardan automáticamente como borrador.
              </span>
            )}
          </div>
          <div className="sheet__foot-actions">
            <button type="button" className="btn btn--ghost" onClick={onClose}>Cancelar</button>
            <button type="button" className="btn btn--secondary">
              <I.FileText size={14} /> Guardar borrador
            </button>
            <button type="button" className="btn btn--primary" onClick={() => { onSubmit && onSubmit(); onClose(); }}>
              <I.Send size={14} /> {isReturned ? 'Enviar ajuste a CGR' : 'Enviar a CGR para revisión'}
            </button>
          </div>
        </footer>
      </aside>
    </div>
  );
}

// ---------------- Ciclo stepper visual ----------------
function CicloStepper({ estadoCiclo }) {
  const steps = [
    { id: 'draft',     label: 'Borrador',    icon: 'FileText' },
    { id: 'in_review', label: 'En revisión', icon: 'Clock' },
    { id: 'returned',  label: 'Devuelto',    icon: 'AlertCircle', optional: true },
    { id: 'approved',  label: 'Aprobado',    icon: 'CheckCircle2' },
  ];
  const order = { draft: 0, in_review: 1, returned: 2, approved: 3, pending: -1, overdue: -1 };
  const cur = order[estadoCiclo] ?? -1;
  const I = window.Icons;
  return (
    <ul className="ciclo-stepper">
      {steps.map((s, i) => {
        const ICON = I[s.icon];
        const state =
          i < cur ? 'done' :
          i === cur ? 'active' :
          'pending';
        return (
          <li key={s.id} className={`ciclo-stepper__item is-${state}`}>
            <div className="ciclo-stepper__dot">
              {state === 'done' ? <I.CheckCircle2 size={12} /> : <ICON size={12} />}
            </div>
            <div className="ciclo-stepper__label">{s.label}{s.optional ? <small> opc.</small> : null}</div>
          </li>
        );
      })}
    </ul>
  );
}

// Reutilizar helpers (declarados en screen-nueva.jsx pero locales aquí por seguridad)
function FormSection({ title, sub, children }) {
  return (
    <section className="form-section">
      <header className="form-section__head">
        <h3>{title}</h3>
        {sub && <p>{sub}</p>}
      </header>
      <div className="form-section__body">{children}</div>
    </section>
  );
}
function Field({ label, hint, children }) {
  return (
    <label className="field">
      <span className="field__label">{label}</span>
      {children}
      {hint && <span className="field__hint">{hint}</span>}
    </label>
  );
}

Object.assign(window, { CargarAvancePanel });