import React, { useState, useEffect } from 'react';
import { Modal, Box, Typography, TextField, Button, CircularProgress, Alert, FormControl, InputLabel, Select, MenuItem, FormControlLabel, Checkbox, type SelectChangeEvent, InputAdornment } from '@mui/material';
import type { PromocionDto } from '../../../models/dtos/Suscripciones/PromocionDto';
import type { CreatePromocionDto, UpdatePromocionDto } from '../../../models/dtos/Suscripciones/CreatePromocionDto';

const modalStyle = {
  position: 'absolute' as 'absolute',
  top: '50%', left: '50%',
  transform: 'translate(-50%, -50%)',
  width: { xs: '95%', sm: '80%', md: '600px' },
  bgcolor: 'background.paper',
  border: '2px solid #000',
  boxShadow: 24, p: 4,
  maxHeight: '90vh', overflowY: 'auto'
};

const tiposEfecto = [
    { value: 'DescuentoPorcentajeTotal', label: 'Descuento en Porcentaje (%) sobre el total' },
    { value: 'DescuentoMontoFijoTotal', label: 'Descuento en Monto Fijo ($) sobre el total' },
    { value: 'BonificarEntregaDia', label: 'Bonificar / Día Gratis (Precio del día = $0)' },
];
const tiposCondicion = [
    { value: 'Siempre', label: 'Siempre (en todos los días de entrega)' },
    { value: 'DiaDeSemana', label: 'Un día de la semana específico' },
    { value: 'PrimerDiaSemanaDelMes', label: 'El primer día de la semana del mes' },
];
const diasSemana = [
    { value: 1, label: 'Lunes' }, { value: 2, label: 'Martes' }, { value: 3, label: 'Miércoles' },
    { value: 4, label: 'Jueves' }, { value: 5, label: 'Viernes' }, { value: 6, label: 'Sábado' },
    { value: 7, label: 'Domingo' }
];

interface PromocionFormModalProps {
  open: boolean;
  onClose: () => void;
  onSubmit: (data: CreatePromocionDto | UpdatePromocionDto, id?: number) => Promise<void>;
  initialData?: PromocionDto | null;
  errorMessage?: string | null;
  clearErrorMessage: () => void;
}

const PromocionFormModal: React.FC<PromocionFormModalProps> = ({ open, onClose, onSubmit, initialData, errorMessage, clearErrorMessage }) => {
    const [formData, setFormData] = useState<Partial<CreatePromocionDto>>({});
    const [loading, setLoading] = useState(false);
    const [localErrors, setLocalErrors] = useState<{ [key: string]: string | null }>({});
    const isEditing = Boolean(initialData);

    const necesitaValorCondicion = formData.tipoCondicion === 'DiaDeSemana' || formData.tipoCondicion === 'PrimerDiaSemanaDelMes';

    useEffect(() => {
        if (open) {
            const defaults = {
                descripcion: '',
                tipoEfecto: 'DescuentoPorcentajeTotal' as const,
                valorEfecto: 0,
                tipoCondicion: 'Siempre' as const,
                valorCondicion: null,
                fechaInicio: new Date().toISOString().split('T')[0],
                activa: true
            };
            setFormData(initialData ? { ...initialData } : defaults);
            setLocalErrors({});
        }
    }, [open, initialData]);
    
    const validate = (): boolean => {
        const errors: { [key: string]: string | null } = {};
        if (!formData.descripcion?.trim()) errors.descripcion = 'La descripción es obligatoria.';
        if (!formData.tipoEfecto) errors.tipoEfecto = 'El tipo de efecto es obligatorio.';
        if (formData.tipoEfecto !== 'BonificarEntregaDia' && (!formData.valorEfecto || formData.valorEfecto <= 0)) {
            errors.valorEfecto = 'El valor debe ser mayor a cero.';
        }
        if (formData.tipoEfecto === 'DescuentoPorcentajeTotal' && formData.valorEfecto && formData.valorEfecto > 100) {
            errors.valorEfecto = 'El valor para porcentaje no puede ser mayor a 100.';
        }
        if (!formData.tipoCondicion) errors.tipoCondicion = 'La condición es obligatoria.';
        if (necesitaValorCondicion && !formData.valorCondicion) {
            errors.valorCondicion = "Debe seleccionar un día para esta condición.";
        }
        if (!formData.fechaInicio) errors.fechaInicio = 'La fecha de inicio es obligatoria.';
        if (formData.fechaFin && formData.fechaInicio && new Date(formData.fechaFin) < new Date(formData.fechaInicio)) {
            errors.fechaFin = 'La fecha de fin no puede ser anterior a la de inicio.';
        }
        setLocalErrors(errors);
        return Object.keys(errors).length === 0;
    };

    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const { name, value, type, checked } = e.target;
        const finalValue = type === 'checkbox' ? checked : (name === 'valorEfecto' && value !== '' ? parseFloat(value) : value);
        setFormData(prev => ({ ...prev, [name]: finalValue }));
        if (localErrors[name]) setLocalErrors(prev => ({ ...prev, [name]: null }));
        if (errorMessage) clearErrorMessage();
    };
    
    const handleSelectChange = (e: SelectChangeEvent<any>) => {
        const { name, value } = e.target;
        const newFormData = { ...formData, [name]: value };

        if (name === 'tipoCondicion' && value === 'Siempre') {
            newFormData.valorCondicion = null;
        }
        if (name === 'tipoEfecto' && value === 'BonificarEntregaDia') {
            newFormData.valorEfecto = 0; // Bonificar no necesita valor
        }

        setFormData(newFormData);
        if (localErrors[name]) setLocalErrors(prev => ({ ...prev, [name]: null }));
        if (errorMessage) clearErrorMessage();
    };

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

        setLoading(true);
        let success = false;
        try {
            const dataToSubmit = { ...formData, fechaFin: formData.fechaFin || null } as CreatePromocionDto | UpdatePromocionDto;
            await onSubmit(dataToSubmit, initialData?.idPromocion);
            success = true;
        } catch (error) {
            success = false;
        } finally {
            setLoading(false);
            if (success) onClose();
        }
    };

    return (
        <Modal open={open} onClose={onClose}>
            <Box sx={modalStyle}>
                <Typography variant="h6">{isEditing ? 'Editar Promoción' : 'Nueva Promoción'}</Typography>
                <Box component="form" onSubmit={handleSubmit} sx={{ mt: 2 }}>
                    <TextField name="descripcion" label="Descripción" value={formData.descripcion || ''} onChange={handleInputChange} required fullWidth margin="dense" error={!!localErrors.descripcion} helperText={localErrors.descripcion} disabled={loading} autoFocus />
                    <FormControl fullWidth margin="dense" error={!!localErrors.tipoEfecto}>
                        <InputLabel>Efecto de la Promoción</InputLabel>
                        <Select name="tipoEfecto" value={formData.tipoEfecto || ''} onChange={handleSelectChange} label="Efecto de la Promoción" disabled={loading}>
                            {tiposEfecto.map(t => <MenuItem key={t.value} value={t.value}>{t.label}</MenuItem>)}
                        </Select>
                    </FormControl>
                    {formData.tipoEfecto !== 'BonificarEntregaDia' && (
                         <TextField name="valorEfecto" label="Valor" type="number" value={formData.valorEfecto || ''} onChange={handleInputChange} required fullWidth margin="dense" error={!!localErrors.valorEfecto} helperText={localErrors.valorEfecto} disabled={loading}
                            InputProps={{ startAdornment: <InputAdornment position="start">{formData.tipoEfecto === 'DescuentoPorcentajeTotal' ? '%' : '$'}</InputAdornment> }} 
                            inputProps={{ step: "0.01" }}
                        />
                    )}
                    <FormControl fullWidth margin="dense" error={!!localErrors.tipoCondicion}>
                        <InputLabel>Condición de Aplicación</InputLabel>
                        <Select name="tipoCondicion" value={formData.tipoCondicion || ''} onChange={handleSelectChange} label="Condición de Aplicación" disabled={loading}>
                             {tiposCondicion.map(t => <MenuItem key={t.value} value={t.value}>{t.label}</MenuItem>)}
                        </Select>
                    </FormControl>
                    {necesitaValorCondicion && (
                        <FormControl fullWidth margin="dense" error={!!localErrors.valorCondicion}>
                            <InputLabel>Día de la Semana</InputLabel>
                            <Select name="valorCondicion" value={formData.valorCondicion || ''} onChange={handleSelectChange} label="Día de la Semana" disabled={loading}>
                                {diasSemana.map(d => <MenuItem key={d.value} value={d.value}>{d.label}</MenuItem>)}
                            </Select>
                        </FormControl>
                    )}
                     <Box sx={{ display: 'flex', gap: 2, mt: 1 }}>
                        <TextField name="fechaInicio" label="Fecha Inicio" type="date" value={formData.fechaInicio || ''} onChange={handleInputChange} required fullWidth margin="dense" InputLabelProps={{ shrink: true }} error={!!localErrors.fechaInicio} helperText={localErrors.fechaInicio} disabled={loading} />
                        <TextField name="fechaFin" label="Fecha Fin (Opcional)" type="date" value={formData.fechaFin || ''} onChange={handleInputChange} fullWidth margin="dense" InputLabelProps={{ shrink: true }} error={!!localErrors.fechaFin} helperText={localErrors.fechaFin} disabled={loading} />
                    </Box>
                    <FormControlLabel control={<Checkbox name="activa" checked={formData.activa ?? true} onChange={handleInputChange} disabled={loading}/>} label="Promoción Activa" sx={{mt: 1}} />

                    {errorMessage && <Alert severity="error" sx={{ mt: 2 }}>{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} /> : 'Guardar'}
                        </Button>
                    </Box>
                </Box>
            </Box>
        </Modal>
    );
};

export default PromocionFormModal;