// Layout — sidebar + topbar. LIGHT enterprise theme.
// Branded: SOLUCERSA (operator) running SOFIA MCP Recruitment (product).

const { useState: usL, useEffect: ueL, useRef: urL } = React;

const NAV_GROUPS = [
  {
    title: 'Workspace',
    items: [
      { id: 'dashboard',    label: 'Dashboard',           icon: 'Dashboard' },
      { id: 'requisitions', label: 'Vacantes',            icon: 'Briefcase', badge: 7 },
      { id: 'candidates',   label: 'Pool de candidatos',  icon: 'Users', badge: 1248 },
    ],
  },
  {
    title: 'SOFIA AI Tools',
    items: [
      { id: 'screening',    label: 'AI Screening',          icon: 'PhoneCall', subText: 'Call' },
      { id: 'interviews',   label: 'Entrevistas & Outreach', icon: 'Message', subText: 'Chat' },
    ],
  },
  {
    title: 'Operaciones',
    items: [
      { id: 'clients',  label: 'Clientes',            icon: 'Building' },
      { id: 'reports',  label: 'Reportes & Analítica', icon: 'Bar' },
      { id: 'settings', label: 'Configuración',       icon: 'Settings' },
    ],
  },
];

function Sidebar({ route, onNavigate }) {
  return (
    <aside className="w-[252px] shrink-0 bg-white border-r border-line flex flex-col h-screen sticky top-0">
      {/* Brand block */}
      <div className="px-5 py-5">
        <div className="flex items-center gap-2.5">
          <Icon.SolucersaMark size={28} />
          <div className="flex-1 min-w-0">
            <div className="text-[15px] font-semibold leading-none text-ink-900 tracking-tight">SOLUCERSA</div>
            <div className="text-[10px] text-ink-500 mt-1 uppercase tracking-[0.16em]">HR Operations</div>
          </div>
        </div>
        <div className="mt-3 flex items-center gap-2 px-2.5 py-2 rounded-lg bg-brand-50/60 border border-brand-100">
          <Icon.SofiaMark size={18} />
          <div className="flex-1 min-w-0">
            <div className="text-[11px] font-semibold text-ink-900">SOFIA MCP</div>
            <div className="text-[10px] text-ink-500 leading-tight">Recruitment & Selection</div>
          </div>
        </div>
      </div>

      {/* Nav */}
      <nav className="flex-1 overflow-y-auto px-3 space-y-5">
        {NAV_GROUPS.map((g) => (
          <div key={g.title}>
            <div className="text-[10px] uppercase tracking-[0.18em] text-ink-500 px-3 mb-1.5 font-medium">{g.title}</div>
            <div className="space-y-0.5">
              {g.items.map((item) => {
                const active = route === item.id;
                const I = Icon[item.icon];
                return (
                  <button
                    key={item.id}
                    onClick={() => onNavigate(item.id)}
                    className={`w-full group flex items-center gap-2.5 px-3 h-9 rounded-lg text-sm transition-colors relative ${
                      active
                        ? 'bg-brand-50 text-brand-700 font-medium border border-brand-100'
                        : 'text-ink-700 hover:bg-ink-50 hover:text-ink-900 border border-transparent'
                    }`}
                  >
                    {active && (
                      <span className="absolute left-0 top-2 bottom-2 w-0.5 rounded-r bg-brand-500" />
                    )}
                    <I size={15} className={active ? 'text-brand-600' : 'text-ink-500 group-hover:text-ink-700'} />
                    <span className="flex-1 text-left truncate">{item.label}</span>
                    {item.subText && (
                      <span className="text-[9px] uppercase tracking-wider px-1.5 h-4 inline-flex items-center rounded bg-brand-50 text-brand-600 border border-brand-100 font-semibold">
                        {item.subText}
                      </span>
                    )}
                    {item.badge != null && !item.subText && (
                      <span className="tabular text-[10px] px-1.5 h-4 inline-flex items-center rounded-full bg-ink-100 text-ink-600 border border-line">
                        {item.badge >= 1000 ? `${(item.badge / 1000).toFixed(1)}k` : item.badge}
                      </span>
                    )}
                  </button>
                );
              })}
            </div>
          </div>
        ))}
      </nav>

      {/* Footer */}
      <div className="p-3 mt-3 border-t border-line">
        <div className="rounded-xl border border-line p-3 flex items-center gap-3 bg-ink-50">
          <div className="h-8 w-8 rounded-lg bg-white border border-line flex items-center justify-center">
            <Icon.Shield size={14} className="text-emerald-600" />
          </div>
          <div className="flex-1 min-w-0">
            <div className="text-xs font-medium text-ink-900">Enterprise · v3.2</div>
            <div className="text-[10px] text-ink-500">14 operadores · SLA 99.9%</div>
          </div>
        </div>
      </div>
    </aside>
  );
}

function TopBar({ onOpenAssistant, onNavigate }) {
  const [openNotif, setOpenNotif] = usL(false);
  const [openUser, setOpenUser] = usL(false);
  const notifRef = urL(null);
  const userRef = urL(null);

  ueL(() => {
    const h = (e) => {
      if (notifRef.current && !notifRef.current.contains(e.target)) setOpenNotif(false);
      if (userRef.current && !userRef.current.contains(e.target)) setOpenUser(false);
    };
    document.addEventListener('mousedown', h);
    return () => document.removeEventListener('mousedown', h);
  }, []);

  return (
    <header className="sticky top-0 z-40 h-14 px-6 bg-white/85 backdrop-blur-xl border-b border-line flex items-center gap-4">
      <div className="flex-1 max-w-xl">
        <div className="flex items-center gap-2 bg-ink-50 border border-line hover:border-ink-200 focus-within:border-brand-400 focus-within:ring-4 focus-within:ring-brand-100 rounded-lg h-9 px-3">
          <Icon.Search size={14} className="text-ink-400" />
          <input
            placeholder="Buscar candidatos, vacantes, clientes…"
            className="flex-1 bg-transparent outline-none text-sm text-ink-900 placeholder:text-ink-400"
          />
          <kbd className="text-[10px] tabular text-ink-500 border border-line bg-white rounded px-1.5 h-4 inline-flex items-center">⌘ K</kbd>
        </div>
      </div>

      <button
        onClick={onOpenAssistant}
        className="h-9 px-3.5 rounded-lg bg-white border border-brand-200 hover:border-brand-300 hover:bg-brand-50/40 flex items-center gap-2 text-sm font-medium hover-lift focus-ring transition"
      >
        <Icon.SofiaMark size={18} />
        <span className="text-ink-900">SOFIA Assistant</span>
        <kbd className="text-[10px] tabular text-ink-500 border border-line rounded px-1.5 h-4 inline-flex items-center">⌘ J</kbd>
      </button>

      <div className="relative" ref={notifRef}>
        <button
          onClick={() => setOpenNotif((v) => !v)}
          className="h-9 w-9 rounded-lg bg-white border border-line hover:border-ink-200 hover:bg-ink-50 flex items-center justify-center relative"
        >
          <Icon.Bell size={15} className="text-ink-700" />
          <span className="absolute top-1.5 right-1.5 h-2 w-2 rounded-full bg-rose-500 ring-2 ring-white" />
        </button>
        {openNotif && (
          <div className="absolute right-0 top-11 w-[380px] bg-white border border-line rounded-xl shadow-pop animate-slide-up z-50">
            <div className="px-4 py-3 border-b border-line flex items-center justify-between">
              <div className="text-sm font-semibold text-ink-900">Notificaciones</div>
              <button className="text-[11px] text-brand-600 hover:text-brand-700 font-medium">Marcar como leídas</button>
            </div>
            <div className="max-h-[340px] overflow-y-auto">
              {DATA.NOTIFICATIONS.map((n) => {
                const I = Icon[n.icon] || Icon.Bell;
                const toneCls = {
                  amber: 'bg-ai-50 text-ai-700',
                  brand: 'bg-brand-50 text-brand-600',
                  rose:  'bg-rose-50 text-rose-700',
                  emerald: 'bg-emerald-50 text-emerald-700',
                }[n.tone];
                return (
                  <div key={n.id} className="px-4 py-3 hover:bg-ink-50 border-b border-line2 last:border-0 flex gap-3">
                    <div className={`h-8 w-8 rounded-lg flex items-center justify-center shrink-0 ${toneCls}`}>
                      <I size={14} />
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="text-sm text-ink-900 truncate font-medium">{n.title}</div>
                      <div className="text-[11px] text-ink-500 truncate">{n.body}</div>
                    </div>
                    <div className="text-[10px] text-ink-500 shrink-0">{n.t}</div>
                  </div>
                );
              })}
            </div>
            <button onClick={() => { setOpenNotif(false); onNavigate('reports'); }}
              className="w-full px-4 py-2.5 text-xs text-brand-600 hover:text-brand-700 hover:bg-ink-50 border-t border-line font-medium">
              Ver todas
            </button>
          </div>
        )}
      </div>

      <div className="relative" ref={userRef}>
        <button
          onClick={() => setOpenUser((v) => !v)}
          className="flex items-center gap-2 h-9 pl-1 pr-2.5 rounded-lg bg-white border border-line hover:border-ink-200"
        >
          <Avatar name="Marisol Pineda" color="from-indigo-500 to-violet-400" size={28} online />
          <div className="text-left leading-tight">
            <div className="text-xs font-medium text-ink-900">Marisol Pineda</div>
            <div className="text-[10px] text-ink-500">Senior Operator · SOLUCERSA</div>
          </div>
          <Icon.ChevronDown size={12} className="text-ink-400" />
        </button>
        {openUser && (
          <div className="absolute right-0 top-11 w-56 bg-white border border-line rounded-xl shadow-pop animate-slide-up z-50 p-1">
            {[
              { icon: <Icon.User size={13} />, label: 'Perfil' },
              { icon: <Icon.Settings size={13} />, label: 'Configuración' },
              { icon: <Icon.Shield size={13} />, label: 'Seguridad' },
            ].map((x) => (
              <button key={x.label} className="w-full flex items-center gap-2 px-3 h-8 rounded-md text-sm text-ink-700 hover:bg-ink-50">
                {x.icon} {x.label}
              </button>
            ))}
            <div className="h-px bg-line my-1" />
            <button className="w-full flex items-center gap-2 px-3 h-8 rounded-md text-sm text-rose-600 hover:bg-rose-50">
              <Icon.Logout size={13} /> Cerrar sesión
            </button>
          </div>
        )}
      </div>
    </header>
  );
}

function Page({ id, children }) {
  return <div key={id} className="animate-fade-in">{children}</div>;
}

Object.assign(window, { Sidebar, TopBar, Page });