/* global React */

const { useState: useStateD } = React;

function DetalleScreen({ onBack, onOpenTablero }) {
  const I = window.Icons;
  const d = window.COMP_DETAIL;
  const [tab, setTab] = useStateD('info');

  return (
    <div data-screen-label="04 Detalle de Compromiso">
      {/* Breadcrumb / back */}
      <div className="detalle-back">
        <button type="button" className="detalle-back__link" onClick={onOpenTablero}>
          <I.ChevronRight size={12} style={{ transform: 'rotate(180deg)' }} /> Volver al tablero
        </button>
        <div className="detalle-back__crumb">
          <span>Compromisos</span>
          <I.ChevronRight size={12} />
          <span>MESICIC · Ronda V</span>
          <I.ChevronRight size={12} />
          <strong className="mono">{d.id}</strong>
        </div>
      </div>

      {/* Hero card */}
      <div className="detalle-hero">
        <div className="detalle-hero__head">
          <div className="detalle-hero__ids">
            <span className="id-block">
              <small>ID interno</small>
              <strong className="mono">{d.id}</strong>
            </span>
            <span className="id-block">
              <small>ID internacional</small>
              <strong className="mono id-block__intl">{d.idInternacional}</strong>
            </span>
            <span className="id-block">
              <small>Mecanismo · Ronda</small>
              <strong>
                <span className={`mech-tag mech-tag--${d.mecanismo.toLowerCase()}`}>{d.mecanismo}</span>
                <span style={{ marginLeft: 8 }}>{d.ronda}</span>
              </strong>
            </span>
          </div>
          <div className="detalle-hero__status">
            <window.StatusPill estado={d.estado} />
            <button type="button" className="btn btn--ghost btn--sm">
              <I.ChevronDown size={12} /> Cambiar estado
            </button>
          </div>
        </div>

        <h1 className="detalle-hero__title">
          Fortalecimiento del régimen de declaración jurada de funcionarios públicos
        </h1>

        <div className="detalle-hero__meta">
          <span><I.Calendar size={13} /> Recibida {d.recibida}</span>
          <span><I.Clock size={13} /> Vence {d.vence}</span>
          <span><I.Building2 size={13} /> 3 instituciones asignadas</span>
          <span><I.Link2 size={13} /> {d.vinculadas} vinculaciones cruzadas</span>
        </div>

        <div className="detalle-hero__actions">
          <button type="button" className="btn btn--primary">
            <I.MessageSquare size={14} /> Enviar mensaje a SENAC
          </button>
          <button type="button" className="btn btn--secondary">
            <I.AlertCircle size={14} /> Devolver reporte para ajuste
          </button>
          <button type="button" className="btn btn--ghost">
            <I.Download size={14} /> Exportar ficha (PDF)
          </button>
        </div>
      </div>

      {/* Tabs */}
      <div className="tabs" role="tablist">
        <Tab id="info"      label="Información"          icon="FileText"      active={tab} onSel={setTab} />
        <Tab id="asign"     label="Asignaciones"         icon="Building2"     active={tab} onSel={setTab} badge="3" />
        <Tab id="hist"      label="Historial de avances" icon="Clock"         active={tab} onSel={setTab} badge="7" />
        <Tab id="msg"       label="Mensajería"           icon="MessageSquare" active={tab} onSel={setTab} badge="2" />
        <Tab id="vinc"      label="Vinculaciones"        icon="Link2"         active={tab} onSel={setTab} badge="3" />
      </div>

      {/* Two-column body */}
      <div className="detalle-body">
        <div className="detalle-main">
          {tab === 'info'  && <TabInfo d={d} />}
          {tab === 'asign' && <TabAsignaciones d={d} />}
          {tab === 'hist'  && <TabHistorial d={d} />}
          {tab === 'msg'   && <TabMensajeria d={d} />}
          {tab === 'vinc'  && <TabVinculadas d={d} />}
        </div>

        <aside className="detalle-rail">
          <div className="rail-card">
            <div className="rail-card__head">
              <h4>Resumen del ciclo</h4>
            </div>
            <div className="rail-card__body">
              <div className="rail-stat">
                <small>Ciclos de revisión</small>
                <strong>3</strong>
              </div>
              <div className="rail-stat">
                <small>Devoluciones para ajuste</small>
                <strong>1</strong>
              </div>
              <div className="rail-stat">
                <small>Evidencias adjuntas</small>
                <strong>11</strong>
              </div>
              <div className="rail-stat">
                <small>Último avance</small>
                <strong>Hoy · 10:42</strong>
              </div>
            </div>
          </div>

          <div className="rail-card">
            <div className="rail-card__head">
              <h4>Clasificación</h4>
            </div>
            <div className="rail-card__body rail-card__body--tight">
              <div className="rail-pair"><small>Eje temático</small><strong>{d.eje}</strong></div>
              <div className="rail-pair"><small>Tipo</small><strong>{d.tipo}</strong></div>
              <div className="rail-pair"><small>Evaluación de origen</small><strong>{d.evaluacion}</strong></div>
            </div>
          </div>

          <div className="rail-card">
            <div className="rail-card__head">
              <h4>Próximas alertas</h4>
            </div>
            <div className="rail-card__body rail-card__body--tight">
              <div className="rail-alert">
                <span className="deadline__count">D-7</span>
                <div>
                  <strong>05 jun 2026</strong>
                  <small>Aviso a SENAC + CGR</small>
                </div>
              </div>
              <div className="rail-alert">
                <span className="deadline__count is-soon">D-3</span>
                <div>
                  <strong>09 jun 2026</strong>
                  <small>Aviso de urgencia · escalamiento</small>
                </div>
              </div>
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
}

function Tab({ id, label, icon, active, onSel, badge }) {
  const I = window.Icons;
  return (
    <button
      type="button"
      role="tab"
      aria-selected={active === id}
      className={`tab${active === id ? ' is-active' : ''}`}
      onClick={() => onSel(id)}
    >
      {React.createElement(I[icon], { size: 14 })}
      <span>{label}</span>
      {badge && <span className="tab__badge">{badge}</span>}
    </button>
  );
}

// ---------- Tab content ----------
function TabInfo({ d }) {
  return (
    <>
      <div className="section">
        <div className="section__label">Texto completo de la recomendación</div>
        <div className="prose">
          {d.recomendacion}
        </div>
      </div>

      <div className="section">
        <div className="section__label">Justificación del estado parcial</div>
        <div className="prose">
          {d.medidasJustificacion}
        </div>
        <div className="evidence-meta">
          Última edición por <strong>M. Acosta (CGR)</strong> · 14 may 2026 ·
          <button type="button" className="link"> Ver historial de cambios</button>
        </div>
      </div>

      <div className="section">
        <div className="section__label">Reporte estructura MESICIC</div>
        <div className="formatted-report">
          <div className="formatted-report__row">
            <div className="formatted-report__head">Recomendación</div>
            <div className="formatted-report__cell">Adoptar las medidas pertinentes para que el sistema de declaración jurada de bienes…</div>
          </div>
          <div className="formatted-report__row">
            <div className="formatted-report__head">Medidas adoptadas</div>
            <div className="formatted-report__cell">Implementación de DJB-e con cobertura del 76% (2025). Módulo de verificación cruzada con SET en desarrollo (entrega Q3 2026). Marco normativo: Decreto 4567/25 y Resolución CGR 089/25.</div>
          </div>
          <div className="formatted-report__row">
            <div className="formatted-report__head">Resultados</div>
            <div className="formatted-report__cell">217.000 declaraciones presentadas electrónicamente · 32 verificaciones sustantivas iniciadas · 4 procesos administrativos derivados a Fiscalía.</div>
          </div>
        </div>
      </div>
    </>
  );
}

function TabAsignaciones({ d }) {
  return (
    <div className="section">
      <div className="section__label">Instituciones responsables — {d.asignaciones.length}</div>
      <div className="assign-list">
        {d.asignaciones.map((a, i) => (
          <div className="assign" key={i}>
            <div className="assign__inst">
              <strong>{a.inst}</strong>
              <small>{a.contacto}</small>
            </div>
            <div className="assign__role"><small>Rol</small><strong>{a.rol}</strong></div>
            <div className="assign__plazo"><small>Plazo interno</small><strong className="mono">{a.plazo}</strong></div>
            <div className="assign__status"><window.StatusPill estado={a.estado} /></div>
          </div>
        ))}
      </div>
      <div className="section__cta">
        <button type="button" className="btn btn--secondary"><span style={{fontSize:18, lineHeight:'1', marginRight:4}}>+</span> Asignar otra institución</button>
      </div>
    </div>
  );
}

function TabHistorial({ d }) {
  const I = window.Icons;
  const iconFor = t => {
    if (t === 'submitted') return { icon: 'Upload',        tone: 'default', label: 'Avance cargado' };
    if (t === 'returned')  return { icon: 'AlertCircle',   tone: 'warn',    label: 'Devolución para ajuste' };
    if (t === 'state')     return { icon: 'CheckCircle2',  tone: 'ok',      label: 'Cambio de estado' };
    if (t === 'message')   return { icon: 'MessageSquare', tone: 'default', label: 'Mensaje enviado' };
    if (t === 'assigned')  return { icon: 'Users',         tone: 'default', label: 'Asignación' };
    if (t === 'created')   return { icon: 'PlusCircle',    tone: 'default', label: 'Recomendación creada' };
    return { icon: 'FileText', tone: 'default', label: 'Acción' };
  };
  return (
    <div className="section">
      <div className="section__label">Historial completo — {d.historial.length} acciones</div>
      <ol className="detalle-timeline">
        {d.historial.map((h, i) => {
          const m = iconFor(h.type);
          return (
            <li className={`detalle-timeline__item is-${m.tone}`} key={i}>
              <div className="detalle-timeline__dot">
                {React.createElement(I[m.icon], { size: 13 })}
              </div>
              <div className="detalle-timeline__body">
                <div className="detalle-timeline__top">
                  <span className="tag-action">{m.label}</span>
                  <span className="detalle-timeline__date mono">{h.date}</span>
                </div>
                <div className="detalle-timeline__msg">
                  <strong>{h.actor}</strong> {h.body}
                </div>
                {h.detail && <div className="detalle-timeline__detail">{h.detail}</div>}
              </div>
            </li>
          );
        })}
      </ol>
    </div>
  );
}

function TabMensajeria({ d }) {
  const I = window.Icons;
  return (
    <div className="section">
      <div className="section__label">Mensajes vinculados a este compromiso · 2 sin leer</div>
      <div className="msg-thread">
        <div className="msg msg--in">
          <div className="msg__avatar">RM</div>
          <div className="msg__body">
            <div className="msg__head">
              <strong>R. Mendoza (SENAC)</strong>
              <span className="msg__date">Hoy · 10:48</span>
            </div>
            <p>Cargamos el tercer ciclo con la matriz de conciliación solicitada. Adjuntamos también la tabla de cobertura por dependencia. Quedamos atentos a observaciones.</p>
            <div className="msg__attach">
              <I.FileText size={13} /> matriz_conciliacion_2026Q1.xlsx · 412 KB
            </div>
          </div>
        </div>
        <div className="msg msg--out">
          <div className="msg__body">
            <div className="msg__head">
              <strong>C. Benítez (CGR)</strong>
              <span className="msg__date">Ayer · 16:25</span>
            </div>
            <p>Devolvemos el segundo ciclo. La principal observación es la conciliación del 2do trimestre 2025 — necesitamos la matriz que cruza cobertura declarada con base SET.</p>
          </div>
          <div className="msg__avatar">CB</div>
        </div>
      </div>
      <div className="msg-composer">
        <textarea placeholder="Escribir mensaje a las instituciones asignadas…" rows={3}></textarea>
        <div className="msg-composer__foot">
          <button type="button" className="btn btn--ghost"><I.FileText size={14} /> Adjuntar</button>
          <button type="button" className="btn btn--primary"><I.Send size={14} /> Enviar mensaje</button>
        </div>
      </div>
    </div>
  );
}

function TabVinculadas({ d }) {
  const I = window.Icons;
  return (
    <div className="section">
      <div className="section__label">Recomendaciones vinculadas — {d.vinculadasItems.length}</div>
      <div className="vinc-list">
        {d.vinculadasItems.map(v => (
          <button type="button" className="vinc" key={v.id}>
            <span className={`mech-tag mech-tag--${v.mecanismo.toLowerCase()}`}>{v.mecanismo}</span>
            <span className="mono vinc__id">{v.id}</span>
            <span className="vinc__text">{v.text}</span>
            <window.StatusPill estado={v.estado} />
            <I.ChevronRight size={14} />
          </button>
        ))}
      </div>
      <div className="section__cta">
        <button type="button" className="btn btn--secondary"><I.Link2 size={14} /> Vincular otra recomendación</button>
      </div>
    </div>
  );
}

Object.assign(window, { DetalleScreen });