/* global React, Icon, SOPStore, SOPExport */
/* HistoryPanel — drawer lateral derecho con timeline de versiones del SOP activo.
   Permite: ver lista, restaurar versión, descargar versión específica (JSON/DOCX),
   borrar versión, limpiar historial. */

const { useState: useStateHP, useEffect: useEffectHP, useMemo: useMemoHP } = React;

function fmtRelativeHP(ts) {
  if (!ts) return "";
  const diff = (Date.now() - ts) / 1000;
  if (diff < 5) return "ahora";
  if (diff < 60) return `hace ${Math.round(diff)} s`;
  if (diff < 3600) return `hace ${Math.round(diff / 60)} min`;
  if (diff < 86400) return `hace ${Math.round(diff / 3600)} h`;
  if (diff < 86400 * 7) return `hace ${Math.round(diff / 86400)} d`;
  return new Date(ts).toLocaleDateString();
}

function fmtFullHP(ts) {
  if (!ts) return "";
  const d = new Date(ts);
  return d.toLocaleString();
}

function HistoryPanel({ docId, open, onClose, onRestore, onToast }) {
  const [versions, setVersions] = useStateHP([]);
  const [confirming, setConfirming] = useStateHP(null);  // ts de la versión que pide confirm

  const refresh = () => {
    if (!docId) { setVersions([]); return; }
    const v = window.SOPStore.loadHistory(docId);
    // Más reciente primero
    setVersions([...v].sort((a, b) => b.ts - a.ts));
  };

  useEffectHP(() => { if (open) refresh(); }, [open, docId]);

  // Esc cierra
  useEffectHP(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  if (!open) return null;

  const doRestore = (ts) => {
    const restored = window.SOPStore.restoreVersion(docId, ts);
    if (restored && onRestore) {
      // El doc restaurado debe mantener su id original (no creamos uno nuevo)
      onRestore(restored);
      onToast && onToast("Versión restaurada ✓");
      onClose();
    }
  };

  const doDelete = (ts) => {
    window.SOPStore.deleteVersion(docId, ts);
    setConfirming(null);
    refresh();
    onToast && onToast("Versión eliminada");
  };

  const doDownloadJSON = (v) => {
    window.SOPExport.exportJSON(v.doc);
    onToast && onToast("JSON descargado");
  };
  const doDownloadDOCX = (v) => {
    window.SOPExport.exportDOCX(v.doc);
    onToast && onToast("DOCX descargado");
  };

  const clearAll = () => {
    if (!confirm("¿Borrar TODO el historial de este SOP? No se puede deshacer.")) return;
    window.SOPStore.clearHistoryFor(docId);
    refresh();
    onToast && onToast("Historial limpiado");
  };

  return (
    <div className="hp-backdrop" onClick={onClose}>
      <aside className="hp-drawer" onClick={(e) => e.stopPropagation()}>
        <div className="hp-header">
          <h2 className="hp-title">
            <Icon name="layers" size={16} /> Historial de versiones
          </h2>
          <button className="hp-close" onClick={onClose} title="Cerrar (Esc)">
            <Icon name="x" size={16} />
          </button>
        </div>
        <div className="hp-sub">
          {versions.length === 0
            ? "Aún no hay versiones. Se guarda automáticamente cada vez que la IA o vos editáis el SOP."
            : `${versions.length} versión${versions.length === 1 ? "" : "es"} guardada${versions.length === 1 ? "" : "s"}. La versión actual está marcada como ahora.`}
        </div>

        {versions.length === 0 ? (
          <div className="hp-empty">
            <Icon name="layers" size={32} />
            <p>Sin historial todavía.</p>
            <p className="hp-empty-sub">Cada cambio significativo se guarda como una versión que podés restaurar o descargar.</p>
          </div>
        ) : (
          <ul className="hp-list">
            {versions.map((v, i) => (
              <li key={v.ts} className="hp-item">
                <div className="hp-item-head">
                  <div className="hp-item-meta">
                    <span className="hp-item-when" title={fmtFullHP(v.ts)}>{fmtRelativeHP(v.ts)}</span>
                    <span className="hp-item-sep">·</span>
                    <span className="hp-item-label">{v.label || "Edición"}</span>
                    {i === 0 && <span className="hp-item-badge">Más reciente</span>}
                  </div>
                  <div className="hp-item-doc">
                    <strong>{v.doc?.title || "Sin título"}</strong>
                    <span className="hp-item-meta-sm">
                      {v.doc?.phases?.length || 0} fases · {(v.doc?.phases || []).reduce((n, p) => n + (p.steps?.length || 0), 0)} pasos
                    </span>
                  </div>
                </div>
                <div className="hp-item-actions">
                  <button className="btn btn--sm" onClick={() => doDownloadJSON(v)} title="Descargar JSON">
                    <Icon name="fileDown" size={12} /> JSON
                  </button>
                  <button className="btn btn--sm" onClick={() => doDownloadDOCX(v)} title="Descargar .doc (Word o Google Docs)">
                    <Icon name="fileText" size={12} /> .doc
                  </button>
                  <button className="btn btn--sm btn--primary" onClick={() => doRestore(v.ts)} title="Restaurar esta versión como actual">
                    <Icon name="check" size={12} /> Restaurar
                  </button>
                  {confirming === v.ts ? (
                    <>
                      <button className="btn btn--sm btn--danger" onClick={() => doDelete(v.ts)} title="Confirmar borrado">
                        Confirmar
                      </button>
                      <button className="btn btn--sm" onClick={() => setConfirming(null)} title="Cancelar">
                        Cancelar
                      </button>
                    </>
                  ) : (
                    <button className="btn btn--sm" onClick={() => setConfirming(v.ts)} title="Borrar versión">
                      <Icon name="trash" size={12} />
                    </button>
                  )}
                </div>
              </li>
            ))}
          </ul>
        )}

        {versions.length > 0 && (
          <div className="hp-footer">
            <button className="btn btn--sm" onClick={clearAll} title="Borrar todo el historial">
              <Icon name="trash" size={12} /> Limpiar historial
            </button>
          </div>
        )}
      </aside>
    </div>
  );
}

window.HistoryPanel = HistoryPanel;