/* global React, Icon, BRL, Ticker, Drawer */

// ============ INTEGRATIONS CATALOG ============
const INTEGRACOES = [
  {
    id: 'openai', nome: 'OpenAI', cat: 'IA', cor: '#10a37f', logo: 'OAI',
    desc: 'ChatGPT/GPT-4 para análise de e-mails, geração de pareceres e diagnóstico da IA Gerente.',
    campos: [
      { id: 'apiKey', label: 'API Key', tipo: 'secret', serverManaged: true, req: false, hint: 'A chave fica nos Secrets do Supabase (servidor). Nunca é salva no navegador.' },
      { id: 'modelo', label: 'Modelo padrão', tipo: 'select', opcoes: ['gpt-4-turbo', 'gpt-4o', 'gpt-4o-mini', 'gpt-3.5-turbo'], default: 'gpt-4o', req: true },
      { id: 'temperatura', label: 'Temperatura', tipo: 'number', min: 0, max: 2, step: 0.1, default: 0.3, req: false, hint: '0 = determinístico · 2 = criativo' },
      { id: 'maxTokens', label: 'Máx. tokens por resposta', tipo: 'number', default: 2000, req: false },
      { id: 'org', label: 'Organization ID (opcional)', tipo: 'text', placeholder: 'org-...', req: false },
    ],
    mapeamentos: [
      { de: 'Análise de e-mails (M08)', para: 'gpt-4o + temperatura 0.2', editavel: true },
      { de: 'Geração de pareceres (M12)', para: 'gpt-4-turbo + temperatura 0.4', editavel: true },
      { de: 'Sugestões IA (M05, M07)', para: 'gpt-4o-mini + temperatura 0.3', editavel: true },
      { de: 'Chat conversacional (M08)', para: 'gpt-4o + streaming ativado', editavel: true },
    ],
    docsUrl: 'https://platform.openai.com/docs',
  },
  {
    id: 'focus', nome: 'Focus NFe', cat: 'FISCAL', cor: '#f5b544', logo: 'FNF',
    desc: 'Emissão de NFe, NFCe e NFSe diretamente da SEFAZ. Usado em M07 (NF emitida) e M11 (NFC-e do PDV).',
    campos: [
      { id: 'token', label: 'Token de acesso', tipo: 'secret', placeholder: 'Token gerado no painel Focus', req: true },
      { id: 'ambiente', label: 'Ambiente', tipo: 'radio', opcoes: ['homologacao', 'producao'], default: 'homologacao', req: true },
      { id: 'cnpjEmitente', label: 'CNPJ emitente', tipo: 'text', placeholder: '00.000.000/0000-00', default: '33.804.351/0001-04', req: true },
      { id: 'serieNFe', label: 'Série NF-e', tipo: 'number', default: 1, req: true },
      { id: 'serieNFCe', label: 'Série NFC-e', tipo: 'number', default: 1, req: true },
      { id: 'naturezaPadrao', label: 'Natureza operação padrão', tipo: 'text', default: 'Venda de mercadoria', req: false },
    ],
    mapeamentos: [
      { de: 'NFe de venda (Empenho)', para: 'CFOP 5102/6102 · NCM por SKU', editavel: true },
      { de: 'NFCe do PDV', para: 'CFOP 5102 · ICMS 18%', editavel: true },
      { de: 'NFe de devolução', para: 'CFOP 5202/6202 · referenciada', editavel: true },
    ],
    docsUrl: 'https://focusnfe.com.br/doc',
  },
  {
    id: 'pncp', nome: 'PNCP', cat: 'LICITAÇÃO', cor: '#1e6091', logo: 'PNC',
    desc: 'Portal Nacional de Contratações Públicas. Captura automática de editais em todo o Brasil.',
    campos: [
      { id: 'token', label: 'Token PNCP', tipo: 'secret', placeholder: 'Token obtido em painel.pncp.gov.br', req: true },
      { id: 'cnpjMonitor', label: 'CNPJ para monitoramento', tipo: 'text', default: '33.804.351/0001-04', req: true },
      { id: 'ufs', label: 'UFs monitoradas (vírgula)', tipo: 'text', default: 'RJ,SP,ES,MG,SC,PR,RS', req: true },
      { id: 'frequencia', label: 'Frequência de varredura', tipo: 'select', opcoes: ['1 min', '5 min', '15 min', '30 min', '1 hora'], default: '5 min', req: true },
    ],
    mapeamentos: [
      { de: 'Edital novo no PNCP', para: 'M01 Prospecção · cruzar NCMs', editavel: true },
      { de: 'Esclarecimento publicado', para: 'M08 IA · alerta no card do edital', editavel: true },
      { de: 'Convocação amostras', para: 'M06 Logística · gerar postagem', editavel: true },
    ],
    docsUrl: 'https://www.gov.br/pncp/pt-br/acesso-a-informacao/manuais',
  },
  {
    id: 'sefaz', nome: 'SEFAZ Nacional', cat: 'FISCAL', cor: '#003366', logo: 'SFZ',
    desc: 'Captura automática de NFs emitidas contra a BTM (para criação de CAP) + consulta de status NFe.',
    campos: [
      { id: 'certPath', label: 'Caminho do certificado A1/A3', tipo: 'text', placeholder: '/path/cert.pfx ou identificador A3', req: true },
      { id: 'certSenha', label: 'Senha do certificado', tipo: 'secret', req: true },
      { id: 'uf', label: 'UF principal', tipo: 'select', opcoes: ['RJ', 'SP', 'ES', 'MG', 'SC', 'PR', 'RS', 'BA', 'CE', 'DF', 'GO', 'PE', 'MT', 'MS'], default: 'RJ', req: true },
      { id: 'cnpj', label: 'CNPJ', tipo: 'text', default: '33.804.351/0001-04', req: true },
      { id: 'pollIntervalo', label: 'Intervalo de captura (min)', tipo: 'number', default: 30, req: false },
    ],
    mapeamentos: [
      { de: 'NF de fornecedor capturada', para: 'M07 · NF contra BTM (aprovação manual)', editavel: false },
      { de: 'NFe própria emitida', para: 'M07 · CAR criado automaticamente', editavel: false },
    ],
    docsUrl: 'https://www.nfe.fazenda.gov.br',
  },
  {
    id: 'bb', nome: 'Banco do Brasil', cat: 'BANCO', cor: '#f9b233', logo: 'BB',
    desc: 'Open Banking BB · consulta de extrato, geração de PIX cobrança, conciliação automática.',
    campos: [
      { id: 'clientId', label: 'Client ID', tipo: 'text', placeholder: 'Client ID do app BB', req: true },
      { id: 'clientSecret', label: 'Client Secret', tipo: 'secret', req: true },
      { id: 'agencia', label: 'Agência', tipo: 'text', default: '1234', req: true },
      { id: 'conta', label: 'Conta corrente', tipo: 'text', default: '12.847-3', req: true },
      { id: 'ambiente', label: 'Ambiente OAuth2', tipo: 'radio', opcoes: ['homologacao', 'producao'], default: 'homologacao', req: true },
      { id: 'pixChave', label: 'Chave PIX padrão', tipo: 'text', placeholder: 'CNPJ ou aleatória', default: '33804351000104', req: false },
    ],
    mapeamentos: [
      { de: 'Extrato diário', para: 'M07 Conciliação automática', editavel: false },
      { de: 'PIX recebido', para: 'M07 · baixar CAR correspondente', editavel: true },
      { de: 'Boleto pago', para: 'M07 · baixar CAP correspondente', editavel: true },
    ],
    docsUrl: 'https://developers.bb.com.br',
  },
  {
    id: 'correios', nome: 'Correios', cat: 'LOGÍSTICA', cor: '#003399', logo: 'COR',
    desc: 'Cotação de frete, geração de etiquetas SEDEX/PAC e rastreio automático.',
    campos: [
      { id: 'usuario', label: 'Usuário SIGEP', tipo: 'text', req: true },
      { id: 'senha', label: 'Senha SIGEP', tipo: 'secret', req: true },
      { id: 'codAdmin', label: 'Código administrativo', tipo: 'text', placeholder: '00000000', req: true },
      { id: 'contrato', label: 'Número do contrato', tipo: 'text', placeholder: '0000000000', req: true },
      { id: 'cartao', label: 'Cartão de postagem', tipo: 'text', placeholder: '0000000000', req: true },
      { id: 'cepOrigem', label: 'CEP de origem', tipo: 'text', default: '20021-130', req: true },
    ],
    mapeamentos: [
      { de: 'Pedido despachado (M06)', para: 'Gera etiqueta + rastreio automático', editavel: false },
      { de: 'Rastreio atualizado', para: 'M06 · timeline da postagem', editavel: false },
      { de: 'Cotação de frete (M03)', para: 'Tabela frete por região (M03 aba Frete)', editavel: true },
    ],
    docsUrl: 'https://cws.correios.com.br',
  },
  {
    id: 'google', nome: 'Google Workspace', cat: 'COMUNICAÇÃO', cor: '#4285f4', logo: 'GWS',
    desc: 'Drive como espelho de processos · Gmail como fonte de e-mails para o M08 · Calendar para Agenda IA.',
    campos: [
      { id: 'clientId', label: 'OAuth Client ID', tipo: 'text', placeholder: '0000000000-xxxx.apps.googleusercontent.com', req: true },
      { id: 'clientSecret', label: 'OAuth Client Secret', tipo: 'secret', req: true },
      { id: 'dominio', label: 'Domínio Workspace', tipo: 'text', placeholder: 'btmsigma.com', default: 'btmsigma.com', req: true },
      { id: 'escopos', label: 'Escopos solicitados', tipo: 'tags', default: ['drive', 'gmail.readonly', 'calendar'], req: true },
      { id: 'pastaRaiz', label: 'Pasta raiz no Drive', tipo: 'text', default: 'BTM-SGL', req: false },
    ],
    mapeamentos: [
      { de: 'E-mail recebido', para: 'M08 IA · classificação automática', editavel: false },
      { de: 'Edital capturado', para: 'Drive · criar pasta espelho do edital', editavel: false },
      { de: 'Prazo detectado pela IA', para: 'Calendar · criar evento', editavel: true },
    ],
    docsUrl: 'https://developers.google.com/workspace',
  },
  {
    id: 'whatsapp', nome: 'WhatsApp Business API', cat: 'COMUNICAÇÃO', cor: '#25d366', logo: 'WAB',
    desc: 'Mensagens com pregoeiros, fornecedores e clientes via WhatsApp Cloud API (Meta).',
    campos: [
      { id: 'phoneNumberId', label: 'Phone Number ID', tipo: 'text', placeholder: '1234567890', req: true },
      { id: 'token', label: 'Token permanente Meta', tipo: 'secret', placeholder: 'EAAxxxxx...', req: true },
      { id: 'businessAccountId', label: 'WhatsApp Business Account ID', tipo: 'text', req: true },
      { id: 'webhookUrl', label: 'Webhook URL (entrada)', tipo: 'text', default: 'https://sgl.btmsigma.com/webhook/whatsapp', req: false },
      { id: 'webhookToken', label: 'Verify token webhook', tipo: 'secret', req: false },
    ],
    mapeamentos: [
      { de: 'Mensagem recebida', para: 'M09 Comunicação · auto-categoriza', editavel: false },
      { de: 'Empenho aprovado (M05)', para: 'WhatsApp · notifica cliente', editavel: true },
      { de: 'Entrega confirmada (M06)', para: 'WhatsApp · agradece cliente', editavel: true },
    ],
    docsUrl: 'https://developers.facebook.com/docs/whatsapp',
  },
  {
    id: 'telefonia', nome: 'Telefonia / VoIP', cat: 'COMUNICAÇÃO', cor: '#9b59b6', logo: 'VOP',
    desc: 'Disque corporativo com gravação de chamadas e ata automática pela IA. Suporta Twilio/3CX/Asterisk.',
    campos: [
      { id: 'provedor', label: 'Provedor', tipo: 'select', opcoes: ['Twilio', '3CX', 'Asterisk', 'TotalVoice', 'outro'], default: 'Twilio', req: true },
      { id: 'apiKey', label: 'API Key', tipo: 'secret', req: true },
      { id: 'apiSecret', label: 'API Secret', tipo: 'secret', req: false },
      { id: 'numeroPrincipal', label: 'Número principal', tipo: 'text', placeholder: '+55 21 0000-0000', default: '+55 21 2620-1500', req: true },
      { id: 'gravarChamadas', label: 'Gravar chamadas', tipo: 'toggle', default: true, req: false, hint: 'LGPD: aviso sonoro obrigatório' },
      { id: 'transcrever', label: 'Transcrição automática IA', tipo: 'toggle', default: true, req: false },
    ],
    mapeamentos: [
      { de: 'Chamada finalizada', para: 'M09 Telefonia · histórico + ata IA', editavel: false },
      { de: 'Áudio gravado', para: 'Drive · pasta /chamadas/{ano-mes}', editavel: true },
    ],
    docsUrl: 'https://www.twilio.com/docs',
  },
  {
    id: 'smtp', nome: 'SMTP / IMAP customizado', cat: 'COMUNICAÇÃO', cor: '#7a7770', logo: 'EML',
    desc: 'Servidor de e-mail próprio (alternativa ao Gmail) para captura de e-mails do M08.',
    campos: [
      { id: 'imapHost', label: 'IMAP Host', tipo: 'text', placeholder: 'imap.btmsigma.com', req: true },
      { id: 'imapPort', label: 'IMAP Porta', tipo: 'number', default: 993, req: true },
      { id: 'smtpHost', label: 'SMTP Host', tipo: 'text', placeholder: 'smtp.btmsigma.com', req: true },
      { id: 'smtpPort', label: 'SMTP Porta', tipo: 'number', default: 587, req: true },
      { id: 'usuario', label: 'Usuário', tipo: 'text', placeholder: 'sgl@btmsigma.com', req: true },
      { id: 'senha', label: 'Senha', tipo: 'secret', req: true },
      { id: 'ssl', label: 'Usar SSL/TLS', tipo: 'toggle', default: true, req: false },
    ],
    mapeamentos: [
      { de: 'E-mail recebido (IMAP)', para: 'M08 IA · classificação automática', editavel: false },
      { de: 'Resposta automática IA', para: 'SMTP · envio com timbre BTM', editavel: true },
    ],
    docsUrl: '',
  },
];

const CAT_COLORS = {
  'IA': 'badge-cyan',
  'FISCAL': 'badge-amber',
  'LICITAÇÃO': 'badge-lime',
  'BANCO': 'badge-lime',
  'LOGÍSTICA': 'badge-cyan',
  'COMUNICAÇÃO': 'badge-violet',
};

// ============ STORAGE ============
const STORAGE_KEY = 'sgl_config_v1';
function loadConfig() {
  try {
    return JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
  } catch {
    return {};
  }
}
function saveConfig(c) {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(c));
}

const DEFAULT_EMPRESA = {
  cnpj: '33.804.351/0001-04',
  razao: 'BTM Serviços e Comércio LTDA',
  fantasia: 'BTM',
  ie: '12.345.678-9',
  im: '0000000-0',
  atividade: '4647-8/01 — Comércio atacadista de artigos de escritório e papelaria',
  cep: '20021-130',
  logradouro: 'Rua São Bento, 248',
  numero: '248',
  complemento: 'Sala 1402',
  bairro: 'Centro',
  cidade: 'Rio de Janeiro',
  uf: 'RJ',
  telefone: '(21) 2620-1500',
  email: 'contato@btmsigma.com',
  regime: 'lucro-real',
  anexoSimples: '',
  rbt12: '4800000',
  certVencimento: '2027-03-14',
  certEmissor: 'AC Certisign Mult. G7',
  certTipo: 'A3 · Token físico',
  contas: [
    { id: 'c1', banco: 'Banco do Brasil', agencia: '1234-5', conta: '12.847-3', tipo: 'CC', pix: '33804351000104', principal: true },
    { id: 'c2', banco: 'Itaú', agencia: '0291', conta: '38201-1', tipo: 'CC', pix: '', principal: false },
    { id: 'c3', banco: 'Sicredi', agencia: '4710', conta: '5210-X', tipo: 'CC', pix: '', principal: false },
  ],
};

// ============ MODULE ============
function MConfig({ onNav }) {
  const [tab, setTab] = React.useState('integracoes');
  const [config, setConfig] = React.useState(loadConfig);
  const [drawer, setDrawer] = React.useState(null);
  const [drawerTab, setDrawerTab] = React.useState('conexao');

  const empresa = { ...DEFAULT_EMPRESA, ...(config.empresa || {}) };

  const updateIntegracao = (id, valores) => {
    const novo = { ...config, integracoes: { ...(config.integracoes || {}), [id]: valores } };
    setConfig(novo);
    saveConfig(novo);
  };

  const updateEmpresa = (campo, valor) => {
    const novo = { ...config, empresa: { ...empresa, [campo]: valor } };
    setConfig(novo);
    saveConfig(novo);
  };

  const updateContas = (contas) => {
    const novo = { ...config, empresa: { ...empresa, contas } };
    setConfig(novo);
    saveConfig(novo);
  };

  const totalConfiguradas = INTEGRACOES.filter(i => {
    const c = config.integracoes?.[i.id];
    return c && i.campos.filter(f => f.req).every(f => c[f.id]);
  }).length;

  return (
    <>
      <Ticker />
      <div className="page">
        <div className="page-header">
          <div>
            <div className="eyebrow"><span>Configurações do Sistema</span><span className="chip">M13</span></div>
            <h1 className="page-title">Integrações API · Dados da Empresa</h1>
            <p className="page-sub">Centro de configurações da BTM SGL. Conexões com APIs externas (OpenAI, Focus NFe, PNCP, etc.) e dados cadastrais que alimentam todos os módulos.</p>
          </div>
          <div className="flex items-center gap-3">
            <span className="badge badge-lime">{totalConfiguradas}/{INTEGRACOES.length} INTEGRAÇÕES PRONTAS</span>
            <button className="btn"><Icon name="download" /> Exportar config</button>
          </div>
        </div>

        <div className="tabs" style={{ marginBottom: 14 }}>
          <div className={`tab ${tab === 'integracoes' ? 'active' : ''}`} onClick={() => setTab('integracoes')}>
            Integrações API <span className="count">{INTEGRACOES.length}</span>
          </div>
          <div className={`tab ${tab === 'empresa' ? 'active' : ''}`} onClick={() => setTab('empresa')}>
            Dados da Empresa
          </div>
        </div>

        {tab === 'integracoes' && <IntegracoesGrid config={config} onOpen={(int) => { setDrawer(int); setDrawerTab('conexao'); }} />}
        {tab === 'empresa' && <EmpresaTab empresa={empresa} onUpdate={updateEmpresa} onUpdateContas={updateContas} />}
      </div>

      {drawer && (
        <IntegracaoDrawer
          integracao={drawer}
          valores={config.integracoes?.[drawer.id] || {}}
          onSave={(v) => updateIntegracao(drawer.id, v)}
          onClose={() => setDrawer(null)}
          tab={drawerTab}
          onTab={setDrawerTab}
        />
      )}
    </>
  );
}

// ============ INTEGRAÇÕES GRID ============
function IntegracoesGrid({ config, onOpen }) {
  return (
    <div>
      <div className="alert-banner alert-cyan" style={{ marginBottom: 14 }}>
        <Icon name="info" size={13} />
        <div>
          <strong>Configurações pré-API</strong>
          <div style={{ fontSize: 11.5, color: 'var(--fg-2)', marginTop: 2 }}>
            Os campos abaixo serão preenchidos com as credenciais reais quando as conexões forem habilitadas. Hoje, todas as integrações estão em modo simulado (mock). Os dados configurados persistem localmente (localStorage).
          </div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
        {INTEGRACOES.map(int => {
          const valores = config.integracoes?.[int.id] || {};
          const reqCampos = int.campos.filter(c => c.req);
          // Campo obrigatório com valor padrão já conta como preenchido.
          const preenchidos = reqCampos.filter(c => valores[c.id] || c.default !== undefined).length;
          const status =
            preenchidos === 0 ? { label: 'NÃO CONFIGURADO', cls: '', dot: 'var(--fg-3)' } :
            preenchidos < reqCampos.length ? { label: 'INCOMPLETO', cls: 'badge-amber', dot: 'var(--amber)' } :
            { label: 'CONFIGURADO', cls: 'badge-lime', dot: 'var(--lime)' };

          return (
            <div key={int.id} className="card clickable" onClick={() => onOpen(int)} style={{ padding: 16 }}>
              <div className="flex items-center gap-3" style={{ marginBottom: 12 }}>
                <div style={{ width: 44, height: 44, borderRadius: 8, background: int.cor, color: '#fff', display: 'grid', placeItems: 'center', fontWeight: 700, fontFamily: 'IBM Plex Mono', fontSize: 11.5, letterSpacing: 0.5 }}>{int.logo}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
                    <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg-0)' }}>{int.nome}</span>
                    <span className={`badge ${CAT_COLORS[int.cat] || ''}`} style={{ fontSize: 9.5 }}>{int.cat}</span>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    <span style={{ width: 6, height: 6, borderRadius: '50%', background: status.dot, boxShadow: status.dot === 'var(--lime)' ? `0 0 6px ${status.dot}` : 'none' }}></span>
                    <span className="mono" style={{ fontSize: 10.5, color: status.cls === 'badge-lime' ? 'var(--lime)' : status.cls === 'badge-amber' ? 'var(--amber)' : 'var(--fg-3)' }}>{status.label}</span>
                    <span style={{ fontSize: 10.5, color: 'var(--fg-3)', marginLeft: 'auto', fontFamily: 'IBM Plex Mono' }}>{preenchidos}/{reqCampos.length} campos req.</span>
                  </div>
                </div>
              </div>

              <div style={{ fontSize: 11.5, color: 'var(--fg-2)', lineHeight: 1.5, marginBottom: 12 }}>
                {int.desc}
              </div>

              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 10.5, color: 'var(--fg-3)', fontFamily: 'IBM Plex Mono' }}>
                <span>{int.campos.length} parâmetros · {int.mapeamentos.length} mapeamentos</span>
                <span style={{ color: 'var(--cyan)' }}>Configurar →</span>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ============ INTEGRAÇÃO DRAWER ============
function IntegracaoDrawer({ integracao, valores, onSave, onClose, tab, onTab }) {
  const [edited, setEdited] = React.useState({});
  const [testing, setTesting] = React.useState(false);
  const [testResult, setTestResult] = React.useState(null);
  const merged = { ...valores, ...edited };
  const reqCampos = integracao.campos.filter(c => c.req);
  // Campo obrigatório com valor padrão já conta como preenchido.
  const preenchidos = reqCampos.filter(c => merged[c.id] || c.default !== undefined).length;
  const completo = preenchidos === reqCampos.length;
  const isOpenAI = integracao.id === 'openai';

  const handleSave = () => {
    onSave(merged);
    setEdited({});
  };

  const handleTest = async () => {
    setTesting(true);
    setTestResult(null);
    try {
      const r = await window.testOpenAI();
      setTestResult(r);
    } catch (e) {
      setTestResult({ ok: false, error: (e && e.message) || 'Erro inesperado ao testar.' });
    } finally {
      setTesting(false);
    }
  };

  return (
    <Drawer
      open={true}
      onClose={onClose}
      eyebrow={<><span>Integração · {integracao.cat}</span><span className="chip">M13</span><span className={`badge ${completo ? 'badge-lime' : 'badge-amber'}`}>{completo ? 'CONFIGURADO' : preenchidos === 0 ? 'NÃO CONFIGURADO' : 'INCOMPLETO'}</span></>}
      title={
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 28, height: 28, borderRadius: 5, background: integracao.cor, color: '#fff', display: 'grid', placeItems: 'center', fontWeight: 700, fontFamily: 'IBM Plex Mono', fontSize: 10 }}>{integracao.logo}</div>
          <span style={{ fontWeight: 600 }}>{integracao.nome}</span>
        </div>
      }
      subtitle={integracao.desc}
      tabs={[
        { id: 'conexao', label: 'Conexão', count: preenchidos + '/' + reqCampos.length },
        { id: 'map', label: 'Mapeamentos', count: integracao.mapeamentos.length },
        { id: 'logs', label: 'Logs' },
      ]}
      activeTab={tab}
      onTabChange={onTab}
      footer={
        <>
          {integracao.docsUrl && (
            <a href={integracao.docsUrl} target="_blank" rel="noopener noreferrer" className="btn" style={{ textDecoration: 'none' }}>
              <Icon name="link" /> Documentação
            </a>
          )}
          <button className="btn" onClick={isOpenAI ? handleTest : undefined} disabled={isOpenAI ? testing : !completo}>
            <Icon name="bolt" /> {isOpenAI && testing ? 'Testando…' : 'Testar conexão'}
          </button>
          <button className="btn btn-primary" style={{ flex: 1, justifyContent: 'center' }} onClick={handleSave} disabled={Object.keys(edited).length === 0}>
            <Icon name="check" /> {Object.keys(edited).length > 0 ? `Salvar ${Object.keys(edited).length} alteração(ões)` : 'Sem alterações'}
          </button>
        </>
      }
    >
      {tab === 'conexao' && <TabConexao integracao={integracao} merged={merged} setEdited={setEdited} edited={edited} valores={valores} isOpenAI={isOpenAI} testResult={testResult} testing={testing} />}
      {tab === 'map' && <TabMapeamentos integracao={integracao} />}
      {tab === 'logs' && <TabLogs integracao={integracao} />}
    </Drawer>
  );
}

function ServerManagedField({ campo }) {
  return (
    <div>
      <div className="field-label">{campo.label}</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 12px', background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderRadius: 6 }}>
        <Icon name="shield" size={14} style={{ color: 'var(--lime)' }} />
        <span style={{ fontSize: 12.5, color: 'var(--fg-1)' }}>Gerenciada no servidor (Supabase Secrets)</span>
        <span className="badge badge-lime" style={{ marginLeft: 'auto', fontSize: 9.5 }}>SEGURO</span>
      </div>
      {campo.hint && <div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 4 }}>{campo.hint}</div>}
    </div>
  );
}

function TestResultBanner({ result }) {
  if (!result) return null;
  if (result.ok) {
    return (
      <div className="alert-banner alert-lime" style={{ marginBottom: 14 }}>
        <Icon name="check" size={13} />
        <div>
          <strong>Conexão OK</strong>
          <div style={{ fontSize: 11.5, color: 'var(--fg-2)', marginTop: 2 }}>
            {result.modelos} modelos disponíveis · resposta em {result.latencia}ms.
          </div>
        </div>
      </div>
    );
  }
  return (
    <div className="alert-banner alert-red" style={{ marginBottom: 14 }}>
      <Icon name="warn" size={13} />
      <div>
        <strong>Falha na conexão</strong>
        <div style={{ fontSize: 11.5, color: 'var(--fg-2)', marginTop: 2 }}>{result.error}</div>
      </div>
    </div>
  );
}

function TabConexao({ integracao, merged, setEdited, edited, valores, isOpenAI, testResult, testing }) {
  const setCampo = (id, v) => setEdited({ ...edited, [id]: v });
  return (
    <div style={{ padding: 18 }}>
      {isOpenAI && testing && (
        <div className="alert-banner alert-cyan" style={{ marginBottom: 14 }}>
          <Icon name="bolt" size={13} />
          Testando conexão com a OpenAI…
        </div>
      )}
      {isOpenAI && !testing && <TestResultBanner result={testResult} />}

      <div className="field-label" style={{ marginBottom: 14 }}>PARÂMETROS DE CONEXÃO</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginBottom: 18 }}>
        {integracao.campos.map(c => (
          c.serverManaged
            ? <ServerManagedField key={c.id} campo={c} />
            : <CampoInput key={c.id} campo={c} valor={merged[c.id] ?? c.default ?? ''} onChange={(v) => setCampo(c.id, v)} />
        ))}
      </div>

      <div className="alert-banner alert-amber">
        <Icon name="warn" size={13} />
        <div>
          <strong>Credenciais sensíveis</strong>
          <div style={{ fontSize: 11.5, color: 'var(--fg-2)', marginTop: 2 }}>
            Em produção, as chaves/tokens serão armazenadas criptografadas no servidor (AES-256). Hoje, persistem no localStorage do navegador apenas para testes da interface.
          </div>
        </div>
      </div>

      {Object.keys(edited).length > 0 && (
        <div className="alert-banner alert-cyan" style={{ marginTop: 12 }}>
          <Icon name="edit" size={13} />
          {Object.keys(edited).length} campo(s) modificado(s) — clique em <strong>Salvar</strong> no rodapé para persistir.
        </div>
      )}
    </div>
  );
}

function CampoInput({ campo, valor, onChange }) {
  if (campo.tipo === 'select') {
    return (
      <div>
        <div className="field-label">{campo.label}{campo.req && <span style={{ color: 'var(--red)' }}> *</span>}</div>
        <select className="input" value={valor || campo.default || ''} onChange={e => onChange(e.target.value)}>
          {campo.opcoes.map(o => <option key={o} value={o}>{o}</option>)}
        </select>
        {campo.hint && <div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 4 }}>{campo.hint}</div>}
      </div>
    );
  }
  if (campo.tipo === 'radio') {
    return (
      <div>
        <div className="field-label">{campo.label}{campo.req && <span style={{ color: 'var(--red)' }}> *</span>}</div>
        <div className="segmented" style={{ marginTop: 4 }}>
          {campo.opcoes.map(o => (
            <div key={o} className={`seg${(valor || campo.default) === o ? ' active' : ''}`} onClick={() => onChange(o)}>{o.toUpperCase()}</div>
          ))}
        </div>
        {campo.hint && <div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 4 }}>{campo.hint}</div>}
      </div>
    );
  }
  if (campo.tipo === 'toggle') {
    const v = valor !== undefined ? valor : campo.default;
    return (
      <div className="flex items-center" style={{ justifyContent: 'space-between' }}>
        <div>
          <div className="field-label" style={{ marginBottom: 2 }}>{campo.label}</div>
          {campo.hint && <div style={{ fontSize: 11, color: 'var(--fg-3)' }}>{campo.hint}</div>}
        </div>
        <div className={`toggle${v ? ' on' : ''}`} onClick={() => onChange(!v)}></div>
      </div>
    );
  }
  if (campo.tipo === 'tags') {
    const tags = valor || campo.default || [];
    return (
      <div>
        <div className="field-label">{campo.label}{campo.req && <span style={{ color: 'var(--red)' }}> *</span>}</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginTop: 4 }}>
          {tags.map(t => (
            <span key={t} className="filter-chip active">{t} <Icon name="x" size={10} onClick={() => onChange(tags.filter(x => x !== t))} /></span>
          ))}
          <input
            className="input"
            placeholder="+ adicionar"
            style={{ width: 120 }}
            onKeyDown={e => {
              if (e.key === 'Enter' && e.target.value) {
                onChange([...tags, e.target.value]);
                e.target.value = '';
              }
            }}
          />
        </div>
      </div>
    );
  }
  // text, secret, number
  return (
    <div>
      <div className="field-label">{campo.label}{campo.req && <span style={{ color: 'var(--red)' }}> *</span>}</div>
      <input
        type={campo.tipo === 'secret' ? 'password' : campo.tipo === 'number' ? 'number' : 'text'}
        className="input mono"
        value={valor !== undefined ? valor : (campo.default || '')}
        placeholder={campo.placeholder || (campo.tipo === 'secret' ? '•••••••••••••' : '')}
        min={campo.min}
        max={campo.max}
        step={campo.step}
        onChange={e => onChange(campo.tipo === 'number' ? parseFloat(e.target.value) : e.target.value)}
      />
      {campo.hint && <div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 4 }}>{campo.hint}</div>}
      {campo.exemplo && !valor && <div style={{ fontSize: 10.5, color: 'var(--fg-3)', marginTop: 4, fontFamily: 'IBM Plex Mono' }}>Exemplo: {campo.exemplo}</div>}
    </div>
  );
}

function TabMapeamentos({ integracao }) {
  return (
    <div style={{ padding: 18 }}>
      <div className="field-label" style={{ marginBottom: 10 }}>FLUXOS MAPEADOS DESTA INTEGRAÇÃO</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {integracao.mapeamentos.map((m, i) => (
          <div key={i} style={{ padding: 14, background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderRadius: 6 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 24px 1fr 70px', gap: 10, alignItems: 'center' }}>
              <div>
                <div className="field-label" style={{ marginBottom: 2 }}>EVENTO / FONTE</div>
                <div style={{ fontSize: 12.5, fontWeight: 500 }}>{m.de}</div>
              </div>
              <Icon name="arrowR" size={14} style={{ color: 'var(--lime)' }} />
              <div>
                <div className="field-label" style={{ marginBottom: 2 }}>AÇÃO NO SISTEMA</div>
                <div style={{ fontSize: 12.5, color: 'var(--fg-1)' }}>{m.para}</div>
              </div>
              {m.editavel ? (
                <button className="btn btn-ghost btn-sm" onClick={e => e.stopPropagation()}><Icon name="edit" size={11} /> Editar</button>
              ) : (
                <span className="badge" style={{ fontSize: 9.5 }}>SISTEMA</span>
              )}
            </div>
          </div>
        ))}
      </div>
      <div className="alert-banner alert-cyan" style={{ marginTop: 14 }}>
        <Icon name="info" size={13} />
        Mapeamentos marcados como <strong>SISTEMA</strong> são automáticos e não podem ser desabilitados (são parte do contrato da integração). Os <strong>editáveis</strong> permitem personalização do fluxo.
      </div>
    </div>
  );
}

function TabLogs({ integracao }) {
  // Mock logs - in real system would come from server
  const logs = [
    { ts: '12/05 14:32:18', endpoint: '/v1/chat/completions', method: 'POST', status: 200, dur: '1.24s', preview: '{"messages":[...], "model":"gpt-4o"}' },
    { ts: '12/05 14:18:42', endpoint: '/v1/chat/completions', method: 'POST', status: 200, dur: '0.89s', preview: '{"messages":[...], "model":"gpt-4o-mini"}' },
    { ts: '12/05 11:42:08', endpoint: '/v1/chat/completions', method: 'POST', status: 429, dur: '0.12s', preview: 'rate_limit_exceeded · tentar em 60s' },
    { ts: '12/05 10:14:55', endpoint: '/v1/embeddings', method: 'POST', status: 200, dur: '0.42s', preview: '{"input":"...", "model":"text-embedding-3-small"}' },
    { ts: '12/05 09:22:14', endpoint: '/v1/chat/completions', method: 'POST', status: 200, dur: '2.18s', preview: '{"messages":[...], "stream":true}' },
  ];
  return (
    <div>
      <div style={{ padding: 14, borderBottom: '1px solid var(--line-1)', background: 'var(--bg-2)', display: 'flex', alignItems: 'center', gap: 10 }}>
        <span className="mono" style={{ fontSize: 11.5, color: 'var(--fg-2)' }}>5 chamadas nas últimas 24h · 1 erro (rate limit)</span>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 6 }}>
          <button className="btn btn-sm"><Icon name="refresh" size={11} /> Atualizar</button>
          <button className="btn btn-sm"><Icon name="download" size={11} /> Exportar JSON</button>
        </div>
      </div>
      <table className="tbl">
        <thead>
          <tr>
            <th>Timestamp</th>
            <th>Endpoint</th>
            <th>Method</th>
            <th>Status</th>
            <th>Duração</th>
            <th>Preview</th>
          </tr>
        </thead>
        <tbody>
          {logs.map((l, i) => (
            <tr key={i}>
              <td className="mono" style={{ fontSize: 11 }}>{l.ts}</td>
              <td className="mono" style={{ fontSize: 11 }}>{l.endpoint}</td>
              <td><span className="badge" style={{ fontSize: 9.5 }}>{l.method}</span></td>
              <td>
                <span className={`badge ${l.status >= 200 && l.status < 300 ? 'badge-lime' : l.status >= 400 && l.status < 500 ? 'badge-amber' : 'badge-red'}`}>
                  {l.status}
                </span>
              </td>
              <td className="mono">{l.dur}</td>
              <td className="mono" style={{ fontSize: 10.5, color: 'var(--fg-3)', maxWidth: 280, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{l.preview}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <div style={{ padding: 18, textAlign: 'center', borderTop: '1px solid var(--line-1)' }}>
        <div style={{ fontSize: 11, color: 'var(--fg-3)', fontFamily: 'IBM Plex Mono' }}>
          Logs simulados · em produção virão do servidor com retenção de 30 dias
        </div>
      </div>
    </div>
  );
}

// ============ EMPRESA TAB ============
function EmpresaTab({ empresa, onUpdate, onUpdateContas }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div className="card">
          <div className="card-head"><Icon name="users" /><div className="t">Dados Básicos</div></div>
          <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 12 }}>
            <FormRow label="CNPJ" value={empresa.cnpj} onChange={v => onUpdate('cnpj', v)} placeholder="00.000.000/0000-00" req />
            <FormRow label="RAZÃO SOCIAL" value={empresa.razao} onChange={v => onUpdate('razao', v)} req />
            <FormRow label="NOME FANTASIA" value={empresa.fantasia} onChange={v => onUpdate('fantasia', v)} />
            <div className="grid-2">
              <FormRow label="INSCRIÇÃO ESTADUAL" value={empresa.ie} onChange={v => onUpdate('ie', v)} />
              <FormRow label="INSCRIÇÃO MUNICIPAL" value={empresa.im} onChange={v => onUpdate('im', v)} />
            </div>
            <FormRow label="ATIVIDADE PRINCIPAL (CNAE)" value={empresa.atividade} onChange={v => onUpdate('atividade', v)} />
            <div className="grid-2">
              <FormRow label="TELEFONE" value={empresa.telefone} onChange={v => onUpdate('telefone', v)} />
              <FormRow label="E-MAIL CORPORATIVO" value={empresa.email} onChange={v => onUpdate('email', v)} />
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-head"><Icon name="map" /><div className="t">Endereço Fiscal</div></div>
          <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div className="grid-2">
              <FormRow label="CEP" value={empresa.cep} onChange={v => onUpdate('cep', v)} placeholder="00000-000" />
              <FormRow label="UF" value={empresa.uf} onChange={v => onUpdate('uf', v)} />
            </div>
            <FormRow label="LOGRADOURO" value={empresa.logradouro} onChange={v => onUpdate('logradouro', v)} />
            <div className="grid-2">
              <FormRow label="NÚMERO" value={empresa.numero} onChange={v => onUpdate('numero', v)} />
              <FormRow label="COMPLEMENTO" value={empresa.complemento} onChange={v => onUpdate('complemento', v)} />
            </div>
            <div className="grid-2">
              <FormRow label="BAIRRO" value={empresa.bairro} onChange={v => onUpdate('bairro', v)} />
              <FormRow label="CIDADE" value={empresa.cidade} onChange={v => onUpdate('cidade', v)} />
            </div>
          </div>
        </div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div className="card">
          <div className="card-head"><Icon name="dollar" /><div className="t">Regime Tributário</div></div>
          <div style={{ padding: 16 }}>
            <div className="field-label" style={{ marginBottom: 6 }}>REGIME ATIVO</div>
            <div className="segmented" style={{ marginBottom: 14 }}>
              {[
                { id: 'lucro-real', l: 'LUCRO REAL' },
                { id: 'presumido', l: 'PRESUMIDO' },
                { id: 'simples', l: 'SIMPLES' },
              ].map(r => (
                <div key={r.id} className={`seg${empresa.regime === r.id ? ' active' : ''}`} onClick={() => onUpdate('regime', r.id)}>{r.l}</div>
              ))}
            </div>
            {empresa.regime === 'simples' && (
              <>
                <div className="field-label" style={{ marginBottom: 6 }}>ANEXO DO SIMPLES</div>
                <div className="segmented" style={{ marginBottom: 14 }}>
                  {['ANEXO I', 'ANEXO II', 'ANEXO III', 'ANEXO IV', 'ANEXO V'].map(a => (
                    <div key={a} className={`seg${empresa.anexoSimples === a ? ' active' : ''}`} onClick={() => onUpdate('anexoSimples', a)}>{a.replace('ANEXO ', '')}</div>
                  ))}
                </div>
              </>
            )}
            <FormRow label="RBT12 (R$)" value={empresa.rbt12} onChange={v => onUpdate('rbt12', v)} hint="Receita bruta dos últimos 12 meses" />
            {empresa.regime === 'lucro-real' && (
              <div className="alert-banner alert-cyan" style={{ marginTop: 12 }}>
                <Icon name="info" size={13} />
                Cargas tributárias do regime Lucro Real são configuradas no M03 Precificação por edital.
              </div>
            )}
          </div>
        </div>

        <div className="card">
          <div className="card-head"><Icon name="shield" /><div className="t">Certificado Digital ICP-Brasil</div></div>
          <div style={{ padding: 16 }}>
            <div style={{ padding: 14, background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderRadius: 6, marginBottom: 12 }}>
              <div className="flex items-center gap-3" style={{ marginBottom: 8 }}>
                <Icon name="shield" size={20} style={{ color: 'var(--lime)' }} />
                <div>
                  <div style={{ fontSize: 13, fontWeight: 600 }}>{empresa.certTipo}</div>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--fg-3)' }}>{empresa.certEmissor}</div>
                </div>
                <span className="badge badge-lime" style={{ marginLeft: 'auto' }}>VÁLIDO</span>
              </div>
              <div style={{ fontSize: 11.5, color: 'var(--fg-2)' }}>
                Vencimento: <span className="mono" style={{ color: 'var(--lime)' }}>{empresa.certVencimento}</span>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <button className="btn btn-sm" style={{ flex: 1, justifyContent: 'center' }}><Icon name="upload" size={11} /> Atualizar certificado</button>
              <button className="btn btn-sm"><Icon name="bolt" size={11} /> Testar</button>
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-head"><Icon name="dollar" /><div className="t">Contas Bancárias</div></div>
          <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
            {empresa.contas.map(c => (
              <div key={c.id} style={{ padding: 12, background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderLeft: c.principal ? '3px solid var(--lime)' : '3px solid var(--line-3)', borderRadius: 6 }}>
                <div className="flex items-center justify-between" style={{ marginBottom: 6 }}>
                  <span style={{ fontSize: 13, fontWeight: 600 }}>{c.banco}</span>
                  {c.principal && <span className="badge badge-lime">PRINCIPAL</span>}
                </div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--fg-3)' }}>
                  AG {c.agencia} · CC {c.conta} {c.pix && '· PIX ' + c.pix}
                </div>
              </div>
            ))}
            <button className="btn btn-ghost btn-sm" style={{ justifyContent: 'flex-start', marginTop: 4 }}>
              <Icon name="plus" size={11} /> Adicionar conta
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

function FormRow({ label, value, onChange, placeholder, hint, req }) {
  return (
    <div>
      <div className="field-label">{label}{req && <span style={{ color: 'var(--red)' }}> *</span>}</div>
      <input className="input" value={value || ''} placeholder={placeholder} onChange={e => onChange(e.target.value)} />
      {hint && <div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 4 }}>{hint}</div>}
    </div>
  );
}

window.MConfig = MConfig;
