"use client";

import { FormEvent, useState } from "react";
import { signIn } from "next-auth/react";
import { useRouter, useSearchParams } from "next/navigation";

export function LoginForm() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [email, setEmail] = useState("admin@workonclock.local");
  const [password, setPassword] = useState("ChangeMe123!");
  const [error, setError] = useState("");
  const verified = searchParams.get("verified");

  async function submit(event: FormEvent) {
    event.preventDefault();
    setError("");
    const result = await signIn("credentials", { email, password, redirect: false });
    if (result?.error) {
      setError("Invalid email or password.");
      return;
    }
    router.push(searchParams.get("callbackUrl") ?? "/admin");
    router.refresh();
  }

  return (
    <form className="mt-6 grid gap-3" onSubmit={submit}>
      {verified === "1" ? <p className="rounded-lg bg-emerald-50 px-3 py-2 text-sm font-medium text-emerald-700">Email verified. You can sign in now.</p> : null}
      {verified === "invalid" ? <p className="rounded-lg bg-red-50 px-3 py-2 text-sm font-medium text-red-700">Verification link is invalid or expired.</p> : null}
      <input className="rounded-lg border border-slate-300 px-3 py-2 text-sm" value={email} onChange={(event) => setEmail(event.target.value)} placeholder="Email" />
      <input className="rounded-lg border border-slate-300 px-3 py-2 text-sm" value={password} onChange={(event) => setPassword(event.target.value)} placeholder="Password" type="password" />
      <button className="brand-button" type="submit">Sign in</button>
      {error ? <p className="text-sm text-brand-primary">{error}</p> : null}
    </form>
  );
}