// Topnav overlays: SearchPalette, MessagesPanel, NotificationsPanel, ProfileMenu

const { useState: useOvState, useEffect: useOvEffect, useRef: useOvRef } = React;

// ─── SEARCH PALETTE (⌘K style) ───────────────────────────────────────────────

function SearchPalette({ onClose, onNavigate }) {
  const [q, setQ] = useOvState('');
  const [selIdx, setSelIdx] = useOvState(0);
  const inputRef = useOvRef();
  useOvEffect(() => { inputRef.current?.focus(); }, []);

  const ql = q.toLowerCase();
  const contatos = CONTATOS.filter(c => !q || (c.nome + c.empresa + c.email).toLowerCase().includes(ql)).slice(0, 5);
  const leads    = LEADS.filter(l => !q || (l.nome + l.empresa + l.whatsapp).toLowerCase().includes(ql)).slice(0, 4);
  const casos    = CASOS.filter(c => !q || (c.assunto + c.empresa + c.id).toLowerCase().includes(ql)).slice(0, 3);
  const actions = [
    { id: 'novo-lead',    label: 'Criar novo lead',           hint: 'Pipeline · ação rápida', go: 'pipeline' },
    { id: 'novo-contato', label: 'Adicionar contato',         hint: 'Contatos · ação rápida', go: 'contatos' },
    { id: 'agendar',      label: 'Agendar reunião',           hint: 'Calendário · ação rápida', go: 'calendario' },
    { id: 'relatorio',    label: 'Gerar relatório mensal',    hint: 'Relatórios · ação rápida', go: 'relatorios' },
  ].filter(a => !q || a.label.toLowerCase().includes(ql));

  // Lista plana de todos os itens navegáveis (para teclado)
  const flatItems = [
    ...actions.map(a  => ({ go: a.go })),
    ...contatos.map(() => ({ go: 'contatos' })),
    ...leads.map(()   => ({ go: 'pipeline' })),
    ...casos.map(()   => ({ go: 'casos'    })),
  ];

  const navigate = (idx) => {
    const item = flatItems[idx >= 0 ? idx : selIdx];
    if (item) { onNavigate(item.go); onClose(); }
  };

  useOvEffect(() => { setSelIdx(0); }, [q]);

  useOvEffect(() => {
    const h = (e) => {
      if (e.key === 'Escape') { onClose(); return; }
      if (e.key === 'ArrowDown') { e.preventDefault(); setSelIdx(i => Math.min(i + 1, flatItems.length - 1)); }
      if (e.key === 'ArrowUp')   { e.preventDefault(); setSelIdx(i => Math.max(i - 1, 0)); }
      if (e.key === 'Enter')     { e.preventDefault(); navigate(-1); }
    };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [selIdx, flatItems.length, onClose]);

  return (
    <div className="cmdk-wrap" onClick={onClose}>
      <div className="cmdk" onClick={(e) => e.stopPropagation()}>
        <div className="cmdk-input">
          <span className="muted">{ICN.search}</span>
          <input ref={inputRef} value={q} onChange={(e) => setQ(e.target.value)} placeholder="Buscar contatos, leads, casos, ações…" />
          <span className="cmdk-kbd">ESC</span>
        </div>

        <div className="cmdk-body">
          {(() => {
            let globalIdx = 0;
            const Item = ({ children, go, isImg }) => {
              const idx = globalIdx++;
              const isSel = idx === selIdx;
              return (
                <div
                  className={`cmdk-item ${isSel ? 'cmdk-item-sel' : ''}`}
                  onMouseEnter={() => setSelIdx(idx)}
                  onClick={() => { onNavigate(go); onClose(); }}
                >
                  {children}
                </div>
              );
            };

            return (
              <>
                {actions.length > 0 && (
                  <div className="cmdk-group">
                    <div className="cmdk-group-lbl">Ações rápidas</div>
                    {actions.map(a => (
                      <Item key={a.id} go={a.go}>
                        <div className="cmdk-ic cmdk-ic-action">{ICN.bolt2}</div>
                        <div className="col" style={{flex:1}}>
                          <div className="cmdk-title">{a.label}</div>
                          <div className="cmdk-sub muted">{a.hint}</div>
                        </div>
                        <span className="cmdk-arrow muted">{ICN.arrowRight}</span>
                      </Item>
                    ))}
                  </div>
                )}

                {contatos.length > 0 && (
                  <div className="cmdk-group">
                    <div className="cmdk-group-lbl">Contatos</div>
                    {contatos.map(c => (
                      <Item key={c.id} go="contatos">
                        <img src={c.avatar} className="cmdk-av" alt="" />
                        <div className="col" style={{flex:1, minWidth:0}}>
                          <div className="cmdk-title">{c.nome}</div>
                          <div className="cmdk-sub muted">{c.cargo} · {c.empresa}</div>
                        </div>
                        <span className={`pill ${c.tag === 'VIP' ? 'pill-dark' : c.tag === 'Quente' ? 'pill-pink' : ''}`} style={{fontSize:10}}>{c.tag}</span>
                      </Item>
                    ))}
                  </div>
                )}

                {leads.length > 0 && (
                  <div className="cmdk-group">
                    <div className="cmdk-group-lbl">Leads</div>
                    {leads.map(l => (
                      <Item key={l.id} go="pipeline">
                        <div className="cmdk-ic cmdk-ic-lead">{ICN.trendUp}</div>
                        <div className="col" style={{flex:1, minWidth:0}}>
                          <div className="cmdk-title">{l.nome.split(' ').slice(0,2).join(' ')} <span className="muted">· {l.empresa}</span></div>
                          <div className="cmdk-sub muted">R$ {l.valor.toLocaleString('pt-BR')} · {l.etapa.replace('-', ' ')}</div>
                        </div>
                        <span className={`pill pill-${l.temp === 'frio' ? 'blue' : l.temp === 'morno' ? 'yellow' : 'pink'}`} style={{fontSize:10}}>{l.temp.toUpperCase()}</span>
                      </Item>
                    ))}
                  </div>
                )}

                {casos.length > 0 && (
                  <div className="cmdk-group">
                    <div className="cmdk-group-lbl">Casos</div>
                    {casos.map(c => (
                      <Item key={c.id} go="casos">
                        <div className="cmdk-ic cmdk-ic-case">{ICN.bolt}</div>
                        <div className="col" style={{flex:1, minWidth:0}}>
                          <div className="cmdk-title"><span className="mono" style={{fontSize:10.5, color:'var(--ink-muted)'}}>{c.id}</span> · {c.assunto}</div>
                          <div className="cmdk-sub muted">{c.empresa} · {c.atualizado}</div>
                        </div>
                        <span className={`pill ${c.prioridade === 'Crítica' ? 'pill-pink' : c.prioridade === 'Alta' ? 'pill-yellow' : 'pill-blue'}`} style={{fontSize:10}}>{c.prioridade}</span>
                      </Item>
                    ))}
                  </div>
                )}
              </>
            );
          })()}

          {q && contatos.length + leads.length + casos.length + actions.length === 0 && (
            <div className="cmdk-empty muted">Nenhum resultado para "{q}".</div>
          )}
        </div>

        <div className="cmdk-foot">
          <span className="row" style={{gap:6}}>
            <span className="cmdk-kbd">↑</span><span className="cmdk-kbd">↓</span>
            <span className="muted" style={{fontSize:11}}>navegar</span>
          </span>
          <span className="row" style={{gap:6}}>
            <span className="cmdk-kbd">↵</span>
            <span className="muted" style={{fontSize:11}}>abrir</span>
          </span>
          <span className="row" style={{gap:6, marginLeft:'auto'}}>
            <span className="cmdk-kbd cmdk-kbd-wide">⌘K</span>
            <span className="muted" style={{fontSize:11}}>busca global</span>
          </span>
        </div>
      </div>
    </div>
  );
}

// ─── MESSAGES PANEL ──────────────────────────────────────────────────────────

const MESSAGES = [
  { id: 1, who: 0, snip: "Pode revisar a proposta antes da reunião de amanhã? Obrigada!", when: "há 4 min",  unread: true },
  { id: 2, who: 1, snip: "Fechamos o contrato — vou enviar os documentos para assinatura.", when: "há 32 min", unread: true },
  { id: 3, who: 4, snip: "Adorei o briefing, mandei alguns ajustes em anexo. 📎",          when: "há 1h",     unread: true },
  { id: 4, who: 7, snip: "Reagendamos para sexta às 15h?",                                  when: "há 2h" },
  { id: 5, who: 3, snip: "Equipe técnica já está alinhada para o go-live.",                 when: "ontem"  },
  { id: 6, who: 9, snip: "Obrigado pelo retorno rápido — vou apresentar para o conselho.",  when: "ontem"  },
  { id: 7, who: 5, snip: "Vamos marcar uma call rápida sobre o lote 1208?",                 when: "2 dias" },
];

function MessagesPanel({ onClose, onNavigate }) {
  const [tab,     setTab]     = useOvState('todas');
  const [readIds, setReadIds] = useOvState(new Set());
  const toast                 = useToast();

  const isUnread = (m) => m.unread && !readIds.has(m.id);
  const markRead = (id) => setReadIds(prev => new Set([...prev, id]));
  const naoLidas = MESSAGES.filter(isUnread).length;
  const list = tab === 'todas' ? MESSAGES : MESSAGES.filter(isUnread);

  return (
    <Popover onClose={onClose} anchor="right-2">
      <div className="pp-head">
        <div className="col">
          <div className="pp-title">Mensagens</div>
          <div className="pp-sub muted">{naoLidas > 0 ? `${naoLidas} não lida${naoLidas !== 1 ? 's' : ''} · ` : ''}{MESSAGES.length} conversas ativas</div>
        </div>
        <div className="mini-btn" onClick={onClose}>{ICN.x}</div>
      </div>

      <div className="pp-tabs">
        <div className={`pp-tab ${tab === 'todas' ? 'pp-tab-on' : ''}`} onClick={() => setTab('todas')}>Todas <span>{MESSAGES.length}</span></div>
        <div className={`pp-tab ${tab === 'naolidas' ? 'pp-tab-on' : ''}`} onClick={() => setTab('naolidas')}>Não lidas <span>{naoLidas}</span></div>
      </div>

      <div className="pp-list">
        {list.length === 0 && (
          <div className="muted" style={{padding:'24px', textAlign:'center', fontSize:13}}>Nenhuma mensagem não lida 🎉</div>
        )}
        {list.map(m => {
          const c      = CONTATOS[m.who];
          const unread = isUnread(m);
          return (
            <div key={m.id} className="pp-msg" onClick={() => { markRead(m.id); if (onNavigate) { onNavigate('jornadas'); onClose(); } }} style={{opacity: unread ? 1 : 0.7}}>
              <img src={c.avatar} alt="" />
              <div className="col" style={{flex:1, minWidth:0}}>
                <div className="row" style={{justifyContent:'space-between', gap:8}}>
                  <span className="pp-msg-name">{c.nome.split(' ').slice(0,2).join(' ')}</span>
                  <span className="pp-msg-when muted">{m.when}</span>
                </div>
                <div className={`pp-msg-snip ${unread ? 'pp-msg-unread' : ''}`}>{m.snip}</div>
              </div>
              {unread && <span className="pp-unread-dot" />}
            </div>
          );
        })}
      </div>

      <div className="pp-foot">
        <button className="btn-primary btn-sm" style={{flex:1, justifyContent:'center'}} onClick={() => { onNavigate && onNavigate('jornadas'); onClose(); }}>{ICN.send} Nova mensagem</button>
        <button className="btn-ghost" style={{padding:'8px 14px'}} onClick={() => { onNavigate && onNavigate('jornadas'); onClose(); }}>Ver tudo</button>
      </div>
    </Popover>
  );
}

// ─── NOTIFICATIONS PANEL ─────────────────────────────────────────────────────

const NOTIFS = [
  { id: 1, type: 'win',    icon: ICN.check,      who: 0,  txt: "fechou a oportunidade",     extra: "Tecnoluz Solar · R$ 482.300", when: "há 8 min",  unread: true, color: "mint" },
  { id: 2, type: 'lead',   icon: ICN.bolt2,      who: 1,  txt: "criou um novo lead quente", extra: "Construtora Paineiras",       when: "há 35 min", unread: true, color: "lav"  },
  { id: 3, type: 'task',   icon: ICN.cal,        who: 7,  txt: "atribuiu uma tarefa a você",extra: "Demo — Indústria Aurora",     when: "há 1h",     unread: true, color: "yellow" },
  { id: 4, type: 'caso',   icon: ICN.bolt,       who: 3,  txt: "abriu um caso crítico",     extra: "Atraso lote 1208 · CASO-2835",when: "há 2h",                  color: "pink" },
  { id: 5, type: 'mention',icon: ICN.mail,       who: 4,  txt: "mencionou você em um comentário", extra: "Briefing Studio Maracá", when: "ontem",                color: "blue" },
  { id: 6, type: 'sla',    icon: ICN.refresh,    who: null, txt: "SLA do CASO-2825 vence em 2 horas", extra: "Aurora · prioridade Alta", when: "ontem",         color: "pink" },
  { id: 7, type: 'goal',   icon: ICN.trendUp,    who: null, txt: "Meta do trimestre atingiu 78%",    extra: "+12% em relação a abril",     when: "há 2 dias",     color: "mint" },
];

const NOTIF_NAV = {
  win:     'oportunidades',
  lead:    'pipeline',
  task:    'calendario',
  caso:    'casos',
  mention: 'jornadas',
  sla:     'casos',
  goal:    'relatorios',
};

function NotificationsPanel({ onClose, onNavigate }) {
  const [tab, setTab]         = useOvState('todas');
  const [readIds, setReadIds] = useOvState(new Set());
  const toast                 = useToast();

  const isUnread = (n) => n.unread && !readIds.has(n.id);
  const markRead = (id) => setReadIds(prev => new Set([...prev, id]));
  const markAll  = () => { setReadIds(new Set(NOTIFS.map(n => n.id))); toast('Todas notificações marcadas como lidas'); };

  const handleNotifClick = (n) => {
    markRead(n.id);
    const dest = NOTIF_NAV[n.type];
    if (dest && onNavigate) { onNavigate(dest); onClose(); }
  };

  const naoLidas = NOTIFS.filter(isUnread).length;
  const list = tab === 'naolidas' ? NOTIFS.filter(isUnread)
             : tab === 'sistema'  ? NOTIFS.filter(n => n.type === 'sla' || n.type === 'goal')
             : NOTIFS;

  return (
    <Popover onClose={onClose} anchor="right-1">
      <div className="pp-head">
        <div className="col">
          <div className="pp-title">Notificações</div>
          <div className="pp-sub muted">{naoLidas > 0 ? `${naoLidas} não lida${naoLidas > 1 ? 's' : ''}` : 'Tudo em dia ✓'}</div>
        </div>
        <div className="row" style={{gap:4}}>
          {naoLidas > 0 && (
            <div className="mini-btn" title="Marcar todas como lidas" onClick={markAll}>{ICN.doubleCheck}</div>
          )}
          <div className="mini-btn" onClick={onClose}>{ICN.x}</div>
        </div>
      </div>

      <div className="pp-tabs">
        <div className={`pp-tab ${tab === 'todas' ? 'pp-tab-on' : ''}`} onClick={() => setTab('todas')}>Todas <span>{NOTIFS.length}</span></div>
        <div className={`pp-tab ${tab === 'naolidas' ? 'pp-tab-on' : ''}`} onClick={() => setTab('naolidas')}>Não lidas <span>{naoLidas}</span></div>
        <div className={`pp-tab ${tab === 'sistema' ? 'pp-tab-on' : ''}`} onClick={() => setTab('sistema')}>Sistema</div>
      </div>

      <div className="pp-list">
        {list.length === 0 && (
          <div className="muted" style={{padding:'24px', textAlign:'center', fontSize:13}}>
            {tab === 'naolidas' ? 'Nenhuma notificação não lida 🎉' : 'Nenhuma notificação.'}
          </div>
        )}
        {list.map(n => {
          const c       = n.who != null ? CONTATOS[n.who] : null;
          const unread  = isUnread(n);
          return (
            <div key={n.id} className="pp-notif" onClick={() => handleNotifClick(n)} style={{opacity: unread ? 1 : 0.7, cursor: NOTIF_NAV[n.type] ? 'default' : 'default'}}>
              <div className={`pp-notif-ic pp-notif-${n.color}`}>{n.icon}</div>
              <div className="col" style={{flex:1, minWidth:0}}>
                <div className="pp-notif-line">
                  {c && <strong>{c.nome.split(' ').slice(0,2).join(' ')}</strong>}
                  {c ? ` ${n.txt}` : <strong>{n.txt}</strong>}
                </div>
                <div className="pp-notif-extra muted">{n.extra}</div>
                <div className="pp-notif-when muted">{n.when}</div>
              </div>
              {unread && <span className="pp-unread-dot" />}
            </div>
          );
        })}
      </div>

      <div className="pp-foot">
        <button className="btn-ghost" style={{padding:'8px 14px', flex:1}} onClick={() => { onNavigate && onNavigate('configuracoes'); onClose(); }}>Configurar preferências</button>
        <button className="btn-primary btn-sm" onClick={() => { onNavigate && onNavigate('jornadas'); onClose(); }}>Ver tudo</button>
      </div>
    </Popover>
  );
}

// ─── PROFILE MENU ────────────────────────────────────────────────────────────

function ProfileMenu({ onClose, onNavigate, onLogout }) {
  // Computa pipeline total e % de oportunidades fechadas vs total
  const totalPipeline = OPORTUNIDADES.reduce((s, n) => s + n.valor, 0);
  const fechadas      = OPORTUNIDADES.filter(n => n.etapa === 'Fechado');
  const taxaFechamento = Math.round((fechadas.length / Math.max(1, OPORTUNIDADES.length)) * 100);
  const pipelineK     = (totalPipeline / 1000).toFixed(0);

  return (
    <Popover onClose={onClose} anchor="right-0" width={300}>
      <div className="profile-head">
        <img src="https://i.pravatar.cc/120?img=47" alt="" />
        <div className="col" style={{flex:1, minWidth:0}}>
          <div className="profile-name">Letícia Andrade</div>
          <div className="profile-email muted">leticia.andrade@ezza.com.br</div>
          <span className="pill pill-mint" style={{marginTop:6, fontSize:10}}>Plano Pro · 23 dias</span>
        </div>
      </div>

      <div className="profile-stats">
        <div className="profile-stat">
          <div className="profile-stat-val money">R$ {pipelineK}k</div>
          <div className="profile-stat-lbl">Pipeline total</div>
        </div>
        <div className="profile-stat">
          <div className="profile-stat-val">{taxaFechamento}%</div>
          <div className="profile-stat-lbl">Taxa de fechamento</div>
        </div>
      </div>

      <div className="profile-menu">
        <MenuItem icon={ICN.user}     label="Meu perfil"           hint="Dados e foto" onClick={() => onNavigate('perfil')} />
        <MenuItem icon={ICN.briefcase} label="Minha equipe"        hint="5 pessoas" onClick={() => onNavigate('equipe')} />
        <MenuItem icon={ICN.settings} label="Configurações"        hint="Conta, integrações, faturamento" onClick={() => onNavigate('configuracoes')} />
        <div className="profile-divider" />
        <MenuItem icon={ICN.help}     label="Central de ajuda"     hint="Atalhos · ⌘ ?" onClick={() => onNavigate('ajuda')} />
        <MenuItem icon={ICN.download} label="Baixar app desktop"   hint="macOS · Windows" onClick={() => onNavigate('app-desktop')} />
        <div className="profile-divider" />
        <MenuItem icon={ICN.logout}   label="Sair da conta"        danger onClick={() => { onLogout && onLogout(); }} />
      </div>

      <div className="profile-foot muted">
        Ezza CRM <span style={{margin:'0 6px'}}>·</span> v2.6.1 <span style={{margin:'0 6px'}}>·</span> <span>Status: <span style={{color:'var(--ok)'}}>operacional</span></span>
      </div>
    </Popover>
  );
}

function MenuItem({ icon, label, hint, right, danger, onClick }) {
  return (
    <div className={`pmi ${danger ? 'pmi-danger' : ''}`} onClick={onClick}>
      <div className="pmi-ic">{icon}</div>
      <div className="col" style={{flex:1, minWidth:0}}>
        <div className="pmi-lbl">{label}</div>
        {hint && <div className="pmi-hint muted">{hint}</div>}
      </div>
      {right || <span className="muted">{ICN.arrowRight}</span>}
    </div>
  );
}

// ─── POPOVER SHELL ───────────────────────────────────────────────────────────

function Popover({ onClose, anchor = 'right-0', width = 380, children }) {
  useOvEffect(() => {
    const h = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [onClose]);
  // anchor is rough mapping to the icon position in TopNav.
  // The popover anchors top: 88 (below topnav) right: variable
  const rightMap = { 'right-0': 14, 'right-1': 60, 'right-2': 106 };
  const right = rightMap[anchor] ?? 14;
  return (
    <>
      <div className="pp-scrim" onClick={onClose} />
      <div className="pp" style={{ right, width }}>
        <div className="pp-arrow" />
        {children}
      </div>
      <style>{`
        .pp-scrim { position: fixed; inset: 0; z-index: 80; }
        .pp {
          position: fixed; top: 92px;
          z-index: 90;
          background: oklch(0.99 0.005 250);
          border: 0.5px solid oklch(0.92 0.01 250);
          border-radius: 22px;
          box-shadow: 0 24px 60px -16px rgba(20,30,60,.25), 0 8px 20px -8px rgba(20,30,60,.12);
          max-height: calc(100vh - 110px);
          display: flex; flex-direction: column;
          overflow: hidden;
          animation: pp-in .18s ease;
        }
        .pp-arrow {
          position: absolute; top: -7px; right: 22px;
          width: 14px; height: 14px;
          background: oklch(0.99 0.005 250);
          border-top: 0.5px solid oklch(0.92 0.01 250);
          border-left: 0.5px solid oklch(0.92 0.01 250);
          transform: rotate(45deg);
          border-top-left-radius: 4px;
        }
        @keyframes pp-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
      `}</style>
    </>
  );
}

// ─── WELCOME TOUR ─────────────────────────────────────────────────────────────

function WelcomeTour({ onFinish, goto }) {
  const [step, setStep]       = useOvState(0);
  const [spot,  setSpot]      = useOvState(null); // BoundingClientRect do elemento alvo
  const CARD_W = 440;

  // Cada passo: qual elemento destacar e onde colocar o card em relação a ele
  const STEPS = [
    {
      icon: '🧭',
      screen: 'jornadas',
      target: '.sidebar',
      place: 'right',
      title: 'Navegue com um clique',
      body: 'A barra lateral dá acesso a todas as telas do sistema. Cada ícone é um atalho direto — Pipeline, Jornadas, Contatos, Oportunidades, Calendário, Relatórios, Casos e Configurações.',
    },
    {
      icon: '📊',
      screen: 'painel',
      target: '.main',
      place: 'center',
      title: 'Painel de Controle',
      body: 'O dashboard reúne tudo em um só lugar: KPIs de receita e conversão, funil de pipeline ponderado, próximas tarefas do dia e histórico de interações recentes. Ponto de partida do seu dia.',
    },
    {
      icon: '🎯',
      screen: 'jornadas',
      target: '.main',
      place: 'center',
      title: 'Jornadas do Cliente',
      body: 'O kanban operacional é o coração da Ezza. Cada card é um atendimento percorrendo etapas — da triagem ao encerramento. Clique no avatar de um card para abrir a conversa com o cliente.',
    },
    {
      icon: '⚡',
      screen: 'pipeline',
      target: '.main',
      place: 'center',
      title: 'Pipeline com IA SDR',
      body: 'Gerencie seus leads comerciais em colunas por etapa. Arraste os cards para avançar no funil. Clique no ícone WhatsApp para abrir a conversa — a IA SDR pode responder automaticamente em seu lugar.',
    },
    {
      icon: '👥',
      screen: 'contatos',
      target: '.main',
      place: 'center',
      title: 'Gestão de Contatos',
      body: 'Cadastro completo de clientes e prospects: histórico de interações, oportunidades vinculadas, agendamentos, e-mail e ligação com um clique. Filtre por tag ou ordene como preferir.',
    },
    {
      icon: '💼',
      screen: 'oportunidades',
      target: '.main',
      place: 'center',
      title: 'Oportunidades',
      body: 'Acompanhe todos os negócios em andamento em lista ou kanban. Filtre por etapa, responsável e probabilidade. Use os três pontinhos para editar, atribuir, reagendar ou marcar como ganha.',
    },
    {
      icon: '🎫',
      screen: 'casos',
      target: '.main',
      place: 'center',
      title: 'Casos & Atendimentos',
      body: 'Central de suporte integrada: abra tickets, acompanhe SLA, atribua responsáveis e mude o status de cada caso. Os atalhos rápidos permitem ações em lote como arquivar e enviar pesquisa de satisfação.',
    },
    {
      icon: '📈',
      screen: 'relatorios',
      target: '.main',
      place: 'center',
      title: 'Relatórios e Analytics',
      body: 'Visualize receita, ticket médio, ciclo de venda e taxa de conversão por período. Ative "Comparar" para ver a evolução frente ao período anterior. Exporte em PDF, CSV ou Excel com um clique.',
    },
    {
      icon: '⚙️',
      screen: 'configuracoes',
      target: '.set-aside',
      place: 'right',
      title: 'Configurações',
      body: 'Aqui você personaliza tudo: dados da empresa, WhatsApp Business, Agente IA, status do sistema, integrações, automações, notificações e faturamento. Cada aba é uma área independente.',
    },
    {
      icon: '🤖',
      screen: 'configuracoes',
      target: '.set-body',
      place: 'left',
      title: 'Agente IA — SDR Virtual',
      body: 'Configure o robô de vendas: defina o nome, objetivo, persona e o script que ele usa nas conversas. Ajuste os horários de atendimento e faça chamadas de teste direto do painel. O agente responde clientes no WhatsApp enquanto você foca no que importa.',
      onEnter: () => {
        // Clica na aba "Agente IA" dentro de Configurações
        const tabs = document.querySelectorAll('.set-tab');
        tabs.forEach(t => { if (t.textContent.includes('Agente')) t.click(); });
      },
    },
    {
      icon: '🔍',
      screen: 'painel',
      target: '.topnav',
      place: 'below',
      title: 'Busca global e atalhos',
      body: 'Pressione ⌘K (ou Ctrl+K) a qualquer momento para encontrar contatos, leads e casos instantaneamente. Os ícones no canto superior direito abrem mensagens, notificações e seu perfil.',
    },
  ];

  const s = STEPS[step];
  const isLast = step === STEPS.length - 1;

  // Navega para a tela do passo
  useOvEffect(() => {
    if (s.screen && goto) goto(s.screen);
  }, [step]);

  // Mede o elemento alvo após a tela renderizar; executa onEnter se definido
  useOvEffect(() => {
    const run = () => {
      // 1. onEnter opcional (ex: clicar em uma aba)
      if (s.onEnter) s.onEnter();
      // 2. mede depois do onEnter ter tido tempo de atualizar o DOM
      setTimeout(() => {
        const el = s.target ? document.querySelector(s.target) : null;
        setSpot(el ? el.getBoundingClientRect() : null);
      }, 80);
    };
    const t = setTimeout(run, 150);
    return () => clearTimeout(t);
  }, [step]);

  // Calcula posição do spotlight (com padding)
  const PAD = 6;
  const spotRect = spot ? {
    left:   spot.left   - PAD,
    top:    spot.top    - PAD,
    width:  spot.width  + PAD * 2,
    height: spot.height + PAD * 2,
    borderRadius: 18,
  } : { left: 0, top: 0, width: 0, height: 0, borderRadius: 0 };

  // Calcula posição do card baseado no spotlight real
  const vw = window.innerWidth;
  const vh = window.innerHeight;
  const MARGIN = 24;
  let cardLeft, cardTop;

  if (!spot) {
    // fallback: centro da tela
    cardLeft = (vw - CARD_W) / 2;
    cardTop  = (vh - 300)    / 2;
  } else if (s.place === 'right') {
    // à direita do elemento, centralizado verticalmente
    cardLeft = spotRect.left + spotRect.width + MARGIN;
    cardTop  = Math.max(MARGIN, Math.min(vh - 320 - MARGIN,
                spotRect.top + spotRect.height / 2 - 150));
  } else if (s.place === 'left') {
    // à esquerda do elemento, centralizado verticalmente
    cardLeft = Math.max(MARGIN, spotRect.left - CARD_W - MARGIN);
    cardTop  = Math.max(MARGIN, Math.min(vh - 320 - MARGIN,
                spotRect.top + spotRect.height / 2 - 150));
  } else if (s.place === 'below') {
    // abaixo do elemento, centralizado horizontalmente
    cardLeft = Math.max(MARGIN, Math.min(vw - CARD_W - MARGIN,
                spotRect.left + spotRect.width / 2 - CARD_W / 2));
    cardTop  = spotRect.top + spotRect.height + MARGIN;
  } else {
    // 'center': centro do spotlight
    cardLeft = Math.max(MARGIN, Math.min(vw - CARD_W - MARGIN,
                spotRect.left + spotRect.width / 2 - CARD_W / 2));
    cardTop  = Math.max(MARGIN, Math.min(vh - 320 - MARGIN,
                spotRect.top + spotRect.height / 2 - 150));
  }

  const next = () => isLast ? onFinish() : setStep(step + 1);
  const back = () => { if (step > 0) setStep(step - 1); };

  // Portal → document.body. Spotlight e card com position:fixed + coordenadas reais em px.
  return ReactDOM.createPortal(
    <>
      <style>{`@keyframes tour-fade { from { opacity:0 } to { opacity:1 } }`}</style>

      {/* Spotlight — usa getBoundingClientRect do elemento alvo */}
      <div style={{
        position: 'fixed',
        left: spotRect.left,  top: spotRect.top,
        width: spotRect.width, height: spotRect.height,
        borderRadius: spotRect.borderRadius,
        boxShadow: '0 0 0 9999px rgba(10,15,35,0.68)',
        border: '1.5px solid rgba(255,255,255,0.22)',
        transition: 'all 0.45s cubic-bezier(.2,.8,.2,1)',
        pointerEvents: 'none',
        zIndex: 9998,
      }} />

      {/* Card — coordenadas calculadas em px baseadas no rect do elemento alvo */}
      <div key={step} style={{
        position: 'fixed',
        left: Math.round(cardLeft),
        top:  Math.round(cardTop),
        zIndex: 9999,
        width: CARD_W,
        background: 'oklch(0.997 0.002 250)',
        borderRadius: 24,
        padding: '26px 28px',
        boxShadow: '0 32px 72px -20px rgba(10,20,60,.40), 0 1px 0 rgba(255,255,255,.95) inset',
        border: '0.5px solid rgba(255,255,255,0.88)',
        animation: 'tour-fade 0.22s ease',
        pointerEvents: 'all',
      }}>
          <div style={{ fontSize: 36, marginBottom: 16, lineHeight: 1 }}>{s.icon}</div>

          <div style={{ display: 'flex', alignItems: 'center', gap: 5, marginBottom: 20 }}>
            {STEPS.map((_, i) => (
              <div key={i} style={{
                height: 5,
                width: i === step ? 24 : 5,
                borderRadius: 999,
                background: i === step ? 'oklch(0.18 0.01 255)' : 'oklch(0.84 0.01 255)',
                transition: 'all 0.35s cubic-bezier(.2,.8,.2,1)',
              }} />
            ))}
            <span style={{ marginLeft: 'auto', fontSize: 11, color: 'oklch(0.65 0.01 255)', fontWeight: 600, letterSpacing: '0.04em' }}>
              {step + 1}/{STEPS.length}
            </span>
          </div>

          <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: '-0.022em', marginBottom: 10, color: 'oklch(0.14 0.01 255)', lineHeight: 1.25 }}>
            {s.title}
          </div>
          <div style={{ fontSize: 13.5, lineHeight: 1.7, color: 'oklch(0.44 0.012 255)', marginBottom: 26 }}>
            {s.body}
          </div>

          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <button onClick={onFinish} style={{
              background: 'transparent', border: 0,
              fontSize: 12.5, color: 'oklch(0.64 0.01 255)',
              cursor: 'default', fontFamily: 'inherit', padding: '6px 0',
            }}>Pular tour</button>

            <div style={{ display: 'flex', gap: 8 }}>
              {step > 0 && (
                <button onClick={back} style={{
                  background: 'oklch(0.96 0.01 250)',
                  color: 'oklch(0.36 0.01 255)',
                  border: '0.5px solid oklch(0.88 0.01 250)',
                  borderRadius: 999, padding: '10px 18px',
                  fontFamily: 'inherit', fontSize: 13, fontWeight: 600, cursor: 'default',
                }}>← Voltar</button>
              )}
              <button onClick={next} style={{
                background: 'oklch(0.16 0.008 255)', color: 'white',
                border: 0, borderRadius: 999, padding: '10px 22px',
                fontFamily: 'inherit', fontSize: 13.5, fontWeight: 600,
                cursor: 'default', letterSpacing: '-0.01em',
              }}>
                {isLast ? '🎉 Começar' : 'Próximo →'}
              </button>
            </div>
          </div>
        </div> {/* fim card */}
    </>,
    document.body
  );
}

window.SearchPalette = SearchPalette;
window.MessagesPanel = MessagesPanel;
window.NotificationsPanel = NotificationsPanel;
window.ProfileMenu = ProfileMenu;
window.WelcomeTour = WelcomeTour;