import { Close } from "@mui/icons-material";
import {
    Button,
    CircularProgress,
    Dialog,
    DialogActions,
    DialogContent,
    DialogTitle,
    FormControl,
    FormControlLabel,
    IconButton,
    InputLabel,
    MenuItem,
    Select,
    Switch,
    TextField,
} from "@mui/material";
import { useEffect } from "react";
import { Controller, useForm } from "react-hook-form";
import {
    useCreateDepositoMutation,
    useUpdateDepositoMutation,
} from "../../../tanstack/DepositosStack";

const TIPOS_DEPOSITO = [
  { value: "fisico", label: "Físico" },
  { value: "virtual", label: "Virtual" },
  { value: "transito", label: "En Tránsito" },
];

export const DepositoFormDialog = ({ open, onClose, sucursalId, deposito }) => {
  const createMutation = useCreateDepositoMutation();
  const updateMutation = useUpdateDepositoMutation();
  const isEditing = !!deposito;

  const {
    control,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm({
    defaultValues: {
      codigo: "",
      descripcion: "",
      tipo: "fisico",
      es_principal: false,
    },
  });

  useEffect(() => {
    if (open) {
      if (deposito) {
        reset({
          codigo: deposito.codigo || "",
          descripcion: deposito.descripcion || "",
          tipo: deposito.tipo || "fisico",
          es_principal: deposito.es_principal || false,
        });
      } else {
        reset({
          codigo: "",
          descripcion: "",
          tipo: "fisico",
          es_principal: false,
        });
      }
    }
  }, [open, deposito, reset]);

  const onSubmit = (data) => {
    if (isEditing) {
      updateMutation.mutate({ id: deposito.id, data }, { onSuccess: onClose });
    } else {
      createMutation.mutate(
        { sucursal_id: sucursalId, ...data },
        { onSuccess: onClose },
      );
    }
  };

  const isPending = createMutation.isPending || updateMutation.isPending;

  return (
    <Dialog open={open} onClose={onClose} maxWidth="xs" fullWidth>
      <DialogTitle sx={{ display: "flex", justifyContent: "space-between" }}>
        {isEditing ? "Editar Depósito" : "Nuevo Depósito"}
        <IconButton onClick={onClose} size="small">
          <Close />
        </IconButton>
      </DialogTitle>

      <form onSubmit={handleSubmit(onSubmit)}>
        <DialogContent
          dividers
          sx={{ display: "flex", flexDirection: "column", gap: 2 }}
        >
          <Controller
            name="codigo"
            control={control}
            render={({ field }) => (
              <TextField
                {...field}
                label="Código (opcional)"
                size="small"
                fullWidth
                placeholder="Ej: DEP-001"
              />
            )}
          />

          <Controller
            name="descripcion"
            control={control}
            rules={{ required: "Descripción es requerida" }}
            render={({ field }) => (
              <TextField
                {...field}
                label="Descripción"
                size="small"
                fullWidth
                placeholder="Ej: Depósito Principal"
                error={!!errors.descripcion}
                helperText={errors.descripcion?.message}
              />
            )}
          />

          <Controller
            name="tipo"
            control={control}
            render={({ field }) => (
              <FormControl size="small" fullWidth>
                <InputLabel>Tipo</InputLabel>
                <Select {...field} label="Tipo">
                  {TIPOS_DEPOSITO.map((tipo) => (
                    <MenuItem key={tipo.value} value={tipo.value}>
                      {tipo.label}
                    </MenuItem>
                  ))}
                </Select>
              </FormControl>
            )}
          />

          <Controller
            name="es_principal"
            control={control}
            render={({ field }) => (
              <FormControlLabel
                control={
                  <Switch checked={field.value} onChange={field.onChange} />
                }
                label="Es depósito principal"
              />
            )}
          />
        </DialogContent>

        <DialogActions sx={{ px: 3, py: 2 }}>
          <Button onClick={onClose} disabled={isPending}>
            Cancelar
          </Button>
          <Button
            type="submit"
            variant="contained"
            disabled={isPending}
            startIcon={isPending && <CircularProgress size={16} />}
          >
            {isPending ? "Guardando..." : isEditing ? "Guardar" : "Crear"}
          </Button>
        </DialogActions>
      </form>
    </Dialog>
  );
};