"use client";
import { useState } from "react";
import Link from "next/link";
import AuthShell, { Field } from "@/components/AuthShell";
import { api } from "@/lib/api";

export default function Forgot() {
  const [email, setEmail] = useState("");
  const [sent, setSent] = useState(false);

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    await api("/auth/forgot-password", { method: "POST", body: JSON.stringify({ email }) });
    setSent(true);
  }

  return (
    <AuthShell title="Forgot password" subtitle="We'll email you a reset link">
      {sent ? (
        <p className="text-sm text-slate-600">
          If that email exists, a reset link is on its way. (Dev: check backend console.)
        </p>
      ) : (
        <form onSubmit={submit}>
          <Field label="Email" type="email" value={email} onChange={(e: any) => setEmail(e.target.value)} required />
          <button className="w-full bg-brand-600 text-white py-2.5 rounded-lg font-semibold">Send reset link</button>
        </form>
      )}
      <Link href="/login" className="text-brand-600 text-sm mt-4 inline-block">Back to login</Link>
    </AuthShell>
  );
}