'use client';


import React, { useState, useEffect } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@alga-psa/ui/components/Card';
import { Input } from '@alga-psa/ui/components/Input';
import { Label } from '@alga-psa/ui/components/Label';
import { Button } from '@alga-psa/ui/components/Button';
import { Eye, EyeOff } from 'lucide-react';
import { changeOwnPassword, checkPasswordResetStatus } from '../../actions';
import { PasswordResetWarning } from '@alga-psa/ui/components/PasswordResetWarning';
import { useTranslation } from '@alga-psa/ui/lib/i18n/client';

interface PasswordChangeFormProps {
  onSuccess?: () => void;
  className?: string;
}

export default function PasswordChangeForm({ onSuccess, className }: PasswordChangeFormProps) {
  const { t } = useTranslation('msp/profile');
  const [currentPassword, setCurrentPassword] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [showCurrentPassword, setShowCurrentPassword] = useState(false);
  const [showNewPassword, setShowNewPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
  const [passwordError, setPasswordError] = useState<string | null>(null);
  const [passwordSuccess, setPasswordSuccess] = useState<string | null>(null);
  const [needsPasswordReset, setNeedsPasswordReset] = useState(false);
  const [passwordRequirements, setPasswordRequirements] = useState({
    minLength: false,
    hasUppercase: false,
    hasLowercase: false,
    hasNumber: false,
    hasSpecialChar: false,
    passwordsMatch: false
  });

  useEffect(() => {
    const checkStatus = async () => {
      try {
        const status = await checkPasswordResetStatus();
        setNeedsPasswordReset(!status.hasResetPassword);
      } catch (error) {
        console.error('Error checking password reset status:', error);
        // Default to not showing warning if there's an error
        setNeedsPasswordReset(false);
      }
    };
    checkStatus();
  }, []);

  useEffect(() => {
    validatePassword();
  }, [newPassword, confirmPassword]);

  const validatePassword = () => {
    setPasswordRequirements({
      minLength: newPassword.length >= 8,
      hasUppercase: /[A-Z]/.test(newPassword),
      hasLowercase: /[a-z]/.test(newPassword),
      hasNumber: /\d/.test(newPassword),
      hasSpecialChar: /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(newPassword),
      passwordsMatch: newPassword === confirmPassword && newPassword.length > 0
    });
  };

  const isPasswordValid = () => {
    const { minLength, hasUppercase, hasLowercase, hasNumber, hasSpecialChar, passwordsMatch } = passwordRequirements;
    return minLength && hasUppercase && hasLowercase && hasNumber && hasSpecialChar && passwordsMatch;
  };

  const handleChangePassword = async (e: React.FormEvent) => {
    e.preventDefault();
    setPasswordError(null);
    setPasswordSuccess(null);

    if (!isPasswordValid()) {
      setPasswordError(t('profile.changePassword.validationFailed', {
        defaultValue: 'Password does not meet all requirements',
      }));
      return;
    }

    if (newPassword !== confirmPassword) {
      setPasswordError(t('profile.changePassword.passwordMismatch', {
        defaultValue: 'New passwords do not match',
      }));
      return;
    }

    if (newPassword.length < 8) {
      setPasswordError(t('profile.changePassword.requirements', {
        defaultValue: 'Password must be at least 8 characters',
      }));
      return;
    }

    try {
      const result = await changeOwnPassword(currentPassword, newPassword);
      if (result.success) {
        setPasswordSuccess(t('profile.changePassword.success', {
          defaultValue: 'Password changed successfully',
        }));
        setCurrentPassword('');
        setNewPassword('');
        setConfirmPassword('');
        setNeedsPasswordReset(false);
        onSuccess?.();
      } else {
        setPasswordError(result.error || t('profile.changePassword.error', {
          defaultValue: 'Failed to change password',
        }));
      }
    } catch (err) {
      setPasswordError(t('profile.changePassword.error', {
        defaultValue: 'Failed to change password',
      }));
    }
  };

  return (
    <Card className={className}>
      <CardHeader>
        <CardTitle>{t('profile.changePassword.title', {
          defaultValue: 'Change Password',
        })}</CardTitle>
      </CardHeader>
      <CardContent>
        {needsPasswordReset && (
          <PasswordResetWarning className="mb-4" />
        )}
        <form onSubmit={handleChangePassword} className="space-y-4">
          <div>
            <Label htmlFor="currentPassword">{t('profile.changePassword.current', {
              defaultValue: 'Current Password',
            })}</Label>
            <div className="relative">
              <Input
                id="currentPassword"
                type={showCurrentPassword ? "text" : "password"}
                value={currentPassword}
                onChange={(e) => setCurrentPassword(e.target.value)}
                className="pr-10"
                required
              />
              <button
                type="button"
                id="toggle-current-password-visibility"
                onClick={() => setShowCurrentPassword(!showCurrentPassword)}
                className="absolute inset-y-0 right-0 pr-3 flex items-center"
              >
                {showCurrentPassword ? (
                  <Eye className="h-5 w-5 text-gray-400" />
                ) : (
                  <EyeOff className="h-5 w-5 text-gray-400" />
                )}
              </button>
            </div>
          </div>
          <div>
            <Label htmlFor="newPassword">{t('profile.changePassword.new', {
              defaultValue: 'New Password',
            })}</Label>
            <div className="relative">
              <Input
                id="newPassword"
                type={showNewPassword ? "text" : "password"}
                value={newPassword}
                onChange={(e) => setNewPassword(e.target.value)}
                className="pr-10"
                required
              />
              <button
                type="button"
                id="toggle-new-password-visibility"
                onClick={() => setShowNewPassword(!showNewPassword)}
                className="absolute inset-y-0 right-0 pr-3 flex items-center"
              >
                {showNewPassword ? (
                  <Eye className="h-5 w-5 text-gray-400" />
                ) : (
                  <EyeOff className="h-5 w-5 text-gray-400" />
                )}
              </button>
            </div>
          </div>
          <div>
            <Label htmlFor="confirmPassword">{t('profile.changePassword.confirm', {
              defaultValue: 'Confirm New Password',
            })}</Label>
            <div className="relative">
              <Input
                id="confirmPassword"
                type={showConfirmPassword ? "text" : "password"}
                value={confirmPassword}
                onChange={(e) => setConfirmPassword(e.target.value)}
                className="pr-10"
                required
              />
              <button
                type="button"
                id="toggle-confirm-password-visibility"
                onClick={() => setShowConfirmPassword(!showConfirmPassword)}
                className="absolute inset-y-0 right-0 pr-3 flex items-center"
              >
                {showConfirmPassword ? (
                  <Eye className="h-5 w-5 text-gray-400" />
                ) : (
                  <EyeOff className="h-5 w-5 text-gray-400" />
                )}
              </button>
            </div>
          </div>
          {passwordError && (
            <div className="text-red-500 text-sm">{passwordError}</div>
          )}
          {passwordSuccess && (
            <div className="text-green-500 text-sm">{passwordSuccess}</div>
          )}
          <Button id="change-password-button" type="submit" variant="default">
            {t('profile.changePassword.submit', {
              defaultValue: 'Change Password',
            })}
          </Button>
        </form>
      </CardContent>
    </Card>
  );
}
