"use client";

import { Suspense, useState } from "react";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { AuthCard, FieldLabel, ErrorNote, inputClass, buttonClass } from "@/components/AuthCard";
import { apiPost } from "@/lib/client-api";

function ResetPasswordForm() {
  const router = useRouter();
  const token = useSearchParams().get("token") ?? "";
  const [password, setPassword] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setBusy(true);
    setError(null);
    const result = await apiPost("/api/auth/reset-password", { token, password });
    setBusy(false);
    if (result.ok) {
      router.push("/login?reset=1");
    } else {
      setError(result.error);
    }
  }

  if (!token) {
    return (
      <p className="text-sm text-slate-600">
        This reset link is missing its token. Request a new one from the{" "}
        <Link href="/forgot-password" className="underline">
          reset page
        </Link>
        .
      </p>
    );
  }

  return (
    <form onSubmit={submit} className="space-y-4">
      <div>
        <FieldLabel htmlFor="password">New password</FieldLabel>
        <input id="password" type="password" required autoComplete="new-password" minLength={10}
          className={inputClass}
          value={password} onChange={(e) => setPassword(e.target.value)} />
      </div>
      <ErrorNote message={error} />
      <button type="submit" disabled={busy} className={buttonClass}>
        {busy ? "Saving…" : "Set new password"}
      </button>
    </form>
  );
}

export default function ResetPasswordPage() {
  return (
    <AuthCard title="Choose a new password">
      <Suspense fallback={<p className="text-sm text-slate-500">Loading…</p>}>
        <ResetPasswordForm />
      </Suspense>
    </AuthCard>
  );
}