"use client";
import * as React from "react";
import Link from "next/link";
import { KeyRound, MailCheck } from "lucide-react";
import { authClient } from "@/lib/auth-client";
import { Button } from "@/components/ui/button";
import { Field, Input } from "@/components/ui/input";
import { toast } from "@/components/ui/toast";
import { AuthCard, FormError } from "./auth-card";
import { isValidEmail, type AuthClientError } from "./auth-errors";
import { useCooldown, RESEND_COOLDOWN_S } from "./resend-verification";

export function ForgotForm({ initialEmail = "" }: { initialEmail?: string }) {
  const [email, setEmail] = React.useState(initialEmail);
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);
  const [sent, setSent] = React.useState(false);
  const { left, start } = useCooldown(0);

  async function request() {
    setError(null);
    if (!isValidEmail(email)) {
      setError("Enter a valid email address.");
      return;
    }
    setLoading(true);
    try {
      const { error: err } = await authClient.requestPasswordReset({ email: email.trim(), redirectTo: "/reset-password" });
      if (err && (err as AuthClientError).status === 429) {
        setError("Too many requests. Please wait a minute and try again.");
        start(60);
        return;
      }
      // Whether or not an account exists, respond identically to avoid leaking who has an account.
      setSent(true);
      start(RESEND_COOLDOWN_S);
      toast.success("Reset link sent", "If an account exists for this email, the link is on its way.");
    } catch {
      setError("We couldn't reach the server. Check your connection and try again.");
    } finally {
      setLoading(false);
    }
  }

  if (sent) {
    return (
      <AuthCard
        icon={<MailCheck />}
        title="Check your inbox"
        description={
          <>
            If an account exists for <span className="font-medium text-fg">{email.trim()}</span>, we&apos;ve sent a link to reset your password. It expires in 60 minutes.
          </>
        }
        footer={
          <Link href="/login" className="font-medium text-accent underline-offset-4 hover:underline">
            Back to sign in
          </Link>
        }
      >
        <div className="space-y-3">
          <FormError>{error}</FormError>
          <Button type="button" variant="outline" className="w-full" onClick={request} loading={loading} disabled={left > 0}>
            {left > 0 ? `Send again in ${left}s` : "Send the link again"}
          </Button>
          <button type="button" className="w-full text-center text-xs text-fg-subtle underline-offset-4 hover:text-fg hover:underline" onClick={() => setSent(false)}>
            Use a different email
          </button>
        </div>
      </AuthCard>
    );
  }

  return (
    <AuthCard
      icon={<KeyRound />}
      title="Reset your password"
      description="Enter the email you signed up with and we'll send you a link to choose a new password."
      footer={
        <>
          Remembered it?{" "}
          <Link href="/login" className="font-medium text-accent underline-offset-4 hover:underline">
            Back to sign in
          </Link>
        </>
      }
    >
      <form
        onSubmit={(e) => {
          e.preventDefault();
          void request();
        }}
        noValidate
        className="space-y-4"
      >
        <FormError id="forgot-error">{error}</FormError>
        <Field label="Email" htmlFor="forgot-email">
          <Input
            id="forgot-email"
            name="email"
            type="email"
            inputMode="email"
            autoComplete="email"
            autoCapitalize="none"
            spellCheck={false}
            required
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="you@company.com"
            aria-invalid={!!error || undefined}
            aria-describedby={error ? "forgot-error" : undefined}
            autoFocus
          />
        </Field>
        <Button type="submit" size="lg" className="mt-2 w-full" loading={loading} disabled={left > 0}>
          {left > 0 ? `Try again in ${left}s` : "Send reset link"}
        </Button>
      </form>
    </AuthCard>
  );
}