import { Eye, EyeOff } from 'lucide-react';

import { FormEvent, useState } from 'react';

import { useForm } from '@inertiajs/react';

import {
  PasswordRequirement,
  PasswordStrengthIndicator,
} from '@/Components/auth/PasswordStrengthIndicator';
import { ErrorMessage } from '@/Components/ui/error-message';
import { Input } from '@/Components/ui/input';
import { Label } from '@/Components/ui/label';
import { LoadingButton } from '@/Components/ui/loading-button';

interface UpdatePasswordFormProps {
  className?: string;
}

const passwordRequirements: PasswordRequirement[] = [
  { id: 'length', label: 'At least 8 characters', test: (p) => p.length >= 8 },
  { id: 'uppercase', label: 'One uppercase letter', test: (p) => /[A-Z]/.test(p) },
  { id: 'lowercase', label: 'One lowercase letter', test: (p) => /[a-z]/.test(p) },
  { id: 'number', label: 'One number', test: (p) => /\d/.test(p) },
];

export default function UpdatePasswordForm({ className = '' }: UpdatePasswordFormProps) {
  const [showPassword, setShowPassword] = useState(false);

  const { data, setData, put, processing, errors, reset } = useForm({
    current_password: '',
    password: '',
    password_confirmation: '',
  });

  const submit = (e: FormEvent) => {
    e.preventDefault();
    put(route('password.update'), {
      onSuccess: () => {
        reset();
        setShowPassword(false);
      },
    });
  };

  return (
    <form onSubmit={submit} className={className}>
      <div className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="current_password">Current Password</Label>
          <Input
            id="current_password"
            type="password"
            value={data.current_password}
            onChange={(e) => setData('current_password', e.target.value)}
            disabled={processing}
            autoComplete="current-password"
          />
          <ErrorMessage error={errors.current_password} variant="inline" />
        </div>

        <div className="space-y-2">
          <Label htmlFor="password">New Password</Label>
          <div className="relative">
            <Input
              id="password"
              type={showPassword ? 'text' : 'password'}
              value={data.password}
              onChange={(e) => setData('password', e.target.value)}
              disabled={processing}
              autoComplete="new-password"
              className="pr-10"
            />
            <button
              type="button"
              onClick={() => setShowPassword(!showPassword)}
              aria-label={showPassword ? 'Hide password' : 'Show password'}
              aria-pressed={showPassword}
              className="absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-r-md"
            >
              {showPassword ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
            </button>
          </div>
          <PasswordStrengthIndicator
            password={data.password}
            passwordRequirements={passwordRequirements}
          />
          <ErrorMessage error={errors.password} variant="inline" />
        </div>

        <div className="space-y-2">
          <Label htmlFor="password_confirmation">Confirm Password</Label>
          <Input
            id="password_confirmation"
            type="password"
            value={data.password_confirmation}
            onChange={(e) => setData('password_confirmation', e.target.value)}
            disabled={processing}
            autoComplete="new-password"
          />
          <ErrorMessage error={errors.password_confirmation} variant="inline" />
        </div>

        <LoadingButton type="submit" loading={processing}>
          Update Password
        </LoadingButton>
      </div>
    </form>
  );
}