/* global React, Icon, Button, Badge, Card, PageHead, Drawer, brl,
          tmSupabase, useDbListState,
          MSG_CANAIS_INFO, AGENTE_TIPOS, MODELOS_IA, timeAgo, formatPhone,
          CanalBadge, AgenteIndicator, PrioridadeBadge, MsgStatusBadge, ConvAvatar, MsgBubble, MsgKpiCards,
          BLANK_CANAL, BLANK_AGENTE, BLANK_TEMPLATE,
          CanalConfigForm, AgenteConfigForm, TemplateForm */

const { useState: useMsgState, useEffect: useMsgEffect, useRef: useMsgRef, useMemo: useMsgMemo, useCallback: useMsgCb } = React;

// ─── Mensagens Module — Page Sections ───────────────────────────────────────
// MensagensInbox, MensagensConversas, MensagensCanais, MensagensAgentes, MensagensTemplates
// ─────────────────────────────────────────────────────────────────────────────

// ─── Custom Hooks for Mensagens ─────────────────────────────────────────────

function useMensagensConversas() {
  const [conversas, setConversas] = useMsgState([]);
  const [loading, setLoading] = useMsgState(true);

  const reload = useMsgCb(async () => {
    setLoading(true);
    const { data, error } = await tmSupabase
      .from('mensagens_conversas')
      .select('*')
      .order('ultima_msg_em', { ascending: false });
    if (!error) setConversas(data || []);
    setLoading(false);
  }, []);

  useMsgEffect(() => {
    reload();
    // Subscribe to realtime changes
    const channel = tmSupabase
      .channel('conversas-changes')
      .on('postgres_changes', { event: '*', schema: 'public', table: 'mensagens_conversas' }, () => reload())
      .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'mensagens' }, () => reload())
      .subscribe();
    return () => { tmSupabase.removeChannel(channel); };
  }, [reload]);

  return { conversas, loading, reload };
}

function useMensagensThread(conversaId) {
  const [msgs, setMsgs] = useMsgState([]);
  const [loading, setLoading] = useMsgState(false);

  const reload = useMsgCb(async () => {
    if (!conversaId) { setMsgs([]); return; }
    setLoading(true);
    const { data } = await tmSupabase
      .from('mensagens')
      .select('*')
      .eq('conversa_id', conversaId)
      .order('enviada_em', { ascending: true });
    setMsgs(data || []);
    setLoading(false);

    // Mark as read
    await tmSupabase
      .from('mensagens')
      .update({ lida: true })
      .eq('conversa_id', conversaId)
      .eq('lida', false);
    await tmSupabase
      .from('mensagens_conversas')
      .update({ nao_lidas: 0 })
      .eq('id', conversaId);
  }, [conversaId]);

  useMsgEffect(() => {
    reload();
    if (!conversaId) return;
    const channel = tmSupabase
      .channel(`thread-${conversaId}`)
      .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'mensagens', filter: `conversa_id=eq.${conversaId}` }, (payload) => {
        setMsgs(prev => [...prev, payload.new]);
      })
      .subscribe();
    return () => { tmSupabase.removeChannel(channel); };
  }, [conversaId, reload]);

  return { msgs, loading, reload };
}

// ─── INBOX (Main Chat View) ─────────────────────────────────────────────────

function MensagensInbox() {
  const { conversas, loading } = useMensagensConversas();
  const [activeId, setActiveId] = useMsgState(null);
  const [filter, setFilter] = useMsgState('todas');
  const [search, setSearch] = useMsgState('');
  const [composerText, setComposerText] = useMsgState('');
  const [sending, setSending] = useMsgState(false);
  const threadEndRef = useMsgRef(null);

  const active = conversas.find(c => c.id === activeId) || null;
  const { msgs } = useMensagensThread(activeId);

  // Filter conversations
  const filtered = useMsgMemo(() => {
    let list = conversas;
    if (filter === 'nao_lidas') list = list.filter(c => c.nao_lidas > 0);
    if (filter === 'ia') list = list.filter(c => c.agente_ativo);
    if (filter === 'minhas') list = list.filter(c => !c.agente_ativo);
    if (search) {
      const s = search.toLowerCase();
      list = list.filter(c => (c.cliente_nome || '').toLowerCase().includes(s) || (c.ultima_msg || '').toLowerCase().includes(s));
    }
    return list;
  }, [conversas, filter, search]);

  // Scroll to bottom on new messages
  useMsgEffect(() => {
    threadEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [msgs.length]);

  // Send message
  const handleSend = async () => {
    if (!composerText.trim() || !activeId || sending) return;
    setSending(true);
    try {
      const res = await fetch(`${tmSupabase.supabaseUrl}/functions/v1/whatsapp-send`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${tmSupabase.supabaseKey}`,
        },
        body: JSON.stringify({
          conversa_id: activeId,
          conteudo: composerText.trim(),
          tipo_conteudo: 'text',
          autor: 'atendente',
          autor_tipo: 'atendente',
        }),
      });
      if (res.ok) setComposerText('');
    } catch (err) {
      console.error('Erro ao enviar:', err);
    }
    setSending(false);
  };

  // Toggle AI agent
  const toggleIA = async () => {
    if (!active) return;
    await tmSupabase
      .from('mensagens_conversas')
      .update({ agente_ativo: !active.agente_ativo })
      .eq('id', active.id);
  };

  const unreadCount = conversas.reduce((a, c) => a + (c.nao_lidas || 0), 0);

  return (
    <div className="inbox">
      {/* LEFT PANEL — Conversation List */}
      <div className="convs">
        <div style={{ padding: '16px 16px 12px', borderBottom: '1px solid var(--tm-line-1)' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
            <div style={{ fontFamily: 'var(--tm-font-display)', fontSize: 18 }}>Caixa de Entrada</div>
            {loading && <Icon name="loader" size={14} className="muted spin" />}
          </div>
          <div className="search" style={{ height: 32, background: 'var(--tm-bg-2)', border: '1px solid var(--tm-line-1)', borderRadius: 6, display: 'flex', alignItems: 'center', gap: 8, padding: '0 12px' }}>
            <Icon name="search" size={13} />
            <input placeholder="Buscar conversa…" value={search} onChange={e => setSearch(e.target.value)}
              style={{ background: 'transparent', border: 0, outline: 0, color: 'var(--tm-fg-1)', flex: 1, fontSize: 13, fontFamily: 'var(--tm-font-ui)' }} />
          </div>
          <div style={{ display: 'flex', gap: 6, marginTop: 12, flexWrap: 'wrap' }}>
            <span className={`chip ${filter === 'todas' ? 'active' : ''}`} onClick={() => setFilter('todas')}>Todas ({conversas.length})</span>
            <span className={`chip ${filter === 'nao_lidas' ? 'active' : ''}`} onClick={() => setFilter('nao_lidas')}>Não lidas{unreadCount > 0 ? ` (${unreadCount})` : ''}</span>
            <span className={`chip ${filter === 'ia' ? 'active' : ''}`} onClick={() => setFilter('ia')}>IA respondeu</span>
            <span className={`chip ${filter === 'minhas' ? 'active' : ''}`} onClick={() => setFilter('minhas')}>Minhas</span>
          </div>
        </div>

        {filtered.length === 0 ? (
          <div style={{ padding: '40px 16px', textAlign: 'center', color: 'var(--tm-fg-3)' }}>
            <Icon name="message-square" size={32} style={{ opacity: 0.3, marginBottom: 10 }} />
            <div style={{ fontSize: 13 }}>Nenhuma conversa</div>
            <div style={{ fontSize: 12, marginTop: 4 }}>Conecte um canal para receber mensagens</div>
          </div>
        ) : filtered.map(c => (
          <div key={c.id} className={`conv ${c.id === activeId ? 'active' : ''}`} onClick={() => setActiveId(c.id)}>
            <ConvAvatar nome={c.cliente_nome} canal={c.canal} size={40} />
            <div className="body">
              <div className="name">
                <span>{c.cliente_nome || 'Desconhecido'}</span>
                <span className="when">{timeAgo(c.ultima_msg_em)}</span>
              </div>
              <div className="preview">{c.ultima_msg || '…'}</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 5 }}>
                <CanalBadge canal={c.canal} />
                {c.agente_ativo && <AgenteIndicator ativo={true} tipo="sac" />}
                {c.nao_lidas > 0 && (
                  <span style={{ background: 'var(--tm-brand-champagne)', color: '#0B0B0D', fontSize: 10, fontWeight: 600, padding: '1px 6px', borderRadius: 999, marginLeft: 'auto' }}>
                    {c.nao_lidas}
                  </span>
                )}
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* CENTER — Thread */}
      <div className="thread">
        {!active ? (
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', color: 'var(--tm-fg-3)', gap: 10 }}>
            <Icon name="message-square" size={36} style={{ opacity: 0.3 }} />
            <div style={{ fontSize: 13 }}>Selecione uma conversa</div>
          </div>
        ) : (
          <>
            <div className="thread-head">
              <ConvAvatar nome={active.cliente_nome} canal={active.canal} size={36} />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 500 }}>{active.cliente_nome || 'Desconhecido'}</div>
                <div style={{ fontSize: 11, color: 'var(--tm-fg-3)' }}>
                  {formatPhone(active.cliente_telefone)} · {active.canal || 'WhatsApp'}
                </div>
              </div>
              <Button variant="ghost" size="sm" icon="bot" onClick={toggleIA}>
                {active.agente_ativo ? 'Pausar IA' : 'Ativar IA'}
              </Button>
              <PrioridadeBadge prioridade={active.prioridade} />
            </div>

            <div className="thread-body">
              {msgs.length === 0 && (
                <div style={{ alignSelf: 'center', fontSize: 12, color: 'var(--tm-fg-4)', padding: 20 }}>
                  Nenhuma mensagem ainda
                </div>
              )}
              {msgs.map((m, i) => <MsgBubble key={m.id || i} msg={m} />)}
              <div ref={threadEndRef} />
            </div>

            <div className="composer">
              <div className="icon-btn"><Icon name="paperclip" size={16} /></div>
              <div className="input-wrap">
                <input placeholder="Escreva uma mensagem…" value={composerText}
                  onChange={e => setComposerText(e.target.value)}
                  onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSend(); } }} />
              </div>
              <Button variant="primary" icon="send" size="md" onClick={handleSend} disabled={sending || !composerText.trim()}>
                {sending ? '…' : 'Enviar'}
              </Button>
            </div>
          </>
        )}
      </div>

      {/* RIGHT — Context Panel */}
      <div className="ctx-panel">
        {!active ? (
          <div style={{ padding: '40px 16px', textAlign: 'center', color: 'var(--tm-fg-3)' }}>
            <Icon name="user" size={28} style={{ opacity: 0.3, marginBottom: 10 }} />
            <div style={{ fontSize: 12 }}>Dados do contato aparecem aqui</div>
          </div>
        ) : (
          <>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <ConvAvatar nome={active.cliente_nome} canal={active.canal} size={48} />
              <div>
                <div style={{ fontSize: 14, fontWeight: 500 }}>{active.cliente_nome || 'Desconhecido'}</div>
                <div className="muted" style={{ fontSize: 11.5 }}>{formatPhone(active.cliente_telefone)}</div>
              </div>
            </div>

            <div style={{ display: 'flex', gap: 6, marginTop: 14 }}>
              <MsgStatusBadge status={active.status} />
              {active.agente_ativo && <AgenteIndicator ativo={true} tipo="sac" />}
            </div>

            <div className="lbl" style={{ marginTop: 16 }}>INFORMAÇÕES</div>
            <div style={{ fontSize: 12.5, color: 'var(--tm-fg-2)' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0' }}>
                <span className="muted">Canal</span><span>{active.canal || 'WhatsApp'}</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0' }}>
                <span className="muted">Criada em</span><span>{active.created_at ? new Date(active.created_at).toLocaleDateString('pt-BR') : '—'}</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0' }}>
                <span className="muted">Mensagens</span><span>{msgs.length}</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0' }}>
                <span className="muted">IA ativa</span><span>{active.agente_ativo ? 'Sim' : 'Não'}</span>
              </div>
            </div>

            <div className="lbl" style={{ marginTop: 16 }}>TAGS</div>
            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              {(active.tags || []).map(t => <span key={t} className="chip">{t}</span>)}
              <span className="chip" style={{ cursor: 'pointer' }}>+ adicionar</span>
            </div>

            <div className="lbl" style={{ marginTop: 16 }}>AÇÕES</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              <Button variant="secondary" size="sm" icon="user">Ver perfil CRM</Button>
              <Button variant="secondary" size="sm" icon="shopping-cart">Criar pedido</Button>
              <Button variant="secondary" size="sm" icon="archive" onClick={async () => {
                await tmSupabase.from('mensagens_conversas').update({ status: 'Fechada' }).eq('id', active.id);
                setActiveId(null);
              }}>Fechar conversa</Button>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

// ─── CONVERSAS (Table View) ─────────────────────────────────────────────────

function MensagensConversas() {
  const { conversas, loading } = useMensagensConversas();
  const [statusFilter, setStatusFilter] = useMsgState('Aberta');

  const filtered = conversas.filter(c => !statusFilter || c.status === statusFilter);

  return (
    <div className="canvas">
      <PageHead title="Conversas" sub={`${filtered.length} conversa${filtered.length !== 1 ? 's' : ''}`} />
      <MsgKpiCards conversas={conversas} />
      <div className="filter-bar" style={{ marginBottom: 12 }}>
        <span className={`chip ${statusFilter === 'Aberta' ? 'active' : ''}`} onClick={() => setStatusFilter('Aberta')}>Abertas</span>
        <span className={`chip ${statusFilter === 'Fechada' ? 'active' : ''}`} onClick={() => setStatusFilter('Fechada')}>Fechadas</span>
        <span className={`chip ${statusFilter === 'Escalada' ? 'active' : ''}`} onClick={() => setStatusFilter('Escalada')}>Escaladas</span>
        <span className={`chip ${!statusFilter ? 'active' : ''}`} onClick={() => setStatusFilter('')}>Todas</span>
      </div>
      <Card>
        {loading ? (
          <div style={{ padding: 40, textAlign: 'center', color: 'var(--tm-fg-3)' }}>Carregando…</div>
        ) : filtered.length === 0 ? (
          <div style={{ padding: '48px 0', textAlign: 'center', color: 'var(--tm-fg-3)' }}>
            <Icon name="message-square" size={36} style={{ opacity: 0.3, marginBottom: 12 }} />
            <div style={{ fontSize: 14 }}>Nenhuma conversa encontrada</div>
          </div>
        ) : (
          <table className="tbl">
            <thead><tr><th>Cliente</th><th>Canal</th><th>Última mensagem</th><th>IA</th><th>Status</th><th>Há</th></tr></thead>
            <tbody>
              {filtered.map(c => (
                <tr key={c.id}>
                  <td>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      <ConvAvatar nome={c.cliente_nome} canal={c.canal} size={32} />
                      <div>
                        <div style={{ fontSize: 13, fontWeight: 500 }}>{c.cliente_nome || 'Desconhecido'}</div>
                        <div className="muted" style={{ fontSize: 11 }}>{formatPhone(c.cliente_telefone)}</div>
                      </div>
                    </div>
                  </td>
                  <td><CanalBadge canal={c.canal} /></td>
                  <td className="muted" style={{ maxWidth: 300, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.ultima_msg || '…'}</td>
                  <td>{c.agente_ativo ? <AgenteIndicator ativo={true} tipo="sac" /> : <span className="muted" style={{ fontSize: 11 }}>Off</span>}</td>
                  <td><MsgStatusBadge status={c.status} /></td>
                  <td className="muted">{timeAgo(c.ultima_msg_em)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </Card>
    </div>
  );
}

// ─── CANAIS (Channel Management) ────────────────────────────────────────────

function MensagensCanais() {
  const [canais, setCanais] = useMsgState([]);
  const [loading, setLoading] = useMsgState(true);
  const [edit, setEdit] = useMsgState(null);

  const reload = async () => {
    setLoading(true);
    const { data } = await tmSupabase.from('mensagens_canais').select('*').order('created_at');
    setCanais(data || []);
    setLoading(false);
  };

  useMsgEffect(() => { reload(); }, []);

  const openNew = () => setEdit({ mode: 'new', draft: { ...BLANK_CANAL } });
  const openEdit = (c) => setEdit({ mode: 'edit', id: c.id, draft: { ...c } });
  const close = () => setEdit(null);

  const setField = (field, val) => setEdit(prev => ({ ...prev, draft: { ...prev.draft, [field]: val } }));

  const save = async () => {
    const d = edit.draft;
    if (edit.mode === 'new') {
      await tmSupabase.from('mensagens_canais').insert(d);
    } else {
      await tmSupabase.from('mensagens_canais').update(d).eq('id', edit.id);
    }
    close();
    reload();
  };

  const remove = async () => {
    if (edit?.id) {
      await tmSupabase.from('mensagens_canais').delete().eq('id', edit.id);
      close();
      reload();
    }
  };

  const testarConexao = async () => {
    if (!edit?.draft?.instance_id || !edit?.draft?.token) return;
    try {
      const res = await fetch(`https://api.z-api.io/instances/${edit.draft.instance_id}/token/${edit.draft.token}/status`);
      const data = await res.json();
      if (data.connected || data.status === 'CONNECTED') {
        setField('status', 'conectado');
        alert('✅ Conexão estabelecida!');
      } else {
        setField('status', 'desconectado');
        alert('❌ Não conectado. Verifique se o QR Code foi escaneado na Z-API.');
      }
    } catch (e) {
      alert('❌ Erro ao testar: ' + e.message);
    }
  };

  return (
    <div className="canvas">
      <PageHead title="Canais Conectados" sub="Integre WhatsApp Business, Instagram e outros canais"
        right={<Button variant="primary" icon="plus" size="sm" onClick={openNew}>Conectar novo canal</Button>} />

      <div className="grid-3">
        {canais.map(c => {
          const info = MSG_CANAIS_INFO[c.tipo] || MSG_CANAIS_INFO.whatsapp;
          return (
            <div key={c.id} className="card" style={{ padding: 20, cursor: 'pointer' }} onClick={() => openEdit(c)}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 40, height: 40, borderRadius: 10, background: info.color + '22', color: info.color, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name={info.icon} size={18} />
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 14, fontWeight: 500 }}>{c.nome}</div>
                  <div className="muted" style={{ fontSize: 11.5 }}>{c.numero ? formatPhone(c.numero) : 'Não configurado'}</div>
                </div>
                <Badge tone={c.status === 'conectado' ? 'success' : 'neutral'}>{c.status === 'conectado' ? 'Conectado' : 'Desconectado'}</Badge>
              </div>
              <div style={{ display: 'flex', gap: 18, marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--tm-line-1)' }}>
                <div>
                  <div className="muted" style={{ fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Provedor</div>
                  <div style={{ fontSize: 13, fontWeight: 500, marginTop: 2 }}>{c.provedor || 'Z-API'}</div>
                </div>
                <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center' }}>
                  <Button variant="ghost" size="sm" icon="settings">Configurar</Button>
                </div>
              </div>
            </div>
          );
        })}

        {/* Add channel card */}
        {canais.length < 5 && (
          <div className="card" style={{ padding: 20, cursor: 'pointer', border: '2px dashed var(--tm-line-1)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: 120 }}
            onClick={openNew}>
            <Icon name="plus" size={24} style={{ color: 'var(--tm-fg-4)', marginBottom: 8 }} />
            <div style={{ fontSize: 13, color: 'var(--tm-fg-3)' }}>Conectar canal</div>
          </div>
        )}
      </div>

      <CanalConfigForm edit={edit} set={setField} onSave={save} onCancel={close} onDelete={remove} onTestarConexao={testarConexao} />
    </div>
  );
}

// ─── AGENTES IA (AI Agent Management) ───────────────────────────────────────

function MensagensAgentes() {
  const [agentes, setAgentes] = useMsgState([]);
  const [canais, setCanais] = useMsgState([]);
  const [loading, setLoading] = useMsgState(true);
  const [edit, setEdit] = useMsgState(null);
  const [logs, setLogs] = useMsgState([]);
  const [showLogs, setShowLogs] = useMsgState(false);

  const reload = async () => {
    setLoading(true);
    const [agRes, canalRes] = await Promise.all([
      tmSupabase.from('mensagens_agentes').select('*').order('created_at'),
      tmSupabase.from('mensagens_canais').select('id, nome, numero'),
    ]);
    setAgentes(agRes.data || []);
    setCanais(canalRes.data || []);
    setLoading(false);
  };

  const loadLogs = async (agenteId) => {
    const { data } = await tmSupabase
      .from('mensagens_ia_log')
      .select('*')
      .eq('agente_id', agenteId)
      .order('created_at', { ascending: false })
      .limit(20);
    setLogs(data || []);
    setShowLogs(true);
  };

  useMsgEffect(() => { reload(); }, []);

  const openNew = () => setEdit({ mode: 'new', draft: { ...BLANK_AGENTE } });
  const openEdit = (a) => setEdit({ mode: 'edit', id: a.id, draft: { ...a } });
  const close = () => setEdit(null);
  const setField = (field, val) => setEdit(prev => ({ ...prev, draft: { ...prev.draft, [field]: val } }));

  const save = async () => {
    const d = { ...edit.draft };
    delete d.id;
    delete d.created_at;
    delete d.updated_at;
    if (edit.mode === 'new') {
      await tmSupabase.from('mensagens_agentes').insert(d);
    } else {
      await tmSupabase.from('mensagens_agentes').update(d).eq('id', edit.id);
    }
    close();
    reload();
  };

  const remove = async () => {
    if (edit?.id) {
      await tmSupabase.from('mensagens_agentes').delete().eq('id', edit.id);
      close();
      reload();
    }
  };

  const toggleAtivo = async (agente) => {
    await tmSupabase.from('mensagens_agentes').update({ ativo: !agente.ativo }).eq('id', agente.id);
    reload();
  };

  return (
    <div className="canvas">
      <PageHead title="Agentes de IA" sub="Configure assistentes inteligentes para atendimento automático"
        right={<Button variant="primary" icon="plus" size="sm" onClick={openNew}>Novo agente</Button>} />

      {agentes.length === 0 && !loading ? (
        <Card>
          <div style={{ padding: '48px 0', textAlign: 'center', color: 'var(--tm-fg-3)' }}>
            <Icon name="bot" size={48} style={{ opacity: 0.3, marginBottom: 12 }} />
            <div style={{ fontSize: 16, fontWeight: 500, marginBottom: 6 }}>Nenhum agente configurado</div>
            <div style={{ fontSize: 13, marginBottom: 16 }}>Crie agentes de IA para SAC, Vendas e Pós-venda</div>
            <Button variant="primary" icon="plus" onClick={openNew}>Criar primeiro agente</Button>
          </div>
        </Card>
      ) : (
        <div className="grid-2" style={{ gap: 16 }}>
          {agentes.map(a => {
            const tipoInfo = AGENTE_TIPOS.find(t => t.value === a.tipo) || AGENTE_TIPOS[0];
            return (
              <div key={a.id} className="card" style={{ padding: 20 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{
                    width: 44, height: 44, borderRadius: 12,
                    background: tipoInfo.color + '18', color: tipoInfo.color,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <Icon name={tipoInfo.icon} size={20} />
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 14, fontWeight: 600 }}>{a.nome || 'Sem nome'}</div>
                    <div className="muted" style={{ fontSize: 11.5 }}>{tipoInfo.label} · {a.modelo?.includes('haiku') ? 'Haiku' : 'Sonnet'}</div>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span style={{
                      width: 10, height: 10, borderRadius: '50%',
                      background: a.ativo ? '#5BB17A' : '#888',
                      boxShadow: a.ativo ? '0 0 6px #5BB17A55' : 'none',
                    }} />
                    <span style={{ fontSize: 11, fontWeight: 500, color: a.ativo ? '#5BB17A' : 'var(--tm-fg-4)' }}>
                      {a.ativo ? 'Ativo' : 'Inativo'}
                    </span>
                  </div>
                </div>

                <div style={{ marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--tm-line-1)', display: 'flex', gap: 16, fontSize: 12 }}>
                  <div>
                    <div className="muted" style={{ fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Horário</div>
                    <div style={{ marginTop: 2, fontWeight: 500 }}>{a.horario_inicio || '08:00'} – {a.horario_fim || '18:00'}</div>
                  </div>
                  <div>
                    <div className="muted" style={{ fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Temperatura</div>
                    <div style={{ marginTop: 2, fontWeight: 500 }}>{a.temperatura || 0.7}</div>
                  </div>
                  <div>
                    <div className="muted" style={{ fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Máx msgs</div>
                    <div style={{ marginTop: 2, fontWeight: 500 }}>{a.max_mensagens_sem_humano || 10}</div>
                  </div>
                </div>

                <div style={{ display: 'flex', gap: 6, marginTop: 14 }}>
                  <Button variant="secondary" size="sm" icon="settings" onClick={() => openEdit(a)}>Configurar</Button>
                  <Button variant="ghost" size="sm" icon={a.ativo ? 'pause' : 'play'} onClick={() => toggleAtivo(a)}>
                    {a.ativo ? 'Pausar' : 'Ativar'}
                  </Button>
                  <Button variant="ghost" size="sm" icon="activity" onClick={() => loadLogs(a.id)}>Logs</Button>
                </div>
              </div>
            );
          })}
        </div>
      )}

      {/* Logs Drawer */}
      {showLogs && (
        <Drawer open={true} title="Log de interações IA" width={600} onClose={() => setShowLogs(false)}
          footer={<Button variant="secondary" size="sm" onClick={() => setShowLogs(false)}>Fechar</Button>}>
          {logs.length === 0 ? (
            <div style={{ padding: 20, textAlign: 'center', color: 'var(--tm-fg-3)' }}>Nenhuma interação registrada</div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {logs.map(l => (
                <div key={l.id} style={{ padding: 12, background: 'var(--tm-bg-2)', borderRadius: 8 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                    <Badge tone={l.acao === 'respondeu' ? 'success' : l.acao === 'escalou' ? 'warning' : 'danger'}>{l.acao}</Badge>
                    <span className="muted" style={{ fontSize: 11, marginLeft: 'auto' }}>
                      {new Date(l.created_at).toLocaleString('pt-BR')}
                    </span>
                  </div>
                  <div style={{ fontSize: 12, marginBottom: 4 }}>
                    <strong>Entrada:</strong> {(l.mensagem_entrada || '').slice(0, 100)}
                  </div>
                  <div style={{ fontSize: 12, marginBottom: 4 }}>
                    <strong>Resposta:</strong> {(l.resposta_gerada || '').slice(0, 150)}
                  </div>
                  <div className="muted" style={{ fontSize: 11 }}>
                    {l.tokens_input}→{l.tokens_output} tokens · {l.latencia_ms}ms
                    {l.motivo_escalacao && ` · ${l.motivo_escalacao}`}
                  </div>
                </div>
              ))}
            </div>
          )}
        </Drawer>
      )}

      <AgenteConfigForm edit={edit} set={setField} onSave={save} onCancel={close} onDelete={remove} canais={canais} />
    </div>
  );
}

// ─── TEMPLATES (Quick Replies) ──────────────────────────────────────────────

function MensagensTemplates() {
  const [templates, setTemplates] = useMsgState([]);
  const [loading, setLoading] = useMsgState(true);
  const [edit, setEdit] = useMsgState(null);

  const reload = async () => {
    setLoading(true);
    const { data } = await tmSupabase.from('mensagens_templates').select('*').order('categoria, nome');
    setTemplates(data || []);
    setLoading(false);
  };

  useMsgEffect(() => { reload(); }, []);

  const openNew = () => setEdit({ mode: 'new', draft: { ...BLANK_TEMPLATE } });
  const openEdit = (t) => setEdit({ mode: 'edit', id: t.id, draft: { ...t } });
  const close = () => setEdit(null);
  const setField = (field, val) => setEdit(prev => ({ ...prev, draft: { ...prev.draft, [field]: val } }));

  const save = async () => {
    const d = { ...edit.draft };
    delete d.id;
    delete d.created_at;
    // Detect variables
    const vars = [...new Set((d.conteudo || '').match(/\{\{(\w+)\}\}/g)?.map(v => v.replace(/[{}]/g, '')) || [])];
    d.variaveis = vars;
    if (edit.mode === 'new') {
      await tmSupabase.from('mensagens_templates').insert(d);
    } else {
      await tmSupabase.from('mensagens_templates').update(d).eq('id', edit.id);
    }
    close();
    reload();
  };

  const remove = async () => {
    if (edit?.id) {
      await tmSupabase.from('mensagens_templates').delete().eq('id', edit.id);
      close();
      reload();
    }
  };

  // Group by category
  const grouped = templates.reduce((acc, t) => {
    const cat = t.categoria || 'geral';
    if (!acc[cat]) acc[cat] = [];
    acc[cat].push(t);
    return acc;
  }, {});

  return (
    <div className="canvas">
      <PageHead title="Templates de Mensagem" sub="Respostas rápidas para agilizar o atendimento"
        right={<Button variant="primary" icon="plus" size="sm" onClick={openNew}>Novo template</Button>} />

      {templates.length === 0 && !loading ? (
        <Card>
          <div style={{ padding: '48px 0', textAlign: 'center', color: 'var(--tm-fg-3)' }}>
            <Icon name="file-text" size={36} style={{ opacity: 0.3, marginBottom: 12 }} />
            <div style={{ fontSize: 14, marginBottom: 6 }}>Nenhum template criado</div>
            <div style={{ fontSize: 12, marginBottom: 16 }}>Crie modelos de mensagem para respostas rápidas</div>
            <Button variant="primary" icon="plus" onClick={openNew}>Criar template</Button>
          </div>
        </Card>
      ) : (
        Object.entries(grouped).map(([cat, items]) => (
          <div key={cat} style={{ marginBottom: 20 }}>
            <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--tm-fg-4)', marginBottom: 8 }}>
              {cat}
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {items.map(t => (
                <div key={t.id} className="card" style={{ padding: '12px 16px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 12 }}
                  onClick={() => openEdit(t)}>
                  <Icon name="file-text" size={16} style={{ color: 'var(--tm-fg-4)' }} />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 500 }}>{t.nome}</div>
                    <div className="muted" style={{ fontSize: 11.5, marginTop: 2, maxWidth: 400, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                      {t.conteudo}
                    </div>
                  </div>
                  {t.atalho && <code style={{ fontSize: 11, background: 'var(--tm-bg-2)', padding: '2px 6px', borderRadius: 4 }}>{t.atalho}</code>}
                  <Badge tone={t.ativo ? 'success' : 'neutral'}>{t.ativo ? 'Ativo' : 'Inativo'}</Badge>
                </div>
              ))}
            </div>
          </div>
        ))
      )}

      <TemplateForm edit={edit} set={setField} onSave={save} onCancel={close} onDelete={remove} />
    </div>
  );
}

// ─── Tabs Component ─────────────────────────────────────────────────────────

function MensagensTabs({ active, onNav }) {
  const tabs = [
    { id: 'mensagens',           label: 'Inbox',      icon: 'inbox' },
    { id: 'mensagens/conversas', label: 'Conversas',  icon: 'message-square' },
    { id: 'mensagens/canais',    label: 'Canais',     icon: 'radio' },
    { id: 'mensagens/agentes',   label: 'Agentes IA', icon: 'bot' },
    { id: 'mensagens/templates', label: 'Templates',  icon: 'file-text' },
  ];
  return (
    <nav className="tabs" style={{ marginBottom: 16 }}>
      {tabs.map(t => (
        <button key={t.id} className={`tab ${active === t.id ? 'active' : ''}`}
          onClick={() => onNav(t.id)}>
          <Icon name={t.icon} size={14} />{t.label}
        </button>
      ))}
    </nav>
  );
}

// ─── Exports ────────────────────────────────────────────────────────────────

Object.assign(window, {
  MensagensInbox, MensagensConversas, MensagensCanais, MensagensAgentes, MensagensTemplates, MensagensTabs,
});