import {
    Apps,
    AttachMoney,
    Category,
    Dialpad,
    Fullscreen,
    FullscreenExit,
    GridView,
    Image,
    Inventory,
    LocalShipping,
    CreditCard,
    Lock,
    MonetizationOn,
    Print,
    Save,
    Security,
    Speed,
    Storefront,
    TableBar,
    ViewList,
} from "@mui/icons-material";
import {
    Alert,
    Box,
    Button,
    Card,
    CardContent,
    Chip,
    CircularProgress,
    FormControl,
    FormControlLabel,
    Grid,
    InputLabel,
    MenuItem,
    Paper,
    Select,
    Snackbar,
    Switch,
    TextField,
    ToggleButton,
    ToggleButtonGroup,
    Typography,
} from "@mui/material";
import { Icon } from "@iconify/react";
import { useQuery } from "@tanstack/react-query";
import { useCallback, useEffect, useMemo, useState } from "react";
import { getCajasBySucursal } from "../../api/cajas.service";
import { getEmpresaMonedas } from "../../api/monedas.service";
import { getSucursales } from "../../api/sucursales.service";
import { usePermission } from "../../hooks/usePermission";
import { useSubmodulo } from "../../hooks/useSubmodulo.js";
import {
    connectQzTray,
    getPrinters,
    isQzConnected,
    printTestTicket,
} from "../../services/qzTrayService";
import {
    usePosConfigQuery,
    useUpdatePosConfigMutation,
} from "../../tanstack/PosConfigStack";
import { AccesoRestringido } from "../common/AccesoRestringido";
import { DECIMALES_MONTO_EDITABLE, MAX_DECIMALES_CANTIDAD, MONTOS_RAPIDOS_DEFAULT } from "../../utils/montoEditable";

// Valores por defecto
const DEFAULT_CONFIG = {
  // Modo estación de servicio (ver src/utils/montoEditable.js)
  permitir_editar_monto: false,
  decimales_cantidad: 2,
  montos_rapidos: MONTOS_RAPIDOS_DEFAULT,
  tipo_pos: "retail",
  fullscreen: true,
  layout: "grid",
  show_product_image: true,
  show_product_price: true,
  show_product_stock: true,
  card_size: "medium",
  categories_position: "left",
  numpad_position: "right",
  enable_tables: false,
  enable_delivery: false,
  enable_quick_sale: true,
  default_view: "products",
  moneda_default_id: null,
  printer_name: "",
  printer_paper_width: 80,
  auto_print_ticket: false,
  print_mobile_enabled: false,
  // Fase 1: Seguridad
  requiere_autorizacion_apertura: false,
  requiere_autorizacion_cierre: false,
  fondo_fijo: "",
  diferencia_arqueo_permitida: 0,
  requiere_arqueo_cierre: true,
  // Ventas a crédito en POS retail (opt-in por caja)
  permitir_venta_credito: false,
};

const mapConfigToForm = (config) => {
  const src = config || {};
  const next = {};
  for (const key of Object.keys(DEFAULT_CONFIG)) {
    next[key] = src[key] ?? DEFAULT_CONFIG[key];
  }
  return next;
};

export default function PosConfigTab() {
  const { can } = usePermission("ADMINISTRACION");
  const canRead = can("ADM_POSCFG_VER");
  const canEdit = can("ADM_POSCFG_EDITAR");
  const { hasAccess: tienePrintMobile } = useSubmodulo("COB_PRINT_MOBILE");

  // Obtener sucursales de la empresa
  const { data: sucursalesData, isLoading: loadingSucursales } = useQuery({
    queryKey: ["sucursales"],
    queryFn: () => getSucursales(),
  });
  // Solo sucursales activas: no tiene sentido configurar el POS de una
  // sucursal desactivada. El endpoint devuelve también las inactivas porque
  // Administración > Sucursales las necesita para poder reactivarlas, así que
  // el filtro va acá y no en el backend.
  const sucursales = useMemo(() => {
    const raw = sucursalesData?.data || sucursalesData || [];
    return Array.isArray(raw) ? raw.filter((s) => s.active !== false) : [];
  }, [sucursalesData]);

  const [selectedSucursalId, setSelectedSucursalId] = useState("");

  // Auto-seleccionar primera sucursal
  useEffect(() => {
    if (sucursales.length > 0 && !selectedSucursalId) {
      setSelectedSucursalId(sucursales[0].id);
    }
  }, [sucursales, selectedSucursalId]);

  // Obtener cajas de la sucursal seleccionada
  const { data: cajasData, isLoading: loadingCajas } = useQuery({
    queryKey: ["cajas-sucursal", selectedSucursalId],
    queryFn: () => getCajasBySucursal(selectedSucursalId),
    enabled: !!selectedSucursalId,
  });
  const cajas = useMemo(() => {
    const raw = cajasData?.data || cajasData || [];
    return Array.isArray(raw) ? raw : [];
  }, [cajasData]);

  const [selectedCajaId, setSelectedCajaId] = useState("");

  // Auto-seleccionar primera caja cuando carguen
  useEffect(() => {
    if (cajas.length > 0 && !selectedCajaId) {
      setSelectedCajaId(cajas[0].id);
    }
  }, [cajas, selectedCajaId]);

  // Reset caja al cambiar sucursal
  useEffect(() => {
    setSelectedCajaId("");
  }, [selectedSucursalId]);

  const { data: config, isLoading } = usePosConfigQuery(selectedCajaId);
  const updateMutation = useUpdatePosConfigMutation();

  // Obtener monedas de la empresa
  const { data: monedasData } = useQuery({
    queryKey: ["empresa-monedas"],
    queryFn: getEmpresaMonedas,
  });
  const monedas = Array.isArray(monedasData) ? monedasData : [];

  const [formData, setFormData] = useState(DEFAULT_CONFIG);
  const [snackbar, setSnackbar] = useState({
    open: false,
    message: "",
    severity: "success",
  });
  const [qzStatus, setQzStatus] = useState("disconnected"); // disconnected | connecting | connected | error
  const [availablePrinters, setAvailablePrinters] = useState([]);
  const [loadingPrinters, setLoadingPrinters] = useState(false);
  const [testingPrint, setTestingPrint] = useState(false);

  useEffect(() => {
    if (config) {
      setFormData(mapConfigToForm(config));
    }
  }, [config]);

  const savedSnapshot = useMemo(() => mapConfigToForm(config), [config]);
  const hasChanges = useMemo(
    () => JSON.stringify(formData) !== JSON.stringify(savedSnapshot),
    [formData, savedSnapshot],
  );

  const handleDiscard = () => setFormData(savedSnapshot);

  const handleChange = (field, value) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
  };

  const handleDetectPrinters = useCallback(async () => {
    setLoadingPrinters(true);
    setQzStatus("connecting");
    try {
      const connected = await connectQzTray();
      if (connected) {
        setQzStatus("connected");
        const printers = await getPrinters();
        setAvailablePrinters(Array.isArray(printers) ? printers : []);
      } else {
        setQzStatus("error");
        setAvailablePrinters([]);
      }
    } catch (err) {
      console.error("Error detectando impresoras:", err);
      setQzStatus("error");
      setAvailablePrinters([]);
    } finally {
      setLoadingPrinters(false);
    }
  }, []);

  const handleTestPrint = useCallback(async () => {
    if (!formData.printer_name) {
      setSnackbar({ open: true, message: "Seleccione una impresora primero", severity: "warning" });
      return;
    }
    setTestingPrint(true);
    try {
      await printTestTicket({
        printerName: formData.printer_name,
        paperWidth: Number(formData.printer_paper_width) || 80,
      });
      setSnackbar({ open: true, message: "Ticket de prueba enviado a la impresora", severity: "success" });
    } catch (err) {
      console.error("Error en prueba de impresión:", err);
      setSnackbar({ open: true, message: `Error: ${err?.message || "no se pudo imprimir"}`, severity: "error" });
    } finally {
      setTestingPrint(false);
    }
  }, [formData.printer_name, formData.printer_paper_width]);

  // Verificar estado de QZ Tray al montar
  useEffect(() => {
    if (isQzConnected()) {
      setQzStatus("connected");
    }
  }, []);

  const handleSave = async () => {
    if (!selectedCajaId) {
      setSnackbar({
        open: true,
        message: "Seleccione una caja antes de guardar",
        severity: "warning",
      });
      return;
    }
    try {
      await updateMutation.mutateAsync({ cajaId: selectedCajaId, ...formData });
      setSnackbar({
        open: true,
        message: "Configuración guardada correctamente",
        severity: "success",
      });
    } catch (error) {
      setSnackbar({
        open: true,
        message: "Error al guardar la configuración",
        severity: "error",
      });
    }
  };

  if (!canRead) {
    return (
      <AccesoRestringido mensaje="No tienes permisos para ver la configuración del POS." />
    );
  }

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

  if (sucursales.length === 0) {
    return (
      <Alert severity="warning">
        No se encontraron sucursales. Configure una sucursal primero desde
        Sucursales y Cajas.
      </Alert>
    );
  }

  // No hacer return aquí — el alert se muestra inline para que el selector de sucursal siga visible

  return (
    <Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}>
      {/* Header */}
      <Box>
        <Typography variant="h6">Configuración del Punto de Venta</Typography>
        <Typography variant="body2" color="text.secondary">
          Seleccione una caja y personalice su configuración
        </Typography>
      </Box>

      {/* Selector de Sucursal y Caja */}
      <Paper
        sx={{
          p: 2,
          display: "flex",
          alignItems: "center",
          gap: 2,
          flexWrap: "wrap",
        }}
      >
        {sucursales.length > 1 && (
          <>
            <Typography
              variant="body2"
              fontWeight={600}
              sx={{ minWidth: "fit-content" }}
            >
              Sucursal:
            </Typography>
            <ToggleButtonGroup
              value={selectedSucursalId}
              exclusive
              onChange={(e, val) => {
                if (val) setSelectedSucursalId(val);
              }}
              size="small"
            >
              {sucursales.map((s) => (
                <ToggleButton key={s.id} value={s.id}>
                  {s.descripcion ||
                    (s.punto_establecimiento
                      ? `Sucursal ${s.punto_establecimiento}`
                      : "Sucursal sin nombre")}
                </ToggleButton>
              ))}
            </ToggleButtonGroup>
          </>
        )}
        {cajas.length > 0 && (
          <>
            <Typography
              variant="body2"
              fontWeight={600}
              sx={{ minWidth: "fit-content" }}
            >
              Caja:
            </Typography>
            <ToggleButtonGroup
              value={selectedCajaId}
              exclusive
              onChange={(e, val) => {
                if (val) setSelectedCajaId(val);
              }}
              size="small"
            >
              {cajas.map((caja) => (
                <ToggleButton key={caja.id} value={caja.id}>
                  {caja.descripcion || "Caja sin nombre"}
                </ToggleButton>
              ))}
            </ToggleButtonGroup>
          </>
        )}
        <Typography variant="caption" color="text.secondary">
          Cada caja tiene su propia configuración de POS e impresora
        </Typography>
      </Paper>

      {cajas.length === 0 && selectedSucursalId && !loadingCajas && (
        <Alert severity="info">
          No hay cajas registradas en la sucursal seleccionada. Cree una caja
          primero desde Sucursales y Cajas.
        </Alert>
      )}

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

      {!isLoading && cajas.length > 0 && (
        <Grid container spacing={3}>
          {/* Tipo de POS */}
          <Grid item xs={12}>
            <Paper sx={{ p: 3 }}>
              <Typography
                variant="subtitle1"
                fontWeight="bold"
                sx={{ mb: 2, display: "flex", alignItems: "center", gap: 1 }}
              >
                <Storefront /> Tipo de Punto de Venta
              </Typography>
              <ToggleButtonGroup
                value={formData.tipo_pos}
                exclusive
                onChange={(e, value) =>
                  value && handleChange("tipo_pos", value)
                }
                fullWidth
              >
                <ToggleButton value="retail">
                  <GridView sx={{ mr: 1 }} /> POS Retail (Pantalla completa)
                </ToggleButton>
                <ToggleButton value="admin">
                  <Apps sx={{ mr: 1 }} /> POS Admin (Con menú lateral)
                </ToggleButton>
              </ToggleButtonGroup>
              <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
                {formData.tipo_pos === "retail"
                  ? "Modo optimizado para ventas rápidas con pantalla completa, ideal para puntos de venta con pantalla táctil."
                  : "Modo con menú lateral y acceso completo a todas las funciones administrativas del sistema."}
              </Typography>
            </Paper>
          </Grid>

          {formData.tipo_pos === "retail" && (
            <Grid item xs={12} md={6}>
              <Paper sx={{ p: 3, height: "100%" }}>
                <Typography
                  variant="subtitle1"
                  fontWeight="bold"
                  sx={{ mb: 2, display: "flex", alignItems: "center", gap: 1 }}
                >
                  <Apps /> Modo de Visualización
                </Typography>

                <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
                  <FormControlLabel
                    control={
                      <Switch
                        checked={formData.fullscreen}
                        onChange={(e) =>
                          handleChange("fullscreen", e.target.checked)
                        }
                      />
                    }
                    label={
                      <Box
                        sx={{ display: "flex", alignItems: "center", gap: 1 }}
                      >
                        {formData.fullscreen ? (
                          <Fullscreen />
                        ) : (
                          <FullscreenExit />
                        )}
                        Modo Pantalla Completa
                      </Box>
                    }
                  />

                  <Box>
                    <Typography
                      variant="body2"
                      color="text.secondary"
                      sx={{ mb: 1 }}
                    >
                      Layout de Productos
                    </Typography>
                    <ToggleButtonGroup
                      value={formData.layout}
                      exclusive
                      onChange={(e, value) =>
                        value && handleChange("layout", value)
                      }
                      fullWidth
                    >
                      <ToggleButton value="grid">
                        <GridView sx={{ mr: 1 }} /> Grilla
                      </ToggleButton>
                      <ToggleButton value="list">
                        <ViewList sx={{ mr: 1 }} /> Lista
                      </ToggleButton>
                      <ToggleButton value="categories">
                        <Category sx={{ mr: 1 }} /> Categorías
                      </ToggleButton>
                    </ToggleButtonGroup>
                  </Box>

                  <FormControl fullWidth size="small">
                    <InputLabel>Tamaño de Tarjetas</InputLabel>
                    <Select
                      value={formData.card_size}
                      label="Tamaño de Tarjetas"
                      onChange={(e) =>
                        handleChange("card_size", e.target.value)
                      }
                    >
                      <MenuItem value="small">Pequeño</MenuItem>
                      <MenuItem value="medium">Mediano</MenuItem>
                      <MenuItem value="large">Grande</MenuItem>
                    </Select>
                  </FormControl>

                  <FormControl fullWidth size="small">
                    <InputLabel>Vista Inicial</InputLabel>
                    <Select
                      value={formData.default_view}
                      label="Vista Inicial"
                      onChange={(e) =>
                        handleChange("default_view", e.target.value)
                      }
                    >
                      <MenuItem value="products">Productos</MenuItem>
                      <MenuItem value="categories">Categorías</MenuItem>
                      <MenuItem value="favorites">Favoritos</MenuItem>
                    </Select>
                  </FormControl>
                </Box>
              </Paper>
            </Grid>
          )}

          {formData.tipo_pos === "retail" && (
            <Grid item xs={12} md={6}>
              <Paper sx={{ p: 3, height: "100%" }}>
                <Typography
                  variant="subtitle1"
                  fontWeight="bold"
                  sx={{ mb: 2, display: "flex", alignItems: "center", gap: 1 }}
                >
                  <Inventory /> Visualización de Productos
                </Typography>

                <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
                  <FormControlLabel
                    control={
                      <Switch
                        checked={formData.show_product_image}
                        onChange={(e) =>
                          handleChange("show_product_image", e.target.checked)
                        }
                      />
                    }
                    label={
                      <Box
                        sx={{ display: "flex", alignItems: "center", gap: 1 }}
                      >
                        <Image fontSize="small" /> Mostrar Imagen
                      </Box>
                    }
                  />
                  <FormControlLabel
                    control={
                      <Switch
                        checked={formData.show_product_price}
                        onChange={(e) =>
                          handleChange("show_product_price", e.target.checked)
                        }
                      />
                    }
                    label={
                      <Box
                        sx={{ display: "flex", alignItems: "center", gap: 1 }}
                      >
                        <MonetizationOn fontSize="small" /> Mostrar Precio
                      </Box>
                    }
                  />
                  <FormControlLabel
                    control={
                      <Switch
                        checked={formData.show_product_stock}
                        onChange={(e) =>
                          handleChange("show_product_stock", e.target.checked)
                        }
                      />
                    }
                    label={
                      <Box
                        sx={{ display: "flex", alignItems: "center", gap: 1 }}
                      >
                        <Inventory fontSize="small" /> Mostrar Stock
                      </Box>
                    }
                  />
                </Box>
              </Paper>
            </Grid>
          )}

          {formData.tipo_pos === "retail" && (
            <Grid item xs={12} md={6}>
              <Paper sx={{ p: 3, height: "100%" }}>
                <Typography
                  variant="subtitle1"
                  fontWeight="bold"
                  sx={{ mb: 2, display: "flex", alignItems: "center", gap: 1 }}
                >
                  <CreditCard /> Ventas a crédito
                </Typography>

                <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
                  <FormControlLabel
                    control={
                      <Switch
                        checked={formData.permitir_venta_credito}
                        onChange={(e) => handleChange("permitir_venta_credito", e.target.checked)}
                      />
                    }
                    label="Permitir facturar a crédito"
                  />
                  <Typography variant="caption" color="text.secondary" sx={{ mt: -1.5 }}>
                    El cajero puede elegir una condición de crédito a plazo en el cobro. Requiere
                    condiciones de crédito cargadas en la empresa, cliente nominado con límite de
                    crédito y conexión: la deuda queda en Cuentas a Cobrar y no entra dinero a la caja.
                  </Typography>
                </Box>
              </Paper>
            </Grid>
          )}

          <Grid item xs={12} md={6}>
            <Paper sx={{ p: 3, height: "100%" }}>
              <Typography
                variant="subtitle1"
                fontWeight="bold"
                sx={{ mb: 2, display: "flex", alignItems: "center", gap: 1 }}
              >
                <MonetizationOn /> Estación de servicio
              </Typography>

              <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
                <FormControlLabel
                  control={
                    <Switch
                      checked={formData.permitir_editar_monto}
                      onChange={(e) => {
                        const on = e.target.checked;
                        handleChange("permitir_editar_monto", on);
                        // Los decimales van de la mano: con 2 el total no cierra
                        // contra el monto tipeado.
                        if (on && Number(formData.decimales_cantidad) < DECIMALES_MONTO_EDITABLE) {
                          handleChange("decimales_cantidad", DECIMALES_MONTO_EDITABLE);
                        }
                      }}
                    />
                  }
                  label="Cargar el monto y calcular la cantidad"
                />
                <Typography variant="caption" color="text.secondary" sx={{ mt: -1.5 }}>
                  Aplica sólo a ítems en litros (LT) o kilogramos (kg). El resto no cambia.
                </Typography>

                <TextField
                  label="Decimales de la cantidad"
                  type="number"
                  size="small"
                  value={formData.decimales_cantidad}
                  onChange={(e) => {
                    // Con el modo activo el piso es DECIMALES_MONTO_EDITABLE:
                    // por debajo el total no cierra contra el monto cargado.
                    const piso = formData.permitir_editar_monto ? DECIMALES_MONTO_EDITABLE : 0;
                    handleChange(
                      "decimales_cantidad",
                      Math.min(Math.max(Number(e.target.value) || 0, piso), MAX_DECIMALES_CANTIDAD),
                    );
                  }}
                  inputProps={{
                    min: formData.permitir_editar_monto ? DECIMALES_MONTO_EDITABLE : 0,
                    max: MAX_DECIMALES_CANTIDAD,
                  }}
                  disabled={!formData.permitir_editar_monto}
                  helperText={`Entre ${DECIMALES_MONTO_EDITABLE} y ${MAX_DECIMALES_CANTIDAD} con el modo activo. Con menos, el total no coincide con el monto cargado.`}
                  fullWidth
                />

                <TextField
                  label="Montos rápidos"
                  size="small"
                  value={(formData.montos_rapidos || []).join(", ")}
                  onChange={(e) =>
                    handleChange(
                      "montos_rapidos",
                      e.target.value
                        .split(",")
                        .map((x) => Number(String(x).replace(/[^\d]/g, "")))
                        .filter((n) => Number.isFinite(n) && n > 0),
                    )
                  }
                  disabled={!formData.permitir_editar_monto}
                  helperText="Separados por coma. Aparecen como botones en el ítem."
                  placeholder="10000, 50000, 100000"
                  fullWidth
                />
              </Box>
            </Paper>
          </Grid>

          {formData.tipo_pos === "retail" && (
            <Grid item xs={12} md={6}>
              <Paper sx={{ p: 3, height: "100%" }}>
                <Typography
                  variant="subtitle1"
                  fontWeight="bold"
                  sx={{ mb: 2, display: "flex", alignItems: "center", gap: 1 }}
                >
                  <Category /> Posición de Elementos
                </Typography>

                <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
                  <FormControl fullWidth size="small">
                    <InputLabel>Posición de Categorías</InputLabel>
                    <Select
                      value={formData.categories_position}
                      label="Posición de Categorías"
                      onChange={(e) =>
                        handleChange("categories_position", e.target.value)
                      }
                    >
                      <MenuItem value="left">Izquierda</MenuItem>
                      <MenuItem value="top">Arriba</MenuItem>
                      <MenuItem value="hidden">Oculto</MenuItem>
                    </Select>
                  </FormControl>

                  <FormControl fullWidth size="small">
                    <InputLabel>Posición del Teclado Numérico</InputLabel>
                    <Select
                      value={formData.numpad_position}
                      label="Posición del Teclado Numérico"
                      onChange={(e) =>
                        handleChange("numpad_position", e.target.value)
                      }
                    >
                      <MenuItem value="right">Derecha</MenuItem>
                      <MenuItem value="bottom">Abajo</MenuItem>
                      <MenuItem value="hidden">Oculto</MenuItem>
                    </Select>
                  </FormControl>
                </Box>
              </Paper>
            </Grid>
          )}

          {formData.tipo_pos === "retail" && (
            <Grid item xs={12} md={6}>
              <Paper sx={{ p: 3, height: "100%" }}>
                <Typography
                  variant="subtitle1"
                  fontWeight="bold"
                  sx={{ mb: 2, display: "flex", alignItems: "center", gap: 1 }}
                >
                  <AttachMoney /> Moneda por Defecto (POS Retail)
                </Typography>

                <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
                  <FormControl fullWidth size="small">
                    <InputLabel>Moneda para POS Retail</InputLabel>
                    <Select
                      value={formData.moneda_default_id || ""}
                      label="Moneda para POS Retail"
                      onChange={(e) =>
                        handleChange(
                          "moneda_default_id",
                          e.target.value || null,
                        )
                      }
                    >
                      <MenuItem value="">
                        <em>Usar moneda principal</em>
                      </MenuItem>
                      {monedas.map((m) => (
                        <MenuItem key={m.id} value={m.id}>
                          {m.moneda?.codigo} - {m.moneda?.descripcion}
                        </MenuItem>
                      ))}
                    </Select>
                  </FormControl>
                  <Typography variant="body2" color="text.secondary">
                    Esta moneda se usará por defecto en el POS Retail de esta
                    sucursal. Si no se selecciona, se usará la moneda principal
                    (PYG).
                  </Typography>
                </Box>
              </Paper>
            </Grid>
          )}

          {/* Impresora Térmica / QZ Tray */}
          <Grid item xs={12} md={6}>
            <Paper sx={{ p: 3, height: "100%" }}>
              <Typography
                variant="subtitle1"
                fontWeight="bold"
                sx={{ mb: 2, display: "flex", alignItems: "center", gap: 1 }}
              >
                <Print /> Impresora Térmica (QZ Tray)
              </Typography>

              <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
                {/* Estado de QZ Tray */}
                <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
                  <Chip
                    size="small"
                    label={
                      qzStatus === "connected"
                        ? "QZ Tray Conectado"
                        : qzStatus === "connecting"
                          ? "Conectando..."
                          : qzStatus === "error"
                            ? "QZ Tray no disponible"
                            : "No conectado"
                    }
                    color={
                      qzStatus === "connected"
                        ? "success"
                        : qzStatus === "error"
                          ? "error"
                          : "default"
                    }
                    variant="outlined"
                  />
                  <Button
                    size="small"
                    variant="outlined"
                    onClick={handleDetectPrinters}
                    disabled={loadingPrinters}
                  >
                    {loadingPrinters ? "Detectando..." : "Detectar Impresoras"}
                  </Button>
                  <Button
                    size="small"
                    variant="contained"
                    color="primary"
                    startIcon={<Print />}
                    onClick={handleTestPrint}
                    disabled={testingPrint || !formData.printer_name}
                  >
                    {testingPrint ? "Imprimiendo..." : "Probar Impresión"}
                  </Button>
                </Box>

                {qzStatus === "error" && (
                  <Typography variant="caption" color="error">
                    Asegúrese de que QZ Tray esté instalado y en ejecución.
                    Descargue desde{" "}
                    <a
                      href="https://qz.io/download/"
                      target="_blank"
                      rel="noreferrer"
                    >
                      qz.io/download
                    </a>
                  </Typography>
                )}

                {/* Selección de impresora */}
                {availablePrinters.length > 0 ? (
                  <FormControl fullWidth size="small">
                    <InputLabel>Impresora de Tickets</InputLabel>
                    <Select
                      value={formData.printer_name || ""}
                      label="Impresora de Tickets"
                      onChange={(e) =>
                        handleChange("printer_name", e.target.value || null)
                      }
                    >
                      <MenuItem value="">
                        <em>Sin impresora (usar diálogo del navegador)</em>
                      </MenuItem>
                      {availablePrinters.map((p) => (
                        <MenuItem key={p} value={p}>
                          {p}
                        </MenuItem>
                      ))}
                    </Select>
                  </FormControl>
                ) : (
                  <TextField
                    size="small"
                    fullWidth
                    label="Nombre de Impresora (manual)"
                    value={formData.printer_name || ""}
                    onChange={(e) =>
                      handleChange("printer_name", e.target.value || null)
                    }
                    placeholder="Ej: EPSON TM-T20III"
                    helperText="Haga clic en 'Detectar Impresoras' para listar automáticamente, o ingrese el nombre manualmente."
                  />
                )}

                {/* Ancho de papel */}
                <FormControl fullWidth size="small">
                  <InputLabel>Ancho de Papel</InputLabel>
                  <Select
                    value={formData.printer_paper_width}
                    label="Ancho de Papel"
                    onChange={(e) =>
                      handleChange("printer_paper_width", e.target.value)
                    }
                  >
                    <MenuItem value={58}>58 mm</MenuItem>
                    <MenuItem value={80}>80 mm</MenuItem>
                  </Select>
                </FormControl>

                {/* Auto-imprimir */}
                <FormControlLabel
                  control={
                    <Switch
                      checked={formData.auto_print_ticket}
                      onChange={(e) =>
                        handleChange("auto_print_ticket", e.target.checked)
                      }
                    />
                  }
                  label={
                    <Box sx={{ display: "flex", flexDirection: "column" }}>
                      <Typography variant="body2">
                        Auto-imprimir ticket después de cada venta
                      </Typography>
                      <Typography variant="caption" color="text.secondary">
                        Imprime automáticamente sin mostrar diálogo de
                        confirmación
                      </Typography>
                    </Box>
                  }
                />

                {/* Impresión móvil — solo visible con módulo PRINT_MOBILE */}
                {tienePrintMobile && (
                  <FormControlLabel
                    control={
                      <Switch
                        checked={formData.print_mobile_enabled}
                        onChange={(e) =>
                          handleChange("print_mobile_enabled", e.target.checked)
                        }
                        color="primary"
                      />
                    }
                    label={
                      <Box sx={{ display: "flex", flexDirection: "column" }}>
                        <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
                          <Typography variant="body2">
                            Impresión móvil (Novasis Print)
                          </Typography>
                          <Chip label="COB_PRINT_MOBILE" size="small" color="primary" variant="outlined" sx={{ fontSize: 9, height: 16 }} />
                        </Box>
                        <Typography variant="caption" color="text.secondary">
                          Usa la app Novasis Print en el celular del cobrador vía Bluetooth
                        </Typography>
                      </Box>
                    }
                  />
                )}
              </Box>
            </Paper>
          </Grid>

          {/* Fase 1: Seguridad de Caja */}
          <Grid item xs={12}>
            <Paper sx={{ p: 3 }}>
              <Typography
                variant="subtitle1"
                fontWeight="bold"
                sx={{ mb: 1, display: "flex", alignItems: "center", gap: 1 }}
              >
                <Security /> Seguridad de Caja
              </Typography>
              <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
                Configure las autorizaciones y controles de seguridad para esta
                caja.
              </Typography>

              <Grid container spacing={3}>
                <Grid item xs={12} md={6}>
                  <Box
                    sx={{
                      display: "flex",
                      flexDirection: "column",
                      gap: 2,
                    }}
                  >
                    <FormControlLabel
                      control={
                        <Switch
                          checked={formData.requiere_autorizacion_apertura}
                          onChange={(e) =>
                            handleChange(
                              "requiere_autorizacion_apertura",
                              e.target.checked,
                            )
                          }
                          disabled={!canEdit}
                        />
                      }
                      label={
                        <Box>
                          <Box
                            sx={{
                              display: "flex",
                              alignItems: "center",
                              gap: 1,
                            }}
                          >
                            <Lock fontSize="small" /> Autorización para Apertura
                          </Box>
                          <Typography variant="caption" color="text.secondary">
                            Requiere PIN de supervisor para abrir esta caja
                          </Typography>
                        </Box>
                      }
                    />

                    <FormControlLabel
                      control={
                        <Switch
                          checked={formData.requiere_autorizacion_cierre}
                          onChange={(e) =>
                            handleChange(
                              "requiere_autorizacion_cierre",
                              e.target.checked,
                            )
                          }
                          disabled={!canEdit}
                        />
                      }
                      label={
                        <Box>
                          <Box
                            sx={{
                              display: "flex",
                              alignItems: "center",
                              gap: 1,
                            }}
                          >
                            <Lock fontSize="small" /> Autorización para Cierre
                          </Box>
                          <Typography variant="caption" color="text.secondary">
                            Requiere PIN de supervisor para cerrar esta caja
                          </Typography>
                        </Box>
                      }
                    />

                    <FormControlLabel
                      control={
                        <Switch
                          checked={formData.requiere_arqueo_cierre}
                          onChange={(e) =>
                            handleChange(
                              "requiere_arqueo_cierre",
                              e.target.checked,
                            )
                          }
                          disabled={!canEdit}
                        />
                      }
                      label={
                        <Box>
                          <Typography variant="body2">
                            Requiere arqueo al cerrar caja
                          </Typography>
                          <Typography variant="caption" color="text.secondary">
                            El cajero debe contar el efectivo antes de cerrar
                          </Typography>
                        </Box>
                      }
                    />
                  </Box>
                </Grid>

                <Grid item xs={12} md={6}>
                  <Box
                    sx={{
                      display: "flex",
                      flexDirection: "column",
                      gap: 2,
                    }}
                  >
                    <TextField
                      size="small"
                      fullWidth
                      label="Fondo Fijo de Caja"
                      type="number"
                      value={formData.fondo_fijo}
                      onChange={(e) =>
                        handleChange("fondo_fijo", e.target.value)
                      }
                      disabled={!canEdit}
                      placeholder="Ej: 500000"
                      helperText="Monto fijo que debe quedar en caja al cerrar (dejar vacío para no controlar)"
                      InputProps={{
                        startAdornment: (
                          <Typography
                            variant="body2"
                            color="text.secondary"
                            sx={{ mr: 1 }}
                          >
                            ₲
                          </Typography>
                        ),
                      }}
                    />

                    <TextField
                      size="small"
                      fullWidth
                      label="Diferencia Máxima Permitida en Arqueo"
                      type="number"
                      value={formData.diferencia_arqueo_permitida}
                      onChange={(e) =>
                        handleChange(
                          "diferencia_arqueo_permitida",
                          e.target.value,
                        )
                      }
                      disabled={!canEdit}
                      placeholder="0"
                      helperText="Diferencia máxima aceptable sin requerir autorización (0 = sin tolerancia)"
                      InputProps={{
                        startAdornment: (
                          <Typography
                            variant="body2"
                            color="text.secondary"
                            sx={{ mr: 1 }}
                          >
                            ₲
                          </Typography>
                        ),
                      }}
                    />
                  </Box>
                </Grid>
              </Grid>
            </Paper>
          </Grid>

          {/* Funcionalidades - solo retail */}
          {formData.tipo_pos === "retail" && (
            <Grid item xs={12} md={6}>
              <Paper sx={{ p: 3, height: "100%" }}>
                <Typography
                  variant="subtitle1"
                  fontWeight="bold"
                  sx={{ mb: 2, display: "flex", alignItems: "center", gap: 1 }}
                >
                  <Speed /> Funcionalidades
                </Typography>

                <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
                  <FormControlLabel
                    control={
                      <Switch
                        checked={formData.enable_quick_sale}
                        onChange={(e) =>
                          handleChange("enable_quick_sale", e.target.checked)
                        }
                      />
                    }
                    label={
                      <Box
                        sx={{ display: "flex", alignItems: "center", gap: 1 }}
                      >
                        <Speed fontSize="small" /> Venta Rápida
                      </Box>
                    }
                  />
                  <FormControlLabel
                    control={
                      <Switch
                        checked={formData.enable_tables}
                        onChange={(e) =>
                          handleChange("enable_tables", e.target.checked)
                        }
                      />
                    }
                    label={
                      <Box
                        sx={{ display: "flex", alignItems: "center", gap: 1 }}
                      >
                        <TableBar fontSize="small" /> Gestión de Mesas
                        <Typography variant="caption" color="text.secondary">
                          (Próximamente)
                        </Typography>
                      </Box>
                    }
                  />
                  <FormControlLabel
                    control={
                      <Switch
                        checked={formData.enable_delivery}
                        onChange={(e) =>
                          handleChange("enable_delivery", e.target.checked)
                        }
                      />
                    }
                    label={
                      <Box
                        sx={{ display: "flex", alignItems: "center", gap: 1 }}
                      >
                        <LocalShipping fontSize="small" /> Delivery
                        <Typography variant="caption" color="text.secondary">
                          (Próximamente)
                        </Typography>
                      </Box>
                    }
                  />
                </Box>
              </Paper>
            </Grid>
          )}

          {/* Preview - solo retail */}
          {formData.tipo_pos === "retail" && (
            <Grid item xs={12}>
              <Paper sx={{ p: 3 }}>
                <Typography
                  variant="subtitle1"
                  fontWeight="bold"
                  sx={{ mb: 2 }}
                >
                  Vista Previa del Layout
                </Typography>
                <Card variant="outlined" sx={{ bgcolor: "grey.100" }}>
                  <CardContent>
                    <Box
                      sx={{
                        display: "flex",
                        gap: 2,
                        minHeight: 200,
                        flexDirection:
                          formData.categories_position === "top"
                            ? "column"
                            : "row",
                      }}
                    >
                      {/* Categorías */}
                      {formData.categories_position !== "hidden" && (
                        <Box
                          sx={{
                            width:
                              formData.categories_position === "left"
                                ? 120
                                : "100%",
                            height:
                              formData.categories_position === "top"
                                ? 50
                                : "auto",
                            bgcolor: "primary.light",
                            borderRadius: 1,
                            p: 1,
                            display: "flex",
                            flexDirection:
                              formData.categories_position === "top"
                                ? "row"
                                : "column",
                            gap: 1,
                          }}
                        >
                          <Typography variant="caption" color="white">
                            Categorías
                          </Typography>
                        </Box>
                      )}

                      {/* Área de productos */}
                      <Box sx={{ flex: 1, display: "flex", gap: 2 }}>
                        <Box
                          sx={{
                            flex: 1,
                            bgcolor: "grey.300",
                            borderRadius: 1,
                            p: 2,
                            display: "flex",
                            flexWrap: "wrap",
                            gap: 1,
                            alignContent: "flex-start",
                          }}
                        >
                          {formData.layout === "grid"
                            ? [...Array(6)].map((_, i) => (
                                <Box
                                  key={i}
                                  sx={{
                                    width:
                                      formData.card_size === "small"
                                        ? 60
                                        : formData.card_size === "large"
                                          ? 100
                                          : 80,
                                    height:
                                      formData.card_size === "small"
                                        ? 60
                                        : formData.card_size === "large"
                                          ? 100
                                          : 80,
                                    bgcolor: "white",
                                    borderRadius: 1,
                                    display: "flex",
                                    flexDirection: "column",
                                    alignItems: "center",
                                    justifyContent: "center",
                                    p: 0.5,
                                  }}
                                >
                                  {formData.show_product_image && (
                                    <Image
                                      sx={{ fontSize: 20, color: "grey.400" }}
                                    />
                                  )}
                                  {formData.show_product_price && (
                                    <Typography variant="caption">
                                      $$$
                                    </Typography>
                                  )}
                                </Box>
                              ))
                            : [...Array(4)].map((_, i) => (
                                <Box
                                  key={i}
                                  sx={{
                                    width: "100%",
                                    height: 30,
                                    bgcolor: "white",
                                    borderRadius: 1,
                                    display: "flex",
                                    alignItems: "center",
                                    px: 1,
                                    gap: 1,
                                  }}
                                >
                                  {formData.show_product_image && (
                                    <Image
                                      sx={{ fontSize: 16, color: "grey.400" }}
                                    />
                                  )}
                                  <Typography
                                    variant="caption"
                                    sx={{ flex: 1 }}
                                  >
                                    Producto
                                  </Typography>
                                  {formData.show_product_price && (
                                    <Typography variant="caption">
                                      $$$
                                    </Typography>
                                  )}
                                </Box>
                              ))}
                        </Box>

                        {/* Numpad */}
                        {formData.numpad_position === "right" && (
                          <Box
                            sx={{
                              width: 100,
                              bgcolor: "grey.400",
                              borderRadius: 1,
                              p: 1,
                              display: "flex",
                              flexDirection: "column",
                              alignItems: "center",
                            }}
                          >
                            <Dialpad sx={{ color: "white" }} />
                            <Typography variant="caption" color="white">
                              Numpad
                            </Typography>
                          </Box>
                        )}
                      </Box>
                    </Box>

                    {/* Numpad bottom */}
                    {formData.numpad_position === "bottom" && (
                      <Box
                        sx={{
                          mt: 2,
                          height: 50,
                          bgcolor: "grey.400",
                          borderRadius: 1,
                          display: "flex",
                          alignItems: "center",
                          justifyContent: "center",
                          gap: 1,
                        }}
                      >
                        <Dialpad sx={{ color: "white" }} />
                        <Typography variant="caption" color="white">
                          Teclado Numérico
                        </Typography>
                      </Box>
                    )}
                  </CardContent>
                </Card>
              </Paper>
            </Grid>
          )}
        </Grid>
      )}

      {selectedCajaId && (
        <Box
          sx={{
            position: "sticky",
            bottom: 0,
            py: 1.25,
            px: 2,
            bgcolor: "background.paper",
            borderTop: 1,
            borderColor: hasChanges ? "warning.light" : "divider",
            borderRadius: "8px 8px 0 0",
            boxShadow: "0 -2px 8px rgba(0,0,0,0.08)",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            gap: 2,
            flexWrap: "wrap",
            zIndex: 5,
          }}
        >
          <Typography
            variant="body2"
            sx={{ display: "flex", alignItems: "center", gap: 0.75 }}
            color={hasChanges ? "warning.main" : "text.secondary"}
          >
            <Icon
              icon={hasChanges ? "mdi:alert-circle-outline" : "mdi:check-circle-outline"}
              width={18}
            />
            {hasChanges ? "Tenés cambios sin guardar" : "No hay cambios pendientes"}
          </Typography>
          <Box sx={{ display: "flex", gap: 1 }}>
            <Button
              variant="text"
              color="inherit"
              onClick={handleDiscard}
              disabled={!hasChanges || updateMutation.isPending}
            >
              Descartar
            </Button>
            <Button
              variant="contained"
              startIcon={
                updateMutation.isPending ? (
                  <CircularProgress size={16} color="inherit" />
                ) : (
                  <Save />
                )
              }
              onClick={handleSave}
              disabled={!hasChanges || updateMutation.isPending || !canEdit}
            >
              {updateMutation.isPending ? "Guardando..." : "Guardar Cambios"}
            </Button>
          </Box>
        </Box>
      )}

      <Snackbar
        open={snackbar.open}
        autoHideDuration={3000}
        onClose={() => setSnackbar({ ...snackbar, open: false })}
        anchorOrigin={{ vertical: "top", horizontal: "left" }}
      >
        <Alert
          severity={snackbar.severity}
          onClose={() => setSnackbar({ ...snackbar, open: false })}
        >
          {snackbar.message}
        </Alert>
      </Snackbar>
    </Box>
  );
}