"use client";

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

export default function ForgotPasswordPage() {
  const [email, setEmail] = useState("");
  const [sent, setSent] = useState(false);
  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/request-password-reset", { email });
    setBusy(false);
    if (result.ok) setSent(true);
    else setError(result.error);
  }

  return (
    <AuthCard
      title="Reset your password"
      footer={
        <Link href="/login" className="font-medium text-slate-900 underline">
          Back to log in
        </Link>
      }
    >
      {sent ? (
        <p className="text-sm text-slate-600">
          If an account exists for <span className="font-medium">{email}</span>, a reset link is on
          its way. The link expires in 30 minutes.
        </p>
      ) : (
        <form onSubmit={submit} className="space-y-4">
          <div>
            <FieldLabel htmlFor="email">Email</FieldLabel>
            <input id="email" type="email" required autoComplete="email" className={inputClass}
              value={email} onChange={(e) => setEmail(e.target.value)} />
          </div>
          <ErrorNote message={error} />
          <button type="submit" disabled={busy} className={buttonClass}>
            {busy ? "Sending…" : "Send reset link"}
          </button>
        </form>
      )}
    </AuthCard>
  );
}