/* auth.jsx — login / registro completo + verificação por e-mail */
const {
  Button: AB, Input: AInput, Alert: AAlert, AlertDescription: AAlertDesc,
  IconGoogle, IconMail, IconLock, IconUser, IconPhone, IconMapPin,
  IconSearch: AIconSearch, IconCheckCircle: AIconCheck, cn: acn,
} = window;

const onlyD = (s) => (s || '').replace(/\D/g, '');
function maskPhone(v) {
  const d = onlyD(v).slice(0, 11);
  if (d.length <= 2) return d.replace(/(\d{0,2})/, '($1');
  if (d.length <= 7) return d.replace(/(\d{2})(\d{0,5})/, '($1) $2');
  return d.replace(/(\d{2})(\d{5})(\d{0,4})/, '($1) $2-$3');
}
function maskCep(v) {
  const d = onlyD(v).slice(0, 8);
  return d.length > 5 ? d.replace(/(\d{5})(\d{0,3})/, '$1-$2') : d;
}

function AuthScreen({ onAuth, initialMode = 'login', onBack }) {
  const { useState } = React;
  const [mode, setMode] = useState(initialMode); // 'login' | 'register'
  const [step, setStep] = useState('form'); // 'form' | 'verify'
  const [f, setF] = useState({ name: '', email: '', phone: '', cep: '', address: '', city: '', uf: '', pass: '', pass2: '' });
  const [err, setErr] = useState('');
  const set = (k, v) => setF((p) => ({ ...p, [k]: v }));

  const google = () => onAuth({ name: 'Afiliada', email: 'voce@gmail.com', provider: 'google' });

  const submitLogin = (e) => {
    e.preventDefault();
    if (!f.email.trim() || !f.pass.trim()) return setErr('Preencha e-mail e senha.');
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(f.email.trim())) return setErr('Informe um e-mail válido.');
    onAuth({ name: f.email.trim().split('@')[0], email: f.email.trim(), provider: 'email' });
  };

  const submitRegister = (e) => {
    e.preventDefault();
    if (!f.name.trim()) return setErr('Informe seu nome completo.');
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(f.email.trim())) return setErr('Informe um e-mail válido.');
    if (onlyD(f.phone).length < 10) return setErr('Informe um telefone válido com DDD.');
    if (onlyD(f.cep).length !== 8) return setErr('Informe um CEP válido.');
    if (!f.address.trim()) return setErr('Informe seu endereço.');
    if (!f.city.trim() || !f.uf.trim()) return setErr('Informe cidade e estado.');
    if (f.pass.length < 6) return setErr('A senha deve ter ao menos 6 caracteres.');
    if (f.pass !== f.pass2) return setErr('As senhas não conferem.');
    setErr('');
    setStep('verify');
  };

  const finishVerify = () => {
    onAuth({ name: f.name.trim(), email: f.email.trim(), phone: f.phone, cep: f.cep, address: f.address, city: f.city, uf: f.uf, provider: 'email', verified: true });
  };

  return (
    <div className="relative flex min-h-screen items-center justify-center overflow-hidden px-4 py-10 sm:px-5 sm:py-12">
      <div className="pointer-events-none absolute -top-32 left-1/2 h-[420px] w-[620px] max-w-[140vw] -translate-x-1/2 rounded-full opacity-30 blur-[120px]"
        style={{ background: 'radial-gradient(60% 60% at 50% 50%, rgba(22,191,163,.5), transparent 70%), radial-gradient(50% 50% at 70% 60%, rgba(249,94,46,.5), transparent 70%)' }} />

      <div className="relative w-full max-w-md">
        {onBack && step === 'form' && (
          <button onClick={onBack} className="mb-5 inline-flex items-center gap-1.5 text-sm text-zinc-500 transition-colors hover:text-zinc-300">
            <span className="text-base leading-none">←</span> Voltar
          </button>
        )}

        <div className="mb-6 flex flex-col items-center text-center">
          <span className="mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br from-brand to-coral text-ink shadow-[0_8px_30px_-6px_rgba(22,191,163,0.5)]">
            <AIconSearch size={22} className="text-ink" />
          </span>
          <h1 className="font-syne text-3xl font-extrabold tracking-tight text-white">Acha<span className="text-brand">Mais</span></h1>
          <p className="mt-1.5 text-sm text-zinc-500">A melhor comissão das duas plataformas, em uma busca.</p>
        </div>

        {step === 'verify' ? (
          <VerifyEmail email={f.email} onBack={() => setStep('form')} onDone={finishVerify} />
        ) : (
          <div className="rounded-2xl border border-edge bg-panel p-5 shadow-2xl shadow-black/50 sm:p-6">
            <div className="mb-5 grid grid-cols-2 gap-1 rounded-xl border border-edge bg-white/[0.03] p-1">
              {[['login', 'Entrar'], ['register', 'Criar conta']].map(([m, label]) => (
                <button key={m} onClick={() => { setMode(m); setErr(''); }}
                  className={acn('rounded-lg py-2 text-sm font-medium transition-all', mode === m ? 'bg-white/[0.08] text-white shadow-sm' : 'text-zinc-400 hover:text-zinc-200')}>
                  {label}
                </button>
              ))}
            </div>

            <button onClick={google}
              className="mb-5 flex h-11 w-full items-center justify-center gap-3 rounded-xl border border-edge bg-white text-sm font-semibold text-zinc-800 transition-colors hover:bg-zinc-100">
              <IconGoogle size={18} /> Continuar com Google
            </button>

            <div className="mb-5 flex items-center gap-3 text-xs text-zinc-600">
              <span className="h-px flex-1 bg-edge" /> ou com e-mail <span className="h-px flex-1 bg-edge" />
            </div>

            {mode === 'login' ? (
              <form onSubmit={submitLogin} className="space-y-3">
                <Field icon={<IconMail size={17} />}>
                  <AInput type="email" value={f.email} onChange={(e) => set('email', e.target.value)} placeholder="seu@email.com" className="h-11 pl-10" />
                </Field>
                <Field icon={<IconLock size={17} />}>
                  <AInput type="password" value={f.pass} onChange={(e) => set('pass', e.target.value)} placeholder="Senha" className="h-11 pl-10" />
                </Field>
                {err && <AAlert tone="coral" className="py-2 text-xs"><AAlertDesc>{err}</AAlertDesc></AAlert>}
                <AB type="submit" className="h-11 w-full">Entrar</AB>
                <button type="button" className="mt-1 block w-full text-center text-xs text-zinc-500 transition-colors hover:text-zinc-300">Esqueci minha senha</button>
              </form>
            ) : (
              <form onSubmit={submitRegister} className="space-y-3">
                <AInput value={f.name} onChange={(e) => set('name', e.target.value)} placeholder="Nome completo" className="h-11" />
                <AInput type="email" value={f.email} onChange={(e) => set('email', e.target.value)} placeholder="seu@email.com" className="h-11" />
                <AInput inputMode="numeric" value={f.phone} onChange={(e) => set('phone', maskPhone(e.target.value))} placeholder="(00) 00000-0000" className="h-11" />

                <div className="grid grid-cols-[1fr_1.5fr] gap-3">
                  <AInput inputMode="numeric" value={f.cep} onChange={(e) => set('cep', maskCep(e.target.value))} placeholder="CEP" className="h-11" />
                  <AInput value={f.address} onChange={(e) => set('address', e.target.value)} placeholder="Rua, número" className="h-11" />
                </div>
                <div className="grid grid-cols-[1.6fr_0.8fr] gap-3">
                  <AInput value={f.city} onChange={(e) => set('city', e.target.value)} placeholder="Cidade" className="h-11" />
                  <AInput value={f.uf} onChange={(e) => set('uf', e.target.value.toUpperCase().slice(0, 2))} placeholder="UF" className="h-11 uppercase" />
                </div>

                <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                  <AInput type="password" value={f.pass} onChange={(e) => set('pass', e.target.value)} placeholder="Senha" className="h-11" />
                  <AInput type="password" value={f.pass2} onChange={(e) => set('pass2', e.target.value)} placeholder="Confirmar senha" className="h-11" />
                </div>

                {err && <AAlert tone="coral" className="py-2 text-xs"><AAlertDesc>{err}</AAlertDesc></AAlert>}
                <AB type="submit" className="h-11 w-full">Criar minha conta</AB>
              </form>
            )}
          </div>
        )}

        <p className="mt-5 text-center text-xs leading-relaxed text-zinc-600">
          Ao continuar, você concorda com os <a href="#" className="text-zinc-400 underline-offset-2 hover:underline">Termos</a> e a <a href="#" className="text-zinc-400 underline-offset-2 hover:underline">Política de Privacidade</a>.
        </p>
      </div>
    </div>
  );
}

/* ---------- Verificação por e-mail (código de 6 dígitos) ---------- */
function VerifyEmail({ email, onBack, onDone }) {
  const { useState, useRef, useEffect } = React;
  const [code, setCode] = useState(['', '', '', '', '', '']);
  const [err, setErr] = useState('');
  const [resent, setResent] = useState(false);
  const [secs, setSecs] = useState(38);
  const refs = useRef([]);

  useEffect(() => {
    if (refs.current[0]) refs.current[0].focus();
  }, []);
  useEffect(() => {
    if (secs <= 0) return;
    const t = setTimeout(() => setSecs((s) => s - 1), 1000);
    return () => clearTimeout(t);
  }, [secs]);

  const onChange = (i, v) => {
    const d = v.replace(/\D/g, '').slice(-1);
    const next = [...code]; next[i] = d; setCode(next); setErr('');
    if (d && i < 5 && refs.current[i + 1]) refs.current[i + 1].focus();
  };
  const onKey = (i, e) => {
    if (e.key === 'Backspace' && !code[i] && i > 0 && refs.current[i - 1]) refs.current[i - 1].focus();
  };
  const onPaste = (e) => {
    const d = (e.clipboardData.getData('text') || '').replace(/\D/g, '').slice(0, 6).split('');
    if (d.length) { e.preventDefault(); const next = ['', '', '', '', '', '']; d.forEach((x, i) => next[i] = x); setCode(next); const last = Math.min(d.length, 6) - 1; if (refs.current[last]) refs.current[last].focus(); }
  };

  const confirm = () => {
    if (code.join('').length < 6) { setErr('Digite o código de 6 dígitos.'); return; }
    onDone();
  };

  return (
    <div className="rounded-2xl border border-edge bg-panel p-5 shadow-2xl shadow-black/50 sm:p-6">
      <div className="flex flex-col items-center text-center">
        <span className="mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-brand/12 text-brand"><IconMail size={24} /></span>
        <h2 className="font-syne text-xl font-bold text-white">Confirme seu e-mail</h2>
        <p className="mt-1.5 text-sm text-zinc-400">Enviamos um código de 6 dígitos para<br /><span className="font-medium text-zinc-200">{email || 'seu e-mail'}</span></p>
      </div>

      <div className="mt-6 flex justify-center gap-2" onPaste={onPaste}>
        {code.map((c, i) => (
          <input
            key={i}
            ref={(el) => (refs.current[i] = el)}
            value={c}
            onChange={(e) => onChange(i, e.target.value)}
            onKeyDown={(e) => onKey(i, e)}
            inputMode="numeric"
            maxLength={1}
            className="h-12 w-11 rounded-xl border border-edge bg-white/[0.04] text-center text-lg font-bold text-white transition-all focus:border-brand/60 focus:outline-none focus:ring-2 focus:ring-brand/25 sm:h-14 sm:w-12"
          />
        ))}
      </div>

      {err && <AAlert tone="coral" className="mt-4 py-2 text-xs"><AAlertDesc>{err}</AAlertDesc></AAlert>}

      <div className="mt-4 rounded-xl border border-edge bg-white/[0.02] px-3 py-2 text-center text-xs text-zinc-500">
        Demonstração: use qualquer código de 6 dígitos para confirmar.
      </div>

      <AB onClick={confirm} className="mt-4 h-11 w-full">Confirmar e entrar</AB>

      <div className="mt-4 flex items-center justify-between text-xs">
        <button onClick={onBack} className="inline-flex items-center gap-1 text-zinc-500 transition-colors hover:text-zinc-300"><span className="text-sm leading-none">←</span> Voltar</button>
        {secs > 0 ? (
          <span className="text-zinc-600">Reenviar em {secs}s</span>
        ) : (
          <button onClick={() => { setResent(true); setSecs(38); }} className="font-medium text-brand hover:underline">{resent ? 'Código reenviado ✓' : 'Reenviar código'}</button>
        )}
      </div>
    </div>
  );
}

function Field({ icon, children }) {
  return (
    <div className="relative">
      <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500">{icon}</span>
      {children}
    </div>
  );
}

Object.assign(window, { AuthScreen });