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

interface SeleccionaReporteDetalleDistribucionCanillasProps {
  onGenerarReporte: (params: {
    fecha: string;
    idEmpresa: number;
    esAccionista: boolean; // Añadimos este parámetro
  }) => Promise<void>;
  onCancel: () => void;
  isLoading?: boolean;
  apiErrorMessage?: string | null;
}

const SeleccionaReporteDetalleDistribucionCanillas: React.FC<SeleccionaReporteDetalleDistribucionCanillasProps> = ({
  onGenerarReporte,
  isLoading,
  apiErrorMessage
}) => {
  const [fecha, setFecha] = useState<string>(new Date().toISOString().split('T')[0]);
  const [idEmpresa, setIdEmpresa] = useState<number | string>('');
  const [esAccionista, setEsAccionista] = useState<boolean>(false); // Nuevo estado

  const [empresas, setEmpresas] = useState<EmpresaDropdownDto[]>([]);
  const [loadingDropdowns, setLoadingDropdowns] = useState(false);
  const [localErrors, setLocalErrors] = useState<{ [key: string]: string | null }>({});

  useEffect(() => {
    const fetchEmpresas = async () => {
      setLoadingDropdowns(true);
      try {
        const data = await empresaService.getEmpresasDropdown();
        // Añadimos la opción "TODAS" al principio
        setEmpresas([{ idEmpresa: 0, nombre: 'TODAS' }, ...data]);
      } catch (error) {
        console.error("Error al cargar empresas:", error);
        setLocalErrors(prev => ({ ...prev, dropdowns: 'Error al cargar empresas.' }));
      } finally {
        setLoadingDropdowns(false);
      }
    };
    fetchEmpresas();
  }, []);

  const validate = (): boolean => {
    const errors: { [key: string]: string | null } = {};
    if (!fecha) errors.fecha = 'La fecha es obligatoria.';
    // El idEmpresa ya no puede estar vacío, porque se preselecciona "TODAS" o una empresa
    if (idEmpresa === '') errors.idEmpresa = 'Debe seleccionar una empresa.';
    setLocalErrors(errors);
    return Object.keys(errors).length === 0;
  };

  const handleGenerar = () => {
    if (!validate()) return;
    onGenerarReporte({
      fecha,
      idEmpresa: Number(idEmpresa),
      esAccionista // Pasamos el nuevo parámetro
    });
  };

  return (
    <Box sx={{ p: 2, border: '1px solid #ccc', borderRadius: '4px', minWidth: 420 }}>
      <Typography variant="h6" gutterBottom>
        Parámetros: Detalle Distribución Canillas
      </Typography>
      <TextField
        label="Fecha"
        type="date"
        value={fecha}
        onChange={(e) => { setFecha(e.target.value); setLocalErrors(p => ({ ...p, fecha: null })); }}
        margin="normal"
        fullWidth
        required
        error={!!localErrors.fecha}
        helperText={localErrors.fecha}
        disabled={isLoading}
        InputLabelProps={{ shrink: true }}
      />
      <FormControl fullWidth margin="normal" error={!!localErrors.idEmpresa} disabled={isLoading || loadingDropdowns}>
        <InputLabel id="empresa-select-label-distcan" required>Empresa</InputLabel>
        <Select
          labelId="empresa-select-label-distcan"
          label="Empresa"
          value={idEmpresa}
          onChange={(e) => { setIdEmpresa(e.target.value as number); setLocalErrors(p => ({ ...p, idEmpresa: null })); }}
        >
          {empresas.map((e) => (
            <MenuItem key={e.idEmpresa} value={e.idEmpresa}>{e.nombre}</MenuItem>
          ))}
        </Select>
        {localErrors.idEmpresa && <Typography color="error" variant="caption" sx={{ml:1.5}}>{localErrors.idEmpresa}</Typography>}
      </FormControl>

      {/* Selector condicional para Canillitas/Accionistas */}
      {idEmpresa === 0 && (
        <Box sx={{ mt: 2, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <Typography variant="subtitle2" sx={{ mb: 1, fontWeight: 'medium' }}>
            Mostrar para todas las empresas
          </Typography>
          <ToggleButtonGroup
            value={esAccionista ? 'accionistas' : 'canillitas'}
            exclusive
            onChange={(_, value) => { if (value !== null) setEsAccionista(value === 'accionistas'); }}
            aria-label="Tipo de Vendedor"
            disabled={isLoading}
            color="primary"
          >
            <ToggleButton value="canillitas">Canillitas</ToggleButton>
            <ToggleButton value="accionistas">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 SeleccionaReporteDetalleDistribucionCanillas;