"use client";

import { useEffect, useMemo, useRef, useState } from "react";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
import {
  enderecoDaEmpresa,
  enderecoDoCliente,
  imprimirProtocolo,
  variacaoDoItem,
  type ModoDoProtocolo,
  type ProtocoloPedido,
} from "@/lib/orders/protocolo-de-entrega";
import { getSupabaseClient } from "@/lib/supabase";
import { getCompanyContext } from "@/lib/company-context";
import { ClipboardCheck, Loader2, Printer, Search, CheckSquare, Square, Tag, ArrowDownAZ, ArrowUpZA, CalendarCheck, CalendarClock, CalendarOff, CalendarX, LayoutList } from "lucide-react";
import { Input } from "@/components/ui/input";
import { OrderLabelPreview } from "./order-label-preview";
import { type OrderLabelPayload } from "@/lib/orders/order-label-print";
import QRCode from "qrcode";
import { createRoot } from "react-dom/client";
import { CustomSelect } from "@/components/ui/custom-select";
import { type OrderStatus } from "@/types/orders";
import { buildPublicOrderStatusUrl, ensureOrderPublicStatusToken } from "@/lib/orders/public-status-link";
import { parseDateValue } from "@/utils/formatters";

type BatchOrderLabelsModalProps = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
};

type OrderSummary = {
  id: string;
  number: number | string;
  clientName: string;
  createdAt: string;
  status: OrderStatus;
  deliveryDate: string | null;
};

type DeadlineFilter = "all" | "late" | "today" | "ontime" | "none";

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

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

function isDeadlineActionableOrder(order: Pick<OrderSummary, "status">) {
  return !isConcludedOrder(order.status);
}

export function BatchOrderLabelsModal({ open, onOpenChange }: BatchOrderLabelsModalProps) {
  const [loading, setLoading] = useState(false);
  const [orders, setOrders] = useState<OrderSummary[]>([]);
  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
  const [searchTerm, setSearchTerm] = useState("");
  const [isPrinting, setIsPrinting] = useState(false);
  const [printFormat, setPrintFormat] = useState<"sheet" | "thermal">("sheet");
  /* Qual documento esta sendo emitido. A selecao de pedidos e os filtros
     valem para os dois, entao trocar de aba nao perde o que ja foi marcado. */
  const [documento, setDocumento] = useState<"etiquetas" | "protocolo">("etiquetas");
  /* Qual via vai para o papel. "As duas" gasta uma folha por pedido e devolve
     uma assinada para o arquivo; uma via so emenda dois pedidos por folha. */
  const [viaDoProtocolo, setViaDoProtocolo] = useState<ModoDoProtocolo>("duas-vias");
  const [sortOrder, setSortOrder] = useState<"desc" | "asc">("desc");
  const [statusFilter, setStatusFilter] = useState<OrderStatus | "all">("all");
  const [deadlineFilter, setDeadlineFilter] = useState<DeadlineFilter>("all");
  
  // Invisible container for rendering labels to print
  const printContainerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (open) {
      fetchRecentOrders();
    } else {
      setSelectedIds(new Set());
      setSearchTerm("");
      setStatusFilter("all");
      setDeadlineFilter("all");
    }
  }, [open]);

  async function fetchRecentOrders() {
    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 os 50 pedidos mais recentes
      const { data: ordersData, error } = await supabase
        .from("orders")
        .select("id, number, created_at, status, client_id, quotes(delivery_date)")
        .in("user_id", tenantIds)
        .order("created_at", { ascending: false })
        .limit(50);

      if (error) throw error;

      if (ordersData && ordersData.length > 0) {
        const clientIds = Array.from(new Set(ordersData.map((o) => o.client_id).filter(Boolean)));
        let clientsMap: Record<string, string> = {};
        
        if (clientIds.length > 0) {
          const { data: clientsData } = await supabase
            .from("clients")
            .select("id, name, company_name")
            .in("id", clientIds);
            
          if (clientsData) {
            clientsMap = clientsData.reduce((acc, c) => {
              acc[c.id] = c.company_name || c.name || "Sem Nome";
              return acc;
            }, {} as Record<string, string>);
          }
        }

        const summary: OrderSummary[] = ordersData.map((o) => ({
          id: o.id,
          number: o.number,
          clientName: clientsMap[o.client_id] || "Sem Nome",
          createdAt: o.created_at,
          status: o.status as OrderStatus,
          deliveryDate: Array.isArray(o.quotes) ? (o.quotes as any)[0]?.delivery_date || null : (o.quotes as any)?.delivery_date || null,
        }));
        
        setOrders(summary);
      } else {
        setOrders([]);
      }
    } catch (err) {
      console.error("Erro ao buscar pedidos:", err);
    } finally {
      setLoading(false);
    }
  }

  const toggleSelection = (id: string) => {
    const newSet = new Set(selectedIds);
    if (newSet.has(id)) newSet.delete(id);
    else newSet.add(id);
    setSelectedIds(newSet);
  };

  const toggleAll = () => {
    if (selectedFilteredCount === filteredOrders.length && filteredOrders.length > 0) {
      const nextSelectedIds = new Set(selectedIds);
      filteredOrders.forEach((order) => nextSelectedIds.delete(order.id));
      setSelectedIds(nextSelectedIds);
    } else {
      const nextSelectedIds = new Set(selectedIds);
      filteredOrders.forEach((order) => nextSelectedIds.add(order.id));
      setSelectedIds(nextSelectedIds);
    }
  };

  const deadlineKpis = useMemo(() => {
    let late = 0;
    let today = 0;
    let ontime = 0;
    let none = 0;
    let all = 0;

    const todayDate = new Date();
    todayDate.setHours(0, 0, 0, 0);

    const baseOrders = orders.filter((o) => {
      const term = searchTerm.toLowerCase();
      const matchesTerm = String(o.number).includes(term) || o.clientName.toLowerCase().includes(term);
      const matchesStatus = statusFilter === "all" || o.status === statusFilter;
      return matchesTerm && matchesStatus;
    });

    for (const order of baseOrders) {
      all++;

      if (!isDeadlineActionableOrder(order)) continue;

      if (!order.deliveryDate) {
        none++;
        continue;
      }

      const deliveryDate = parseDateValue(order.deliveryDate);
      if (!deliveryDate) {
        none++;
        continue;
      }

      deliveryDate.setHours(0, 0, 0, 0);
      const diffDays = Math.round((deliveryDate.getTime() - todayDate.getTime()) / (1000 * 3600 * 24));

      if (diffDays < 0) late++;
      else if (diffDays === 0) today++;
      else ontime++;
    }

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

  const filteredOrders = useMemo(() => {
    const todayDate = new Date();
    todayDate.setHours(0, 0, 0, 0);

    return orders
      .filter((o) => {
        const term = searchTerm.toLowerCase();
        const matchesTerm = String(o.number).includes(term) || o.clientName.toLowerCase().includes(term);
        if (!matchesTerm) return false;

        if (statusFilter !== "all" && o.status !== statusFilter) return false;

        if (deadlineFilter !== "all") {
          if (!isDeadlineActionableOrder(o)) return false;

          if (!o.deliveryDate) {
            return deadlineFilter === "none";
          }

          const deliveryDate = parseDateValue(o.deliveryDate);
          if (!deliveryDate) {
            return deadlineFilter === "none";
          }

          if (deadlineFilter === "none") return false;

          deliveryDate.setHours(0, 0, 0, 0);
          const diffDays = Math.round((deliveryDate.getTime() - todayDate.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;
        }

        return true;
      })
      .sort((a, b) => {
        const timeA = new Date(a.createdAt).getTime();
        const timeB = new Date(b.createdAt).getTime();
        return sortOrder === "desc" ? timeB - timeA : timeA - timeB;
      });
  }, [orders, searchTerm, statusFilter, deadlineFilter, sortOrder]);

  const selectedFilteredCount = filteredOrders.filter((order) => selectedIds.has(order.id)).length;

  const kpiItems = [
    {
      id: "all" as const,
      title: "Todos",
      count: deadlineKpis.all,
      icon: LayoutList,
      bg: "#6F4BFF",
      accent: "#4A2CD8",
    },
    {
      id: "late" as const,
      title: "Em Atraso",
      count: deadlineKpis.late,
      icon: CalendarX,
      bg: "#FF2B67",
      accent: "#B31845",
    },
    {
      id: "today" as const,
      title: "Vence Hoje",
      count: deadlineKpis.today,
      icon: CalendarClock,
      bg: "#66C7FF",
      accent: "#2C98D4",
    },
    {
      id: "ontime" as const,
      title: "No Prazo",
      count: deadlineKpis.ontime,
      icon: CalendarCheck,
      bg: "#00C977",
      accent: "#078B56",
    },
    {
      id: "none" as const,
      title: "S/ Prazo",
      count: deadlineKpis.none,
      icon: CalendarOff,
      bg: "#7C6CFF",
      accent: "#5745E0",
    },
  ];

  /*
    Os protocolos dos pedidos marcados, em fila.

    Diferente da etiqueta em dois pontos que importam: aqui os ITENS de cada
    pedido entram no papel, e a folha e uma so por entrega — nao existem duas
    vias no lote, porque quem imprime trinta protocolos esta preparando trinta
    entregas, e a via que volta assinada e a que sai com a mercadoria.

    Uma consulta so traz os itens de todos os pedidos; buscar pedido a pedido
    seria trinta idas ao banco que o Oregon cobra em 200 ms cada.
  */
  async function handleBatchProtocolo() {
    if (selectedIds.size === 0) return;
    setIsPrinting(true);

    try {
      const supabase = getSupabaseClient();
      const { data: { user } } = await supabase.auth.getUser();
      if (!user) throw new Error("Não autenticado");

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

      const [{ data: pedidos, error: erroPedidos }, { data: perfil }, { data: itens }] = await Promise.all([
        supabase.from("orders").select("id,number,client_id,user_id").in("id", ids).in("user_id", tenantIds),
        supabase.from("profiles").select("*").in("id", tenantIds).limit(1).single(),
        supabase
          .from("order_items")
          .select("order_id,title,quantity,unit_type,width_m,height_m,length_m,selected_options,created_at")
          .in("order_id", ids)
          .order("created_at", { ascending: true }),
      ]);

      if (erroPedidos) throw erroPedidos;

      const idsDeClientes = Array.from(
        new Set((pedidos || []).map((p) => p.client_id).filter(Boolean) as string[])
      );
      const { data: clientes } = idsDeClientes.length
        ? await supabase.from("clients").select("*").in("id", idsDeClientes)
        : { data: [] as Array<Record<string, unknown>> };

      const porCliente = new Map((clientes || []).map((c) => [String(c.id), c]));
      const porPedido = new Map<string, typeof itens>();
      for (const item of itens || []) {
        const lista = porPedido.get(String(item.order_id)) || [];
        lista.push(item);
        porPedido.set(String(item.order_id), lista as never);
      }

      /* A ordem da tela e a ordem do papel: quem marcou na sequencia espera
         cortar na sequencia. */
      const ordenados = ids
        .map((id) => (pedidos || []).find((p) => String(p.id) === id))
        .filter(Boolean) as NonNullable<typeof pedidos>;

      const paraImprimir: ProtocoloPedido[] = ordenados.map((pedido) => {
        const cliente = pedido.client_id ? porCliente.get(String(pedido.client_id)) : null;
        return {
          numero: pedido.number,
          id: pedido.id,
          empresa: {
            nome: perfil?.store_name || perfil?.catalog_name || "Empresa",
            logoUrl: perfil?.logo_url || perfil?.catalog_logo_url || null,
            cnpj: perfil?.cnpj || null,
            telefone: perfil?.company_phone || perfil?.phone || perfil?.whatsapp || null,
            endereco: enderecoDaEmpresa(perfil as Record<string, unknown> | null),
          },
          cliente: {
            nome: (cliente?.name as string) || null,
            empresa: (cliente?.company_name as string) || null,
            documento: (cliente?.document as string) || null,
            telefone: (cliente?.phone as string) || (cliente?.whatsapp as string) || null,
            endereco: enderecoDoCliente(cliente as Record<string, unknown> | null),
          },
          itens: (porPedido.get(String(pedido.id)) || []).map((i) => ({
            titulo: i.title,
            quantity: i.quantity,
            unit_type: i.unit_type,
            width_m: i.width_m,
            height_m: i.height_m,
            length_m: i.length_m,
            variacao: variacaoDoItem(i.selected_options),
          })),
        };
      });

      /* NAO fecha o modal. Quem imprime em massa imprime em tandas — filtra
         por atraso, imprime, filtra por hoje, imprime de novo. Fechar aqui
         obriga a refazer o caminho inteiro a cada lote, e o pior e que fecha
         ANTES de a impressao terminar: a janela de impressao do navegador
         ainda esta aberta quando isto rodaria. */
      await imprimirProtocolo(paraImprimir, viaDoProtocolo);
    } catch (erro) {
      console.error("Erro ao imprimir os protocolos:", erro);
    } finally {
      setIsPrinting(false);
    }
  }

  async function handleBatchPrint() {
    if (selectedIds.size === 0) return;
    setIsPrinting(true);
    
    try {
      const supabase = getSupabaseClient();
      const { data: { user } } = await supabase.auth.getUser();
      if (!user) throw new Error("Não autenticado");

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

      // Busca dados completos dos pedidos selecionados
      const { data: fullOrders, error: ordersError } = await supabase
        .from("orders")
        .select("*, quotes(id, delivery_date, share_token)")
        .in("id", Array.from(selectedIds))
        .in("user_id", tenantIds);

      if (ordersError) throw ordersError;

      // Buscar profile (empresa)
      const { data: profileData } = await supabase
        .from("profiles")
        .select("*")
        .in("id", tenantIds)
        .limit(1)
        .single();
        
      const profileOwnerId = profileData?.id;
      const { data: domainData } = profileOwnerId
        ? await supabase
            .from("profile_custom_domains")
            .select("domain,verified")
            .eq("profile_id", profileOwnerId)
            .maybeSingle()
        : { data: null };

      // Buscar clientes
      const clientIds = Array.from(new Set(fullOrders.map(o => o.client_id).filter(Boolean)));
      const { data: clientsData } = await supabase
        .from("clients")
        .select("*")
        .in("id", clientIds);
        
      const clientsMap = (clientsData || []).reduce((acc, c) => {
        acc[c.id] = c;
        return acc;
      }, {} as Record<string, any>);

      // Preparar payloads
      const payloadsAndQRs: { payload: OrderLabelPayload, qrCode: string }[] = [];

      for (const orderData of fullOrders) {
        const clientData = clientsMap[orderData.client_id];
        
        const generatedPayload: 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?.cnpj || null,
          },
          order: {
            id: orderData.id,
            number: orderData.number,
            createdAt: orderData.created_at,
            totalAmount: orderData.total_amount,
            paidAmount: orderData.paid_amount,
            financialStatus: orderData.financial_status,
            status: orderData.status,
            notes: orderData.notes || orderData.internal_notes || null,
          },
          client: {
            name: clientData?.name || null,
            companyName: clientData?.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: Array.isArray(orderData.quotes) ? orderData.quotes[0]?.delivery_date : orderData.quotes?.delivery_date || null,
          },
        };

        const shareToken = await ensureOrderPublicStatusToken({
          orderId: orderData.id,
          user,
          existingToken: orderData.share_token,
          existingEnabled: orderData.share_enabled,
        });

        const profileSlug = profileData?.slug;
        const customDomain = String(domainData?.domain || "").trim().toLowerCase();
        const customDomainVerified = Boolean(domainData?.verified);
        
        const origin = typeof window !== "undefined" ? window.location.origin : "https://ktalogu.com.br";
        const resolvedUrl = process.env.NEXT_PUBLIC_PUBLIC_CATALOG_BASE_URL || origin;
        const publicBaseUrl = resolvedUrl.replace(":3002", ":3001").replace(/\/\/admin\./, "//").replace(/\/$/, "");
        const qrUrl =
          buildPublicOrderStatusUrl(
            publicBaseUrl,
            {
              slug: profileSlug,
              custom_domain: customDomain,
              custom_domain_verified: customDomainVerified,
            },
            shareToken
          ) || String(orderData.number);

        const qrCode = await QRCode.toDataURL(qrUrl, {
          width: 256,
          margin: 1,
          color: { dark: "#4425a7", light: "#ffffff" },
        });

        payloadsAndQRs.push({ payload: generatedPayload, qrCode });
      }

        // Agora renderiza todas para o HTML, dividindo em páginas se for formato folha
      const iframe = document.createElement('iframe');
      iframe.style.display = 'none';
      document.body.appendChild(iframe);
      
      const printDocument = iframe.contentWindow?.document;
      
      if (printDocument && printContainerRef.current) {
        const tempDiv = document.createElement("div");
        const root = createRoot(tempDiv);
        
        const sheetStyles = [
          "@page { size: A4 portrait; margin: 0; }",
          "html, body {",
          "  margin: 0;",
          "  padding: 0;",
          "  width: 210mm;",
          "  height: 297mm;",
          "}",
          ".print-root {",
          "  display: flex;",
          "  flex-direction: column;",
          "}",
          ".page-container {",
          "  width: 210mm;",
          "  height: 297mm;",
          "  page-break-after: always;",
          "  page-break-inside: avoid;",
          "  display: flex;",
          "  justify-content: center;",
          "  align-items: center;",
          "  overflow: hidden;",
          "}",
          ".page-container:last-child {",
          "  page-break-after: auto;",
          "}",
          ".labels-container {",
          "  display: grid;",
          "  grid-template-columns: 400px 400px;",
          "  grid-auto-rows: 282px;",
          "  gap: 0;",
          "  transform: scale(0.95);",
          "  transform-origin: center center;",
          "}",
          ".label-wrapper {",
          "  width: 400px;",
          "  height: 282px;",
          "  overflow: hidden;",
          "  background: white;",
          "  display: flex;",
          "  justify-content: center;",
          "  align-items: center;",
          "  box-sizing: border-box;",
          "}",
          ".label-wrapper:nth-child(even) > div {",
          "  border-left-width: 0 !important;",
          "}",
          ".label-wrapper:nth-child(n+3) > div {",
          "  border-top-width: 0 !important;",
          "}",
        ].join("\n");

        const thermalStyles = [
          "@page { size: 100mm auto; margin: 2mm; }",
          ".page-container {",
          "  width: 100%;",
          "}",
          ".labels-container {",
          "  display: flex;",
          "  flex-direction: column;",
          "  gap: 5mm;",
          "  width: 100%;",
          "  max-width: 100mm;",
          "  margin: 0 auto;",
          "}",
          ".label-wrapper {",
          "  border: 1px solid #cfc8ea;",
          "  overflow: hidden;",
          "  page-break-inside: avoid;",
          "  background: white;",
          "  display: flex;",
          "  justify-content: center;",
          "}",
          ".label-wrapper > div {",
          "  transform: scale(0.94);",
          "  transform-origin: top center;",
          "  margin-bottom: -16px;",
          "}",
        ].join("\n");

        // Chunk items para páginas (se for sheet, 8 por página. Se for thermal, tudo numa página só)
        const itemsPerPage = printFormat === 'sheet' ? 8 : payloadsAndQRs.length;
        const chunks = [];
        for (let i = 0; i < payloadsAndQRs.length; i += itemsPerPage) {
          chunks.push(payloadsAndQRs.slice(i, i + itemsPerPage));
        }
        
        root.render(
          <div className="print-root">
            {chunks.map((chunk, pageIndex) => (
              <div key={pageIndex} className="page-container">
                <div className="labels-container">
                  {chunk.map((item, index) => (
                    <div key={index} className="label-wrapper">
                      <OrderLabelPreview payload={item.payload} qrCodeDataUrl={item.qrCode} />
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        );
        
        // Aguarda a renderização do React e escreve no iframe
        setTimeout(() => {
          const contentHTML = tempDiv.innerHTML;
          
          printDocument.open();
          printDocument.write(`
            <!DOCTYPE html>
            <html>
              <head>
                <title>Imprimir Etiquetas</title>
                <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
                <style>
                  body { margin: 0; padding: 0; background: white; font-family: "Montserrat", sans-serif; }
                  * { box-sizing: border-box; -webkit-print-color-adjust: exact !important; color-adjust: exact !important; print-color-adjust: exact !important; }
                  ${printFormat === 'sheet' ? sheetStyles : thermalStyles}
                </style>
              </head>
              <body>
                ${contentHTML}
              </body>
            </html>
          `);
          printDocument.close();
          
          setTimeout(() => {
            iframe.contentWindow?.focus();
            iframe.contentWindow?.print();
            setTimeout(() => {
              document.body.removeChild(iframe);
              setIsPrinting(false);
              /* O modal fica aberto de proposito: ver o comentario em
                 `handleBatchProtocolo`. */
            }, 1000);
          }, 800);
        }, 1000);
      }

    } catch (err) {
      console.error("Erro ao imprimir em massa:", err);
      alert("Ocorreu um erro ao gerar as etiquetas.");
      setIsPrinting(false);
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent
        className="max-w-5xl overflow-hidden border-0 p-0 flex flex-col max-h-[85vh]"
        /*
          SO FECHA SE A PESSOA MANDAR FECHAR.

          Este modal guarda trabalho: filtro, ordenacao e a marcacao de dezenas
          de pedidos. Um clique fora por engano joga tudo isso fora, e a janela
          de impressao do navegador sobrepoe a tela inteira — fechar o dialogo
          ao voltar dela era o caminho mais rapido para perder a selecao. O X e
          o botao Cancelar continuam fechando.

          Mesmo tratamento do modal irmao, o de "Impressao Pedidos em Massa":
          dois modais gemeos que se comportam diferente sao pior que os dois
          errados juntos.
        */
        onPointerDownOutside={(evento) => evento.preventDefault()}
        onEscapeKeyDown={(evento) => evento.preventDefault()}
      >
        <div className="border-b border-zinc-200 bg-white px-5 pt-4 shrink-0">
          <div className="flex items-center gap-3">
            <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-[var(--ks-color-primary-soft)] text-[var(--ks-color-primary)]">
              {documento === "etiquetas" ? <Tag size={20} /> : <ClipboardCheck size={20} />}
            </div>
            <div>
              <DialogTitle className="text-lg font-semibold text-zinc-900">
                Emissão em massa
              </DialogTitle>
              <DialogDescription className="text-sm text-zinc-500">
                {documento === "etiquetas"
                  ? "Selecione os pedidos e imprima as etiquetas de uma só vez."
                  : "Selecione os pedidos e imprima os protocolos para colher assinatura na entrega."}
              </DialogDescription>
            </div>
          </div>

          {/* A selecao de pedidos vale para as duas abas: quem marcou trinta
              pedidos para etiqueta nao perde a marcacao ao pedir o protocolo
              dos mesmos trinta. */}
          <div className="mt-4 flex gap-1" role="tablist" aria-label="Documento a emitir">
            {([
              { id: "etiquetas", rotulo: "Etiquetas", icone: Tag },
              { id: "protocolo", rotulo: "Protocolo de entrega", icone: ClipboardCheck },
            ] as const).map((aba) => {
              const ativa = documento === aba.id;
              const Icone = aba.icone;
              return (
                <button
                  key={aba.id}
                  type="button"
                  role="tab"
                  aria-selected={ativa}
                  onClick={() => setDocumento(aba.id)}
                  className={`inline-flex items-center gap-2 rounded-t-xl border-b-2 px-4 py-2.5 text-sm font-semibold transition-colors ${
                    ativa
                      ? "border-[var(--ks-color-primary)] text-[var(--ks-color-primary)]"
                      : "border-transparent text-zinc-500 hover:text-zinc-800"
                  }`}
                >
                  <Icone size={16} />
                  {aba.rotulo}
                </button>
              );
            })}
          </div>
        </div>

        <div className="flex flex-col gap-4 p-5 flex-1 min-h-0">
          <div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-5 gap-3">
            {kpiItems.map((kpi) => {
              const isActive = deadlineFilter === kpi.id;
              const Icon = kpi.icon;

              return (
                <button
                  key={kpi.id}
                  type="button"
                  onClick={() => setDeadlineFilter(isActive ? "all" : kpi.id)}
                  className="relative overflow-hidden flex flex-col gap-2 p-3 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: "18px",
                    borderTopRightRadius: "8px",
                    borderBottomRightRadius: "18px",
                    borderBottomLeftRadius: "8px",
                  }}
                  title={`Filtrar por: ${kpi.title}`}
                >
                  <div className="relative z-10 flex justify-between items-start w-full">
                    <span
                      className="text-3xl font-black tracking-tight"
                      style={{ color: isActive ? "#FFFFFF" : kpi.accent }}
                    >
                      {kpi.count}
                    </span>
                    <div
                      className="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={16} strokeWidth={2.4} style={{ color: isActive ? "#FFFFFF" : kpi.accent }} />
                    </div>
                  </div>

                  <span
                    className="relative z-10 font-extrabold text-[11px] uppercase tracking-[0.12em]"
                    style={{ color: isActive ? "rgba(255,255,255,0.95)" : kpi.accent }}
                  >
                    {kpi.title}
                  </span>
                </button>
              );
            })}
          </div>

          {/* Top Bar with Search, Filters & Format */}
          <div className="flex flex-wrap gap-3 items-center">
            <div className="flex-1 min-w-[200px]">
              <Input
                placeholder="Buscar por número ou cliente"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                icon={<Search size={14} />}
              />
            </div>

            <div className="w-full sm:w-auto flex-1 min-w-[170px] max-w-full sm:max-w-[200px]">
              <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")}
                portal={false}
              />
            </div>
            
            <button
              type="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" ? <ArrowDownAZ size={18} /> : <ArrowUpZA size={18} />}
            </button>

            {documento === "etiquetas" ? (
              <div className="w-[200px]">
                <CustomSelect
                  options={[
                    { value: "sheet", label: "Folha A4 (Padrão)" },
                    { value: "thermal", label: "Impressora Térmica" }
                  ]}
                  value={printFormat}
                  onChange={(v) => setPrintFormat(v as any)}
                  portal={false}
                />
              </div>
            ) : (
              <div className="w-[240px]">
                <CustomSelect
                  options={[
                    { value: "duas-vias", label: "As duas vias" },
                    { value: "so-cliente", label: "Só a via do cliente" },
                    { value: "so-empresa", label: "Só a via da empresa" },
                  ]}
                  value={viaDoProtocolo}
                  onChange={(v) => setViaDoProtocolo(v as ModoDoProtocolo)}
                />
              </div>
            )}
          </div>

          {/* List of Orders */}
          <div className="flex-1 overflow-auto rounded-xl border border-zinc-200 bg-zinc-50/50">
            {loading ? (
              <div className="flex justify-center items-center h-full">
                <Loader2 className="w-6 h-6 animate-spin text-[var(--ks-color-primary)]" />
              </div>
            ) : filteredOrders.length === 0 ? (
              <div className="flex flex-col justify-center items-center h-full text-zinc-500 text-sm">
                Nenhum pedido encontrado.
              </div>
            ) : (
              <table className="w-full text-left text-sm">
                <thead className="bg-zinc-100/80 text-zinc-500 sticky top-0 z-10">
                  <tr>
                    <th className="p-3 font-semibold w-10">
                      <button onClick={toggleAll} className="text-zinc-400 hover:text-zinc-600 transition-colors">
                        {selectedFilteredCount === filteredOrders.length && filteredOrders.length > 0 ? (
                          <CheckSquare className="w-5 h-5 text-[var(--ks-color-primary)]" />
                        ) : (
                          <Square className="w-5 h-5" />
                        )}
                      </button>
                    </th>
                    <th className="p-3 font-semibold">Pedido</th>
                    <th className="p-3 font-semibold">Cliente</th>
                    <th className="p-3 font-semibold">Status</th>
                    <th className="p-3 font-semibold">Data</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-zinc-200">
                  {filteredOrders.map(order => {
                    const isSelected = selectedIds.has(order.id);
                    return (
                      <tr 
                        key={order.id} 
                        className={`hover:bg-white transition-colors cursor-pointer ${isSelected ? 'bg-indigo-50/30' : ''}`}
                        onClick={() => toggleSelection(order.id)}
                      >
                        <td className="p-3">
                          {isSelected ? (
                            <CheckSquare className="w-5 h-5 text-[var(--ks-color-primary)]" />
                          ) : (
                            <Square className="w-5 h-5 text-zinc-300" />
                          )}
                        </td>
                        <td className="p-3 font-bold text-zinc-900">#{order.number}</td>
                        <td className="p-3 text-zinc-700">{order.clientName}</td>
                        <td className="p-3">
                          <span className={`inline-flex items-center justify-center text-center border px-2 py-1 rounded-md text-[10px] font-bold uppercase tracking-wider leading-[1.2] shadow-sm ${
                            order.status === "finished" || order.status === "delivered"
                              ? "bg-emerald-50 text-emerald-700 border-emerald-200"
                              : order.status === "canceled"
                                ? "bg-rose-50 text-rose-700 border-rose-200"
                                : order.status === "in_production"
                                  ? "bg-sky-50 text-sky-700 border-sky-200"
                                  : "bg-slate-50 text-slate-600 border-slate-200"
                          }`}>
                            {statusLabel[order.status]}
                          </span>
                        </td>
                        <td className="p-3 text-zinc-500">{new Date(order.createdAt).toLocaleDateString('pt-BR')}</td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            )}
          </div>
        </div>

        <div className="border-t border-zinc-200 bg-zinc-50 px-5 py-4 shrink-0 flex items-center justify-between">
          <div className="text-sm font-medium text-zinc-600">
            <strong className="text-zinc-900">{selectedIds.size}</strong> pedidos selecionados
            {documento === "protocolo" && selectedIds.size > 0 ? (
              <span className="ml-2 text-xs font-normal text-zinc-500">
                {viaDoProtocolo === "duas-vias"
                  ? `${selectedIds.size} folha${selectedIds.size > 1 ? "s" : ""} · o cliente assina as duas e uma volta para você`
                  : `${Math.ceil(selectedIds.size / 2)} folha${Math.ceil(selectedIds.size / 2) > 1 ? "s" : ""} · dois pedidos por folha`}
              </span>
            ) : null}
          </div>
          <div className="flex gap-2">
            <button
              type="button"
              onClick={() => onOpenChange(false)}
              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-700 hover:bg-zinc-50"
            >
              Cancelar
            </button>
            <button
              type="button"
              onClick={documento === "etiquetas" ? handleBatchPrint : handleBatchProtocolo}
              disabled={selectedIds.size === 0 || isPrinting}
              className="inline-flex h-10 items-center justify-center gap-2 rounded-xl bg-[var(--ks-color-primary)] px-5 text-sm font-semibold text-white transition-colors hover:bg-[var(--ks-color-primary-strong)] disabled:opacity-60"
            >
              {isPrinting ? (
                <>
                  <Loader2 className="w-4 h-4 animate-spin" />
                  Gerando...
                </>
              ) : (
                <>
                  <Printer size={16} />
                  {documento === "etiquetas"
                    ? `Imprimir ${selectedIds.size} etiquetas`
                    : `Imprimir ${selectedIds.size} protocolos`}
                </>
              )}
            </button>
          </div>
        </div>

        {/* Hidden container for React Root */}
        <div ref={printContainerRef} style={{ display: 'none' }} />
      </DialogContent>
    </Dialog>
  );
}