import { signIn, signUp } from "./actions";

export default async function LoginPage({
  searchParams,
}: {
  searchParams: Promise<{ modo?: string; erro?: string; msg?: string }>;
}) {
  const { modo, erro, msg } = await searchParams;
  const cadastro = modo === "cadastro";

  return (
    <main className="min-h-screen grid place-items-center px-4">
      <div className="w-full max-w-sm">
        <div className="mb-8 text-center">
          <div className="mx-auto mb-3 grid h-11 w-11 place-items-center rounded-xl bg-brand-600 text-lg font-bold text-white">R$</div>
          <h1 className="text-xl font-semibold">Finanças</h1>
          <p className="text-sm text-stone-500">Pessoal e empresa, com a equipe toda.</p>
        </div>

        <form action={cadastro ? signUp : signIn} className="card space-y-4">
          {cadastro && (
            <div>
              <label className="label" htmlFor="name">Nome</label>
              <input className="input" id="name" name="name" required />
            </div>
          )}
          <div>
            <label className="label" htmlFor="email">E-mail</label>
            <input className="input" id="email" name="email" type="email" required autoComplete="email" />
          </div>
          <div>
            <label className="label" htmlFor="password">Senha</label>
            <input className="input" id="password" name="password" type="password" required minLength={6}
              autoComplete={cadastro ? "new-password" : "current-password"} />
          </div>
          {erro && <p className="text-sm text-red-600">{erro}</p>}
          {msg && <p className="text-sm text-brand-600">{msg}</p>}
          <button className="btn-primary w-full">{cadastro ? "Criar conta" : "Entrar"}</button>
        </form>

        <p className="mt-4 text-center text-sm text-stone-500">
          {cadastro ? (
            <>Já tem conta? <a className="text-brand-600 hover:underline" href="/login">Entrar</a></>
          ) : (
            <>Recebeu um convite? <a className="text-brand-600 hover:underline" href="/login?modo=cadastro">Criar conta</a></>
          )}
        </p>
      </div>
    </main>
  );
}