// Assistente automático — escreve igual ao corretor (2026-10-06).
// Abre com: window.dispatchEvent(new CustomEvent('horos:open-auto-assistant')) (Mensagens → Configurações).
// API: /api/intelligence/auto-assistant · motor: api/_lib/intelligence/mimic.js · fila: api/ai-auto-worker.js

const AA_DELAYS = [2, 5, 10, 15, 30, 60];
const AA_SAFE_SCORE = 75;   // nota do ensaio considerada boa

async function _aaApi(method, body) {
  const tok = window.horosToken ? await window.horosToken() : window.HOROS_SESSION?.access_token;
  const r = await fetch('/api/intelligence/auto-assistant', {
    method, cache: 'no-store',
    headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${tok}` },
    ...(body ? { body: JSON.stringify(body) } : {}),
  });
  const data = await r.json().catch(() => ({}));
  if (!r.ok) throw new Error(data.error || 'Não foi possível carregar');
  return data;
}

function _aaAgo(iso) {
  if (!iso) return '';
  const min = Math.round((Date.now() - new Date(iso).getTime()) / 60000);
  if (min < 1) return 'agora';
  if (min < 60) return `há ${min} min`;
  const h = Math.round(min / 60);
  if (h < 24) return `há ${h} h`;
  return new Date(iso).toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit' });
}

function AutoAssistantRoot() {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const on = () => setOpen(true);
    window.addEventListener('horos:open-auto-assistant', on);
    return () => window.removeEventListener('horos:open-auto-assistant', on);
  }, []);
  return open ? <AutoAssistantModal onClose={() => setOpen(false)} /> : null;
}

function AutoAssistantModal({ onClose }) {
  const [st, setSt] = React.useState(null);
  const [err, setErr] = React.useState('');
  const [busy, setBusy] = React.useState('');

  const load = React.useCallback(() => _aaApi('GET').then(setSt).catch(e => setErr(e.message)), []);
  React.useEffect(() => { load(); const t = setInterval(load, 30000); return () => clearInterval(t); }, [load]);
  React.useEffect(() => {
    const k = e => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', k);
    return () => window.removeEventListener('keydown', k);
  }, [onClose]);

  async function save(patch, tag) {
    setBusy(tag); setErr('');
    try { setSt(await _aaApi('POST', patch)); }
    catch (e) { setErr(e.message); }
    finally { setBusy(''); }
  }

  const p = st?.profile;
  const sh = st?.shadow || {};
  const locked = st && st.planOk === false;   // Pro / assento Standard: só no Max

  function pickMode(m) {
    if (m === st?.mode) return;
    if (locked && m !== 'off') return;
    save({ mode: m }, 'mode');
  }

  const modes = [
    { id: 'off', title: 'Desligado', desc: 'Você responde tudo. Sem follow-up e sem mover leads.' },
    { id: 'shadow', title: 'Ensaio', desc: 'Escreve em silêncio e compara com o que você mandou. Nada é enviado.', disabled: locked },
    { id: 'auto', title: 'Automático', desc: 'Responde quando você demora, faz follow-up e move os leads no funil.', disabled: locked },
  ];

  return ReactDOM.createPortal(
    <div className="aa-ov" onMouseDown={e => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="aa-modal" role="dialog" aria-label="Assistente automático">
        <header className="aa-head">
          <horos-mascot size="40" mood={st?.mode === 'auto' ? 'confident' : 'normal'}></horos-mascot>
          <div className="aa-head-txt">
            <h2>Assistente automático</h2>
            <p>Responde seus clientes do CRM do seu jeito quando você demora.</p>
          </div>
          <button className="aa-x" onClick={onClose} aria-label="Fechar"><Icon name="close" size={16} /></button>
        </header>

        <div className="aa-body">
          {err && <div className="aa-err">{err}</div>}
          {!st && !err && <div className="aa-skel"><div /><div /><div /></div>}

          {locked && <HorosPlanLock title="O assistente automático faz parte do plano Max" desc="Ele responde seus clientes do CRM do seu jeito quando você demora." />}
          {st && <>
            {/* O que aprendeu */}
            <section className="aa-card">
              <div className="aa-card-head">
                <h3>O que ele aprendeu com você</h3>
                <button className="aa-btn ghost" disabled={busy === 'rebuild'} onClick={() => save({ rebuild: true }, 'rebuild')}>
                  <Icon name="refresh" size={14} /> {busy === 'rebuild' ? 'Aprendendo…' : 'Aprender de novo'}
                </button>
              </div>
              {!p ? (
                <p className="aa-muted">{st.learning ? 'Lendo suas conversas com clientes do CRM… em até um minuto aparece aqui.' : 'Ele aprende sozinho, na hora, cada vez que você responde um cliente do CRM — não precisa ligar nada.'}</p>
              ) : (<>
                <p className="aa-muted">
                  <b className="aa-num">{p.pairs}</b> respostas suas em <b className="aa-num">{p.convs}</b> conversas com clientes do CRM · atualizado {_aaAgo(p.builtAt)}
                </p>
                <div className="aa-chips">
                  {p.lenMedian != null && <span className="aa-chip">~{p.lenMedian} caracteres por mensagem</span>}
                  {p.msgsPerTurn != null && <span className="aa-chip">{p.multiPct >= 35 ? `quebra em ~${p.msgsPerTurn} mensagens` : 'uma mensagem por resposta'}</span>}
                  <span className="aa-chip">{p.emojiPct >= 5 ? `emojis ${(p.topEmojis || []).slice(0, 3).join(' ')}` : 'quase sem emoji'}</span>
                  {p.abbrevs?.length > 0 && <span className="aa-chip">abrevia: {p.abbrevs.join(', ')}</span>}
                  {p.lowerStart && <span className="aa-chip">começa com minúscula</span>}
                  {p.noPeriod && <span className="aa-chip">sem ponto final</span>}
                  {p.laugh && <span className="aa-chip">ri com "{p.laugh}"</span>}
                  {p.openings?.map(o => <span key={o} className="aa-chip">abre com "{o}"</span>)}
                  {p.phrases?.slice(0, 3).map(o => <span key={o} className="aa-chip">"{o}"</span>)}
                </div>
              </>)}
            </section>

            {/* Modo */}
            <section className="aa-card">
              <h3>Modo</h3>
              <div className="aa-modes" role="radiogroup">
                {modes.map(m => (
                  <button key={m.id} role="radio" aria-checked={st.mode === m.id} disabled={m.disabled || !!busy}
                    className={`aa-mode${st.mode === m.id ? ' on' : ''}`} onClick={() => pickMode(m.id)}
                    title={locked && m.id !== 'off' ? 'Disponível no plano Max' : ''}>
                    <span className="aa-radio" />
                    <span className="aa-mode-t">{m.title}</span>
                    <span className="aa-mode-d">{m.desc}</span>
                  </button>
                ))}
              </div>
              <div className="aa-delay">
                <span>Responder se você não responder em</span>
                <div className="aa-pills">
                  {AA_DELAYS.map(d => (
                    <button key={d} className={st.delay === d ? 'on' : ''} disabled={!!busy} onClick={() => save({ delay: d }, 'delay')}>
                      {d < 60 ? `${d} min` : '1 h'}
                    </button>
                  ))}
                </div>
              </div>
              <ul className="aa-rules">
                <li>Só conversa com clientes que estão no seu CRM (não arquivados).</li>
                <li>Nunca inventa preço, condição ou disponibilidade: se não souber, diz que vai verificar e te avisa.</li>
                <li>Reclamação, negociação, contrato, áudio ou foto: não responde e passa para você.</li>
                <li>Só responde nos horários em que você costuma responder · no máximo 8 mensagens por conversa por dia.</li>
                <li>Se você responder antes do tempo, ele não manda nada.</li>
                <li>Cliente sumiu: chama de novo nos dias 1, 3, 7, 10 e 14, seg–sáb, das 9h às 19h. Sem resposta depois disso, arquiva como "Não responde".</li>
                <li>Move o lead para a frente no funil quando a conversa mostra que a fase mudou. Venda e arquivo por conversa ficam com você.</li>
                <li>Quem usa o WhatsApp oficial recebe follow-up só dentro das 24 h do Meta, porque não usa modelo aprovado.</li>
              </ul>
            </section>

            {/* Ensaio */}
            <section className="aa-card">
              <div className="aa-card-head">
                <h3>Ensaio — o quanto ele parece você</h3>
                {sh.waiting > 0 && <span className="aa-tag">{sh.waiting} esperando sua resposta</span>}
              </div>
              {sh.scored ? (
                <div className="aa-score">
                  <div className="aa-score-big"><span className="aa-num">{sh.avg}%</span><small>parecido com você · {sh.scored} comparações</small></div>
                  <div className="aa-score-sub">
                    <div><span>Jeito de escrever</span><b className="aa-num">{sh.avgStyle}%</b></div>
                    <div><span>O que respondeu</span><b className="aa-num">{sh.avgContent}%</b></div>
                  </div>
                </div>
              ) : (
                <p className="aa-muted">{st.mode === 'shadow'
                  ? 'Quando um cliente do CRM escrever, ele prepara a resposta em silêncio. Quando você responder, aparece aqui a comparação.'
                  : 'Ligue o Ensaio para ver, lado a lado, o que ele teria respondido e o que você respondeu.'}</p>
              )}
              <div className="aa-runs">
                {(sh.recent || []).map(r => <AaRun key={r.id} r={r} />)}
              </div>
            </section>

            {/* Automático — últimas 24 h */}
            {(st.mode === 'auto' || st.auto?.recent?.length > 0) && (
              <section className="aa-card">
                <h3>Últimas 24 horas</h3>
                <p className="aa-muted"><b className="aa-num">{st.auto.sent24h}</b> respostas enviadas · <b className="aa-num">{st.auto.handoff24h}</b> passadas para você · <b className="aa-num">{st.auto.followups24h}</b> follow-ups · <b className="aa-num">{st.auto.moved24h}</b> leads movidos</p>
                <div className="aa-log">
                  {st.auto.recent.map(q => (
                    <div key={q.id} className="aa-log-row">
                      <span className="aa-log-who">{q.lead_name || 'Cliente'}</span>
                      <span className="aa-log-res">{q.result || (q.status === 'pending' ? 'Aguardando o seu tempo' : q.status)}</span>
                      <span className="aa-log-t">{_aaAgo(q.updated_at)}</span>
                    </div>
                  ))}
                </div>
              </section>
            )}
          </>}
        </div>
      </div>
    </div>,
    document.body
  );
}

function AaRun({ r }) {
  const aiText = r.ai_action === 'handoff' ? ['(não responderia — passaria para você)']
    : r.ai_action === 'skip' ? ['(não responderia nada)']
    : (r.ai_messages || []);
  return (
    <div className="aa-run">
      <div className="aa-run-top">
        <b>{r.lead_name || 'Cliente'}</b>
        <span className="aa-muted">{_aaAgo(r.created_at)}</span>
        {r.status === 'scored' && <span className={`aa-run-score${r.score >= AA_SAFE_SCORE ? ' good' : ''}`}>{r.score}%</span>}
        {r.status === 'waiting' && <span className="aa-tag">esperando você</span>}
        {r.status === 'no_reply' && <span className="aa-tag">você não respondeu</span>}
      </div>
      {r.client_text && <div className="aa-run-client">{r.client_text}</div>}
      <div className="aa-run-cols">
        <div>
          <span className="aa-run-lbl">Você respondeu</span>
          {(r.broker_messages || []).length
            ? r.broker_messages.map((m, i) => <div key={i} className="aa-bubble">{m}</div>)
            : <div className="aa-muted aa-run-empty">—</div>}
        </div>
        <div>
          <span className="aa-run-lbl">Assistente teria respondido</span>
          {aiText.map((m, i) => <div key={i} className={`aa-bubble ai${r.ai_action === 'handoff' || r.ai_action === 'skip' ? ' muted' : ''}`}>{m}</div>)}
          {r.ai_action === 'hold' && r.ai_reason && <div className="aa-run-note">Te avisaria: {r.ai_reason}</div>}
        </div>
      </div>
      {r.score_note && <div className="aa-run-note">{r.score_note}</div>}
    </div>
  );
}

(function mountAutoAssistant() {
  const go = () => {
    if (document.getElementById('horos-auto-assistant-root')) return;
    const el = document.createElement('div');
    el.id = 'horos-auto-assistant-root';
    document.body.appendChild(el);
    ReactDOM.createRoot(el).render(<AutoAssistantRoot />);
  };
  if (document.body) go(); else document.addEventListener('DOMContentLoaded', go);
})();