import React, { useState, useEffect } from 'react';
import {
    Modal, Box, Typography, TextField, Button, CircularProgress, Alert,
    FormControl, InputLabel, Select, MenuItem
} from '@mui/material';
import type { CancionDto } from '../../../models/dtos/Radios/CancionDto';
import type { CreateCancionDto } from '../../../models/dtos/Radios/CreateCancionDto';
import type { UpdateCancionDto } from '../../../models/dtos/Radios/UpdateCancionDto';
import type { RitmoDto } from '../../../models/dtos/Radios/RitmoDto'; // Para el dropdown de ritmos
import ritmoService from '../../../services/Radios/ritmoService'; // Para cargar ritmos

const modalStyle = { /* ... (mismo estilo, pero más ancho y alto) ... */
    position: 'absolute' as 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: { xs: '95%', sm: '80%', md: '700px' }, // Más ancho
    bgcolor: 'background.paper',
    border: '2px solid #000',
    boxShadow: 24,
    p: 3,
    maxHeight: '90vh', // Permitir scroll
    overflowY: 'auto'
};

interface CancionFormModalProps {
  open: boolean;
  onClose: () => void;
  onSubmit: (data: CreateCancionDto | UpdateCancionDto, id?: number) => Promise<void>;
  initialData?: CancionDto | null;
  errorMessage?: string | null;
  clearErrorMessage: () => void;
}

type CancionFormState = Omit<CreateCancionDto, 'pista' | 'idRitmo'> & {
    pista: string; // TextField siempre es string
    idRitmo: number | string; // Select puede ser string vacío
};


const CancionFormModal: React.FC<CancionFormModalProps> = ({
  open,
  onClose,
  onSubmit,
  initialData,
  errorMessage,
  clearErrorMessage
}) => {
  const initialFormState: CancionFormState = {
    tema: '', compositorAutor: '', interprete: '', sello: '', placa: '',
    pista: '', introduccion: '', idRitmo: '', formato: '', album: ''
  };
  const [formState, setFormState] = useState<CancionFormState>(initialFormState);
  const [ritmos, setRitmos] = useState<RitmoDto[]>([]);
  const [loading, setLoading] = useState(false);
  const [loadingRitmos, setLoadingRitmos] = useState(false);
  const [localErrors, setLocalErrors] = useState<{ [key: string]: string | null }>({});

  const isEditing = Boolean(initialData);

  useEffect(() => {
    const fetchRitmos = async () => {
        setLoadingRitmos(true);
        try {
            const data = await ritmoService.getAllRitmos();
            setRitmos(data);
        } catch (error) {
            console.error("Error al cargar ritmos", error);
            setLocalErrors(prev => ({...prev, ritmos: 'Error al cargar ritmos.'}));
        } finally {
            setLoadingRitmos(false);
        }
    };

    if (open) {
        fetchRitmos();
        if (initialData) {
            setFormState({
                tema: initialData.tema || '',
                compositorAutor: initialData.compositorAutor || '',
                interprete: initialData.interprete || '',
                sello: initialData.sello || '',
                placa: initialData.placa || '',
                pista: initialData.pista?.toString() || '',
                introduccion: initialData.introduccion || '',
                idRitmo: initialData.idRitmo || '',
                formato: initialData.formato || '',
                album: initialData.album || '',
            });
        } else {
            setFormState(initialFormState);
        }
        setLocalErrors({});
        clearErrorMessage();
    }
  }, [open, initialData, clearErrorMessage]); // No incluir initialFormState aquí directamente

  const validate = (): boolean => {
    const errors: { [key: string]: string | null } = {};
    if (!formState.tema?.trim() && !formState.interprete?.trim()) { // Al menos tema o intérprete
        errors.tema = 'Se requiere al menos el Tema o el Intérprete.';
        errors.interprete = 'Se requiere al menos el Tema o el Intérprete.';
    }
    if (formState.pista.trim() && isNaN(parseInt(formState.pista))) {
        errors.pista = 'Pista debe ser un número.';
    }
    // Otras validaciones específicas si son necesarias
    setLocalErrors(errors);
    return Object.keys(errors).length === 0;
  };

  const handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | (Event & { target: { name: string; value: unknown } })) => {
    const { name, value } = event.target as { name: keyof CancionFormState, value: string };
    setFormState(prev => ({ ...prev, [name]: value }));
    if (localErrors[name]) {
      setLocalErrors(prev => ({ ...prev, [name]: null }));
    }
    if (errorMessage) clearErrorMessage();
  };

   const handleSelectChange = (event: React.ChangeEvent<{ name?: string; value: unknown }>) => {
    const name = event.target.name as keyof CancionFormState;
    setFormState(prev => ({ ...prev, [name]: event.target.value as string | number }));
     if (localErrors[name]) {
      setLocalErrors(prev => ({ ...prev, [name]: null }));
    }
    if (errorMessage) clearErrorMessage();
  };


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

    setLoading(true);
    try {
      const dataToSubmit: CreateCancionDto | UpdateCancionDto = {
        ...formState,
        pista: formState.pista.trim() ? parseInt(formState.pista, 10) : null,
        idRitmo: formState.idRitmo ? Number(formState.idRitmo) : null,
        // Convertir strings vacíos a undefined para que no se envíen si son opcionales en el backend
        tema: formState.tema?.trim() || undefined,
        compositorAutor: formState.compositorAutor?.trim() || undefined,
        interprete: formState.interprete?.trim() || undefined,
        sello: formState.sello?.trim() || undefined,
        placa: formState.placa?.trim() || undefined,
        introduccion: formState.introduccion?.trim() || undefined,
        formato: formState.formato?.trim() || undefined,
        album: formState.album?.trim() || undefined,
      };

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

  return (
    <Modal open={open} onClose={onClose}>
      <Box sx={modalStyle}>
        <Typography variant="h6" component="h2" gutterBottom>
          {isEditing ? 'Editar Canción' : 'Agregar Nueva Canción'}
        </Typography>
        <Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
                <TextField name="tema" label="Tema" value={formState.tema} onChange={handleChange} margin="dense" fullWidth error={!!localErrors.tema} helperText={localErrors.tema || ''} autoFocus />
                <TextField name="interprete" label="Intérprete" value={formState.interprete} onChange={handleChange} margin="dense" fullWidth error={!!localErrors.interprete} helperText={localErrors.interprete || ''} />
                <TextField name="compositorAutor" label="Compositor/Autor" value={formState.compositorAutor} onChange={handleChange} margin="dense" fullWidth />
                <TextField name="album" label="Álbum" value={formState.album} onChange={handleChange} margin="dense" fullWidth />
                 <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', mt:1 }}>
                    <TextField name="sello" label="Sello" value={formState.sello} onChange={handleChange} margin="dense" sx={{flex:1, minWidth: 'calc(50% - 8px)'}} />
                    <TextField name="placa" label="Placa" value={formState.placa} onChange={handleChange} margin="dense" sx={{flex:1, minWidth: 'calc(50% - 8px)'}} />
                </Box>
                <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', mt:1}}>
                    <TextField name="pista" label="N° Pista" type="number" value={formState.pista} onChange={handleChange} margin="dense" error={!!localErrors.pista} helperText={localErrors.pista || ''} sx={{flex:1, minWidth: 'calc(33% - 8px)'}}/>
                    <FormControl fullWidth margin="dense" sx={{flex:2, minWidth: 'calc(67% - 8px)'}} disabled={loadingRitmos}>
                        <InputLabel id="ritmo-cancion-select-label">Ritmo</InputLabel>
                        <Select name="idRitmo" labelId="ritmo-cancion-select-label" label="Ritmo" value={formState.idRitmo} onChange={handleSelectChange as any}>
                            <MenuItem value=""><em>Ninguno</em></MenuItem>
                            {ritmos.map((r) => (<MenuItem key={r.id} value={r.id}>{r.nombreRitmo}</MenuItem>))}
                        </Select>
                    </FormControl>
                </Box>
                <TextField name="introduccion" label="Introducción (ej: (:10)/(3:30)/(F))" value={formState.introduccion} onChange={handleChange} margin="dense" fullWidth />
                <TextField name="formato" label="Formato (ej: REC, ANG)" value={formState.formato} onChange={handleChange} margin="dense" fullWidth />

            </Box>

          {errorMessage && <Alert severity="error" sx={{ mt: 2, width: '100%' }}>{errorMessage}</Alert>}
          {localErrors.ritmos && <Alert severity="warning" sx={{ mt: 1 }}>{localErrors.ritmos}</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 || loadingRitmos}>
              {loading ? <CircularProgress size={24} /> : (isEditing ? 'Guardar Cambios' : 'Agregar Canción')}
            </Button>
          </Box>
        </Box>
      </Box>
    </Modal>
  );
};

export default CancionFormModal;