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 {
    useCreatePuntoExpedicionMutation,
    useUpdatePuntoExpedicionMutation,
} from "../../../tanstack/PuntosExpedicionStack";

export const PuntoExpedicionFormDialog = ({
  open,
  onClose,
  caja,
  sucursalId,
  empresaId,
  punto = null,
}) => {
  const isEdit = Boolean(punto?.id);
  const createMutation = useCreatePuntoExpedicionMutation();
  const updateMutation = useUpdatePuntoExpedicionMutation();
  const mutation = isEdit ? updateMutation : createMutation;

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

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

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

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

      <form onSubmit={handleSubmit(onSubmit)}>
        <DialogContent
          dividers
          sx={{ display: "flex", flexDirection: "column", gap: 2 }}
        >
          <Controller
            name="punto_expedicion"
            control={control}
            rules={{
              required: "Punto de expedición es requerido",
              pattern: {
                value: /^\d{3}$/,
                message: "Debe ser exactamente 3 dígitos",
              },
            }}
            render={({ field }) => (
              <TextField
                {...field}
                label="Código del punto"
                size="small"
                fullWidth
                autoFocus
                placeholder="001"
                error={!!errors.punto_expedicion}
                helperText={
                  errors.punto_expedicion?.message ||
                  "3 dígitos. Aparece en el número de los comprobantes (ej: 001-001-0000001)."
                }
              />
            )}
          />
          <Controller
            name="descripcion"
            control={control}
            render={({ field }) => (
              <TextField
                {...field}
                label="Descripción (opcional)"
                size="small"
                fullWidth
                placeholder="Ej: Mostrador, Delivery, Web"
                helperText="Para identificar el punto cuando hay varios en la misma caja."
              />
            )}
          />
        </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>
  );
};