/* global React */
// Sidebar + Topbar + CommandPalette

const { useState, useEffect, useRef, useMemo } = React;

function Sidebar({ modules, activeId, onNavigate, collapsed, onToggle }) {
  const I = window.Icons;
  return (
    <aside className={`sidebar app__sidebar${collapsed ? ' is-collapsed' : ''}`}>
      <div className="sidebar__head">
        <button
          type="button"
          className="sidebar__toggle"
          data-tooltip={collapsed ? 'Expandir menú' : 'Colapsar menú'}
          onClick={onToggle}
          aria-label={collapsed ? 'Expandir menú' : 'Colapsar menú'}
          aria-expanded={!collapsed}
        >
          <span className="nav-item__icon"><I.Menu size={20} /></span>
        </button>
        <span className="sidebar__head-label">Navegación</span>
      </div>

      <nav className="sidebar__nav scroll-hide">
        {modules.map(m => (
          <button
            key={m.id}
            type="button"
            data-tooltip={m.nav}
            className={`nav-item${activeId === m.id ? ' is-active' : ''}`}
            onClick={() => onNavigate(m.id)}
            aria-label={m.nav}
          >
            <span className="nav-item__icon">{React.createElement(I[m.icon], { size: 19 })}</span>
            <span className="nav-item__label">{m.nav}</span>
            {m.badge && (
              <span className="nav-item__badge">{m.badge.count}</span>
            )}
          </button>
        ))}
      </nav>

      <div className="sidebar__footer">
        {collapsed ? (
          <span className="sidebar__footer-version">v.1.0</span>
        ) : (
          <>
            <I.AlertCircle size={14} />
            <span className="sidebar__footer-text">v0.1 · Sinapsis × CGR · BID</span>
          </>
        )}
      </div>
    </aside>
  );
}

function Topbar({ user, roleId, activeModule, onNavigate, onOpenDetalle, onLogout, onUpdateProfile }) {
  const I = window.Icons;
  const [paletteOpen, setPaletteOpen] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const [profileOpen, setProfileOpen] = useState(false);
  const inputRef = useRef(null);

  // Global ⌘K / Ctrl+K
  useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && (e.key === 'k' || e.key === 'K')) {
        e.preventDefault();
        setPaletteOpen(o => !o);
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const openPalette = () => setPaletteOpen(true);

  return (
    <>
      <header className="topbar app__topbar">
        <div className="topbar__brand">
          <img src="assets/cgr-logo.png" alt="Contraloría General de la República · Paraguay" />
        </div>
        <div className="topbar__breadcrumb">
          <span>Compromisos Internacionales</span>
          <span className="sep"><I.ChevronRight size={12} /></span>
          <strong>{activeModule}</strong>
        </div>

        <button
          type="button"
          className="topbar__search topbar__search--trigger"
          onClick={openPalette}
          aria-label="Abrir buscador (⌘K)"
        >
          <span className="topbar__search-icon"><I.Search size={15} /></span>
          <span className="topbar__search-placeholder">Buscar por ID interno, recomendación, institución…</span>
        </button>

        <div className={`profile${menuOpen ? ' is-open' : ''}`}>
          <button
            type="button"
            className="topbar__user"
            onClick={() => setMenuOpen(o => !o)}
            aria-haspopup="true"
            aria-expanded={menuOpen}
          >
            <div className="topbar__user-info">
              <strong>{user.name}</strong>
              <small>{user.role}</small>
            </div>
            <div className="topbar__user-avatar">{user.initials}</div>
            <I.ChevronDown size={14} className="topbar__user-chev" />
          </button>

          {menuOpen && (
            <>
              <div className="profile-backdrop" onClick={() => setMenuOpen(false)} />
              <div className="profile-menu" role="menu">
                <div className="profile-menu__head">
                  <div className="profile-menu__avatar">{user.initials}</div>
                  <div className="profile-menu__id">
                    <strong>{user.name}</strong>
                    <small>{user.role}</small>
                    <small className="profile-menu__email">{user.email}</small>
                  </div>
                </div>
                <div className="profile-menu__list">
                  <div className="profile-menu__org"><I.Building2 size={13} /> {user.org}</div>
                  <div className="profile-menu__sep"></div>
                  <button type="button" className="profile-menu__item" onClick={() => { setMenuOpen(false); setProfileOpen(true); }}>
                    <I.Edit size={15} /> Editar perfil
                  </button>
                  <button type="button" className="profile-menu__item profile-menu__item--danger" onClick={() => { setMenuOpen(false); onLogout && onLogout(); }}>
                    <I.LogOut size={15} /> Cerrar sesión
                  </button>
                </div>
              </div>
            </>
          )}
        </div>
      </header>

      <CommandPalette
        open={paletteOpen}
        onClose={() => setPaletteOpen(false)}
        onNavigate={(id) => { setPaletteOpen(false); onNavigate && onNavigate(id); }}
        onOpenDetalle={(id) => { setPaletteOpen(false); onOpenDetalle && onOpenDetalle(id); }}
      />

      {profileOpen && (
        <ProfileModal
          user={user}
          onClose={() => setProfileOpen(false)}
          onSave={(data) => { onUpdateProfile && onUpdateProfile(roleId, data); setProfileOpen(false); }}
        />
      )}
    </>
  );
}

// ---------------- Modal: editar perfil ----------------
function ProfileModal({ user, onClose, onSave }) {
  const I = window.Icons;
  const [name, setName] = useState(user.name || '');
  const [email, setEmail] = useState(user.email || '');
  const [cargo, setCargo] = useState(user.cargo || user.role || '');
  const [org, setOrg] = useState(user.org || '');
  const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(email.trim());
  const canSave = name.trim().length >= 2 && emailOk;
  return (
    <div className="pm-overlay" role="dialog" aria-modal="true" onMouseDown={onClose}>
      <div className="pm" onMouseDown={e => e.stopPropagation()}>
        <div className="pm__head"><I.Edit size={16} /> Editar perfil</div>
        <div className="pm__body">
          <div className="pm__field">
            <label>Nombre completo</label>
            <input value={name} onChange={e => setName(e.target.value)} placeholder="Nombre y apellido" />
          </div>
          <div className="pm__field">
            <label>Correo institucional</label>
            <input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="nombre@institucion.gov.py" />
          </div>
          <div className="pm__field">
            <label>Cargo o función</label>
            <input value={cargo} onChange={e => setCargo(e.target.value)} placeholder="Ej. Coordinador de seguimiento" />
          </div>
          <div className="pm__field">
            <label>Organización / área</label>
            <input value={org} onChange={e => setOrg(e.target.value)} />
          </div>
        </div>
        <div className="pm__foot">
          <button type="button" className="btn btn--ghost" onClick={onClose}>Cancelar</button>
          <button
            type="button"
            className="btn btn--primary"
            disabled={!canSave}
            onClick={() => onSave({ name: name.trim(), email: email.trim(), cargo: cargo.trim(), org: org.trim() })}
          >
            <I.CheckCircle2 size={14} /> Guardar cambios
          </button>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// CommandPalette — ⌘K search across recomendaciones + módulos
// ============================================================
function CommandPalette({ open, onClose, onNavigate, onOpenDetalle }) {
  const I = window.Icons;
  const [q, setQ] = useState('');
  const [sel, setSel] = useState(0);
  const inputRef = useRef(null);

  useEffect(() => {
    if (open) {
      setQ('');
      setSel(0);
      setTimeout(() => inputRef.current && inputRef.current.focus(), 30);
    }
  }, [open]);

  // Build results
  const { groups, flat } = useMemo(() => {
    const compromisos = window.COMPROMISOS || [];
    const instituciones = window.INSTITUCIONES_CATALOG || [];
    const norm = (s) => (s || '').toString().toLowerCase();
    const query = norm(q.trim());

    const NAV_ITEMS = [
      { id: 'tablero',            label: 'Tablero de Control',       icon: 'LayoutDashboard', kind: 'nav' },
      { id: 'compromisos',        label: 'Compromisos',              icon: 'ListChecks',      kind: 'nav' },
      { id: 'mis_compromisos',    label: 'Mis Compromisos',          icon: 'ListChecks',      kind: 'nav' },
      { id: 'alertas',            label: 'Alertas y Plazos',         icon: 'Bell',            kind: 'nav' },
      { id: 'mensajeria',         label: 'Mensajería',               icon: 'MessageSquare',   kind: 'nav' },
      { id: 'reportes',           label: 'Reportes',                 icon: 'FileBarChart',    kind: 'nav' },
      { id: 'instituciones',      label: 'Instituciones',            icon: 'Building2',       kind: 'nav' },
      { id: 'usuarios',           label: 'Usuarios',                 icon: 'Users',           kind: 'nav' },
      { id: 'portal',             label: 'Portal Público',           icon: 'Globe',           kind: 'nav' },
    ];
    const ACTIONS = [
      { id: 'nueva_recomendacion', label: 'Registrar nueva recomendación', icon: 'PlusCircle', kind: 'action' },
      { id: 'cargar_avance',       label: 'Cargar avance de compromiso',   icon: 'Upload',     kind: 'action' },
    ];

    const matchesNav = NAV_ITEMS.filter(n => !query || norm(n.label).includes(query));
    const matchesAct = ACTIONS.filter(n => !query || norm(n.label).includes(query));

    const matchesRec = compromisos.filter(c => {
      if (!query) return true;
      return norm(c.id).includes(query)
        || norm(c.text).includes(query)
        || norm(c.inst).includes(query)
        || norm(c.mecanismo).includes(query);
    }).slice(0, 8);

    const matchesInst = instituciones.filter(inst => {
      if (!query) return false;
      return norm(inst.nombre).includes(query)
        || norm(inst.sigla).includes(query);
    }).slice(0, 5);

    const groups = [];
    if (matchesRec.length) groups.push({ label: 'Recomendaciones', items: matchesRec.map(c => ({
      kind: 'rec', id: c.id, primary: c.id, secondary: c.text, meta: `${c.mecanismo} · ${c.inst}`, icon: 'FileText'
    })) });
    if (matchesInst.length) groups.push({ label: 'Instituciones', items: matchesInst.map(i => ({
      kind: 'inst', id: i.id, primary: i.sigla, secondary: i.nombre, meta: i.tipo, icon: 'Building2'
    })) });
    if (matchesNav.length) groups.push({ label: 'Ir a', items: matchesNav.map(n => ({
      kind: 'nav', id: n.id, primary: n.label, icon: n.icon
    })) });
    if (matchesAct.length) groups.push({ label: 'Acciones rápidas', items: matchesAct.map(n => ({
      kind: 'action', id: n.id, primary: n.label, icon: n.icon
    })) });

    const flat = groups.flatMap(g => g.items);
    return { groups, flat };
  }, [q]);

  useEffect(() => { setSel(0); }, [q]);

  const runItem = (it) => {
    if (!it) return;
    if (it.kind === 'rec')        onOpenDetalle(it.id);
    else if (it.kind === 'inst')  onNavigate('instituciones');
    else if (it.kind === 'nav')   onNavigate(it.id);
    else if (it.kind === 'action') onNavigate(it.id);
  };

  const onKey = (e) => {
    if (e.key === 'Escape') { e.preventDefault(); onClose(); return; }
    if (e.key === 'ArrowDown') {
      e.preventDefault();
      setSel(s => Math.min(flat.length - 1, s + 1));
    } else if (e.key === 'ArrowUp') {
      e.preventDefault();
      setSel(s => Math.max(0, s - 1));
    } else if (e.key === 'Enter') {
      e.preventDefault();
      runItem(flat[sel]);
    }
  };

  if (!open) return null;

  let idx = -1;

  return (
    <div className="cmdk__backdrop" onMouseDown={onClose}>
      <div className="cmdk" onMouseDown={e => e.stopPropagation()}>
        <div className="cmdk__header">
          <I.Search size={16} />
          <input
            ref={inputRef}
            type="text"
            className="cmdk__input"
            placeholder="Buscar por ID interno, recomendación, institución…"
            value={q}
            onChange={e => setQ(e.target.value)}
            onKeyDown={onKey}
          />
          <kbd className="cmdk__esc">ESC</kbd>
        </div>

        <div className="cmdk__body scroll-hide">
          {groups.length === 0 && (
            <div className="cmdk__empty">
              <I.Search size={18} />
              <span>Sin resultados para “{q}”</span>
            </div>
          )}
          {groups.map(group => (
            <div className="cmdk__group" key={group.label}>
              <div className="cmdk__group-label">{group.label}</div>
              {group.items.map(it => {
                idx += 1;
                const active = idx === sel;
                const localIdx = idx;
                return (
                  <button
                    type="button"
                    key={`${it.kind}-${it.id}`}
                    className={`cmdk__item${active ? ' is-active' : ''}`}
                    onMouseEnter={() => setSel(localIdx)}
                    onClick={() => runItem(it)}
                  >
                    <span className="cmdk__item-icon">
                      {React.createElement(I[it.icon] || I.FileText, { size: 15 })}
                    </span>
                    <span className="cmdk__item-text">
                      <span className="cmdk__item-primary">{it.primary}</span>
                      {it.secondary && <span className="cmdk__item-secondary">{it.secondary}</span>}
                    </span>
                    {it.meta && <span className="cmdk__item-meta">{it.meta}</span>}
                    <span className="cmdk__item-enter">
                      <I.ChevronRight size={13} />
                    </span>
                  </button>
                );
              })}
            </div>
          ))}
        </div>

        <div className="cmdk__footer">
          <span><kbd>↑↓</kbd> navegar</span>
          <span><kbd>↵</kbd> abrir</span>
          <span><kbd>esc</kbd> cerrar</span>
          <span className="cmdk__footer-spacer"></span>
          <span className="cmdk__footer-brand">CGR · Búsqueda global</span>
        </div>
      </div>
    </div>
  );
}

// ---------------- Multi-select reutilizable (filtros con checkboxes) ----------------
function MultiSelect({ options, selected, onChange, placeholder, allLabel }) {
  const I = window.Icons;
  const [open, setOpen] = useState(false);
  const [pos, setPos] = useState(null);
  const btnRef = useRef(null);
  const norm = (options || []).map(o => (typeof o === 'string' ? { value: o, label: o } : o));
  const sel = selected || [];
  const toggle = (v) => onChange(sel.indexOf(v) !== -1 ? sel.filter(x => x !== v) : sel.concat([v]));
  let label = allLabel || placeholder || 'Todas';
  if (sel.length === 1) { const f = norm.find(o => o.value === sel[0]); label = f ? f.label : sel[0]; }
  else if (sel.length > 1) label = sel.length + ' seleccionadas';

  // Posición fija calculada desde el botón → el panel no se recorta dentro del panel de filtros.
  const openMenu = () => {
    const el = btnRef.current;
    if (el) {
      const r = el.getBoundingClientRect();
      const w = Math.max(r.width, 240);
      const left = Math.min(r.left, window.innerWidth - w - 12);
      setPos({ left: Math.max(8, left), top: r.bottom + 4, width: w, maxH: Math.max(160, window.innerHeight - r.bottom - 20) });
    }
    setOpen(true);
  };

  return (
    <div className={`ms${open ? ' is-open' : ''}`}>
      <button ref={btnRef} type="button" className="ms__btn" onClick={() => (open ? setOpen(false) : openMenu())} aria-haspopup="true" aria-expanded={open}>
        <span className="ms__label">{label}</span>
        <I.ChevronDown size={14} />
      </button>
      {open && pos && ReactDOM.createPortal(
        <>
          <div className="ms__backdrop" onClick={() => setOpen(false)} />
          <div className="ms__panel" style={{ position: 'fixed', left: pos.left, top: pos.top, width: pos.width, maxHeight: pos.maxH }}>
            {sel.length > 0 && <button type="button" className="ms__clear" onClick={() => onChange([])}>Limpiar selección ({sel.length})</button>}
            {norm.map(o => (
              <label className="ms__opt" key={o.value}>
                <input type="checkbox" checked={sel.indexOf(o.value) !== -1} onChange={() => toggle(o.value)} />
                <span>{o.label}</span>
              </label>
            ))}
            {norm.length === 0 && <div className="ms__opt" style={{ color: 'var(--cgr-text-muted)' }}>Sin opciones</div>}
          </div>
        </>,
        document.body
      )}
    </div>
  );
}

Object.assign(window, { Sidebar, Topbar, CommandPalette, MultiSelect });