import { useState } from 'react';
import { NewPassword } from './NewPassword';
import { I18nProvider } from '../../../providers/I18nProvider';

export default {
  title: 'Views/NewPassword',
  component: NewPassword,
  tags: ['autodocs'],
  decorators: [
    (Story) => (
      <I18nProvider language="es-AR">
        <Story />
      </I18nProvider>
    ),
  ],
  argTypes: {
    variant: {
      control: 'select',
      options: ['default', 'hexa-login'],
      description: 'Variante del componente',
    },
    layout: {
      control: 'select',
      options: ['embedded', 'page'],
      description: 'Layout del componente',
    },
    disabled: {
      control: 'boolean',
      description: 'Deshabilitar el formulario',
    },
    submitting: {
      control: 'boolean',
      description: 'Estado de envío',
    },
    success: {
      control: 'boolean',
      description: 'Mostrar estado de éxito',
    },
    showRequirements: {
      control: 'boolean',
      description: 'Mostrar caja de requisitos',
    },
    showPasswordMismatch: {
      control: 'boolean',
      description: 'Muestra error si las contraseñas no coinciden',
    },
    passwordMismatchMessage: {
      control: 'text',
      description: 'Texto del error de contraseñas no coinciden',
    },
  },
};

// Default (form)
export const Default = {
  render: () => {
    const [password, setPassword] = useState('');
    const [confirmPassword, setConfirmPassword] = useState('');
    const [passwordError, setPasswordError] = useState('');
    const [confirmPasswordError, setConfirmPasswordError] = useState('');

    return (
      <NewPassword
        title="Nueva contraseña"
        subtitle="Ingresa tu nueva contraseña y confírmala"
        passwordLabel="Contraseña"
        passwordPlaceholder="Ingresa tu contraseña"
        passwordValue={password}
        onPasswordChange={(e) => {
          setPassword(e.target.value);
          setPasswordError('');
        }}
        passwordError={passwordError}
        confirmPasswordLabel="Confirmar contraseña"
        confirmPasswordPlaceholder="Confirma tu contraseña"
        confirmPasswordValue={confirmPassword}
        onConfirmPasswordChange={(e) => {
          setConfirmPassword(e.target.value);
          setConfirmPasswordError('');
        }}
        confirmPasswordError={confirmPasswordError}
        requirementsItems={[
          'Un mínimo de 6 caracteres',
          'Una mayúscula, un número, un carácter especial',
        ]}
        cancelLabel="Cancelar"
        submitLabel="Guardar"
        onCancel={() => {
          console.log('Cancel clicked');
          alert('Cancelar');
        }}
        onSubmit={(data) => {
          console.log('Submit data:', data);
          if (data.password !== data.confirmPassword) {
            setConfirmPasswordError('Las contraseñas no coinciden');
            return;
          }
          if (data.password.length < 8) {
            setPasswordError('La contraseña debe tener al menos 8 caracteres');
            return;
          }
          alert('Contraseña guardada exitosamente');
        }}
      />
    );
  },
};

// WithErrors
export const WithErrors = {
  render: () => {
    const [password, setPassword] = useState('test');
    const [confirmPassword, setConfirmPassword] = useState('test2');

    return (
      <NewPassword
        title="Nueva contraseña"
        subtitle="Ingresa tu nueva contraseña y confírmala"
        passwordLabel="Contraseña"
        passwordPlaceholder="Ingresa tu contraseña"
        passwordValue={password}
        onPasswordChange={(e) => setPassword(e.target.value)}
        passwordError="La contraseña debe tener al menos 8 caracteres"
        confirmPasswordLabel="Confirmar contraseña"
        confirmPasswordPlaceholder="Confirma tu contraseña"
        confirmPasswordValue={confirmPassword}
        onConfirmPasswordChange={(e) => setConfirmPassword(e.target.value)}
        confirmPasswordError="Las contraseñas no coinciden"
        requirementsItems={[
          'Un mínimo de 6 caracteres',
          'Una mayúscula, un número, un carácter especial',
        ]}
        generalError="Error al guardar la contraseña. Por favor, intenta nuevamente."
        cancelLabel="Cancelar"
        submitLabel="Guardar"
        onCancel={() => alert('Cancelar')}
        onSubmit={(data) => {
          console.log('Submit data:', data);
        }}
      />
    );
  },
};

export const WithPasswordMismatch = {
  render: () => {
    const [password, setPassword] = useState('test1234');
    const [confirmPassword, setConfirmPassword] = useState('test1235');

    const mismatch = password !== confirmPassword;

    return (
      <NewPassword
        title="Nueva contraseña"
        subtitle="Ingresa tu nueva contraseña y confírmala"
        passwordLabel="Contraseña"
        passwordPlaceholder="Ingresa tu contraseña"
        passwordValue={password}
        onPasswordChange={(e) => setPassword(e.target.value)}
        confirmPasswordLabel="Confirmar contraseña"
        confirmPasswordPlaceholder="Confirma tu contraseña"
        confirmPasswordValue={confirmPassword}
        onConfirmPasswordChange={(e) => setConfirmPassword(e.target.value)}
        requirementsItems={[
          'Un mínimo de 6 caracteres',
          'Una mayúscula, un número, un carácter especial',
        ]}
        showRequirements
        showPasswordMismatch={mismatch}
        passwordMismatchMessage="No coinciden las contraseñas."
        cancelLabel="Cancelar"
        submitLabel="Guardar"
        onCancel={() => alert('Cancelar')}
        onSubmit={() => {}}
      />
    );
  },
};

// Submitting
export const Submitting = {
  args: {
    title: 'Nueva contraseña',
    subtitle: 'Ingresa tu nueva contraseña y confírmala',
    passwordLabel: 'Contraseña',
    passwordPlaceholder: 'Ingresa tu contraseña',
    passwordValue: 'password123',
    onPasswordChange: () => {},
    confirmPasswordLabel: 'Confirmar contraseña',
    confirmPasswordPlaceholder: 'Confirma tu contraseña',
    confirmPasswordValue: 'password123',
    onConfirmPasswordChange: () => {},
    requirementsItems: [
      'Un mínimo de 6 caracteres',
      'Una mayúscula, un número, un carácter especial',
    ],
    cancelLabel: 'Cancelar',
    submitLabel: 'Guardar',
    onCancel: () => alert('Cancelar'),
    onSubmit: () => {},
    submitting: true,
    disabled: true,
  },
};

// Success
export const Success = {
  args: {
    title: 'Nueva contraseña',
    subtitle: 'Ingresa tu nueva contraseña y confírmala',
    passwordLabel: 'Contraseña',
    passwordPlaceholder: 'Ingresa tu contraseña',
    confirmPasswordLabel: 'Confirmar contraseña',
    confirmPasswordPlaceholder: 'Confirma tu contraseña',
    cancelLabel: 'Cancelar',
    submitLabel: 'Guardar',
    onCancel: () => alert('Cancelar'),
    onSubmit: () => {},
    success: true,
    successTitle: 'Contraseña actualizada',
    successMessage: 'Tu contraseña ha sido actualizada exitosamente. Ya puedes iniciar sesión con tu nueva contraseña.',
  },
};

// Variant hexa-login
export const HexaLogin = {
  render: () => {
    const [password, setPassword] = useState('');
    const [confirmPassword, setConfirmPassword] = useState('');

    return (
      <NewPassword
        variant="hexa-login"
        title="Nueva contraseña"
        subtitle="Ingresa tu nueva contraseña y confírmala"
        passwordLabel="Contraseña"
        passwordPlaceholder="Ingresa tu contraseña"
        passwordValue={password}
        onPasswordChange={(e) => setPassword(e.target.value)}
        confirmPasswordLabel="Confirmar contraseña"
        confirmPasswordPlaceholder="Confirma tu contraseña"
        confirmPasswordValue={confirmPassword}
        onConfirmPasswordChange={(e) => setConfirmPassword(e.target.value)}
        requirementsItems={[
          'Un mínimo de 6 caracteres',
          'Una mayúscula, un número, un carácter especial',
        ]}
        cancelLabel="Cancelar"
        submitLabel="Guardar"
        onCancel={() => alert('Cancelar')}
        onSubmit={(data) => {
          console.log('Submit data:', data);
          alert('Contraseña guardada');
        }}
      />
    );
  },
};

// Layout embedded vs page
export const LayoutEmbedded = {
  args: {
    variant: 'hexa-login',
    layout: 'embedded',
    title: 'Nueva contraseña',
    subtitle: 'Ingresa tu nueva contraseña y confírmala',
    passwordLabel: 'Contraseña',
    passwordPlaceholder: 'Ingresa tu contraseña',
    passwordValue: '',
    onPasswordChange: () => {},
    confirmPasswordLabel: 'Confirmar contraseña',
    confirmPasswordPlaceholder: 'Confirma tu contraseña',
    confirmPasswordValue: '',
    onConfirmPasswordChange: () => {},
    requirementsItems: [
      'Un mínimo de 6 caracteres',
      'Una mayúscula, un número, un carácter especial',
    ],
    cancelLabel: 'Cancelar',
    submitLabel: 'Guardar',
    onCancel: () => alert('Cancelar'),
    onSubmit: () => {},
  },
};

export const LayoutPage = {
  args: {
    variant: 'hexa-login',
    layout: 'page',
    title: 'Nueva contraseña',
    subtitle: 'Ingresa tu nueva contraseña y confírmala',
    passwordLabel: 'Contraseña',
    passwordPlaceholder: 'Ingresa tu contraseña',
    passwordValue: '',
    onPasswordChange: () => {},
    confirmPasswordLabel: 'Confirmar contraseña',
    confirmPasswordPlaceholder: 'Confirma tu contraseña',
    confirmPasswordValue: '',
    onConfirmPasswordChange: () => {},
    requirementsItems: [
      'Un mínimo de 6 caracteres',
      'Una mayúscula, un número, un carácter especial',
    ],
    cancelLabel: 'Cancelar',
    submitLabel: 'Guardar',
    onCancel: () => alert('Cancelar'),
    onSubmit: () => {},
  },
};

// Success con extra content
export const SuccessWithExtra = {
  args: {
    title: 'Nueva contraseña',
    subtitle: 'Ingresa tu nueva contraseña y confírmala',
    passwordLabel: 'Contraseña',
    passwordPlaceholder: 'Ingresa tu contraseña',
    confirmPasswordLabel: 'Confirmar contraseña',
    confirmPasswordPlaceholder: 'Confirma tu contraseña',
    cancelLabel: 'Cancelar',
    submitLabel: 'Guardar',
    onCancel: () => alert('Cancelar'),
    onSubmit: () => {},
    success: true,
    successTitle: 'Contraseña actualizada',
    successMessage: 'Tu contraseña ha sido actualizada exitosamente.',
    successExtra: (
      <div className="text-sm text-gray-600 mt-2">
        Serás redirigido al login en <strong>5 segundos</strong>...
      </div>
    ),
  },
};

