'use client';

import React from 'react';
import Link from 'next/link';
import { useRouter, useSearchParams } from 'next/navigation';
import { AlertTriangle, ArrowLeft, Eye, EyeOff, Loader2, ShieldCheck } from 'lucide-react';
import toast from 'react-hot-toast';
import Button from '@/components/ui/button/Button';
import Input from '@/components/form/input/InputField';
import Label from '@/components/form/Label';

function validatePassword(password: string) {
  if (password.length < 8) {
    return 'Password must be at least 8 characters.';
  }
  if (!/[A-Z]/.test(password) || !/[a-z]/.test(password) || !/\d/.test(password)) {
    return 'Password must include uppercase, lowercase, and a number.';
  }
  return null;
}

export default function ResetPasswordForm() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const token = searchParams.get('token')?.trim() || '';

  const [newPassword, setNewPassword] = React.useState('');
  const [confirmPassword, setConfirmPassword] = React.useState('');
  const [showNewPassword, setShowNewPassword] = React.useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);
  const [invalidLink, setInvalidLink] = React.useState(!token);

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

    if (!token) {
      setInvalidLink(true);
      return;
    }

    const passwordError = validatePassword(newPassword);
    if (passwordError) {
      setError(passwordError);
      return;
    }

    if (newPassword !== confirmPassword) {
      setError('Password confirmation does not match.');
      return;
    }

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

      const response = await fetch('/api/auth/reset-password', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          token,
          new_password: newPassword,
          confirm_password: confirmPassword,
        }),
      });

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

      toast.success(data?.message || 'Password reset successfully');
      router.push('/signin?reason=password-reset-success');
    } catch (submitError) {
      const message =
        submitError instanceof Error ? submitError.message : 'Failed to reset password';
      setError(message);
      if (message !== 'password reset token is invalid or expired') {
        toast.error(message);
      }
    } finally {
      setSubmitting(false);
    }
  };

  if (invalidLink) {
    return (
      <div className="flex flex-col justify-center flex-1 w-full max-w-md mx-auto">
        <div className="rounded-3xl border border-amber-200 bg-white/90 p-6 shadow-[0_24px_70px_rgba(15,23,42,0.08)] backdrop-blur dark:border-amber-500/20 dark:bg-gray-900/70 sm:p-8">
          <div className="mb-4 inline-flex items-center gap-2 rounded-full border border-amber-200 bg-amber-50 px-3 py-1 text-xs font-semibold uppercase tracking-[0.22em] text-amber-700 dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-300">
            <AlertTriangle className="h-3.5 w-3.5" />
            Link Unavailable
          </div>
          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">
            This reset link is no longer valid
          </h1>
          <p className="mt-3 text-sm leading-6 text-gray-500 dark:text-gray-400">
            The link may have expired, already been used, or is missing required information.
            Request a new password reset email to continue.
          </p>
          {error && (
            <div className="mt-5 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 className="mt-6 grid gap-3 sm:grid-cols-2">
            <Button size="sm" className="w-full" asChild>
              <Link href="/forgot-password">Request New Link</Link>
            </Button>
            <Button size="sm" className="w-full" variant="outline" asChild>
              <Link href="/signin">Back to Sign In</Link>
            </Button>
          </div>
        </div>
      </div>
    );
  }

  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" />
            Secure Password Reset
          </div>
          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">
            Create a new password
          </h1>
          <p className="mt-3 text-sm leading-6 text-gray-500 dark:text-gray-400">
            Choose a strong new password for your charging app account. This link can only be used
            once.
          </p>
        </div>

        <form onSubmit={handleSubmit} className="space-y-5">
          {error && !invalidLink && (
            <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 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 font-medium text-gray-800 dark:text-white/90">
              Password requirements
            </p>
            <p className="mt-1 text-sm leading-6 text-gray-500 dark:text-gray-400">
              Use at least 8 characters, including uppercase, lowercase, and a number.
            </p>
          </div>

          <div>
            <Label>
              New Password <span className="text-error-500">*</span>
            </Label>
            <div className="relative">
              <Input
                type={showNewPassword ? 'text' : 'password'}
                value={newPassword}
                onChange={(event) => setNewPassword(event.target.value)}
                placeholder="Create a strong password"
                className="pr-12"
                disabled={submitting}
              />
              <button
                type="button"
                onClick={() => setShowNewPassword((prev) => !prev)}
                className="absolute inset-y-0 right-3 flex items-center text-gray-500 transition hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
                aria-label={showNewPassword ? 'Hide password' : 'Show password'}
              >
                {showNewPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
              </button>
            </div>
          </div>

          <div>
            <Label>
              Confirm Password <span className="text-error-500">*</span>
            </Label>
            <div className="relative">
              <Input
                type={showConfirmPassword ? 'text' : 'password'}
                value={confirmPassword}
                onChange={(event) => setConfirmPassword(event.target.value)}
                placeholder="Repeat your new password"
                className="pr-12"
                disabled={submitting}
              />
              <button
                type="button"
                onClick={() => setShowConfirmPassword((prev) => !prev)}
                className="absolute inset-y-0 right-3 flex items-center text-gray-500 transition hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
                aria-label={
                  showConfirmPassword ? 'Hide password confirmation' : 'Show password confirmation'
                }
              >
                {showConfirmPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
              </button>
            </div>
          </div>

          <Button
            className="w-full"
            size="sm"
            type="submit"
            disabled={submitting || !newPassword || !confirmPassword}
          >
            {submitting && <Loader2 className="mr-2 inline h-4 w-4 animate-spin" />}
            {submitting ? 'Saving new password...' : 'Reset Password'}
          </Button>

          <Link
            href="/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>
  );
}