import React, { useState, useEffect } from 'react';
import { useAuth } from '../../../contexts/AuthContext';
import authService from '../../../services/Usuarios/authService';
import type { ChangePasswordRequestDto } from '../../../models/dtos/Usuarios/ChangePasswordRequestDto';
import axios from 'axios';

import { Modal, Box, Typography, TextField, Button, Alert, CircularProgress, Backdrop } from '@mui/material';

const style = {
  position: 'absolute' as 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: 400,
  bgcolor: 'background.paper',
  border: '2px solid #000',
  boxShadow: 24,
  p: 4,
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
};

interface ChangePasswordModalProps {
  open: boolean;
  onClose: (success: boolean) => void;
  isFirstLogin?: boolean;
}

const ChangePasswordModal: React.FC<ChangePasswordModalProps> = ({ open, onClose, isFirstLogin }) => {
  const [currentPassword, setCurrentPassword] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [confirmNewPassword, setConfirmNewPassword] = useState('');
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  // Ya no necesitamos passwordChangeCompleted ni contextIsFirstLogin aquí
  const { user, logout } = useAuth();

  useEffect(() => {
    if (open) {
      setCurrentPassword('');
      setNewPassword('');
      setConfirmNewPassword('');
      setError(null);
      setSuccess(null);
      setLoading(false); // Asegurarse de resetear loading también
    }
  }, [open]);

  // Esta función se llama al hacer clic en el botón Cancelar
  const handleCancelClick = () => {
    onClose(false); // Notifica al padre (MainLayout) que se canceló
  };

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setError(null);
    setSuccess(null);

    if (newPassword !== confirmNewPassword) {
      setError('La nueva contraseña y la confirmación no coinciden.');
      return;
    }
    if (newPassword.length < 6) {
      setError('La nueva contraseña debe tener al menos 6 caracteres.');
      return;
    }
    if (user && user.username === newPassword) {
      setError('La nueva contraseña no puede ser igual al nombre de usuario.');
      return;
    }

    setLoading(true);
    const changePasswordData: ChangePasswordRequestDto = {
      currentPassword,
      newPassword,
      confirmNewPassword,
    };

    try {
      await authService.changePassword(changePasswordData);
      setSuccess('Contraseña cambiada exitosamente.');
      setTimeout(() => {
        onClose(true); // Notifica al padre (MainLayout) que fue exitoso
      }, 1500);
    } catch (err: any) {
      console.error("Change password error:", err);
      let errorMessage = 'Ocurrió un error inesperado al cambiar la contraseña.';
      if (axios.isAxiosError(err) && err.response) {
        errorMessage = err.response.data?.message || errorMessage;
        if (err.response.status === 401) {
          logout(); // Desloguear si el token es inválido
          onClose(false); // Notificar cierre sin éxito
        }
      }
      setError(errorMessage);
      setLoading(false); // Asegurarse de quitar loading en caso de error
    }
    // No poner setLoading(false) en el finally si quieres que el botón siga deshabilitado durante el success
  };

  return (
    <Modal
      open={open}
      onClose={(_event, reason) => { // onClose del Modal de MUI (para backdrop y Escape)
          if (reason === "backdropClick" && isFirstLogin) {
              return; // No permitir cerrar con backdrop si es el primer login
          }
          onClose(false); // Llamar a la prop onClose (que va a handleModalClose en MainLayout)
      }}
      disableEscapeKeyDown={isFirstLogin} // Deshabilitar Escape si es primer login
      aria-labelledby="change-password-modal-title"
      aria-describedby="change-password-modal-description"
      closeAfterTransition
      slots={{ backdrop: Backdrop }}
      slotProps={{
        backdrop: {
          timeout: 500,
          sx: { backdropFilter: 'blur(3px)' }
        },
      }}
    >
      <Box sx={style}>
        <Typography id="change-password-modal-title" variant="h6" component="h2">
          Cambiar Contraseña
        </Typography>
        {isFirstLogin && (
          <Alert severity="warning" sx={{ mt: 2, width: '100%' }}>
            Por seguridad, debes cambiar tu contraseña inicial.
          </Alert>
        )}
        <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1, width: '100%' }}>
          {/* ... TextFields ... */}
          <TextField
            margin="normal"
            required
            fullWidth
            name="currentPassword"
            label="Contraseña Actual"
            type="password"
            id="currentPasswordModal"
            value={currentPassword}
            onChange={(e) => setCurrentPassword(e.target.value)}
            disabled={loading || !!success}
            autoFocus
          />
          <TextField
            margin="normal"
            required
            fullWidth
            name="newPassword"
            label="Nueva Contraseña"
            type="password"
            id="newPasswordModal"
            value={newPassword}
            onChange={(e) => setNewPassword(e.target.value)}
            disabled={loading || !!success}
          />
          <TextField
            margin="normal"
            required
            fullWidth
            name="confirmNewPassword"
            label="Confirmar Nueva Contraseña"
            type="password"
            id="confirmNewPasswordModal"
            value={confirmNewPassword}
            onChange={(e) => setConfirmNewPassword(e.target.value)}
            disabled={loading || !!success}
            error={newPassword !== confirmNewPassword && confirmNewPassword !== ''}
            helperText={newPassword !== confirmNewPassword && confirmNewPassword !== '' ? 'Las contraseñas no coinciden' : ''}
          />

          {error && (
            <Alert severity="error" sx={{ mt: 2, width: '100%' }}>
              {error}
            </Alert>
          )}
           {success && (
            <Alert severity="success" sx={{ mt: 2, width: '100%' }}>
              {success}
            </Alert>
          )}

          {/* Un solo grupo de botones */}
          <Box sx={{ mt: 3, display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
            {/* El botón de cancelar llama a handleCancelClick */}
            {/* Se podría ocultar si isFirstLogin es true y no queremos que el usuario cancele */}
            {/* {!isFirstLogin && ( */}
                <Button onClick={handleCancelClick} disabled={loading || !!success} color="secondary">
                    {isFirstLogin ? "Cancelar y Salir" : "Cancelar"}
                </Button>
            {/* )} */}
            <Button type="submit" variant="contained" disabled={loading || !!success}>
              {loading ? <CircularProgress size={24} /> : 'Cambiar Contraseña'}
            </Button>
          </Box>
        </Box>
      </Box>
    </Modal>
  );
};

export default ChangePasswordModal;