"use client";
import * as React from "react";
import Link from "next/link";
import { authClient } from "@/lib/auth-client";
import { AuthCard } from "@/components/auth/auth-card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Field, Label } from "@/components/ui/label";
import { Alert } from "@/components/ui/alert";

export default function ForgotPasswordPage() {
  const [email, setEmail] = React.useState("");
  const [sent, setSent] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault();
    setLoading(true);
    setError(null);
    const { error } = await authClient.requestPasswordReset({ email: email.trim(), redirectTo: "/reset-password" });
    setLoading(false);
    if (error && error.status === 429) return setError("Too many attempts. Wait a minute and try again.");
    setSent(true); // Always confirm to avoid leaking whether an account exists.
  }

  return (
    <AuthCard
      title="Reset your password"
      description="Enter your account email and we will send a link to choose a new password."
      footer={<Link href="/login" className="font-medium text-fg underline-offset-4 hover:underline">Back to log in</Link>}
    >
      {sent ? (
        <Alert variant="success" title="Check your inbox">If an account exists for {email}, a reset link is on its way. It expires in one hour.</Alert>
      ) : (
        <form onSubmit={onSubmit} className="grid gap-4" noValidate>
          {error ? <Alert variant="danger">{error}</Alert> : null}
          <Field>
            <Label htmlFor="email">Email</Label>
            <Input id="email" type="email" autoComplete="email" required value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@company.com" autoFocus />
          </Field>
          <Button type="submit" size="lg" loading={loading} className="w-full">Send reset link</Button>
        </form>
      )}
    </AuthCard>
  );
}