// Dashboard, Clients, Processes, Agenda, Agent, Reports
const { useState: uS1, useEffect: uE1 } = React;

// ================== DASHBOARD ==================
function DashboardPage({ go }) {
  const [stats, setStats] = uS1({ total: 0, resolvidas: 0, escalonadas: 0 });
  const [atividade, setAtividade] = uS1([]);
  const [loading, setLoading] = uS1(true);
  const nome = window._advogado?.nome?.split(' ')[0] || 'Dr.';

  uE1(() => {
    const calcStats = () => {
      const convs = window.CONVERSATIONS || [];
      const hoje = new Date().toDateString();
      const total = convs.length;
      const esc = convs.filter(c => c.status === 'esc').length;
      const abertas = convs.filter(c => c.status === 'open').length;
      setStats({ total, resolvidas: total - esc - abertas, escalonadas: esc });
      setAtividade(convs.slice(0, 5).map(c => ({
        time: c.time,
        msg: c.owner === 'lexia' ? `LEXIA atendeu ${c.name}` : `Você respondeu ${c.name}`,
      })));
      setLoading(false);
    };
    calcStats();
    window.addEventListener('lexia-data-loaded', calcStats);
    return () => window.removeEventListener('lexia-data-loaded', calcStats);
  }, []);

  const urgentes = (window.CONVERSATIONS || []).filter(c => c.status === 'esc').slice(0, 3);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="eyebrow">Visão geral · hoje</div>
          <h1>Bem-vindo, <em style={{color:'var(--sela-500)',fontStyle:'italic',fontWeight:300}}>{nome}</em>.</h1>
        </div>
        <div className="row">
          <button className="btn accent" onClick={()=>go('inbox')}><Icon name="inbox" size={14}/> Abrir inbox</button>
        </div>
      </div>
      <div className="page-body">
        <div className="grid-4" style={{marginBottom:8}}>
          <div className="tile"><div className="lbl">Conversas ativas</div><div className="n">{stats.total}</div><div className="d">total registradas</div></div>
          <div className="tile"><div className="lbl">Resolvidas pela LEXIA</div><div className="n">{stats.resolvidas}</div><div className="d">automação ativa</div></div>
          <div className="tile accent"><div className="lbl">Escalonadas pra mim</div><div className="n">{stats.escalonadas}</div><div className="d" style={{color:'var(--sela-600)',cursor:'pointer'}} onClick={()=>go('inbox')}>Ver no inbox →</div></div>
          <div className="tile"><div className="lbl">Clientes cadastrados</div><div className="n">{(window.CLIENTS||[]).length}</div><div className="d">base total</div></div>
        </div>

        {urgentes.length > 0 && (
          <>
            <div className="section-title">Precisam da sua atenção</div>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:12,marginBottom:16}}>
              {urgentes.map((c,i) => (
                <div key={i} className="card" style={{cursor:'pointer'}} onClick={()=>go('inbox')}>
                  <div className="row" style={{justifyContent:'space-between'}}>
                    <div style={{fontFamily:'var(--font-display)',fontSize:17,fontWeight:500}}>{c.name}</div>
                    <Badge status="esc"/>
                  </div>
                  <div style={{fontSize:13,color:'var(--fg-2)',marginTop:6}}>Escalonado · aguardando resposta</div>
                </div>
              ))}
            </div>
          </>
        )}

        <div className="section-title">Atividade recente</div>
        {loading ? (
          <div className="card" style={{color:'var(--fg-3)',textAlign:'center',padding:32}}>Carregando…</div>
        ) : atividade.length === 0 ? (
          <div className="card" style={{color:'var(--fg-3)',textAlign:'center',padding:32}}>
            Nenhuma atividade ainda. <a href="#" onClick={(e)=>{e.preventDefault();go('inbox')}} style={{color:'var(--sela-600)'}}>Aguardando mensagens no WhatsApp →</a>
          </div>
        ) : (
          <div className="card" style={{padding:0}}>
            {atividade.map(({time, msg}, i) => (
              <div key={i} style={{display:'flex',gap:12,padding:'12px 18px',borderBottom:i<atividade.length-1?'1px solid var(--border-soft)':'0'}}>
                <span className="mono" style={{fontSize:11,color:'var(--fg-3)',width:40}}>{time}</span>
                <span style={{fontSize:13}}>{msg}</span>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

// ================== CLIENTES ==================
function ClientsPage({ go }) {
  const [clients, setClients] = uS1([]);
  const [selected, setSelected] = uS1(null);
  const [search, setSearch] = uS1('');
  const [loading, setLoading] = uS1(true);
  const [showNew, setShowNew] = uS1(false);
  const [newForm, setNewForm] = uS1({ nome: '', whatsapp: '', email: '', cpf: '' });
  const [saving, setSaving] = uS1(false);

  const carregar = async (q) => {
    setLoading(true);
    try {
      const data = await window.LEXIA.Clientes.listar(q);
      setClients(Array.isArray(data) ? data : []);
    } catch(e) { console.error(e); }
    finally { setLoading(false); }
  };

  uE1(() => { carregar(); }, []);

  const buscar = (q) => { setSearch(q); carregar(q || undefined); };

  const criarCliente = async () => {
    if (!newForm.nome || !newForm.whatsapp) return;
    setSaving(true);
    try {
      await window.LEXIA.Clientes.criar(newForm);
      setShowNew(false);
      setNewForm({ nome: '', whatsapp: '', email: '', cpf: '' });
      carregar();
    } catch(e) { alert(e.message); }
    finally { setSaving(false); }
  };

  if (selected) return <ClientDetail client={selected} onBack={()=>{ setSelected(null); carregar(); }} go={go}/>;

  return (
    <div className="page">
      <div className="page-head">
        <div><div className="eyebrow">Base</div><h1>Clientes</h1></div>
        <div className="row">
          <div className="search-wrap" style={{width:260}}>
            <Icon name="search"/>
            <input className="input search" placeholder="Buscar por nome ou WhatsApp…" value={search} onChange={e=>buscar(e.target.value)}/>
          </div>
          <button className="btn accent" onClick={()=>setShowNew(true)}><Icon name="plus" size={14}/> Novo cliente</button>
        </div>
      </div>

      {showNew && (
        <div style={{position:'fixed',inset:0,background:'rgba(0,0,0,.4)',zIndex:1000,display:'flex',alignItems:'center',justifyContent:'center'}}>
          <div className="card" style={{width:420,maxWidth:'90vw'}}>
            <div style={{fontFamily:'var(--font-display)',fontSize:20,fontWeight:500,marginBottom:16}}>Novo cliente</div>
            <label className="eyebrow">Nome *</label>
            <input className="input" value={newForm.nome} onChange={e=>setNewForm(f=>({...f,nome:e.target.value}))} placeholder="Nome completo" style={{marginTop:6}}/>
            <label className="eyebrow" style={{display:'block',marginTop:12}}>WhatsApp *</label>
            <input className="input" value={newForm.whatsapp} onChange={e=>setNewForm(f=>({...f,whatsapp:e.target.value}))} placeholder="+55 98 99999-9999" style={{marginTop:6}}/>
            <label className="eyebrow" style={{display:'block',marginTop:12}}>E-mail</label>
            <input className="input" value={newForm.email} onChange={e=>setNewForm(f=>({...f,email:e.target.value}))} placeholder="email@exemplo.com" style={{marginTop:6}}/>
            <label className="eyebrow" style={{display:'block',marginTop:12}}>CPF</label>
            <input className="input" value={newForm.cpf} onChange={e=>setNewForm(f=>({...f,cpf:e.target.value}))} placeholder="000.000.000-00" style={{marginTop:6}}/>
            <div style={{display:'flex',gap:10,marginTop:20}}>
              <button className="btn primary" onClick={criarCliente} disabled={saving}>{saving?'Salvando…':'Salvar cliente'}</button>
              <button className="btn ghost" onClick={()=>setShowNew(false)}>Cancelar</button>
            </div>
          </div>
        </div>
      )}

      <div className="page-body">
        {loading ? (
          <div className="card" style={{textAlign:'center',padding:32,color:'var(--fg-3)'}}>Carregando…</div>
        ) : clients.length === 0 ? (
          <div className="card" style={{textAlign:'center',padding:48,color:'var(--fg-3)'}}>
            <div style={{fontSize:32,marginBottom:12}}>👥</div>
            <div>Nenhum cliente cadastrado ainda.</div>
            <div style={{fontSize:13,marginTop:8}}>Os clientes aparecem aqui quando enviam mensagem pelo WhatsApp ou você os cadastra manualmente.</div>
            <button className="btn accent" style={{marginTop:16}} onClick={()=>setShowNew(true)}>Cadastrar primeiro cliente</button>
          </div>
        ) : (
          <table className="table">
            <thead><tr><th>Nome</th><th>WhatsApp</th><th>Processos</th><th>Cliente desde</th><th>Último contato</th><th></th></tr></thead>
            <tbody>{clients.map((c,i) => (
              <tr key={c.id||i} style={{cursor:'pointer'}} onClick={()=>setSelected(c)}>
                <td><div style={{display:'flex',gap:10,alignItems:'center'}}>
                  <div style={{width:32,height:32,borderRadius:'50%',background:'var(--toga-700)',color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--font-display)',fontSize:13}}>{(c.nome||'?')[0]}</div>
                  <span style={{fontFamily:'var(--font-display)',fontWeight:500,fontSize:15}}>{c.nome}</span>
                </div></td>
                <td className="mono" style={{fontSize:12,color:'var(--fg-2)'}}>{c.whatsapp}</td>
                <td>{c.total_processos||0}</td>
                <td style={{color:'var(--fg-2)'}}>{c.criado_em ? new Date(c.criado_em).toLocaleDateString('pt-BR',{month:'2-digit',year:'numeric'}) : '—'}</td>
                <td style={{color:'var(--fg-2)'}}>{c.ultimo_contato ? window.relativeTime(c.ultimo_contato) : '—'}</td>
                <td><button className="btn ghost sm" onClick={(e)=>{e.stopPropagation();setSelected(c);}}>Abrir →</button></td>
              </tr>
            ))}</tbody>
          </table>
        )}
      </div>
    </div>
  );
}

function ClientDetail({ client, onBack, go }) {
  const [processos, setProcessos] = uS1([]);
  uE1(() => {
    window.LEXIA.Processos.listar({ cliente_id: client.id }).then(d => setProcessos(Array.isArray(d)?d:[])).catch(()=>{});
  }, [client.id]);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <button className="btn ghost sm" onClick={onBack} style={{marginBottom:8}}>← Voltar aos clientes</button>
          <div style={{display:'flex',alignItems:'center',gap:16}}>
            <div style={{width:56,height:56,borderRadius:'50%',background:'var(--toga-700)',color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--font-display)',fontSize:24,fontWeight:500}}>{(client.nome||'?')[0]}</div>
            <div>
              <div className="eyebrow">Cliente desde {client.criado_em ? new Date(client.criado_em).toLocaleDateString('pt-BR',{month:'2-digit',year:'numeric'}) : '—'}</div>
              <h1 style={{margin:'2px 0 0'}}>{client.nome}</h1>
            </div>
          </div>
        </div>
        <div className="row">
          <button className="btn accent" onClick={()=>go&&go('inbox')}><Icon name="inbox" size={14}/> Abrir conversa</button>
        </div>
      </div>
      <div className="page-body">
        <div style={{display:'grid',gridTemplateColumns:'1fr 320px',gap:20,alignItems:'start'}}>
          <div>
            <div className="section-title" style={{marginTop:0}}>Processos ({processos.length})</div>
            {processos.length === 0 ? (
              <div className="card" style={{color:'var(--fg-3)',textAlign:'center',padding:24}}>Sem processos vinculados</div>
            ) : (
              <div style={{display:'flex',flexDirection:'column',gap:10}}>
                {processos.map((p,i) => (
                  <div key={i} className="card">
                    <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',gap:12}}>
                      <div style={{flex:1}}>
                        <div className="mono" style={{fontSize:11,color:'var(--fg-3)'}}>CNJ {p.cnj}</div>
                        <div style={{fontFamily:'var(--font-display)',fontSize:18,fontWeight:500,marginTop:4}}>{p.area} · {p.fase}</div>
                        <div style={{fontSize:13,color:'var(--fg-2)',marginTop:4}}>{[p.vara,p.tribunal].filter(Boolean).join(' · ')}</div>
                      </div>
                      <Badge status={p.status==='aberto'?'open':'done'}/>
                    </div>
                  </div>
                ))}
              </div>
            )}
            {client.observacoes && (
              <>
                <div className="section-title">Notas internas</div>
                <div className="card" style={{background:'var(--paper-100)',fontSize:14,lineHeight:1.6}}>{client.observacoes}</div>
              </>
            )}
          </div>
          <div>
            <div className="card">
              <div className="eyebrow">Contato</div>
              <dl style={{margin:'10px 0 0',display:'grid',gap:10,fontSize:13}}>
                <div><div style={{color:'var(--fg-3)',fontSize:11}}>WhatsApp</div><div className="mono" style={{marginTop:2}}>{client.whatsapp}</div></div>
                {client.email && <div><div style={{color:'var(--fg-3)',fontSize:11}}>E-mail</div><div style={{marginTop:2,wordBreak:'break-all'}}>{client.email}</div></div>}
              </dl>
            </div>
            {client.cpf && (
              <div className="card" style={{marginTop:12}}>
                <div className="eyebrow">Documentos</div>
                <dl style={{margin:'10px 0 0',display:'grid',gap:10,fontSize:13}}>
                  <div><div style={{color:'var(--fg-3)',fontSize:11}}>CPF</div><div className="mono" style={{marginTop:2}}>{client.cpf}</div></div>
                </dl>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

// ================== PROCESSOS ==================
function ProcessesPage() {
  const [processos, setProcessos] = uS1([]);
  const [loading, setLoading] = uS1(true);
  const [showNew, setShowNew] = uS1(false);
  const [newForm, setNewForm] = uS1({ cnj: '', area: '', cliente_id: '' });
  const [clientes, setClientes] = uS1([]);
  const [saving, setSaving] = uS1(false);

  uE1(() => {
    carregar();
    window.LEXIA.Clientes.listar().then(d => setClientes(Array.isArray(d)?d:[])).catch(()=>{});
  }, []);

  const carregar = async () => {
    setLoading(true);
    try {
      const data = await window.LEXIA.Processos.listar();
      setProcessos(Array.isArray(data) ? data : []);
    } catch(e) { console.error(e); }
    finally { setLoading(false); }
  };

  const criarProcesso = async () => {
    if (!newForm.cnj || !newForm.cliente_id) return;
    setSaving(true);
    try {
      await window.LEXIA.Processos.criar(newForm);
      setShowNew(false);
      setNewForm({ cnj: '', area: '', cliente_id: '' });
      carregar();
    } catch(e) { alert(e.message); }
    finally { setSaving(false); }
  };

  return (
    <div className="page">
      <div className="page-head">
        <div><div className="eyebrow">Monitoramento TJ-MA</div><h1>Processos</h1></div>
        <div className="row">
          <button className="btn accent" onClick={()=>setShowNew(true)}><Icon name="plus" size={14}/> Vincular CNJ</button>
        </div>
      </div>

      {showNew && (
        <div style={{position:'fixed',inset:0,background:'rgba(0,0,0,.4)',zIndex:1000,display:'flex',alignItems:'center',justifyContent:'center'}}>
          <div className="card" style={{width:460,maxWidth:'90vw'}}>
            <div style={{fontFamily:'var(--font-display)',fontSize:20,fontWeight:500,marginBottom:16}}>Vincular processo</div>
            <label className="eyebrow">Número CNJ *</label>
            <input className="input" value={newForm.cnj} onChange={e=>setNewForm(f=>({...f,cnj:e.target.value}))} placeholder="0000000-00.0000.0.00.0000" style={{marginTop:6}}/>
            <label className="eyebrow" style={{display:'block',marginTop:12}}>Cliente *</label>
            <select className="input" value={newForm.cliente_id} onChange={e=>setNewForm(f=>({...f,cliente_id:e.target.value}))} style={{marginTop:6}}>
              <option value="">Selecione o cliente…</option>
              {clientes.map(c => <option key={c.id} value={c.id}>{c.nome}</option>)}
            </select>
            <label className="eyebrow" style={{display:'block',marginTop:12}}>Área</label>
            <select className="input" value={newForm.area} onChange={e=>setNewForm(f=>({...f,area:e.target.value}))} style={{marginTop:6}}>
              <option value="">Selecione…</option>
              {['Civil','Trabalhista','Família','Consumidor','Empresarial','Previdenciário','Criminal'].map(a => <option key={a} value={a}>{a}</option>)}
            </select>
            <div style={{display:'flex',gap:10,marginTop:20}}>
              <button className="btn primary" onClick={criarProcesso} disabled={saving}>{saving?'Salvando…':'Vincular CNJ'}</button>
              <button className="btn ghost" onClick={()=>setShowNew(false)}>Cancelar</button>
            </div>
          </div>
        </div>
      )}

      <div className="page-body">
        {loading ? (
          <div className="card" style={{textAlign:'center',padding:32,color:'var(--fg-3)'}}>Carregando…</div>
        ) : processos.length === 0 ? (
          <div className="card" style={{textAlign:'center',padding:48,color:'var(--fg-3)'}}>
            <div style={{fontSize:32,marginBottom:12}}>⚖️</div>
            <div>Nenhum processo vinculado.</div>
            <button className="btn accent" style={{marginTop:16}} onClick={()=>setShowNew(true)}>Vincular primeiro CNJ</button>
          </div>
        ) : (
          <table className="table">
            <thead><tr><th>CNJ</th><th>Cliente</th><th>Área</th><th>Fase</th><th>Última consulta</th><th>Status</th></tr></thead>
            <tbody>{processos.map((p,i) => (
              <tr key={p.id||i}>
                <td className="cnj">{p.cnj}</td>
                <td style={{fontFamily:'var(--font-display)',fontWeight:500}}>{p.cliente_nome||'—'}</td>
                <td>{p.area||'—'}</td>
                <td>{p.fase||'—'}</td>
                <td className="mono" style={{fontSize:12}}>{p.ultima_consulta ? new Date(p.ultima_consulta).toLocaleDateString('pt-BR') : '—'}</td>
                <td><Badge status={p.status==='aberto'?'open':p.status==='encerrado'?'done':'open'}/></td>
              </tr>
            ))}</tbody>
          </table>
        )}
      </div>
    </div>
  );
}

// ================== AGENDA ==================
function AgendaPage() {
  const [eventos, setEventos] = uS1({});
  const [semana, setSemana] = uS1(0); // offset em semanas
  const [showNew, setShowNew] = uS1(false);
  const [newEv, setNewEv] = uS1({ titulo: '', inicio: '', fim: '', cliente_id: '', advogado_id: '' });
  const [clientes, setClientes] = uS1([]);
  const [saving, setSaving] = uS1(false);

  const getSemanaInicio = (offset) => {
    const d = new Date();
    d.setDate(d.getDate() - ((d.getDay() + 6) % 7) + offset * 7);
    d.setHours(0,0,0,0);
    return d;
  };

  const carregar = async (offset) => {
    const ini = getSemanaInicio(offset);
    const fim = new Date(ini); fim.setDate(ini.getDate() + 7);
    try {
      const data = await window.LEXIA.Agenda.listar(ini.toISOString(), fim.toISOString());
      const evs = {};
      (Array.isArray(data) ? data : []).forEach(ev => {
        const d = new Date(ev.inicio);
        const diff = Math.round((d - ini) / 86400000);
        if (diff >= 0 && diff < 5) {
          if (!evs[diff]) evs[diff] = {};
          evs[diff][d.getHours()] = { id: ev.id, title: ev.titulo, sub: ev.meet_link ? 'Google Meet' : 'Presencial', kind: ev.meet_link ? 'tel' : '' };
        }
      });
      setEventos(evs);
    } catch(e) { console.error(e); }
  };

  uE1(() => {
    carregar(semana);
    window.LEXIA.Clientes.listar().then(d => setClientes(Array.isArray(d)?d:[])).catch(()=>{});
  }, [semana]);

  const ini = getSemanaInicio(semana);
  const hours = [8,9,10,11,12,13,14,15,16,17,18];
  const days = Array.from({length:5}, (_,i) => {
    const d = new Date(ini); d.setDate(ini.getDate()+i);
    return d.toLocaleDateString('pt-BR',{weekday:'short',day:'numeric'}).replace('.','')+'.';
  });

  const criarEvento = async () => {
    if (!newEv.titulo || !newEv.inicio) return;
    setSaving(true);
    try {
      const fimAuto = newEv.fim || new Date(new Date(newEv.inicio).getTime() + 3600000).toISOString().slice(0,16);
      await window.LEXIA.Agenda.criar({ ...newEv, fim: fimAuto, advogado_id: window._advogado?.id });
      setShowNew(false);
      setNewEv({ titulo: '', inicio: '', fim: '', cliente_id: '', advogado_id: '' });
      carregar(semana);
    } catch(e) { alert(e.message); }
    finally { setSaving(false); }
  };

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="eyebrow">Semana de {ini.toLocaleDateString('pt-BR',{day:'2-digit',month:'short'})}</div>
          <h1>Agenda</h1>
        </div>
        <div className="row">
          <button className="btn ghost sm" onClick={()=>setSemana(s=>s-1)}>← Anterior</button>
          <button className="btn ghost sm" onClick={()=>setSemana(0)}>Hoje</button>
          <button className="btn ghost sm" onClick={()=>setSemana(s=>s+1)}>Próxima →</button>
          <button className="btn accent" onClick={()=>setShowNew(true)}><Icon name="plus" size={14}/> Novo evento</button>
        </div>
      </div>

      {showNew && (
        <div style={{position:'fixed',inset:0,background:'rgba(0,0,0,.4)',zIndex:1000,display:'flex',alignItems:'center',justifyContent:'center'}}>
          <div className="card" style={{width:440,maxWidth:'90vw'}}>
            <div style={{fontFamily:'var(--font-display)',fontSize:20,fontWeight:500,marginBottom:16}}>Novo evento</div>
            <label className="eyebrow">Título *</label>
            <input className="input" value={newEv.titulo} onChange={e=>setNewEv(f=>({...f,titulo:e.target.value}))} placeholder="Reunião com cliente" style={{marginTop:6}}/>
            <label className="eyebrow" style={{display:'block',marginTop:12}}>Data e hora *</label>
            <input className="input" type="datetime-local" value={newEv.inicio} onChange={e=>setNewEv(f=>({...f,inicio:e.target.value}))} style={{marginTop:6}}/>
            <label className="eyebrow" style={{display:'block',marginTop:12}}>Cliente</label>
            <select className="input" value={newEv.cliente_id} onChange={e=>setNewEv(f=>({...f,cliente_id:e.target.value}))} style={{marginTop:6}}>
              <option value="">Selecione…</option>
              {clientes.map(c => <option key={c.id} value={c.id}>{c.nome}</option>)}
            </select>
            <div style={{display:'flex',gap:10,marginTop:20}}>
              <button className="btn primary" onClick={criarEvento} disabled={saving}>{saving?'Salvando…':'Criar evento'}</button>
              <button className="btn ghost" onClick={()=>setShowNew(false)}>Cancelar</button>
            </div>
          </div>
        </div>
      )}

      <div className="page-body">
        <div className="agenda-grid">
          <div className="hd"></div>
          {days.map(d => <div key={d} className="hd">{d}</div>)}
          {hours.map(h => (
            <React.Fragment key={h}>
              <div className="hour">{h}:00</div>
              {days.map((_, di) => {
                const ev = eventos[di]?.[h];
                return <div key={di} className="cell">{ev && <div className={`evt ${ev.kind}`}><b>{ev.title}</b><div>{ev.sub}</div></div>}</div>;
              })}
            </React.Fragment>
          ))}
        </div>
      </div>
    </div>
  );
}

// ================== AGENTE ==================
const LLMS = [
  { id:'haiku',  vendor:'Anthropic', name:'Claude Haiku 4.5',  speed:'Rápido',     cost:'R$ 0,003 / msg', desc:'Recomendado · ótimo equilíbrio para atendimento e consultas TJ.', tag:'Recomendado' },
  { id:'sonnet', vendor:'Anthropic', name:'Claude Sonnet 4.6', speed:'Equilibrado',cost:'R$ 0,012 / msg', desc:'Maior capacidade de raciocínio para casos complexos.', tag:'Premium' },
  { id:'opus',   vendor:'Anthropic', name:'Claude Opus 4.5',   speed:'Profundo',   cost:'R$ 0,055 / msg', desc:'Análise jurídica robusta. Use em pareceres e revisão de petições.', tag:'Avançado' },
  { id:'gpt4o',  vendor:'OpenAI',    name:'GPT-4o',            speed:'Equilibrado',cost:'R$ 0,015 / msg', desc:'Boa alternativa para redação e respostas multilingues.' },
];

function AgentPage({ toast }) {
  const [prompt, setPrompt] = uS1('Você é a LEXIA, secretária virtual jurídica. Atenda clientes pelo WhatsApp com clareza e empatia.');
  const [model, setModel] = uS1('haiku');
  const [temp, setTemp] = uS1(0.4);
  const [msg, setMsg] = uS1('');
  const [resp, setResp] = uS1('');
  const [loading, setLoading] = uS1(false);

  const testar = async () => {
    if (!msg.trim()) return;
    setLoading(true);
    try {
      const data = await window.LEXIA.Agente.chat(msg);
      setResp(data?.resposta || data?.message || JSON.stringify(data));
    } catch(e) { setResp('Erro: ' + e.message); }
    finally { setLoading(false); }
  };

  return (
    <div className="page">
      <div className="page-head">
        <div><div className="eyebrow">Configuração</div><h1>Agente <em style={{color:'var(--sela-500)',fontStyle:'italic',fontWeight:300}}>LEXIA</em></h1></div>
        <div className="row">
          <button className="btn accent" onClick={()=>toast('Configurações salvas')}><Icon name="check" size={14}/> Salvar</button>
        </div>
      </div>
      <div className="page-body" style={{maxWidth:720}}>
        <div className="card" style={{marginBottom:14}}>
          <div className="eyebrow">Modelo de linguagem</div>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8,marginTop:10}}>
            {LLMS.map(l => (
              <div key={l.id} onClick={()=>setModel(l.id)}
                style={{padding:12,borderRadius:10,border:`1px solid ${l.id===model?'var(--sela-500)':'var(--border)'}`,background:l.id===model?'var(--sela-100)':'#fff',cursor:'pointer'}}>
                <div style={{display:'flex',justifyContent:'space-between'}}>
                  <div style={{fontFamily:'var(--font-display)',fontSize:14,fontWeight:500}}>{l.name}</div>
                  {l.tag && <span className="badge b-open" style={{fontSize:8}}>{l.tag}</span>}
                </div>
                <div style={{fontSize:11,color:'var(--fg-2)',marginTop:4,lineHeight:1.4}}>{l.desc}</div>
                <div className="mono" style={{fontSize:10,color:'var(--fg-3)',marginTop:6,display:'flex',justifyContent:'space-between'}}>
                  <span>{l.speed}</span><span>{l.cost}</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="card" style={{marginBottom:14}}>
          <div className="eyebrow">System prompt</div>
          <textarea className="input mono" rows="5" value={prompt} onChange={e=>setPrompt(e.target.value)} style={{marginTop:8,fontSize:12,lineHeight:1.5}}/>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginTop:12}}>
            <div className="eyebrow">Temperatura · {temp.toFixed(2)}</div>
            <input type="range" min="0" max="1" step="0.05" value={temp} onChange={e=>setTemp(parseFloat(e.target.value))} style={{width:200,accentColor:'var(--sela-500)'}}/>
          </div>
        </div>

        <div className="card">
          <div className="eyebrow">Testar agente</div>
          <textarea className="input" rows="3" value={msg} onChange={e=>setMsg(e.target.value)} placeholder="Digite uma mensagem de teste…" style={{marginTop:8}}/>
          <button className="btn primary" onClick={testar} disabled={loading||!msg.trim()} style={{marginTop:10}}>
            {loading ? 'Aguardando LEXIA…' : 'Enviar teste'}
          </button>
          {resp && (
            <div style={{marginTop:12,padding:12,background:'var(--paper-50)',borderRadius:10,fontSize:13,lineHeight:1.5,borderLeft:'3px solid var(--sela-500)'}}>
              <div className="eyebrow" style={{marginBottom:6}}>Resposta da LEXIA</div>
              {resp}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function ReportsPage() {
  const convs = window.CONVERSATIONS || [];
  const total = convs.length;
  const auto = convs.filter(c => c.owner === 'lexia').length;
  const pct = total > 0 ? Math.round(auto/total*100) : 0;

  return (
    <div className="page">
      <div className="page-head"><div><div className="eyebrow">Relatórios</div><h1>Visão geral</h1></div></div>
      <div className="page-body">
        <div className="grid-4" style={{marginBottom:14}}>
          <div className="tile"><div className="lbl">Conversas</div><div className="n">{total}</div><div className="d">total registradas</div></div>
          <div className="tile"><div className="lbl">Auto-resolvidas</div><div className="n">{pct}<span className="u">%</span></div><div className="d">pela LEXIA</div></div>
          <div className="tile"><div className="lbl">Clientes</div><div className="n">{(window.CLIENTS||[]).length}</div></div>
          <div className="tile"><div className="lbl">Processos</div><div className="n">{(window.PROCESSES||[]).length}</div></div>
        </div>
        <div className="card" style={{color:'var(--fg-3)',textAlign:'center',padding:40}}>
          Relatórios detalhados disponíveis em breve.
        </div>
      </div>
    </div>
  );
}

window.DashboardPage = DashboardPage;
window.ClientsPage = ClientsPage;
window.ProcessesPage = ProcessesPage;
window.AgendaPage = AgendaPage;
window.AgentPage = AgentPage;
window.ReportsPage = ReportsPage;