import {
    Add,
    ArrowBack,
    ChevronRight,
    Edit,
    ExpandMore,
    Inventory2,
    Numbers,
    Person,
    PointOfSale,
    DeleteOutline,
    PowerSettingsNew,
    Receipt,
    Settings,
    Star,
    StarBorder,
    Storefront,
    Warehouse,
} from "@mui/icons-material";
import { EmptyState, ScreenGuia } from "../../_standards";
import {
    Accordion,
    AccordionDetails,
    AccordionSummary,
    Box,
    Button,
    Chip,
    CircularProgress,
    FormControl,
    FormControlLabel,
    IconButton,
    InputLabel,
    Link as MuiLink,
    MenuItem,
    Paper,
    Select,
    Switch,
    Tab,
    Tabs,
    Tooltip,
    Typography,
} from "@mui/material";
import { Link as RouterLink } from "react-router-dom";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useState } from "react";
import {
    getSucursalConfig,
    updateSucursalConfig,
} from "../../../api/sucursales.service";
import { useEmpresa } from "../../../context/EmpresaContext";
import { usePermission } from "../../../hooks/usePermission";
import { useToggleCajaMutation } from "../../../tanstack/CajasStack";
import { useToggleDepositoMutation } from "../../../tanstack/DepositosStack";
import {
    useDeletePuntoExpedicionMutation,
    useSetPuntoExpedicionDefaultMutation,
    useTogglePuntoExpedicionMutation,
    useUnsetPuntoExpedicionDefaultMutation,
} from "../../../tanstack/PuntosExpedicionStack";
import { ConfirmDialog } from "../../ui/ConfirmDialog";
import { useSucursalDetalleQuery } from "../../../tanstack/SucursalesStack";
import { CajaFormDialog } from "./CajaFormDialog";
import { DepositoFormDialog } from "./DepositoFormDialog";
import { NumeracionesDialog } from "./NumeracionesDialog";
import { PuntoExpedicionFormDialog } from "./PuntoExpedicionFormDialog";

function TabPanel({ children, value, index }) {
  return (
    <div role="tabpanel" hidden={value !== index}>
      {value === index && <Box sx={{ py: 2 }}>{children}</Box>}
    </div>
  );
}

export const SucursalDetalle = ({ sucursal, onBack }) => {
  const { empresaId } = useEmpresa();
  const { data: detalle, isLoading } = useSucursalDetalleQuery(sucursal?.id);
  const queryClient = useQueryClient();

  const [tabValue, setTabValue] = useState(0);
  const [cajaDialogOpen, setCajaDialogOpen] = useState(false);
  const [puntoExpDialogOpen, setPuntoExpDialogOpen] = useState(false);
  const [depositoDialogOpen, setDepositoDialogOpen] = useState(false);
  const [numeracionesDialogOpen, setNumeracionesDialogOpen] = useState(false);
  const [selectedCaja, setSelectedCaja] = useState(null);
  const [cajaEdit, setCajaEdit] = useState(null);
  const [puntoEdit, setPuntoEdit] = useState(null);
  const [selectedDeposito, setSelectedDeposito] = useState(null);
  const [selectedPuntoExp, setSelectedPuntoExp] = useState(null);

  const toggleCajaMutation = useToggleCajaMutation();
  const togglePuntoExpMutation = useTogglePuntoExpedicionMutation();
  // Eliminar libera el código del punto, que es único por sucursal. El backend
  // rechaza con 409 y explica el motivo si el punto llegó a emitir algo.
  const deletePuntoExpMutation = useDeletePuntoExpedicionMutation();
  const [puntoAEliminar, setPuntoAEliminar] = useState(null);
  const setPuntoExpDefaultMutation = useSetPuntoExpedicionDefaultMutation();
  const unsetPuntoExpDefaultMutation = useUnsetPuntoExpedicionDefaultMutation();
  const toggleDepositoMutation = useToggleDepositoMutation();

  const { can: canInv } = usePermission("INVENTARIO");
  const canReadAlmacenes = canInv("INV_DEP_DEPOSITO_VER");
  const canCreateAlmacenes = canInv("INV_DEP_DEPOSITO_CREAR");
  const canEditAlmacenes = canInv("INV_DEP_DEPOSITO_EDITAR");

  const tabIndexDepositos = canReadAlmacenes ? 1 : null;
  const tabIndexConfig = (canReadAlmacenes ? 1 : 0) + 1;

  // Obtener configuración de sucursal
  const { data: sucursalConfigData } = useQuery({
    queryKey: ["sucursal-config", sucursal?.id],
    queryFn: () => getSucursalConfig(sucursal?.id),
    enabled: !!sucursal?.id,
  });
  const sucursalConfig = sucursalConfigData?.data?.config || {
    envio_lote_middleware: true,
    politica_stock: "advertencia",
    requiere_caja_pagos_proveedor: false,
    maneja_lotes: false,
    metodo_costeo: "FIFO",
    alertar_lotes_vencidos: true,
    dias_alerta_vencimiento: 30,
    compras_credito_requiere_cuotas: false,
  };

  // Mutation para actualizar configuración de sucursal
  const updateSucursalConfigMutation = useMutation({
    mutationFn: (config) => updateSucursalConfig(sucursal?.id, config),
    onSuccess: () => {
      queryClient.invalidateQueries(["sucursal-config", sucursal?.id]);
    },
  });

  if (isLoading) {
    return (
      <Box sx={{ display: "flex", justifyContent: "center", py: 4 }}>
        <CircularProgress />
      </Box>
    );
  }

  const handleAddCaja = () => {
    setCajaEdit(null);
    setCajaDialogOpen(true);
  };

  const handleEditCaja = (caja) => {
    setCajaEdit(caja);
    setCajaDialogOpen(true);
  };

  const handleAddPuntoExp = (caja) => {
    setSelectedCaja(caja);
    setPuntoEdit(null);
    setPuntoExpDialogOpen(true);
  };

  const handleEditPuntoExp = (caja, punto) => {
    setSelectedCaja(caja);
    setPuntoEdit(punto);
    setPuntoExpDialogOpen(true);
  };

  const handleAddDeposito = () => {
    setSelectedDeposito(null);
    setDepositoDialogOpen(true);
  };

  const handleEditDeposito = (deposito) => {
    setSelectedDeposito(deposito);
    setDepositoDialogOpen(true);
  };

  const handleOpenNumeraciones = (punto) => {
    setSelectedPuntoExp(punto);
    setNumeracionesDialogOpen(true);
  };

  return (
    <Box>
      {/* Header responsive */}
      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          gap: 1,
          mb: 3,
          flexWrap: "wrap",
        }}
      >
        <IconButton onClick={onBack} size="medium">
          <ArrowBack />
        </IconButton>
        <Box sx={{ flex: 1, minWidth: 0 }}>
          <Typography
            variant="h5"
            fontWeight={600}
            sx={{ fontSize: { xs: "1rem", sm: "1.5rem" } }}
            noWrap
          >
            {detalle?.descripcion}
          </Typography>
          <Typography
            variant="body2"
            color="text.secondary"
            sx={{ fontSize: { xs: "0.7rem", sm: "0.875rem" } }}
          >
            Est. {detalle?.punto_establecimiento} • {detalle?.direccion}
            {detalle?.numero_casa && detalle?.numero_casa !== "0"
              ? ` N° ${detalle?.numero_casa}`
              : ""}
          </Typography>
        </Box>
        <Chip
          label={detalle?.active ? "Activo" : "Inactivo"}
          color={detalle?.active ? "success" : "default"}
          size="small"
        />
      </Box>

      <Paper sx={{ mb: 2 }}>
        {/* Tabs con scroll en mobile */}
        <Tabs
          value={tabValue}
          onChange={(_, v) => setTabValue(v)}
          variant="scrollable"
          scrollButtons="auto"
          allowScrollButtonsMobile
          sx={{ borderBottom: 1, borderColor: "divider" }}
        >
          <Tab
            label="Cajas"
            sx={{
              fontSize: { xs: "0.75rem", sm: "0.875rem" },
              minWidth: { xs: 80, sm: 120 },
            }}
          />
          {canReadAlmacenes && (
            <Tab
              label="Depósitos"
              sx={{
                fontSize: { xs: "0.75rem", sm: "0.875rem" },
                minWidth: { xs: 80, sm: 120 },
              }}
            />
          )}
          <Tab
            icon={<Settings fontSize="small" />}
            iconPosition="start"
            label="Config."
            sx={{
              fontSize: { xs: "0.75rem", sm: "0.875rem" },
              minWidth: { xs: 80, sm: 120 },
            }}
          />
        </Tabs>

        <Box sx={{ p: 2 }}>
          <TabPanel value={tabValue} index={0}>
            <Box sx={{ mb: 2 }}>
              <ScreenGuia
                moduloPadre="Administración › Sucursales"
                titulo="Cómo organizar tus cajas"
                intro="Cada sucursal tiene una o más cajas. Cada caja agrupa puntos de expedición, y cada punto tiene sus numeraciones de comprobantes (factura, recibo, etc.)."
                pasos={[
                  {
                    icon: "mdi:cash-register",
                    color: "#60a5fa",
                    titulo: "1. Caja",
                    desc: "Representa una caja física u operativa. Ej: Caja Principal, Caja Delivery.",
                  },
                  {
                    icon: "mdi:receipt-text-outline",
                    color: "#34d399",
                    titulo: "2. Punto de expedición",
                    desc: "Código de 3 dígitos que aparece en los comprobantes (XXX-001-0000001). Una caja puede tener varios.",
                  },
                  {
                    icon: "mdi:format-list-numbered",
                    color: "#f59e0b",
                    titulo: "3. Numeraciones",
                    desc: "Por cada tipo de documento (FE, NCR, REP…) configurás el timbrado y el rango de números.",
                  },
                ]}
                notas={[
                  {
                    icon: "mdi:map-marker-path",
                    text: "Dónde están las numeraciones: Configuración → Puntos de Venta → Sucursales y Cajas → entrá a la sucursal (Ver detalle) → pestaña CAJAS → expandí la caja → en el Punto de Expedición hacé clic en el botón «Numeraciones». No hay una pantalla ni pestaña propia de «Numeraciones» en el menú principal.",
                  },
                  {
                    icon: "mdi:information-outline",
                    text: "Para editar el nombre de una caja o el código de un punto, usá el ícono del lápiz en la fila correspondiente.",
                  },
                  {
                    icon: "mdi:alert-outline",
                    text: "Desactivar una caja o un punto bloquea su uso en futuras ventas, pero conserva el histórico.",
                  },
                ]}
              />
            </Box>

            <Box
              sx={{
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
                mb: 2,
                gap: 1,
                flexWrap: "wrap",
              }}
            >
              <Typography variant="subtitle2" color="text.secondary">
                {detalle?.cajas?.length || 0}{" "}
                {detalle?.cajas?.length === 1 ? "caja" : "cajas"} en esta
                sucursal
              </Typography>
              <Button
                variant="contained"
                startIcon={<Add />}
                onClick={handleAddCaja}
                size="small"
              >
                Nueva Caja
              </Button>
            </Box>

            {detalle?.cajas?.length === 0 ? (
              <EmptyState
                icon="mdi:cash-register"
                title="Aún no tenés cajas en esta sucursal"
                description="Creá una caja para empezar a configurar puntos de expedición y numeraciones de comprobantes."
                ctaLabel="Nueva Caja"
                onCta={handleAddCaja}
              />
            ) : (
              <Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
                {detalle?.cajas?.map((caja) => {
                  const puntos = caja.puntos_expedicion || [];
                  const totalNumeraciones = puntos.reduce(
                    (acc, p) => acc + (p.numeraciones_documento?.length || 0),
                    0,
                  );
                  const usuariosCaja =
                    detalle?.asignaciones_usuarios?.filter(
                      (a) => a.caja_id === caja.id,
                    ) || [];
                  return (
                    <Accordion
                      key={caja.id}
                      defaultExpanded
                      disableGutters
                      sx={{
                        border: 1,
                        borderColor: "divider",
                        borderRadius: 1,
                        "&:before": { display: "none" },
                      }}
                    >
                      <AccordionSummary expandIcon={<ExpandMore />}>
                        <Box
                          sx={{
                            display: "flex",
                            alignItems: "center",
                            gap: 1.5,
                            width: "100%",
                            pr: 1,
                          }}
                        >
                          <PointOfSale color="primary" />
                          <Box sx={{ flex: 1, minWidth: 0 }}>
                            <Typography fontWeight={600} noWrap>
                              {caja.descripcion}
                            </Typography>
                            <Typography
                              variant="caption"
                              color="text.secondary"
                            >
                              {puntos.length}{" "}
                              {puntos.length === 1
                                ? "punto de expedición"
                                : "puntos de expedición"}
                              {" · "}
                              {totalNumeraciones}{" "}
                              {totalNumeraciones === 1
                                ? "numeración"
                                : "numeraciones"}
                            </Typography>
                          </Box>
                          {usuariosCaja.length > 0 && (
                            <Tooltip
                              title={
                                <Box>
                                  <Typography
                                    variant="caption"
                                    sx={{ fontWeight: 700 }}
                                  >
                                    Usuarios asignados a esta caja
                                  </Typography>
                                  {usuariosCaja.map((a) => (
                                    <Typography
                                      key={a.id}
                                      variant="caption"
                                      sx={{ display: "block" }}
                                    >
                                      • {a.usuario?.nombres}
                                    </Typography>
                                  ))}
                                </Box>
                              }
                            >
                              <Chip
                                icon={<Person fontSize="small" />}
                                label={usuariosCaja.length}
                                size="small"
                                variant="outlined"
                              />
                            </Tooltip>
                          )}
                          <Chip
                            label={caja.estado ? "Activa" : "Inactiva"}
                            size="small"
                            color={caja.estado ? "success" : "default"}
                          />
                          <Tooltip title="Editar nombre">
                            <IconButton
                              size="small"
                              onClick={(e) => {
                                e.stopPropagation();
                                handleEditCaja(caja);
                              }}
                            >
                              <Edit fontSize="small" />
                            </IconButton>
                          </Tooltip>
                          <Tooltip
                            title={caja.estado ? "Desactivar" : "Activar"}
                          >
                            <IconButton
                              size="small"
                              onClick={(e) => {
                                e.stopPropagation();
                                toggleCajaMutation.mutate(caja.id);
                              }}
                            >
                              <PowerSettingsNew
                                fontSize="small"
                                color={caja.estado ? "success" : "disabled"}
                              />
                            </IconButton>
                          </Tooltip>
                        </Box>
                      </AccordionSummary>
                      <AccordionDetails sx={{ pt: 0 }}>
                        <Box
                          sx={{
                            display: "flex",
                            justifyContent: "space-between",
                            alignItems: "center",
                            mb: 1,
                          }}
                        >
                          <Typography
                            variant="caption"
                            color="text.secondary"
                            sx={{
                              textTransform: "uppercase",
                              letterSpacing: 0.5,
                              fontWeight: 600,
                            }}
                          >
                            Puntos de expedición
                          </Typography>
                          <Button
                            size="small"
                            startIcon={<Add />}
                            onClick={() => handleAddPuntoExp(caja)}
                          >
                            Agregar Punto
                          </Button>
                        </Box>

                        {puntos.length === 0 ? (
                          <EmptyState
                            compact
                            icon="mdi:receipt-text-outline"
                            title="Sin puntos de expedición"
                            description="Agregá un punto para empezar a configurar numeraciones de comprobantes."
                            ctaLabel="Agregar Punto"
                            onCta={() => handleAddPuntoExp(caja)}
                          />
                        ) : (
                          <Box
                            sx={{
                              display: "flex",
                              flexDirection: "column",
                              gap: 1,
                            }}
                          >
                            {puntos.map((punto) => {
                              const nums =
                                punto.numeraciones_documento || [];
                              return (
                                <Paper
                                  key={punto.id}
                                  variant="outlined"
                                  sx={{
                                    p: 1.5,
                                    display: "flex",
                                    alignItems: "center",
                                    gap: 1.5,
                                    flexWrap: { xs: "wrap", sm: "nowrap" },
                                  }}
                                >
                                  <Storefront color="action" />
                                  <Box sx={{ flex: 1, minWidth: 0 }}>
                                    <Box
                                      sx={{
                                        display: "flex",
                                        alignItems: "center",
                                        gap: 0.5,
                                        flexWrap: "wrap",
                                      }}
                                    >
                                      <Typography
                                        variant="body2"
                                        fontWeight={600}
                                      >
                                        Punto {punto.punto_expedicion}
                                      </Typography>
                                      {punto.descripcion && (
                                        <Typography
                                          variant="body2"
                                          color="text.secondary"
                                        >
                                          · {punto.descripcion}
                                        </Typography>
                                      )}
                                    </Box>
                                    <Typography
                                      variant="caption"
                                      color="text.secondary"
                                    >
                                      {nums.length === 0
                                        ? "Sin numeraciones configuradas"
                                        : `${nums.length} ${nums.length === 1 ? "numeración configurada" : "numeraciones configuradas"}`}
                                    </Typography>
                                  </Box>
                                  <Chip
                                    label={punto.active ? "Activo" : "Inactivo"}
                                    size="small"
                                    color={punto.active ? "success" : "default"}
                                  />
                                  {punto.es_default && (
                                    <Chip
                                      icon={<Star sx={{ fontSize: 14 }} />}
                                      label="Default"
                                      size="small"
                                      color="warning"
                                      variant="outlined"
                                    />
                                  )}
                                  <Tooltip
                                    title={
                                      punto.es_default
                                        ? "Quitar como predeterminado"
                                        : "Marcar como predeterminado"
                                    }
                                  >
                                    <span>
                                      <IconButton
                                        size="small"
                                        onClick={() =>
                                          punto.es_default
                                            ? unsetPuntoExpDefaultMutation.mutate(
                                                punto.id,
                                              )
                                            : setPuntoExpDefaultMutation.mutate(
                                                punto.id,
                                              )
                                        }
                                        disabled={
                                          !punto.active ||
                                          setPuntoExpDefaultMutation.isPending ||
                                          unsetPuntoExpDefaultMutation.isPending
                                        }
                                      >
                                        {punto.es_default ? (
                                          <Star
                                            fontSize="small"
                                            color="warning"
                                          />
                                        ) : (
                                          <StarBorder fontSize="small" />
                                        )}
                                      </IconButton>
                                    </span>
                                  </Tooltip>
                                  <Tooltip title="Editar punto">
                                    <IconButton
                                      size="small"
                                      onClick={() =>
                                        handleEditPuntoExp(caja, punto)
                                      }
                                    >
                                      <Edit fontSize="small" />
                                    </IconButton>
                                  </Tooltip>
                                  <Tooltip
                                    title={
                                      punto.active ? "Desactivar" : "Activar"
                                    }
                                  >
                                    <IconButton
                                      size="small"
                                      onClick={() =>
                                        togglePuntoExpMutation.mutate(punto.id)
                                      }
                                    >
                                      <PowerSettingsNew
                                        fontSize="small"
                                        color={
                                          punto.active ? "success" : "disabled"
                                        }
                                      />
                                    </IconButton>
                                  </Tooltip>
                                  <Tooltip title="Eliminar punto">
                                    <IconButton
                                      size="small"
                                      onClick={() => setPuntoAEliminar(punto)}
                                    >
                                      <DeleteOutline fontSize="small" color="error" />
                                    </IconButton>
                                  </Tooltip>
                                  <Button
                                    size="small"
                                    variant="outlined"
                                    startIcon={<Numbers fontSize="small" />}
                                    endIcon={<ChevronRight fontSize="small" />}
                                    onClick={() =>
                                      handleOpenNumeraciones(punto)
                                    }
                                  >
                                    Numeraciones
                                  </Button>
                                </Paper>
                              );
                            })}
                          </Box>
                        )}
                      </AccordionDetails>
                    </Accordion>
                  );
                })}
              </Box>
            )}

            {detalle?.cajas?.length > 0 && (
              <Paper
                variant="outlined"
                sx={{
                  mt: 2,
                  p: 1.5,
                  display: "flex",
                  alignItems: "center",
                  gap: 1.5,
                  flexWrap: "wrap",
                  bgcolor: "action.hover",
                }}
              >
                <Person fontSize="small" color="action" />
                <Box sx={{ flex: 1, minWidth: 200 }}>
                  <Typography variant="body2" fontWeight={600}>
                    {detalle?.asignaciones_usuarios?.length || 0} usuarios
                    asignados a esta sucursal
                  </Typography>
                  <Typography variant="caption" color="text.secondary">
                    Las asignaciones de usuarios a sucursales y cajas se
                    administran desde la pantalla de Usuarios.
                  </Typography>
                </Box>
                <MuiLink
                  component={RouterLink}
                  to="/configuracion?seccion=usuarios"
                  underline="hover"
                  sx={{ fontSize: "0.8125rem", fontWeight: 600 }}
                >
                  Gestionar usuarios →
                </MuiLink>
              </Paper>
            )}
          </TabPanel>

          {canReadAlmacenes && (
            <TabPanel value={tabValue} index={tabIndexDepositos}>
              {canCreateAlmacenes && (
                <Box
                  sx={{ display: "flex", justifyContent: "flex-end", mb: 2 }}
                >
                  <Button
                    variant="contained"
                    startIcon={<Add />}
                    onClick={handleAddDeposito}
                    size="small"
                  >
                    Nuevo Depósito
                  </Button>
                </Box>
              )}

              {detalle?.depositos?.length === 0 ? (
                <Typography color="text.secondary" textAlign="center" py={4}>
                  No hay depósitos registrados. Crea un depósito para comenzar.
                </Typography>
              ) : (
                <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
                  {detalle?.depositos?.map((deposito) => (
                    <Paper
                      key={deposito.id}
                      variant="outlined"
                      sx={{
                        p: 2,
                        display: "flex",
                        alignItems: "center",
                        gap: 2,
                      }}
                    >
                      <Inventory2 color="action" />
                      <Box sx={{ flex: 1 }}>
                        <Typography fontWeight={500}>
                          {deposito.descripcion}
                          {deposito.es_principal && (
                            <Chip
                              label="Principal"
                              size="small"
                              color="primary"
                              sx={{ ml: 1 }}
                            />
                          )}
                        </Typography>
                        <Typography variant="body2" color="text.secondary">
                          {deposito.codigo && `Código: ${deposito.codigo} • `}
                          Tipo:{" "}
                          {deposito.tipo === "fisico"
                            ? "Físico"
                            : deposito.tipo === "virtual"
                              ? "Virtual"
                              : "En Tránsito"}
                        </Typography>
                      </Box>
                      <Chip
                        label={deposito.active ? "Activo" : "Inactivo"}
                        size="small"
                        color={deposito.active ? "success" : "default"}
                      />
                      {canEditAlmacenes && (
                        <Tooltip title="Editar">
                          <IconButton
                            size="small"
                            onClick={() => handleEditDeposito(deposito)}
                          >
                            <Edit fontSize="small" />
                          </IconButton>
                        </Tooltip>
                      )}
                      {canEditAlmacenes && (
                        <Tooltip
                          title={deposito.active ? "Desactivar" : "Activar"}
                        >
                          <IconButton
                            size="small"
                            onClick={() =>
                              toggleDepositoMutation.mutate(deposito.id)
                            }
                          >
                            <PowerSettingsNew
                              fontSize="small"
                              color={deposito.active ? "success" : "disabled"}
                            />
                          </IconButton>
                        </Tooltip>
                      )}
                    </Paper>
                  ))}
                </Box>
              )}
            </TabPanel>
          )}

          <TabPanel value={tabValue} index={tabIndexConfig}>
            <Box>
              <Typography
                variant="h6"
                gutterBottom
                sx={{ display: "flex", alignItems: "center", gap: 1 }}
              >
                <Receipt /> Configuración de Facturación Electrónica
              </Typography>
              <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
                Configura cómo se envían los documentos electrónicos al
                middleware SIFEN.
              </Typography>

              <Paper variant="outlined" sx={{ p: 2 }}>
                <Box
                  sx={{
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "space-between",
                  }}
                >
                  <Box>
                    <Typography variant="subtitle1" fontWeight={500}>
                      Envío en lote al middleware
                    </Typography>
                    <Typography variant="body2" color="text.secondary">
                      {sucursalConfig?.envio_lote_middleware !== false
                        ? "Los documentos NO se enviarán automáticamente. Deberás enviarlos manualmente desde el módulo de ventas."
                        : "Los documentos se enviarán automáticamente al middleware al momento de registrarlos."}
                    </Typography>
                  </Box>
                  <FormControlLabel
                    control={
                      <Switch
                        checked={
                          sucursalConfig?.envio_lote_middleware !== false
                        }
                        onChange={(e) => {
                          updateSucursalConfigMutation.mutate({
                            envio_lote_middleware: e.target.checked,
                          });
                        }}
                        disabled={updateSucursalConfigMutation.isPending}
                      />
                    }
                    label={
                      sucursalConfig?.envio_lote_middleware !== false
                        ? "Activado"
                        : "Desactivado"
                    }
                    labelPlacement="start"
                  />
                </Box>
              </Paper>

              <Box
                sx={{ mt: 2, p: 2, bgcolor: "info.lighter", borderRadius: 1 }}
              >
                <Typography variant="body2" color="info.dark">
                  <strong>Nota:</strong> Cuando el envío en lote está activado,
                  podrás seleccionar múltiples facturas desde el módulo de
                  ventas y enviarlas todas juntas al middleware SIFEN.
                </Typography>
              </Box>

              {/* ── Política de Stock ── */}
              <Typography
                variant="h6"
                sx={{ display: "flex", alignItems: "center", gap: 1, mt: 4, mb: 1 }}
              >
                <Warehouse /> Control de Stock
              </Typography>
              <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
                Define cómo se comporta el sistema cuando se intenta vender un
                producto sin stock suficiente en esta sucursal.
              </Typography>

              <Paper variant="outlined" sx={{ p: 2 }}>
                <Box
                  sx={{
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "space-between",
                    gap: 2,
                    flexWrap: "wrap",
                  }}
                >
                  <Box sx={{ flex: 1, minWidth: 200 }}>
                    <Typography variant="subtitle1" fontWeight={500}>
                      Política de stock
                    </Typography>
                    <Typography variant="body2" color="text.secondary">
                      {sucursalConfig?.politica_stock === "estricto"
                        ? "No se permite vender productos sin stock disponible. El sistema bloqueará la operación."
                        : sucursalConfig?.politica_stock === "libre"
                          ? "Se permite vender sin restricciones de stock. No se realizan validaciones."
                          : "Se permite vender sin stock pero el vendedor recibirá una alerta visual. Se generará stock negativo."}
                    </Typography>
                  </Box>
                  <FormControl size="small" sx={{ minWidth: 180 }}>
                    <InputLabel>Política</InputLabel>
                    <Select
                      value={sucursalConfig?.politica_stock || "advertencia"}
                      label="Política"
                      onChange={(e) => {
                        updateSucursalConfigMutation.mutate({
                          politica_stock: e.target.value,
                        });
                      }}
                      disabled={updateSucursalConfigMutation.isPending}
                    >
                      <MenuItem value="estricto">Estricto</MenuItem>
                      <MenuItem value="advertencia">Advertencia</MenuItem>
                      <MenuItem value="libre">Libre</MenuItem>
                    </Select>
                  </FormControl>
                </Box>
              </Paper>

              <Box sx={{ mt: 2, display: "flex", flexDirection: "column", gap: 1 }}>
                <Paper variant="outlined" sx={{ p: 1.5, display: "flex", alignItems: "center", gap: 1.5 }}>
                  <Chip label="Estricto" size="small" color="error" variant="outlined" />
                  <Typography variant="body2" color="text.secondary">
                    Bloquea la venta si no hay stock. Ideal para <strong>retail / POS</strong> donde solo vendés lo que tenés en tienda.
                  </Typography>
                </Paper>
                <Paper variant="outlined" sx={{ p: 1.5, display: "flex", alignItems: "center", gap: 1.5 }}>
                  <Chip label="Advertencia" size="small" color="warning" variant="outlined" />
                  <Typography variant="body2" color="text.secondary">
                    Permite vender pero muestra alerta. Ideal para <strong>mayoristas</strong> que venden mercadería en tránsito o por llegar.
                  </Typography>
                </Paper>
                <Paper variant="outlined" sx={{ p: 1.5, display: "flex", alignItems: "center", gap: 1.5 }}>
                  <Chip label="Libre" size="small" color="success" variant="outlined" />
                  <Typography variant="body2" color="text.secondary">
                    Sin validación de stock. Para empresas de <strong>servicios</strong> o que no requieren control de inventario.
                  </Typography>
                </Paper>
              </Box>

              {/* Reserva de stock para órdenes de venta */}
              <Paper variant="outlined" sx={{ p: 2, mt: 2 }}>
                <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 2 }}>
                  <Box>
                    <Typography variant="subtitle1" fontWeight={500}>
                      Reserva de stock en Órdenes de Venta
                    </Typography>
                    <Typography variant="body2" color="text.secondary">
                      Al confirmar una orden, se reserva el stock del depósito. Evita vender el mismo artículo en otro canal antes de facturar.
                    </Typography>
                  </Box>
                  <FormControlLabel
                    control={
                      <Switch
                        checked={Boolean(sucursalConfig?.orden_reserva_stock)}
                        onChange={(e) => {
                          updateSucursalConfigMutation.mutate({
                            orden_reserva_stock: e.target.checked,
                          });
                        }}
                        disabled={updateSucursalConfigMutation.isPending}
                      />
                    }
                    label={sucursalConfig?.orden_reserva_stock ? "Activado" : "Desactivado"}
                    labelPlacement="start"
                  />
                </Box>
              </Paper>

              <Typography
                variant="h6"
                sx={{ display: "flex", alignItems: "center", gap: 1, mt: 4, mb: 1 }}
              >
                <Settings /> Configuración ERP (Compras y Lotes)
              </Typography>
              <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
                Estos parámetros aplican a esta sucursal: control de lotes y regla de crédito en compras.
              </Typography>

              <Paper variant="outlined" sx={{ p: 2 }}>
                <Box sx={{ display: "grid", gap: 2 }}>
                  <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 2 }}>
                    <Box>
                      <Typography variant="subtitle1" fontWeight={500}>
                        Maneja lotes
                      </Typography>
                      <Typography variant="body2" color="text.secondary">
                        Habilita control FIFO y operaciones por lote en esta sucursal.
                      </Typography>
                    </Box>
                    <FormControlLabel
                      control={
                        <Switch
                          checked={Boolean(sucursalConfig?.maneja_lotes)}
                          onChange={(e) => {
                            updateSucursalConfigMutation.mutate({
                              maneja_lotes: e.target.checked,
                            });
                          }}
                          disabled={updateSucursalConfigMutation.isPending}
                        />
                      }
                      label={sucursalConfig?.maneja_lotes ? "Activado" : "Desactivado"}
                      labelPlacement="start"
                    />
                  </Box>

                  <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 2, flexWrap: "wrap" }}>
                    <FormControl size="small" sx={{ minWidth: 220 }}>
                      <InputLabel>Método costeo</InputLabel>
                      <Select
                        value={sucursalConfig?.metodo_costeo || "FIFO"}
                        label="Método costeo"
                        onChange={(e) => {
                          updateSucursalConfigMutation.mutate({
                            metodo_costeo: e.target.value,
                          });
                        }}
                        disabled={updateSucursalConfigMutation.isPending}
                      >
                        <MenuItem value="FIFO">FIFO</MenuItem>
                      </Select>
                    </FormControl>

                    <FormControl size="small" sx={{ minWidth: 220 }}>
                      <InputLabel>Días alerta vencimiento</InputLabel>
                      <Select
                        value={Number(sucursalConfig?.dias_alerta_vencimiento || 30)}
                        label="Días alerta vencimiento"
                        onChange={(e) => {
                          updateSucursalConfigMutation.mutate({
                            dias_alerta_vencimiento: Number(e.target.value) || 30,
                          });
                        }}
                        disabled={updateSucursalConfigMutation.isPending}
                      >
                        <MenuItem value={7}>7 días</MenuItem>
                        <MenuItem value={15}>15 días</MenuItem>
                        <MenuItem value={30}>30 días</MenuItem>
                        <MenuItem value={45}>45 días</MenuItem>
                        <MenuItem value={60}>60 días</MenuItem>
                        <MenuItem value={90}>90 días</MenuItem>
                      </Select>
                    </FormControl>
                  </Box>

                  <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 2 }}>
                    <Box>
                      <Typography variant="subtitle1" fontWeight={500}>
                        Alertar lotes vencidos
                      </Typography>
                      <Typography variant="body2" color="text.secondary">
                        Activa alertas de vencimiento en dashboard y consultas de lotes.
                      </Typography>
                    </Box>
                    <FormControlLabel
                      control={
                        <Switch
                          checked={Boolean(sucursalConfig?.alertar_lotes_vencidos)}
                          onChange={(e) => {
                            updateSucursalConfigMutation.mutate({
                              alertar_lotes_vencidos: e.target.checked,
                            });
                          }}
                          disabled={updateSucursalConfigMutation.isPending}
                        />
                      }
                      label={sucursalConfig?.alertar_lotes_vencidos ? "Activado" : "Desactivado"}
                      labelPlacement="start"
                    />
                  </Box>

                  <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 2 }}>
                    <Box>
                      <Typography variant="subtitle1" fontWeight={500}>
                        Crédito con cuotas obligatorias
                      </Typography>
                      <Typography variant="body2" color="text.secondary">
                        Si se activa, las compras a crédito deben informar cuotas manuales con suma exacta.
                      </Typography>
                    </Box>
                    <FormControlLabel
                      control={
                        <Switch
                          checked={Boolean(sucursalConfig?.compras_credito_requiere_cuotas)}
                          onChange={(e) => {
                            updateSucursalConfigMutation.mutate({
                              compras_credito_requiere_cuotas: e.target.checked,
                            });
                          }}
                          disabled={updateSucursalConfigMutation.isPending}
                        />
                      }
                      label={sucursalConfig?.compras_credito_requiere_cuotas ? "Activado" : "Desactivado"}
                      labelPlacement="start"
                    />
                  </Box>
                </Box>
              </Paper>
            </Box>
          </TabPanel>
        </Box>
      </Paper>

      <CajaFormDialog
        open={cajaDialogOpen}
        onClose={() => {
          setCajaDialogOpen(false);
          setCajaEdit(null);
        }}
        sucursalId={sucursal?.id}
        empresaId={empresaId}
        caja={cajaEdit}
      />

      <PuntoExpedicionFormDialog
        open={puntoExpDialogOpen}
        onClose={() => {
          setPuntoExpDialogOpen(false);
          setSelectedCaja(null);
          setPuntoEdit(null);
        }}
        caja={selectedCaja}
        sucursalId={sucursal?.id}
        empresaId={empresaId}
        punto={puntoEdit}
      />

      <DepositoFormDialog
        open={depositoDialogOpen}
        onClose={() => {
          setDepositoDialogOpen(false);
          setSelectedDeposito(null);
        }}
        sucursalId={sucursal?.id}
        deposito={selectedDeposito}
      />

      <NumeracionesDialog
        open={numeracionesDialogOpen}
        onClose={() => {
          setNumeracionesDialogOpen(false);
          setSelectedPuntoExp(null);
        }}
        puntoExpedicion={selectedPuntoExp}
      />

      <ConfirmDialog
        open={Boolean(puntoAEliminar)}
        onClose={() => setPuntoAEliminar(null)}
        loading={deletePuntoExpMutation.isPending}
        title="Eliminar punto de expedición"
        confirmText="Eliminar"
        message={
          `Se va a eliminar el punto ${puntoAEliminar?.punto_expedicion ?? ""} y sus numeraciones sin usar. ` +
          "Sirve para liberar el código y poder reutilizarlo en otra caja. " +
          "Si el punto llegó a emitir comprobantes, no se elimina: desactivalo."
        }
        onConfirm={() =>
          deletePuntoExpMutation.mutate(puntoAEliminar.id, {
            onSuccess: () => setPuntoAEliminar(null),
            // En caso de error el diálogo queda abierto: el toast del backend
            // explica por qué no se puede y el usuario decide qué hacer.
          })
        }
      />
    </Box>
  );
};