import { Close } from "@mui/icons-material";
import {
    Button,
    CircularProgress,
    Dialog,
    DialogActions,
    DialogContent,
    DialogTitle,
    IconButton,
    TextField,
} from "@mui/material";
import { useEffect } from "react";
import { Controller, useForm } from "react-hook-form";
import {
    useCreateCajaMutation,
    useUpdateCajaMutation,
} from "../../../tanstack/CajasStack";

export const CajaFormDialog = ({
  open,
  onClose,
  sucursalId,
  empresaId,
  caja = null,
}) => {
  const isEdit = Boolean(caja?.id);
  const createMutation = useCreateCajaMutation();
  const updateMutation = useUpdateCajaMutation();
  const mutation = isEdit ? updateMutation : createMutation;

  const {
    control,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm({
    defaultValues: {
      descripcion: "",
    },
  });

  useEffect(() => {
    if (open) {
      reset({ descripcion: caja?.descripcion || "" });
    }
  }, [open, caja, reset]);

  const onSubmit = (data) => {
    if (isEdit) {
      updateMutation.mutate(
        { id: caja.id, data: { descripcion: data.descripcion } },
        { onSuccess: onClose },
      );
    } else {
      createMutation.mutate(
        {
          sucursal_id: sucursalId,
          empresa_id: empresaId,
          descripcion: data.descripcion,
        },
        { onSuccess: onClose },
      );
    }
  };

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

      <form onSubmit={handleSubmit(onSubmit)}>
        <DialogContent dividers>
          <Controller
            name="descripcion"
            control={control}
            rules={{ required: "Descripción es requerida" }}
            render={({ field }) => (
              <TextField
                {...field}
                label="Nombre de la caja"
                size="small"
                fullWidth
                autoFocus
                placeholder="Ej: Caja Principal"
                error={!!errors.descripcion}
                helperText={
                  errors.descripcion?.message ||
                  "Nombre con el que identificarás esta caja en reportes y aperturas."
                }
              />
            )}
          />
        </DialogContent>

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