/* Auth screens: Login + 404 */

function LoginScreen({ onNavigate }) {
  const [email, setEmail] = useState('renato@pactopay.com.br');
  const [pwd, setPwd] = useState('••••••••••');
  const [loading, setLoading] = useState(null);
  const toast = useToast();
  const goAs = (role) => {
    setLoading(role);
    setTimeout(() => {
      setLoading(null);
      onNavigate(role === 'admin' ? 'admin' : 'portal');
    }, 600);
  };
  return (
    <div className="min-h-screen grid grid-cols-1 lg:grid-cols-2">
      {/* left: brand */}
      <div className="hidden lg:flex flex-col justify-between p-12 relative overflow-hidden"
           style={{background:'radial-gradient(1200px 600px at 0% 0%, var(--accent-deep1, #0E5E55) 0%, var(--accent-deep2, #073A35) 60%, var(--accent-deep3, #031E1B) 100%)'}}>
        <div className="relative z-10">
          <PactoLogo dark size={24} />
        </div>
        <div className="relative z-10 max-w-md">
          <div className="text-[11px] uppercase tracking-[0.2em] font-semibold text-violet-300 mb-3">Plataforma proprietária</div>
          <h2 className="text-white text-[34px] leading-[1.1] font-semibold tracking-tight">
            Orquestração de pagamentos<br/>para academias <span className="text-violet-300">do grupo Pacto.</span>
          </h2>
          <p className="text-violet-200/80 text-[14px] mt-4 leading-relaxed">
            Cada transação roteada para a adquirente onde taxa + spread é menor. Antecipação,
            conciliação e gestão de chargebacks em um único console.
          </p>
          <div className="mt-8 grid grid-cols-3 gap-3">
            {[
              { l:'Volume processado', v:'R$ 3,1Bi', s:'últimos 12 meses' },
              { l:'Adquirentes', v:'3', s:'Cielo, Rede, GetNet' },
              { l:'Economia média', v:'0,28pp', s:'vs gateway anterior' },
            ].map((k,i)=>(
              <div key={i} className="rounded-lg border border-white/10 bg-white/5 px-3 py-3 backdrop-blur">
                <div className="text-[10.5px] uppercase tracking-wider text-violet-300 font-semibold">{k.l}</div>
                <div className="text-white text-[18px] font-semibold mt-1 tabular-nums">{k.v}</div>
                <div className="text-[10.5px] text-violet-200/70 mt-0.5">{k.s}</div>
              </div>
            ))}
          </div>
        </div>
        <div className="relative z-10 text-[11.5px] text-violet-200/60">
          © PACTO PAY · Sistema interno · Não comercializado a terceiros
        </div>
        {/* visual flair */}
        <div className="absolute -bottom-20 -right-20 h-[520px] w-[520px] rounded-full"
             style={{background:'radial-gradient(circle, var(--accent-glow) 0%, rgba(var(--accent-rgb),0) 70%)'}} />
        <svg className="absolute right-12 top-24 opacity-30" width="320" height="260" viewBox="0 0 320 260" fill="none">
          <defs>
            <linearGradient id="lg1" x1="0" x2="1"><stop stopColor="var(--accent-300)" stopOpacity="0.8"/><stop offset="1" stopColor="var(--accent-500)" stopOpacity="0.1"/></linearGradient>
          </defs>
          <g stroke="url(#lg1)" strokeWidth="1.2">
            {Array.from({length:24}).map((_,i)=>(
              <path key={i} d={`M0 ${10+i*10} C 80 ${i*8}, 240 ${260-i*8}, 320 ${250-i*9}`} />
            ))}
          </g>
        </svg>
      </div>

      {/* right: form */}
      <div className="flex items-center justify-center p-6 lg:p-12 bg-white">
        <div className="w-full max-w-sm">
          <div className="lg:hidden mb-8"><PactoLogo size={24} /></div>
          <h1 className="text-[26px] font-semibold tracking-tight text-ink-900">Entrar</h1>
          <p className="text-[13px] text-ink-500 mt-1">Acesse o console operacional.</p>
          <div className="mt-6 space-y-3">
            <Input icon="mail" label="E-mail" value={email} onChange={e => setEmail(e.target.value)} />
            <Input icon="shield" label="Senha" type="password" value={pwd} onChange={e => setPwd(e.target.value)} />
            <div className="flex items-center justify-between text-[12.5px]">
              <label className="flex items-center gap-2 text-ink-600">
                <input type="checkbox" defaultChecked className="rounded border-line-300 accent-violet-500" /> Lembrar deste dispositivo
              </label>
              <a className="text-violet-600 font-semibold hover:underline cursor-pointer">Esqueci minha senha</a>
            </div>
          </div>
          <div className="mt-6 space-y-2">
            <Button className="w-full" size="lg" onClick={() => goAs('admin')} iconRight="arrowRight">
              {loading === 'admin' ? 'Entrando como Admin…' : 'Entrar como Admin'}
            </Button>
            <Button className="w-full" size="lg" variant="secondary" onClick={() => goAs('portal')} iconRight="arrowRight">
              {loading === 'portal' ? 'Entrando como Academia…' : 'Entrar como Academia'}
            </Button>
          </div>
          <div className="mt-6 text-[11.5px] text-ink-400 leading-relaxed">
            Ambos botões são atalhos do ambiente de demonstração — em produção, o papel
            é determinado pelo provedor de identidade corporativo.
          </div>
          <div className="mt-10 pt-5 border-t border-line-100 text-[11px] text-ink-400 flex items-center justify-between">
            <span>v0.18 · sandbox</span>
            <span>SOC 2 · PCI-DSS L1</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function NotFoundScreen({ onNavigate }) {
  return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-paper-100 p-6">
      <div className="text-[100px] font-bold text-violet-500/20 leading-none">404</div>
      <div className="text-[20px] font-semibold text-ink-900 mt-2">Página não encontrada</div>
      <div className="text-[13px] text-ink-500 mt-1 max-w-sm text-center">
        O endereço acessado não existe ou foi movido. Volte ao início ou utilize a busca.
      </div>
      <div className="mt-6 flex gap-2">
        <Button variant="secondary" icon="arrowLeft" onClick={() => onNavigate('admin')}>Voltar ao Backoffice</Button>
        <Button onClick={() => onNavigate('portal')} iconRight="arrowRight">Ir ao Portal</Button>
      </div>
    </div>
  );
}

Object.assign(window, { LoginScreen, NotFoundScreen });