/* Digi AI chat drawer (split: conversation + context panel) + Command palette */

const ChatDrawer = ({ open, onClose, seed = 'comercial' }) => {
  const [tab, setTab] = React.useState('kb');
  if (!open) return null;

  const msgs = {
    comercial: [
      { who: 'user', text: 'Prepara a visita ao Olimpo Lda amanhã às 14h.' },
      { who: 'ai', text: 'Preparei um briefing. Olimpo Lda está no Pipeline 3 há 42 dias. Último contacto: proposta UJV200 enviada a 12/03. Aviso do Financeiro: 1 fatura vencida (12.400 €, 14 dias).' },
      { who: 'ai', text: 'Sugiro abrir a visita pelo tema financeiro antes da demo. Já preparei 3 cenários de simulação: compra direta, PrintPlan e DigiRent.' },
    ],
    sat: [
      { who: 'user', text: 'UJV200 com erro E-05 na Olimpo.' },
      { who: 'ai', text: 'Erro E-05: obstrução no sistema de tinta branca. 359 manuais consultados. 3 máquinas com o mesmo erro nos últimos 60 dias.' },
      { who: 'ai', text: 'Começar pelo nível 1: verificação da cabeça de impressão branca. Escalo ao Paulo Neto se falhar no nível 3.' },
    ],
    financeiro: [
      { who: 'user', text: 'Porque é que o DSO subiu 4 dias este mês?' },
      { who: 'ai', text: 'DSO subiu de 52 para 56 dias. 3 clientes explicam 68% da subida: Olimpo Lda (+18d), Meta Print (+11d), Sigma Visual (+9d).' },
      { who: 'ai', text: 'Olimpo Lda: histórico 3 atrasos/12 meses. Sugiro credit review antes da próxima encomenda.' },
    ],
  };

  const context = msgs[seed] || msgs.comercial;

  return (
    <>
      <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(10,20,25,0.4)', backdropFilter: 'blur(4px)', zIndex: 90, animation: 'slide-up 0.2s ease' }} />
      <div className="animate-in" style={{
        position: 'fixed', right: 0, top: 0, bottom: 0,
        width: 780, maxWidth: '95vw',
        background: 'var(--bg-elev)', zIndex: 100,
        display: 'flex', boxShadow: 'var(--shadow-lg)',
        borderLeft: '1px solid var(--border)',
      }}>
        {/* LEFT: conversation */}
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
          <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--ai-500)', display: 'grid', placeItems: 'center' }}>
              <Icon name="sparkle" size={18} style={{ color: '#fff' }} />
            </div>
            <div style={{ flex: 1 }}>
              <div className="font-display" style={{ fontWeight: 600, fontSize: 14 }}>Digi AI</div>
              <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>contexto: {seed} · Mimaki · PT</div>
            </div>
            <button className="btn btn-sm btn-ghost" onClick={onClose}><Icon name="close" size={14} /></button>
          </div>

          <div style={{ flex: 1, overflowY: 'auto', padding: 18, display: 'flex', flexDirection: 'column', gap: 14 }} className="scrollbar">
            {context.map((m, i) => (
              <div key={i} style={{ display: 'flex', gap: 10, maxWidth: '88%', alignSelf: m.who === 'user' ? 'flex-end' : 'flex-start' }}>
                {m.who === 'ai' && (
                  <div style={{ width: 24, height: 24, borderRadius: 6, background: 'var(--ai-500)', display: 'grid', placeItems: 'center', flexShrink: 0, marginTop: 2 }}>
                    <Icon name="sparkle" size={12} style={{ color: '#fff' }} />
                  </div>
                )}
                <div style={{
                  padding: '10px 14px', borderRadius: 12,
                  background: m.who === 'user' ? 'var(--brand-900)' : 'var(--ai-tint)',
                  color: m.who === 'user' ? '#fff' : 'var(--text)',
                  border: m.who === 'ai' ? '1px solid color-mix(in oklch, var(--ai-500) 20%, transparent)' : 'none',
                  fontSize: 13, lineHeight: 1.55,
                }}>{m.text}</div>
              </div>
            ))}
            <div style={{ alignSelf: 'flex-start', display: 'flex', gap: 4, padding: '12px 14px' }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--ai-500)', animation: 'ai-dot 1.4s infinite 0s' }} />
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--ai-500)', animation: 'ai-dot 1.4s infinite 0.2s' }} />
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--ai-500)', animation: 'ai-dot 1.4s infinite 0.4s' }} />
            </div>
          </div>

          <div style={{ padding: 14, borderTop: '1px solid var(--border)' }}>
            <div style={{ display: 'flex', gap: 8, marginBottom: 8, flexWrap: 'wrap' }}>
              {['Abrir ficha cliente', 'Simular financiamento', 'Criar proposta'].map(s => (
                <button key={s} className="btn btn-xs">{s}</button>
              ))}
            </div>
            <div style={{ display: 'flex', gap: 8, padding: '10px 14px', border: '1px solid var(--border)', borderRadius: 12, background: 'var(--surface-muted)' }}>
              <input placeholder="Pergunta à Digi AI ou dá uma instrução…" style={{ flex: 1, border: 0, background: 'transparent', outline: 'none', fontSize: 13 }} />
              <button className="btn btn-xs btn-ai"><Icon name="send" size={12} />Enviar</button>
            </div>
          </div>
        </div>

        {/* RIGHT: context panel */}
        <div style={{ width: 320, borderLeft: '1px solid var(--border)', background: 'var(--bg)', display: 'flex', flexDirection: 'column' }}>
          <div style={{ display: 'flex', borderBottom: '1px solid var(--border)' }}>
            {[['kb', 'Fontes'], ['ctx', 'Contexto'], ['actions', 'Ações']].map(([k, l]) => (
              <button key={k} onClick={() => setTab(k)} style={{
                flex: 1, padding: '12px 8px', fontSize: 12, fontWeight: 500,
                borderBottom: tab === k ? '2px solid var(--ai-500)' : '2px solid transparent',
                color: tab === k ? 'var(--text)' : 'var(--text-muted)',
              }}>{l}</button>
            ))}
          </div>
          <div style={{ flex: 1, overflowY: 'auto', padding: 14 }} className="scrollbar">
            {tab === 'kb' && (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                <div style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', letterSpacing: '0.05em' }}>4 FONTES CITADAS</div>
                {[
                  { t: 'Ficha Olimpo Lda', src: 'CRM · atualizada 2h atrás', k: 12 },
                  { t: 'Fatura vencida FT 2026/1847', src: 'ERP · 14 dias de atraso', k: 3 },
                  { t: 'Catálogo Mimaki UJV200', src: 'KB · manual técnico', k: 28 },
                  { t: 'Histórico visitas Pipeline 3', src: 'CRM · 6 meses', k: 9 },
                ].map((s, i) => (
                  <div key={i} className="card" style={{ padding: 10, fontSize: 12 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontWeight: 500 }}>{s.t}</span>
                      <span className="font-mono" style={{ fontSize: 10, color: 'var(--text-dim)' }}>{s.k} chunks</span>
                    </div>
                    <div style={{ color: 'var(--text-muted)', fontSize: 11, marginTop: 4 }}>{s.src}</div>
                  </div>
                ))}
              </div>
            )}
            {tab === 'ctx' && (
              <div style={{ fontSize: 12, display: 'flex', flexDirection: 'column', gap: 12 }}>
                <div>
                  <div style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', marginBottom: 6 }}>CLIENTE</div>
                  <div className="card" style={{ padding: 10 }}>
                    <div style={{ fontWeight: 600 }}>Olimpo Lda</div>
                    <div style={{ color: 'var(--text-muted)', fontSize: 11 }}>Pipeline 3 · 42d · Lisboa</div>
                  </div>
                </div>
                <div>
                  <div style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', marginBottom: 6 }}>MARCA</div>
                  <div className="card" style={{ padding: 10 }}>
                    <div style={{ fontWeight: 600 }}>Mimaki</div>
                    <div style={{ color: 'var(--text-muted)', fontSize: 11 }}>UJV200 · UV flatbed</div>
                  </div>
                </div>
                <div>
                  <div style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', marginBottom: 6 }}>ALERTA CRUZADO</div>
                  <div className="card" style={{ padding: 10, borderColor: 'color-mix(in oklch, var(--danger) 30%, transparent)' }}>
                    <div style={{ display: 'flex', gap: 6, alignItems: 'center', color: 'var(--danger)' }}>
                      <Icon name="flag" size={12} /><span style={{ fontWeight: 600 }}>Financeiro</span>
                    </div>
                    <div style={{ marginTop: 4, color: 'var(--text-muted)', fontSize: 11 }}>1 fatura vencida · 14d</div>
                  </div>
                </div>
              </div>
            )}
            {tab === 'actions' && (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                {[
                  ['Criar evento agenda', 'calendar'],
                  ['Enviar email resumo', 'mail'],
                  ['Gerar proposta', 'doc'],
                  ['Abrir ficha no ERP', 'link'],
                ].map(([l, ic]) => (
                  <button key={l} className="btn btn-sm" style={{ justifyContent: 'flex-start', width: '100%' }}>
                    <Icon name={ic} size={14} />{l}
                  </button>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
    </>
  );
};

const CommandBar = ({ open, onClose }) => {
  if (!open) return null;
  const items = [
    { icon: 'sales', label: 'Ir para Comercial', kbd: 'G C' },
    { icon: 'finance', label: 'Ir para Financeiro', kbd: 'G F' },
    { icon: 'sat', label: 'Ir para SAT', kbd: 'G S' },
    { icon: 'sparkle', label: 'Perguntar à Digi AI…', kbd: '⏎', ai: true },
    { icon: 'doc', label: 'Gerar proposta Mimaki UJV200', ai: true },
    { icon: 'user', label: 'Abrir ficha Olimpo Lda' },
    { icon: 'refresh', label: 'Atualizar dashboards' },
  ];
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(10,20,25,0.5)', backdropFilter: 'blur(6px)', zIndex: 200, display: 'grid', placeItems: 'start center', paddingTop: '15vh' }}>
      <div onClick={e => e.stopPropagation()} className="card animate-in" style={{ width: 560, maxWidth: '92vw', padding: 0, overflow: 'hidden', boxShadow: 'var(--shadow-lg)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '16px 18px', borderBottom: '1px solid var(--border)' }}>
          <Icon name="command" size={16} style={{ color: 'var(--ai-500)' }} />
          <input autoFocus placeholder="Escreve um comando ou pergunta…" style={{ flex: 1, border: 0, outline: 'none', background: 'transparent', fontSize: 15 }} />
          <kbd style={{ fontFamily: 'var(--font-mono)', fontSize: 10, padding: '2px 6px', border: '1px solid var(--border)', borderRadius: 4 }}>ESC</kbd>
        </div>
        <div style={{ padding: 8, maxHeight: 360, overflowY: 'auto' }}>
          {items.map((it, i) => (
            <button key={i} style={{
              width: '100%', display: 'flex', alignItems: 'center', gap: 12,
              padding: '10px 12px', borderRadius: 8,
              background: i === 0 ? 'var(--bg-hover)' : 'transparent',
            }}>
              <div style={{ width: 28, height: 28, borderRadius: 6, background: it.ai ? 'var(--ai-tint)' : 'var(--surface-muted)', display: 'grid', placeItems: 'center', color: it.ai ? 'var(--ai-700)' : 'var(--text-muted)' }}>
                <Icon name={it.icon} size={14} />
              </div>
              <span style={{ flex: 1, textAlign: 'left', fontSize: 13 }}>{it.label}</span>
              {it.kbd && <kbd style={{ fontFamily: 'var(--font-mono)', fontSize: 10, padding: '2px 6px', border: '1px solid var(--border)', borderRadius: 4, color: 'var(--text-muted)' }}>{it.kbd}</kbd>}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};

window.ChatDrawer = ChatDrawer;
window.CommandBar = CommandBar;