'use client';

import React from 'react';
import Link from 'next/link';
import { useSearchParams } from 'next/navigation';
import { ArrowLeft, LifeBuoy, Loader2, ShieldCheck } from 'lucide-react';
import toast from 'react-hot-toast';
import Input from '@/components/form/input/InputField';
import Label from '@/components/form/Label';
import Button from '@/components/ui/button/Button';
import { isValidEmail } from '@/lib/utils.client';

export default function ForgotPasswordForm() {
  const searchParams = useSearchParams();
  const [email, setEmail] = React.useState(searchParams.get('email')?.trim().toLowerCase() || '');
  const [submitting, setSubmitting] = React.useState(false);
  const [submitted, setSubmitted] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const normalizedEmail = email.trim().toLowerCase();

    if (!normalizedEmail || !isValidEmail(normalizedEmail)) {
      setError('Enter a valid email address.');
      return;
    }

    try {
      setSubmitting(true);
      setError(null);

      const response = await fetch('/api/auth/forgot-password', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ email: normalizedEmail }),
      });

      const data = await response.json().catch(() => ({}));
      if (!response.ok) {
        throw new Error(data?.error || 'Failed to request password reset');
      }

      setSubmitted(true);
      toast.success(data?.message || 'If an account exists, we sent a password reset link');
    } catch (submitError) {
      const message =
        submitError instanceof Error ? submitError.message : 'Failed to request password reset';
      setError(message);
      toast.error(message);
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="flex flex-col justify-center flex-1 w-full max-w-md mx-auto">
      <div className="rounded-3xl border border-gray-200 bg-white/90 p-6 shadow-[0_24px_70px_rgba(15,23,42,0.08)] backdrop-blur dark:border-gray-800 dark:bg-gray-900/70 sm:p-8">
        <div className="mb-6">
          <div className="mb-4 inline-flex items-center gap-2 rounded-full border border-brand-200 bg-brand-50 px-3 py-1 text-xs font-semibold uppercase tracking-[0.22em] text-brand-700 dark:border-brand-500/20 dark:bg-brand-500/10 dark:text-brand-300">
            <ShieldCheck className="h-3.5 w-3.5" />
            Account Recovery
          </div>
          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">
            Forgot your password?
          </h1>
          <p className="mt-3 text-sm leading-6 text-gray-500 dark:text-gray-400">
            Enter the email you use for this charging app. If the account exists, we&apos;ll send a
            secure reset link to that inbox.
          </p>
        </div>

        {submitted ? (
          <div className="space-y-5">
            <div className="rounded-2xl border border-emerald-200 bg-emerald-50 p-5 dark:border-emerald-500/20 dark:bg-emerald-500/10">
              <p className="text-sm font-medium text-emerald-800 dark:text-emerald-200">
                Check your email
              </p>
              <p className="mt-2 text-sm leading-6 text-emerald-700 dark:text-emerald-100/90">
                If an account exists for <span className="font-semibold">{email}</span>, we sent a
                reset link that stays valid for 30 minutes.
              </p>
            </div>

            <div className="rounded-2xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-800 dark:bg-white/[0.03]">
              <p className="text-sm text-gray-600 dark:text-gray-300">
                Didn&apos;t receive it? Check spam, promotions, or request a fresh link.
              </p>
            </div>

            <div className="grid gap-3 sm:grid-cols-2">
              <Button
                type="button"
                size="sm"
                className="w-full"
                variant="outline"
                onClick={() => {
                  setSubmitted(false);
                  setError(null);
                }}
              >
                Send another link
              </Button>
              <Button size="sm" className="w-full" asChild>
                <Link href="/signin">Back to Sign In</Link>
              </Button>
            </div>
          </div>
        ) : (
          <form onSubmit={handleSubmit} className="space-y-5">
            {error && (
              <div className="rounded-2xl border border-red-200 bg-red-50 p-4 dark:border-red-500/20 dark:bg-red-500/10">
                <p className="text-sm text-red-700 dark:text-red-200">{error}</p>
              </div>
            )}

            <div>
              <Label>
                Email <span className="text-error-500">*</span>
              </Label>
              <Input
                type="email"
                name="email"
                placeholder="you@example.com"
                value={email}
                onChange={(event) => setEmail(event.target.value.toLowerCase())}
                disabled={submitting}
                error={!!error}
              />
            </div>

            <Button className="w-full" size="sm" type="submit" disabled={submitting || !email}>
              {submitting && <Loader2 className="mr-2 inline h-4 w-4 animate-spin" />}
              {submitting ? 'Sending secure link...' : 'Send Reset Link'}
            </Button>

            <Link
              href={email.trim() ? `/signin?email=${encodeURIComponent(email.trim())}` : '/signin'}
              className="inline-flex items-center gap-2 text-sm font-medium text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-300"
            >
              <ArrowLeft className="h-4 w-4" />
              Back to Sign In
            </Link>
          </form>
        )}
      </div>
    </div>
  );
}