import React, { useState, useEffect } from 'react';
import { Modal, Box, Typography, TextField, Button, CircularProgress, Alert } from '@mui/material';
import type { PermisoDto } from '../../../models/dtos/Usuarios/PermisoDto'; // Usamos el DTO de la API para listar
import type { CreatePermisoDto } from '../../../models/dtos/Usuarios/CreatePermisoDto';
import type { UpdatePermisoDto } from '../../../models/dtos/Usuarios/UpdatePermisoDto';

const modalStyle = { /* ... (mismo estilo) ... */
    position: 'absolute' as 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: 450, // Un poco más ancho para los campos
    bgcolor: 'background.paper',
    border: '2px solid #000',
    boxShadow: 24,
    p: 4,
};

interface PermisoFormModalProps {
  open: boolean;
  onClose: () => void;
  onSubmit: (data: CreatePermisoDto | (UpdatePermisoDto & { id: number })) => Promise<void>;
  initialData?: PermisoDto | null;
  errorMessage?: string | null;
  clearErrorMessage: () => void;
}

const PermisoFormModal: React.FC<PermisoFormModalProps> = ({
  open,
  onClose,
  onSubmit,
  initialData,
  errorMessage,
  clearErrorMessage
}) => {
  const [modulo, setModulo] = useState('');
  const [descPermiso, setDescPermiso] = useState('');
  const [codAcc, setCodAcc] = useState('');
  const [loading, setLoading] = useState(false);
  const [localErrors, setLocalErrors] = useState<{ [key: string]: string | null }>({});

  const isEditing = Boolean(initialData);

  useEffect(() => {
    if (open) {
        setModulo(initialData?.modulo || '');
        setDescPermiso(initialData?.descPermiso || '');
        setCodAcc(initialData?.codAcc || '');
        setLocalErrors({});
        clearErrorMessage();
    }
  }, [open, initialData, clearErrorMessage]);

  const validate = (): boolean => {
    const errors: { [key: string]: string | null } = {};
    if (!modulo.trim()) errors.modulo = 'El módulo es obligatorio.';
    if (!descPermiso.trim()) errors.descPermiso = 'La descripción es obligatoria.';
    if (!codAcc.trim()) errors.codAcc = 'El código de acceso es obligatorio.';
    else if (codAcc.length > 10) errors.codAcc = 'El código de acceso no debe exceder los 10 caracteres.';
    // Aquí podrías añadir validación de formato para codAcc si es necesario.

    setLocalErrors(errors);
    return Object.keys(errors).length === 0;
  };

  const handleInputChange = (setter: React.Dispatch<React.SetStateAction<string>>, fieldName: string) => (e: React.ChangeEvent<HTMLInputElement>) => {
    setter(e.target.value);
    if (localErrors[fieldName]) {
        setLocalErrors(prev => ({ ...prev, [fieldName]: null }));
    }
    if (errorMessage) clearErrorMessage();
  };


  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    clearErrorMessage();
    if (!validate()) return;

    setLoading(true);
    try {
      const dataToSubmit = { modulo, descPermiso, codAcc };

      if (isEditing && initialData) {
        await onSubmit({ ...dataToSubmit, id: initialData.id });
      } else {
        await onSubmit(dataToSubmit as CreatePermisoDto);
      }
      onClose();
    } catch (error: any) {
      console.error("Error en submit de PermisoFormModal:", error);
    } finally {
       setLoading(false);
    }
  };

  return (
    <Modal open={open} onClose={onClose}>
      <Box sx={modalStyle}>
        <Typography variant="h6" component="h2">
          {isEditing ? 'Editar Permiso' : 'Agregar Nuevo Permiso'}
        </Typography>
        <Box component="form" onSubmit={handleSubmit} sx={{ mt: 2 }}>
          <TextField
            label="Módulo" fullWidth required value={modulo}
            onChange={handleInputChange(setModulo, 'modulo')} margin="normal"
            error={!!localErrors.modulo} helperText={localErrors.modulo || ''}
            disabled={loading} autoFocus
          />
          <TextField
            label="Descripción del Permiso" fullWidth required value={descPermiso}
            onChange={handleInputChange(setDescPermiso, 'descPermiso')} margin="normal"
            error={!!localErrors.descPermiso} helperText={localErrors.descPermiso || ''}
            disabled={loading}
          />
          <TextField
            label="Código de Acceso (CodAcc)" fullWidth required value={codAcc}
            onChange={handleInputChange(setCodAcc, 'codAcc')} margin="normal"
            error={!!localErrors.codAcc} helperText={localErrors.codAcc || ''}
            disabled={loading} inputProps={{ maxLength: 10 }}
          />
          {errorMessage && <Alert severity="error" sx={{ mt: 1 }}>{errorMessage}</Alert>}
          <Box sx={{ mt: 3, display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
            <Button onClick={onClose} color="secondary" disabled={loading}>Cancelar</Button>
            <Button type="submit" variant="contained" disabled={loading}>
              {loading ? <CircularProgress size={24} /> : (isEditing ? 'Guardar Cambios' : 'Agregar')}
            </Button>
          </Box>
        </Box>
      </Box>
    </Modal>
  );
};

export default PermisoFormModal;