import React, { useState } from 'react';
import { eyeOffOutline, eyeOutline } from 'ionicons/icons';
import { IonIcon } from '@ionic/react';

interface AuthFormFieldsProps {
  mode: 'login' | 'register';
  email: string;
  password: string;
  confirmPassword?: string;
  onEmailChange: (val: string) => void;
  onPasswordChange: (val: string) => void;
  onConfirmPasswordChange?: (val: string) => void;
  errors?: { [key: string]: string };
  disabled?: boolean;
}

const AuthFormFields: React.FC<AuthFormFieldsProps> = ({
  mode,
  email,
  password,
  confirmPassword,
  onEmailChange,
  onPasswordChange,
  onConfirmPasswordChange,
  errors = {},
  disabled = false,
}) => {
  const [showPassword, setShowPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);

  return (
    <div className="auth-form-fields">
      <div className="field-group">
        <label className="auth-field-label">Email address</label>
        <input
          className={`auth-text-input ${errors.email ? 'has-error' : ''}`}
          type="email"
          value={email}
          onChange={(e) => onEmailChange(e.target.value)}
          disabled={disabled}
          placeholder="you@example.com"
          autoComplete="email"
        />
        {errors.email ? (
          <p className="auth-field-error">{errors.email}</p>
        ) : null}
      </div>

      <div className="field-group">
        <label className="auth-field-label">Password</label>
        <div className="auth-password-wrap">
          <input
            className={`auth-text-input ${errors.password ? 'has-error' : ''}`}
            type={showPassword ? 'text' : 'password'}
            value={password}
            onChange={(e) => onPasswordChange(e.target.value)}
            disabled={disabled}
            placeholder="Enter your password"
            autoComplete={
              mode === 'login' ? 'current-password' : 'new-password'
            }
          />
          <button
            type="button"
            className="auth-password-toggle"
            onClick={() => setShowPassword((value) => !value)}
            disabled={disabled}
            aria-label={showPassword ? 'Hide password' : 'Show password'}
          >
            <IonIcon icon={showPassword ? eyeOffOutline : eyeOutline} />
          </button>
        </div>
        {errors.password ? (
          <p className="auth-field-error">{errors.password}</p>
        ) : null}
      </div>

      {mode === 'register' && onConfirmPasswordChange && (
        <div className="field-group">
          <label className="auth-field-label">Confirm password</label>
          <div className="auth-password-wrap">
            <input
              className={`auth-text-input ${errors.confirmPassword ? 'has-error' : ''}`}
              type={showConfirmPassword ? 'text' : 'password'}
              value={confirmPassword}
              onChange={(e) => onConfirmPasswordChange(e.target.value)}
              disabled={disabled}
              placeholder="Re-enter your password"
              autoComplete="new-password"
            />
            <button
              type="button"
              className="auth-password-toggle"
              onClick={() => setShowConfirmPassword((value) => !value)}
              disabled={disabled}
              aria-label={
                showConfirmPassword
                  ? 'Hide confirm password'
                  : 'Show confirm password'
              }
            >
              <IonIcon
                icon={showConfirmPassword ? eyeOffOutline : eyeOutline}
              />
            </button>
          </div>
          {errors.confirmPassword ? (
            <p className="auth-field-error">{errors.confirmPassword}</p>
          ) : null}
        </div>
      )}
    </div>
  );
};

export default AuthFormFields;
