"use client";

import { usePermissoes } from "@/lib/permissoes-do-usuario";
import { useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { getSupabaseClient } from "@/lib/supabase";
import { getCompanyContext } from "@/lib/company-context";
import { resolveCreatorNamesBatch } from "@/lib/employee-utils";
import { ClipboardList, Search, Eye, LayoutGrid, List, AlertCircle, Calendar, ClipboardCheck, CalendarX, CalendarClock, CalendarCheck, CalendarOff, LayoutList, Tag, Loader2, MoreHorizontal, X, Check, ChevronRight } from "lucide-react";
import { CustomSelect } from "@/components/ui/custom-select";
import { CustomDatePicker } from "@/components/ui/custom-date-picker";
import { Order, OrderStatus } from "@/types/orders";
import { PageHeader } from "@/components/ui/page-header";
import { Input } from "@/components/ui/input";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { StatusPageCustomizationModal } from "@/components/StatusPageCustomizationModal";
import { printOrderLabel, type OrderLabelPayload } from "@/lib/orders/order-label-print";
import { OrderLabelPrintModal } from "@/components/orders/order-label-print-modal";
import { ProtocoloPrintModal } from "@/components/orders/protocolo-print-modal";
import { formatDateBr, parseDateValue } from "@/utils/formatters";

type OrderQuoteFragment = {
  id: string;
  number: number;
  title?: string | null;
  internal_notes?: string | null;
  delivery_date?: string | null;
};

type OrderWithExtras = Omit<Order, "quotes" | "clients"> & {
  quotes?: OrderQuoteFragment | null;
  clients?: {
    id?: string;
    name: string;
    company_name?: string | null;
    is_deleted?: boolean | null;
    active?: boolean | null;
  } | null;
};

const statusLabel: Record<OrderStatus, string> = {
  pending_production: "Aguardando Produção",
  in_production: "Em Produção",
  finished: "Finalizado",
  delivered: "Entregue",
  canceled: "Cancelado",
};

const statusOptions: Array<{ value: OrderStatus; label: string }> = [
  { value: "pending_production", label: "Aguardando Produção" },
  { value: "in_production", label: "Em Produção" },
  { value: "finished", label: "Finalizado" },
  { value: "delivered", label: "Entregue" },
  { value: "canceled", label: "Cancelado" },
];

function getOrderStatusBadgeClass(status: OrderStatus) {
  if (status === "pending_production") {
    return "bg-indigo-50 text-indigo-700 border-indigo-100";
  }
  if (status === "finished" || status === "delivered") {
    return "bg-emerald-50 text-emerald-700 border-emerald-200";
  }
  if (status === "canceled") {
    return "bg-red-50 text-red-600 border-red-200";
  }
  if (status === "in_production") {
    return "bg-sky-50 text-sky-700 border-sky-200";
  }
  return "bg-gray-50 text-gray-600 border-gray-200";
}

function getClientAvatarClass(name: string) {
  return ["bg-blue-600", "bg-indigo-600", "bg-purple-600", "bg-teal-600"][
    ((name?.charCodeAt(0) || 0) + (name?.length || 0)) % 4
  ];
}

function getCompactTopBadgeClass(status: OrderStatus) {
  return `inline-flex items-center justify-center whitespace-nowrap rounded-md border px-2 py-1 text-[9px] font-bold uppercase tracking-wide leading-none ${getOrderStatusBadgeClass(
    status
  )}`;
}

function formatMoney(value: number) {
  return new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }).format(value || 0);
}

function formatDate(value: string | null | undefined) {
  return formatDateBr(value) || "-";
}

function isPdvOrder(order: Pick<OrderWithExtras, "quotes" | "internal_notes">) {
  const quoteInternalNotes = String(order.quotes?.internal_notes || "").toLowerCase();
  const quoteTitle = String(order.quotes?.title || "").toLowerCase();
  const orderInternalNotes = String(order.internal_notes || "").toLowerCase();
  return (
    quoteInternalNotes.includes("origem:pdv") ||
    quoteTitle.includes("venda pdv") ||
    orderInternalNotes.includes("pdv")
  );
}

function isCatalogOrder(order: Pick<OrderWithExtras, "quotes" | "internal_notes">) {
  const quoteInternalNotes = String(order.quotes?.internal_notes || "").toLowerCase();
  const quoteTitle = String(order.quotes?.title || "").toLowerCase();
  const orderInternalNotes = String(order.internal_notes || "").toLowerCase();
  return (
    quoteInternalNotes.includes("origem:catalogo") ||
    quoteTitle.includes("pedido do catálogo") ||
    orderInternalNotes.includes("origem:catalogo")
  );
}

function isConcludedOrder(status: OrderStatus) {
  return status === "finished" || status === "delivered" || status === "canceled";
}

function isDeadlineActionableOrder(order: OrderWithExtras) {
  return !isPdvOrder(order) && !isConcludedOrder(order.status);
}

type PeriodFilterType = "all" | "today" | "week" | "month" | "custom";

function getPeriodDates(type: PeriodFilterType, start?: string, end?: string): { startDate: Date | null; endDate: Date | null } {
  const now = new Date();

  if (type === "today") {
    const startDate = new Date(now.getFullYear(), now.getMonth(), now.getDate());
    const endDate = new Date(startDate.getTime() + 24 * 60 * 60 * 1000);
    return { startDate, endDate };
  }

  if (type === "week") {
    const day = now.getDay();
    const diff = now.getDate() - day + (day === 0 ? -6 : 1);
    const startDate = new Date(now.getFullYear(), now.getMonth(), diff);
    const endDate = new Date(startDate.getTime() + 7 * 24 * 60 * 60 * 1000);
    return { startDate, endDate };
  }

  if (type === "month") {
    const startDate = new Date(now.getFullYear(), now.getMonth(), 1);
    const endDate = new Date(now.getFullYear(), now.getMonth() + 1, 1);
    return { startDate, endDate };
  }

  if (type === "custom" && start && end) {
    const startDate = new Date(`${start}T00:00:00`);
    const endDate = new Date(`${end}T23:59:59`);
    return { startDate, endDate };
  }

  return { startDate: null, endDate: null };
}

function isOrderWithinPeriod(order: Pick<OrderWithExtras, "created_at">, periodType: PeriodFilterType, customStart?: string, customEnd?: string) {
  const { startDate, endDate } = getPeriodDates(periodType, customStart, customEnd);
  if (!startDate || !endDate) return true;

  const createdAt = new Date(order.created_at);
  return createdAt >= startDate && createdAt <= endDate;
}

function DeliveryBadge({
  dateStr,
  status,
  isPdv,
}: {
  dateStr?: string | null;
  status: OrderStatus;
  isPdv: boolean;
}) {
  if (isPdv) return null;
  if (!dateStr) return null;
  const delivery = parseDateValue(dateStr);
  if (!delivery) return null;
  delivery.setHours(0, 0, 0, 0);
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  const diffDays = Math.round((delivery.getTime() - today.getTime()) / (1000 * 3600 * 24));
  let color = "text-gray-600 bg-gray-50 border-gray-200";
  let statusText = "";

  if (status === "canceled") {
    statusText = "Cancelado";
    color = "text-gray-400 bg-gray-50 border-gray-100";
  } else if (status === "finished" || status === "delivered") {
    statusText = "No Prazo";
    if (diffDays < 0) statusText = "Concluído com Atraso";
    color = "text-emerald-700 bg-emerald-50 border-emerald-200";
  } else if (diffDays < 0) {
    statusText = "Atrasado";
    color = "text-rose-700 bg-rose-50 border-rose-200";
  } else if (diffDays === 0) {
    statusText = "Vence Hoje";
    color = "text-amber-700 bg-amber-50 border-amber-200";
  } else if (diffDays === 1) {
    statusText = "Amanhã";
    color = "text-sky-700 bg-sky-50 border-sky-200";
  } else {
    statusText = `em ${diffDays}d`;
    color = "text-gray-600 bg-gray-50 border-gray-200";
  }

  return (
    <div className="mt-1.5 flex items-center flex-wrap gap-1.5 px-0.5">
       <span className="text-[10px] font-semibold uppercase tracking-wider text-gray-400">Prazo:</span>
       <span className="text-[11px] font-medium text-gray-700">{formatDateBr(dateStr)}</span>
       <span className={`inline-flex whitespace-nowrap rounded px-1.5 py-0.5 text-[8px] font-bold uppercase tracking-wider border ${color}`}>
         {statusText}
       </span>
    </div>
  );
}

function OrderStatusQuickMenu({
  orderNumber,
  currentStatus,
  updating,
  variant = "card",
  onClose,
  onStatusChange,
}: {
  orderNumber: number;
  currentStatus: OrderStatus;
  updating: boolean;
  variant?: "card" | "list";
  onClose: () => void;
  onStatusChange: (status: OrderStatus) => void;
}) {
  const isListVariant = variant === "list";

  if (isListVariant) {
    return (
      <div className="absolute inset-0 z-20 rounded-[inherit] border border-gray-100 bg-white p-3 shadow-sm">
        <div className="flex h-full items-center gap-3">
          <div className="w-[160px] shrink-0">
            <p className="text-[15px] font-semibold leading-tight text-gray-900">
              Alterar status
            </p>
            <h4 className="mt-0.5 text-[1.1rem] font-bold leading-none text-indigo-700">
              Pedido #{orderNumber}
            </h4>
          </div>

          <div className="grid flex-1 grid-cols-5 items-stretch gap-2">
            {statusOptions.map((option) => {
              const isCurrent = option.value === currentStatus;
              return (
                <button
                  key={option.value}
                  type="button"
                  onClick={() => onStatusChange(option.value)}
                  disabled={updating || isCurrent}
                  className={`flex h-10 min-w-0 items-center justify-between gap-2 rounded-lg border px-2.5 text-left transition-all ${
                    isCurrent
                      ? "border-indigo-200 bg-indigo-50 text-indigo-700"
                      : "border-gray-200 bg-white text-gray-900 hover:border-indigo-200 hover:bg-indigo-50/40"
                  } disabled:cursor-not-allowed disabled:opacity-70`}
                >
                  <div className="flex min-w-0 items-center gap-2">
                    <span className={`h-2 w-2 shrink-0 rounded-full border ${getOrderStatusBadgeClass(option.value)}`} />
                    <span className="truncate text-[12px] font-semibold leading-none">{option.label}</span>
                  </div>
                  {isCurrent ? (
                    <span className="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-white text-indigo-700 shadow-sm">
                      <Check size={12} />
                    </span>
                  ) : (
                    <span className="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-gray-100 text-gray-400">
                      <ChevronRight size={12} />
                    </span>
                  )}
                </button>
              );
            })}
          </div>

          <button
            type="button"
            onClick={onClose}
            disabled={updating}
            className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-gray-200 bg-white text-gray-400 transition-colors hover:bg-gray-50 hover:text-gray-700 disabled:opacity-60"
            title="Fechar menu de status"
          >
            <X size={12} />
          </button>
        </div>

        {updating && (
          <div className="mt-1.5 text-[10px] text-indigo-700">
            <span className="inline-flex items-center gap-1 font-semibold">
              <Loader2 size={11} className="animate-spin" />
              Atualizando status...
            </span>
          </div>
        )}
      </div>
    );
  }

  return (
    <div className="absolute inset-0 z-20 flex flex-col rounded-[inherit] border border-gray-100 bg-white p-3.5 shadow-sm">
      <div className="mb-2.5 flex items-start justify-between gap-3">
        <div className="min-w-0">
          <p className="text-[17px] font-semibold leading-tight text-gray-900">
            Alterar status
          </p>
          <h4 className="mt-0.5 text-[1.35rem] font-bold leading-none text-indigo-700">
            Pedido #{orderNumber}
          </h4>
        </div>
        <button
          type="button"
          onClick={onClose}
          disabled={updating}
          className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-400 transition-colors hover:bg-gray-50 hover:text-gray-700 disabled:opacity-60"
          title="Fechar menu de status"
        >
          <X size={15} />
        </button>
      </div>

      <div className="grid gap-2">
        {statusOptions.map((option) => {
          const isCurrent = option.value === currentStatus;
          return (
            <button
              key={option.value}
              type="button"
              onClick={() => onStatusChange(option.value)}
              disabled={updating || isCurrent}
              className={`flex items-center justify-between gap-2 rounded-xl border text-left transition-all ${
                isCurrent
                  ? "border-indigo-200 bg-indigo-50 text-indigo-700"
                  : "border-gray-200 bg-white text-gray-900 hover:border-indigo-200 hover:bg-indigo-50/40"
              } px-3 py-2 disabled:cursor-not-allowed disabled:opacity-70`}
            >
              <div className="flex min-w-0 items-center gap-2.5">
                <span className={`h-2.5 w-2.5 shrink-0 rounded-full border ${getOrderStatusBadgeClass(option.value)}`} />
                <span className="truncate text-[14px] font-semibold leading-tight">{option.label}</span>
              </div>
              {isCurrent ? (
                <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-white text-indigo-700 shadow-sm">
                  <Check size={14} />
                </span>
              ) : (
                <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-gray-100 text-gray-400">
                  <ChevronRight size={14} />
                </span>
              )}
            </button>
          );
        })}
      </div>

      <div className="mt-2 min-h-4 text-[11px] text-gray-500">
        {updating && (
          <span className="inline-flex items-center gap-1.5 font-semibold text-indigo-700">
            <Loader2 size={13} className="animate-spin" />
            Atualizando status...
          </span>
        )}
      </div>
    </div>
  );
}

export default function OrdersPage() {
  const { pode } = usePermissoes();
  /* Avancar o estagio de um pedido e a acao do chao de fabrica. */
  const podeMudarStatus = pode("orders.write");

  const [orders, setOrders] = useState<OrderWithExtras[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState("");
  const [statusFilter, setStatusFilter] = useState<OrderStatus | "all">("all");
  const [financialFilter, setFinancialFilter] = useState<"all" | "unpaid" | "partial" | "paid">("all");
  const [deadlineFilter, setDeadlineFilter] = useState<"all" | "late" | "today" | "ontime" | "none">("all");
  const [periodType, setPeriodType] = useState<PeriodFilterType>("all");
  const [customStart, setCustomStart] = useState(() => {
    const now = new Date();
    const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);
    return `${firstDay.getFullYear()}-${String(firstDay.getMonth() + 1).padStart(2, "0")}-01`;
  });
  const [customEnd, setCustomEnd] = useState(() => {
    const now = new Date();
    return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
  });
  const [appliedCustomDates, setAppliedCustomDates] = useState({ start: "", end: "" });
  const [sortOrder, setSortOrder] = useState<"desc" | "asc">("desc");
  const [originTab, setOriginTab] = useState<"orders" | "pdv">("orders");
  const [createdByNames, setCreatedByNames] = useState<Record<string, string>>({});
  const [viewMode, setViewMode] = useState<"list" | "grid">("grid");
  const [currentPage, setCurrentPage] = useState(1);
  const [cancelingOrderId, setCancelingOrderId] = useState<string | null>(null);
  const [updatingOrderId, setUpdatingOrderId] = useState<string | null>(null);
  const [statusMenuOrderId, setStatusMenuOrderId] = useState<string | null>(null);
  const [printingLabelOrderId, setPrintingLabelOrderId] = useState<string | null>(null);
  const [labelModalOrder, setLabelModalOrder] = useState<OrderWithExtras | null>(null);
  const [protocoloModalOrder, setProtocoloModalOrder] = useState<OrderWithExtras | null>(null);
  const [cancelModalOrder, setCancelModalOrder] = useState<OrderWithExtras | null>(null);
  const [feedbackModal, setFeedbackModal] = useState<{ title: string; message: string } | null>(null);

  async function fetchOrders() {
    setLoading(true);
    try {
      const supabase = getSupabaseClient();
      const {
        data: { user },
      } = await supabase.auth.getUser();
      if (!user) return;
      const ctx = await getCompanyContext(supabase, user);
      const tenantIds = ctx.tenantIds?.length ? ctx.tenantIds : [user.id];

      // Busca pedidos
      // Tentamos buscar sem o join primeiro para garantir que a tabela existe e é acessível
      // Depois populamos os clientes manualmente para evitar erros de RLS silenciosos no join
      const { data: ordersData, error: ordersError } = await supabase
        .from("orders")
        .select("*, quotes(id, number, title, internal_notes, delivery_date)")
        .in("user_id", tenantIds)
        .order("created_at", { ascending: false });

      if (ordersError) throw ordersError;

      type OrderFromDb = Order & {
        quotes: OrderQuoteFragment[] | OrderQuoteFragment | null;
      };

      let finalOrders: OrderWithExtras[] = ((ordersData ?? []) as OrderFromDb[]).map((o) => {
        const q = o.quotes;
        return {
          ...o,
          quotes: Array.isArray(q) && q.length > 0 ? q[0] : Array.isArray(q) ? null : q,
        };
      });

      // Popula clientes manualmente
      if (finalOrders.length > 0) {
        const clientIds = Array.from(new Set(finalOrders.map((o) => o.client_id).filter(Boolean)));
        
        if (clientIds.length > 0) {
          const { data: clientsData, error: clientsError } = await supabase
            .from("clients")
            .select("id, name, company_name, is_deleted, active")
            .in("id", clientIds)
            .in("user_id", tenantIds);
            
          if (!clientsError && clientsData) {
            type ClientSummary = {
              id: string;
              name: string;
              company_name: string | null;
              is_deleted?: boolean | null;
              active?: boolean | null;
            };

            const clientsMap = (clientsData as ClientSummary[]).reduce(
              (acc, client) => {
                acc[client.id] = client;
                return acc;
              },
              {} as Record<string, ClientSummary>
            );

            finalOrders = finalOrders.map((order) => ({
              ...order,
              clients: clientsMap[order.client_id] || null,
            }));
          } else if (clientsError) {
            console.error("Erro ao buscar clientes:", clientsError);
          }
        }
      }

      setOrders(finalOrders);
      
      const createdIds = Array.from(new Set(finalOrders.map((o) => o.created_by).filter((id): id is string => Boolean(id))));
      if (createdIds.length > 0) {
        // Primeiro criar um mapa para verificar se created_by é igual ao user_id (dono da empresa)
        const ownerMap: Record<string, boolean> = {};
        for (const o of finalOrders) {
          if (o.created_by && o.created_by === o.user_id) {
            ownerMap[o.created_by] = true;
          }
        }
        
        // Usa utilitário centralizado para buscar nomes dos criadores
        const userMap: Record<string, { isOwner?: boolean }> = {};
        for (const id of createdIds) {
          userMap[id] = { isOwner: ownerMap[id] };
        }
        
        const finalMap = await resolveCreatorNamesBatch(supabase, userMap);
        
        console.log("Mapa final de nomes:", finalMap);
        setCreatedByNames(finalMap);
      } else {
        setCreatedByNames({});
      }
    } catch (err) {
      console.error("Erro ao buscar pedidos:", err);
      try {
        console.error("Detalhes do erro:", JSON.stringify(err));
      } catch {
      }
    } finally {
      setLoading(false);
    }
  }

  async function handlePrintOrderLabel(config: any) {
    const order = labelModalOrder;
    if (!order) return;
    setPrintingLabelOrderId(order.id);
    try {
      const supabase = getSupabaseClient();
      const {
        data: { user },
      } = await supabase.auth.getUser();
      if (!user) throw new Error("Sessao expirada. Entre novamente.");

      const ctx = await getCompanyContext(supabase, user);
      const tenantIds = ctx.tenantIds?.length ? ctx.tenantIds : [user.id];

      const [{ data: clientData, error: clientError }, { data: profileData, error: profileError }] = await Promise.all([
        supabase
          .from("clients")
          .select("name, company_name, document, phone, whatsapp, address_street, address_number, address_complement, address_neighborhood, address_city, address_state, address_zip, notes")
          .eq("id", order.client_id)
          .in("user_id", tenantIds)
          .maybeSingle(),
        supabase
          .from("profiles")
          .select("store_name, catalog_name, logo_url, catalog_logo_url, address, company_phone, phone, company_whatsapp, whatsapp, cnpj")
          .eq("id", order.user_id)
          .maybeSingle(),
      ]);

      if (clientError) throw clientError;
      if (profileError) throw profileError;

      const payload: OrderLabelPayload = {
        company: {
          name: profileData?.catalog_name || profileData?.store_name || "Empresa",
          logoUrl: profileData?.logo_url || profileData?.catalog_logo_url || null,
          phone: profileData?.company_phone || profileData?.phone || null,
          whatsapp: profileData?.company_whatsapp || profileData?.whatsapp || null,
          address: profileData?.address || null,
          cnpj: (profileData as any)?.cnpj || null,
        },
        order: {
          id: order.id,
          number: order.number,
          createdAt: order.created_at,
          totalAmount: order.total_amount,
          paidAmount: order.paid_amount,
          financialStatus: order.financial_status,
          status: order.status,
          notes: order.notes || order.internal_notes || null,
        },
        client: {
          name: clientData?.name || order.clients?.name || null,
          companyName: clientData?.company_name || order.clients?.company_name || null,
          phone: clientData?.phone || null,
          whatsapp: clientData?.whatsapp || null,
          document: clientData?.document || null,
          addressStreet: clientData?.address_street || null,
          addressNumber: clientData?.address_number || null,
          addressComplement: clientData?.address_complement || null,
          addressNeighborhood: clientData?.address_neighborhood || null,
          addressCity: clientData?.address_city || null,
          addressState: clientData?.address_state || null,
          addressZip: clientData?.address_zip || null,
          notes: clientData?.notes || null,
        },
        quote: {
          deliveryDate: order.delivery_date || order.quotes?.delivery_date || null,
        },
      };

      await printOrderLabel(payload, {
        variant: config.variant,
        copies: config.copies,
      });
      setLabelModalOrder(null);
    } catch (error) {
      const message = error instanceof Error ? error.message : "Falha ao gerar etiqueta do pedido.";
      alert(message);
    } finally {
      setPrintingLabelOrderId(null);
    }
  }

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

  function openCancelModal(order: OrderWithExtras) {
    if (!isPdvOrder(order)) return;
    if (order.status === "canceled") return;
    setCancelModalOrder(order);
  }

  async function cancelPdvSale(order: OrderWithExtras) {
    if (!isPdvOrder(order)) return;
    if (order.status === "canceled") return;
    setCancelingOrderId(order.id);
    try {
      const response = await fetch("/api/pdv/cancel-sale", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ order_id: order.id }),
      });
      const result = (await response.json().catch(() => null)) as
        | {
            error?: string;
            reversed_payments?: number;
          }
        | null;
      if (!response.ok) {
        throw new Error(result?.error || "Falha ao cancelar venda PDV.");
      }
      const reversedCount = Number(result?.reversed_payments || 0);
      await fetchOrders();
      setCancelModalOrder(null);
      if (reversedCount > 0) {
        setFeedbackModal({
          title: "Venda cancelada",
          message: `A venda PDV foi cancelada e ${reversedCount} pagamento(s) foram estornados.`,
        });
      } else {
        setFeedbackModal({
          title: "Venda cancelada",
          message: "A venda PDV foi cancelada com sucesso.",
        });
      }
    } catch (error) {
      const message = error instanceof Error ? error.message : "Falha ao cancelar venda PDV.";
      setFeedbackModal({
        title: "Falha no cancelamento",
        message,
      });
    } finally {
      setCancelingOrderId(null);
    }
  }

  async function handleInlineStatusChange(order: OrderWithExtras, newStatus: OrderStatus) {
    if (newStatus === order.status) return;
    if (isPdvOrder(order)) {
      setFeedbackModal({
        title: "Alteração indisponível",
        message: "Vendas do PDV não possuem fluxo de produção e não permitem alteração manual de status.",
      });
      return;
    }

    if (order.status === "finished" && newStatus === "pending_production") {
      if (!confirm("Tem certeza que deseja voltar o status para Aguardando Produção?")) return;
    }

    setUpdatingOrderId(order.id);
    try {
      const res = await fetch("/api/orders/status", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ id: order.id, status: newStatus, source: "manual" }),
      });

      const json = (await res.json().catch(() => null)) as
        | {
            error?: string;
            order?: {
              status?: OrderStatus;
            };
          }
        | null;

      if (!res.ok) {
        throw new Error(json?.error || "Erro ao atualizar status do pedido.");
      }

      const resolvedStatus = (json?.order?.status || newStatus) as OrderStatus;
      setOrders((current) =>
        current.map((currentOrder) =>
          currentOrder.id === order.id
            ? {
                ...currentOrder,
                status: resolvedStatus,
              }
            : currentOrder
        )
      );
      setStatusMenuOrderId(null);
    } catch (err) {
      console.error("Erro ao atualizar status:", err);
      setFeedbackModal({
        title: "Erro ao atualizar status",
        message: err instanceof Error ? err.message : "Erro ao atualizar status do pedido.",
      });
    } finally {
      setUpdatingOrderId(null);
    }
  }

  // Define counts ignoring the deadlineFilter so the KPIs reflect the rest of the filters
  const deadlineKpis = useMemo(() => {
    let late = 0;
    let today = 0;
    let ontime = 0;
    let none = 0;
    let all = 0;

    const term = searchTerm.trim().toLowerCase();
    const todayDate = new Date();
    todayDate.setHours(0, 0, 0, 0);

    const baseOrders = orders.filter((o) => {
      const pdvOrder = isPdvOrder(o);
      if (originTab === "pdv" && !pdvOrder) return false;
      if (originTab === "orders" && pdvOrder) return false;
      if (statusFilter !== "all" && o.status !== statusFilter) return false;
      if (!isOrderWithinPeriod(o, periodType, appliedCustomDates.start, appliedCustomDates.end)) return false;

      const total = o.total_amount || 0;
      const paid = o.paid_amount || 0;
      const missing = Math.max(0, total - paid);
      const isFullyPaid = missing <= 0.0001;
      const isUnpaid = paid <= 0.0001;

      if (financialFilter === "paid" && !isFullyPaid) return false;
      if (financialFilter === "unpaid" && !isUnpaid) return false;
      if (financialFilter === "partial" && (isFullyPaid || isUnpaid)) return false;

      if (!term) return true;
      const clientName = o.clients?.company_name 
        ? `${o.clients.company_name} ${o.clients.name}` 
        : o.clients?.name || "";
      const haystack = [String(o.number), clientName, statusLabel[o.status]].join(" ").toLowerCase();
      return haystack.includes(term);
    });

    for (const o of baseOrders) {
      all++;
      if (!isDeadlineActionableOrder(o)) continue;
      const deliveryStr = o.delivery_date || o.quotes?.delivery_date;
      if (!deliveryStr) {
        none++;
        continue;
      }
      const dDate = parseDateValue(deliveryStr);
      if (!dDate) {
        none++;
        continue;
      }
      dDate.setHours(0, 0, 0, 0);
      const diffDays = Math.round((dDate.getTime() - todayDate.getTime()) / (1000 * 3600 * 24));
      
      if (diffDays < 0) late++;
      else if (diffDays === 0) today++;
      else ontime++;
    }

    return { all, late, today, ontime, none };
  }, [orders, originTab, statusFilter, financialFilter, searchTerm, periodType, appliedCustomDates]);

  const filtered = useMemo(() => {
    const term = searchTerm.trim().toLowerCase();
    
    const today = new Date();
    today.setHours(0, 0, 0, 0);

    const result = orders.filter((o) => {
      const pdvOrder = isPdvOrder(o);
      if (originTab === "pdv" && !pdvOrder) return false;
      if (originTab === "orders" && pdvOrder) return false;
      if (statusFilter !== "all" && o.status !== statusFilter) return false;
      if (!isOrderWithinPeriod(o, periodType, appliedCustomDates.start, appliedCustomDates.end)) return false;

      // Financial filter
      const total = o.total_amount || 0;
      const paid = o.paid_amount || 0;
      const missing = Math.max(0, total - paid);
      const isFullyPaid = missing <= 0.0001;
      const isUnpaid = paid <= 0.0001;

      if (financialFilter === "paid" && !isFullyPaid) return false;
      if (financialFilter === "unpaid" && !isUnpaid) return false;
      if (financialFilter === "partial" && (isFullyPaid || isUnpaid)) return false;

      // Deadline filter
      const deliveryStr = o.delivery_date || o.quotes?.delivery_date;
      if (deadlineFilter !== "all") {
        if (!isDeadlineActionableOrder(o)) return false;
        if (!deliveryStr) {
          if (deadlineFilter !== "none") return false;
        } else {
          if (deadlineFilter === "none") return false;
          
          const dDate = parseDateValue(deliveryStr);
          if (!dDate) return false;
          dDate.setHours(0, 0, 0, 0);
          const diffDays = Math.round((dDate.getTime() - today.getTime()) / (1000 * 3600 * 24));
          
          if (deadlineFilter === "late" && diffDays >= 0) return false;
          if (deadlineFilter === "today" && diffDays !== 0) return false;
          if (deadlineFilter === "ontime" && diffDays < 0) return false;
        }
      }

      if (!term) return true;
      const clientName = o.clients?.company_name 
        ? `${o.clients.company_name} ${o.clients.name}` 
        : o.clients?.name || "";
      const haystack = [String(o.number), clientName, statusLabel[o.status]].join(" ").toLowerCase();
      return haystack.includes(term);
    });

    return result.sort((a, b) => {
      const timeA = new Date(a.created_at).getTime();
      const timeB = new Date(b.created_at).getTime();
      return sortOrder === "desc" ? timeB - timeA : timeA - timeB;
    });
  }, [orders, searchTerm, statusFilter, originTab, financialFilter, deadlineFilter, periodType, appliedCustomDates, sortOrder]);

  const ITEMS_PER_PAGE = 12;
  const totalPages = Math.ceil(filtered.length / ITEMS_PER_PAGE);
  const paginatedOrders = useMemo(() => {
    const start = (currentPage - 1) * ITEMS_PER_PAGE;
    return filtered.slice(start, start + ITEMS_PER_PAGE);
  }, [filtered, currentPage]);

  useEffect(() => {
    setCurrentPage(1);
  }, [searchTerm, statusFilter, originTab, financialFilter, deadlineFilter, periodType, appliedCustomDates, sortOrder]);

  const handlePageChange = (newPage: number) => {
    setCurrentPage(newPage);
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  const kpisItems = [
    {
      id: "all",
      title: "Todos (Exibidos)",
      shortTitle: "Todos",
      count: deadlineKpis.all,
      icon: LayoutList,
      bg: "#6F4BFF",
      bgSoft: "#F0EBFF",
      fg: "#FFFFFF",
      accent: "#4A2CD8",
    },
    {
      id: "late",
      title: "Em Atraso",
      shortTitle: "Atraso",
      count: deadlineKpis.late,
      icon: CalendarX,
      bg: "#FF2B67",
      bgSoft: "#FFE9F0",
      fg: "#FFFFFF",
      accent: "#B31845",
    },
    {
      id: "today",
      title: "Vence Hoje",
      shortTitle: "Hoje",
      count: deadlineKpis.today,
      icon: CalendarClock,
      bg: "#66C7FF",
      bgSoft: "#EAF8FF",
      fg: "#FFFFFF",
      accent: "#2C98D4",
    },
    {
      id: "ontime",
      title: "No Prazo",
      shortTitle: "No prazo",
      count: deadlineKpis.ontime,
      icon: CalendarCheck,
      bg: "#00C977",
      bgSoft: "#E4FFF3",
      fg: "#FFFFFF",
      accent: "#078B56",
    },
    {
      id: "none",
      title: "S/ Prazo",
      shortTitle: "S/ prazo",
      count: deadlineKpis.none,
      icon: CalendarOff,
      bg: "#7C6CFF",
      bgSoft: "#F0EEFF",
      fg: "#FFFFFF",
      accent: "#5745E0",
    },
  ];

  return (
    <div className="space-y-6">
      <PageHeader
        eyebrow="Produção"
        title="Pedidos"
        subtitle="Acompanhe cada etapa, do orçamento aprovado à entrega final."
        actions={
          <StatusPageCustomizationModal />
        }
      />

      {/* KPI Section */}
      {/* 5 colunas desde o celular: empilhado, o bloco de KPIs sozinho
          ocupava mais de uma tela de altura. O cartao encolhe (rotulo curto,
          icone so no desktop) em vez de a grade quebrar. */}
      <div className="grid grid-cols-5 gap-1.5 md:gap-4">
        {kpisItems.map((kpi) => {
          const isActive = deadlineFilter === kpi.id;
          const Icon = kpi.icon;
          return (
            <button
              key={kpi.id}
              onClick={() => setDeadlineFilter(isActive ? "all" : (kpi.id as any))}
              className="relative overflow-hidden flex flex-col gap-0.5 md:gap-2 p-1.5 md:p-4 text-center md:text-left transition-all duration-200 cursor-pointer border hover:-translate-y-0.5"
              style={{
                background: isActive
                  ? `linear-gradient(135deg, ${kpi.bg} 0%, ${kpi.accent} 100%)`
                  : "#ffffff",
                boxShadow: isActive
                  ? "0 10px 26px rgba(20, 25, 40, 0.18)"
                  : "0 1px 6px rgba(18, 24, 40, 0.06)",
                borderColor: isActive ? "transparent" : kpi.bg,
                borderTopLeftRadius: "20px",
                borderTopRightRadius: "8px",
                borderBottomRightRadius: "20px",
                borderBottomLeftRadius: "8px",
              }}
              title={`Filtrar por: ${kpi.title}`}
            >

              <div className="relative z-10 flex justify-center md:justify-between items-start w-full">
                <div className="leading-none">
                  <span
                    className="text-lg md:text-4xl font-black tracking-tight"
                    style={{ color: isActive ? "#FFFFFF" : kpi.accent }}
                  >
                    {kpi.count}
                  </span>
                </div>
                <div
                  className="hidden md:block p-1.5 rounded-lg border"
                  style={{
                    borderColor: isActive ? "rgba(255,255,255,0.2)" : `${kpi.bg}35`,
                    backgroundColor: isActive ? "rgba(0,0,0,0.10)" : "transparent",
                  }}
                >
                  <Icon size={18} strokeWidth={2.4} style={{ color: isActive ? "#FFFFFF" : kpi.accent }} />
                </div>
              </div>

              <div className="relative z-10 flex items-end justify-center md:justify-between gap-2">
                <span
                  className="font-extrabold text-[9px] md:text-xs uppercase leading-tight tracking-normal md:tracking-[0.12em]"
                  style={{ color: isActive ? "rgba(255,255,255,0.95)" : kpi.accent }}
                >
                  <span className="md:hidden">{kpi.shortTitle}</span>
                  <span className="hidden md:inline">{kpi.title}</span>
                </span>
              </div>
            </button>
          );
        })}
      </div>

      <div className="flex flex-wrap items-center gap-3 w-full bg-white p-3 rounded-2xl border border-[rgba(226,232,255,0.7)] shadow-sm">
        {/* Search Input */}
        <div className="w-full sm:w-auto flex-1 min-w-[200px] max-w-full sm:max-w-[280px]">
          <Input
            placeholder="Buscar por número ou cliente"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            icon={<Search size={14} />}
          />
        </div>

        {/* Toggle Tabs (Pedidos/PDV) */}
        <div className="flex items-center border border-zinc-200 rounded-lg p-1 bg-zinc-50 shrink-0">
          <button
            onClick={() => setOriginTab("orders")}
            className={`px-3 py-1.5 rounded-md text-sm font-semibold transition-colors ${
              originTab === "orders" ? "bg-white shadow-sm text-zinc-900 border border-zinc-200" : "text-zinc-500 hover:text-zinc-700"
            }`}
          >
            Pedidos
          </button>
          <button
            onClick={() => setOriginTab("pdv")}
            className={`px-3 py-1.5 rounded-md text-sm font-semibold transition-colors ${
              originTab === "pdv" ? "bg-white shadow-sm text-zinc-900 border border-zinc-200" : "text-zinc-500 hover:text-zinc-700"
            }`}
          >
            PDV
          </button>
        </div>

        {/* Status Select */}
        <div className="w-full sm:w-auto flex-1 min-w-[150px] max-w-full sm:max-w-[180px]">
          <CustomSelect
            options={[
              { value: "all", label: "Status da Etapa" },
              { value: "pending_production", label: "Aguardando" },
              { value: "in_production", label: "Em Produção" },
              { value: "finished", label: "Finalizado" },
              { value: "delivered", label: "Entregue" },
              { value: "canceled", label: "Cancelado" },
            ]}
            value={statusFilter}
            onChange={(value) => setStatusFilter(value as OrderStatus | "all")}
          />
        </div>

        {/* Financial Select */}
        <div className="w-full sm:w-auto flex-1 min-w-[150px] max-w-full sm:max-w-[180px]">
          <CustomSelect
            options={[
              { value: "all", label: "Financeiro" },
              { value: "unpaid", label: "Pendente" },
              { value: "partial", label: "Pago Parcial" },
              { value: "paid", label: "Total Pago" },
            ]}
            value={financialFilter}
            onChange={(value) => setFinancialFilter(value as any)}
          />
        </div>

        <div className="w-full sm:w-auto flex-1 min-w-[150px] max-w-full sm:max-w-[180px]">
          <CustomSelect
            options={[
              { value: "all", label: "Data" },
              { value: "today", label: "Hoje" },
              { value: "week", label: "Esta semana" },
              { value: "month", label: "Este mês" },
              { value: "custom", label: "Personalizado" },
            ]}
            value={periodType}
            onChange={(value) => {
              const nextType = value as PeriodFilterType;
              setPeriodType(nextType);
              if (nextType !== "custom") {
                setAppliedCustomDates({ start: "", end: "" });
              }
            }}
          />
        </div>
        
        {/* Sort Order Toggle */}
        <div className="flex items-center shrink-0">
          <button
            onClick={() => setSortOrder(sortOrder === "desc" ? "asc" : "desc")}
            className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-zinc-200 bg-white text-zinc-500 hover:bg-zinc-50 hover:text-zinc-900 transition-colors"
            title={`Ordenar por data (${sortOrder === "desc" ? "Mais recentes" : "Mais antigos"})`}
          >
            {sortOrder === "desc" ? (
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 8h6"/><path d="M3 14h9"/><path d="M3 20h12"/><path d="M15 4v16"/><path d="m11 16 4 4 4-4"/></svg>
            ) : (
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 8h6"/><path d="M3 14h9"/><path d="M3 20h12"/><path d="M15 20V4"/><path d="m11 8 4-4 4 4"/></svg>
            )}
          </button>
        </div>


        {/* View Mode Toggle (Grid/List) */}
        <div className="hidden xl:flex items-center border border-zinc-200 rounded-lg p-1 bg-zinc-50 shrink-0 ml-auto">
          <button
            onClick={() => setViewMode("list")}
            className={`p-1.5 rounded-md transition-colors ${
              viewMode === "list" ? "bg-white shadow-sm text-zinc-900 border border-zinc-200" : "text-zinc-400 hover:text-zinc-600"
            }`}
            title="Lista"
          >
            <List size={18} />
          </button>
          <button
            onClick={() => setViewMode("grid")}
            className={`p-1.5 rounded-md transition-colors ${
              viewMode === "grid" ? "bg-white shadow-sm text-zinc-900 border border-zinc-200" : "text-zinc-400 hover:text-zinc-600"
            }`}
            title="Grade"
          >
            <LayoutGrid size={18} />
          </button>
        </div>
      </div>

      {periodType === "custom" && (
        <div className="flex flex-col gap-3 rounded-2xl border border-[rgba(226,232,255,0.7)] bg-white p-3 shadow-sm md:flex-row md:items-end">
          <div className="flex items-center gap-2 text-sm font-semibold text-zinc-700 md:min-w-[120px]">
            <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-zinc-50 text-zinc-500">
              <Calendar size={16} />
            </div>
            <span>Filtrar por data</span>
          </div>

          <div className="grid flex-1 gap-3 sm:grid-cols-2 xl:max-w-[430px]">
            <div className="space-y-1.5">
              <label className="text-[11px] font-bold uppercase tracking-wider text-zinc-500">Data inicial</label>
              <CustomDatePicker
                value={customStart}
                onChange={setCustomStart}
                placeholder="Data inicial"
              />
            </div>
            <div className="space-y-1.5">
              <label className="text-[11px] font-bold uppercase tracking-wider text-zinc-500">Data final</label>
              <CustomDatePicker
                value={customEnd}
                onChange={setCustomEnd}
                placeholder="Data final"
              />
            </div>
          </div>

          <div className="flex gap-2 md:ml-auto">
            <button
              type="button"
              onClick={() => setAppliedCustomDates({ start: customStart, end: customEnd })}
              className="inline-flex h-10 items-center justify-center rounded-xl bg-[var(--ks-color-primary)] px-4 text-sm font-semibold text-white transition-colors hover:bg-[var(--ks-color-primary-strong)]"
            >
              Aplicar
            </button>
            <button
              type="button"
              onClick={() => {
                setCustomStart("");
                setCustomEnd("");
                setAppliedCustomDates({ start: "", end: "" });
                setPeriodType("all");
              }}
              className="inline-flex h-10 items-center justify-center rounded-xl border border-zinc-200 bg-white px-4 text-sm font-semibold text-zinc-600 transition-colors hover:bg-zinc-50"
            >
              Limpar
            </button>
          </div>
        </div>
      )}
      {orders.some((order) => order.restock_pending) && (
        <div className="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm font-medium text-amber-800">
          Existem pedidos com reposição pendente por saldo negativo autorizado.
        </div>
      )}

      {loading ? (
        <div className="ks-surface flex items-center justify-center py-16">
          <div className="w-5 h-5 border-2 border-[var(--ks-color-primary)] border-t-transparent rounded-full animate-spin" />
        </div>
      ) : filtered.length === 0 ? (
        <div className="ks-surface ks-empty-state">
          <div className="w-10 h-10 rounded-full bg-[rgba(226,232,255,0.8)] flex items-center justify-center mx-auto mb-4 text-[var(--ks-color-text-soft)]">
            <ClipboardList size={20} />
          </div>
          <h3 className="ks-empty-state-title">
            {originTab === "pdv" ? "Nenhum pedido PDV encontrado" : "Nenhum pedido encontrado"}
          </h3>
          <p className="ks-empty-state-subtitle">
            {originTab === "pdv"
              ? "As vendas rápidas do PDV aparecerão nesta aba."
              : "Os pedidos são gerados automaticamente a partir de orçamentos aprovados."}
          </p>
        </div>
      ) : (
        <>
          <div className="animate-in fade-in slide-in-from-bottom-2 duration-300">
            {/* Mobile List */}
            <div className="md:hidden space-y-4">
            {paginatedOrders.map((order) => {
              const pdvOrder = isPdvOrder(order);
              const catalogOrder = isCatalogOrder(order);
              return (
              <div key={order.id} className="bg-white rounded-2xl border border-gray-100 p-5 flex flex-col gap-4 relative overflow-hidden">
                <div className="flex items-start justify-between gap-3">
                  <div className="flex flex-col gap-1">
                    <div className="flex items-center gap-2">
                      <span className="text-xl font-black tracking-tight text-gray-900">#{order.number}</span>
                    </div>
                  </div>
                  <span className={getCompactTopBadgeClass(order.status)}>
                    {statusLabel[order.status]}
                  </span>
                </div>
                {(pdvOrder || catalogOrder || order.restock_pending) && (
                  <div className="-mt-1 flex flex-wrap gap-1.5">
                    {pdvOrder && (
                      <span className="inline-flex rounded-md bg-indigo-50 px-2 py-1 text-[10px] font-bold uppercase tracking-wide text-indigo-700">
                        Venda PDV
                      </span>
                    )}
                    {catalogOrder && !pdvOrder && (
                      <span className="inline-flex rounded-md bg-sky-50 px-2 py-1 text-[10px] font-bold uppercase tracking-wide text-sky-700">
                        Catálogo
                      </span>
                    )}
                    {order.restock_pending && (
                      <span className="inline-flex rounded-md bg-amber-50 px-2 py-1 text-[10px] font-bold uppercase tracking-wide text-amber-700">
                        Repos. Pendente
                      </span>
                    )}
                  </div>
                )}

                <div className="flex items-center gap-2.5 mt-1">
                  {(() => {
                    const clientName = order.clients?.company_name || order.clients?.name || "Cliente sem nome";
                    const isDeletedClient = Boolean(order.clients?.is_deleted);
                    return (
                      <>
                        <div className={`w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold text-white shrink-0 ${getClientAvatarClass(clientName)}`}>
                          {clientName?.substring(0, 2).toUpperCase()}
                        </div>
                        <div className="flex flex-col min-w-0">
                          <h3 className="font-semibold text-gray-900 text-base leading-tight truncate">
                            {clientName}
                          </h3>
                          {isDeletedClient ? (
                            <span className="inline-flex w-fit rounded-md bg-red-50 px-2 py-1 text-[10px] font-bold uppercase tracking-wide text-red-600">
                              Excluído
                            </span>
                          ) : null}
                        </div>
                      </>
                    );
                  })()}
                </div>

                <div className="grid grid-cols-2 gap-3 rounded-xl bg-gray-50 p-3">
                  <div className="flex flex-col">
                     <span className="text-[10px] font-semibold uppercase tracking-wider text-gray-400">Origem</span>
                     {order.quotes && !pdvOrder ? (
                       <Link href={`/dashboard/quotes/${order.quotes.id}`} className="mt-0.5 truncate text-xs font-medium text-indigo-700 hover:underline">
                         Orçamento #{order.quotes.number}
                       </Link>
                     ) : pdvOrder ? (
                       <span className="mt-0.5 truncate text-xs font-medium text-gray-700">PDV Direto</span>
                     ) : (
                       <span className="mt-0.5 truncate text-xs font-medium text-gray-400">-</span>
                     )}
                  </div>
                  <div className="flex flex-col">
                     <span className="text-[10px] font-semibold uppercase tracking-wider text-gray-400">Criado Data/Por</span>
                     <span className="mt-0.5 text-[11px] font-medium text-gray-500">{formatDate(order.created_at)}</span>
                     <span className="truncate text-xs font-medium text-gray-700">
                       {order.created_by ? (order.created_by === order.user_id ? "Admin" : (createdByNames[order.created_by] || "Usuário")) : "-"}
                     </span>
                  </div>
                </div>
                
                <DeliveryBadge dateStr={order.delivery_date || order.quotes?.delivery_date} status={order.status} isPdv={pdvOrder} />

                {(() => {
                   const total = order.total_amount || 0;
                   const paid = order.paid_amount || 0;
                   const missing = Math.max(0, total - paid);
                   const isFullyPaid = missing <= 0.0001;
                   const paidPercentage = total > 0 ? Math.min(100, Math.round((paid / total) * 100)) : 100;
                   
                   return (
                     <div className="flex flex-col gap-2 rounded-xl bg-gray-50 p-3">
                       <div className="flex items-center justify-between">
                         <div className="flex flex-col">
                            <span className="mb-0.5 text-[10px] font-semibold uppercase tracking-wider text-gray-400">Total</span>
                            <span className="text-sm font-semibold leading-none text-gray-900">{formatMoney(total)}</span>
                         </div>
                         <div className="flex flex-col items-end">
                            <span className="mb-0.5 text-[10px] font-semibold uppercase tracking-wider text-gray-400">Falta pagar</span>
                            <span className={`text-sm font-semibold leading-none ${isFullyPaid ? 'text-emerald-700' : 'text-red-600'}`}>
                              {isFullyPaid ? "Pago" : formatMoney(missing)}
                            </span>
                         </div>
                       </div>
                       <div className="h-1.5 w-full overflow-hidden rounded-full bg-gray-200">
                          <div className={`h-full rounded-full transition-all duration-500 ${isFullyPaid ? 'bg-emerald-600' : 'bg-indigo-500'}`} style={{ width: `${paidPercentage}%` }} />
                       </div>
                       <div className="flex justify-between text-[10px] font-medium text-gray-500">
                          <span>Valor pago:</span>
                          <span className="font-semibold text-gray-700">{formatMoney(paid)}</span>
                       </div>
                     </div>
                   );
                })()}

                <div className="mt-1 flex gap-2">
                  {pdvOrder && order.status !== "canceled" && (
                    <button
                      type="button"
                      onClick={() => openCancelModal(order)}
                      disabled={cancelingOrderId === order.id}
                      className="flex-1 inline-flex h-10 items-center justify-center gap-1.5 rounded-lg bg-red-50 px-3 text-xs font-bold text-red-600 transition-colors hover:bg-red-100 disabled:opacity-60"
                    >
                      <AlertCircle size={14} />
                      {cancelingOrderId === order.id ? "Cancelando..." : "Cancelar"}
                    </button>
                  )}
                  <button
                    type="button"
                    onClick={() => setLabelModalOrder(order)}
                    disabled={printingLabelOrderId === order.id}
                    className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-600 transition-colors hover:bg-gray-50 disabled:opacity-60"
                    title="Etiqueta do pedido"
                  >
                    <Tag size={14} />
                  </button>
                  <button
                    type="button"
                    onClick={() => setProtocoloModalOrder(order)}
                    className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-600 transition-colors hover:bg-gray-50 disabled:opacity-60"
                    title="Protocolo de entrega"
                  >
                    <ClipboardCheck size={14} />
                  </button>
                  {podeMudarStatus && !pdvOrder && (
                    <button
                      type="button"
                      onClick={() => setStatusMenuOrderId((current) => (current === order.id ? null : order.id))}
                      disabled={updatingOrderId === order.id}
                      className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-700 transition-colors hover:bg-indigo-100 disabled:opacity-60"
                      title="Alterar status"
                    >
                      {updatingOrderId === order.id ? <Loader2 size={14} className="animate-spin" /> : <MoreHorizontal size={16} />}
                    </button>
                  )}
                  <Link
                    href={`/dashboard/orders/${order.id}`}
                    className="flex-1 flex h-10 items-center justify-center gap-1.5 rounded-lg border border-gray-200 bg-white text-xs font-bold text-gray-700 transition-colors hover:bg-gray-50"
                  >
                    <Eye size={14} />
                    Ver detalhes
                  </Link>
                </div>
                {statusMenuOrderId === order.id && !pdvOrder && (
                  <OrderStatusQuickMenu
                    orderNumber={order.number}
                    currentStatus={order.status}
                    updating={updatingOrderId === order.id}
                    variant="card"
                    onClose={() => setStatusMenuOrderId(null)}
                    onStatusChange={(nextStatus) => void handleInlineStatusChange(order, nextStatus)}
                  />
                )}
              </div>
              );
            })}
          </div>

          {/* Desktop Views */}
          <div className="hidden md:block">
            {viewMode === "grid" ? (
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                {paginatedOrders.map((order) => {
                  const clientName = order.clients?.company_name || order.clients?.name || "Cliente sem nome";
                  const clientSubtitle = order.clients?.company_name ? order.clients?.name : "";
                  const isDeletedClient = Boolean(order.clients?.is_deleted);
                  const pdvOrder = isPdvOrder(order);
                  const catalogOrder = isCatalogOrder(order);
                  
                  return (
                    <div
                      key={order.id}
                      className="bg-white rounded-2xl border border-gray-100 p-5 hover:border-gray-300 hover:shadow-sm transition-all duration-200 flex flex-col h-full relative group overflow-hidden"
                    >
                      {/* Top Header */}
                      <div className="mb-4 flex items-start justify-between gap-3">
                        <div className="min-w-0 flex-1 flex flex-col gap-1">
                          <div className="flex min-w-0 items-center gap-2.5">
                            <span className="text-xl font-black tracking-tight text-gray-900">#{order.number}</span>
                          </div>
                          <span className="mt-0.5 text-xs font-medium text-gray-500">
                            Criado em {formatDate(order.created_at)}
                          </span>
                        </div>
                        <span className={`${getCompactTopBadgeClass(order.status)} shrink-0 self-start`}>
                          {statusLabel[order.status]}
                        </span>
                      </div>

                      {(pdvOrder || catalogOrder || order.restock_pending) && (
                        <div className="-mt-1 mb-4 flex flex-wrap gap-1.5">
                          {pdvOrder && (
                            <span className="inline-flex w-fit items-center rounded-md bg-indigo-50 px-2 py-1 text-[9px] font-bold uppercase tracking-wide text-indigo-700">
                              Venda PDV
                            </span>
                          )}
                          {catalogOrder && !pdvOrder && (
                            <span className="inline-flex w-fit items-center rounded-md bg-sky-50 px-2 py-1 text-[9px] font-bold uppercase tracking-wide text-sky-700">
                              Catálogo
                            </span>
                          )}
                          {order.restock_pending && (
                            <span className="inline-flex w-fit items-center rounded-md bg-amber-50 px-2 py-1 text-[9px] font-bold uppercase tracking-wide text-amber-700">
                              Reposição pendente
                            </span>
                          )}
                        </div>
                      )}

                      {/* Client info */}
                      <div className="mb-4">
                        <div className="flex items-center gap-2.5">
                          <div className={`w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold text-white shrink-0 ${getClientAvatarClass(clientName)}`}>
                            {clientName?.substring(0, 2).toUpperCase()}
                          </div>
                          <div className="flex flex-col min-w-0">
                            <h3 className="text-base font-semibold leading-tight text-gray-900 truncate" title={clientName}>
                              {clientName}
                            </h3>
                            {clientSubtitle && (
                              <p className="truncate text-xs font-medium text-gray-500">{clientSubtitle}</p>
                            )}
                          </div>
                        </div>
                        {isDeletedClient ? (
                          <div className="mt-2">
                            <span className="inline-flex rounded-md bg-red-50 px-2 py-1 text-[10px] font-bold uppercase tracking-wide text-red-600">
                              Cliente Excluído
                            </span>
                          </div>
                        ) : null}
                      </div>

                      {/* Origin & User */}
                      <div className="mt-auto mb-5 grid grid-cols-2 gap-3 rounded-xl bg-gray-50 p-3">
                        <div className="flex flex-col">
                           <span className="text-[10px] font-semibold uppercase tracking-wider text-gray-400">Origem</span>
                           {order.quotes && !pdvOrder ? (
                             <Link href={`/dashboard/quotes/${order.quotes.id}`} className="mt-0.5 truncate text-xs font-medium text-indigo-700 hover:underline">
                               Orç. #{order.quotes.number}
                             </Link>
                           ) : pdvOrder ? (
                             <span className="mt-0.5 truncate text-xs font-medium text-gray-700">PDV Direto</span>
                           ) : (
                             <span className="mt-0.5 truncate text-xs font-medium text-gray-400">-</span>
                           )}
                        </div>
                        <div className="flex flex-col">
                           <span className="text-[10px] font-semibold uppercase tracking-wider text-gray-400">Criado por</span>
                           <span className="mt-0.5 truncate text-xs font-medium text-gray-700">
                             {order.created_by ? (order.created_by === order.user_id ? "Admin" : (createdByNames[order.created_by] || "Usuário")) : "-"}
                           </span>
                        </div>
                      </div>

                      <div className="mb-4">
                        <DeliveryBadge dateStr={order.delivery_date || order.quotes?.delivery_date} status={order.status} isPdv={pdvOrder} />
                      </div>

                      {/* Financial info */}
                      {(() => {
                         const total = order.total_amount || 0;
                         const paid = order.paid_amount || 0;
                         const missing = Math.max(0, total - paid);
                         const isFullyPaid = missing <= 0.0001;
                         const paidPercentage = total > 0 ? Math.min(100, Math.round((paid / total) * 100)) : 100;
                         
                         return (
                           <div className="mb-5 flex flex-col gap-2.5 rounded-xl bg-gray-50 p-3">
                             <div className="flex items-center justify-between">
                               <div className="flex flex-col">
                                  <span className="mb-0.5 text-[10px] font-semibold uppercase tracking-wider text-gray-400">Total</span>
                                  <span className="text-sm font-semibold leading-none text-gray-900">{formatMoney(total)}</span>
                               </div>
                               <div className="flex flex-col items-end">
                                  <span className="mb-0.5 text-[10px] font-semibold uppercase tracking-wider text-gray-400">Falta pagar</span>
                                  <span className={`text-sm font-semibold leading-none ${isFullyPaid ? 'text-emerald-700' : 'text-red-600'}`}>
                                    {isFullyPaid ? "Pago" : formatMoney(missing)}
                                  </span>
                               </div>
                             </div>
                             <div className="h-1.5 w-full overflow-hidden rounded-full bg-gray-200">
                                <div className={`h-full rounded-full transition-all duration-500 ${isFullyPaid ? 'bg-emerald-600' : 'bg-indigo-500'}`} style={{ width: `${paidPercentage}%` }} />
                             </div>
                             <div className="flex justify-between text-[10px] font-medium text-gray-500">
                                <span>Valor pago:</span>
                                <span className="font-semibold text-gray-700">{formatMoney(paid)}</span>
                             </div>
                           </div>
                         );
                      })()}

                      {/* Actions Footer */}
                      <div className="flex w-full items-center gap-2 pt-2">
                         {pdvOrder && order.status !== "canceled" && (
                            <button
                              type="button"
                              onClick={() => openCancelModal(order)}
                              disabled={cancelingOrderId === order.id}
                              className="flex-1 inline-flex h-9 items-center justify-center whitespace-nowrap rounded-lg bg-red-50 px-2 text-[11px] font-bold tracking-wide text-red-600 disabled:opacity-60 transition-colors hover:bg-red-100"
                            >
                              {cancelingOrderId === order.id ? "..." : "Cancelar"}
                            </button>
                          )}
                          <button
                            type="button"
                            onClick={() => setLabelModalOrder(order)}
                            disabled={printingLabelOrderId === order.id}
                            className="inline-flex h-9 w-10 items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-600 transition-colors hover:bg-gray-50 disabled:opacity-60"
                            title="Etiqueta do pedido"
                          >
                            <Tag size={14} />
                          </button>
                          <button
                            type="button"
                            onClick={() => setProtocoloModalOrder(order)}
                            className="inline-flex h-9 w-10 items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-600 transition-colors hover:bg-gray-50 disabled:opacity-60"
                            title="Protocolo de entrega"
                          >
                            <ClipboardCheck size={14} />
                          </button>
                          {podeMudarStatus && !pdvOrder && (
                            <button
                              type="button"
                              onClick={() => setStatusMenuOrderId((current) => (current === order.id ? null : order.id))}
                              disabled={updatingOrderId === order.id}
                              className="inline-flex h-9 w-10 items-center justify-center rounded-lg bg-indigo-50 text-indigo-700 transition-colors hover:bg-indigo-100 disabled:opacity-60"
                              title="Alterar status"
                            >
                              {updatingOrderId === order.id ? <Loader2 size={14} className="animate-spin" /> : <MoreHorizontal size={16} />}
                            </button>
                          )}
                          <Link href={`/dashboard/orders/${order.id}`} className={pdvOrder && order.status !== "canceled" ? "flex-1" : "ml-auto"}>
                            <button 
                              className="flex h-9 w-full items-center justify-center gap-1.5 whitespace-nowrap rounded-lg border border-gray-200 bg-white px-3 text-[11px] font-bold text-gray-700 transition-colors hover:bg-gray-50"
                            >
                              <Eye size={14} className="opacity-70 group-hover:opacity-100 shrink-0" />
                              Ver Pedido
                            </button>
                          </Link>
                      </div>
                      {statusMenuOrderId === order.id && !pdvOrder && (
                        <OrderStatusQuickMenu
                          orderNumber={order.number}
                          currentStatus={order.status}
                          updating={updatingOrderId === order.id}
                          variant="card"
                          onClose={() => setStatusMenuOrderId(null)}
                          onStatusChange={(nextStatus) => void handleInlineStatusChange(order, nextStatus)}
                        />
                      )}
                    </div>
                  );
                })}
              </div>
            ) : (
              <div className="flex flex-col gap-3">
                {paginatedOrders.map((order) => {
                  const clientName = order.clients?.company_name || order.clients?.name || "Cliente sem nome";
                  const clientSubtitle = order.clients?.company_name ? order.clients?.name : "";
                  const isDeletedClient = Boolean(order.clients?.is_deleted);
                  const pdvOrder = isPdvOrder(order);
                  const catalogOrder = isCatalogOrder(order);
                  
                  return (
                    <div 
                      key={order.id} 
                      className="group relative overflow-hidden rounded-2xl border border-gray-100 bg-white p-4 transition-all duration-200 hover:border-gray-300 hover:shadow-sm flex flex-col gap-4 lg:grid lg:grid-cols-[minmax(220px,1.45fr)_minmax(170px,1fr)_minmax(120px,.72fr)_minmax(150px,.82fr)_minmax(170px,.95fr)_136px] lg:items-center lg:gap-3"
                    >
                      {/* Status Strip */}
                      <div className={`absolute left-0 top-0 bottom-0 w-1.5 transition-colors ${
                        order.status === 'finished' || order.status === 'delivered' ? 'bg-emerald-500' :
                        order.status === 'canceled' ? 'bg-red-500' :
                        order.status === 'in_production' ? 'bg-sky-500' :
                        'bg-indigo-500'
                      }`} />

                      {/* Client Info */}
                      <div className="flex min-w-0 items-center gap-3 pl-2 lg:pl-3">
                        <div className={`w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold text-white shrink-0 ${getClientAvatarClass(clientName)}`}>
                            {clientName?.substring(0, 2).toUpperCase()}
                        </div>
                        <div className="flex flex-col min-w-0">
                          <div className="flex items-center gap-2">
                            <span className="truncate text-base font-semibold text-gray-900" title={clientName}>
                              {clientName}
                            </span>
                            {isDeletedClient ? (
                              <span className="inline-flex rounded-md bg-red-50 px-2 py-1 text-[10px] font-bold uppercase tracking-wide text-red-600">
                                Excluído
                              </span>
                            ) : null}
                          </div>
                          {clientSubtitle && (
                            <span className="truncate text-[11px] font-medium text-gray-500">{clientSubtitle}</span>
                          )}
                        </div>
                      </div>

                      {/* Order Info */}
                      <div className="flex min-w-0 flex-col gap-1 lg:border-l lg:border-gray-100 lg:pl-4">
                        <div className="flex min-w-0 flex-wrap items-center gap-2">
                          <span className="text-lg font-black tracking-tight text-gray-900">#{order.number}</span>
                          <span className={`${getCompactTopBadgeClass(order.status)} shrink-0`}>
                            {statusLabel[order.status]}
                          </span>
                        </div>
                        <div className="flex flex-wrap gap-1">
                          {pdvOrder && (
                            <span className="inline-flex rounded-md bg-indigo-50 px-2 py-1 text-[9px] font-bold uppercase tracking-wide text-indigo-700">
                              Venda PDV
                            </span>
                          )}
                          {catalogOrder && !pdvOrder && (
                            <span className="inline-flex rounded-md bg-sky-50 px-2 py-1 text-[9px] font-bold uppercase tracking-wide text-sky-700">
                              Catálogo
                            </span>
                          )}
                          {order.restock_pending && (
                            <span className="inline-flex rounded-md bg-amber-50 px-2 py-1 text-[10px] font-bold uppercase tracking-wide text-amber-700">
                              Repos. Pendente
                            </span>
                          )}
                        </div>
                        <span className="mt-1 text-[10px] font-medium text-gray-500">
                          {formatDate(order.created_at)}
                        </span>
                      </div>

                      {/* Metadata */}
                      <div className="flex min-w-0 flex-col gap-1.5 text-[11px] text-gray-500 lg:border-l lg:border-gray-100 lg:pl-4">
                        <div className="flex flex-col">
                          <span className="text-[9px] font-semibold uppercase tracking-wider text-gray-400">Criado por</span>
                          <span className="mt-0.5 truncate font-medium text-gray-700">
                            {order.created_by
                              ? (order.created_by === order.user_id ? "Admin" : (createdByNames[order.created_by] || "Usuário"))
                              : "-"}
                          </span>
                        </div>
                        <div className="flex flex-col mt-0.5">
                           <span className="text-[9px] font-semibold uppercase tracking-wider text-gray-400">Origem</span>
                           {order.quotes && !pdvOrder ? (
                             <Link href={`/dashboard/quotes/${order.quotes.id}`} className="mt-0.5 truncate font-medium text-indigo-700 hover:underline">
                               Orç. #{order.quotes.number}
                             </Link>
                           ) : pdvOrder ? (
                             <span className="mt-0.5 truncate font-medium text-gray-700">PDV Direto</span>
                           ) : (
                             <span className="mt-0.5 truncate font-medium text-gray-400">-</span>
                           )}
                        </div>
                      </div>

                      <div className="flex min-w-0 flex-col justify-center lg:border-l lg:border-gray-100 lg:pl-4">
                        <DeliveryBadge dateStr={order.delivery_date || order.quotes?.delivery_date} status={order.status} isPdv={pdvOrder} />
                      </div>

                      {/* Financial info (Total & Paid progress) */}
                      {(() => {
                         const total = order.total_amount || 0;
                         const paid = order.paid_amount || 0;
                         const missing = Math.max(0, total - paid);
                         const isFullyPaid = missing <= 0.0001;
                         const paidPercentage = total > 0 ? Math.min(100, Math.round((paid / total) * 100)) : 100;

                         return (
                          <div className="flex min-w-0 flex-col gap-2 lg:border-l lg:border-gray-100 lg:pl-4">
                            <div className="flex items-center justify-between mb-1.5">
                               <div className="flex flex-col">
                                  <span className="text-[9px] font-semibold uppercase tracking-wider text-gray-400">Total</span>
                                  <span className="mt-0.5 text-sm font-semibold leading-none text-gray-900">{formatMoney(total)}</span>
                               </div>
                               <div className="flex flex-col items-end">
                                  <span className="text-[9px] font-semibold uppercase tracking-wider text-gray-400">Falta</span>
                                  <span className={`mt-0.5 text-xs font-semibold leading-none ${isFullyPaid ? 'text-emerald-700' : 'text-red-600'}`}>
                                    {isFullyPaid ? "Pago" : formatMoney(missing)}
                                  </span>
                               </div>
                            </div>
                            <div className="h-1 w-full overflow-hidden rounded-full bg-gray-200">
                                <div className={`h-full rounded-full transition-all duration-500 ${isFullyPaid ? 'bg-emerald-600' : 'bg-indigo-500'}`} style={{ width: `${paidPercentage}%` }} />
                            </div>
                            <div className="mt-1.5 flex justify-between text-[9px] font-medium text-gray-500">
                               <span>Pago:</span>
                               <span className="font-semibold text-gray-700">{formatMoney(paid)}</span>
                            </div>
                          </div>
                         );
                      })()}

                      {/* Actions */}
                      <div className="flex w-full items-center justify-end gap-2 pl-2 lg:w-[136px] lg:self-center lg:justify-self-end lg:pl-0">
                        {/* no mobile a financeira aparece aqui (substituto para quando esconde o bloco) */}
                        <div className="flex flex-col items-end lg:hidden">
                           <span className="mb-0.5 text-[10px] font-semibold uppercase tracking-wider text-gray-400">Total</span>
                           <span className="text-sm font-semibold leading-none text-gray-900">{formatMoney(order.total_amount || 0)}</span>
                        </div>
                        {pdvOrder && order.status !== "canceled" && (
                          <button
                            type="button"
                            onClick={() => openCancelModal(order)}
                            disabled={cancelingOrderId === order.id}
                            className="hidden h-9 items-center justify-center rounded-lg bg-red-50 px-3 text-[11px] font-bold tracking-wide text-red-600 transition-colors hover:bg-red-100 disabled:opacity-60 lg:inline-flex"
                          >
                            {cancelingOrderId === order.id ? "Cancelando..." : "Cancelar"}
                          </button>
                        )}
                        <button
                          type="button"
                          onClick={() => setLabelModalOrder(order)}
                          disabled={printingLabelOrderId === order.id}
                          className="flex h-10 w-10 items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-600 transition-colors hover:bg-gray-50 disabled:opacity-60"
                          title="Etiqueta do pedido"
                        >
                          <Tag size={16} />
                        </button>
                        <button
                          type="button"
                          onClick={() => setProtocoloModalOrder(order)}
                          className="flex h-10 w-10 items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-600 transition-colors hover:bg-gray-50 disabled:opacity-60"
                          title="Protocolo de entrega"
                        >
                          <ClipboardCheck size={16} />
                        </button>
                        {podeMudarStatus && !pdvOrder && (
                          <button
                            type="button"
                            onClick={() => setStatusMenuOrderId((current) => (current === order.id ? null : order.id))}
                            disabled={updatingOrderId === order.id}
                            className="flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-50 text-indigo-700 transition-colors hover:bg-indigo-100 disabled:opacity-60"
                            title="Alterar status"
                          >
                            {updatingOrderId === order.id ? <Loader2 size={16} className="animate-spin" /> : <MoreHorizontal size={16} />}
                          </button>
                        )}
                        <Link href={`/dashboard/orders/${order.id}`}>
                          <button 
                            className="flex h-10 w-10 items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-600 transition-colors hover:bg-gray-50"
                            title="Ver Detalhes"
                          >
                            <Eye size={16} />
                          </button>
                        </Link>
                      </div>
                      {statusMenuOrderId === order.id && !pdvOrder && (
                        <OrderStatusQuickMenu
                          orderNumber={order.number}
                          currentStatus={order.status}
                          updating={updatingOrderId === order.id}
                          variant="list"
                          onClose={() => setStatusMenuOrderId(null)}
                          onStatusChange={(nextStatus) => void handleInlineStatusChange(order, nextStatus)}
                        />
                      )}
                    </div>
                  );
                })}
              </div>
            )}
          </div>
          </div>

          {/* Pagination Controls */}
          {totalPages > 1 && (
            <div className="flex items-center justify-between mt-8 mb-4 border-t border-[rgba(226,232,255,0.7)] pt-6">
              <span className="text-xs font-semibold text-[var(--ks-color-text-muted)]">
                Mostrando {(currentPage - 1) * ITEMS_PER_PAGE + 1} - {Math.min(currentPage * ITEMS_PER_PAGE, filtered.length)} de {filtered.length} pedidos
              </span>
              
              <div className="flex items-center gap-1.5">
                <button
                  onClick={() => handlePageChange(Math.max(1, currentPage - 1))}
                  disabled={currentPage === 1}
                  className="flex h-9 w-9 items-center justify-center rounded-xl border border-[rgba(226,232,255,0.9)] bg-white text-[var(--ks-color-text-soft)] transition-colors hover:bg-[var(--ks-color-background)] hover:text-[var(--ks-color-brand-dark)] disabled:opacity-50 disabled:hover:bg-white"
                  title="Página anterior"
                >
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                </button>

                <div className="flex items-center gap-1 mx-1 hidden sm:flex">
                  {Array.from({ length: totalPages }, (_, i) => i + 1).map(page => {
                    // Simple intelligent truncation
                    if (
                      page === 1 || 
                      page === totalPages || 
                      (page >= currentPage - 1 && page <= currentPage + 1)
                    ) {
                      return (
                        <button
                          key={page}
                          onClick={() => handlePageChange(page)}
                          className={`flex h-9 min-w-[36px] items-center justify-center rounded-xl text-sm font-bold transition-all ${
                            currentPage === page 
                              ? "bg-[var(--ks-color-brand-dark)] text-white shadow-sm" 
                              : "bg-transparent text-[var(--ks-color-text-soft)] hover:bg-[var(--ks-color-background)] hover:text-[var(--ks-color-text-primary)]"
                          }`}
                        >
                          {page}
                        </button>
                      );
                    }
                    if (page === currentPage - 2 || page === currentPage + 2) {
                      return <span key={page} className="text-[var(--ks-color-text-muted)] px-1">...</span>;
                    }
                    return null;
                  })}
                </div>

                <button
                  onClick={() => handlePageChange(Math.min(totalPages, currentPage + 1))}
                  disabled={currentPage === totalPages}
                  className="flex h-9 w-9 items-center justify-center rounded-xl border border-[rgba(226,232,255,0.9)] bg-white text-[var(--ks-color-text-soft)] transition-colors hover:bg-[var(--ks-color-background)] hover:text-[var(--ks-color-brand-dark)] disabled:opacity-50 disabled:hover:bg-white"
                  title="Próxima página"
                >
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                </button>
              </div>
            </div>
          )}
        </>
      )}
      <Dialog open={Boolean(cancelModalOrder)} onOpenChange={(open) => !open && setCancelModalOrder(null)}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>Cancelar venda PDV</DialogTitle>
            <DialogDescription>
              {cancelModalOrder
                ? `Confirma cancelar a venda #${cancelModalOrder.number}? O estorno financeiro será aplicado automaticamente.`
                : "Confirme o cancelamento da venda PDV."}
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <button
              type="button"
              onClick={() => setCancelModalOrder(null)}
              className="inline-flex h-10 items-center justify-center rounded-lg border border-zinc-200 bg-white px-4 text-sm font-medium text-zinc-700"
            >
              Voltar
            </button>
            <button
              type="button"
              onClick={() => cancelModalOrder && cancelPdvSale(cancelModalOrder)}
              disabled={!cancelModalOrder || cancelingOrderId === cancelModalOrder.id}
              className="inline-flex h-10 items-center justify-center rounded-lg bg-rose-600 px-4 text-sm font-semibold text-white disabled:opacity-60"
            >
              {cancelModalOrder && cancelingOrderId === cancelModalOrder.id ? "Cancelando..." : "Confirmar cancelamento"}
            </button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
      <Dialog open={Boolean(feedbackModal)} onOpenChange={(open) => !open && setFeedbackModal(null)}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>{feedbackModal?.title || "Aviso"}</DialogTitle>
            <DialogDescription>{feedbackModal?.message || ""}</DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <button
              type="button"
              onClick={() => setFeedbackModal(null)}
              className="inline-flex h-10 items-center justify-center rounded-lg bg-[var(--ks-color-primary)] px-4 text-sm font-semibold text-white"
            >
              Fechar
            </button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <ProtocoloPrintModal
        open={Boolean(protocoloModalOrder)}
        onOpenChange={(aberto) => { if (!aberto) setProtocoloModalOrder(null); }}
        orderId={protocoloModalOrder?.id}
        orderNumber={protocoloModalOrder?.number}
      />

      <OrderLabelPrintModal
        open={Boolean(labelModalOrder)}
        onOpenChange={(open) => !open && setLabelModalOrder(null)}
        orderId={labelModalOrder?.id}
        orderNumber={labelModalOrder?.number}
      />
    </div>
  );
}