/* Auth premium — Google/Supabase quando configurado; local fallback sem build. */

const AUTH_TOKEN_KEY = 'synapia.auth.token';
const AUTH_USER_KEY = 'synapia.auth.user';

window.authHeaders = function () {
  const token = localStorage.getItem(AUTH_TOKEN_KEY);
  return token ? { Authorization: 'Bearer ' + token } : {};
};

window.saveAuthSession = function ({ accessToken, user }) {
  if (accessToken) localStorage.setItem(AUTH_TOKEN_KEY, accessToken);
  if (user) localStorage.setItem(AUTH_USER_KEY, JSON.stringify(user));
};

window.clearAuthSession = function () {
  localStorage.removeItem(AUTH_TOKEN_KEY);
  localStorage.removeItem(AUTH_USER_KEY);
};

window.readStoredUser = function () {
  try { return JSON.parse(localStorage.getItem(AUTH_USER_KEY) || 'null'); }
  catch { return null; }
};

/* ── Partículas de fundo animadas ───────────────────────────────────────── */
function AuthParticles() {
  const canvasRef = React.useRef(null);
  React.useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let raf;
    const resize = () => { canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight; };
    resize();
    window.addEventListener('resize', resize);

    const DOTS = Array.from({ length: 55 }, () => ({
      x: Math.random(),
      y: Math.random(),
      r: Math.random() * 1.4 + 0.4,
      vx: (Math.random() - 0.5) * 0.00012,
      vy: (Math.random() - 0.5) * 0.00012,
      a: Math.random() * 0.55 + 0.1,
    }));
    const LINES_MAX_DIST = 0.22;

    const draw = () => {
      const W = canvas.width, H = canvas.height;
      ctx.clearRect(0, 0, W, H);
      DOTS.forEach(d => {
        d.x = (d.x + d.vx + 1) % 1;
        d.y = (d.y + d.vy + 1) % 1;
        ctx.beginPath();
        ctx.arc(d.x * W, d.y * H, d.r, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(14,165,233,${d.a})`;
        ctx.fill();
      });
      for (let i = 0; i < DOTS.length; i++) {
        for (let j = i + 1; j < DOTS.length; j++) {
          const dx = DOTS[i].x - DOTS[j].x, dy = DOTS[i].y - DOTS[j].y;
          const dist = Math.sqrt(dx * dx + dy * dy);
          if (dist < LINES_MAX_DIST) {
            const opacity = (1 - dist / LINES_MAX_DIST) * 0.2;
            ctx.beginPath();
            ctx.moveTo(DOTS[i].x * W, DOTS[i].y * H);
            ctx.lineTo(DOTS[j].x * W, DOTS[j].y * H);
            ctx.strokeStyle = `rgba(14,165,233,${opacity})`;
            ctx.lineWidth = 0.7;
            ctx.stroke();
          }
        }
      }
      raf = requestAnimationFrame(draw);
    };
    draw();
    return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', resize); };
  }, []);
  return <canvas ref={canvasRef} className="auth-particles" aria-hidden="true" />;
}

/* ── Features da coluna esquerda ────────────────────────────────────────── */
const FEATURES = [
  { Icon: I.bolt, label: 'Peças e revisão', desc: 'Minutas, recursos e auditoria pré-protocolo' },
  { Icon: I.scale, label: 'Pesquisa e cálculos', desc: 'DeepResearch, liquidação e análise de autos' },
  { Icon: I.globe, label: 'APIs automáticas', desc: 'Modelos, áudio e OCR geridos pela plataforma' },
];

const QUOTES = [
  { text: '"Reduzi o tempo de elaboração de contestações em 80%."', author: 'Advogado Trabalhista, SP' },
  { text: '"O melhor copiloto jurídico que já usei. Ponto final."', author: 'Sócio de Escritório, RJ' },
  { text: '"SynapIA virou parte do meu fluxo diário de trabalho."', author: 'Advogada Cível, MG' },
];

const AUTH_PLANS = [
  { id: 'starter', name: 'Essencial', price: 'R$ 59,90/mês', quota: '100 interações · 10 DeepResearch' },
  { id: 'pro', name: 'Profissional', price: 'R$ 97/mês', quota: '220 interações · 25 DeepResearch' },
  { id: 'office', name: 'Escritório', price: 'R$ 297/mês', quota: '650 interações · 3 usuários' },
];

const LANDING_PLANS = [
  { id: 'starter', name: 'Essencial', price: 'R$ 59,90', desc: 'Entrada de alto valor para advocacia individual.', bullets: ['100 interações/mês', '10 DeepResearch', '60 min de áudio', 'APIs e modelos geridos pela SynapIA'] },
  { id: 'pro', name: 'Profissional', price: 'R$ 97', desc: 'Melhor custo-benefício para uso diário.', bullets: ['220 interações/mês', '25 DeepResearch', '150 min de áudio', 'Peças, revisão, cálculos e OCR'], featured: true },
  { id: 'office', name: 'Escritório', price: 'R$ 297', desc: 'Equipe pequena com controle individual de consumo.', bullets: ['650 interações/mês', '80 DeepResearch', '450 min de áudio', '3 usuários e governança de uso'] },
];

const LANDING_MODULES = [
  ['Peças de alto nível', 'Estrutura inicial, contestação, réplica, recursos e memoriais com guardrails jurídicos.'],
  ['Revisão premium', 'Auditoria de tese, prova, pedidos, linguagem e risco antes do protocolo.'],
  ['Autos e documentos', 'Leitura de PDFs, relatórios folha a folha, OCR, transcrição e resumo acionável.'],
  ['Uso individual', 'Cada conta tem quota, custo estimado, logs e consumo por funcionalidade.'],
];

/* ── Componente principal ───────────────────────────────────────────────── */
const AuthScreen = ({ onSuccess }) => {
  const [mode, setMode] = React.useState('login');
  const [config, setConfig] = React.useState(null);
  const [name, setName] = React.useState('');
  const [phone, setPhone] = React.useState('');
  const [document, setDocument] = React.useState('');
  const [oab, setOab] = React.useState('');
  const [company, setCompany] = React.useState('');
  const [planId, setPlanId] = React.useState('starter');
  const [acceptedTerms, setAcceptedTerms] = React.useState(false);
  const [email, setEmail] = React.useState(() => localStorage.getItem('synapia.saved.email') || '');
  const [password, setPassword] = React.useState('');
  const [rememberEmail, setRememberEmail] = React.useState(() => !!localStorage.getItem('synapia.saved.email'));
  const [showPass, setShowPass] = React.useState(false);
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState('');
  const [quoteIdx, setQuoteIdx] = React.useState(0);
  const [entered, setEntered] = React.useState(false);

  React.useEffect(() => {
    fetch('/api/auth/config').then(r => r.json()).then(setConfig).catch(() => setConfig({ provider: 'local' }));
    setTimeout(() => setEntered(true), 60);
    const id = setInterval(() => setQuoteIdx(i => (i + 1) % QUOTES.length), 5200);
    return () => clearInterval(id);
  }, []);

  const submit = async (e) => {
    e.preventDefault();
    setBusy(true);
    setError('');
    try {
      const endpoint = mode === 'login' ? '/api/auth/login' : '/api/auth/register';
      const r = await fetch(endpoint, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name, phone, document, oab, company, acceptedTerms, email, password, planId }),
      });
      const j = await r.json().catch(() => ({}));
      if (!r.ok || !j.ok) throw new Error(j.error || 'Falha ao autenticar.');
      if (j.needsConfirmation) {
        setError('Cadastro criado. Confirme o e-mail antes de entrar.');
        return;
      }
      if (rememberEmail) {
        localStorage.setItem('synapia.saved.email', email);
      } else {
        localStorage.removeItem('synapia.saved.email');
      }
      saveAuthSession(j);
      onSuccess(j.user);
    } catch (err) {
      setError(String(err.message || err));
    } finally {
      setBusy(false);
    }
  };

  const googleLogin = () => {
    if (!config?.supabaseUrl || !config?.supabaseAnonKey) {
      setError('Google OAuth requer SUPABASE_URL e SUPABASE_ANON_KEY no .env.');
      return;
    }
    const redirectTo = encodeURIComponent(window.location.origin + '/auth/callback');
    window.location.href = `${config.supabaseUrl}/auth/v1/authorize?provider=google&redirect_to=${redirectTo}`;
  };

  const q = QUOTES[quoteIdx];

  return (
    <div className={`auth-shell ${entered ? 'auth-entered' : ''}`}>

      {/* ── Painel esquerdo: landing page ──────────────────────────────── */}
      <section className="auth-brand-panel">
        <AuthParticles />

        <div className="auth-brand-inner">
          <div className="auth-hero-top">
            <img src="/logo.png" alt="SynapIA Studio" className="auth-logo-img" />
            <div>
              <strong>SynapIA Studio</strong>
              <span>IA jurídica operacional</span>
            </div>
          </div>

          <div className="auth-badge">
            <span className="auth-badge-dot" />
            Planos a partir de R$ 59,90/mês
          </div>

          <h1 className="auth-headline">
            Uma IA jurídica para<br/>
            <span className="auth-headline-accent">produzir, revisar e decidir</span><br/>
            com controle de custo.
          </h1>

          <p className="auth-hero-copy">
            O SynapIA combina modelos de linguagem, pesquisa jurídica, OCR, transcrição, cálculos e automações em uma única experiência. As APIs ficam sob gestão da plataforma; o usuário recebe uso individual, limites claros e fluxo pronto para trabalho profissional.
          </p>

          <div className="auth-hero-actions">
            <button type="button" className="auth-hero-primary" onClick={() => setMode('register')}>Começar por R$ 59,90</button>
            <a className="auth-hero-secondary" href="/planos.html" target="_blank" rel="noreferrer">Ver detalhes dos planos</a>
          </div>

          <div className="auth-features">
            {FEATURES.map(({ Icon, label, desc }) => (
              <div key={label} className="auth-feature-item">
                <span className="auth-feature-icon"><Icon size={18} /></span>
                <div>
                  <strong>{label}</strong>
                  <span>{desc}</span>
                </div>
              </div>
            ))}
          </div>

          <div className="auth-module-grid">
            {LANDING_MODULES.map(([title, body]) => (
              <div key={title} className="auth-module-card">
                <strong>{title}</strong>
                <span>{body}</span>
              </div>
            ))}
          </div>

          <div className="auth-plan-strip">
            {LANDING_PLANS.map(plan => (
              <button key={plan.id} type="button" className={`auth-plan-mini ${plan.featured ? 'featured' : ''}`} onClick={() => { setPlanId(plan.id); setMode('register'); }}>
                <span>{plan.name}</span>
                <strong>{plan.price}</strong>
                <small>{plan.desc}</small>
              </button>
            ))}
          </div>

          <div className="auth-quote">
            <div key={quoteIdx} className="auth-quote-inner">
              <p>{q.text}</p>
              <cite>{q.author}</cite>
            </div>
          </div>
        </div>
      </section>

      {/* ── Painel direito: formulário ────────────────────────────────── */}
      <section className="auth-form-panel">
        <div className="auth-card">

          {/* Cabeçalho */}
          <div className="auth-card-head">
            <span className="auth-eyebrow">
              {mode === 'login' ? 'Bem-vindo de volta' : 'Crie sua conta'}
            </span>
            <h2>{mode === 'login' ? 'Entrar na plataforma' : 'Escolher plano inicial'}</h2>
            <p className="auth-card-sub">
              {mode === 'login'
                ? 'Acesse sua área de trabalho jurídica com consumo individual e APIs automáticas.'
                : 'Escolha um plano, crie sua conta e comece com controle de uso desde o primeiro acesso.'}
            </p>
          </div>

          {/* Google */}
          <button className="auth-google" type="button" onClick={googleLogin}
            disabled={busy || !config?.googleEnabled}
            title={!config?.googleEnabled ? 'Entre em contato para ativar o login com Google' : ''}>
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
              <path d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844a4.14 4.14 0 0 1-1.796 2.716v2.259h2.908c1.702-1.567 2.684-3.875 2.684-6.615z" fill="#4285F4"/>
              <path d="M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18z" fill="#34A853"/>
              <path d="M3.964 10.71A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.042l3.007-2.332z" fill="#FBBC05"/>
              <path d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.958L3.964 7.29C4.672 5.163 6.656 3.58 9 3.58z" fill="#EA4335"/>
            </svg>
            Continuar com Google
          </button>

          <div className="auth-divider"><span>ou use seu e-mail</span></div>

          {/* Formulário */}
          <form onSubmit={submit} className="auth-form">
            {mode === 'register' && (
              <>
                <div className="auth-field-wrap">
                  <label className="auth-field-label">Plano inicial</label>
                  <div style={{ display: 'grid', gap: 8 }}>
                    {AUTH_PLANS.map(plan => (
                      <button key={plan.id} type="button" onClick={() => setPlanId(plan.id)}
                        style={{ textAlign: 'left', border: `1px solid ${planId === plan.id ? 'var(--accent)' : 'var(--border)'}`, borderRadius: 8, padding: '10px 12px', background: planId === plan.id ? 'rgba(14,165,233,.12)' : 'var(--bg-elev)', color: 'var(--ink)', cursor: 'pointer' }}>
                        <strong style={{ display: 'block', fontSize: 13 }}>{plan.name} · {plan.price}</strong>
                        <span style={{ display: 'block', color: 'var(--muted)', fontSize: 12, marginTop: 2 }}>{plan.quota}</span>
                      </button>
                    ))}
                  </div>
                </div>
                <div className="auth-field-wrap">
                  <label className="auth-field-label" htmlFor="auth-name">Nome completo</label>
                  <input id="auth-name" className="auth-input" value={name}
                    onChange={e => setName(e.target.value)}
                    placeholder="João Silva" autoComplete="name" required />
                </div>
                <div className="auth-field-wrap">
                  <label className="auth-field-label" htmlFor="auth-phone">Telefone / WhatsApp</label>
                  <input id="auth-phone" className="auth-input" value={phone}
                    onChange={e => setPhone(e.target.value)}
                    placeholder="(31) 99999-9999" autoComplete="tel" required />
                </div>
                <div className="auth-field-wrap">
                  <label className="auth-field-label" htmlFor="auth-company">Escritório, órgão ou empresa</label>
                  <input id="auth-company" className="auth-input" value={company}
                    onChange={e => setCompany(e.target.value)}
                    placeholder="Nome do escritório" autoComplete="organization" />
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                  <div className="auth-field-wrap">
                    <label className="auth-field-label" htmlFor="auth-oab">OAB / identificação</label>
                    <input id="auth-oab" className="auth-input" value={oab}
                      onChange={e => setOab(e.target.value)}
                      placeholder="MG 000000" />
                  </div>
                  <div className="auth-field-wrap">
                    <label className="auth-field-label" htmlFor="auth-document">CPF/CNPJ</label>
                    <input id="auth-document" className="auth-input" value={document}
                      onChange={e => setDocument(e.target.value)}
                      placeholder="Opcional" />
                  </div>
                </div>
              </>
            )}

            <div className="auth-field-wrap">
              <label className="auth-field-label" htmlFor="auth-email">E-mail</label>
              <input id="auth-email" className="auth-input" value={email}
                onChange={e => setEmail(e.target.value)}
                placeholder="voce@escritorio.com.br" type="email"
                autoComplete="email" required />
            </div>

            <div className="auth-field-wrap">
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <label className="auth-field-label" htmlFor="auth-pass">Senha</label>
                {mode === 'login' && (
                  <button type="button" className="auth-forgot">Esqueci a senha</button>
                )}
              </div>
              <div className="auth-pass-wrap">
                <input id="auth-pass" className="auth-input" value={password}
                  onChange={e => setPassword(e.target.value)}
                  placeholder={mode === 'register' ? 'Mínimo 8 caracteres' : '••••••••'}
                  type={showPass ? 'text' : 'password'}
                  autoComplete={mode === 'login' ? 'current-password' : 'new-password'} required />
                <button type="button" className="auth-pass-eye"
                  onClick={() => setShowPass(v => !v)} aria-label="Mostrar senha">
                  {showPass ? <I.x size={15} /> : <I.eye size={15} />}
                </button>
              </div>
            </div>

            {mode === 'login' && (
              <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--fg-2)', cursor: 'pointer', marginTop: -4 }}>
                <input type="checkbox" checked={rememberEmail} onChange={e => setRememberEmail(e.target.checked)}
                  style={{ accentColor: 'var(--accent)', width: 15, height: 15, cursor: 'pointer' }} />
                Lembrar meu e-mail
              </label>
            )}

            {mode === 'register' && (
              <label style={{ display: 'flex', alignItems: 'flex-start', gap: 8, fontSize: 12, color: 'var(--fg-2)', cursor: 'pointer', lineHeight: 1.45 }}>
                <input type="checkbox" checked={acceptedTerms} onChange={e => setAcceptedTerms(e.target.checked)} required
                  style={{ accentColor: 'var(--accent)', width: 15, height: 15, cursor: 'pointer', marginTop: 2 }} />
                <span>Declaro que li e aceito os Termos de Uso, Contrato de Assinatura, Política de Privacidade e regras de uso profissional da IA jurídica.</span>
              </label>
            )}

            {error && (
              <div className="auth-error" role="alert">
                <I.x size={14} /> {error}
              </div>
            )}

            <button className="auth-submit" type="submit" disabled={busy}>
              {busy
                ? <span className="auth-spin" />
                : (mode === 'login' ? 'Entrar na plataforma' : 'Criar minha conta')}
              {!busy && <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>}
            </button>
          </form>

          <p className="auth-switch-row">
            {mode === 'login' ? 'Ainda não tem conta?' : 'Já tem uma conta?'}
            {' '}
            <button className="auth-switch" type="button"
              onClick={() => { setMode(mode === 'login' ? 'register' : 'login'); setError(''); setAcceptedTerms(false); }}>
              {mode === 'login' ? 'Ver planos e criar conta' : 'Fazer login'}
            </button>
          </p>

          <p className="auth-legal">
            Ao continuar você concorda com os{' '}
            <a href="/termos.html" target="_blank" rel="noreferrer">Termos de Uso</a>,{' '}
            <a href="/contrato.html" target="_blank" rel="noreferrer">Contrato de Assinatura</a> e{' '}
            <a href="/privacidade.html" target="_blank" rel="noreferrer">Política de Privacidade</a>.
          </p>
        </div>
      </section>
    </div>
  );
};

window.AuthScreen = AuthScreen;