import React, { useState, useEffect } from 'react';
import {
    Box, Typography, TextField, Button, CircularProgress, Alert,
    FormControl, InputLabel, Select, MenuItem
} from '@mui/material';
import empresaService from '../../services/Distribucion/empresaService';
import type { EmpresaDto } from '../../models/dtos/Distribucion/EmpresaDto';

interface SeleccionaReporteControlDevolucionesProps {
  onGenerarReporte: (params: {
    fecha: string;
    idEmpresa: number;
  }) => Promise<void>;
  onCancel?: () => void; // Hacer onCancel opcional si no siempre se usa
  isLoading?: boolean;
  apiErrorMessage?: string | null;
}

const SeleccionaReporteControlDevoluciones: React.FC<SeleccionaReporteControlDevolucionesProps> = ({
  onGenerarReporte,
  onCancel,
  isLoading,
  apiErrorMessage
}) => {
  const [fecha, setFecha] = useState<string>(new Date().toISOString().split('T')[0]);
  const [idEmpresa, setIdEmpresa] = useState<number | string>('');
  const [empresas, setEmpresas] = useState<EmpresaDto[]>([]);
  const [loadingEmpresas, setLoadingEmpresas] = useState(false);
  const [localError, setLocalError] = useState<string | null>(null);

  useEffect(() => {
    const fetchEmpresas = async () => {
      setLoadingEmpresas(true);
      try {
        const data = await empresaService.getAllEmpresas(); // Solo habilitadas
        setEmpresas(data);
      } catch (error) {
        console.error("Error al cargar empresas:", error);
        setLocalError('Error al cargar empresas.');
      } finally {
        setLoadingEmpresas(false);
      }
    };
    fetchEmpresas();
  }, []);

  const validate = (): boolean => {
    if (!fecha) {
      setLocalError('Debe seleccionar una fecha.');
      return false;
    }
    if (!idEmpresa) {
      setLocalError('Debe seleccionar una empresa.');
      return false;
    }
    setLocalError(null);
    return true;
  };

  const handleGenerar = () => {
    if (!validate()) return;
    onGenerarReporte({
      fecha,
      idEmpresa: Number(idEmpresa)
    });
  };

  return (
    <Box sx={{ p: 2, border: '1px solid #ccc', borderRadius: '4px', minWidth: 380 }}>
      <Typography variant="h6" gutterBottom>
        Parámetros: Control de Devoluciones
      </Typography>
      <TextField
        label="Fecha"
        type="date"
        value={fecha}
        onChange={(e) => setFecha(e.target.value)}
        margin="normal"
        fullWidth
        required
        disabled={isLoading}
        InputLabelProps={{ shrink: true }}
      />
      <FormControl fullWidth margin="normal" error={!idEmpresa && !!localError} disabled={isLoading || loadingEmpresas}>
        <InputLabel id="empresa-select-label" required>Empresa</InputLabel>
        <Select
          labelId="empresa-select-label"
          label="Empresa"
          value={idEmpresa}
          onChange={(e) => setIdEmpresa(e.target.value as number)}
        >
          <MenuItem value="" disabled><em>Seleccione una empresa</em></MenuItem>
          {empresas.map((emp) => (
            <MenuItem key={emp.idEmpresa} value={emp.idEmpresa}>{emp.nombre}</MenuItem>
          ))}
        </Select>
      </FormControl>

      {(localError && !apiErrorMessage) && <Alert severity="warning" sx={{ mt: 2 }}>{localError}</Alert>}
      {apiErrorMessage && <Alert severity="error" sx={{ mt: 2 }}>{apiErrorMessage}</Alert>}

      <Box sx={{ mt: 3, display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
        {onCancel && <Button onClick={onCancel} variant="outlined" color="secondary" disabled={isLoading}>Cancelar</Button>}
        <Button onClick={handleGenerar} variant="contained" disabled={isLoading || loadingEmpresas}>
          {isLoading ? <CircularProgress size={24} /> : 'Generar Reporte'}
        </Button>
      </Box>
    </Box>
  );
};

export default SeleccionaReporteControlDevoluciones;