import { useState } from 'react';
import { toast } from 'sonner';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Button } from '@/components/ui/button';
import { useForm } from 'hooks/useForm';
import { useAuth } from 'hooks/useAuth';
import { useTranslation } from '@/lib/i18n';

type PasswordFormState = {
  password?: string;
  newPassword?: string;
  confirmPassword?: string;
};

const validate = (state: Partial<PasswordFormState>) => {
  const { password, newPassword, confirmPassword } = state;
  return !!(password && newPassword && confirmPassword && newPassword === confirmPassword);
};

export const ChangePassword = () => {
  const { changePassword } = useAuth();
  const { t } = useTranslation();
  const [isChanging, setIsChanging] = useState(false);
  const form = useForm<PasswordFormState>({}, validate);

  const handleSubmit = async (ev: React.FormEvent) => {
    ev.preventDefault();
    if (!form.isValid || isChanging) return;

    setIsChanging(true);
    try {
      await changePassword({
        password: form.state.password!,
        newPassword: form.state.newPassword!,
        confirmPassword: form.state.confirmPassword!,
      });
      toast.success(t('settings.profile.changePassword.passwordChanged'));
      form.update({ password: '', newPassword: '', confirmPassword: '' });
    } catch (ex) {
      const error = ex as { message?: string };
      toast.error(error.message || t('settings.profile.changePassword.passwordChangeFailed'));
      form.update({ password: '', newPassword: '', confirmPassword: '' });
    } finally {
      setIsChanging(false);
    }
  };

  return (
    <div>
      <form ref={form.formRef} onSubmit={handleSubmit} className="grid gap-4">
        <Label className="grid gap-2">
          <span className="text-duck-dark/70">{t('settings.profile.changePassword.currentPasswordLabel')}</span>
          <Input
            className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
            type="password"
            name="password"
            placeholder={t('settings.profile.changePassword.currentPasswordPlaceholder')}
            autoComplete="current-password"
          />
        </Label>

        <Label className="grid gap-2">
          <span className="text-duck-dark/70">{t('settings.profile.changePassword.newPasswordLabel')}</span>
          <Input
            className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
            type="password"
            name="newPassword"
            placeholder={t('settings.profile.changePassword.newPasswordPlaceholder')}
            autoComplete="new-password"
          />
        </Label>

        <Label className="grid gap-2">
          <span className="text-duck-dark/70">{t('settings.profile.changePassword.confirmPasswordLabel')}</span>
          <Input
            className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
            type="password"
            name="confirmPassword"
            placeholder={t('settings.profile.changePassword.confirmPasswordPlaceholder')}
            autoComplete="new-password"
          />
        </Label>

        <Button
          type="submit"
          disabled={!form.isValid || isChanging}
          className="w-full h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
        >
          {isChanging
            ? t('settings.profile.changePassword.changingButton')
            : t('settings.profile.changePassword.changeButton')}
        </Button>
      </form>
    </div>
  );
};
