import React, { useState } from 'react';
import {
    Box, Typography, TextField, Button, CircularProgress, Alert,
    FormControl, InputLabel, Select, MenuItem, type SelectChangeEvent
} from '@mui/material';

export type TipoReporteVentaMensual = 'ElDia' | 'ElPlata' | 'TirDevo';

interface SeleccionaReporteVentaMensualProps {
  onGenerarReporte: (params: {
    fechaDesde: string;
    fechaHasta: string;
    tipoReporte: TipoReporteVentaMensual;
  }) => Promise<void>;
  onCancel: () => void; // Para volver a la pantalla de selección de reportes
  isLoading?: boolean;
  apiErrorMessage?: string | null;
}

const SeleccionaReporteVentaMensual: React.FC<SeleccionaReporteVentaMensualProps> = ({
  onGenerarReporte,
  isLoading,
  apiErrorMessage
}) => {
  const [fechaDesde, setFechaDesde] = useState<string>(new Date().toISOString().split('T')[0]);
  const [fechaHasta, setFechaHasta] = useState<string>(new Date().toISOString().split('T')[0]);
  const [tipoReporte, setTipoReporte] = useState<TipoReporteVentaMensual>('ElDia');

  const [localErrors, setLocalErrors] = useState<{ [key: string]: string | null }>({});

  const validate = (): boolean => {
    const errors: { [key: string]: string | null } = {};
    if (!fechaDesde) errors.fechaDesde = 'Fecha Desde es obligatoria.';
    if (!fechaHasta) errors.fechaHasta = 'Fecha Hasta es obligatoria.';
    if (fechaDesde && fechaHasta && new Date(fechaDesde) > new Date(fechaHasta)) {
      errors.fechaHasta = 'Fecha Hasta no puede ser anterior a Fecha Desde.';
    }
    if (!tipoReporte) errors.tipoReporte = 'Debe seleccionar un tipo de reporte.';
    setLocalErrors(errors);
    return Object.keys(errors).length === 0;
  };

  const handleGenerar = () => {
    if (!validate()) return;
    onGenerarReporte({
      fechaDesde,
      fechaHasta,
      tipoReporte
    });
  };

  const handleTipoReporteChange = (event: SelectChangeEvent<string>) => {
    setTipoReporte(event.target.value as TipoReporteVentaMensual);
    setLocalErrors(p => ({ ...p, tipoReporte: null }));
  };

  return (
    <Box sx={{ p: 2, border: '1px solid #ccc', borderRadius: '4px', minWidth: 380 }}>
      <Typography variant="h6" gutterBottom>
        Parámetros: Venta Mensual Secretaría
      </Typography>
      <FormControl fullWidth margin="normal" error={!!localErrors.tipoReporte} disabled={isLoading}>
        <InputLabel id="tipo-reporte-select-label" required>Tipo de Reporte</InputLabel>
        <Select
          labelId="tipo-reporte-select-label"
          label="Tipo de Reporte"
          value={tipoReporte}
          onChange={handleTipoReporteChange}
        >
          <MenuItem value="ElDia">El Día</MenuItem>
          <MenuItem value="ElPlata">El Plata</MenuItem>
          <MenuItem value="TirDevo">Tirada / Devolución</MenuItem>
        </Select>
        {localErrors.tipoReporte && <Typography color="error" variant="caption" sx={{ml:1.5}}>{localErrors.tipoReporte}</Typography>}
      </FormControl>
      <TextField
        label="Fecha Desde"
        type="date"
        value={fechaDesde}
        onChange={(e) => { setFechaDesde(e.target.value); setLocalErrors(p => ({ ...p, fechaDesde: null, fechaHasta: null })); }}
        margin="normal"
        fullWidth
        required
        error={!!localErrors.fechaDesde}
        helperText={localErrors.fechaDesde}
        disabled={isLoading}
        InputLabelProps={{ shrink: true }}
      />
      <TextField
        label="Fecha Hasta"
        type="date"
        value={fechaHasta}
        onChange={(e) => { setFechaHasta(e.target.value); setLocalErrors(p => ({ ...p, fechaHasta: null })); }}
        margin="normal"
        fullWidth
        required
        error={!!localErrors.fechaHasta}
        helperText={localErrors.fechaHasta}
        disabled={isLoading}
        InputLabelProps={{ shrink: true }}
      />

      {apiErrorMessage && <Alert severity="error" sx={{ mt: 2 }}>{apiErrorMessage}</Alert>}

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

export default SeleccionaReporteVentaMensual;