/* global React */
// Mis Compromisos Asignados — vista de la Institución Reportante
// HU.2.1 (cargar avance), HU.2.2 (historial), HU.2.3 (devolución para ajuste)

const { useState: useStateM, useMemo: useMemoM } = React;

function MisCompromisosScreen({ user, onOpenDetalle, onCargar }) {
  const I = window.Icons;
  const all = window.MIS_COMPROMISOS;
  const [filter, setFilter] = useStateM('todos');
  const [view, setView] = useStateM('cards'); // cards | tabla

  // Conteos por estado de ciclo
  const counts = useMemoM(() => {
    const c = { todos: all.length, pending: 0, draft: 0, in_review: 0, returned: 0, approved: 0, overdue: 0 };
    all.forEach(x => { c[x.estadoCiclo] = (c[x.estadoCiclo] || 0) + 1; });
    return c;
  }, [all]);

  const filtered = useMemoM(() => {
    if (filter === 'todos') return all;
    return all.filter(c => c.estadoCiclo === filter);
  }, [all, filter]);

  // KPIs derivados
  const total = all.length;
  const cumplidos = all.filter(c => c.estado === 'ok').length;
  const parciales = all.filter(c => c.estado === 'partial').length;
  const noCump = all.filter(c => c.estado === 'bad').length;
  const proximos = all.filter(c => c.d >= 0 && c.d <= 7).length;

  // Hay devoluciones?
  const devoluciones = all.filter(c => c.estadoCiclo === 'returned');

  return (
    <div data-screen-label="02 Mis Compromisos">
      {/* Header */}
      <div className="page-head">
        <div>
          <div className="page-head__eyebrow">{user.org}</div>
          <h1 className="page-head__title">Mis Compromisos Asignados</h1>
          <p className="page-head__sub">
            {total} recomendaciones internacionales bajo responsabilidad de tu institución,
            ordenadas por plazo interno de carga de avances. Para cada una verás el estado
            de cumplimiento vigente, el último reporte enviado, las observaciones de la CGR
            pendientes de atender y el indicador D-7 / D-3 / D-1 cuando el plazo se acerca.
            Carga tu avance con descripción y evidencias (PDF, JPG, PNG, XLSX, DOCX o URLs),
            consulta el historial completo de versiones y atiende las devoluciones recibidas.
          </p>
        </div>
        <div className="page-head__actions">
          <button type="button" className="btn btn--ghost">
            <I.Download size={14} /> Exportar mi cartera
          </button>
          <button type="button" className="btn btn--secondary">
            <I.MessageSquare size={14} /> Consultar a la CGR
          </button>
        </div>
      </div>

      {/* Banner: devolución pendiente (HU.2.3) */}
      {devoluciones.length > 0 && (
        <div className="alert-banner alert-banner--warn">
          <div className="alert-banner__icon"><I.AlertCircle size={20} /></div>
          <div className="alert-banner__body">
            <strong>{devoluciones.length} reporte devuelto para ajuste</strong>
            <p>
              <span className="mono">{devoluciones[0].id}</span> — {devoluciones[0].text}.
              Observación de <strong>{devoluciones[0].observador}</strong> · {devoluciones[0].obsFecha}.
            </p>
          </div>
          <button type="button" className="btn btn--primary" onClick={() => onCargar(devoluciones[0].id)}>
            Atender observación <I.ArrowRight size={14} />
          </button>
        </div>
      )}

      {/* KPI strip */}
      <div className="compkpi-row">
        <div className="compkpi">
          <div className="compkpi__icon"><I.ListChecks size={15} /></div>
          <div className="compkpi__body">
            <div className="compkpi__num">{total}</div>
            <div className="compkpi__label">Compromisos asignados</div>
            <div className="compkpi__sub">{cumplidos} cumpl. · {parciales} parc. · {noCump} no cumpl.</div>
          </div>
        </div>
        <div className="compkpi is-warn">
          <div className="compkpi__icon"><I.Clock size={15} /></div>
          <div className="compkpi__body">
            <div className="compkpi__num">{proximos}</div>
            <div className="compkpi__label">Plazos próximos (D-7)</div>
            <div className="compkpi__sub">Requieren acción esta semana</div>
          </div>
        </div>
        <div className="compkpi is-danger">
          <div className="compkpi__icon"><I.AlertCircle size={15} /></div>
          <div className="compkpi__body">
            <div className="compkpi__num">{counts.returned || 0}</div>
            <div className="compkpi__label">Devueltos para ajuste</div>
            <div className="compkpi__sub">Editar lo observado</div>
          </div>
        </div>
        <div className="compkpi">
          <div className="compkpi__icon"><I.Upload size={15} /></div>
          <div className="compkpi__body">
            <div className="compkpi__num">{counts.in_review || 0}</div>
            <div className="compkpi__label">En revisión por CGR</div>
            <div className="compkpi__sub">Esperando validación</div>
          </div>
        </div>
        <div className="compkpi is-ok">
          <div className="compkpi__icon"><I.CheckCircle2 size={15} /></div>
          <div className="compkpi__body">
            <div className="compkpi__num">{counts.approved || 0}</div>
            <div className="compkpi__label">Aprobados</div>
            <div className="compkpi__sub">Ciclo cerrado por CGR</div>
          </div>
        </div>
      </div>

      {/* Tabs por estado de ciclo */}
      <div className="ciclo-tabs">
        <CicloTab id="todos"     count={counts.todos}            active={filter} onSet={setFilter}>Todos</CicloTab>
        <CicloTab id="pending"   count={counts.pending}   tone="pending"  active={filter} onSet={setFilter}>Pendientes de cargar</CicloTab>
        <CicloTab id="returned"  count={counts.returned}  tone="returned" active={filter} onSet={setFilter}>Devueltos para ajuste</CicloTab>
        <CicloTab id="draft"     count={counts.draft}     tone="draft"    active={filter} onSet={setFilter}>Borradores</CicloTab>
        <CicloTab id="in_review" count={counts.in_review} tone="review"   active={filter} onSet={setFilter}>En revisión</CicloTab>
        <CicloTab id="approved"  count={counts.approved}  tone="approved" active={filter} onSet={setFilter}>Aprobados</CicloTab>
        <CicloTab id="overdue"   count={counts.overdue}   tone="overdue"  active={filter} onSet={setFilter}>Vencidos</CicloTab>
        <div className="ciclo-tabs__spacer"></div>
        <div className="view-toggle">
          <button type="button" className={view === 'cards' ? 'is-active' : ''} onClick={() => setView('cards')}>
            <I.LayoutDashboard size={13} /> Tarjetas
          </button>
          <button type="button" className={view === 'tabla' ? 'is-active' : ''} onClick={() => setView('tabla')}>
            <I.ListChecks size={13} /> Tabla
          </button>
        </div>
      </div>

      {/* Cards / lista */}
      {view === 'cards' ? (
        <div className="mc-grid">
          {filtered.map(c => (
            <MisCompromisoCard key={c.id} c={c} onOpen={onOpenDetalle} onCargar={onCargar} />
          ))}
        </div>
      ) : (
        <div className="card table-card">
          <div className="table-wrap">
            <table className="data-table">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Recomendación</th>
                  <th>Estado del ciclo</th>
                  <th>Vence</th>
                  <th>Estado cumplim.</th>
                  <th>Último avance</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                {filtered.map(c => {
                  const meta = window.cicloMeta(c.estadoCiclo);
                  const dCls = c.d < 0 ? 'is-overdue' : c.d <= 3 ? 'is-soon' : '';
                  return (
                    <tr key={c.id} onClick={() => onOpenDetalle(c.id)}>
                      <td className="mono">{c.id}</td>
                      <td className="cell-title">
                        {c.text}
                        <div className="cell-meta">
                          <span><span className={`mech-tag mech-tag--${c.mecanismo.toLowerCase()}`}>{c.mecanismo}</span> · {c.ronda}</span>
                          <span>· Rol: {c.rol}</span>
                        </div>
                      </td>
                      <td><CicloPill ciclo={c.estadoCiclo} /></td>
                      <td className="mono">
                        {c.plazo}
                        <div className={`cell-sub ${dCls}`}>{c.d < 0 ? `D+${Math.abs(c.d)}` : c.d === 0 ? 'Hoy' : `D-${c.d}`}</div>
                      </td>
                      <td><window.StatusPill estado={c.estado} /></td>
                      <td>{c.ultimoAvance}</td>
                      <td onClick={e => e.stopPropagation()}>
                        <button type="button" className="btn btn--ghost btn--sm" onClick={() => onCargar(c.id)}>
                          {c.estadoCiclo === 'pending' || c.estadoCiclo === 'overdue' ? 'Cargar' : c.estadoCiclo === 'returned' ? 'Atender' : 'Ver'}
                        </button>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      )}
    </div>
  );
}

// ---------------- Card individual ----------------
function MisCompromisoCard({ c, onOpen, onCargar }) {
  const I = window.Icons;
  const meta = window.cicloMeta(c.estadoCiclo);
  const ICON = I[meta.icon];
  const isUrgent = c.d < 0 || c.estadoCiclo === 'returned' || c.estadoCiclo === 'overdue';
  const isSoon = c.d >= 0 && c.d <= 7;
  const dueText =
    c.d < 0 ? `Vencido hace ${Math.abs(c.d)} día${Math.abs(c.d) !== 1 ? 's' : ''}` :
    c.d === 0 ? 'Vence hoy' :
    c.d <= 7 ? `Vence en ${c.d} día${c.d !== 1 ? 's' : ''}` :
    `Vence el ${c.plazo}`;

  const ctaLabel =
    c.estadoCiclo === 'pending' || c.estadoCiclo === 'overdue' ? 'Cargar avance' :
    c.estadoCiclo === 'returned' ? 'Atender observación' :
    c.estadoCiclo === 'draft' ? 'Continuar borrador' :
    c.estadoCiclo === 'in_review' ? 'Ver avance enviado' :
    'Ver detalle';

  return (
    <article className={`mc-card mc-card--${meta.tone}`}>
      <div className="mc-card__top">
        <div className="mc-card__id">
          <span className={`mech-tag mech-tag--${c.mecanismo.toLowerCase()}`}>{c.mecanismo}</span>
          <span className="mono">{c.id}</span>
          <small>· {c.ronda}</small>
        </div>
        <window.StatusPill estado={c.estado} />
      </div>

      <button type="button" className="mc-card__title" onClick={() => onOpen(c.id)}>
        {c.text}
      </button>

      <div className="mc-card__ciclo">
        <span className={`ciclo-pill ciclo-pill--${meta.tone}`}>
          <ICON size={12} />
          {meta.label}
        </span>
        <span className="mc-card__rol">
          <I.Users size={11} /> Rol: <strong>{c.rol}</strong>
          {c.lider !== '—' && c.rol !== 'Líder' && <span className="muted"> · Líder: {c.lider}</span>}
        </span>
      </div>

      {/* Observación destacada si está devuelto */}
      {c.estadoCiclo === 'returned' && c.observacion && (
        <div className="obs-card">
          <div className="obs-card__head">
            <I.AlertCircle size={13} />
            <strong>Observación de la CGR</strong>
            <small>· {c.obsFecha}</small>
          </div>
          <p>{c.observacion}</p>
          <small className="muted">{c.observador}</small>
        </div>
      )}

      <div className="mc-card__meta">
        <div className={`mc-card__date${isUrgent ? ' is-urgent' : isSoon ? ' is-soon' : ''}`}>
          <I.Clock size={12} /> {dueText}
        </div>
        <div className="mc-card__stats">
          <span title="Avances cargados"><I.Upload size={11} /> {c.avances}</span>
          <span title="Evidencias adjuntas"><I.FileText size={11} /> {c.evidencias}</span>
          <span title="Último movimiento" className="muted">· {c.ultimoAvance}</span>
        </div>
      </div>

      <div className="mc-card__actions">
        <button
          type="button"
          className={`btn ${c.estadoCiclo === 'returned' || c.estadoCiclo === 'pending' || c.estadoCiclo === 'overdue' ? 'btn--primary' : 'btn--secondary'} btn--sm`}
          onClick={() => onCargar(c.id)}
        >
          {c.estadoCiclo === 'returned' ? <I.AlertCircle size={13} /> : <I.Upload size={13} />}
          {ctaLabel}
        </button>
        <button type="button" className="cta-link" onClick={() => onOpen(c.id)}>
          Ver historial <I.ArrowRight size={13} />
        </button>
      </div>
    </article>
  );
}

// ---------------- Tab pill (filter) ----------------
function CicloTab({ id, count, tone, active, onSet, children }) {
  return (
    <button
      type="button"
      className={`ciclo-tab${active === id ? ' is-active' : ''}${tone ? ' ciclo-tab--' + tone : ''}`}
      onClick={() => onSet(id)}
    >
      {tone && <span className={`ciclo-tab__dot ciclo-tab__dot--${tone}`}></span>}
      <span>{children}</span>
      {count != null && <span className="ciclo-tab__count">{count}</span>}
    </button>
  );
}

// ---------------- Pill compacta ciclo ----------------
function CicloPill({ ciclo }) {
  const I = window.Icons;
  const meta = window.cicloMeta(ciclo);
  const ICON = I[meta.icon];
  return (
    <span className={`ciclo-pill ciclo-pill--${meta.tone}`}>
      <ICON size={12} /> {meta.label}
    </span>
  );
}

Object.assign(window, { MisCompromisosScreen, CicloPill });