// Tela: Conversas — caixa de entrada do WhatsApp (dados reais)

const { useState: useConvState, useEffect: useConvEffect, useRef: useConvRef } = React;

const convHeaders = () => { const t = localStorage.getItem('ezza_token'); return { 'Content-Type':'application/json', ...(t?{'Authorization':`Bearer ${t}`}:{}) }; };

function Conversas({ goto }) {
  const [conversas, setConversas] = useConvState([]);
  const [sel, setSel] = useConvState(null);       // conversa selecionada
  const [mensagens, setMensagens] = useConvState([]);
  const [texto, setTexto] = useConvState('');
  const [loading, setLoading] = useConvState(true);
  const [enviando, setEnviando] = useConvState(false);
  const toast = useToast();
  const fimRef = useConvRef(null);

  const carregarConversas = () => {
    fetch('/api/conversas', { headers: convHeaders() })
      .then(r => r.json())
      .then(d => { if (d.ok) setConversas(d.conversas); })
      .catch(() => {})
      .finally(() => setLoading(false));
  };

  useConvEffect(() => { carregarConversas(); }, []);

  const abrir = (c) => {
    setSel(c);
    fetch(`/api/conversas/${c.id}/mensagens`, { headers: convHeaders() })
      .then(r => r.json())
      .then(d => { if (d.ok) setMensagens(d.mensagens); })
      .catch(() => {});
  };

  useConvEffect(() => { if (fimRef.current) fimRef.current.scrollIntoView({ behavior: 'smooth' }); }, [mensagens]);

  const enviar = async () => {
    if (!texto.trim() || !sel) return;
    const msg = texto.trim();
    setTexto('');
    setEnviando(true);
    // adiciona localmente (otimista)
    setMensagens(prev => [...prev, { id: 'tmp'+Date.now(), direcao: 'out', texto: msg, criado_em: new Date().toISOString() }]);
    try {
      const r = await fetch('/api/whatsapp/send', {
        method: 'POST', headers: convHeaders(),
        body: JSON.stringify({ to: sel.telefone, message: msg }),
      });
      const d = await r.json();
      if (!d.ok) toast('⚠ WhatsApp não enviou: ' + (d.error || 'verifique a conexão'));
    } catch (e) { toast('Erro de conexão'); }
    setEnviando(false);
  };

  const horaMsg = (iso) => { try { const d = new Date(String(iso).replace(' ','T')); return `${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`; } catch (e) { return ''; } };

  return (
    <>
      <PageHead title={<>Conversas <em>WhatsApp</em></>} subtitle={`${conversas.length} conversa${conversas.length!==1?'s':''}`}
        right={<button className="btn-ghost" onClick={carregarConversas}>{ICN.refresh} Atualizar</button>} />

      <div className="conv-grid">
        {/* Lista de conversas */}
        <div className="card conv-list">
          {loading && <div className="muted" style={{padding:'16px', fontSize:13}}>Carregando…</div>}
          {!loading && conversas.length === 0 && (
            <div style={{padding:'32px 20px', textAlign:'center'}}>
              <div style={{width:56,height:56,borderRadius:'50%',background:'oklch(0.94 0.05 150)',display:'grid',placeItems:'center',margin:'0 auto 12px',color:'oklch(0.45 0.14 155)'}}>{ICN.whatsapp}</div>
              <div style={{fontSize:13.5, fontWeight:600}}>Nenhuma conversa ainda</div>
              <div className="muted" style={{fontSize:12, marginTop:6, lineHeight:1.5}}>As mensagens recebidas no WhatsApp aparecem aqui automaticamente quando o número estiver conectado.</div>
            </div>
          )}
          {conversas.map(c => (
            <div key={c.id} className={`conv-item ${sel && sel.id===c.id ? 'conv-item-on' : ''}`} onClick={() => abrir(c)}>
              <div className="conv-av">{(c.contato_nome || c.telefone || '?')[0].toUpperCase()}</div>
              <div className="col" style={{flex:1, minWidth:0}}>
                <div className="row" style={{justifyContent:'space-between', gap:8}}>
                  <span className="conv-nome">{c.contato_nome || c.telefone}</span>
                  {c.nao_lidas > 0 && <span className="conv-badge">{c.nao_lidas}</span>}
                </div>
                <span className="conv-prev muted">{c.ultima_msg || '—'}</span>
              </div>
            </div>
          ))}
        </div>

        {/* Painel de mensagens */}
        <div className="card conv-chat">
          {!sel && (
            <div style={{flex:1, display:'grid', placeItems:'center', color:'var(--ink-muted)', fontSize:13}}>
              Selecione uma conversa para ver as mensagens.
            </div>
          )}
          {sel && (
            <>
              <div className="conv-chat-head">
                <div className="conv-av">{(sel.contato_nome || sel.telefone || '?')[0].toUpperCase()}</div>
                <div className="col">
                  <span style={{fontWeight:600, fontSize:14}}>{sel.contato_nome || sel.telefone}</span>
                  <span className="muted" style={{fontSize:11.5}}>{sel.telefone}</span>
                </div>
              </div>
              <div className="conv-msgs">
                {mensagens.length === 0 && <div className="muted" style={{textAlign:'center', fontSize:12, padding:'20px'}}>Sem mensagens nesta conversa.</div>}
                {mensagens.map(m => (
                  <div key={m.id} className={`conv-msg ${m.direcao==='out' ? 'conv-msg-out' : 'conv-msg-in'}`}>
                    <span>{m.texto}</span>
                    <span className="conv-msg-time">{horaMsg(m.criado_em)}</span>
                  </div>
                ))}
                <div ref={fimRef} />
              </div>
              <div className="conv-input">
                <input className="ezz-input" placeholder="Digite uma mensagem…" value={texto}
                  onChange={e => setTexto(e.target.value)} onKeyDown={e => e.key === 'Enter' && enviar()} />
                <button className="btn-primary" onClick={enviar} disabled={enviando || !texto.trim()}>
                  {ICN.send || ICN.arrowRight} Enviar
                </button>
              </div>
            </>
          )}
        </div>
      </div>

      <style>{`
        .conv-grid { display: grid; grid-template-columns: 320px 1fr; gap: 14px; height: calc(100vh - 160px); }
        .conv-list { padding: 6px !important; overflow-y: auto; }
        .conv-item { display: flex; gap: 12px; padding: 12px 10px; border-radius: 12px; cursor: default; align-items: center; }
        .conv-item:hover { background: oklch(0.96 0.012 250); }
        .conv-item-on { background: oklch(0.94 0.04 250); }
        .conv-av { width: 42px; height: 42px; border-radius: 50%; background: oklch(0.90 0.06 155); color: oklch(0.38 0.14 155); display: grid; place-items: center; font-weight: 700; flex-shrink: 0; }
        .conv-nome { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .conv-prev { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 220px; }
        .conv-badge { background: oklch(0.55 0.16 155); color: white; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 99px; display: grid; place-items: center; padding: 0 5px; }
        .conv-chat { display: flex; flex-direction: column; padding: 0 !important; overflow: hidden; }
        .conv-chat-head { display: flex; gap: 12px; align-items: center; padding: 16px 20px; border-bottom: 1px solid oklch(0.93 0.01 255); }
        .conv-msgs { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 10px; background: oklch(0.98 0.005 250); }
        .conv-msg { max-width: 70%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; display: flex; flex-direction: column; gap: 3px; }
        .conv-msg-in { align-self: flex-start; background: white; border: 0.5px solid oklch(0.92 0.01 255); }
        .conv-msg-out { align-self: flex-end; background: oklch(0.90 0.07 155); }
        .conv-msg-time { font-size: 9.5px; color: var(--ink-muted); align-self: flex-end; }
        .conv-input { display: flex; gap: 10px; padding: 14px 16px; border-top: 1px solid oklch(0.93 0.01 255); }
        .conv-input .ezz-input { flex: 1; }
      `}</style>
    </>
  );
}

window.Conversas = Conversas;