/* global React */
// Catálogos del sistema (HU súper admin) — gestión de listas maestras:
// categorías (ejes temáticos), tipos de medida y niveles de prioridad.
// Solo visible para el rol 'superadmin' (ver modules-config.jsx).
// Persisten en localStorage (cat_ejes / cat_tipos / cat_prioridades) y se leen
// en vivo desde window.cgrData.* en los formularios de la plataforma.

const { useState: useStateCat, useEffect: useEffectCat } = React;

function prioTone(p) {
  const s = (p || '').toLowerCase();
  if (s.indexOf('alta') !== -1 || s.indexOf('crít') !== -1 || s.indexOf('crit') !== -1) return 'high';
  if (s.indexOf('media') !== -1) return 'mid';
  if (s.indexOf('baja') !== -1) return 'low';
  return 'none';
}

// Chevron para los botones subir/bajar.
function CatChev({ dir }) {
  return (
    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"
      style={{ transform: dir === 'up' ? 'rotate(180deg)' : 'none' }}>
      <path d="M6 9l6 6 6-6" />
    </svg>
  );
}
// Intercambia dos elementos del arreglo y devuelve una copia nueva.
function moveItem(list, i, dir) {
  const j = i + dir;
  if (j < 0 || j >= list.length) return list;
  const c = list.slice();
  const t = c[i]; c[i] = c[j]; c[j] = t;
  return c;
}
// Control compacto de reordenar (subir/bajar).
function ReorderCtl({ i, total, onMove }) {
  return (
    <span className="cat-move">
      <button type="button" className="cat-move__b" title="Subir" aria-label="Subir" disabled={i === 0} onClick={() => onMove(i, -1)}><CatChev dir="up" /></button>
      <button type="button" className="cat-move__b" title="Bajar" aria-label="Bajar" disabled={i === total - 1} onClick={() => onMove(i, 1)}><CatChev dir="down" /></button>
    </span>
  );
}

// ---------- Catálogo de cadenas (ejes, prioridades) ----------
function StringCatalog({ titulo, sub, icon, items, setItems, placeholder, toneOf }) {
  const I = window.Icons;
  const Icon = I[icon] || I.ListChecks;
  const [nuevo, setNuevo] = useStateCat('');
  const [editIdx, setEditIdx] = useStateCat(-1);
  const [editVal, setEditVal] = useStateCat('');

  const dupe = (v, skip) => items.some((x, i) => i !== skip && x.toLowerCase() === v.toLowerCase());

  const add = () => {
    const v = nuevo.trim();
    if (!v || dupe(v, -1)) return;
    setItems(list => [...list, v]);
    setNuevo('');
  };
  const startEdit = (i) => { setEditIdx(i); setEditVal(items[i]); };
  const saveEdit = () => {
    const v = editVal.trim();
    if (!v || dupe(v, editIdx)) { setEditIdx(-1); return; }
    setItems(list => list.map((x, idx) => idx === editIdx ? v : x));
    setEditIdx(-1); setEditVal('');
  };
  const del = (i) => setItems(list => list.filter((_, idx) => idx !== i));
  const move = (i, dir) => setItems(list => moveItem(list, i, dir));
  const sortAZ = () => setItems(list => list.slice().sort((a, b) => String(a).localeCompare(String(b), 'es', { sensitivity: 'base' })));

  return (
    <section className="cat-card">
      <div className="cat-card__head">
        <Icon size={16} />
        <h3>{titulo}</h3>
        <span className="cat-card__count">{items.length}</span>
        <button type="button" className="cat-az" title="Ordenar alfabéticamente" onClick={sortAZ} disabled={items.length < 2}>A–Z</button>
      </div>
      {sub && <p className="cat-card__sub">{sub}</p>}

      <ul className="cat-list">
        {items.map((it, i) => (
          <li className="cat-row" key={i}>
            {editIdx === i ? (
              <>
                <input
                  className="nip-input" value={editVal} autoFocus
                  onChange={e => setEditVal(e.target.value)}
                  onKeyDown={e => { if (e.key === 'Enter') saveEdit(); if (e.key === 'Escape') setEditIdx(-1); }}
                />
                <button type="button" className="icon-btn icon-btn--ok" title="Guardar" onClick={saveEdit}><I.CheckCircle2 size={15} /></button>
                <button type="button" className="icon-btn" title="Cancelar" onClick={() => setEditIdx(-1)}><I.XCircle size={15} /></button>
              </>
            ) : (
              <>
                {toneOf && <span className={`cat-dot cat-dot--${toneOf(it)}`} />}
                <span className="cat-row__text">{it}</span>
                <ReorderCtl i={i} total={items.length} onMove={move} />
                <button type="button" className="icon-btn" title="Editar" onClick={() => startEdit(i)}><I.Edit size={14} /></button>
                <button type="button" className="icon-btn icon-btn--danger" title="Eliminar" onClick={() => del(i)}><I.Trash2 size={14} /></button>
              </>
            )}
          </li>
        ))}
        {items.length === 0 && <li className="cat-empty">Sin elementos. Agrega el primero abajo.</li>}
      </ul>

      <div className="cat-add">
        <input
          className="nip-input" placeholder={placeholder} value={nuevo}
          onChange={e => setNuevo(e.target.value)}
          onKeyDown={e => { if (e.key === 'Enter') add(); }}
        />
        <button type="button" className="btn btn--primary btn--sm" onClick={add} disabled={!nuevo.trim()}>
          <I.Plus size={14} /> Agregar
        </button>
      </div>
    </section>
  );
}

// ---------- Catálogo de tipos de medida (nombre + descripción) ----------
function TipoCatalog({ items, setItems }) {
  const I = window.Icons;
  const [label, setLabel] = useStateCat('');
  const [desc, setDesc] = useStateCat('');
  const [editId, setEditId] = useStateCat(null);
  const [eLabel, setELabel] = useStateCat('');
  const [eDesc, setEDesc] = useStateCat('');

  const add = () => {
    const l = label.trim();
    if (!l) return;
    const id = 'tm-' + Date.now().toString(36);
    setItems(list => [...list, { id, label: l, desc: desc.trim() }]);
    setLabel(''); setDesc('');
  };
  const startEdit = (it) => { setEditId(it.id); setELabel(it.label); setEDesc(it.desc || ''); };
  const saveEdit = () => {
    setItems(list => list.map(x => x.id === editId ? { ...x, label: eLabel.trim() || x.label, desc: eDesc.trim() } : x));
    setEditId(null);
  };
  const del = (id) => setItems(list => list.filter(x => x.id !== id));
  const move = (i, dir) => setItems(list => moveItem(list, i, dir));
  const sortAZ = () => setItems(list => list.slice().sort((a, b) => String(a.label).localeCompare(String(b.label), 'es', { sensitivity: 'base' })));

  return (
    <section className="cat-card">
      <div className="cat-card__head">
        <I.ListChecks size={16} />
        <h3>Tipos de medida</h3>
        <span className="cat-card__count">{items.length}</span>
        <button type="button" className="cat-az" title="Ordenar alfabéticamente" onClick={sortAZ} disabled={items.length < 2}>A–Z</button>
      </div>
      <p className="cat-card__sub">Naturaleza de la acción que exige una recomendación.</p>

      <ul className="cat-list">
        {items.map((it, i) => (
          <li className={`cat-row${editId === it.id ? ' cat-row--col' : ''}`} key={it.id}>
            {editId === it.id ? (
              <div className="cat-edit2">
                <input className="nip-input" value={eLabel} onChange={e => setELabel(e.target.value)} placeholder="Nombre" autoFocus />
                <input className="nip-input" value={eDesc} onChange={e => setEDesc(e.target.value)} placeholder="Descripción (opcional)" />
                <div className="cat-edit2__actions">
                  <button type="button" className="icon-btn icon-btn--ok" title="Guardar" onClick={saveEdit}><I.CheckCircle2 size={15} /></button>
                  <button type="button" className="icon-btn" title="Cancelar" onClick={() => setEditId(null)}><I.XCircle size={15} /></button>
                </div>
              </div>
            ) : (
              <>
                <div className="cat-row__main">
                  <strong>{it.label}</strong>
                  {it.desc && <small>{it.desc}</small>}
                </div>
                <ReorderCtl i={i} total={items.length} onMove={move} />
                <button type="button" className="icon-btn" title="Editar" onClick={() => startEdit(it)}><I.Edit size={14} /></button>
                <button type="button" className="icon-btn icon-btn--danger" title="Eliminar" onClick={() => del(it.id)}><I.Trash2 size={14} /></button>
              </>
            )}
          </li>
        ))}
        {items.length === 0 && <li className="cat-empty">Sin tipos de medida. Agrega el primero abajo.</li>}
      </ul>

      <div className="cat-add cat-add--col">
        <input className="nip-input" placeholder="Nuevo tipo (nombre)" value={label} onChange={e => setLabel(e.target.value)} />
        <input className="nip-input" placeholder="Descripción (opcional)" value={desc} onChange={e => setDesc(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') add(); }} />
        <button type="button" className="btn btn--primary btn--sm" onClick={add} disabled={!label.trim()}>
          <I.Plus size={14} /> Agregar tipo
        </button>
      </div>
    </section>
  );
}

// ---------- Catálogo de mecanismos (sigla + organismo + descripción + color) ----------
function MecCatalog({ items, setItems }) {
  const I = window.Icons;
  const [label, setLabel] = useStateCat('');
  const [org, setOrg] = useStateCat('');
  const [desc, setDesc] = useStateCat('');
  const [color, setColor] = useStateCat('#2d4a8a');
  const [editId, setEditId] = useStateCat(null);
  const [ev, setEv] = useStateCat({});

  const add = () => {
    const l = label.trim();
    if (!l || items.some(m => (m.label || '').toLowerCase() === l.toLowerCase())) return;
    const id = l.toUpperCase().replace(/\s+/g, '-');
    setItems(list => [...list, { id, label: l, org: org.trim(), desc: desc.trim(), color }]);
    setLabel(''); setOrg(''); setDesc(''); setColor('#2d4a8a');
  };
  const startEdit = (m) => { setEditId(m.id); setEv({ label: m.label, org: m.org || '', desc: m.desc || '', color: m.color || '#2d4a8a' }); };
  const saveEdit = () => {
    setItems(list => list.map(m => m.id === editId
      ? { ...m, label: (ev.label || '').trim() || m.label, org: (ev.org || '').trim(), desc: (ev.desc || '').trim(), color: ev.color }
      : m));
    setEditId(null);
  };
  const del = (id) => setItems(list => list.filter(m => m.id !== id));
  const move = (i, dir) => setItems(list => moveItem(list, i, dir));
  const sortAZ = () => setItems(list => list.slice().sort((a, b) => String(a.label).localeCompare(String(b.label), 'es', { sensitivity: 'base' })));

  return (
    <section className="cat-card cat-card--wide">
      <div className="cat-card__head">
        <I.Globe size={16} />
        <h3>Mecanismos de origen</h3>
        <span className="cat-card__count">{items.length}</span>
        <button type="button" className="cat-az" title="Ordenar alfabéticamente" onClick={sortAZ} disabled={items.length < 2}>A–Z</button>
      </div>
      <p className="cat-card__sub">Organismos y convenciones que emiten recomendaciones. El color elegido se usa en la “burbuja” del mecanismo en todo el sistema.</p>

      <ul className="cat-list">
        {items.map((m, i) => (
          <li className="cat-row cat-row--col" key={m.id}>
            {editId === m.id ? (
              <div className="cat-mec__edit">
                <input className="nip-input" value={ev.label} onChange={e => setEv(x => ({ ...x, label: e.target.value }))} placeholder="Sigla (ej. GAFI)" />
                <input className="nip-input" value={ev.org} onChange={e => setEv(x => ({ ...x, org: e.target.value }))} placeholder="Organismo (ej. OEA)" />
                <input className="nip-input" value={ev.desc} onChange={e => setEv(x => ({ ...x, desc: e.target.value }))} placeholder="Descripción" />
                <label className="cat-color" title="Color de la burbuja"><input type="color" value={ev.color} onChange={e => setEv(x => ({ ...x, color: e.target.value }))} /></label>
                <button type="button" className="icon-btn icon-btn--ok" title="Guardar" onClick={saveEdit}><I.CheckCircle2 size={15} /></button>
                <button type="button" className="icon-btn" title="Cancelar" onClick={() => setEditId(null)}><I.XCircle size={15} /></button>
              </div>
            ) : (
              <div className="cat-mec__row">
                <span className="mech-tag" style={{ background: (m.color || '#2d4a8a') + '22', color: m.color || '#2d4a8a' }}>{m.label}</span>
                <div className="cat-mec__info">
                  <strong>{m.org || '—'}</strong>
                  {m.desc && <small>{m.desc}</small>}
                </div>
                <ReorderCtl i={i} total={items.length} onMove={move} />
                <button type="button" className="icon-btn" title="Editar" onClick={() => startEdit(m)}><I.Edit size={14} /></button>
                <button type="button" className="icon-btn icon-btn--danger" title="Eliminar" onClick={() => del(m.id)}><I.Trash2 size={14} /></button>
              </div>
            )}
          </li>
        ))}
        {items.length === 0 && <li className="cat-empty">Sin mecanismos. Agrega el primero abajo.</li>}
      </ul>

      <div className="cat-mec__add">
        <input className="nip-input" placeholder="Sigla (ej. GAFI)" value={label} onChange={e => setLabel(e.target.value)} />
        <input className="nip-input" placeholder="Organismo" value={org} onChange={e => setOrg(e.target.value)} />
        <input className="nip-input" placeholder="Descripción (opcional)" value={desc} onChange={e => setDesc(e.target.value)} />
        <label className="cat-color" title="Color de la burbuja"><input type="color" value={color} onChange={e => setColor(e.target.value)} /></label>
        <button type="button" className="btn btn--primary btn--sm" onClick={add} disabled={!label.trim()}><I.Plus size={14} /> Agregar</button>
      </div>
    </section>
  );
}

function CatalogosScreen() {
  const I = window.Icons;
  const [ejes, setEjes] = window.usePersistentState('cat_ejes', () => (window.EJES_TEMATICOS || []).slice());
  const [tiposInst, setTiposInst] = window.usePersistentState('cat_tipos_inst', () => (window.TIPOS_INSTITUCION || []).slice());
  const [tipos, setTipos] = window.usePersistentState('cat_tipos', () => (window.TIPOS_MEDIDA || []).map(t => ({ ...t })));
  const [prioridades, setPrioridades] = window.usePersistentState('cat_prioridades', () => (window.PRIORIDADES || []).slice());
  const [mecanismos, setMecanismos] = window.usePersistentState('cat_mecanismos', () => (window.MECANISMOS_CAT || []).map(m => ({ ...m })));

  // Al cambiar los mecanismos, re-aplicar sus colores en todo el sistema.
  useEffectCat(() => { if (window.cgrData) window.cgrData.applyMechStyles(mecanismos); }, [mecanismos]);

  return (
    <div data-screen-label="09 Catálogos">
      <div className="page-head">
        <div>
          <div className="page-head__eyebrow">Configuración · Súper Administrador</div>
          <h1 className="page-head__title">Catálogos del sistema</h1>
          <p className="page-head__sub">
            Administra las listas maestras que alimentan los formularios de la plataforma.
            Los cambios se reflejan al instante al registrar o clasificar recomendaciones.
          </p>
        </div>
        <div className="page-head__actions">
          <span className="cat-badge"><I.Shield size={13} /> Solo Súper Administrador</span>
        </div>
      </div>

      <div className="cat-grid">
        <StringCatalog
          titulo="Categorías (ejes temáticos)"
          icon="Sparkles"
          sub="Agrupan las recomendaciones por área de la política anticorrupción."
          items={ejes}
          setItems={setEjes}
          placeholder="Nueva categoría…"
        />
        <StringCatalog
          titulo="Tipos de institución"
          icon="Building2"
          sub="Clasifican a las instituciones del catálogo (ministerio, secretaría, etc.)."
          items={tiposInst}
          setItems={setTiposInst}
          placeholder="Nuevo tipo de institución…"
        />
        <TipoCatalog items={tipos} setItems={setTipos} />
        <StringCatalog
          titulo="Niveles de prioridad"
          icon="AlertCircle"
          sub="Define el nivel de seguimiento que aplica la CGR a cada compromiso."
          items={prioridades}
          setItems={setPrioridades}
          placeholder="Nuevo nivel (ej. Crítica)…"
          toneOf={prioTone}
        />
      </div>

      <MecCatalog items={mecanismos} setItems={setMecanismos} />
    </div>
  );
}

Object.assign(window, { CatalogosScreen });