const MEETING_URL = 'https://e11zr.share.hsforms.com/2VJMcjYGRSmyl0sq1pO8wGQ';
const SHEETS_URL = 'https://script.google.com/macros/s/AKfycbwnFX5IXaCE0V3VY95gKPzvMqbAWz6t_4L4qKcDbgyNQuYkvvINdM29_PbMUvberCob/exec';

function ChatWidget() {
  const [open, setOpen] = React.useState(true);
  const [messages, setMessages] = React.useState([
    { from: 'ai', text: 'Olá! Sou a IAra, assistente do Cidade na Mão. Posso te ajudar a entender como nossa plataforma transforma a gestão municipal. O que você quer saber?' },
    { from: 'ai', img: 'assets/iara.png' },
  ]);
  const [input, setInput] = React.useState('');
  const [typing, setTyping] = React.useState(false);
  const [leadStep, setLeadStep] = React.useState('idle'); // idle | ask_name | ask_surname | ask_email | done
  const [leadData, setLeadData] = React.useState({ name: '', surname: '', email: '' });
  const userMsgCount = React.useRef(0);
  const bottomRef = React.useRef(null);

  React.useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages, typing]);

  const canned = [
    {
      keywords: ['agendar reuniao', 'agendar reunião', 'quero agendar', 'marcar reuniao', 'marcar reunião', 'agendar demo', 'agendar demonstracao', 'agendar demonstração'],
      text: 'Claro! Acesse o link abaixo e escolha o melhor horário para a sua cidade — é gratuito e sem compromisso:',
      cta: true,
      link: MEETING_URL
    },
    {
      keywords: ['demo', 'demonstracao', 'demonstração', 'testar', 'teste', 'apresentacao', 'apresentação', 'reuniao', 'reunião'],
      text: 'Ótimo! Acesse o link abaixo para agendar uma demonstração gratuita. Nossa equipe entra em contato em até 24h com uma apresentação personalizada para sua cidade.',
      cta: true,
      link: MEETING_URL
    },
    {
      keywords: ['preço', 'valor', 'custo', 'quanto', 'investimento', 'contrato', 'plano'],
      text: 'O Cidade na Mão é modular e funciona no modelo SaaS — a prefeitura ativa apenas os módulos que precisa e paga só pelo que utilizar. O investimento varia conforme o número de módulos e o porte do município. Para um orçamento personalizado, agende uma demonstração gratuita com nossa equipe!'
    },
    {
      keywords: ['módulo', 'modulo', 'funcionalidade', 'serviço', 'serviços', 'recursos', 'o que tem', 'o que faz'],
      text: 'O Cidade na Mão oferece módulos de: Saúde (agendamentos, vacinas, receitas), Educação (matrícula, calendário, portal do aluno), Finanças (2ª via de IPTU, ISS, certidões), Assistência Social, Notícias & Alertas, além do Pergunta Tudo — IA generativa para dúvidas do dia a dia — e roteamento inteligente que direciona cada demanda ao departamento certo.'
    },
    {
      keywords: ['inteligencia', 'artificial', 'pergunta tudo', 'robo', 'automacao', 'automatico'],
      text: 'Nossa IA classifica cada mensagem do cidadão e roteia automaticamente ao departamento responsável, reduzindo o tempo de resposta. O módulo "Pergunta Tudo" vai além: é uma IA generativa e multilíngue que auxilia o cidadão em tarefas do dia a dia — pesquisas, redação, dúvidas, traduções e muito mais.'
    },
    {
      keywords: ['municipio', 'município', 'prefeitura', 'municipios', 'municípios', 'cidade', 'quantos', 'clientes'],
      text: 'Já somos parceiros de +40 municípios no Brasil — do Amazonas ao Sul do país. A plataforma é entregue com a identidade visual da sua prefeitura e pode estar no ar em poucos dias. Atendemos cidades de todos os portes.'
    },
    {
      keywords: ['saude', 'saúde', 'consulta', 'agendamento', 'vacina', 'receita', 'ubs', 'posto'],
      text: 'O módulo de Saúde permite: agendamento de consultas e exames, controle de vacinação, emissão de receitas digitais e canais de atendimento integrados. Tudo acessível pelo app do cidadão, sem filas e sem deslocamento desnecessário.'
    },
    {
      keywords: ['educacao', 'educação', 'escola', 'matricula', 'matrícula', 'aluno', 'calendario', 'calendário'],
      text: 'O módulo de Educação centraliza: matrícula digital, calendário escolar, portal do aluno e comunicados da secretaria de educação — conectando famílias, alunos e gestores em um único canal.'
    },
    {
      keywords: ['financas', 'finanças', 'iptu', 'iss', 'taxa', 'boleto', 'certidao', 'certidão', 'debito', 'débito'],
      text: 'O módulo de Finanças permite ao cidadão emitir 2ª via de IPTU, ISS, taxas municipais e certidões digitais diretamente pelo app — sem ir à prefeitura.'
    },
    {
      keywords: ['lgpd', 'seguranca', 'segurança', 'dados', 'privacidade', 'iso', 'criptografia', 'compliance'],
      text: 'Somos certificados ISO 27001 e totalmente conformes com a LGPD. Os dados dos cidadãos são armazenados com criptografia e nunca compartilhados com terceiros. Nossa infraestrutura segue os mais altos padrões de segurança digital.'
    },
    {
      keywords: ['integracao', 'integração', 'portal', 'sistema', 'existente', 'conectar', 'api'],
      text: 'O Cidade na Mão se integra de forma nativa com sistemas e portais já existentes na prefeitura — sem substituí-los. A IA direciona o cidadão ao canal certo de forma transparente e eficiente.'
    },
    {
      keywords: ['whatsapp', 'canal', 'acesso', 'aplicativo', 'android', 'ios', 'celular', 'offline'],
      text: 'Disponível como app nativo (iOS e Android), versão web e integração com WhatsApp. A plataforma é leve, rápida e funciona até em regiões com conectividade limitada — desenvolvida originalmente para o Amazonas, onde o desafio é real.'
    },
    {
      keywords: ['sasi', 'empresa', 'quem', 'sobre', 'fundada', 'historia', 'história', 'manaus'],
      text: 'A SASI é uma empresa amazonense de tecnologia fundada em Manaus, especializada em comunicação institucional e soluções digitais para governos. Atuamos como govtech no modelo SaaS e hoje temos presença em todo o Brasil — e também em Dubai, com expansão para África, Oriente Médio e Sul da Ásia.'
    },
    {
      keywords: ['material', 'divulgacao', 'divulgação', 'lançamento', 'lancamento', 'marketing', 'comunicacao', 'comunicação'],
      text: 'A SASI oferece um kit completo de lançamento para cada prefeitura: outdoor, banner institucional, carrosséis e stories para Instagram, flyer para WhatsApp e roteiro de vídeo para o prefeito ou secretário. Nossa equipe de Customer Success também acompanha o desempenho do app e sugere melhorias.'
    },
    {
      keywords: ['contato', 'falar', 'email', 'e-mail', 'telefone', 'equipe', 'suporte'],
      text: 'Você pode entrar em contato com nossa equipe pelo e-mail marketing@sasi.com.br ou clicando em "Agendar demonstração" aqui na página. Atendemos municípios de todo o Brasil!'
    },
    {
      keywords: ['contratar', 'contrato', 'como adquirir', 'como comprar', 'como fechar', 'fechar negocio', 'fechar negócio', 'assinar', 'adquirir', 'quero contratar', 'quero o produto', 'quero a plataforma'],
      text: 'Contratar o Cidade na Mão é simples e rápido! Não exige licitação — nossa plataforma é contratada via dispensa de licitação (art. 75 da Lei 14.133/21), o que agiliza muito o processo. Basta agendar uma reunião com nossa equipe, apresentamos a proposta personalizada e assinamos o contrato em dias.',
      cta: true
    },
    {
      keywords: ['licitação', 'licitacao', 'precisa licitar', 'dispensa', 'pregão', 'pregao', 'processo licitatório', 'processo licitatorio', 'lei de licitação', '14133', '8666'],
      text: 'Não precisa de licitação! O Cidade na Mão é contratado via dispensa de licitação, com base no art. 75 da Lei 14.133/2021. Isso significa menos burocracia, mais agilidade e a prefeitura pode ter a plataforma funcionando em poucos dias.',
      cta: true
    },
  ];

  const fallback = 'Boa pergunta! Para mais detalhes sobre como o Cidade na Mão pode transformar a gestão da sua prefeitura, agende uma demonstração gratuita — nossa equipe vai adorar montar uma apresentação personalizada para sua cidade.';

  const getResponse = (text) => {
    const lower = text.toLowerCase().normalize('NFD').replace(/[̀-ͯ]/g, '');
    for (const c of canned) {
      const normKeys = c.keywords.map(k => k.normalize('NFD').replace(/[̀-ͯ]/g, ''));
      if (normKeys.some(k => lower.includes(k))) return { text: c.text, cta: !!c.cta };
    }
    return { text: fallback, cta: false };
  };

  const saveToSheets = (name, surname, email) => {
    if (!SHEETS_URL || SHEETS_URL.startsWith('COLE')) return;
    fetch(SHEETS_URL, {
      method: 'POST',
      mode: 'no-cors',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name, surname, email, timestamp: new Date().toLocaleString('pt-BR') })
    }).catch(() => {});
  };

  const isValidEmail = (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);

  const send = () => {
    if (!input.trim() || typing) return;
    const userText = input.trim();
    setMessages(prev => [...prev, { from: 'user', text: userText }]);
    setInput('');

    // — lead collection flow —
    if (leadStep === 'ask_name') {
      setLeadData(prev => ({ ...prev, name: userText }));
      setLeadStep('ask_surname');
      setTyping(true);
      setTimeout(() => {
        setTyping(false);
        setMessages(prev => [...prev, { from: 'ai', text: `Prazer, ${userText}! Agora me diga seu sobrenome:` }]);
      }, 700);
      return;
    }

    if (leadStep === 'ask_surname') {
      setLeadData(prev => ({ ...prev, surname: userText }));
      setLeadStep('ask_email');
      setTyping(true);
      setTimeout(() => {
        setTyping(false);
        setMessages(prev => [...prev, { from: 'ai', text: `Obrigada! E qual o melhor e-mail para nossa equipe entrar em contato?` }]);
      }, 700);
      return;
    }

    if (leadStep === 'ask_email') {
      if (!isValidEmail(userText)) {
        setTyping(true);
        setTimeout(() => {
          setTyping(false);
          setMessages(prev => [...prev, { from: 'ai', text: 'Hmm, esse e-mail não parece válido. Pode conferir e tentar novamente?' }]);
        }, 700);
        return;
      }
      const { name, surname } = leadData;
      setLeadData(prev => ({ ...prev, email: userText }));
      setLeadStep('done');
      saveToSheets(name, surname, userText);
      setTyping(true);
      setTimeout(() => {
        setTyping(false);
        setMessages(prev => [...prev, {
          from: 'ai',
          text: `Perfeito, ${name}! Anotei tudo. Nossa equipe vai entrar em contato no e-mail ${userText} em breve. Posso te ajudar com mais alguma coisa?`
        }]);
      }, 900);
      return;
    }

    // — normal flow —
    userMsgCount.current += 1;
    setTyping(true);
    setTimeout(() => {
      setTyping(false);
      const res = getResponse(userText);
      setMessages(prev => [...prev, { from: 'ai', text: res.text, cta: res.cta }]);

      // após 3 interações, pedir dados
      if (userMsgCount.current >= 3 && leadStep === 'idle') {
        setLeadStep('ask_name');
        setTimeout(() => {
          setMessages(prev => [...prev, {
            from: 'ai',
            text: 'Adorei conversar com você! Para que nossa equipe possa entrar em contato e tirar todas as dúvidas, me diz: qual é o seu primeiro nome?'
          }]);
        }, 600);
      }
    }, 1300);
  };

  const handleKey = (e) => { if (e.key === 'Enter') send(); };

  if (!open) {
    return (
      <button className="chat-fab" onClick={() => setOpen(true)} aria-label="Abrir chat">
        <Icons.Sparkle style={{ width: 24, height: 24 }} />
      </button>
    );
  }

  return (
    <div className="chat-widget">
      <div className="chat-header">
        <span className="chat-header-icon">
          <Icons.Sparkle style={{ width: 15, height: 15 }} />
        </span>
        <span>IAra</span>
        <button className="chat-close" onClick={() => setOpen(false)} aria-label="Fechar">×</button>
      </div>

      <div className="chat-messages">
        {messages.map((m, i) => (
          m.img
            ? <div key={i} className="chat-bubble-iara"><img src={m.img} className="chat-iara-img" alt="IAra" /></div>
            : (
              <div key={i} className={`chat-bubble ${m.from}`}>
                {m.text}
                {m.link && (
                  <a href={m.link} target="_blank" rel="noopener noreferrer" className="chat-direct-link">
                    {m.link}
                  </a>
                )}
                {m.cta && !m.link && (
                  <a href={MEETING_URL} target="_blank" rel="noopener noreferrer" className="chat-cta-btn">
                    Agendar reunião gratuita <span>→</span>
                  </a>
                )}
              </div>
            )
        ))}
        {typing && (
          <div className="chat-bubble ai chat-typing">
            <span /><span /><span />
          </div>
        )}
        <div ref={bottomRef} />
      </div>

      <div className="chat-input-row">
        <input
          className="chat-input"
          placeholder={leadStep === 'ask_name' ? 'Seu primeiro nome...' : leadStep === 'ask_surname' ? 'Seu sobrenome...' : leadStep === 'ask_email' ? 'Seu melhor e-mail...' : 'Escreva sua pergunta...'}
          value={input}
          onChange={e => setInput(e.target.value)}
          onKeyDown={handleKey}
        />
        <button className="chat-send" onClick={send} aria-label="Enviar">
          <Icons.Arrow style={{ width: 15, height: 15 }} />
        </button>
      </div>
    </div>
  );
}
window.ChatWidget = ChatWidget;