import { Add, Close, Delete, Store } from "@mui/icons-material";
import {
    Box,
    Button,
    Chip,
    CircularProgress,
    Dialog,
    DialogContent,
    DialogTitle,
    Divider,
    FormControl,
    IconButton,
    InputLabel,
    MenuItem,
    Paper,
    Select,
    Tooltip,
    Typography,
} from "@mui/material";
import { useState } from "react";
import { Controller, useForm } from "react-hook-form";
import {
    useAsignacionesByUsuarioQuery,
    useCreateAsignacionMutation,
    useDeleteAsignacionMutation,
} from "../../../tanstack/AsignacionesSucursalStack";
import { useCajasBySucursalQuery } from "../../../tanstack/CajasStack";
import { useSucursalesQuery } from "../../../tanstack/SucursalesStack";

export const AsignacionesDialog = ({ open, onClose, usuario }) => {
  const [showForm, setShowForm] = useState(false);
  const [selectedSucursal, setSelectedSucursal] = useState("");

  const { data: asignaciones, isLoading } = useAsignacionesByUsuarioQuery(
    usuario?.id,
  );
  const { data: sucursalesData } = useSucursalesQuery();
  const { data: cajasData } = useCajasBySucursalQuery(selectedSucursal);

  const createMutation = useCreateAsignacionMutation();
  const deleteMutation = useDeleteAsignacionMutation();

  // sucursalesData es directamente el array de sucursales
  const sucursales = Array.isArray(sucursalesData)
    ? sucursalesData
    : sucursalesData?.data || [];
  const cajas = cajasData?.data || cajasData || [];

  const { control, handleSubmit, reset, watch } = useForm({
    defaultValues: {
      sucursal_id: "",
      caja_id: "",
    },
  });

  const watchSucursal = watch("sucursal_id");

  const handleClose = () => {
    setShowForm(false);
    setSelectedSucursal("");
    reset();
    onClose();
  };

  const onSubmit = (data) => {
    createMutation.mutate(
      {
        sucursal_id: data.sucursal_id,
        usuario_id: usuario?.id,
        caja_id: data.caja_id || undefined,
      },
      {
        onSuccess: () => {
          setShowForm(false);
          setSelectedSucursal("");
          reset();
        },
      },
    );
  };

  const handleSucursalChange = (value) => {
    setSelectedSucursal(value);
  };

  return (
    <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
      <DialogTitle
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
        }}
      >
        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
          <Store color="primary" />
          Asignaciones - {usuario?.nombres} {usuario?.apellidos}
        </Box>
        <IconButton onClick={handleClose} size="small">
          <Close />
        </IconButton>
      </DialogTitle>

      <DialogContent dividers>
        {!showForm && (
          <Box sx={{ display: "flex", justifyContent: "flex-end", mb: 2 }}>
            <Button
              variant="contained"
              size="small"
              startIcon={<Add />}
              onClick={() => setShowForm(true)}
            >
              Nueva Asignación
            </Button>
          </Box>
        )}

        {showForm && (
          <Paper variant="outlined" sx={{ p: 2, mb: 2 }}>
            <Typography variant="subtitle2" gutterBottom>
              Nueva Asignación
            </Typography>
            <form onSubmit={handleSubmit(onSubmit)}>
              <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
                <Controller
                  name="sucursal_id"
                  control={control}
                  rules={{ required: "Sucursal es requerida" }}
                  render={({ field }) => (
                    <FormControl size="small" fullWidth>
                      <InputLabel>Sucursal *</InputLabel>
                      <Select
                        {...field}
                        label="Sucursal *"
                        onChange={(e) => {
                          field.onChange(e);
                          handleSucursalChange(e.target.value);
                        }}
                      >
                        {sucursales.map((suc) => (
                          <MenuItem key={suc.id} value={suc.id}>
                            {suc.descripcion} - {suc.punto_establecimiento}
                          </MenuItem>
                        ))}
                      </Select>
                    </FormControl>
                  )}
                />

                <Controller
                  name="caja_id"
                  control={control}
                  render={({ field }) => (
                    <FormControl
                      size="small"
                      fullWidth
                      disabled={!watchSucursal}
                    >
                      <InputLabel>Caja (opcional)</InputLabel>
                      <Select {...field} label="Caja (opcional)">
                        <MenuItem value="">Todas las cajas</MenuItem>
                        {cajas.map((caja) => (
                          <MenuItem key={caja.id} value={caja.id}>
                            {caja.descripcion}
                          </MenuItem>
                        ))}
                      </Select>
                    </FormControl>
                  )}
                />

                <Box
                  sx={{ display: "flex", gap: 1, justifyContent: "flex-end" }}
                >
                  <Button
                    size="small"
                    onClick={() => {
                      setShowForm(false);
                      setSelectedSucursal("");
                      reset();
                    }}
                  >
                    Cancelar
                  </Button>
                  <Button
                    type="submit"
                    variant="contained"
                    size="small"
                    disabled={createMutation.isPending}
                    startIcon={
                      createMutation.isPending && <CircularProgress size={14} />
                    }
                  >
                    {createMutation.isPending ? "Asignando..." : "Asignar"}
                  </Button>
                </Box>
              </Box>
            </form>
          </Paper>
        )}

        <Divider sx={{ my: 2 }} />

        <Typography variant="subtitle2" gutterBottom>
          Asignaciones actuales
        </Typography>

        {isLoading ? (
          <Box sx={{ display: "flex", justifyContent: "center", py: 3 }}>
            <CircularProgress size={24} />
          </Box>
        ) : !asignaciones || asignaciones.length === 0 ? (
          <Typography color="text.secondary" textAlign="center" py={3}>
            No hay asignaciones para este usuario.
          </Typography>
        ) : (
          <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
            {asignaciones.map((asig) => (
              <Paper
                key={asig.id}
                variant="outlined"
                sx={{ p: 1.5, display: "flex", alignItems: "center", gap: 2 }}
              >
                <Box sx={{ flex: 1 }}>
                  <Typography variant="body2" fontWeight={500}>
                    {asig.sucursal?.descripcion || "Sucursal"}
                  </Typography>
                  <Box sx={{ display: "flex", gap: 0.5, mt: 0.5 }}>
                    <Chip
                      label={`Código: ${asig.sucursal?.punto_establecimiento || "-"}`}
                      size="small"
                      variant="outlined"
                    />
                    {asig.caja && (
                      <Chip
                        label={`Caja: ${asig.caja.descripcion}`}
                        size="small"
                        color="primary"
                        variant="outlined"
                      />
                    )}
                    {!asig.caja && (
                      <Chip
                        label="Todas las cajas"
                        size="small"
                        color="success"
                        variant="outlined"
                      />
                    )}
                  </Box>
                </Box>
                <Tooltip title="Eliminar asignación">
                  <IconButton
                    size="small"
                    color="error"
                    onClick={() => deleteMutation.mutate(asig.id)}
                    disabled={deleteMutation.isPending}
                  >
                    <Delete fontSize="small" />
                  </IconButton>
                </Tooltip>
              </Paper>
            ))}
          </Box>
        )}
      </DialogContent>
    </Dialog>
  );
};