"use client";
import * as React from "react";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { authClient } from "@/lib/auth-client";
import { AuthCard } from "@/components/auth/auth-card";
import { PasswordInput, PasswordRequirements, passwordStrong } from "@/components/auth/password-input";
import { Button } from "@/components/ui/button";
import { Field, FieldError, Label } from "@/components/ui/label";
import { Alert } from "@/components/ui/alert";

function ResetForm() {
  const router = useRouter();
  const params = useSearchParams();
  const token = params.get("token");
  const invalid = params.get("error") === "INVALID_TOKEN" || !token;
  const [password, setPassword] = React.useState("");
  const [confirm, setConfirm] = React.useState("");
  const [error, setError] = React.useState<string | null>(null);
  const [loading, setLoading] = React.useState(false);

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!passwordStrong(password)) return setError("Choose a stronger password.");
    if (password !== confirm) return setError("Passwords do not match.");
    setLoading(true);
    const { error } = await authClient.resetPassword({ newPassword: password, token: token! });
    setLoading(false);
    if (error) return setError(error.message ?? "This link is invalid or expired.");
    router.push("/login?reset=1");
  }

  if (invalid) {
    return (
      <AuthCard title="Link expired" description="This password reset link is invalid or has expired." footer={<Link href="/forgot-password" className="font-medium text-fg underline-offset-4 hover:underline">Request a new link</Link>}>
        <Alert variant="warning">Reset links are valid for one hour and can only be used once.</Alert>
      </AuthCard>
    );
  }

  return (
    <AuthCard title="Choose a new password" description="All existing sessions will be signed out.">
      <form onSubmit={onSubmit} className="grid gap-4" noValidate>
        {error ? <Alert variant="danger">{error}</Alert> : null}
        <Field>
          <Label htmlFor="password">New password</Label>
          <PasswordInput id="password" autoComplete="new-password" required value={password} onChange={(e) => setPassword(e.target.value)} autoFocus />
          <PasswordRequirements password={password} />
        </Field>
        <Field>
          <Label htmlFor="confirm">Confirm password</Label>
          <PasswordInput id="confirm" autoComplete="new-password" required value={confirm} onChange={(e) => setConfirm(e.target.value)} />
          <FieldError>{confirm && confirm !== password ? "Passwords do not match." : null}</FieldError>
        </Field>
        <Button type="submit" size="lg" loading={loading} className="w-full">Update password</Button>
      </form>
    </AuthCard>
  );
}

export default function ResetPasswordPage() {
  return (
    <React.Suspense fallback={null}>
      <ResetForm />
    </React.Suspense>
  );
}