"use client";

import { FormEvent, useState } from "react";
import { useRouter } from "next/navigation";

export function ResetPasswordForm({ token }: { token: string }) {
  const router = useRouter();
  const [message, setMessage] = useState("");

  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = new FormData(event.currentTarget);
    const response = await fetch("/api/password-reset/confirm", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ token, password: form.get("password") })
    });
    if (!response.ok) {
      const payload = await response.json();
      setMessage(payload.error ?? "Password reset failed.");
      return;
    }
    router.push("/login");
  }

  return (
    <form className="mt-6 grid gap-3" onSubmit={submit}>
      <input className="rounded-lg border border-slate-300 px-3 py-2 text-sm" name="password" placeholder="New password" required type="password" />
      <button className="brand-button" type="submit">Reset password</button>
      {message ? <p className="text-sm text-brand-primary">{message}</p> : null}
    </form>
  );
}