// Sidebar, Topbar, Command palette, Notifications, generic UI bits

const ROLE_SHORT = {
  socio_admin: 'Sócio Admin', socio: 'Sócio', advogado: 'Advogado(a)', paralegal: 'Paralegal', cliente_externo: 'Cliente',
};

const Sidebar = ({ view, onView, counts, user, open, onClose }) => {
  const nav = [
    { key: 'dash', icon: 'home', label: 'Dashboard' },
    { key: 'tasks', icon: 'kanban', label: 'Tarefas', count: counts.tasks },
    { key: 'clients', icon: 'users', label: 'Clientes', count: counts.clients },
    { key: 'cases', icon: 'briefcase', label: 'Casos', count: counts.cases },
    { key: 'calendar', icon: 'calendar', label: 'Calendário' },
    { key: 'reports', icon: 'fileText', label: 'Relatórios' },
    { key: 'publicacoes', icon: 'fileText', label: 'Publicações', count: counts.publicacoes },
  ];
  const tools = [
    { key: 'upload', icon: 'upload', label: 'Upload inteligente' },
    { key: 'ai', icon: 'sparkles', label: 'Assistente IA' },
  ];
  const initials = user?.initials || user?.name?.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase() || '?';
  const color = user?.color || '#0D0D6B';

  const navigate = (key) => { onView(key); onClose?.(); };

  return (
    <>
      {/* Overlay para fechar o drawer no mobile */}
      {open && (
        <div
          onClick={onClose}
          style={{
            position: 'fixed', inset: 0,
            background: 'rgba(26,10,46,.5)',
            zIndex: 299,
            animation: 'fade 180ms',
          }}
        />
      )}
      <aside className={`sb${open ? ' open' : ''}`}>
        <div className="sb-brand">
          <img src="assets/logo_offwhite.png" alt="PAC Advogados" />
        </div>
        <div className="sb-section">Trabalho</div>
        {nav.map(n => (
          <div key={n.key} className={`sb-item ${view === n.key ? 'active' : ''}`} onClick={() => navigate(n.key)}>
            <Icon name={n.icon} size={16} className="ic" />
            <span>{n.label}</span>
            {n.count != null && <span className="count">{n.count}</span>}
          </div>
        ))}
        <div className="sb-section">Ferramentas</div>
        {tools.map(n => (
          <div key={n.key} className="sb-item" onClick={() => navigate(n.key)}>
            <Icon name={n.icon} size={16} className="ic" />
            <span>{n.label}</span>
          </div>
        ))}
        <div className="sb-section">Escritório</div>
        <div className={`sb-item ${view === 'team' ? 'active' : ''}`} onClick={() => navigate('team')}>
          <Icon name="building" size={16} className="ic" />
          <span>PAC Advogados</span>
        </div>
        <div className="sb-foot">
          <div className="av" style={{ background: color, flexShrink: 0 }}>{initials}</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="name" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{user?.name || 'Usuário'}</div>
            <div className="role">{ROLE_SHORT[user?.role] || user?.role || ''}</div>
          </div>
          <button
            onClick={() => window.PACApi.auth.logout()}
            title="Sair"
            style={{
              flexShrink: 0,
              width: 30, height: 30,
              borderRadius: 7,
              border: 'none',
              background: 'transparent',
              cursor: 'pointer',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: 'rgba(255,255,255,.4)',
              transition: 'background .15s, color .15s',
            }}
            onMouseEnter={e => { e.currentTarget.style.background = 'rgba(255,255,255,.08)'; e.currentTarget.style.color = 'rgba(255,255,255,.85)'; }}
            onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'rgba(255,255,255,.4)'; }}
          >
            <Icon name="logOut" size={15} />
          </button>
        </div>
      </aside>
    </>
  );
};

const crumbFor = (view) => {
  const m = {
    dash: ['Visão geral', 'Dashboard executivo'],
    tasks: ['Tarefas', 'Kanban operacional'],
    clients: ['CRM', 'Clientes ativos'],
    cases: ['Casos', 'Gestão de casos'],
    calendar: ['Agenda', 'Calendário'],
    reports: ['Relatórios', 'Novo relatório'],
    publicacoes: ['Publicações', 'Diários oficiais'],
    team: ['Escritório', 'PAC Advogados'],
    ai: ['Assistente IA', 'PAC.AI'],
  };
  return m[view] || ['PAC Sistema', ''];
};

const Topbar = ({ view, onOpenCmd, onOpenUpload, onOpenNotif, notifOpen, notifCount, onMenuOpen }) => {
  const [a, b] = crumbFor(view);
  return (
    <header className="tb">
      {/* Hamburger — visível apenas no mobile via CSS */}
      <button className="tb-ic-btn tb-hamburger" onClick={onMenuOpen} title="Menu">
        <Icon name="menu" size={20} />
      </button>

      <div className="tb-crumb">
        <span>{a}</span>
        <Icon name="chevronRight" size={12} />
        <b>{b}</b>
      </div>
      <button className="tb-search" onClick={onOpenCmd}>
        <Icon name="search" size={14} />
        <span>Buscar clientes, casos, documentos…</span>
        <kbd>⌘K</kbd>
      </button>
      <div className="tb-actions">
        <button className="tb-ic-btn" onClick={onOpenUpload} title="Upload inteligente">
          <Icon name="upload" size={17} />
        </button>
        <button className="tb-ic-btn" onClick={onOpenNotif} title="Notificações">
          <Icon name="bell" size={17} />
          {notifCount > 0 && <span className="dot" />}
        </button>
        <button className="tb-ic-btn" title="Configurações">
          <Icon name="settings" size={17} />
        </button>
      </div>
    </header>
  );
};

// ============ Notifications popover ============
const NotifPop = ({ onClose }) => {
  const items = [
    { unread: true, who: 'FP', txt: <><b>Fernando Peracini</b> aprovou a v3 do <b>SPA Tabacaria</b></>, ts: 'agora' },
    { unread: true, who: 'IA', txt: <>Contradição detectada na cláusula 8.4 do <b>Acordo Marítimo</b></>, ts: '12 min' },
    { unread: true, who: 'OCE', txt: <>Olinda Cafés assinou o contrato-mestre de franquia</>, ts: '38 min' },
    { unread: false, who: 'TFC', txt: <>Tech Foundry confirmou call de 11h</>, ts: '1 h' },
    { unread: false, who: 'PC', txt: <><b>Paula Cottas</b> mencionou você em Henrique V.</>, ts: '2 h' },
    { unread: false, who: 'MJ', txt: <>INPI: parecer favorável marca Botica</>, ts: 'ontem' },
  ];
  return (
    <div className="notif-pop" onClick={(e) => e.stopPropagation()}>
      <div className="head">
        <h4>Notificações</h4>
        <button className="btn ghost sm" style={{ height: 24, padding: '0 8px', fontSize: 11 }}>Marcar como lidas</button>
      </div>
      {items.map((n, i) => (
        <div key={i} className={`notif-item ${n.unread ? 'unread' : ''}`}>
          <div className="av sm" style={{ background: n.who === 'IA' ? 'var(--pac-dark-purple)' : '#3F2C5F' }}>{n.who}</div>
          <div style={{ flex: 1 }}>
            <div className="ttl">{n.txt}</div>
            <div className="ts">{n.ts}</div>
          </div>
        </div>
      ))}
    </div>
  );
};

// ============ Command palette (⌘K) ============
const CommandPalette = ({ open, onClose, onJump }) => {
  const [q, setQ] = React.useState('');
  const [sel, setSel] = React.useState(0);
  const inputRef = React.useRef(null);
  React.useEffect(() => {
    if (open) {
      setQ(''); setSel(0);
      setTimeout(() => inputRef.current?.focus(), 30);
    }
  }, [open]);

  const groups = React.useMemo(() => {
    const D = window.PAC_DATA;
    const ql = q.toLowerCase().trim();
    const actions = [
      { kind: 'action', label: 'Nova tarefa', icon: 'plus', view: 'tasks' },
      { kind: 'action', label: 'Novo caso', icon: 'briefcase', view: 'cases' },
      { kind: 'action', label: 'Novo cliente', icon: 'users', view: 'clients' },
      { kind: 'action', label: 'Upload de documentos', icon: 'upload', view: '__upload' },
      { kind: 'action', label: 'Gerar relatório', icon: 'fileText', view: 'reports' },
    ];
    const navigate = [
      { kind: 'nav', label: 'Ir para Dashboard', icon: 'home', view: 'dash' },
      { kind: 'nav', label: 'Ir para Tarefas', icon: 'kanban', view: 'tasks' },
      { kind: 'nav', label: 'Ir para Clientes', icon: 'users', view: 'clients' },
      { kind: 'nav', label: 'Ir para Casos', icon: 'briefcase', view: 'cases' },
      { kind: 'nav', label: 'Ir para Calendário', icon: 'calendar', view: 'calendar' },
    ];
    const cases = D.cases.map(c => ({ kind: 'case', label: c.title, hint: `${c.number} · ${c.area}`, icon: 'briefcase', view: 'cases' }));
    const clients = D.clients.map(c => ({ kind: 'client', label: c.name, hint: c.sector, icon: 'users', view: 'clients' }));
    const match = (it) => !ql || (it.label + ' ' + (it.hint || '')).toLowerCase().includes(ql);
    return [
      { lbl: 'IA', items: ql ? [{ kind: 'ai', label: `Perguntar à IA: "${q}"`, icon: 'sparkles' }] : [] },
      { lbl: 'Ações', items: actions.filter(match) },
      { lbl: 'Navegação', items: navigate.filter(match) },
      { lbl: 'Casos', items: cases.filter(match).slice(0, 4) },
      { lbl: 'Clientes', items: clients.filter(match).slice(0, 4) },
    ].filter(g => g.items.length > 0);
  }, [q]);

  const flat = groups.flatMap(g => g.items);

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => {
      if (e.key === 'Escape') onClose();
      if (e.key === 'ArrowDown') { e.preventDefault(); setSel(s => Math.min(s + 1, flat.length - 1)); }
      if (e.key === 'ArrowUp')   { e.preventDefault(); setSel(s => Math.max(s - 1, 0)); }
      if (e.key === 'Enter') {
        const it = flat[sel];
        if (it) { onJump(it.view, it); onClose(); }
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, sel, flat]);

  if (!open) return null;
  let idx = -1;
  return (
    <div className="scrim" onClick={onClose}>
      <div className="cmdk" onClick={(e) => e.stopPropagation()}>
        <div className="cmdk-input">
          <Icon name="search" size={18} style={{ color: 'var(--fg-muted)' }} />
          <input
            ref={inputRef}
            value={q}
            onChange={(e) => { setQ(e.target.value); setSel(0); }}
            placeholder="Pergunte algo, busque ou execute uma ação…"
          />
          <kbd style={{ fontSize: 10, color: 'var(--fg-muted)', border: '1px solid var(--border)', padding: '1px 6px', borderRadius: 3 }}>ESC</kbd>
        </div>
        <div className="cmdk-list">
          {groups.map(g => (
            <React.Fragment key={g.lbl}>
              <div className="cmdk-group-lbl">{g.lbl}</div>
              {g.items.map((it, i) => {
                idx++;
                const isSel = idx === sel;
                if (it.kind === 'ai') {
                  return (
                    <div key={i} className="cmdk-ai" onClick={() => { onJump('__ai', it); onClose(); }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--pac-navy)', fontWeight: 600, marginBottom: 4 }}>
                        <Icon name="sparkles" size={14} /> Perguntar à PAC.AI
                      </div>
                      <div style={{ color: 'var(--pac-black)' }}>"{q}"</div>
                      <div style={{ fontSize: 11, color: 'var(--fg-muted)', marginTop: 6 }}>
                        Responde usando apenas os dados internos do escritório.
                      </div>
                    </div>
                  );
                }
                return (
                  <div key={i} className={`cmdk-item ${isSel ? 'sel' : ''}`} onClick={() => { onJump(it.view, it); onClose(); }}>
                    <Icon name={it.icon} size={16} className="ic" />
                    <div className="grow">
                      <div>{it.label}</div>
                      {it.hint && <div style={{ fontSize: 11, color: 'var(--fg-muted)' }}>{it.hint}</div>}
                    </div>
                    {isSel && <span className="kbd">↵</span>}
                  </div>
                );
              })}
            </React.Fragment>
          ))}
          {flat.length === 0 && (
            <div style={{ padding: '24px', textAlign: 'center', color: 'var(--fg-muted)', fontSize: 12 }}>
              Nada encontrado para "{q}".
            </div>
          )}
        </div>
        <div className="cmdk-foot">
          <span><kbd>↑</kbd> <kbd>↓</kbd> navegar</span>
          <span><kbd>↵</kbd> selecionar</span>
          <span><kbd>esc</kbd> fechar</span>
          <span style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 6 }}>
            <Icon name="sparkles" size={11} /> PAC.AI
          </span>
        </div>
      </div>
    </div>
  );
};

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