// Inbox — conectado à API real
const { useState: uS1, useEffect: uE1, useRef: uR1 } = React;

function InboxPage({ toast }) {
  const [convs, setConvs] = uS1([]);
  const [activeId, setActiveId] = uS1(null);
  const [tab, setTab] = uS1('all');
  const [draft, setDraft] = uS1('');
  const [loadingMsgs, setLoadingMsgs] = uS1(false);
  const [sending, setSending] = uS1(false);
  const scrollRef = uR1(null);
  const active = convs.find(c => c.id === activeId);

  uE1(() => {
    carregarConversas();
    // WebSocket para updates em tempo real
    const ws = window.LEXIA.conectarWS((ev) => {
      if (ev.type === 'nova_mensagem' || ev.type === 'nova_conversa') {
        carregarConversas();
        if (ev.conversa_id === activeId) carregarMensagens(activeId);
      }
    });
    return () => ws?.close();
  }, []);

  uE1(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
  }, [active?.messages?.length, activeId]);

  const carregarConversas = async () => {
    try {
      const data = await window.LEXIA.Conversas.listar();
      const lista = Array.isArray(data) ? data : [];
      setConvs(prev => lista.map(c => {
        const existing = prev.find(p => p.id === c.id);
        return {
          id: c.id,
          name: c.cliente_nome || 'Cliente',
          phone: c.cliente_whatsapp || '',
          cnj: '',
          color: window.colorFor ? window.colorFor(c.cliente_nome) : 'var(--toga-700)',
          status: c.status === 'aberto' ? 'open' : c.status === 'escalonado' ? 'esc' : c.status === 'encerrado' ? 'done' : 'bot',
          unread: parseInt(c.nao_lidas) || 0,
          time: c.ultima_msg_em ? new Date(c.ultima_msg_em).toLocaleTimeString('pt-BR',{hour:'2-digit',minute:'2-digit'}) : '',
          preview: c.ultima_msg || '',
          owner: c.advogado_id ? 'lawyer' : 'lexia',
          messages: existing?.messages || [],
        };
      }));
      // Auto-selecionar primeira conversa
      if (!activeId && lista.length > 0) {
        setActiveId(lista[0].id);
        carregarMensagens(lista[0].id);
      }
    } catch (e) { console.error(e); }
  };

  const carregarMensagens = async (id) => {
    if (!id) return;
    setLoadingMsgs(true);
    try {
      const data = await window.LEXIA.Conversas.mensagens(id);
      const msgs = Array.isArray(data) ? data : [];
      setConvs(prev => prev.map(c => c.id === id ? {
        ...c,
        unread: 0,
        messages: msgs.map(m => ({
          from: m.origem === 'cliente' ? 'client' : m.origem === 'lexia' ? 'lexia' : 'lawyer',
          t: new Date(m.criado_em).toLocaleTimeString('pt-BR', {hour:'2-digit',minute:'2-digit'}),
          text: m.conteudo,
        }))
      } : c));
    } catch (e) { console.error(e); }
    finally { setLoadingMsgs(false); }
  };

  const selectConv = (id) => {
    setActiveId(id);
    const conv = convs.find(c => c.id === id);
    if (!conv?.messages?.length) carregarMensagens(id);
  };

  const send = async () => {
    if (!draft.trim() || !activeId) return;
    setSending(true);
    try {
      await window.LEXIA.Conversas.responder(activeId, draft);
      const newMsg = { from: 'lawyer', t: 'agora', text: draft };
      setConvs(convs.map(c => c.id === activeId ? { ...c, messages: [...c.messages, newMsg], owner: 'lawyer', preview: draft } : c));
      setDraft('');
      toast('Mensagem enviada');
    } catch (e) { toast('Erro ao enviar: ' + e.message); }
    finally { setSending(false); }
  };

  const assume = async () => {
    try {
      await window.LEXIA.Conversas.assumir(activeId);
      setConvs(convs.map(c => c.id === activeId ? { ...c, owner: 'lawyer', status: 'open' } : c));
      toast('Você assumiu a conversa. LEXIA parou de responder.');
    } catch (e) { toast('Erro: ' + e.message); }
  };

  const giveBack = () => {
    setConvs(convs.map(c => c.id === activeId ? { ...c, owner: 'lexia' } : c));
    toast('LEXIA retomou o atendimento.');
  };

  const nome = window._advogado?.nome || 'Dr. Rafael';
  const filtered = convs.filter(c => {
    if (tab === 'open') return c.status === 'open';
    if (tab === 'esc') return c.status === 'esc';
    if (tab === 'mine') return c.owner === 'lawyer';
    return true;
  });

  return (
    <div className={`inbox-layout${activeId ? ' thread-open' : ''}`}>
      <div className="inbox-list">
        <div className="h">
          <div className="eyebrow">Inbox</div>
          <h2>Conversas</h2>
          <div className="search-wrap">
            <Icon name="search"/>
            <input className="input search" placeholder="Buscar cliente…" onChange={e => {
              const q = e.target.value.toLowerCase();
              // filtro local rápido
            }}/>
          </div>
        </div>
        <div className="tabs">
          {[['all','Todas'],['open','Abertas'],['esc','Escalonadas'],['mine','Minhas']].map(([k,l]) =>
            <button key={k} className={`tab ${tab===k?'active':''}`} onClick={()=>setTab(k)}>{l}</button>
          )}
        </div>
        <div className="list">
          {filtered.length === 0 && (
            <div className="empty" style={{padding:40}}><div className="ic">⁂</div>Nenhuma conversa</div>
          )}
          {filtered.map(c => (
            <div key={c.id} className={`conv-item ${c.id===activeId?'active':''}`} onClick={()=>selectConv(c.id)}>
              <div className="av" style={{background:c.color}}>{(c.name||'?')[0]}</div>
              <div className="main">
                <div className="name">
                  {c.name}
                  {c.owner === 'lawyer' && <span className="badge b-done" style={{fontSize:9,padding:'1px 6px'}}>eu</span>}
                </div>
                <div className="preview">{c.preview}</div>
              </div>
              <div className="right">
                <div className="time">{c.time}</div>
                {c.unread > 0 && <div className="unread">{c.unread}</div>}
                {c.status === 'esc' && <Badge status="esc"/>}
              </div>
            </div>
          ))}
        </div>
      </div>

      {active ? (
        <div className="thread">
          <div className="top">
            <button className="thread-back btn ghost sm" onClick={()=>setActiveId(null)} style={{display:'none',padding:'6px 8px',marginRight:4,flexShrink:0}}>
              <Icon name="back" size={18}/>
            </button>
            <div className="av" style={{background:active.color}}>{(active.name||'?')[0]}</div>
            <div className="info">
              <div className="n">{active.name}</div>
              <div className="m">{active.phone}</div>
            </div>
            {active.owner === 'lexia' ? (
              <button className="btn ghost sm" onClick={assume}><Icon name="user" size={12}/> Assumir conversa</button>
            ) : (
              <button className="btn ghost sm" onClick={giveBack}><Icon name="sparkle" size={12}/> Devolver à LEXIA</button>
            )}
          </div>
          <div className="messages" ref={scrollRef}>
            {loadingMsgs && <div style={{textAlign:'center',padding:20,color:'var(--fg-3)'}}>Carregando…</div>}
            {!loadingMsgs && active.messages.length === 0 && (
              <div style={{textAlign:'center',padding:40,color:'var(--fg-3)'}}>Sem mensagens ainda</div>
            )}
            {active.messages.map((m, i) => {
              if (m.from === 'trace') return (
                <div key={i} className="tool-trace"><span className="dot"></span>{m.text}</div>
              );
              const cls = m.from === 'client' ? 'from-client' : m.from === 'lexia' ? 'from-lexia' : 'from-lawyer';
              const sig = m.from === 'lexia' ? 'LEXIA' : m.from === 'lawyer' ? nome : null;
              return (
                <div key={i} className={`msg ${cls}`}>
                  {sig && <div className="sig">{sig}</div>}
                  <div style={{whiteSpace:'pre-wrap'}}>{fmt(m.text)}</div>
                  <div className="t">{m.t}</div>
                </div>
              );
            })}
          </div>
          <div className="composer">
            {active.owner === 'lexia' ? (
              <div className="notice bot"><Icon name="sparkle" size={10}/> LEXIA está respondendo esta conversa</div>
            ) : (
              <div className="notice human"><Icon name="user" size={10}/> Você está respondendo como {nome}</div>
            )}
            <div className="box">
              <textarea
                value={draft}
                onChange={(e)=>setDraft(e.target.value)}
                onKeyDown={(e)=>{if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();send();}}}
                placeholder={active.owner === 'lexia' ? 'Assuma para escrever manualmente…' : 'Responder ao cliente…'}
                disabled={active.owner === 'lexia' || sending}
              />
              <button className="btn accent" onClick={send} disabled={!draft.trim() || sending}>
                <Icon name="send" size={14}/>
              </button>
            </div>
          </div>
        </div>
      ) : (
        <div className="empty"><div className="ic">⁂</div>Selecione uma conversa</div>
      )}
    </div>
  );
}

window.InboxPage = InboxPage;