// Assistente · prototipo de alta fidelidade do agente no WhatsApp (Estevao).
(function () {
  const { useState, useEffect, useRef } = React;
  const { Card, Button, Chip, Icon, Screen, SectionTitle } = window.BN;

  const hora = () => new Date().toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });
  const CIDADES = ['Sorocaba', 'Sao Paulo', 'Rio de Janeiro', 'Outra'];
  const BAIRROS = ['Campolim', 'Zona Norte', 'Alem Ponte', 'Eden'];

  function AgenteScreen({ navigate }) {
    const M = window.MOCK;
    const A = M.agente;
    const sorocaba = M.unidades.find(u => u.local) || M.unidades[0];

    const [msgs, setMsgs] = useState([]);
    const [typing, setTyping] = useState(false);
    const [step, setStep] = useState('nome');
    const [nome, setNome] = useState('');
    const [draft, setDraft] = useState('');
    const bodyRef = useRef(null);
    const timers = useRef([]);

    const clearTimers = () => { timers.current.forEach(clearTimeout); timers.current = []; };

    const agentSay = (linhas, chips) => {
      setTyping(true);
      let delay = 650;
      linhas.forEach((ln, idx) => {
        const t = setTimeout(() => {
          setMsgs(m => [...m, { de: 'agente', txt: ln, hora: hora(), chips: idx === linhas.length - 1 ? chips : null }]);
          if (idx === linhas.length - 1) setTyping(false);
        }, delay);
        timers.current.push(t);
        delay += 700 + Math.min(900, ln.length * 12);
      });
    };

    const iniciar = () => {
      clearTimers();
      setMsgs([]); setStep('nome'); setNome('');
      agentSay([A.saudacao, 'Como voce se chama?']);
    };

    useEffect(() => { iniciar(); return clearTimers; }, []);
    useEffect(() => { if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight; }, [msgs, typing]);

    const push = (txt) => setMsgs(m => [...m, { de: 'pessoa', txt, hora: hora() }]);

    const responder = (texto) => {
      const t = (texto || '').trim();
      if (!t) return;

      if (/^recome/i.test(t)) { iniciar(); return; }
      push(t);

      if (step === 'nome') {
        const primeiro = t.split(' ')[0];
        setNome(primeiro);
        agentSay([`Seja muito bem-vindo(a), ${primeiro}. Fico feliz que voce chegou ate aqui.`, 'Voce esta em qual cidade hoje?'], CIDADES);
        setStep('cidade');
        return;
      }

      if (step === 'cidade') {
        const u = M.unidades.find(x => t.toLowerCase().includes(x.cidade.toLowerCase()) || x.cidade.toLowerCase().includes(t.toLowerCase()));
        if (u && u.local) {
          agentSay([`Que bom, ${nome}! Em Sorocaba nosso culto e ${u.culto}.`, 'Me diz o seu bairro que eu acho a celula mais proxima de voce.'], BAIRROS);
          setStep('bairro');
        } else if (u) {
          agentSay([`Em ${u.cidade} o culto e ${u.culto}.`, `A unidade fica em ${u.endereco}.`, 'Quer que eu te avise das proximas programacoes por ai?'], ['Sim, quero', 'So isso, obrigado']);
          setStep('fim');
        } else {
          agentSay(['Ainda nao tenho uma unidade cadastrada nessa cidade por aqui.', 'Mas posso te avisar assim que abrir uma celula perto de voce. Quer deixar seu contato?'], ['Quero deixar', 'Agora nao']);
          setStep('fim');
        }
        return;
      }

      if (step === 'bairro') {
        const c = M.celulas.find(x => x.bairro.toLowerCase().includes(t.toLowerCase()) || t.toLowerCase().includes(x.bairro.toLowerCase())) || M.celulas[0];
        const n = M.nucleoById[c.nucleo];
        agentSay([
          `Perfeito! A celula mais proxima e a ${c.nome}, no ${c.bairro}.`,
          `Acontece ${c.dia}, com ${c.lider}. Nucleo de ${n.nome}.`,
          `E o nosso culto em Sorocaba e ${sorocaba.culto}, no ${sorocaba.endereco}.`,
          'Posso avisar o lider que voce vai? Vai ser uma alegria te receber.',
        ], ['Pode avisar', 'Ver no mapa']);
        setStep('fim');
        return;
      }

      // step fim
      if (/mapa/i.test(t)) { navigate('celulas'); return; }
      if (/avisar|quero|sim/i.test(t)) {
        agentSay([`Combinado, ${nome}! Ja avisei por aqui. Que a paz do Senhor te acompanhe.`, 'Se precisar de qualquer coisa, e so me chamar.'], ['Recomecar']);
      } else {
        agentSay(['Amem! Qualquer coisa estou por aqui. Deus te abencoe.'], ['Recomecar']);
      }
    };

    const enviar = () => { if (draft.trim()) { responder(draft); setDraft(''); } };
    const ultimoChips = (() => { for (let i = msgs.length - 1; i >= 0; i--) { if (msgs[i].de === 'agente') return msgs[i].chips; } return null; })();

    return (
      <Screen>
        <SectionTitle
          eyebrow="Atendimento"
          title="Assistente no WhatsApp"
          right={<Chip dotColor="var(--bn-good)">Prototipo ao vivo</Chip>}
        />

        <div className="bn-agente">
          <Card className="bn-agente-aside">
            <div className="bn-eyebrow" style={{ marginBottom: 'var(--sp-3)' }}><span className="dot" />O bom pastor vai atras</div>
            <h3 className="bn-h2" style={{ marginBottom: 'var(--sp-3)' }}>{A.nome}, o acolhimento que nunca dorme.</h3>
            <p className="bn-muted">Quem chega pelo WhatsApp e recebido na hora. O {A.nome} pergunta o nome e a cidade, e ja devolve o dia de culto, a celula mais proxima e o endereco. Nenhuma ovelha se perde.</p>
            <div className="bn-stack" style={{ gap: 'var(--sp-3)', marginTop: 'var(--sp-5)' }}>
              <div className="bn-info"><Icon name="MessageCircle" size={16} /><span className="bn-sm">Recebe e da boas-vindas automaticamente</span></div>
              <div className="bn-info"><Icon name="MapPin" size={16} /><span className="bn-sm">Encontra a celula pelo bairro</span></div>
              <div className="bn-info"><Icon name="CalendarCheck" size={16} /><span className="bn-sm">Informa culto e endereco por cidade</span></div>
              <div className="bn-info"><Icon name="Route" size={16} /><span className="bn-sm">Conecta a pessoa ao lider</span></div>
            </div>
            <div className="bn-agente-hint">
              <Icon name="Info" size={14} style={{ color: 'var(--bn-accent)' }} />
              <span className="bn-sm bn-faint">Experimente: responda como se fosse um visitante. Tente "Rio de Janeiro".</span>
            </div>
          </Card>

          {/* Telefone / WhatsApp */}
          <div className="bn-phone">
            <div className="wa">
              <div className="wa-head">
                <Icon name="ChevronLeft" size={20} style={{ opacity: 0.8 }} />
                <span className="wa-ava"><img src="/bolaneve/assets/emblem-white.png" alt="" width="26" height="26" /></span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="wa-name">{A.nome}</div>
                  <div className="wa-status">{typing ? 'digitando...' : 'online'}</div>
                </div>
                <Icon name="Phone" size={18} style={{ opacity: 0.8 }} />
                <Icon name="MoreVertical" size={18} style={{ opacity: 0.8 }} />
              </div>

              <div className="wa-body" ref={bodyRef}>
                <div className="wa-day">hoje</div>
                {msgs.map((m, i) => (
                  <div key={i} className={`wa-row ${m.de === 'pessoa' ? 'out' : 'in'}`}>
                    <div className="wa-bubble">
                      <span>{m.txt}</span>
                      <span className="wa-time">{m.hora}{m.de === 'pessoa' && <Icon name="Check" size={12} style={{ marginLeft: 3, verticalAlign: '-1px' }} />}</span>
                    </div>
                  </div>
                ))}
                {typing && (
                  <div className="wa-row in">
                    <div className="wa-bubble wa-typing"><span /><span /><span /></div>
                  </div>
                )}
              </div>

              {ultimoChips && !typing && (
                <div className="wa-quick">
                  {ultimoChips.map((c, i) => (
                    <button key={i} className="wa-chip" onClick={() => responder(c)}>{c}</button>
                  ))}
                </div>
              )}

              <div className="wa-input">
                <Icon name="Sparkles" size={18} style={{ color: 'var(--wa-icon)' }} />
                <input value={draft} onChange={e => setDraft(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') enviar(); }} placeholder="Mensagem" />
                <button className="wa-send" onClick={enviar} title="Enviar"><Icon name={draft.trim() ? 'Send' : 'Mic'} size={18} /></button>
              </div>
            </div>
            <button className="bn-agente-reset" onClick={iniciar}><Icon name="ArrowLeft" size={14} /> Recomecar conversa</button>
          </div>
        </div>
      </Screen>
    );
  }

  (window.BN_SCREENS = window.BN_SCREENS || {}).agente = AgenteScreen;
})();