import React, { useState, useEffect } from "react";
import LoadingSpinner from "../LoadingSpinner";
import { env } from "../../src/config/env";
import { authService } from "../../src/services/auth.service";
import { formatCurrency } from "../../utils/formatters";
import ConfirmDialog from "../ConfirmDialog";
import OrderItemsModal from "../OrderItemsModal";
import PrintOrderDialog from "../PrintOrderDialog";
import StimulsoftViewer from "../StimulsoftViewer";
import ReceivePixDialog from "../ReceivePixDialog";
import NoData from "../NoData";
import { Input } from "../ui/input";
import { Label } from "../ui/label";
import { Button } from "../ui/button";
import { CustomAutocomplete } from "../ui/autocomplete";
import { DateInput } from "../ui/date-input";
import { DataGridPremium, GridColDef } from "@mui/x-data-grid-premium";
import "../../lib/mui-license";
import { Box, IconButton } from "@mui/material";
import { Edit, Visibility, Print } from "@mui/icons-material";

interface Order {
  createDate: string;
  orderId: number;
  sellerId: number;
  store: string;
  status: string;
  customerId: number;
  customerName: string;
  orderValue: number;
  itens: number;
  pixCreate: string;
}

interface OrderItem {
  productId: number;
  description: string;
  package: string;
  color?: string;
  local: string;
  quantity: number;
  price: number;
  subTotal: number;
}

interface Store {
  id: string;
  shortName: string;
  name: string;
}

const OrdersView: React.FC = () => {
  const [orders, setOrders] = useState<Order[]>([]);
  const [stores, setStores] = useState<Store[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // Filtros
  const [selectedStore, setSelectedStore] = useState<string>("");
  const [orderId, setOrderId] = useState<string>("");
  const [startDate, setStartDate] = useState<string>("");
  const [endDate, setEndDate] = useState<string>("");
  const [document, setDocument] = useState<string>("");
  const [customerName, setCustomerName] = useState<string>("");

  // Modais
  const [showOrderItems, setShowOrderItems] = useState(false);
  const [orderItems, setOrderItems] = useState<OrderItem[]>([]);
  const [selectedOrder, setSelectedOrder] = useState<Order | null>(null);
  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
  const [confirmDialogType, setConfirmDialogType] = useState<
    "info" | "warning" | "error" | "success" | "delete" | "confirm"
  >("info");
  const [confirmDialogTitle, setConfirmDialogTitle] = useState("");
  const [confirmDialogMessage, setConfirmDialogMessage] = useState("");
  const [showCartLoadedDialog, setShowCartLoadedDialog] = useState(false);
  const [showPrintDialog, setShowPrintDialog] = useState(false);
  const [orderToPrint, setOrderToPrint] = useState<Order | null>(null);
  const [showPrintViewer, setShowPrintViewer] = useState(false);
  const [printUrl, setPrintUrl] = useState<string>("");
  const [printOrderId, setPrintOrderId] = useState<number | undefined>(
    undefined
  );
  const [printModel, setPrintModel] = useState<string | undefined>(undefined);

  // Estados PIX
  const [showReceivePix, setShowReceivePix] = useState(false);
  const [orderForPix, setOrderForPix] = useState<Order | null>(null);
  const [pixValue, setPixValue] = useState<number>(0);
  const [showQrCode, setShowQrCode] = useState(false);
  const [qrCodePix, setQrCodePix] = useState<string>("");
  const [processingPix, setProcessingPix] = useState(false);
  const [showPixReceipt, setShowPixReceipt] = useState(false);
  const [pixReceiptUrl, setPixReceiptUrl] = useState<string>("");

  useEffect(() => {
    fetchStores();
  }, []);

  const fetchStores = async () => {
    try {
      const token = authService.getToken();
      const apiUrl = env.API_URL.replace(/\/$/, "");

      const response = await fetch(`${apiUrl}/lists/store`, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          ...(token && { Authorization: `Basic ${token}` }),
        },
      });

      if (response.ok) {
        const data = await response.json();
        setStores(data);
      }
    } catch (err) {
      console.error("Erro ao buscar filiais:", err);
    }
  };

  const handleSearch = async () => {
    setLoading(true);
    setError(null);

    try {
      const token = authService.getToken();
      const apiUrl = env.API_URL.replace(/\/$/, "");

      // Seguindo o padrão do Angular: sellerId sempre 0
      let sellerId = 0;
      if (authService.isManager()) {
        sellerId = 0;
      }

      const params = new URLSearchParams({
        "x-store": selectedStore || "",
        document: document || "",
        name: customerName.toUpperCase() || "",
        initialDate: startDate || "",
        finalDate: endDate || "",
        sellerId: sellerId.toString(),
        idOrder: orderId || "",
      });

      const response = await fetch(
        `${apiUrl}/order/list?${params.toString()}`,
        {
          method: "GET",
          headers: {
            Accept: "application/json, text/plain, */*",
            "Content-Type": "application/json",
            ...(token && { Authorization: `Basic ${token}` }),
          },
        }
      );

      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}));
        throw new Error(
          errorData.message || `Erro ao buscar pedidos: ${response.statusText}`
        );
      }

      const data = await response.json();
      setOrders(data || []);
    } catch (err) {
      console.error("Erro ao buscar pedidos:", err);
      setError(
        err instanceof Error
          ? err.message
          : "Erro ao buscar pedidos. Tente novamente."
      );
    } finally {
      setLoading(false);
    }
  };

  const handleClear = () => {
    setSelectedStore("");
    setOrderId("");
    setStartDate("");
    setEndDate("");
    setDocument("");
    setCustomerName("");
    setOrders([]);
    setError(null);
  };

  const handleViewItems = async (order: Order) => {
    try {
      const token = authService.getToken();
      const apiUrl = env.API_URL.replace(/\/$/, "");

      const response = await fetch(`${apiUrl}/order/itens/${order.orderId}`, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          ...(token && { Authorization: `Basic ${token}` }),
        },
      });

      if (response.ok) {
        const items = await response.json();
        setOrderItems(items);
        setSelectedOrder(order);
        setShowOrderItems(true);
      }
    } catch (err) {
      console.error("Erro ao buscar itens do pedido:", err);
      setConfirmDialogType("error");
      setConfirmDialogTitle("Erro");
      setConfirmDialogMessage("Não foi possível carregar os itens do pedido.");
      setShowConfirmDialog(true);
    }
  };

  const handleCloseOrderItemsModal = () => {
    setShowOrderItems(false);
    setOrderItems([]);
    setSelectedOrder(null);
  };

  const handleEditOrder = async (order: Order) => {
    // Validação 1: Status FATURADO ou MONTADO (exatamente como no Angular)
    if (order.status === "FATURADO" || order.status === "MONTADO") {
      setConfirmDialogType("warning");
      setConfirmDialogTitle("Pedido não pode ser alterado!");
      setConfirmDialogMessage(
        `Pedido encontra-se ${order.status}, sua alteração não é permitida.`
      );
      setShowConfirmDialog(true);
      return;
    }

    // Validação 2: PIX já gerado (exatamente como no Angular)
    if (order.pixCreate === "S") {
      setConfirmDialogType("warning");
      setConfirmDialogTitle("Pedido não pode ser alterado!");
      setConfirmDialogMessage(
        "PIX já gerado para este pedido, alteração não é permitida."
      );
      setShowConfirmDialog(true);
      return;
    }

    // Validação 3: Vendedor diferente e não é manager (exatamente como no Angular)
    const sellerId = authService.getSeller();
    const isManager = authService.isManager();

    if (order.sellerId !== Number(sellerId) && !isManager) {
      setConfirmDialogType("warning");
      setConfirmDialogTitle("Pedido não pode ser alterado!");
      setConfirmDialogMessage(
        "Pedido de outro vendedor, somente o vendedor responsável da venda poderá alterar o pedido."
      );
      setShowConfirmDialog(true);
      return;
    }

    // Buscar dados do carrinho e navegar para edição
    try {
      const token = authService.getToken();
      const apiUrl = env.API_URL.replace(/\/$/, "");

      console.log(
        "📦 [ORDER] Buscando dados do carrinho para pedido:",
        order.orderId
      );
      const response = await fetch(`${apiUrl}/order/cart/${order.orderId}`, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          ...(token && { Authorization: `Basic ${token}` }),
        },
      });

      if (response.ok) {
        const result = await response.json();

        console.log("📦 [ORDER] Dados recebidos do backend:", {
          cartId: result.cartId,
          hasCustomer: !!result.customer,
          hasPaymentPlan: !!result.paymentPlan,
          hasBilling: !!result.billing,
          hasPartner: !!result.partner,
          hasAddress: !!result.address,
          hasInvoiceStore: !!result.invoiceStore,
        });

        // Salvar dados no localStorage exatamente como no Angular
        console.log(
          "📦 [ORDER] Salvando cartId no localStorage:",
          result.cartId
        );
        localStorage.setItem("cart", result.cartId);
        localStorage.setItem("customer", JSON.stringify(result.customer));
        localStorage.setItem("paymentPlan", JSON.stringify(result.paymentPlan));
        localStorage.setItem("billing", JSON.stringify(result.billing));

        if (result.partner) {
          console.log("📦 [ORDER] Salvando partner");
          localStorage.setItem("partner", JSON.stringify(result.partner));
        }

        if (result.address) {
          console.log("📦 [ORDER] Salvando address");
          localStorage.setItem("address", JSON.stringify(result.address));
        }

        console.log("📦 [ORDER] Salvando invoiceStore");
        localStorage.setItem(
          "invoiceStore",
          JSON.stringify(result.invoiceStore)
        );

        // Criar OrderDelivery exatamente como no Angular
        // Nota: No Angular é 'scheduleDelivery', não 'squeduleDelivery'
        const orderDelivery = {
          notification: result.notification1 ?? "",
          notification1: result.notification2 ?? "",
          notification2: "",
          notificationDelivery1: result.notificationDelivery1 ?? "",
          notificationDelivery2: result.notificationDelivery2 ?? "",
          notificationDelivery3: result.notificationDelivery3 ?? "",
          dateDelivery: result.deliveryDate,
          scheduleDelivery:
            result.scheduleDelivery ?? result.squeduleDelivery ?? "",
          priorityDelivery: result.priorityDelivery,
        };
        console.log("📦 [ORDER] Salvando dataDelivery");
        localStorage.setItem("dataDelivery", JSON.stringify(orderDelivery));

        // IMPORTANTE: Carregar os itens do carrinho ANTES de navegar
        // No Angular, o componente home-sales dispara LoadShoppingAction no ngOnInit
        // No React, precisamos garantir que os itens sejam carregados antes da navegação
        console.log(
          "📦 [ORDER] Carregando itens do carrinho antes de navegar..."
        );
        try {
          const { shoppingService } = await import(
            "../../src/services/shopping.service"
          );
          const items = await shoppingService.getShoppingItems(result.cartId);
          console.log("📦 [ORDER] Itens do carrinho carregados:", items.length);
          console.log("📦 [ORDER] Itens:", items);

          // Salvar os itens no sessionStorage para garantir que sejam carregados após navegação
          sessionStorage.setItem("pendingCartItems", JSON.stringify(items));
          sessionStorage.setItem("pendingCartId", result.cartId);
          console.log(
            "📦 [ORDER] Itens salvos no sessionStorage para carregamento após navegação"
          );
        } catch (loadError) {
          console.error(
            "📦 [ORDER] Erro ao carregar itens antes de navegar:",
            loadError
          );
          // Continuar mesmo se houver erro, o useCart tentará carregar depois
        }

        // Disparar evento customizado para notificar mudança no cartId
        console.log("📦 [ORDER] Disparando evento cartUpdated");
        const storageEvent = new Event("cartUpdated") as any;
        storageEvent.key = "cart";
        storageEvent.newValue = result.cartId;
        window.dispatchEvent(storageEvent);

        // Mostrar mensagem de sucesso informando que os dados do carrinho foram carregados
        console.log("📦 [ORDER] Dados do carrinho carregados com sucesso");
        setShowCartLoadedDialog(true);
      } else {
        const errorData = await response.json().catch(() => ({}));
        throw new Error(
          errorData.message || "Erro ao carregar dados do pedido"
        );
      }
    } catch (err) {
      console.error("📦 [ORDER] Erro ao editar pedido:", err);
      setConfirmDialogType("error");
      setConfirmDialogTitle("Erro");
      setConfirmDialogMessage(
        err instanceof Error
          ? err.message
          : "Não foi possível carregar os dados do pedido."
      );
      setShowConfirmDialog(true);
    }
  };

  const formatDate = (dateString: string | null | undefined): string => {
    if (!dateString || dateString === "null" || dateString === "undefined") {
      return "";
    }

    try {
      // Tentar criar a data
      let date: Date;

      // Se já for uma string de data válida, usar diretamente
      if (typeof dateString === "string") {
        // Tentar parsear diferentes formatos
        date = new Date(dateString);

        // Se falhar, tentar formatos alternativos
        if (isNaN(date.getTime())) {
          // Tentar formato brasileiro DD/MM/YYYY
          const parts = dateString.split("/");
          if (parts.length === 3) {
            date = new Date(
              parseInt(parts[2]),
              parseInt(parts[1]) - 1,
              parseInt(parts[0])
            );
          } else {
            // Tentar formato ISO
            date = new Date(
              dateString.replace(/(\d{2})\/(\d{2})\/(\d{4})/, "$3-$2-$1")
            );
          }
        }
      } else {
        date = new Date(dateString);
      }

      // Verificar se a data é válida
      if (isNaN(date.getTime())) {
        console.warn("Data inválida:", dateString);
        return "";
      }

      // Formatar no padrão DD/MM/YYYY
      const day = String(date.getDate()).padStart(2, "0");
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const year = date.getFullYear();

      return `${day}/${month}/${year}`;
    } catch (error) {
      console.error("Erro ao formatar data:", dateString, error);
      return "";
    }
  };

  const getStatusColor = (status: string): string => {
    switch (status) {
      case "FATURADO":
        return "bg-green-100 text-green-800";
      case "MONTADO":
        return "bg-blue-100 text-blue-800";
      case "LIBERADO":
        return "bg-yellow-100 text-yellow-800";
      case "BLOQUEADO":
        return "bg-red-100 text-red-800";
      default:
        return "bg-slate-100 text-slate-800";
    }
  };

  const handlePrintOrder = (order: Order) => {
    setOrderToPrint(order);
    setShowPrintDialog(true);
  };

  const handleConfirmPrint = (model: "A" | "B") => {
    if (!orderToPrint) return;

    // Construir URL do viewer seguindo o padrão do Angular
    const viewerUrl = env.PRINT_VIEWER_URL.replace(
      "{action}",
      "InitViewerOrder"
    );
    const url = `${viewerUrl}?orderId=${orderToPrint.orderId}&model=${model}`;

    // Configurar e mostrar o viewer
    setPrintUrl(url);
    setPrintOrderId(orderToPrint.orderId);
    setPrintModel(model);
    setShowPrintViewer(true);
    setShowPrintDialog(false);
  };

  const handlePixOrder = async (order: Order) => {
    // Validações
    if (order.status === "FATURADO") {
      setConfirmDialogType("warning");
      setConfirmDialogTitle("Pedido já esta FATURADO!");
      setConfirmDialogMessage(
        "Para geração do PIX o pedido deve estar na posição LIBERADO ou BLOQUEADO."
      );
      setShowConfirmDialog(true);
      return;
    }

    if (order.customerId === 1) {
      setConfirmDialogType("warning");
      setConfirmDialogTitle("Não é permido gerar PIX para CONSUMIDOR FINAL!");
      setConfirmDialogMessage(
        "Para geração do PIX é necessário identificar o cliente no pedido de venda!"
      );
      setShowConfirmDialog(true);
      return;
    }

    setOrderForPix(order);
    setPixValue(parseFloat(order.orderValue.toFixed(2)));
    setShowQrCode(false);
    setQrCodePix("");

    // Buscar PIX existente
    try {
      const token = authService.getToken();
      const apiUrl = env.API_URL_PIX.replace(/\/$/, "");

      const response = await fetch(
        `${apiUrl}/payment/pix/santander/find/${order.orderId}`,
        {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            ...(token && { Authorization: `Basic ${token}` }),
          },
        }
      );

      if (response.ok) {
        const pix = await response.json();

        if (!pix || pix === null) {
          // Não existe PIX, mostrar dialog para criar
          setShowReceivePix(true);
        } else {
          if (pix.status === "CONCLUIDA") {
            // PIX já foi concluído, abrir comprovante
            openPixReceipt(order.orderId);
          } else {
            // PIX existe mas não foi concluído, mostrar QR Code
            setQrCodePix(pix.qrCode);
            setPixValue(pix.valor?.original || order.orderValue);
            setShowQrCode(true);
            setShowReceivePix(true);
          }
        }
      } else {
        // Erro ao buscar, mostrar dialog para criar
        setShowReceivePix(true);
      }
    } catch (err) {
      console.error("Erro ao consultar PIX:", err);
      setConfirmDialogType("error");
      setConfirmDialogTitle("Pedido de venda");
      setConfirmDialogMessage(
        "Erro ao consultar dados do PIX, comunique ao TI."
      );
      setShowConfirmDialog(true);
    }
  };

  const handleConfirmPix = async (value: number) => {
    if (!orderForPix) return;

    // Validação: valor não pode ser superior ao valor do pedido
    if (value > orderForPix.orderValue) {
      setConfirmDialogType("warning");
      setConfirmDialogTitle("Geração pix");
      setConfirmDialogMessage(
        "O Valor do PIX não pode ser superior ao valor do pedido de venda!"
      );
      setShowConfirmDialog(true);
      setShowReceivePix(false);
      return;
    }

    setProcessingPix(true);

    try {
      const token = authService.getToken();
      const apiUrl = env.API_URL_PIX.replace(/\/$/, "");

      const pixOrder = {
        orderId: orderForPix.orderId,
        customerId: orderForPix.customerId,
        amount: value,
      };

      const response = await fetch(`${apiUrl}/payment/pix/santander/create`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          ...(token && { Authorization: `Basic ${token}` }),
        },
        body: JSON.stringify(pixOrder),
      });

      if (response.ok) {
        const result = await response.json();
        setQrCodePix(result.qrCode);
        setPixValue(value);
        setShowQrCode(true);
        setProcessingPix(false);
      } else {
        const errorData = await response.json().catch(() => ({}));
        throw new Error(errorData.message || "Erro ao criar cobrança PIX");
      }
    } catch (err) {
      console.error("Erro ao gerar PIX:", err);
      setProcessingPix(false);
      setShowReceivePix(false);
      setConfirmDialogType("error");
      setConfirmDialogTitle("Pedido de venda");
      setConfirmDialogMessage(
        err instanceof Error ? err.message : "Erro ao criar cobrança PIX"
      );
      setShowConfirmDialog(true);
    }
  };

  const openPixReceipt = (orderId: number) => {
    const viewerUrl = env.PRINT_VIEWER_URL.replace(
      "{action}",
      "InitViewerComprovantePix"
    );
    const url = `${viewerUrl}?order=${orderId}`;
    setPixReceiptUrl(url);
    setShowPixReceipt(true);
  };

  // Definir colunas do DataGrid
  const columns: GridColDef[] = [
    {
      field: "actions",
      headerName: "Ações",
      width: 200,
      sortable: false,
      filterable: false,
      disableColumnMenu: true,
      renderCell: (params) => {
        const order = params.row as Order;
        return (
          <Box sx={{ display: "flex", gap: 0.5 }}>
            <IconButton
              size="small"
              onClick={() => handleEditOrder(order)}
              sx={{
                color: "#64748b",
                "&:hover": { backgroundColor: "#f1f5f9", color: "#475569" },
              }}
              title="Editar pedido"
            >
              <Edit fontSize="small" />
            </IconButton>
            <IconButton
              size="small"
              onClick={() => handleViewItems(order)}
              sx={{
                color: "#64748b",
                "&:hover": { backgroundColor: "#f1f5f9", color: "#475569" },
              }}
              title="Ver itens do pedido"
            >
              <Visibility fontSize="small" />
            </IconButton>
            <IconButton
              size="small"
              onClick={() => handlePrintOrder(order)}
              sx={{
                color: "#64748b",
                "&:hover": { backgroundColor: "#f1f5f9", color: "#475569" },
              }}
              title="Imprimir pedido"
            >
              <Print fontSize="small" />
            </IconButton>
            <IconButton
              size="small"
              onClick={() => handlePixOrder(order)}
              sx={{
                color: "#14b8a6",
                "&:hover": { backgroundColor: "#f0fdfa", color: "#0d9488" },
              }}
              title="Gerar PIX"
            >
              <svg
                width="18"
                height="18"
                viewBox="0 0 18 18"
                fill="currentColor"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path d="M11.917 11.71a2.046 2.046 0 0 1-1.454-.602l-2.1-2.1a.4.4 0 0 0-.551 0l-2.108 2.108a2.044 2.044 0 0 1-1.454.602h-.414l2.66 2.66c.83.83 2.177.83 3.007 0l2.667-2.668h-.253zM4.25 4.282c.55 0 1.066.214 1.454.602l2.108 2.108a.39.39 0 0 0 .552 0l2.1-2.1a2.044 2.044 0 0 1 1.453-.602h.253L9.503 1.623a2.127 2.127 0 0 0-3.007 0l-2.66 2.66h.414z" />
                <path d="m14.377 6.496-1.612-1.612a.307.307 0 0 1-.114.023h-.733c-.379 0-.75.154-1.017.422l-2.1 2.1a1.005 1.005 0 0 1-1.425 0L5.268 5.32a1.448 1.448 0 0 0-1.018-.422h-.9a.306.306 0 0 1-.109-.021L1.623 6.496c-.83.83-.83 2.177 0 3.008l1.618 1.618a.305.305 0 0 1 .108-.022h.901c.38 0 .75-.153 1.018-.421L7.375 8.57a1.034 1.034 0 0 1 1.426 0l2.1 2.1c.267.268.638.421 1.017.421h.733c.04 0 .079.01.114.024l1.612-1.612c.83-.83.83-2.178 0-3.008z" />
              </svg>
            </IconButton>
          </Box>
        );
      },
    },
    {
      field: "createDate",
      headerName: "Data",
      width: 120,
      valueFormatter: (value) => {
        if (!value) return "";
        return formatDate(String(value));
      },
    },
    {
      field: "orderId",
      headerName: "N.Pedido",
      width: 130,
      headerAlign: "left",
    },
    {
      field: "status",
      headerName: "Situação",
      width: 130,
      renderCell: (params) => {
        const status = params.value as string;
        return (
          <span
            className={`px-2 py-1 rounded-md text-xs font-bold uppercase ${getStatusColor(
              status
            )}`}
          >
            {status}
          </span>
        );
      },
    },
    {
      field: "customerId",
      headerName: "Cód.Cliente",
      width: 120,
      headerAlign: "left",
    },
    {
      field: "customerName",
      headerName: "Cliente",
      width: 300,
      flex: 1,
    },
    {
      field: "orderValue",
      headerName: "Valor",
      width: 130,
      headerAlign: "right",
      align: "right",
      valueFormatter: (value) => formatCurrency(value as number),
    },
  ];

  return (
    // <div className="space-y-6">
    <div>
      {/* Header */}
      <header>
        <h2 className="text-2xl font-black text-[#002147] mb-2">
          Consulta de pedidos
        </h2>
      </header>

      {/* Filtros */}
      <div className="bg-white p-6 mb-6 rounded-2xl border border-slate-100 shadow-sm">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {/* Filial de venda */}
          <div>
            <Label htmlFor="store">Filial de venda</Label>
            <CustomAutocomplete
              id="store"
              options={stores.map((store) => ({
                value: store.id,
                label: store.shortName,
              }))}
              value={selectedStore}
              onValueChange={setSelectedStore}
              placeholder="Selecione a filial de venda..."
            />
          </div>

          {/* Número do pedido */}
          <div>
            <Label htmlFor="orderId">Número do pedido</Label>
            <Input
              id="orderId"
              type="text"
              value={orderId}
              onChange={(e) => setOrderId(e.target.value)}
              placeholder="Informe o número do pedido"
            />
          </div>

          {/* Data inicial */}
          <div>
            <Label htmlFor="startDate">Data inicial</Label>
            <DateInput
              id="startDate"
              value={startDate}
              onChange={(e) => setStartDate(e.target.value)}
            />
          </div>

          {/* Data final */}
          <div>
            <Label htmlFor="endDate">Data final</Label>
            <DateInput
              id="endDate"
              value={endDate}
              onChange={(e) => setEndDate(e.target.value)}
            />
          </div>

          {/* CPF/CNPJ */}
          <div>
            <Label htmlFor="document">CPF / CNPJ</Label>
            <Input
              id="document"
              type="text"
              value={document}
              onChange={(e) => setDocument(e.target.value)}
              placeholder="Informe o CPF ou CNPJ do cliente"
            />
          </div>

          {/* Nome do cliente */}
          <div>
            <Label htmlFor="customerName">Nome do cliente</Label>
            <Input
              id="customerName"
              type="text"
              value={customerName}
              onChange={(e) => setCustomerName(e.target.value)}
              placeholder="Informe o nome ou razão social do cliente"
            />
          </div>
        </div>

        {/* Botões de Ação */}
        <div className="mt-6 flex gap-3">
          <Button onClick={handleSearch} disabled={loading} className="flex-1">
            {loading ? "Pesquisando..." : "Pesquisar"}
          </Button>
          <Button
            onClick={handleClear}
            disabled={loading}
            variant="outline"
            className="flex-1"
          >
            Limpar
          </Button>
        </div>
      </div>

      {/* Tabela de Pedidos */}
      {error && (
        <div className="bg-red-50 border border-red-200 rounded-2xl p-4">
          <p className="text-red-600 text-sm font-medium">{error}</p>
        </div>
      )}

      {loading && (
        <div className="flex items-center justify-center py-20">
          <LoadingSpinner />
        </div>
      )}

      {!loading && orders.length > 0 && (
        <div className="bg-white rounded-2xl border border-slate-100 overflow-hidden">
          <div className="p-5 border-b border-slate-50">
            <h3 className="text-[9px] font-black text-slate-400 uppercase tracking-[0.2em]">
              Pedidos encontrados: {orders.length}
            </h3>
          </div>
          <Box sx={{ height: 600, width: "100%" }}>
            <DataGridPremium
              rows={orders}
              columns={columns}
              getRowId={(row) => row.orderId}
              disableRowSelectionOnClick
              hideFooter
              sx={{
                border: "none",
                "& .MuiDataGrid-columnHeaders": {
                  backgroundColor: "#f8fafc",
                  borderBottom: "1px solid #e2e8f0",
                  "& .MuiDataGrid-columnHeader": {
                    fontSize: "9px",
                    fontWeight: 900,
                    color: "#94a3b8",
                    textTransform: "uppercase",
                    letterSpacing: "0.2em",
                    padding: "12px 16px",
                    "& .MuiDataGrid-columnHeaderTitle": {
                      fontWeight: 900,
                    },
                  },
                },
                "& .MuiDataGrid-row": {
                  "&:hover": {
                    backgroundColor: "#f8fafc",
                  },
                },
                "& .MuiDataGrid-cell": {
                  fontSize: "12px",
                  color: "#475569",
                  padding: "16px",
                  borderBottom: "1px solid #f1f5f9",
                  "&:focus": {
                    outline: "none",
                  },
                  "&:focus-within": {
                    outline: "none",
                  },
                },
                "& .MuiDataGrid-cell[data-field='orderId']": {
                  fontWeight: 700,
                  color: "#0f172a",
                },
                "& .MuiDataGrid-cell[data-field='orderValue']": {
                  fontWeight: 700,
                  color: "#0f172a",
                },
                "& .MuiDataGrid-cell[data-field='createDate']": {
                  color: "#64748b",
                },
                "& .MuiDataGrid-cell[data-field='customerId']": {
                  color: "#64748b",
                },
                "& .MuiDataGrid-cell[data-field='customerName']": {
                  color: "#64748b",
                },
                "& .MuiDataGrid-virtualScroller": {
                  overflowY: "auto",
                },
                "& .MuiDataGrid-virtualScrollerContent": {
                  height: "auto !important",
                },
              }}
            />
          </Box>
        </div>
      )}

      {!loading && orders.length === 0 && !error && (
        <div className="bg-white rounded-2xl border border-slate-100 overflow-hidden">
          <NoData
            title="Nenhum pedido encontrado"
            description="Não foram encontrados pedidos com os filtros informados. Tente ajustar os parâmetros de pesquisa ou verifique se há pedidos no período selecionado."
            icon="folder"
            variant="outline"
          />
        </div>
      )}

      {/* Modal de Itens do Pedido */}
      <OrderItemsModal
        isOpen={showOrderItems}
        onClose={handleCloseOrderItemsModal}
        orderId={selectedOrder?.orderId || 0}
        orderItems={orderItems}
      />

      {/* Dialog de Confirmação/Informação */}
      <ConfirmDialog
        isOpen={showConfirmDialog}
        onClose={() => setShowConfirmDialog(false)}
        onConfirm={() => setShowConfirmDialog(false)}
        type={confirmDialogType}
        title={confirmDialogTitle}
        message={confirmDialogMessage}
        confirmText="OK"
        showWarning={
          confirmDialogType === "warning" || confirmDialogType === "error"
        }
      />

      {/* Dialog de Carrinho Carregado */}
      <ConfirmDialog
        isOpen={showCartLoadedDialog}
        onClose={() => {
          setShowCartLoadedDialog(false);
          // Navegar para página de produtos após fechar o dialog
          setTimeout(() => {
            window.location.href = "/#/sales/home";
          }, 100);
        }}
        onConfirm={() => {
          setShowCartLoadedDialog(false);
          // Navegar para página de produtos após confirmar
          setTimeout(() => {
            window.location.href = "/#/sales/home";
          }, 100);
        }}
        type="success"
        title="Carrinho carregado"
        message="Os dados do carrinho foram carregados com sucesso!\n\nVocê será redirecionado para a página de produtos."
        confirmText="OK"
        showWarning={false}
      />

      {/* Dialog de Seleção de Modelo de Impressão */}
      {orderToPrint && (
        <PrintOrderDialog
          isOpen={showPrintDialog}
          onClose={() => {
            setShowPrintDialog(false);
            setOrderToPrint(null);
          }}
          onConfirm={handleConfirmPrint}
          orderId={orderToPrint.orderId}
        />
      )}

      {/* Dialog de Recebimento PIX */}
      {orderForPix && (
        <ReceivePixDialog
          isOpen={showReceivePix}
          onClose={() => {
            setShowReceivePix(false);
            setOrderForPix(null);
            setShowQrCode(false);
            setQrCodePix("");
            setPixValue(0);
          }}
          onConfirm={handleConfirmPix}
          orderId={orderForPix.orderId}
          customerName={orderForPix.customerName}
          orderValue={orderForPix.orderValue}
          showQrCode={showQrCode}
          qrCodeValue={qrCodePix}
          pixValue={pixValue}
          processing={processingPix}
        />
      )}

      {/* Modal do Viewer de Comprovante PIX */}
      {showPixReceipt && pixReceiptUrl && (
        <div className="fixed inset-0 z-[300] flex items-center justify-center bg-black/80">
          <div className="relative bg-white rounded-3xl shadow-2xl w-[95%] h-[90vh] max-w-7xl overflow-hidden flex flex-col">
            {/* Header */}
            <div className="p-6 bg-[#002147] text-white rounded-t-3xl relative overflow-hidden flex items-center justify-between">
              <div>
                <h3 className="text-xl font-black">Recibo de PIX</h3>
                <p className="text-xs text-blue-400 font-bold uppercase tracking-wider mt-0.5">
                  Comprovante de pagamento
                </p>
              </div>
              <button
                onClick={() => {
                  setShowPixReceipt(false);
                  setPixReceiptUrl("");
                }}
                className="p-2 text-white/70 hover:text-white hover:bg-white/10 rounded-lg transition-colors"
              >
                <svg
                  className="w-6 h-6"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M6 18L18 6M6 6l12 12"
                  />
                </svg>
              </button>
            </div>

            {/* Viewer Content */}
            <div className="flex-1 overflow-hidden">
              <StimulsoftViewer
                requestUrl={pixReceiptUrl}
                action="InitViewerComprovantePix"
                width="100%"
                height="100%"
                onClose={() => {
                  setShowPixReceipt(false);
                  setPixReceiptUrl("");
                }}
              />
            </div>
          </div>
        </div>
      )}

      {/* Modal do Viewer de Impressão */}
      {showPrintViewer && printUrl && (
        <div className="fixed inset-0 z-[300] flex items-center justify-center bg-black/80">
          <div className="relative bg-white rounded-3xl shadow-2xl w-[95%] h-[90vh] max-w-7xl overflow-hidden flex flex-col">
            {/* Header */}
            <div className="p-6 bg-[#002147] text-white rounded-t-3xl relative overflow-hidden flex items-center justify-between">
              <div>
                <h3 className="text-xl font-black">Pedido de venda</h3>
                <p className="text-xs text-blue-400 font-bold uppercase tracking-wider mt-0.5">
                  Visualização e Impressão
                </p>
              </div>
              <button
                onClick={() => {
                  setShowPrintViewer(false);
                  setPrintUrl("");
                }}
                className="p-2 text-white/70 hover:text-white hover:bg-white/10 rounded-lg transition-colors"
              >
                <svg
                  className="w-6 h-6"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M6 18L18 6M6 6l12 12"
                  />
                </svg>
              </button>
            </div>

            {/* Viewer Content */}
            <div className="flex-1 overflow-hidden">
              <StimulsoftViewer
                requestUrl={printUrl}
                action="InitViewerOrder"
                orderId={printOrderId}
                model={printModel}
                width="100%"
                height="100%"
                onClose={() => {
                  setShowPrintViewer(false);
                  setPrintUrl("");
                  setPrintOrderId(undefined);
                  setPrintModel(undefined);
                }}
              />
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default OrdersView;