// Pages: Login, Onboarding
const { useState, useEffect, useRef } = React;

const fmt = (txt) => txt.split(/(\*\*[^*]+\*\*)/g).map((p, i) =>
  p.startsWith('**') ? <b key={i}>{p.slice(2,-2)}</b> : <React.Fragment key={i}>{p}</React.Fragment>
);

// ================== LOGIN ==================
function LoginPage({ onLogin }) {
  const [email, setEmail] = useState('');
  const [senha, setSenha] = useState('');
  const [erro, setErro] = useState('');
  const [loading, setLoading] = useState(false);

  const entrar = async () => {
    setErro(''); setLoading(true);
    try {
      const { token, advogado } = await window.LEXIA.Auth.login(email, senha);
      window.LEXIA.setToken(token);
      window._advogado = advogado;
      await window.loadLEXIAData();
      onLogin();
    } catch (e) {
      setErro(e.message || 'Credenciais inválidas');
    } finally { setLoading(false); }
  };

  return (
    <div className="login-wrap">
      <div className="login-hero">
        <div className="brand">
          <img src="assets/logo-mark.svg" width="36" height="36" alt=""/>
          <div className="wm">LEXIA<em>AI</em></div>
        </div>
        <h1>A secretária <em>jurídica</em> que nunca dorme.</h1>
        <div className="foot">v1.0 · TJ-MA · WhatsApp Business · PostgreSQL</div>
      </div>
      <div className="login-form">
        <div className="eyebrow" style={{marginBottom:6}}>Painel do escritório</div>
        <h2>Entrar</h2>
        <p>Acesse com sua conta OAB ou e-mail institucional.</p>
        <label>E-mail</label>
        <input className="input" value={email} onChange={e=>setEmail(e.target.value)} placeholder="seu@email.com"/>
        <label>Senha</label>
        <input className="input" type="password" value={senha} onChange={e=>setSenha(e.target.value)}
          onKeyDown={e=>e.key==='Enter'&&entrar()} placeholder="••••••••"/>
        {erro && <div style={{color:'var(--alerta-500)',fontSize:13,marginTop:8}}>{erro}</div>}
        <div style={{marginTop:26, display:'flex', gap:10}}>
          <button className="btn primary" onClick={entrar} disabled={loading}>
            {loading ? 'Entrando…' : 'Entrar'} <Icon name="chev" size={14}/>
          </button>
          <button className="btn ghost">Esqueci a senha</button>
        </div>
        <div style={{marginTop:40, fontSize:12, color:'var(--fg-3)'}}>
          Primeiro acesso? <a href="#" onClick={(e)=>{e.preventDefault();onLogin('onboard')}} style={{color:'var(--sela-600)'}}>Configurar escritório →</a>
        </div>
      </div>
    </div>
  );
}

// ================== ONBOARDING ==================
function OnboardingPage({ onDone }) {
  const [step, setStep] = useState(0);
  const [form, setForm] = useState({ escritorio_nome: '', nome: '', email: '', senha: '', oab: '' });
  const [erro, setErro] = useState('');
  const [loading, setLoading] = useState(false);
  const [qrCode, setQrCode] = useState('');
  const [waStatus, setWaStatus] = useState('idle'); // idle | loading | qr | connected | error
  const [waMsg, setWaMsg] = useState('');
  const pollRef = useRef(null);
  const steps = ['Escritório', 'WhatsApp', 'Pronto'];

  useEffect(() => () => clearInterval(pollRef.current), []);

  const set = (k, v) => setForm(f => ({...f, [k]: v}));

  const iniciarWhatsApp = async () => {
    setWaStatus('loading');
    setWaMsg('Configurando instância WhatsApp…');
    try {
      const backendUrl = window.LEXIA_API_URL.replace('/api', '');
      await window.LEXIA.Setup.webhook(backendUrl);
      setWaMsg('Gerando QR Code…');
      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');
        // Polling de status
        pollRef.current = setInterval(async () => {
          try {
            const status = await window.LEXIA.Setup.status();
            const state = status?.instance?.state || status?.state || '';
            if (state === 'open') {
              clearInterval(pollRef.current);
              setWaStatus('connected');
              setWaMsg('WhatsApp conectado com sucesso!');
              setQrCode('');
              setTimeout(() => setStep(2), 1500);
            }
          } catch {}
        }, 3000);
      } else {
        setWaStatus('error');
        setWaMsg('QR code não disponível. Verifique a instância EVO API.');
      }
    } catch (e) {
      setWaStatus('error');
      setWaMsg('Erro ao configurar: ' + e.message);
    }
  };

  const continuar = async () => {
    setErro('');
    if (step === 0) {
      if (!form.escritorio_nome || !form.nome || !form.email || !form.senha) {
        setErro('Preencha todos os campos obrigatórios'); return;
      }
      setLoading(true);
      try {
        const { token, advogado } = await window.LEXIA.Auth.registro({
          escritorio_nome: form.escritorio_nome,
          nome: form.nome,
          email: form.email,
          senha: form.senha,
          oab: form.oab,
        });
        window.LEXIA.setToken(token);
        window._advogado = advogado;
        setStep(1);
        iniciarWhatsApp();
      } catch (e) {
        setErro(e.message);
      } finally { setLoading(false); }
    } else if (step === 1) {
      clearInterval(pollRef.current);
      await window.loadLEXIAData();
      setStep(2);
    }
  };

  return (
    <div style={{padding:'60px 80px', maxWidth:900, margin:'0 auto', height:'100%', overflowY:'auto'}}>
      <div className="eyebrow" style={{marginBottom:6}}>Configuração inicial · {step+1} de {steps.length}</div>
      <h1 style={{fontFamily:'var(--font-display)',fontSize:36,fontWeight:400,letterSpacing:'-.02em',margin:'0 0 24px'}}>
        {step === 0 && 'Vamos começar pelo essencial.'}
        {step === 1 && <>Conecte seu <em style={{color:'var(--sela-500)',fontStyle:'italic',fontWeight:300}}>WhatsApp Business</em>.</>}
        {step === 2 && 'Tudo pronto para atender.'}
      </h1>
      <div className="steps">{steps.map((_,i) => <div key={i} className={`s ${i<step?'done':i===step?'current':''}`}></div>)}</div>

      {step === 0 && (
        <div className="card" style={{maxWidth:560}}>
          <label className="eyebrow">Nome do escritório *</label>
          <input className="input" value={form.escritorio_nome} onChange={e=>set('escritorio_nome',e.target.value)} placeholder="Ex: Mendonça & Associados" style={{marginTop:6}}/>
          <label className="eyebrow" style={{display:'block',marginTop:16}}>Seu nome completo *</label>
          <input className="input" value={form.nome} onChange={e=>set('nome',e.target.value)} placeholder="Dr. Rafael Mendonça" style={{marginTop:6}}/>
          <label className="eyebrow" style={{display:'block',marginTop:16}}>E-mail *</label>
          <input className="input" type="email" value={form.email} onChange={e=>set('email',e.target.value)} placeholder="contato@escritorio.com.br" style={{marginTop:6}}/>
          <label className="eyebrow" style={{display:'block',marginTop:16}}>Senha *</label>
          <input className="input" type="password" value={form.senha} onChange={e=>set('senha',e.target.value)} placeholder="Mínimo 8 caracteres" style={{marginTop:6}}/>
          <label className="eyebrow" style={{display:'block',marginTop:16}}>OAB (opcional)</label>
          <div style={{display:'flex',gap:10,marginTop:6}}>
            <input className="input" value={form.oab} onChange={e=>set('oab',e.target.value)} placeholder="12345/MA"/>
          </div>
          {erro && <div style={{color:'var(--alerta-500)',fontSize:13,marginTop:12}}>{erro}</div>}
        </div>
      )}

      {step === 1 && (
        <div style={{display:'grid',gridTemplateColumns:'1fr 300px',gap:40,alignItems:'start'}}>
          <div className="card">
            <div style={{fontSize:14,color:'var(--fg-2)',marginBottom:16}}>
              Escaneie o QR code abaixo com o <b>WhatsApp Business</b> do seu escritório para ativar o atendimento automático via LEXIA.
            </div>

            {waStatus === 'loading' && (
              <div style={{textAlign:'center',padding:'40px 0',color:'var(--fg-3)'}}>
                <div style={{fontSize:24,marginBottom:12}}>⏳</div>
                <div>{waMsg}</div>
              </div>
            )}

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

            {waStatus === 'connected' && (
              <div style={{textAlign:'center',padding:'40px 0'}}>
                <div style={{fontSize:40,marginBottom:12}}>✅</div>
                <div style={{fontFamily:'var(--font-display)',fontSize:18,color:'var(--selo-600)'}}>{waMsg}</div>
              </div>
            )}

            {waStatus === 'error' && (
              <div style={{padding:'20px',background:'var(--alerta-50)',borderRadius:10,color:'var(--alerta-700)',fontSize:14}}>
                <b>Erro:</b> {waMsg}
                <div style={{marginTop:12}}>
                  <button className="btn ghost sm" onClick={iniciarWhatsApp}>Tentar novamente</button>
                </div>
              </div>
            )}

            <div style={{marginTop:16,padding:12,background:'var(--selo-100)',borderRadius:10,fontSize:13,color:'var(--selo-600)'}}>
              ✓ Webhook configurado automaticamente<br/>
              ✓ Mensagens processadas pela LEXIA AI
            </div>
          </div>

          <div className="wa-mini">
            <div className="top">
              <div className="av">L</div>
              <div><div className="nm">LEXIA · {form.escritorio_nome || 'Escritório'}</div><div className="st">online</div></div>
            </div>
            <div className="body">
              <div className="m in">Olá! Sou a LEXIA, secretária virtual. Em que posso ajudar?<span className="tm">agora</span></div>
            </div>
            <div className="bar"><div className="inp">Mensagem</div><div className="s">➤</div></div>
          </div>
        </div>
      )}

      {step === 2 && (
        <div className="card" style={{maxWidth:560,textAlign:'center',padding:'40px 32px'}}>
          <div style={{width:64,height:64,borderRadius:'50%',background:'var(--selo-100)',color:'var(--selo-600)',display:'inline-flex',alignItems:'center',justifyContent:'center',marginBottom:16}}>
            <Icon name="check" size={28}/>
          </div>
          <h3 style={{fontFamily:'var(--font-display)',fontSize:24,fontWeight:500,margin:'0 0 6px'}}>LEXIA está pronta.</h3>
          <p style={{color:'var(--fg-2)',margin:'0 0 20px'}}>
            Bem-vindo, <b>{form.nome}</b>! Seu escritório <b>{form.escritorio_nome}</b> está configurado.
            {waStatus === 'connected' ? ' WhatsApp conectado e pronto para atender.' : ''}
          </p>
          <button className="btn accent" onClick={onDone}>Ir para o painel →</button>
        </div>
      )}

      <div style={{marginTop:28,display:'flex',gap:10}}>
        {step > 0 && step < 2 && <button className="btn ghost" onClick={()=>setStep(s=>s-1)}>Voltar</button>}
        {step === 0 && <button className="btn primary" onClick={continuar} disabled={loading}>{loading ? 'Criando conta…' : 'Continuar →'}</button>}
        {step === 1 && waStatus !== 'connected' && (
          <button className="btn ghost" onClick={continuar}>Pular por agora →</button>
        )}
      </div>
    </div>
  );
}

window.LoginPage = LoginPage;
window.OnboardingPage = OnboardingPage;
window.fmt = fmt;