// Login screen — única tela pública. Autentica via POST /v1/auth/login (email + senha).

function LoginScreen({ onAuth }) {
  const [email, setEmail] = useState('');
  const [senha, setSenha] = useState('');
  const [loading, setLoading] = useState(false);
  const [err, setErr] = useState(null);

  const submit = async (e) => {
    e.preventDefault();
    setErr(null);
    if (!email || !senha) {
      setErr('Informe e-mail e senha.');
      return;
    }
    setLoading(true);
    try {
      const res = await fetch(`${API_BASE}/v1/auth/login`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password: senha }),
      });
      if (!res.ok) {
        const body = await res.json().catch(() => ({}));
        setErr(body.detail || 'Não foi possível entrar. Verifique e-mail e senha.');
        return;
      }
      const data = await res.json();
      onAuth({ token: data.access_token, user: data.user, tenant: data.tenant, expiresAt: data.expires_at });
    } catch (_e) {
      setErr('Falha de conexão com o servidor. Tente novamente em instantes.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-full grid grid-cols-1 lg:grid-cols-[1fr_440px] bg-ink-50">
      {/* Left brand panel */}
      <div className="hidden lg:flex flex-col justify-between p-12 bg-white border-r border-ink-200 relative overflow-hidden">
        <Logo size="lg" />

        <div className="relative z-10 max-w-md">
          <div className="text-[11px] uppercase tracking-tracker text-navy-800 font-semibold mb-3">
            Plataforma de viabilidade pericial
          </div>
          <h2 className="text-[28px] leading-[1.2] font-bold text-ink-900 tracking-tightish">
            Análise revisional de contratos<br />em minutos, não em dias.
          </h2>
          <p className="mt-5 text-[14px] leading-relaxed text-ink-700">
            Envie o contrato em PDF e receba planilha de cálculo, painel de viabilidade
            e memória técnica detalhada. Taxa abusiva, capitalização e CET XIRR
            verificados nos parâmetros do Bacen na data-base.
          </p>

          <div className="mt-8 space-y-3">
            {[
              ['Critérios objetivos', 'Excesso de taxa vs. média Bacen, capitalização em periodicidade inferior à anual.'],
              ['Alertas operacionais', 'Urgência processual, custódia frágil e refinanciamento sinalizados ao perito.'],
              ['Memória de cálculo verificável', 'CET via XIRR, seguros listados 1-a-1 e fontes citadas.'],
            ].map(([t, d]) => (
              <div key={t} className="flex items-start gap-3">
                <span className="mt-1 text-navy-800"><Icon.Check /></span>
                <div>
                  <div className="text-[13.5px] font-semibold text-ink-900">{t}</div>
                  <div className="text-[12.5px] text-ink-500 leading-snug">{d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="text-[11px] uppercase tracking-tracker text-ink-400 font-medium">
          Análise prévia sem validade jurídica · Documento interno e comercial
        </div>

        <div className="absolute -right-32 -bottom-32 w-[460px] h-[460px] rounded-full stripes-navy opacity-60" />
      </div>

      {/* Right login form */}
      <div className="flex items-center justify-center p-8">
        <div className="w-full max-w-sm">
          <div className="lg:hidden mb-8 flex justify-center"><Logo size="lg" /></div>

          <h1 className="text-[20px] font-semibold text-ink-900">Entrar na sua conta</h1>
          <p className="mt-1 text-[13px] text-ink-500">Acesso restrito a peritos credenciados.</p>

          <form onSubmit={submit} className="mt-7 space-y-4">
            <Field label="E-mail corporativo">
              <TextInput
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="voce@escritorio.com.br"
                autoComplete="username"
                autoFocus
              />
            </Field>
            <Field label="Senha">
              <TextInput
                type="password"
                value={senha}
                onChange={(e) => setSenha(e.target.value)}
                placeholder="••••••••"
                autoComplete="current-password"
              />
            </Field>

            {err && (
              <div className="text-[12.5px] text-danger-700 bg-danger-50 border border-danger-200 rounded-md px-3 py-2 flex items-start gap-2">
                <span className="mt-0.5"><Icon.Alert /></span>
                <span>{err}</span>
              </div>
            )}

            <Button type="submit" size="lg" className="w-full" disabled={loading}>
              {loading ? <><Spinner color="#fff" /> Entrando…</> : <>Entrar <Icon.ArrowR /></>}
            </Button>

            <div className="flex items-center justify-between text-[12.5px]">
              <button
                type="button"
                onClick={() => alert('Em breve: fluxo de redefinição por e-mail.\n\n(Por ora, contate o administrador do escritório.)')}
                className="text-navy-800 hover:underline"
              >
                Esqueci a senha
              </button>
              <span className="text-ink-400 font-mono text-[11px]">Periciei v1.0</span>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}

window.LoginScreen = LoginScreen;