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

interface SeleccionaReporteListadoDistribucionCanillasImporteProps {
  onGenerarReporte: (params: {
    idPublicacion: number;
    fechaDesde: string;
    fechaHasta: string;
    esAccionista: boolean;
  }) => Promise<void>;
  onCancel: () => void;
  isLoading?: boolean;
  apiErrorMessage?: string | null;
}

const SeleccionaReporteListadoDistribucionCanillasImporte: React.FC<SeleccionaReporteListadoDistribucionCanillasImporteProps> = ({
  onGenerarReporte,
  isLoading,
  apiErrorMessage
}) => {
  const [idPublicacion, setIdPublicacion] = useState<number | string>('');
  const [fechaDesde, setFechaDesde] = useState<string>(new Date().toISOString().split('T')[0]);
  const [fechaHasta, setFechaHasta] = useState<string>(new Date().toISOString().split('T')[0]);
  const [esAccionista, setEsAccionista] = useState<boolean>(false);

  const [publicaciones, setPublicaciones] = useState<PublicacionDto[]>([]);
  const [loadingDropdowns, setLoadingDropdowns] = useState(false);
  const [localErrors, setLocalErrors] = useState<{ [key: string]: string | null }>({});

  useEffect(() => {
    const fetchPublicaciones = async () => {
      setLoadingDropdowns(true);
      try {
        const data = await publicacionService.getAllPublicaciones(undefined, undefined, true);
        setPublicaciones(data.map(p => p));
      } catch (error) {
        console.error("Error al cargar publicaciones:", error);
        setLocalErrors(prev => ({ ...prev, dropdowns: 'Error al cargar publicaciones.' }));
      } finally {
        setLoadingDropdowns(false);
      }
    };
    fetchPublicaciones();
  }, []);

  const validate = (): boolean => {
    const errors: { [key: string]: string | null } = {};
    if (!idPublicacion) errors.idPublicacion = 'Debe seleccionar una publicación.';
    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.';
    }
    setLocalErrors(errors);
    return Object.keys(errors).length === 0;
  };

  const handleGenerar = () => {
    if (!validate()) return;
    onGenerarReporte({
      idPublicacion: Number(idPublicacion),
      fechaDesde,
      fechaHasta,
      esAccionista
    });
  };

  return (
    <Box sx={{ p: 2, border: '1px solid #ccc', borderRadius: '4px', minWidth: 380 }}>
      <Typography variant="h6" gutterBottom>
        Parámetros: Distribución Canillitas con Importe
      </Typography>
      <FormControl fullWidth margin="normal" error={!!localErrors.idPublicacion} disabled={isLoading || loadingDropdowns}>
        <InputLabel id="publicacion-select-label-imp" required>Publicación</InputLabel>
        <Select
          labelId="publicacion-select-label-imp"
          label="Publicación"
          value={idPublicacion}
          onChange={(e) => { setIdPublicacion(e.target.value as number); setLocalErrors(p => ({ ...p, idPublicacion: null })); }}
        >
          <MenuItem value="" disabled><em>Seleccione una publicación</em></MenuItem>
          {publicaciones.map((p) => (
            <MenuItem key={p.idPublicacion} value={p.idPublicacion}>{p.nombre}</MenuItem>
          ))}
        </Select>
        {localErrors.idPublicacion && <Typography color="error" variant="caption" sx={{ml:1.5}}>{localErrors.idPublicacion}</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 }}
      />
      <Box sx={{ mt: 2, mb: 2, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
  <Typography variant="subtitle1" sx={{ mb: 1, fontWeight: 500 }}>
    Tipo de reporte
  </Typography>
  <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>
</Box>

      {apiErrorMessage && <Alert severity="error" sx={{ mt: 2 }}>{apiErrorMessage}</Alert>}
      {localErrors.dropdowns && <Alert severity="warning" sx={{ mt: 1 }}>{localErrors.dropdowns}</Alert>}

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

export default SeleccionaReporteListadoDistribucionCanillasImporte;