// Settings + Notifications pages
const { useState: uS2, useEffect: uE2, useRef: uR2 } = React;

function NotificationsPage({ toast }) {
  const [items, setItems] = uS2([]);
  const [loading, setLoading] = uS2(true);
  const [filter, setFilter] = uS2('all');

  uE2(() => {
    window.LEXIA.Notificacoes.listar()
      .then(data => setItems(Array.isArray(data) ? data : []))
      .catch(() => setItems([]))
      .finally(() => setLoading(false));
  }, []);

  const markAllRead = async () => {
    await window.LEXIA.Notificacoes.marcarTodas().catch(()=>{});
    setItems(items.map(n => ({...n, lida: true})));
    toast('Todas marcadas como lidas');
  };

  const markRead = async (id) => {
    await window.LEXIA.Notificacoes.marcarLida(id).catch(()=>{});
    setItems(items.map(n => n.id === id ? {...n, lida: true} : n));
  };

  const iconFor = { esc:'bell', proc:'file', cal:'cal', done:'check', sys:'sparkle', client:'users' };
  const colorFor = { esc:'var(--alerta-500)', proc:'var(--toga-700)', cal:'var(--sela-500)', done:'var(--selo-500)', sys:'var(--toga-500)', client:'var(--sela-600)' };
  const unreadCount = items.filter(n => !n.lida).length;

  const filtered = items.filter(n => {
    if (filter === 'unread') return !n.lida;
    if (filter === 'esc') return n.tipo === 'esc';
    if (filter === 'proc') return n.tipo === 'proc';
    return true;
  });

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="eyebrow">Central</div>
          <h1>Notificações {unreadCount > 0 && <span style={{fontSize:16,color:'var(--sela-500)',fontFamily:'var(--font-mono)',marginLeft:8}}>· {unreadCount} novas</span>}</h1>
        </div>
        <button className="btn ghost sm" onClick={markAllRead} disabled={unreadCount===0}>
          <Icon name="check" size={12}/> Marcar todas como lidas
        </button>
      </div>
      <div className="page-body" style={{maxWidth:820}}>
        <div style={{display:'flex',gap:4,marginBottom:16,borderBottom:'1px solid var(--border-soft)'}}>
          {[['all','Todas',items.length],['unread','Não lidas',unreadCount],['esc','Escalonadas',items.filter(n=>n.tipo==='esc').length],['proc','Processos',items.filter(n=>n.tipo==='proc').length]].map(([k,l,n]) =>
            <button key={k} className={`tab ${filter===k?'active':''}`} onClick={()=>setFilter(k)}
              style={{fontFamily:'var(--font-mono)',fontSize:10,letterSpacing:'.1em',textTransform:'uppercase',padding:'10px 12px',borderBottom:`2px solid ${filter===k?'var(--sela-500)':'transparent'}`,color:filter===k?'var(--toga-900)':'var(--fg-3)'}}>
              {l} <span style={{marginLeft:4,opacity:.6}}>{n}</span>
            </button>
          )}
        </div>

        {loading ? (
          <div style={{textAlign:'center',padding:40,color:'var(--fg-3)'}}>Carregando…</div>
        ) : filtered.length === 0 ? (
          <div className="empty" style={{padding:60}}><div className="ic">⁂</div>Nada por aqui.</div>
        ) : (
          <div style={{display:'flex',flexDirection:'column',gap:8}}>
            {filtered.map(n => (
              <div key={n.id} className="card" onClick={()=>markRead(n.id)}
                style={{padding:'14px 18px',display:'flex',gap:14,alignItems:'flex-start',
                  borderLeft:n.lida?'1px solid var(--border-soft)':`3px solid ${colorFor[n.tipo]||'var(--fg-3)'}`,
                  cursor:'pointer',background:n.lida?'#fff':'var(--paper-50)'}}>
                <div style={{width:36,height:36,borderRadius:'50%',background:`${(colorFor[n.tipo]||'var(--fg-3)')}22`,color:colorFor[n.tipo]||'var(--fg-3)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
                  <Icon name={iconFor[n.tipo]||'bell'} size={16}/>
                </div>
                <div style={{flex:1,minWidth:0}}>
                  <div style={{display:'flex',justifyContent:'space-between',gap:12}}>
                    <div style={{fontFamily:'var(--font-display)',fontSize:15,fontWeight:500}}>{n.titulo}</div>
                    <div className="mono" style={{fontSize:10,color:'var(--fg-3)',whiteSpace:'nowrap'}}>{n.criado_em ? new Date(n.criado_em).toLocaleTimeString('pt-BR',{hour:'2-digit',minute:'2-digit'}) : ''}</div>
                  </div>
                  {n.subtitulo && <div style={{fontSize:13,color:'var(--fg-2)',marginTop:3}}>{n.subtitulo}</div>}
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

// ================== SETTINGS ==================
function SettingsPage({ toast }) {
  const [section, setSection] = uS2('office');
  const [waStatus, setWaStatus] = uS2('idle');
  const [waState, setWaState] = uS2('');
  const [qrCode, setQrCode] = uS2('');
  const [waMsg, setWaMsg] = uS2('');
  const pollRef = uR2(null);

  const sections = [
    ['office', 'Escritório', 'file'],
    ['whatsapp', 'WhatsApp', 'inbox'],
    ['security', 'Segurança', 'settings'],
    ['integrations', 'Integrações', 'sparkle'],
  ];

  uE2(() => {
    if (section === 'whatsapp') verificarStatus();
    return () => clearInterval(pollRef.current);
  }, [section]);

  const verificarStatus = async () => {
    try {
      const data = await window.LEXIA.Setup.status();
      const state = data?.instance?.state || data?.state || '';
      setWaState(state);
      if (state === 'open') { setWaStatus('connected'); setWaMsg(''); }
      else { setWaStatus('disconnected'); setWaMsg('WhatsApp não conectado'); }
    } catch { setWaStatus('disconnected'); }
  };

  const reconectar = async () => {
    setWaStatus('loading'); setQrCode(''); setWaMsg('Gerando QR Code…');
    clearInterval(pollRef.current);
    try {
      const backendUrl = window.LEXIA_API_URL.replace('/api', '');
      await window.LEXIA.Setup.webhook(backendUrl);
      const data = await window.LEXIA.Setup.qrcode();
      const base64 = data?.base64 || data?.qrcode?.base64 || '';
      if (base64) {
        setQrCode(base64.startsWith('data:') ? base64 : `data:image/png;base64,${base64}`);
        setWaStatus('qr'); setWaMsg('Escaneie com o WhatsApp Business');
        pollRef.current = setInterval(async () => {
          try {
            const status = await window.LEXIA.Setup.status();
            const state = status?.instance?.state || '';
            if (state === 'open') {
              clearInterval(pollRef.current);
              setWaStatus('connected'); setWaState('open');
              setQrCode(''); setWaMsg('');
              toast('WhatsApp conectado com sucesso!');
            }
          } catch {}
        }, 3000);
      } else { setWaStatus('error'); setWaMsg('QR code indisponível'); }
    } catch(e) { setWaStatus('error'); setWaMsg('Erro: ' + e.message); }
  };

  const adv = window._advogado || {};

  return (
    <div className="page">
      <div className="page-head">
        <div><div className="eyebrow">Sistema</div><h1>Configurações</h1></div>
        <button className="btn accent" onClick={()=>toast('Alterações salvas')}><Icon name="check" size={14}/> Salvar</button>
      </div>
      <div className="page-body settings-body" style={{display:'grid',gridTemplateColumns:'220px 1fr',gap:28,alignItems:'start'}}>
        <aside className="settings-aside" style={{position:'sticky',top:0}}>
          {sections.map(([k,l,ic]) => (
            <button key={k} className={`nav ${section===k?'active':''}`} onClick={()=>setSection(k)}
              style={{color:section===k?'var(--toga-950)':'var(--fg-2)',background:section===k?'var(--paper-100)':'transparent',marginBottom:2}}>
              <Icon name={ic}/><span>{l}</span>
            </button>
          ))}
        </aside>

        <div style={{maxWidth:640}}>
          {section === 'office' && (
            <div className="card">
              <div className="eyebrow">Conta</div>
              <div style={{marginTop:14,fontSize:14,display:'grid',gap:10}}>
                <div><div style={{color:'var(--fg-3)',fontSize:11}}>Nome</div><div style={{marginTop:2,fontWeight:500}}>{adv.nome || '—'}</div></div>
                <div><div style={{color:'var(--fg-3)',fontSize:11}}>E-mail</div><div style={{marginTop:2}}>{adv.email || '—'}</div></div>
                <div><div style={{color:'var(--fg-3)',fontSize:11}}>OAB</div><div style={{marginTop:2}}>{adv.oab || 'Não informado'}</div></div>
                <div><div style={{color:'var(--fg-3)',fontSize:11}}>Escritório</div><div style={{marginTop:2}}>{adv.escritorio?.nome || '—'}</div></div>
                <div><div style={{color:'var(--fg-3)',fontSize:11}}>Perfil</div><div style={{marginTop:2}}>{adv.papel || '—'}</div></div>
              </div>
            </div>
          )}

          {section === 'whatsapp' && (
            <>
              <div className="card" style={{marginBottom:14}}>
                <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start'}}>
                  <div>
                    <div className="eyebrow">Status da conexão</div>
                    <div style={{fontFamily:'var(--font-display)',fontSize:18,marginTop:4}}>
                      {waStatus === 'connected' ? 'WhatsApp conectado ✅' :
                       waStatus === 'qr' ? 'Aguardando escaneamento…' :
                       waStatus === 'loading' ? 'Configurando…' :
                       'WhatsApp desconectado'}
                    </div>
                    {waMsg && <div style={{fontSize:12,color:'var(--fg-3)',marginTop:3}}>{waMsg}</div>}
                  </div>
                  {waStatus === 'connected' ? (
                    <span className="badge b-done"><span className="dot"></span>ativo</span>
                  ) : (
                    <span className="badge b-neut">inativo</span>
                  )}
                </div>

                {waStatus === 'qr' && qrCode && (
                  <div style={{textAlign:'center',marginTop:20}}>
                    <img src={qrCode} alt="QR Code" style={{width:200,height:200,borderRadius:10,border:'1px solid var(--border-soft)'}}/>
                    <div style={{fontSize:12,color:'var(--fg-3)',marginTop:8}}>Verificando conexão automaticamente…</div>
                  </div>
                )}

                <div style={{marginTop:16,display:'flex',gap:10}}>
                  {waStatus !== 'connected' && waStatus !== 'qr' && waStatus !== 'loading' && (
                    <button className="btn primary" onClick={reconectar}>Conectar WhatsApp</button>
                  )}
                  {waStatus === 'connected' && (
                    <button className="btn ghost sm" onClick={reconectar}>Reconectar</button>
                  )}
                  <button className="btn ghost sm" onClick={verificarStatus}>Verificar status</button>
                </div>
              </div>

              <div className="card">
                <div className="eyebrow">Como funciona</div>
                <div style={{fontSize:13,color:'var(--fg-2)',marginTop:8,lineHeight:1.6}}>
                  1. Clique em "Conectar WhatsApp"<br/>
                  2. Escaneie o QR code com o WhatsApp Business do escritório<br/>
                  3. A LEXIA começa a atender automaticamente<br/>
                  4. Conversas aparecem no Inbox em tempo real
                </div>
              </div>
            </>
          )}

          {section === 'security' && (
            <div className="card">
              <div className="eyebrow">Segurança</div>
              <div style={{marginTop:14,fontSize:13,color:'var(--fg-2)',lineHeight:1.6}}>
                <div style={{marginBottom:12}}>✅ Autenticação via JWT com expiração de 7 dias</div>
                <div style={{marginBottom:12}}>✅ Senhas criptografadas com bcrypt (12 rounds)</div>
                <div style={{marginBottom:12}}>✅ Conversas WhatsApp via HTTPS/TLS</div>
                <div>✅ Dados isolados por escritório (multi-tenant)</div>
              </div>
              <button className="btn ghost sm" style={{marginTop:16}} onClick={()=>{window.LEXIA.clearToken();window.location.reload();}}>
                Fazer logout
              </button>
            </div>
          )}

          {section === 'integrations' && (
            <div className="card" style={{padding:0}}>
              {[
                ['EVO API · WhatsApp','Mensagens recebidas e enviadas via Evolution API', waState === 'open' ? 'connected' : 'pending', waState === 'open' ? 'var(--selo-500)' : 'var(--alerta-500)'],
                ['TJ-MA · Consulta Processual','Monitoramento via scraping do TJMA','connected','var(--selo-500)'],
                ['Claude AI · Anthropic','Modelo de linguagem para respostas inteligentes','connected','var(--selo-500)'],
                ['PostgreSQL','Banco de dados principal','connected','var(--selo-500)'],
                ['Redis','Cache e pub/sub em tempo real','connected','var(--selo-500)'],
              ].map(([n,d,st,c],i,arr) => (
                <div key={i} style={{padding:'16px 20px',borderBottom:i<arr.length-1?'1px solid var(--border-soft)':'0',display:'flex',alignItems:'center',gap:14}}>
                  <div style={{width:10,height:10,borderRadius:'50%',background:c,flexShrink:0}}></div>
                  <div style={{flex:1}}>
                    <div style={{fontFamily:'var(--font-display)',fontWeight:500}}>{n}</div>
                    <div style={{fontSize:12,color:'var(--fg-3)',marginTop:2}}>{d}</div>
                  </div>
                  <span className={`badge ${st==='connected'?'b-done':st==='pending'?'b-open':'b-neut'}`}>
                    {st === 'connected' ? 'ativo' : st === 'pending' ? 'pendente' : 'inativo'}
                  </span>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

window.NotificationsPage = NotificationsPage;
window.SettingsPage = SettingsPage;