import React, { useState } from 'react';
import {
  Box, Typography, TextField, Button, CircularProgress, Alert,
  FormControl,
  ToggleButtonGroup, ToggleButton, RadioGroup, FormControlLabel, Radio
} from '@mui/material';

export type TipoListadoDistMensual = 'diarios' | 'publicaciones';

interface SeleccionaReporteListadoDistMensualProps {
  onGenerarReporte: (params: {
    fechaDesde: string; // yyyy-MM-dd (primer día del mes)
    fechaHasta: string; // yyyy-MM-dd (último día del mes)
    esAccionista: boolean;
    tipoReporte: TipoListadoDistMensual;
  }) => Promise<void>;
  onCancel?: () => void;
  isLoading?: boolean;
  apiErrorMessage?: string | null;
}

const SeleccionaReporteListadoDistMensual: React.FC<SeleccionaReporteListadoDistMensualProps> = ({
  onGenerarReporte,
  isLoading,
  apiErrorMessage
}) => {
  const [mesAnio, setMesAnio] = useState<string>(new Date().toISOString().substring(0, 7)); // Formato "YYYY-MM"
  const [esAccionista, setEsAccionista] = useState<boolean>(false); // Default a Canillitas
  const [tipoReporte, setTipoReporte] = useState<TipoListadoDistMensual>('publicaciones'); // Default a Por Publicación

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

  const validate = (): boolean => {
    const errors: { [key: string]: string | null } = {};
    if (!mesAnio) errors.mesAnio = 'Debe seleccionar un Mes/Año.';
    // esAccionista y tipoReporte siempre tendrán un valor debido a los defaults y ToggleButton/RadioGroup
    setLocalErrors(errors);
    return Object.keys(errors).length === 0;
  };

  const handleGenerar = () => {
    if (!validate()) return;

    const [year, month] = mesAnio.split('-').map(Number);
    const fechaDesde = new Date(year, month - 1, 1).toISOString().split('T')[0];
    const fechaHasta = new Date(year, month, 0).toISOString().split('T')[0]; // Último día del mes

    onGenerarReporte({
      fechaDesde,
      fechaHasta,
      esAccionista,
      tipoReporte
    });
  };

  return (
    <Box sx={{ p: 2, border: '1px solid #ccc', borderRadius: '4px', minWidth: 380 }}>
      <Typography variant="h6" gutterBottom>
        Parámetros: Listado Distribución Mensual
      </Typography>
      <TextField
        label="Mes y Año"
        type="month"
        value={mesAnio}
        onChange={(e) => { setMesAnio(e.target.value); setLocalErrors(p => ({ ...p, mesAnio: null })); }}
        margin="normal"
        fullWidth
        required
        error={!!localErrors.mesAnio}
        helperText={localErrors.mesAnio}
        disabled={isLoading}
        InputLabelProps={{ shrink: true }}
      />
      <Box sx={{ mt: 2, mb: 2, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <Typography variant="subtitle1" sx={{ mb: 0, fontWeight: 500 }}>
          Tipo de Vendedor
        </Typography>
        <FormControl component="fieldset" margin="normal" fullWidth disabled={isLoading} sx={{ mt: 2, mb: 2, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>

          <ToggleButtonGroup
            value={esAccionista ? 'accionistas' : 'canillitas'}
            exclusive
            onChange={(_, value) => {
              if (value !== null) setEsAccionista(value === 'accionistas');
            }}
            aria-label="Tipo de reporte"
            disabled={isLoading}
            color="primary"
            size="large"
            sx={{
              borderRadius: 2,
              boxShadow: 2,
              backgroundColor: '#f5f5f5',
              p: 0.5,
            }}
          >
            <ToggleButton
              value="canillitas"
              aria-label="Canillitas"
              sx={{
                fontWeight: esAccionista ? 400 : 700,
                bgcolor: !esAccionista ? 'primary.main' : 'background.paper',
                color: !esAccionista ? 'primary.contrastText' : 'text.primary',
                '&.Mui-selected': {
                  bgcolor: 'primary.main',
                  color: 'primary.contrastText',
                },
                minWidth: 140,
                borderRadius: 2,
                mx: 1,
              }}
            >
              Canillitas
            </ToggleButton>
            <ToggleButton
              value="accionistas"
              aria-label="Accionistas"
              sx={{
                fontWeight: esAccionista ? 700 : 400,
                bgcolor: esAccionista ? 'primary.main' : 'background.paper',
                color: esAccionista ? 'primary.contrastText' : 'text.primary',
                '&.Mui-selected': {
                  bgcolor: 'primary.main',
                  color: 'primary.contrastText',
                },
                minWidth: 140,
                borderRadius: 2,
                mx: 1,
              }}
            >
              Accionistas
            </ToggleButton>
          </ToggleButtonGroup>
        </FormControl>
      </Box>
      <FormControl component="fieldset" margin="normal" fullWidth disabled={isLoading}>
        <Typography component="legend" variant="subtitle2" sx={{ mb: 0.5, color: 'rgba(0, 0, 0, 0.6)' }}>Variante del Reporte</Typography>
        <RadioGroup
          row
          aria-label="Variante del Reporte"
          name="tipoReporte"
          value={tipoReporte}
          onChange={(e) => setTipoReporte(e.target.value as TipoListadoDistMensual)}
        >
          <FormControlLabel value="publicaciones" control={<Radio size="small" />} label="Por Publicación" />
          <FormControlLabel value="diarios" control={<Radio size="small" />} label="Por Diarios (El Día/El Plata)" />
        </RadioGroup>
      </FormControl>


      {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 SeleccionaReporteListadoDistMensual;