"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import Link from "next/link";
import { useParams } from "next/navigation";
import Image from "next/image";
import { getSupabaseClient } from "@/lib/supabase";
import { canCompany, canReadFinancialLookup, getCompanyContext } from "@/lib/company-context";
import { PlanoDeRodagem } from "@/components/producao/plano-de-rodagem";
import type { ProductionSheetPayload } from "@/lib/orders/production-sheet-print";
import type { PainelDeProducao } from "@/lib/orders/eventos-de-producao";
import { NOME_DO_DIA, segundosUteisDasSessoes } from "@/lib/orders/expediente";
import { formatarDuracao } from "@/lib/orders/ficha-de-producao";
import { downloadPdvReceiptHtml, printPdvReceipt, type PdvReceiptPayload } from "@/lib/orders/pdv-receipt-print";
import { printOrderLabel, type OrderLabelPayload } from "@/lib/orders/order-label-print";
import { 
  ArrowLeft, 
  FileText, 
  MessageCircle, 
  Download, 
  CheckCircle2, 
  ClipboardCheck,
  Clock, 
  AlertCircle,
  MapPin,
  Phone,
  User,
  Calendar,
  UserCircle,
  Package,
  Wrench,
  Receipt,
  PenTool,
  Printer,
  Store,
  Tag,
  Plus,
  X,
  BarChart3,
} from "lucide-react";
import { Order, OrderItem, OrderStatus, Payment } from "@/types/orders";
import { minimoDaLinhaGravada, textoDoMinimoAplicado } from "@/lib/adicionais";
import { CustomSelect } from "@/components/ui/custom-select";
import { FinancialSection } from "@/components/orders/financial-section";
import { quantidadeDoItem } from "@/lib/orders/quantidade-do-item";
import { AnaliseDoPedido } from "@/components/orders/analise-do-pedido";
import { EstoqueDoPedido } from "@/components/estoque/estoque-do-pedido";
import { BotaoDeStatus } from "@/components/orders/botao-de-status";
import { ConversaDoPedido } from "@/components/orders/conversa-do-pedido";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import CaixaDeConfirmacao, { type Confirmacao } from "@/components/ui/caixa-de-confirmacao";
import { Aviso } from "@/components/ui/aviso";
import { fetchWhatsAppTemplates, resolveTemplate } from "@/lib/whatsapp-templates-client";
import { OrderLabelPrintModal } from "@/components/orders/order-label-print-modal";
import { ProtocoloPrintModal } from "@/components/orders/protocolo-print-modal";
import {
  OrderPrintDocument,
  type OrderPrintCompanyProfile,
  type OrderPrintDocumentOrder,
} from "@/components/orders/order-print-document";
import { buildPublicOrderStatusUrl, ensureOrderPublicStatusToken } from "@/lib/orders/public-status-link";
import { formatDateBr } from "@/utils/formatters";
import LinhaDoTempo from "@/components/agenda/linha-do-tempo";
import { BotaoDaNotaFiscal, NotasFiscaisDoPedido, useNotasDoPedido } from "@/components/fiscal/notas-fiscais-do-pedido";
import { LIMITE_DAS_OBSERVACOES, observacoesDoPedido } from "@/lib/orders/observacoes";
import { BlocoDeCamposProprios } from "@/components/campos-proprios/bloco-de-campos-proprios";

const statusOptions = [
  { 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" },
];

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

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

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

function statusColor(status: OrderStatus) {
  switch (status) {
    case "pending_production":
      return "ks-chip";
    case "in_production":
      return "ks-chip ks-chip-soft";
    case "finished":
      return "ks-chip ks-chip-success";
    case "delivered":
      return "ks-chip ks-chip-success";
    case "canceled":
      return "ks-chip ks-chip-danger";
    default:
      return "ks-chip";
  }
}

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

function formatDuration(totalSeconds: number) {
  const safe = Math.max(0, Math.floor(totalSeconds || 0));
  const hours = Math.floor(safe / 3600);
  const minutes = Math.floor((safe % 3600) / 60);
  const seconds = safe % 60;
  return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
}


function buildPdvReceiptPayloadFromOrder(params: {
  order: OrderWithRelations;
  items: OrderItem[];
  payments: Payment[];
  profile: CompanyProfile | null;
}): PdvReceiptPayload {
  const subtotal = params.items.reduce((sum, item) => sum + Number(item.total_price || item.quantity * item.unit_price || 0), 0);
  const total = Number(params.order.total_amount || 0);
  const discount = Math.max(0, subtotal - total);
  const paidTotal = params.payments.reduce((sum, payment) => sum + Number(payment.amount || 0), 0);
  const change = Math.max(0, paidTotal - total);
  const phone = params.profile?.company_phone || params.profile?.phone || "";
  const whatsapp = params.profile?.company_whatsapp || params.profile?.whatsapp || "";
  return {
    company: {
      name: params.profile?.catalog_name || params.profile?.store_name || "Empresa",
      logo_url: params.profile?.logo_url || params.profile?.catalog_logo_url || null,
      cnpj: params.profile?.cnpj || null,
      phone: phone || null,
      whatsapp: whatsapp || null,
      address: params.profile?.address || null,
    },
    order: {
      id: params.order.id,
      number: params.order.number,
      created_at: params.order.created_at,
    },
    client: {
      name: params.order.clients?.company_name || params.order.clients?.name || "Consumidor",
    },
    items: params.items.map((item) => ({
      title: item.title,
      quantity: Number(item.quantity || 0),
      unit_price: Number(item.unit_price || 0),
      line_total: Number(item.total_price || item.quantity * item.unit_price || 0),
      sku: item.products?.sku || null,
      barcode: item.products?.barcode || null,
      note: item.description || null,
    })),
    payments: params.payments.map((payment) => ({
      method: payment.payment_method,
      amount: Number(payment.amount || 0),
    })),
    totals: {
      subtotal,
      discount,
      total,
      paid_total: paidTotal,
      change,
    },
  };
}

function buildOrderLabelPayloadFromOrder(params: {
  order: OrderWithRelations;
  profile: CompanyProfile | null;
  deliveryAddress?: CatalogDeliveryAddress | null;
}): OrderLabelPayload {
  const companyPhone = params.profile?.company_phone || params.profile?.phone || "";
  const companyWhatsapp = params.profile?.company_whatsapp || params.profile?.whatsapp || "";
  const deliveryAddress = params.deliveryAddress || null;

  return {
    company: {
      name: params.profile?.catalog_name || params.profile?.store_name || "Empresa",
      logoUrl: params.profile?.logo_url || params.profile?.catalog_logo_url || null,
      phone: companyPhone || null,
      whatsapp: companyWhatsapp || null,
      address: params.profile?.address || null,
      cnpj: params.profile?.cnpj || null,
    },
    order: {
      id: params.order.id,
      number: params.order.number,
      createdAt: params.order.created_at,
      totalAmount: params.order.total_amount,
      paidAmount: params.order.paid_amount,
      financialStatus: params.order.financial_status,
      status: params.order.status,
      notes: params.order.notes || params.order.internal_notes || null,
    },
    client: {
      name: params.order.clients?.name || null,
      companyName: params.order.clients?.company_name || null,
      phone: deliveryAddress?.phone || params.order.clients?.phone || null,
      whatsapp: params.order.clients?.whatsapp || null,
      document: params.order.clients?.document || null,
      addressStreet: deliveryAddress?.street || params.order.clients?.address_street || null,
      addressNumber: deliveryAddress?.number || params.order.clients?.address_number || null,
      addressComplement: deliveryAddress?.complement || params.order.clients?.address_complement || null,
      addressNeighborhood: deliveryAddress?.neighborhood || params.order.clients?.address_neighborhood || null,
      addressCity: deliveryAddress?.city || params.order.clients?.address_city || null,
      addressState: deliveryAddress?.state || params.order.clients?.address_state || null,
      addressZip: deliveryAddress?.zip || params.order.clients?.address_zip || null,
      notes: params.order.clients?.notes || null,
    },
    quote: {
      notes: params.order.quotes?.notes || null,
      deliveryDate: params.order.delivery_date || params.order.quotes?.delivery_date || null,
    },
  };
}

function resolveProductionSeconds(order: OrderWithRelations | null, nowMs: number) {
  if (!order) return 0;
  const base = Number(order.production_accumulated_seconds || 0);
  if (!order.production_started_at) return Math.max(0, base);
  const startedMs = new Date(order.production_started_at).getTime();
  if (!Number.isFinite(startedMs)) return Math.max(0, base);
  const running = Math.max(0, Math.floor((nowMs - startedMs) / 1000));
  return Math.max(0, base + running);
}

type OrderWithRelations = Order & {
  quotes?: {
    id: string;
    number: number;
    user_id?: string | null;
    share_token?: string | null;
    share_enabled?: boolean | null;
    title?: string | null;
    internal_notes?: string | null;
    notes?: string | null;
    subtotal?: number | null;
    discount?: number | null;
    shipping?: number | null;
    shipping_details?: unknown | null;
    total?: number | null;
    delivery_date?: string | null;
  } | null;
  clients?: {
    name?: string | null;
    company_name?: string | null;
    type?: "pf" | "pj" | null;
    is_deleted?: boolean | null;
    document?: string | null;
    email?: string | null;
    phone?: string | null;
    whatsapp?: string | null;
    whatsapp_notify?: boolean | null;
    address_street?: string | null;
    address_number?: string | null;
    address_complement?: string | null;
    address_neighborhood?: string | null;
    address_city?: string | null;
    address_state?: string | null;
    address_zip?: string | null;
    notes?: string | null;
    tags?: string[] | null;
    active?: boolean | null;
  } | null;
};
type CompanyProfile = OrderPrintCompanyProfile;

type OrderSyncComparableItem = {
  product_id: string | null;
  title: string;
  description: string | null;
  quantity: number;
  unit_price: number;
  total_price: number;
  unit_type: string;
  width_m: number | null;
  height_m: number | null;
  length_m: number | null;
};

type OrderSyncChange = {
  index: number;
  type: "added" | "removed" | "changed";
  before: OrderSyncComparableItem | null;
  after: OrderSyncComparableItem | null;
};

type OrderSyncSummary = {
  added: number;
  removed: number;
  changed: number;
  totalChanges: number;
  /* Frete e desconto mudam o pedido sem mudar item nenhum. Sem este sinal, a
     tela concluia "nada mudou" olhando so a lista de itens. */
  totalChanged?: boolean;
  itemsBefore: number;
  itemsAfter: number;
  totalBefore: number;
  totalAfter: number;
  quoteSubtotal: number;
  quoteDiscount: number;
  quoteShipping: number;
};

type CatalogPaymentDetails = {
  catalogOrderId: string;
  catalogOrderNumber: number | null;
  status: string | null;
  statusDetail: string | null;
  method: string | null;
  methodLabel: string;
  conditionsLabel: string;
  providerMethodId: string | null;
  installments: number | null;
  reference: string | null;
  amount: number | null;
  paidAt: string | null;
};

type CatalogShippingDetails = {
  provider: string | null;
  providerLabel: string | null;
  carrierName: string | null;
  serviceName: string | null;
  amount: number;
  deliveryTime: number | null;
  destinationZip: string | null;
  logoUrl: string | null;
  pickupName: string | null;
  pickupAddress: string | null;
  pickupInstructions: string | null;
};

type CatalogDeliveryAddress = {
  source: string | null;
  label: string | null;
  recipientName: string | null;
  phone: string | null;
  zip: string | null;
  street: string | null;
  number: string | null;
  complement: string | null;
  neighborhood: string | null;
  city: string | null;
  state: string | null;
  reference: string | null;
  summary: string | null;
};

function readRecord(value: unknown) {
  return value && typeof value === "object" && !Array.isArray(value) ? (value as Record<string, unknown>) : null;
}

function normalizeText(value: unknown) {
  return String(value || "").trim();
}

function normalizeTrackingCodes(value: unknown) {
  if (!Array.isArray(value)) return [];
  return value
    .map((entry) => normalizeText(entry))
    .filter(Boolean);
}

function formatZipCode(value: string | null | undefined) {
  const digits = String(value || "").replace(/\D/g, "");
  if (digits.length !== 8) return value || "-";
  return `${digits.slice(0, 5)}-${digits.slice(5)}`;
}

function formatShippingDeadline(days: number | null) {
  if (!days || days <= 0) return "-";
  if (days === 1) return "1 dia util";
  return `${days} dias uteis`;
}

function normalizeShippingProviderLabel(value: unknown) {
  const normalized = normalizeText(value).toLowerCase();
  if (!normalized) return null;
  if (normalized === "melhor_envio") return "Melhor Envio";
  if (normalized === "superfrete") return "Super Frete";
  if (normalized === "pickup") return "Retirada no balcão";
  return normalized
    .split(/[_\-\s]+/)
    .filter(Boolean)
    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
    .join(" ");
}

function extractCatalogShippingDetails(value: unknown, fallbackAmount = 0): CatalogShippingDetails | null {
  const root = readRecord(value);
  if (!root) return fallbackAmount > 0
    ? {
        provider: null,
        providerLabel: null,
        carrierName: null,
        serviceName: null,
        amount: fallbackAmount,
        deliveryTime: null,
        destinationZip: null,
        logoUrl: null,
        pickupName: null,
        pickupAddress: null,
        pickupInstructions: null,
      }
    : null;

  const shipping = readRecord(root.shipping);
  const shippingRecord = shipping || root;
  const option = readRecord(shippingRecord.option);
  const amountCandidate = Number(shippingRecord.amount ?? option?.price ?? fallbackAmount ?? 0);
  const amount = Number.isFinite(amountCandidate) && amountCandidate > 0 ? amountCandidate : Math.max(0, fallbackAmount);
  const providerLabel = normalizeShippingProviderLabel(
    shippingRecord.provider_label ?? option?.provider_label ?? shippingRecord.provider ?? option?.provider
  );
  const carrierName = normalizeText(option?.name ?? shippingRecord.name) || null;
  const serviceName = normalizeText(option?.service ?? shippingRecord.service) || null;
  const deliveryTimeCandidate = Number(option?.delivery_time ?? shippingRecord.delivery_time ?? 0);
  const deliveryTime = Number.isFinite(deliveryTimeCandidate) && deliveryTimeCandidate > 0 ? deliveryTimeCandidate : null;
  const destinationZip = normalizeText(shippingRecord.destination_zip) || null;
  const logoUrl = normalizeText(option?.logo_url ?? shippingRecord.logo_url) || null;
  const provider = normalizeText(option?.provider ?? shippingRecord.provider).toLowerCase() || null;
  const pickupRecord = readRecord(option?.pickup ?? shippingRecord.pickup);

  if (!providerLabel && !carrierName && !serviceName && amount <= 0) {
    return null;
  }

  return {
    provider,
    providerLabel,
    carrierName,
    serviceName,
    amount,
    deliveryTime,
    destinationZip,
    logoUrl,
    pickupName: normalizeText(pickupRecord?.name) || null,
    pickupAddress: normalizeText(pickupRecord?.address_summary) || null,
    pickupInstructions: normalizeText(pickupRecord?.instructions) || null,
  };
}

function extractCatalogDeliveryAddress(value: unknown): CatalogDeliveryAddress | null {
  const root = readRecord(value);
  if (!root) return null;

  const delivery = readRecord(root.delivery_address);
  const clientProfile = readRecord(root.client_profile);
  const selected = delivery || clientProfile;
  if (!selected) return null;

  const zip = normalizeText(delivery?.zip ?? clientProfile?.address_zip) || null;
  const street = normalizeText(delivery?.street ?? clientProfile?.address_street) || null;
  const number = normalizeText(delivery?.number ?? clientProfile?.address_number) || null;
  const complement = normalizeText(delivery?.complement ?? clientProfile?.address_complement) || null;
  const neighborhood = normalizeText(delivery?.neighborhood ?? clientProfile?.address_neighborhood) || null;
  const city = normalizeText(delivery?.city ?? clientProfile?.address_city) || null;
  const state = normalizeText(delivery?.state ?? clientProfile?.address_state) || null;
  const summary =
    normalizeText(delivery?.summary) ||
    [
      [street, number].filter(Boolean).join(", "),
      complement || "",
      neighborhood || "",
      [city, state].filter(Boolean).join(" / "),
      zip ? `CEP ${formatZipCode(zip)}` : "",
    ]
      .filter(Boolean)
      .join(" • ");

  if (!summary && !street && !zip) {
    return null;
  }

  return {
    source: normalizeText(delivery?.source) || "legacy_snapshot",
    label: normalizeText(delivery?.label) || null,
    recipientName: normalizeText(delivery?.recipient_name ?? clientProfile?.company_name ?? clientProfile?.name) || null,
    phone: normalizeText(delivery?.phone ?? clientProfile?.phone ?? clientProfile?.whatsapp) || null,
    zip,
    street,
    number,
    complement,
    neighborhood,
    city,
    state,
    reference: normalizeText(delivery?.reference ?? clientProfile?.notes) || null,
    summary: summary || null,
  };
}

function formatPaymentBrandName(value: string) {
  return value
    .split(/[_\-\s]+/)
    .filter(Boolean)
    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
    .join(" ");
}

function buildCatalogPaymentPresentation(params: {
  method?: string | null;
  paymentType?: string | null;
  rawRequest?: unknown;
  rawResponse?: unknown;
}) {
  const rawRequest = readRecord(params.rawRequest);
  const rawResponse = readRecord(params.rawResponse);
  const formData = readRecord(rawRequest?.formData);
  const installmentsFromRequest = Number(formData?.installments || 0);
  const installmentsFromResponse = Number(rawResponse?.installments || 0);
  const installments = installmentsFromRequest > 0 ? installmentsFromRequest : installmentsFromResponse > 0 ? installmentsFromResponse : null;
  const providerMethodId =
    normalizeText(rawResponse?.payment_method_id) ||
    normalizeText(formData?.payment_method_id) ||
    normalizeText(params.method) ||
    null;
  const brandLabel =
    providerMethodId && !["pix", "account_money"].includes(providerMethodId)
      ? formatPaymentBrandName(providerMethodId)
      : null;

  if (params.method === "pix") {
    return {
      methodLabel: "Pix",
      conditionsLabel: "Pix a vista",
      providerMethodId,
      installments,
    };
  }

  if (params.method === "credit_card") {
    return {
      methodLabel: brandLabel ? `Cartao de credito ${brandLabel}` : "Cartao de credito",
      conditionsLabel: installments && installments > 1 ? `${installments}x no cartao` : "A vista no cartao",
      providerMethodId,
      installments,
    };
  }

  if (params.method === "debit_card") {
    return {
      methodLabel: brandLabel ? `Cartao de debito ${brandLabel}` : "Cartao de debito",
      conditionsLabel: "A vista no cartao",
      providerMethodId,
      installments,
    };
  }

  if (params.method === "ticket") {
    return {
      methodLabel: "Boleto",
      conditionsLabel: "Pagamento por boleto",
      providerMethodId,
      installments,
    };
  }

  if (params.method === "wallet") {
    return {
      methodLabel: "Saldo em conta",
      conditionsLabel: "Pagamento a vista",
      providerMethodId,
      installments,
    };
  }

  return {
    methodLabel: brandLabel || "Pagamento online",
    conditionsLabel: installments && installments > 1 ? `${installments}x` : "Pagamento online",
    providerMethodId,
    installments,
  };
}

export default function OrderDetailsPage() {
  const params = useParams();
  const [order, setOrder] = useState<OrderWithRelations | null>(null);
  const [items, setItems] = useState<OrderItem[]>([]);
  const [payments, setPayments] = useState<Payment[]>([]);
  const [loading, setLoading] = useState(true);
  const [updating, setUpdating] = useState(false);
  const [errorDetails, setErrorDetails] = useState<string>("");
  /* Falha que não é "o pedido não existe" (rede, login renovando, trava do
     login): a tela tenta de novo sozinha e, se ainda falhar, oferece
     "Tentar de novo" em vez de dizer que o pedido não existe. */
  const [falhaPassageira, setFalhaPassageira] = useState(false);
  const tentativasDeCarregar = useRef(0);
  const [onlineApproved, setOnlineApproved] = useState(false);
  const [canReadFinancial, setCanReadFinancial] = useState(false);
  const [canWriteFinancial, setCanWriteFinancial] = useState(false);
  const [canWriteOrders, setCanWriteOrders] = useState(false);
  const [canEditOrders, setCanEditOrders] = useState(false);
  const [generatingProductionSheet, setGeneratingProductionSheet] = useState(false);
  const [timerNowMs, setTimerNowMs] = useState(() => Date.now());
  /* O painel de produção: etapas, sessões do cronômetro e apontamentos. */
  const [painel, setPainel] = useState<PainelDeProducao | null>(null);
  /* A aba aberta: itens, financeiro, produção e, no pedido do catálogo, entrega. */
  const [aba, setAba] = useState<"itens" | "financeiro" | "producao" | "analise" | "conversa" | "entrega">("itens");
  /* Notas fiscais do pedido: o botão da barra diz em que pé está, a aba Financeiro lista. */
  const notasFiscais = useNotasDoPedido(order?.id);
  const [emissaoFiscalAberta, setEmissaoFiscalAberta] = useState(false);

  /* Quem chegou pelo aviso de mensagem quer a conversa aberta, e nao a lista de
     itens: o endereco diz qual aba mostrar. */
  useEffect(() => {
    const pedida = new URLSearchParams(window.location.search).get("aba");
    if (pedida === "conversa" || pedida === "entrega" || pedida === "financeiro" || pedida === "producao") {
      setAba(pedida);
    }
  }, []);
  const [creatorName, setCreatorName] = useState<string | null>(null);
  const [profile, setProfile] = useState<CompanyProfile | null>(null);
  const [sharingStatusLink, setSharingStatusLink] = useState(false);
  const [copiedStatusLink, setCopiedStatusLink] = useState(false);
  const [cancelingPdvSale, setCancelingPdvSale] = useState(false);
  const [cancelPdvModalOpen, setCancelPdvModalOpen] = useState(false);
  const [cancelFeedbackModal, setCancelFeedbackModal] = useState<{ title: string; message: string } | null>(null);
  const [clientDetailsOpen, setClientDetailsOpen] = useState(false);
  const [syncingFromQuote, setSyncingFromQuote] = useState(false);
  /* As 17 caixas do navegador desta tela viraram faixa e caixa da casa. O
     `alert` do navegador some sem avisar depois que a página abre algumas
     seguidas, e aí o botão parece que não faz nada. */
  const [avisoDaTela, setAvisoDaTela] = useState<string | null>(null);
  const [erroDaTela, setErroDaTela] = useState<string | null>(null);
  const [confirmacao, setConfirmacao] = useState<Confirmacao | null>(null);
  const [syncPreviewOpen, setSyncPreviewOpen] = useState(false);
  const [syncPreviewSummary, setSyncPreviewSummary] = useState<OrderSyncSummary | null>(null);
  const [syncPreviewChanges, setSyncPreviewChanges] = useState<OrderSyncChange[]>([]);
  const [syncStatus, setSyncStatus] = useState<"idle" | "checking" | "synced" | "divergent" | "error">("idle");
  const [syncStatusSummary, setSyncStatusSummary] = useState<OrderSyncSummary | null>(null);
  const [labelModalOpen, setLabelModalOpen] = useState(false);
  const [protocoloModalOpen, setProtocoloModalOpen] = useState(false);
  const [catalogPaymentDetails, setCatalogPaymentDetails] = useState<CatalogPaymentDetails | null>(null);
  const [catalogShippingDetails, setCatalogShippingDetails] = useState<CatalogShippingDetails | null>(null);
  const [catalogDeliveryAddress, setCatalogDeliveryAddress] = useState<CatalogDeliveryAddress | null>(null);
  /* Codigo de rastreio e uma etiqueta, nao uma redacao: um campo de uma linha
     com botao de adicionar, e cada codigo vira uma tag com X. O textarea de
     120px de altura para guardar 13 caracteres nao fazia sentido nenhum. */
  const [codigosDeRastreio, setCodigosDeRastreio] = useState<string[]>([]);
  const [novoCodigoDeRastreio, setNovoCodigoDeRastreio] = useState("");
  const [trackingUrlInput, setTrackingUrlInput] = useState("");
  const [trackingNotesInput, setTrackingNotesInput] = useState("");
  const [savingTracking, setSavingTracking] = useState(false);
  const [editandoPrazo, setEditandoPrazo] = useState(false);
  const [prazoInput, setPrazoInput] = useState("");
  const [salvandoPrazo, setSalvandoPrazo] = useState(false);
  const [erroPrazo, setErroPrazo] = useState<string | null>(null);
  const [editandoObservacoes, setEditandoObservacoes] = useState(false);
  const [observacoesInput, setObservacoesInput] = useState("");
  const [salvandoObservacoes, setSalvandoObservacoes] = useState(false);
  const [erroObservacoes, setErroObservacoes] = useState<string | null>(null);
  const [trackingFeedback, setTrackingFeedback] = useState<{ type: "success" | "error"; message: string } | null>(null);

  const fetchOrder = useCallback(async () => {
    try {
      /* `id` vem da URL e pode nao ser um UUID — foi o que aconteceu com o
         link quebrado /dashboard/orders/new, que caiu nesta rota e mandou a
         string "new" para o Postgres. O banco respondia 22P02 e a tela
         despejava o JSON do erro no rosto do usuario. Barrar aqui devolve o
         "Pedido nao encontrado" limpo, sem consultar o banco a toa. */
      const ehUuid = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(
        String(params.id || "")
      );
      if (!ehUuid) {
        setOrder(null);
        setItems([]);
        setPayments([]);
        setCatalogPaymentDetails(null);
        setCatalogShippingDetails(null);
        setCatalogDeliveryAddress(null);
        setLoading(false);
        return;
      }

      const supabase = getSupabaseClient();
      const {
        data: { user },
      } = await supabase.auth.getUser();
      if (!user) {
        setOrder(null);
        setItems([]);
        setPayments([]);
        setCatalogPaymentDetails(null);
        setCatalogShippingDetails(null);
        setCatalogDeliveryAddress(null);
        setLoading(false);
        return;
      }

      const ctx = await getCompanyContext(supabase, user);
      const tenantIds = ctx.tenantIds?.length ? ctx.tenantIds : [user.id];
      /* Consulta de apoio, nao tela: quem le qualquer tela do Financeiro ve o
         que este pedido recebeu. Cobrar a chave do modulo escondia o pagamento
         de quem so cuida de Contas a receber. */
      const nextCanReadFinancial = canReadFinancialLookup(ctx, user.id);
      const nextCanWriteFinancial = canCompany(ctx, user.id, "financial.receivables.settle");
      const nextCanWriteOrders = canCompany(ctx, user.id, "orders.write");
      const nextCanEditOrders = canCompany(ctx, user.id, "orders.edit");
      setCanReadFinancial(nextCanReadFinancial);
      setCanWriteFinancial(nextCanWriteFinancial);
      setCanWriteOrders(nextCanWriteOrders);
      setCanEditOrders(nextCanEditOrders);
      
      // 1. Busca o pedido com join em quotes
      const { data: rawOrderData, error: orderError } = await supabase
        .from("orders")
        .select("*, quotes(id, number, user_id, share_token, share_enabled, title, internal_notes, notes, subtotal, discount, shipping, shipping_details, total, delivery_date)")
        .eq("id", params.id)
        .in("user_id", tenantIds)
        .single();

      if (orderError) throw orderError;

      type OrderFromDb = Order & {
        quotes:
          | {
              id: string;
              number: number;
              user_id?: string | null;
              share_token?: string | null;
              share_enabled?: boolean | null;
              title?: string | null;
              internal_notes?: string | null;
              notes?: string | null;
              subtotal?: number | null;
              discount?: number | null;
              shipping?: number | null;
              shipping_details?: unknown | null;
              total?: number | null;
              delivery_date?: string | null;
            }[]
          | {
              id: string;
              number: number;
              user_id?: string | null;
              share_token?: string | null;
              share_enabled?: boolean | null;
              title?: string | null;
              internal_notes?: string | null;
              notes?: string | null;
              subtotal?: number | null;
              discount?: number | null;
              shipping?: number | null;
              shipping_details?: unknown | null;
              total?: number | null;
              delivery_date?: string | null;
            }
          | null;
      };

      const baseOrder = rawOrderData as OrderFromDb;
      const orderData: OrderWithRelations = {
        ...baseOrder,
        quotes: Array.isArray(baseOrder.quotes) ? baseOrder.quotes[0] ?? null : baseOrder.quotes,
      };

      // 2. Busca o cliente manualmente
      if (orderData && orderData.client_id) {
         const { data: clientData } = await supabase
            .from("clients")
            .select("name, company_name, type, is_deleted, document, email, phone, whatsapp, whatsapp_notify, address_street, address_number, address_complement, address_neighborhood, address_city, address_state, address_zip, notes, tags, active")
            .eq("id", orderData.client_id)
            .in("user_id", tenantIds)
            .single();
         
         if (clientData) {
             orderData.clients = clientData;
         }
      }

      const fallbackShippingDetails = extractCatalogShippingDetails(
        orderData.quotes?.shipping_details,
        Number(orderData.quotes?.shipping ?? 0)
      );

      setOrder(orderData);

      // Buscar dados da empresa (profile) para o PDF
      const { data: profileData } = await supabase
        .from("profiles")
        .select("*")
        .eq("id", orderData.user_id)
        .maybeSingle();
      
      if (profileData) {
        setProfile(profileData);
      }

      // Resolver nome do criador se existir created_by
      if (orderData.created_by) {
        resolveCreatorName(orderData.created_by, orderData.user_id);
      }

      const { data: itemsData, error: itemsError } = await supabase
        .from("order_items")
        .select("*, products(sku, barcode)")
        .eq("order_id", params.id);

      if (itemsError) throw itemsError;
      setItems((itemsData as OrderItem[]) || []);

      if (nextCanReadFinancial) {
        const { data: paymentsData, error: paymentsError } = await supabase
          .from("payments")
          .select("*")
          .eq("order_id", params.id)
          .in("user_id", tenantIds)
          .order("payment_date", { ascending: false });

        if (paymentsError) console.error("Error fetching payments", paymentsError);
        setPayments((paymentsData as Payment[]) || []);
      } else {
        setPayments([]);
      }

      const { data: catalogOrder } = await supabase
        .from("catalog_orders")
        .select("id,number,payment_status,payment_method,payment_reference,paid_at,cart_payload")
        .eq("approved_order_id", params.id)
        .maybeSingle();

      if (catalogOrder?.id) {
        setCatalogDeliveryAddress(extractCatalogDeliveryAddress(catalogOrder.cart_payload));
        setCatalogShippingDetails(
          extractCatalogShippingDetails(catalogOrder.cart_payload, Number(orderData.quotes?.shipping ?? 0)) || fallbackShippingDetails
        );

        const { data: catalogPayment } = await supabase
          .from("catalog_order_payments")
          .select("status,provider_status_detail,payment_method,payment_type,provider_payment_id,amount,approved_at,raw_request,raw_response")
          .eq("catalog_order_id", catalogOrder.id)
          .order("status", { ascending: true })
          .order("approved_at", { ascending: false, nullsFirst: false })
          .order("created_at", { ascending: false })
          .limit(1)
          .maybeSingle();

        const presentation = buildCatalogPaymentPresentation({
          method: catalogPayment?.payment_method || catalogOrder.payment_method || null,
          paymentType: catalogPayment?.payment_type || null,
          rawRequest: catalogPayment?.raw_request,
          rawResponse: catalogPayment?.raw_response,
        });

        setCatalogPaymentDetails({
          catalogOrderId: catalogOrder.id,
          catalogOrderNumber: catalogOrder.number || null,
          status: catalogPayment?.status || catalogOrder.payment_status || null,
          statusDetail: catalogPayment?.provider_status_detail || null,
          method: catalogPayment?.payment_method || catalogOrder.payment_method || null,
          methodLabel: presentation.methodLabel,
          conditionsLabel: presentation.conditionsLabel,
          providerMethodId: presentation.providerMethodId,
          installments: presentation.installments,
          reference: catalogPayment?.provider_payment_id || catalogOrder.payment_reference || null,
          amount: Number(catalogPayment?.amount || orderData.total_amount || 0),
          paidAt: catalogPayment?.approved_at || catalogOrder.paid_at || null,
        });
      } else {
        setCatalogPaymentDetails(null);
        setCatalogShippingDetails(fallbackShippingDetails);
        setCatalogDeliveryAddress(null);
      }

      const { data: historyData, error: historyError } = await supabase
        .from("order_history")
        .select("notes")
        .eq("order_id", params.id)
        .order("created_at", { ascending: false });

      if (!historyError && historyData) {
        const isOnline = (historyData as Array<{ notes?: string | null }>).some((row) => {
          const note = String(row.notes || "").toLowerCase();
          return note.includes("aprovação pública") || note.includes("aprovacao publica");
        });
        setOnlineApproved(isOnline);
      }
      tentativasDeCarregar.current = 0;
      setFalhaPassageira(false);
      setErrorDetails("");
    } catch (err) {
      console.error("Erro ao carregar pedido:", err);
      /* PGRST116 = o .single() não achou linha: o pedido não existe (ou é de
         outra empresa). Qualquer outra coisa é passageira: tenta de novo. */
      const naoExiste = (err as { code?: string } | null)?.code === "PGRST116";
      if (!naoExiste && tentativasDeCarregar.current < 2) {
        tentativasDeCarregar.current += 1;
        await new Promise((r) => setTimeout(r, 800 * tentativasDeCarregar.current));
        return fetchOrder();
      }
      setFalhaPassageira(!naoExiste);
      if (err instanceof Error) {
        setErrorDetails(err.message);
      } else {
        try {
          setErrorDetails(String((err as { message?: string } | null)?.message || JSON.stringify(err)));
        } catch {
          setErrorDetails("Erro desconhecido ao carregar pedido.");
        }
      }
    } finally {
      setLoading(false);
    }
  }, [params.id]);

  const tentarCarregarDeNovo = () => {
    tentativasDeCarregar.current = 0;
    setFalhaPassageira(false);
    setLoading(true);
    void fetchOrder();
  };

  async function resolveCreatorName(userId: string, orderUserId: string) {
    try {
      const supabase = getSupabaseClient();
      
      // Primeiro verifica se é o dono da empresa (user_id igual ao user_id do pedido)
      if (userId === orderUserId) {
        setCreatorName("Empresa (Admin)");
        return;
      }
      
      // Se não for o dono, busca informações do funcionário
      const { data: employee } = await supabase
        .from("employee_profiles")
        .select("full_name")
        .eq("user_id", userId)
        .maybeSingle();
      
      if (employee?.full_name) {
        setCreatorName(employee.full_name);
        return;
      }
      
      // Fallback: perfil geral
      const { data: profile } = await supabase
        .from("profiles")
        .select("full_name")
        .eq("id", userId)
        .maybeSingle();
      
      if (profile?.full_name) {
        setCreatorName(profile.full_name);
        return;
      }
      
      setCreatorName("Usuário");
    } catch (error) {
      console.warn("Erro ao resolver nome do criador:", error);
      setCreatorName("Usuário");
    }
  }

  function handlePrint() {
    window.print();
  }

  function handlePrintPdvReceipt() {
    if (!order) return;
    try {
      const payload = buildPdvReceiptPayloadFromOrder({ order, items, payments, profile });
      printPdvReceipt(payload);
    } catch (error) {
      const message = error instanceof Error ? error.message : "Falha ao imprimir cupom não fiscal.";
      setErroDaTela(message);
    }
  }

  function handleDownloadPdvReceipt() {
    if (!order) return;
    try {
      const payload = buildPdvReceiptPayloadFromOrder({ order, items, payments, profile });
      downloadPdvReceiptHtml(payload);
    } catch (error) {
      const message = error instanceof Error ? error.message : "Falha ao baixar cupom não fiscal.";
      setErroDaTela(message);
    }
  }

  async function handlePrintProductionSheet() {
    if (!order) return;

    setGeneratingProductionSheet(true);
    try {
      const { buildProductionSheetHtml } = await import("@/lib/orders/production-sheet-print");
      const res = await fetch(`/api/orders/${order.id}/production-sheet`, { cache: "no-store" });
      const json = (await res.json().catch(() => null)) as (ProductionSheetPayload & { error?: string }) | null;
      if (!res.ok || !json) {
        throw new Error(json?.error || "Nao foi possivel gerar a ordem de producao.");
      }
      if (json.error) {
        throw new Error(json.error);
      }

      const iframe = document.createElement("iframe");
      iframe.setAttribute("aria-hidden", "true");
      iframe.style.position = "fixed";
      iframe.style.right = "0";
      iframe.style.bottom = "0";
      iframe.style.width = "0";
      iframe.style.height = "0";
      iframe.style.border = "0";
      iframe.style.opacity = "0";
      iframe.style.pointerEvents = "none";

      const cleanup = () => {
        iframe.onload = null;
        if (iframe.parentNode) {
          iframe.parentNode.removeChild(iframe);
        }
      };

      iframe.onload = () => {
        const frameWindow = iframe.contentWindow;
        if (!frameWindow) {
          cleanup();
          setErroDaTela("Nao foi possivel abrir a impressao da ordem de producao.");
          return;
        }

        const onAfterPrint = () => {
          frameWindow.removeEventListener("afterprint", onAfterPrint);
          cleanup();
        };

        frameWindow.addEventListener("afterprint", onAfterPrint);
        window.setTimeout(() => {
          frameWindow.focus();
          frameWindow.print();
        }, 120);

        window.setTimeout(cleanup, 15000);
      };

      iframe.srcdoc = buildProductionSheetHtml(json, { autoPrint: false, autoClose: false });
      document.body.appendChild(iframe);
    } catch (err) {
      console.error("Erro ao gerar ordem de producao:", err);
      const message = err instanceof Error ? err.message : "Erro ao gerar ordem de producao.";
      setErroDaTela(message);
    } finally {
      setGeneratingProductionSheet(false);
    }
  }

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

  /* Recarrega quando o status ou o cronômetro mudam: é quando nascem eventos. */
  const painelOrderId = order?.id ?? null;
  const painelStatus = order?.status ?? null;
  const painelStartedAt = order?.production_started_at ?? null;
  useEffect(() => {
    if (!painelOrderId) return;
    let ativo = true;
    (async () => {
      try {
        const res = await fetch(`/api/orders/${painelOrderId}/producao`, { cache: "no-store" });
        const json = (await res.json().catch(() => null)) as (PainelDeProducao & { error?: string }) | null;
        if (!ativo) return;
        setPainel(res.ok && json && !json.error ? json : null);
      } catch {
        if (ativo) setPainel(null);
      }
    })();
    return () => {
      ativo = false;
    };
  }, [painelOrderId, painelStatus, painelStartedAt]);

  useEffect(() => {
    if (!order?.production_started_at) return;
    const interval = window.setInterval(() => setTimerNowMs(Date.now()), 1000);
    return () => window.clearInterval(interval);
  }, [order?.production_started_at]);

  const handleStatusChange = async (newStatus: string) => {
    if (!order) return;
    if (newStatus === order.status) return;
    if (!canWriteOrders) return;
    if (isPdvOrder(order)) {
      setErroDaTela("Vendas do PDV não possuem fluxo de produção e não permitem alteração manual de status.");
      return;
    }
    
    /* Voltar um pedido pronto para a fila é raro e desfaz trabalho: pede
       confirmação com a caixa da casa, e não com a do navegador, que o Chrome
       deixa de mostrar depois de algumas seguidas na mesma página. */
    if (order.status === "finished" && newStatus === "pending_production") {
      setConfirmacao({
        titulo: "Voltar o pedido para Aguardando Produção?",
        texto: "Ele sai de Finalizado e volta para a fila. O tempo de produção já apontado continua registrado.",
        confirmar: "Voltar para a fila",
        aoConfirmar: () => {
          setConfirmacao(null);
          return aplicarMudancaDeStatus(newStatus);
        },
      });
      return;
    }

    await aplicarMudancaDeStatus(newStatus);
  };

  const aplicarMudancaDeStatus = async (newStatus: string) => {
    if (!order) return;

    setUpdating(true);
    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;
              production_started_at?: string | null;
              production_started_by?: string | null;
              production_accumulated_seconds?: number;
              production_last_stopped_at?: string | null;
              production_updated_at?: string | null;
            };
          }
        | null;
      if (!res.ok) throw new Error(json?.error || "Erro ao atualizar status do pedido.");

      setOrder({
        ...order,
        status: (json?.order?.status || newStatus) as OrderStatus,
        production_started_at: json?.order?.production_started_at ?? order.production_started_at ?? null,
        production_started_by: json?.order?.production_started_by ?? order.production_started_by ?? null,
        production_accumulated_seconds:
          typeof json?.order?.production_accumulated_seconds === "number"
            ? json.order.production_accumulated_seconds
            : order.production_accumulated_seconds ?? 0,
        production_last_stopped_at:
          json?.order?.production_last_stopped_at ?? order.production_last_stopped_at ?? null,
        production_updated_at:
          json?.order?.production_updated_at ?? order.production_updated_at ?? null,
      });
      setTimerNowMs(Date.now());
      // toast.success("Status atualizado com sucesso");
    } catch (err) {
      console.error("Erro ao atualizar status:", err);
      setErroDaTela(err instanceof Error ? err.message : "Erro ao atualizar status do pedido.");
    } finally {
      setUpdating(false);
    }
  };

  const handleCancelPdvSale = async () => {
    if (!order) return;
    if (!isPdvOrder(order)) return;
    if (order.status === "canceled") return;
    if (!canWriteOrders) return;

    setCancelingPdvSale(true);
    try {
      const response = await fetch("/api/pdv/cancel-sale", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ order_id: order.id }),
      });
      const json = (await response.json().catch(() => null)) as
        | {
            ok?: boolean;
            error?: string;
            reversed_payments?: number;
          }
        | null;

      if (!response.ok) {
        throw new Error(json?.error || "Falha ao cancelar venda PDV.");
      }

      await fetchOrder();
      setCancelPdvModalOpen(false);
      const reversedCount = Number(json?.reversed_payments || 0);
      if (reversedCount > 0) {
        setCancelFeedbackModal({
          title: "Venda cancelada",
          message: `Venda PDV cancelada com sucesso. ${reversedCount} pagamento(s) estornado(s).`,
        });
      } else {
        setCancelFeedbackModal({
          title: "Venda cancelada",
          message: "Venda PDV cancelada com sucesso.",
        });
      }
    } catch (error) {
      const message = error instanceof Error ? error.message : "Falha ao cancelar venda PDV.";
      setCancelFeedbackModal({
        title: "Falha no cancelamento",
        message,
      });
    } finally {
      setCancelingPdvSale(false);
    }
  };

  const handleWhatsApp = () => {
    if (!order || !order.clients) return;
    const phone = order.clients?.whatsapp || "";
    const digits = phone.replace(/\D/g, "");
    const normalized = digits.startsWith("55") ? digits : `55${digits}`;
    if (!normalized) return;
    ensureOrderStatusShareLink().then(async (share) => {
      if (!share) return;
      const templates = await fetchWhatsAppTemplates();
      const message = resolveTemplate(
        templates.order_status,
        "Olá! Segue atualização sobre seu pedido #{{numero_pedido}}. Status atual: *{{status}}*. Acompanhe o progresso em tempo real: {{link}}",
        {
          numero_pedido: String(order.number),
          status: statusLabel[order.status],
          link: share.url,
        }
      );
      const url = `https://wa.me/${normalized}?text=${encodeURIComponent(message)}`;
      window.open(url, "_blank");
    });
  };

  const publicBaseUrl = (() => {
    const origin = typeof window !== "undefined" ? window.location.origin : "https://ktalogu.com.br";
    const resolved = process.env.NEXT_PUBLIC_PUBLIC_CATALOG_BASE_URL || origin;
    const normalized = resolved.replace(":3002", ":3001").replace(/\/\/admin\./, "//");
    return normalized.replace(/\/$/, "");
  })();

  async function ensureOrderStatusShareLink() {
    if (!order?.quotes?.id) {
      setErroDaTela("Não foi possível gerar o link de status deste pedido (Orçamento não encontrado).");
      return null;
    }
    setSharingStatusLink(true);
    try {
      const supabase = getSupabaseClient();
      const {
        data: { user },
      } = await supabase.auth.getUser();
      if (!user) throw new Error("Usuário não autenticado");

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

      setOrder((prev) =>
        prev
          ? {
              ...prev,
              share_enabled: true,
              share_token: token,
            }
          : prev
      );

      // Buscar slug do perfil para montar a URL correta
      let profileSlug = profile?.slug || "";
      if (!profileSlug && order.user_id) {
         const { data: profileData } = await supabase
            .from("profiles")
            .select("slug")
            .eq("id", order.user_id)
            .maybeSingle();
         if (profileData?.slug) profileSlug = profileData.slug;
      }

      if (!profileSlug) {
         throw new Error("Slug da loja não encontrado.");
      }

      const profileOwnerId = order.user_id || "";
      const { data: domainData } = profileOwnerId
        ? await supabase
            .from("profile_custom_domains")
            .select("domain,verified")
            .eq("profile_id", profileOwnerId)
            .maybeSingle()
        : { data: null };

      const customDomain = String((domainData as { domain?: string | null } | null)?.domain || "").trim().toLowerCase();
      const customDomainVerified = Boolean((domainData as { verified?: boolean | null } | null)?.verified);
      const url = buildPublicOrderStatusUrl(
        publicBaseUrl,
        {
          slug: profileSlug,
          custom_domain: customDomain,
          custom_domain_verified: customDomainVerified,
        },
        token
      );
      if (!url) {
        throw new Error("Nao foi possivel montar a URL publica de status.");
      }
      return { token, url };
    } catch (err) {
      console.error("Erro ao gerar link de status:", err);
      setErroDaTela("Erro ao gerar link de status: " + (err instanceof Error ? err.message : String(err)));
      return null;
    } finally {
      setSharingStatusLink(false);
    }
  }

  async function handleCopyStatusLink() {
    const share = await ensureOrderStatusShareLink();
    if (!share) return;
    try {
      let copied = false;
      if (navigator.clipboard && document.hasFocus()) {
        await navigator.clipboard.writeText(share.url);
        copied = true;
      } else {
        const textarea = document.createElement("textarea");
        textarea.value = share.url;
        textarea.setAttribute("readonly", "true");
        textarea.style.position = "fixed";
        textarea.style.opacity = "0";
        document.body.appendChild(textarea);
        textarea.select();
        textarea.setSelectionRange(0, textarea.value.length);
        copied = document.execCommand("copy");
        document.body.removeChild(textarea);
      }
      if (!copied) throw new Error("copy_failed");
      setCopiedStatusLink(true);
      window.setTimeout(() => setCopiedStatusLink(false), 1500);
    } catch (err) {
      console.error("Erro ao copiar link de status:", err);
      setErroDaTela("Não foi possível copiar o link.");
    }
  }

  async function handleOpenSyncPreview() {
    if (!order) return;
    if (!canEditOrders) {
      setErroDaTela("Sem permissão para editar pedido.");
      return;
    }
    setSyncingFromQuote(true);
    try {
      const response = await fetch(`/api/orders/${order.id}/sync-from-quote`, {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ mode: "preview" }),
      });
      const json = (await response.json().catch(() => null)) as
        | {
            error?: string;
            summary?: OrderSyncSummary;
            changes?: OrderSyncChange[];
          }
        | null;
      if (!response.ok) {
        throw new Error(json?.error || "Falha ao carregar prévia da atualização do pedido.");
      }
      setSyncPreviewSummary(json?.summary || null);
      setSyncPreviewChanges(Array.isArray(json?.changes) ? json.changes : []);
      if ((json?.summary?.totalChanges || 0) > 0 || json?.summary?.totalChanged) {
        setSyncStatus("divergent");
      } else {
        setSyncStatus("synced");
      }
      setSyncStatusSummary(json?.summary || null);
      setSyncPreviewOpen(true);
    } catch (error) {
      setErroDaTela(error instanceof Error ? error.message : "Falha ao carregar prévia da atualização do pedido.");
    } finally {
      setSyncingFromQuote(false);
    }
  }

  async function handleApplySyncFromQuote() {
    if (!order) return;
    if (!canEditOrders) {
      setErroDaTela("Sem permissão para editar pedido.");
      return;
    }
    setSyncingFromQuote(true);
    try {
      const response = await fetch(`/api/orders/${order.id}/sync-from-quote`, {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ mode: "apply" }),
      });
      const json = (await response.json().catch(() => null)) as
        | {
            error?: string;
            message?: string;
            summary?: OrderSyncSummary;
            changes?: OrderSyncChange[];
          }
        | null;
      if (!response.ok) {
        throw new Error(json?.error || "Falha ao aplicar atualização do pedido.");
      }
      setSyncPreviewSummary(json?.summary || null);
      setSyncPreviewChanges(Array.isArray(json?.changes) ? json.changes : []);
      setSyncStatus("synced");
      setSyncStatusSummary(json?.summary || null);
      setAvisoDaTela(String(json?.message || "Pedido atualizado com sucesso."));
      setSyncPreviewOpen(false);
      await fetchOrder();
    } catch (error) {
      setErroDaTela(error instanceof Error ? error.message : "Falha ao aplicar atualização do pedido.");
    } finally {
      setSyncingFromQuote(false);
    }
  }

  const refreshSyncStatus = useCallback(async () => {
    const allowSyncCheck = Boolean(order?.id && order?.quotes?.id && canEditOrders && !isPdvOrder(order));
    if (!allowSyncCheck || !order?.id) {
      setSyncStatus("idle");
      setSyncStatusSummary(null);
      return;
    }
    setSyncStatus("checking");
    try {
      const response = await fetch(`/api/orders/${order.id}/sync-from-quote`, {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ mode: "preview" }),
      });
      const json = (await response.json().catch(() => null)) as
        | {
            error?: string;
            summary?: OrderSyncSummary;
          }
        | null;
      if (!response.ok) {
        throw new Error(json?.error || "Falha ao verificar sincronização.");
      }
      const nextSummary = json?.summary || null;
      setSyncStatusSummary(nextSummary);
      if ((nextSummary?.totalChanges || 0) > 0 || nextSummary?.totalChanged) {
        setSyncStatus("divergent");
      } else {
        setSyncStatus("synced");
      }
    } catch {
      setSyncStatus("error");
      setSyncStatusSummary(null);
    }
  }, [order, canEditOrders]);

  useEffect(() => {
    void refreshSyncStatus();
  }, [refreshSyncStatus]);

  useEffect(() => {
    setCodigosDeRastreio(normalizeTrackingCodes(order?.shipping_tracking_codes));
    setNovoCodigoDeRastreio("");
    setTrackingUrlInput(normalizeText(order?.shipping_tracking_url));
    setTrackingNotesInput(normalizeText(order?.shipping_tracking_notes));
    setTrackingFeedback(null);
  }, [
    order?.id,
    order?.shipping_tracking_codes,
    order?.shipping_tracking_url,
    order?.shipping_tracking_notes,
  ]);

  function adicionarCodigoDeRastreio() {
    const bruto = novoCodigoDeRastreio.trim();
    if (!bruto) return;
    /* Aceita colar varios de uma vez, separados por virgula, ponto e virgula ou
       quebra de linha — e o que sai de um painel de transportadora. */
    const novos = bruto
      .split(/[\s,;]+/)
      .map((item) => item.trim().toUpperCase())
      .filter(Boolean);
    setCodigosDeRastreio((atuais) => {
      const juntos = [...atuais];
      for (const codigo of novos) {
        if (!juntos.includes(codigo)) juntos.push(codigo);
      }
      return juntos;
    });
    setNovoCodigoDeRastreio("");
  }

  function removerCodigoDeRastreio(codigo: string) {
    setCodigosDeRastreio((atuais) => atuais.filter((item) => item !== codigo));
  }

  async function handleSaveTracking() {
    if (!order) return;
    if (!catalogOrder) {
      setErroDaTela("Rastreio manual disponível apenas para pedidos do catálogo.");
      return;
    }
    if (!canEditOrders) {
      setErroDaTela("Sem permissão para editar pedido.");
      return;
    }

    setSavingTracking(true);
    setTrackingFeedback(null);

    try {
      const response = await fetch(`/api/orders/${order.id}/tracking`, {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({
          tracking_codes: codigosDeRastreio,
          tracking_url: trackingUrlInput,
          tracking_notes: trackingNotesInput,
        }),
      });

      const json = (await response.json().catch(() => null)) as
        | {
            error?: string;
            message?: string;
          }
        | null;

      if (!response.ok) {
        throw new Error(json?.error || "Falha ao salvar rastreio.");
      }

      setTrackingFeedback({
        type: "success",
        message: json?.message || "Rastreio atualizado com sucesso.",
      });
      await fetchOrder();
    } catch (error) {
      setTrackingFeedback({
        type: "error",
        message: error instanceof Error ? error.message : "Falha ao salvar rastreio.",
      });
    } finally {
      setSavingTracking(false);
    }
  }

  const totalPaid = payments.reduce((acc, p) => acc + (p.amount || 0), 0);
  const remainingAmount = (order?.total_amount || 0) - totalPaid;
  const productionSeconds = resolveProductionSeconds(order, timerNowMs);
  const productionRunning = Boolean(order?.production_started_at);
  /* Tempo útil: as sessões do cronômetro cortadas pelo expediente, ao vivo. */
  const tempoUtilSeg = painel ? segundosUteisDasSessoes(painel.resumo.sessoes, painel.expediente, timerNowMs) : null;
  const etapasVisiveis = painel?.resumo.etapas ?? [];

  if (loading) {
    return (
      <div className="flex items-center justify-center h-screen text-[var(--ks-color-text-muted)]">
        Carregando pedido...
      </div>
    );
  }

  if (!order) {
    if (falhaPassageira) {
      return (
        <div className="flex flex-col items-center justify-center h-[60vh] gap-4 px-4 text-center">
          <AlertCircle size={48} className="text-[var(--ks-color-text-soft)]" />
          <h2 className="text-xl font-semibold text-[var(--ks-color-text-primary)]">Não conseguimos carregar este pedido agora</h2>
          <p className="max-w-md text-sm text-[var(--ks-color-text-muted)]">
            A conexão oscilou no meio do caminho. O pedido está guardado; é só tentar de novo.
          </p>
          <button type="button" onClick={tentarCarregarDeNovo} className="ks-button ks-button-primary">
            Tentar de novo
          </button>
          <Link href="/dashboard/orders" className="text-sm text-[var(--ks-color-primary)] hover:underline">
            Voltar para lista
          </Link>
          {errorDetails ? <p className="max-w-md text-[11px] text-[var(--ks-color-text-soft)]">Detalhe: {errorDetails}</p> : null}
        </div>
      );
    }
    return (
      <div className="flex flex-col items-center justify-center h-[60vh] gap-4">
        <AlertCircle size={48} className="text-[var(--ks-color-text-soft)]" />
        <h2 className="text-xl font-semibold text-[var(--ks-color-text-primary)]">Pedido não encontrado</h2>
        <Link href="/dashboard/orders" className="text-[var(--ks-color-primary)] hover:underline">
          Voltar para lista
        </Link>
      </div>
    );
  }

  const pdvOrder = isPdvOrder(order);
  const catalogOrder = isCatalogOrder(order);
  const canSyncFromQuote = Boolean(order.quotes?.id) && !pdvOrder && canEditOrders;
  /**
   * Onde a sincronização faz sentido.
   *
   * Antes só valia em "Aguardando Produção", e o botão aparecia igual nos
   * outros status, apagado, com a explicação escondida num balãozinho de
   * passar o mouse. Quem estava com o pedido em produção — que é justamente
   * quando o cliente muda a quantidade — clicava e não acontecia nada.
   *
   * Em produção agora vale, com aviso do que se perde. Depois de finalizado ou
   * cancelado não vale: mexer nos itens ali reescreveria pedido entregue.
   */
  const podeSincronizarAgora =
    canSyncFromQuote && (order.status === "pending_production" || order.status === "in_production");
  /* Ha o que atualizar quando algum item mudou OU quando so o valor final
     mudou. O segundo caso e o frete acrescentado depois no orcamento: nenhum
     item muda, e mesmo assim o pedido precisa acompanhar. */
  const haOQueAtualizar =
    syncPreviewChanges.length > 0 ||
    Boolean(syncPreviewSummary?.totalChanged) ||
    Math.abs(Number(syncPreviewSummary?.totalAfter ?? 0) - Number(syncPreviewSummary?.totalBefore ?? 0)) > 0.005;
  /**
   * Os números do pedido saem do pedido.
   *
   * Aqui morava o bug que fazia a tela mentir: "Subtotal dos itens", "Valor
   * final" e o Total do cabeçalho vinham de `order.quotes`, o cabeçalho do
   * ORÇAMENTO, enquanto as linhas da tabela vinham do pedido. Mexer no
   * orçamento mudava o que o pedido dizia valer, sem o pedido ter mudado nada.
   * Foi assim que um pedido de 50 unidades apareceu valendo o preço de 60.
   *
   * O pedido guarda só o valor final; desconto e frete separados moram no
   * orçamento. Então a diferença entre a soma dos itens e o valor do pedido é
   * lida do próprio pedido: para menos é desconto, para mais é acréscimo. É
   * sempre verdade, e não depende de um orçamento que pode ter mudado depois.
   */
  const itemsSubtotal = items.reduce((acc, item) => acc + Number(item.total_price || item.quantity * item.unit_price || 0), 0);
  const totalDoPedido = order.total_amount === null || order.total_amount === undefined
    ? itemsSubtotal
    : Math.max(0, Number(order.total_amount));
  const quoteSubtotal = itemsSubtotal;
  const quoteDiscount = Math.max(0, itemsSubtotal - totalDoPedido);
  const quoteShipping = Math.max(0, totalDoPedido - itemsSubtotal);
  const quoteTotal = totalDoPedido;

  /**
   * O nome da diferença, quando dá para saber o nome.
   *
   * O pedido guarda só o valor final, então a diferença entre a soma dos itens
   * e ele é um número sem etiqueta — e chamá-la de "Acréscimos" deixava um
   * frete de R$ 50 solto na tela, sem dizer o que era.
   *
   * O orçamento vinculado guarda frete e desconto separados. Se as duas
   * parcelas dele fecham EXATAMENTE a diferença do pedido, então o orçamento
   * explica o pedido e as linhas podem ser nomeadas. Se não fecham — porque o
   * orçamento mudou depois, ou porque o total foi ajustado na mão —, volta o
   * rótulo genérico: melhor um nome vago do que um nome errado.
   */
  const diferencaDoPedido = totalDoPedido - itemsSubtotal;
  const freteDoOrcamento = Math.max(0, Number(order.quotes?.shipping ?? 0));
  const descontoDoOrcamento = Math.max(0, Number(order.quotes?.discount ?? 0));
  const orcamentoExplicaADiferenca =
    (freteDoOrcamento > 0 || descontoDoOrcamento > 0) &&
    Math.abs(freteDoOrcamento - descontoDoOrcamento - diferencaDoPedido) < 0.01;

  /* O orçamento vinculado mudou depois que o pedido nasceu? Isso vira um aviso,
     não um número trocado por baixo do pano. */
  const totalDoOrcamento =
    order.quotes?.total === null || order.quotes?.total === undefined ? null : Number(order.quotes.total);
  const orcamentoDivergente =
    totalDoOrcamento !== null && Number.isFinite(totalDoOrcamento) && Math.abs(totalDoOrcamento - totalDoPedido) > 0.01;
  const clientAddressParts = [
    [catalogDeliveryAddress?.street || order.clients?.address_street, catalogDeliveryAddress?.number || order.clients?.address_number]
      .filter(Boolean)
      .join(", "),
    catalogDeliveryAddress?.complement || order.clients?.address_complement || "",
    catalogDeliveryAddress?.neighborhood || order.clients?.address_neighborhood || "",
    [catalogDeliveryAddress?.city || order.clients?.address_city, catalogDeliveryAddress?.state || order.clients?.address_state]
      .filter(Boolean)
      .join(" - "),
    catalogDeliveryAddress?.zip
      ? `CEP ${formatZipCode(catalogDeliveryAddress.zip)}`
      : order.clients?.address_zip
        ? `CEP ${formatZipCode(order.clients.address_zip)}`
        : "",
  ].filter(Boolean);
  const clientFullAddress = catalogDeliveryAddress?.summary || clientAddressParts.join(" • ");
  const deliveryRecipientName =
    catalogDeliveryAddress?.recipientName || order.clients?.company_name || order.clients?.name || "Nao informado";
  const deliveryContactPhone = catalogDeliveryAddress?.phone || order.clients?.phone || order.clients?.whatsapp || null;
  const deliverySourceLabel =
    catalogDeliveryAddress?.source === "saved_address"
      ? "Endereco salvo na conta"
      : catalogDeliveryAddress?.source === "checkout_form"
        ? "Informado no checkout"
        : catalogDeliveryAddress?.source
          ? "Snapshot do pedido"
          : null;
  const clientDisplayName = order.clients?.company_name || order.clients?.name || "Cliente não informado";
  const orderOriginLabel = pdvOrder
    ? "Venda PDV"
    : catalogOrder
      ? "Catálogo Público"
      : order.quotes
        ? `Orçamento #${order.quotes.number}`
        : "Pedido manual";
  async function salvarPrazo(valor: string) {
    if (!order?.id) return;
    setSalvandoPrazo(true);
    setErroPrazo(null);
    try {
      const resposta = await fetch(`/api/orders/${order.id}/delivery-date`, {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ delivery_date: valor || null }),
      });
      const json = (await resposta.json().catch(() => null)) as { error?: string } | null;
      if (!resposta.ok) throw new Error(json?.error || "Falha ao salvar o prazo.");
      setEditandoPrazo(false);
      await fetchOrder();
    } catch (erro) {
      setErroPrazo(erro instanceof Error ? erro.message : "Falha ao salvar o prazo.");
    } finally {
      setSalvandoPrazo(false);
    }
  }

  async function salvarObservacoes() {
    if (!order?.id) return;
    setSalvandoObservacoes(true);
    setErroObservacoes(null);
    try {
      const resposta = await fetch(`/api/orders/${order.id}/observacoes`, {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ notes: observacoesInput }),
      });
      const json = (await resposta.json().catch(() => null)) as { error?: string } | null;
      if (!resposta.ok) throw new Error(json?.error || "Falha ao salvar as observações.");
      setEditandoObservacoes(false);
      await fetchOrder();
    } catch (erro) {
      setErroObservacoes(erro instanceof Error ? erro.message : "Falha ao salvar as observações.");
    } finally {
      setSalvandoObservacoes(false);
    }
  }

  /* As do pedido mandam; enquanto ele não tem as dele, valem as "Observações
     para o cliente" do orçamento (lib/orders/observacoes.ts). */
  const observacoes = observacoesDoPedido(order, order.quotes);

  /* A data propria do pedido manda; o orcamento so cobre pedidos anteriores a
     existencia da coluna, que ainda nao foram salvos uma vez. */
  const dueDateValue = order.delivery_date || order.quotes?.delivery_date || null;
  const dueLabel = dueDateValue ? formatDateBr(dueDateValue) : "Não informada";
  const catalogShippingAmount = Math.max(0, Number(catalogShippingDetails?.amount ?? quoteShipping ?? 0));
  /* Retirada quase sempre custa zero, entao o bloco nao pode depender do valor:
     era assim que o pedido chegava na equipe parecendo entrega comum. */
  const catalogShippingIsPickup = String(catalogShippingDetails?.provider || "").toLowerCase() === "pickup";
  const shippingPrimaryLabel = catalogShippingIsPickup
    ? catalogShippingDetails?.pickupName || catalogShippingDetails?.serviceName || "Retirada no balcão"
    : catalogShippingDetails?.serviceName || catalogShippingDetails?.carrierName || "Frete selecionado";
  const shippingSecondaryLabel =
    catalogShippingDetails?.serviceName && catalogShippingDetails?.carrierName
      ? catalogShippingDetails.carrierName
      : null;
  const trackingCodes = normalizeTrackingCodes(order.shipping_tracking_codes);
  const trackingUrl = normalizeText(order.shipping_tracking_url) || null;
  const trackingNotes = normalizeText(order.shipping_tracking_notes) || null;
  const trackingUpdatedAt = order.shipping_tracking_updated_at
    ? new Date(order.shipping_tracking_updated_at).toLocaleString("pt-BR")
    : null;


  return (
      <div className="ks-pedido min-h-screen bg-[var(--ks-color-bg-body)] pb-20 print:bg-white print:min-h-0 print:pb-0">
        <div className="no-print w-full px-4 pt-4 sm:px-6 lg:px-8">
          {erroDaTela ? (
            <Aviso tom="ruim" className="mb-3" aoFechar={() => setErroDaTela(null)}>
              {erroDaTela}
            </Aviso>
          ) : null}

          {avisoDaTela ? (
            <Aviso tom="bom" className="mb-3" aoFechar={() => setAvisoDaTela(null)}>
              {avisoDaTela}
            </Aviso>
          ) : null}

          {/* O orçamento mudou depois que o pedido nasceu. Antes isso trocava o
              valor exibido do pedido por baixo do pano; agora é um aviso, e a
              decisão de atualizar é de quem está olhando. */}
          {orcamentoDivergente && !pdvOrder ? (
            <Aviso
              className="mb-3"
              titulo="O orçamento mudou depois deste pedido"
              acao={
                podeSincronizarAgora ? (
                  <button
                    type="button"
                    onClick={handleOpenSyncPreview}
                    disabled={syncingFromQuote}
                    className="ks-button ks-button-primary ks-button-sm"
                  >
                    {syncingFromQuote ? "Carregando…" : "Ver o que mudaria"}
                  </button>
                ) : null
              }
            >
              O orçamento #{order.quotes?.number} está em{" "}
              <strong className="ks-num text-[var(--ks-color-text-primary)]">
                {formatMoney(Number(totalDoOrcamento ?? 0))}
              </strong>{" "}
              hoje, e este pedido está em{" "}
              <strong className="ks-num text-[var(--ks-color-text-primary)]">{formatMoney(totalDoPedido)}</strong>.{" "}
              {podeSincronizarAgora
                ? "O pedido só muda se você mandar."
                : `Pedido ${order.status === "canceled" ? "cancelado" : "finalizado"} não atualiza pelo orçamento.`}
            </Aviso>
          ) : null}
          {/* Ações do pedido, acima do bloco; o status é o botão de maior peso, no canto direito. */}
          <div className="mb-2 sm:hidden">
                <BotaoDeStatus
                  status={order.status}
                  opcoes={statusOptions}
                  pdv={pdvOrder}
                  disabled={updating || !canWriteOrders}
                  atualizando={updating}
                  onChange={(valor) => handleStatusChange(valor)}
                />
          </div>
          <div className="-mx-4 mb-3 flex items-center gap-2 overflow-x-auto overflow-y-hidden px-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden sm:mx-0 sm:flex-wrap sm:overflow-visible sm:px-0">
                {!pdvOrder ? (
                  <Link href={`/dashboard/quotes/${order.quotes?.id ?? order.quote_id}`} className="ks-button ks-button-soft ks-button-sm shrink-0">
                    <FileText size={14} />
                    Orçamento
                  </Link>
                ) : null}
                {!pdvOrder ? (
                  <button type="button" onClick={handleWhatsApp} className="ks-button ks-button-soft ks-button-sm shrink-0">
                    <MessageCircle size={14} />
                    WhatsApp
                  </button>
                ) : null}
                {!pdvOrder ? (
                  <button type="button" onClick={handleCopyStatusLink} disabled={sharingStatusLink} className="ks-button ks-button-soft ks-button-sm shrink-0">
                    <MapPin size={14} />
                    {sharingStatusLink ? "Gerando link…" : copiedStatusLink ? "Link copiado" : "Link de status"}
                  </button>
                ) : null}
                {!pdvOrder ? (
                  <button type="button" onClick={handlePrintProductionSheet} disabled={generatingProductionSheet} className="ks-button ks-button-soft ks-button-sm shrink-0">
                    <Printer size={14} />
                    {generatingProductionSheet ? "Gerando…" : "Ordem de produção"}
                  </button>
                ) : null}
                {/* Fora dos status em que funciona, o botão não aparece: botão
                    apagado com a explicação só no balãozinho vira botão morto. */}
                {podeSincronizarAgora ? (
                  <button
                    type="button"
                    onClick={handleOpenSyncPreview}
                    disabled={syncingFromQuote}
                    className="ks-button ks-button-soft ks-button-sm shrink-0"
                  >
                    <Clock size={14} />
                    {syncingFromQuote ? "Carregando…" : "Sincronizar orçamento"}
                  </button>
                ) : null}
                {pdvOrder && order.status !== "canceled" ? (
                  <button
                    type="button"
                    onClick={() => setCancelPdvModalOpen(true)}
                    disabled={cancelingPdvSale || !canWriteOrders}
                    className="ks-button ks-button-soft ks-button-sm shrink-0 text-[var(--ks-color-status-danger)]"
                  >
                    <AlertCircle size={14} />
                    {cancelingPdvSale ? "Cancelando…" : "Cancelar venda"}
                  </button>
                ) : null}
                {pdvOrder ? (
                  <button type="button" onClick={handlePrintPdvReceipt} className="ks-button ks-button-soft ks-button-sm shrink-0">
                    <Printer size={14} />
                    Cupom
                  </button>
                ) : null}
                {pdvOrder ? (
                  <button type="button" onClick={handleDownloadPdvReceipt} className="ks-button ks-button-soft ks-button-sm shrink-0">
                    <Download size={14} />
                    Cupom PDF
                  </button>
                ) : null}
                {notasFiscais.podeVer && notasFiscais.carregou ? (
                  <BotaoDaNotaFiscal notas={notasFiscais.notas} aoClicar={() => setEmissaoFiscalAberta(true)} />
                ) : null}
                <button type="button" onClick={() => setLabelModalOpen(true)} className="ks-button ks-button-soft ks-button-sm shrink-0">
                  <Tag size={14} />
                  Etiqueta
                </button>
                <button type="button" onClick={() => setProtocoloModalOpen(true)} className="ks-button ks-button-soft ks-button-sm shrink-0">
                  <ClipboardCheck size={14} />
                  Protocolo
                </button>
                <button type="button" onClick={handlePrint} className="ks-button ks-button-soft ks-button-sm shrink-0">
                  <Download size={14} />
                  Via do pedido
                </button>
                <div className="ml-auto hidden sm:block">
                <BotaoDeStatus
                  status={order.status}
                  opcoes={statusOptions}
                  pdv={pdvOrder}
                  disabled={updating || !canWriteOrders}
                  atualizando={updating}
                  onChange={(valor) => handleStatusChange(valor)}
                />
                </div>
          </div>
          <header className="ks-surface rounded-xl border border-[var(--ks-color-border-subtle)] px-4 py-3 sm:px-5">
            {/* Linha 1: que pedido é, em que pé está, o que fazer agora. */}
            <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
              <Link href="/dashboard/orders" className="ks-button ks-button-icon ks-button-sm" aria-label="Voltar para a lista de pedidos">
                <ArrowLeft size={16} />
              </Link>
              <h1 className="text-xl font-bold text-[var(--ks-color-text-primary)] sm:text-2xl">Pedido #{order.number}</h1>
              <span className={statusColor(order.status)}>{statusLabel[order.status]}</span>
              {/* No celular estes chips somem daqui e viram linhas da lista logo
                  abaixo. O embrulho é necessário: `.ks-chip` fixa o display e
                  venceria um `hidden` posto no próprio chip. */}
              <span className="hidden sm:contents">
              {order.quotes && !pdvOrder ? (
                <Link href={`/dashboard/quotes/${order.quotes.id}`} className="ks-chip ks-chip-neutral hover:underline" title="Abrir o orçamento">
                  Orçamento #{order.quotes.number}
                </Link>
              ) : (
                <span className="ks-chip ks-chip-neutral">{orderOriginLabel}</span>
              )}
              {onlineApproved ? <span className="ks-chip ks-chip-success">Aprovado online</span> : null}
              {canSyncFromQuote && order.status === "pending_production" ? (
                <span
                  className={`ks-chip ${
                    syncStatus === "synced"
                      ? "ks-chip-success"
                      : syncStatus === "divergent"
                        ? "ks-chip-warning"
                        : syncStatus === "error"
                          ? "ks-chip-danger"
                          : "ks-chip-neutral"
                  }`}
                  title="Comparação entre este pedido e o orçamento que o gerou"
                >
                  {syncStatus === "synced"
                    ? "Igual ao orçamento"
                    : syncStatus === "divergent"
                      ? `Orçamento mudou${syncStatusSummary?.totalChanges ? ` · ${syncStatusSummary.totalChanges} alteração(ões)` : ""}`
                      : syncStatus === "error"
                        ? "Sem verificação com o orçamento"
                        : syncStatus === "checking"
                          ? "Comparando com o orçamento…"
                          : "Sem verificação com o orçamento"}
                </span>
              ) : null}
              {pdvOrder ? <span className="ks-chip ks-chip-info">Venda no PDV</span> : null}
              {catalogOrder && !pdvOrder ? <span className="ks-chip ks-chip-info">Veio do catálogo</span> : null}
              {/* A resposta do cliente sobre a arte fica visivel no cabecalho: quem
                  vai produzir precisa saber disso sem abrir a conversa. */}
              {order.art_status === "approved" ? (
                <span className="ks-chip ks-chip-success">Arte aprovada</span>
              ) : order.art_status === "pending" ? (
                <span className="ks-chip ks-chip-warning">Arte aguardando cliente</span>
              ) : order.art_status === "rejected" ? (
                <span className="ks-chip ks-chip-danger">Arte reprovada</span>
              ) : null}
              {order.restock_pending ? <span className="ks-chip ks-chip-warning">Reposição pendente: autorizado com saldo negativo</span> : null}
              </span>
            </div>

            {/* Linha 2 (desktop): os fatos do pedido, em lista corrida. */}
            <dl className="mt-3 hidden border-t border-[var(--ks-color-border-subtle)] pt-3 text-sm sm:flex sm:flex-wrap sm:items-start sm:gap-x-8 sm:gap-y-2">
              <div className="min-w-0">
                <dt className="text-[11px] font-semibold uppercase tracking-wide text-[var(--ks-color-text-soft)]">Cliente</dt>
                <dd className="font-semibold text-[var(--ks-color-text-primary)]">
                  {clientDisplayName}
                  {order.clients ? (
                    <button type="button" onClick={() => setClientDetailsOpen(true)} className="ml-2 text-xs font-semibold text-[var(--ks-color-primary)] hover:underline">
                      ver dados
                    </button>
                  ) : null}
                </dd>
              </div>
              <div>
                <dt className="text-[11px] font-semibold uppercase tracking-wide text-[var(--ks-color-text-soft)]">Data</dt>
                <dd className="font-semibold text-[var(--ks-color-text-primary)]">{formatDateBr(order.created_at)}</dd>
              </div>
              <div>
                <dt className="text-[11px] font-semibold uppercase tracking-wide text-[var(--ks-color-text-soft)]">Entrega</dt>
                <dd className="font-semibold text-[var(--ks-color-text-primary)]">
                  {editandoPrazo ? (
                    <span className="flex flex-wrap items-center gap-1.5">
                      <input
                        type="date"
                        value={prazoInput}
                        onChange={(e) => setPrazoInput(e.target.value)}
                        onKeyDown={(e) => {
                          if (e.key === "Enter") salvarPrazo(prazoInput);
                          if (e.key === "Escape") setEditandoPrazo(false);
                        }}
                        className="ks-field h-8 text-sm"
                        autoFocus
                      />
                      <button type="button" onClick={() => salvarPrazo(prazoInput)} disabled={salvandoPrazo} className="ks-button ks-button-primary ks-button-sm">
                        {salvandoPrazo ? "Salvando" : "Salvar"}
                      </button>
                      <button type="button" onClick={() => setEditandoPrazo(false)} className="ks-button ks-button-ghost ks-button-sm">
                        Cancelar
                      </button>
                      {dueDateValue ? (
                        <button type="button" onClick={() => salvarPrazo("")} className="ks-button ks-button-ghost ks-button-sm">
                          Limpar
                        </button>
                      ) : null}
                      {erroPrazo ? <span className="w-full text-[11px] font-semibold text-[var(--ks-color-status-danger)]">{erroPrazo}</span> : null}
                    </span>
                  ) : canEditOrders ? (
                    <button
                      type="button"
                      onClick={() => {
                        setPrazoInput(dueDateValue ? String(dueDateValue).slice(0, 10) : "");
                        setErroPrazo(null);
                        setEditandoPrazo(true);
                      }}
                      className="underline decoration-dotted underline-offset-4 hover:text-[var(--ks-color-primary)]"
                      title="Clique para mudar a data de entrega"
                    >
                      {dueLabel}
                    </button>
                  ) : (
                    dueLabel
                  )}
                </dd>
              </div>
              <div>
                <dt className="text-[11px] font-semibold uppercase tracking-wide text-[var(--ks-color-text-soft)]">Total</dt>
                <dd className="ks-num text-base font-extrabold text-[var(--ks-color-text-primary)]">{formatMoney(quoteTotal)}</dd>
              </div>
              <div>
                <dt className="text-[11px] font-semibold uppercase tracking-wide text-[var(--ks-color-text-soft)]">Operação</dt>
                <dd className="font-semibold text-[var(--ks-color-text-primary)]">{pdvOrder ? "PDV" : productionRunning ? "Em produção" : "Aguardando"}</dd>
              </div>
              <div>
                <dt className="text-[11px] font-semibold uppercase tracking-wide text-[var(--ks-color-text-soft)]">Responsável</dt>
                <dd className="font-semibold text-[var(--ks-color-text-primary)]">{creatorName || "Empresa (Admin)"}</dd>
              </div>
            </dl>

            {/* Celular: os mesmos fatos como lista de app, rótulo à esquerda e
                valor à direita, linhas curtas. Nada some: os chips do desktop
                viram a linha "Orçamento" (ou "Origem") e a de estoque. */}
            <dl className="mt-2 divide-y divide-[var(--ks-color-border-subtle)] border-t border-[var(--ks-color-border-subtle)] text-[13px] sm:hidden">
              <div className="flex min-h-[36px] items-center justify-between gap-3 py-1">
                <dt className="shrink-0 text-xs text-[var(--ks-color-text-muted)]">Cliente</dt>
                <dd className="flex min-w-0 items-center gap-2 text-right font-semibold text-[var(--ks-color-text-primary)]">
                  <span className="truncate">{clientDisplayName}</span>
                  {order.clients ? (
                    <button type="button" onClick={() => setClientDetailsOpen(true)} className="shrink-0 text-xs font-semibold text-[var(--ks-color-primary)]">
                      ver dados
                    </button>
                  ) : null}
                </dd>
              </div>
              <div className="flex min-h-[36px] items-center justify-between gap-3 py-1">
                <dt className="shrink-0 text-xs text-[var(--ks-color-text-muted)]">Criado em</dt>
                <dd className="font-semibold text-[var(--ks-color-text-primary)]">{formatDateBr(order.created_at)}</dd>
              </div>
              <div className="flex min-h-[36px] items-center justify-between gap-3 py-1">
                <dt className="shrink-0 text-xs text-[var(--ks-color-text-muted)]">Entrega</dt>
                <dd className="font-semibold text-[var(--ks-color-text-primary)]">
                  {editandoPrazo ? (
                    <span className="flex flex-wrap items-center justify-end gap-1.5">
                      <input
                        type="date"
                        value={prazoInput}
                        onChange={(e) => setPrazoInput(e.target.value)}
                        className="ks-field h-9 text-sm"
                        autoFocus
                      />
                      <button type="button" onClick={() => salvarPrazo(prazoInput)} disabled={salvandoPrazo} className="ks-button ks-button-primary ks-button-sm">
                        {salvandoPrazo ? "Salvando" : "Salvar"}
                      </button>
                      <button type="button" onClick={() => setEditandoPrazo(false)} className="ks-button ks-button-ghost ks-button-sm">
                        Cancelar
                      </button>
                      {dueDateValue ? (
                        <button type="button" onClick={() => salvarPrazo("")} className="ks-button ks-button-ghost ks-button-sm">
                          Limpar
                        </button>
                      ) : null}
                      {erroPrazo ? <span className="w-full text-right text-[11px] font-semibold text-[var(--ks-color-status-danger)]">{erroPrazo}</span> : null}
                    </span>
                  ) : canEditOrders ? (
                    <button
                      type="button"
                      onClick={() => {
                        setPrazoInput(dueDateValue ? String(dueDateValue).slice(0, 10) : "");
                        setErroPrazo(null);
                        setEditandoPrazo(true);
                      }}
                      className="inline-flex min-h-[32px] items-center gap-1 text-[var(--ks-color-primary)]"
                    >
                      {dueLabel}
                      <span className="text-[11px] font-normal">· mudar</span>
                    </button>
                  ) : (
                    dueLabel
                  )}
                </dd>
              </div>
              <div className="flex min-h-[36px] items-center justify-between gap-3 py-1">
                <dt className="shrink-0 text-xs text-[var(--ks-color-text-muted)]">Total</dt>
                <dd className="ks-num text-base font-extrabold text-[var(--ks-color-text-primary)]">{formatMoney(quoteTotal)}</dd>
              </div>
              <div className="flex min-h-[36px] items-center justify-between gap-3 py-1">
                <dt className="shrink-0 text-xs text-[var(--ks-color-text-muted)]">Responsável</dt>
                <dd className="min-w-0 truncate text-right font-semibold text-[var(--ks-color-text-primary)]">
                  {creatorName || "Empresa (Admin)"}
                  <span className="font-normal text-[var(--ks-color-text-muted)]"> · {pdvOrder ? "PDV" : productionRunning ? "em produção" : "aguardando"}</span>
                </dd>
              </div>
              <div className="flex min-h-[36px] items-center justify-between gap-3 py-1">
                <dt className="shrink-0 text-xs text-[var(--ks-color-text-muted)]">{order.quotes && !pdvOrder ? "Orçamento" : "Origem"}</dt>
                <dd className="min-w-0 text-right font-semibold text-[var(--ks-color-text-primary)]">
                  {order.quotes && !pdvOrder ? (
                    <Link href={`/dashboard/quotes/${order.quotes.id}`} className="text-[var(--ks-color-primary)]">
                      #{order.quotes.number}
                    </Link>
                  ) : (
                    orderOriginLabel
                  )}
                  {canSyncFromQuote && order.status === "pending_production" ? (
                    <span
                      className={`font-normal ${
                        syncStatus === "divergent"
                          ? "text-[var(--ks-color-status-warning,#b45309)]"
                          : syncStatus === "synced"
                            ? "text-[var(--ks-color-status-success,#16a34a)]"
                            : "text-[var(--ks-color-text-muted)]"
                      }`}
                    >
                      {syncStatus === "synced"
                        ? " · igual ao pedido"
                        : syncStatus === "divergent"
                          ? ` · mudou${syncStatusSummary?.totalChanges ? ` (${syncStatusSummary.totalChanges} ${syncStatusSummary.totalChanges === 1 ? "alteração" : "alterações"})` : ""}`
                          : syncStatus === "checking"
                            ? " · comparando…"
                            : " · sem verificação"}
                    </span>
                  ) : null}
                  {catalogOrder && !pdvOrder ? <span className="font-normal text-[var(--ks-color-text-muted)]"> · catálogo</span> : null}
                  {onlineApproved ? <span className="font-normal text-[var(--ks-color-status-success,#16a34a)]"> · aprovado online</span> : null}
                </dd>
              </div>
              {order.restock_pending ? (
                <div className="flex min-h-[36px] items-center justify-between gap-3 py-1">
                  <dt className="shrink-0 text-xs text-[var(--ks-color-text-muted)]">Estoque</dt>
                  <dd className="text-right text-xs font-semibold text-[var(--ks-color-status-warning,#b45309)]">reposição pendente · autorizado com saldo negativo</dd>
                </div>
              ) : null}
            </dl>
          </header>
        </div>

        <div className="w-full px-4 pb-6 pt-4 sm:px-6 lg:px-8 no-print">
          <div>
            <div className="space-y-5">
              {/* Abas no sublinhado da casa. Os painéis continuam todos montados
                  (só escondidos): os mesmos efeitos e estados de antes. */}
              <div className="-mx-4 flex items-center gap-x-6 overflow-x-auto overflow-y-hidden border-b border-[var(--ks-color-border-subtle)] px-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden sm:mx-0 sm:flex-wrap sm:overflow-visible sm:px-0">
                {[
                  { id: "itens" as const, rotulo: "Itens do pedido", Icone: Package },
                  { id: "financeiro" as const, rotulo: "Financeiro", Icone: Receipt },
                  { id: "producao" as const, rotulo: "Produção", Icone: Wrench },
                  { id: "analise" as const, rotulo: "Análise", Icone: BarChart3 },
                  { id: "conversa" as const, rotulo: "Conversa", Icone: MessageCircle },
                  ...(catalogOrder ? [{ id: "entrega" as const, rotulo: "Entrega", Icone: MapPin }] : []),
                ].map(({ id, rotulo, Icone }) => (
                  <button
                    key={id}
                    type="button"
                    onClick={() => setAba(id)}
                    className={`flex shrink-0 items-center gap-2 whitespace-nowrap pb-3 -mb-px text-sm font-semibold transition-colors border-b-2 ${
                      aba === id
                        ? "border-[var(--ks-color-primary)] text-[var(--ks-color-primary)]"
                        : "border-transparent text-[var(--ks-color-text-soft)] hover:text-[var(--ks-color-text-primary)]"
                    }`}
                  >
                    <Icone className="w-4 h-4" />
                    {rotulo}
                  </button>
                ))}
              </div>

              <div hidden={aba !== "itens"} className="space-y-6">
              <div className="overflow-hidden rounded-xl border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-elevated)]">
                <div className="border-b border-[var(--ks-color-border-subtle)] px-6 py-4">
                  <div className="flex items-center justify-between gap-3">
                    <h3 className="text-lg font-semibold text-[var(--ks-color-text-primary)]">Itens do pedido</h3>
                    <span className="text-xs text-[var(--ks-color-text-muted)]">
                      {items.length} {items.length === 1 ? "item" : "itens"}
                    </span>
                  </div>
                </div>
                {/* No celular a tabela não cabe: cada item vira um cartão com as mesmas
                    informações — número, título, código, descrição, tamanho, peças,
                    unitário e total. */}
                <ul className="divide-y divide-[var(--ks-color-border-subtle)] sm:hidden">
                  {items.map((item, idx) => {
                    const medidaDoItem = quantidadeDoItem(item);
                    const minimoDoItem = minimoDaLinhaGravada(item);
                    return (
                      <li key={`m-${item.id}`} className="flex items-start gap-3 px-3 py-3">
                        <span className="ks-num mt-0.5 w-5 shrink-0 text-[11px] font-bold text-[var(--ks-color-text-soft)]">
                          {String(idx + 1).padStart(2, "0")}
                        </span>
                        <div className="min-w-0 flex-1">
                          {/* Título à esquerda, total à direita: a leitura de lista de app. */}
                          <div className="flex items-start justify-between gap-3">
                            <div className="min-w-0 text-sm font-semibold leading-snug text-[var(--ks-color-text-primary)]">{item.title}</div>
                            <div className="ks-num shrink-0 text-sm font-bold text-[var(--ks-color-text-primary)]">{formatMoney(item.total_price)}</div>
                          </div>
                          {item.description ? <div className="mt-0.5 text-xs leading-snug text-[var(--ks-color-text-muted)]">{item.description}</div> : null}
                          {/* Uma linha só de detalhes, separados por ponto, sem chips. */}
                          <div className="mt-1 text-xs text-[var(--ks-color-text-muted)]">
                            {[
                              medidaDoItem.pecasTexto,
                              medidaDoItem.medida,
                              medidaDoItem.total ? medidaDoItem.total.replace(" no total", "") : null,
                              minimoDoItem
                                ? "Valor mínimo"
                                : `${formatMoney(item.unit_price)}${medidaDoItem.unidadeDeVenda !== "un" ? `/${medidaDoItem.unidadeDeVenda === "m2" ? "m²" : "m"}` : " cada"}`,
                              item.products?.sku ? `SKU ${item.products.sku}` : null,
                              item.products?.barcode ? `Cód. ${item.products.barcode}` : null,
                            ]
                              .filter(Boolean)
                              .join(" · ")}
                          </div>
                          {minimoDoItem ? (
                            <div className="mt-1 text-xs text-sky-700">{textoDoMinimoAplicado(minimoDoItem.minimo, minimoDoItem.semMinimo)}</div>
                          ) : null}
                          {item.restock_pending ? (
                            <span className="ks-chip ks-chip-warning mt-1.5 text-[11px]">Falta estoque{item.restock_shortage_qty ? ` (${item.restock_shortage_qty})` : ""}</span>
                          ) : null}
                        </div>
                      </li>
                    );
                  })}
                </ul>
                <div className="hidden overflow-x-auto sm:block">
                  <table className="min-w-full text-sm">
                    <thead className="bg-[var(--ks-color-bg-soft)] text-[10px] uppercase tracking-[0.1em] text-[var(--ks-color-text-muted)]">
                      <tr>
                        <th className="px-4 py-3 text-left font-bold">Item</th>
                        <th className="px-4 py-3 text-center font-bold">Tamanho</th>
                        <th className="px-4 py-3 text-center font-bold">Qtd</th>
                        <th className="px-4 py-3 text-right font-bold">Unitário</th>
                        <th className="px-4 py-3 text-right font-bold">Total</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-[var(--ks-color-border-subtle)]">
                      {items.map((item, idx) => {
                        /* Peças numa coluna; medida e área na outra. "2 m²" para
                           dois banners de 1,00 × 0,70 mentia para todo mundo. */
                        const medidaDoItem = quantidadeDoItem(item);
                        const minimoDoItem = minimoDaLinhaGravada(item);

                        return (
                          <tr key={item.id} className="group transition-colors hover:bg-[var(--ks-color-bg-soft)]/50">
                            <td className="px-4 py-4 align-top">
                              <div className="flex items-start gap-3">
                                <span className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[var(--ks-color-primary)]/10 text-[10px] font-bold text-[var(--ks-color-primary)]">
                                  {String(idx + 1).padStart(2, "0")}
                                </span>
                                <div>
                                  <div className="font-semibold text-[var(--ks-color-text-primary)]">{item.title}</div>
                                  {(item.products?.sku || item.products?.barcode) && (
                                    <div className="mt-1 flex flex-wrap items-center gap-1.5 text-[11px] font-medium uppercase tracking-wider text-[var(--ks-color-text-muted)]">
                                      {item.products?.sku ? <span>SKU: {item.products.sku}</span> : null}
                                      {item.products?.sku && item.products?.barcode ? <span>•</span> : null}
                                      {item.products?.barcode ? <span>Cód: {item.products.barcode}</span> : null}
                                    </div>
                                  )}
                                  {item.description && (
                                    <div className="mt-1.5 max-w-md text-[12px] leading-relaxed text-[var(--ks-color-text-muted)]">
                                      {item.description}
                                    </div>
                                  )}
                                  {minimoDoItem ? (
                                    <div className="mt-1.5 max-w-md text-[12px] font-medium text-sky-700">
                                      {textoDoMinimoAplicado(minimoDoItem.minimo, minimoDoItem.semMinimo)}
                                    </div>
                                  ) : null}
                                  {item.restock_pending ? (
                                    <div className="mt-1.5 inline-flex items-center rounded-md bg-amber-50 px-2 py-1 text-[11px] font-medium text-amber-700 ring-1 ring-inset ring-amber-600/20">
                                      Falta estoque {item.restock_shortage_qty ? `(${item.restock_shortage_qty})` : ""}
                                    </div>
                                  ) : null}
                                </div>
                              </div>
                            </td>
                            <td className="px-4 py-4 align-top text-center text-[13px] font-medium text-[var(--ks-color-text-muted)]">
                              {medidaDoItem.medida ?? "-"}
                              {medidaDoItem.total ? (
                                <div className="mt-0.5 text-[11px] font-bold text-[var(--ks-color-text-primary)]">{medidaDoItem.total}</div>
                              ) : null}
                            </td>
                            <td className="px-4 py-4 align-top text-center text-[13px] font-bold text-[var(--ks-color-text-primary)]">
                              <span className="inline-flex items-center whitespace-nowrap rounded-md bg-[var(--ks-color-bg-soft)] px-2.5 py-1 ring-1 ring-inset ring-[var(--ks-color-border-subtle)]">
                                {medidaDoItem.pecasTexto}
                              </span>
                            </td>
                            <td className="px-4 py-4 align-top text-right text-[13px] font-medium text-[var(--ks-color-text-muted)]">
                              {minimoDoItem ? "Valor mínimo" : formatMoney(item.unit_price)}
                            </td>
                            <td className="px-4 py-4 align-top text-right text-[14px] font-bold text-[var(--ks-color-text-primary)]">
                              {formatMoney(item.total_price)}
                            </td>
                          </tr>
                        );
                      })}
                    </tbody>
                  </table>
                </div>
                <div className="border-t border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-soft)]/30 px-6 py-5">
                  <div className="ml-auto w-full max-w-[360px] space-y-2 text-sm">
                    <div className="flex items-center justify-between">
                      <span className="text-[var(--ks-color-text-muted)]">Subtotal dos itens</span>
                      <span className="font-semibold text-[var(--ks-color-text-primary)]">{formatMoney(quoteSubtotal)}</span>
                    </div>
                    {orcamentoExplicaADiferenca ? (
                      <>
                        {/* O orçamento fecha a conta do pedido: cada parcela
                            pode ser chamada pelo nome dela. */}
                        {descontoDoOrcamento > 0 && (
                          <div className="flex items-center justify-between">
                            <span className="text-[var(--ks-color-text-muted)]">Desconto</span>
                            <span className="font-semibold text-rose-600">- {formatMoney(descontoDoOrcamento)}</span>
                          </div>
                        )}
                        {freteDoOrcamento > 0 && (
                          <div className="flex items-center justify-between">
                            <span className="text-[var(--ks-color-text-muted)]">Frete</span>
                            <span className="font-semibold text-sky-600">+ {formatMoney(freteDoOrcamento)}</span>
                          </div>
                        )}
                      </>
                    ) : (
                      <>
                        {quoteDiscount > 0 && (
                          <div className="flex items-center justify-between">
                            <span className="text-[var(--ks-color-text-muted)]">Desconto</span>
                            <span className="font-semibold text-rose-600">- {formatMoney(quoteDiscount)}</span>
                          </div>
                        )}
                        {quoteShipping > 0 && (
                          <div className="flex items-center justify-between">
                            {/* Sem orçamento que feche a conta, o número existe
                                mas o nome dele não: dizer "Frete" aqui seria
                                afirmar o que não se sabe. */}
                            <span className="text-[var(--ks-color-text-muted)]">Acréscimos</span>
                            <span className="font-semibold text-sky-600">+ {formatMoney(quoteShipping)}</span>
                          </div>
                        )}
                      </>
                    )}
                    <div className="mt-2 border-t border-[var(--ks-color-border-subtle)] pt-2">
                      <div className="flex items-center justify-between">
                        <span className="font-semibold text-[var(--ks-color-text-primary)]">Valor final</span>
                        <span className="text-xl font-bold text-[var(--ks-color-text-primary)]">{formatMoney(quoteTotal)}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <BlocoDeCamposProprios
                entidade="pedido"
                registroId={order.id}
                valores={(order as { campos_proprios?: unknown }).campos_proprios}
                podeEditar={canEditOrders}
              />

              {(observacoes.texto || canEditOrders) && (
                <div className="rounded-xl border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-elevated)] p-6">
                  <div className="flex flex-wrap items-center justify-between gap-2">
                    <h3 className="text-lg font-semibold text-[var(--ks-color-text-primary)]">Observações</h3>
                    {canEditOrders && !editandoObservacoes ? (
                      <button
                        type="button"
                        onClick={() => {
                          setObservacoesInput(observacoes.texto);
                          setErroObservacoes(null);
                          setEditandoObservacoes(true);
                        }}
                        className="ks-button ks-button-ghost ks-button-sm"
                      >
                        {observacoes.texto ? "Editar" : "Adicionar"}
                      </button>
                    ) : null}
                  </div>
                  <p className="mt-1 text-xs text-[var(--ks-color-text-muted)]">
                    {observacoes.doOrcamento ? "Vieram do orçamento. " : ""}Saem na nota fiscal, nas informações complementares.
                  </p>
                  {editandoObservacoes ? (
                    <div className="mt-3 space-y-2">
                      <textarea
                        value={observacoesInput}
                        onChange={(e) => setObservacoesInput(e.target.value.slice(0, LIMITE_DAS_OBSERVACOES))}
                        rows={5}
                        autoFocus
                        className="ks-field w-full resize-y text-sm leading-6"
                        placeholder="O que foi combinado com o cliente: entrega, acabamento, referência..."
                      />
                      <div className="flex flex-wrap items-center justify-between gap-2">
                        <span className="ks-num text-[11px] text-[var(--ks-color-text-muted)]">
                          {observacoesInput.length}/{LIMITE_DAS_OBSERVACOES}
                        </span>
                        <span className="flex items-center gap-1.5">
                          <button type="button" onClick={() => setEditandoObservacoes(false)} disabled={salvandoObservacoes} className="ks-button ks-button-ghost ks-button-sm">
                            Cancelar
                          </button>
                          <button type="button" onClick={salvarObservacoes} disabled={salvandoObservacoes} className="ks-button ks-button-primary ks-button-sm">
                            {salvandoObservacoes ? "Salvando" : "Salvar"}
                          </button>
                        </span>
                      </div>
                      {erroObservacoes ? <p className="text-[11px] font-semibold text-[var(--ks-color-status-danger)]">{erroObservacoes}</p> : null}
                    </div>
                  ) : observacoes.texto ? (
                    <div className="mt-3 rounded-lg border border-[#FDE68A] bg-[#FFFBEB] p-4 text-sm leading-6 text-zinc-800 whitespace-pre-wrap">
                      {observacoes.texto}
                    </div>
                  ) : (
                    <p className="mt-3 text-sm text-[var(--ks-color-text-muted)]">Nenhuma observação neste pedido.</p>
                  )}
                </div>
              )}

                {order.approval_signature && (
                  <div className="rounded-xl border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-elevated)] p-6">
                    <h3 className="text-lg font-semibold text-zinc-950">Assinatura do cliente</h3>
                    <div className="mt-3 rounded-lg border border-zinc-200 bg-zinc-50 p-4">
                      <Image
                        src={order.approval_signature}
                        alt="Assinatura do cliente"
                        width={600}
                        height={96}
                        sizes="100vw"
                        className="h-20 w-full object-contain mix-blend-multiply"
                        unoptimized
                      />
                    </div>
                    <div className="mt-4 text-sm font-semibold text-zinc-900">
                      {order.approval_signed_name || "Assinado digitalmente"}
                    </div>
                    {order.approval_signed_at && (
                      <div className="mt-1 text-xs text-zinc-500">
                        {new Date(order.approval_signed_at).toLocaleString("pt-BR")}
                      </div>
                    )}
                  </div>
                )}
              {/* Estoque novo (v2): o que cada item tirou do estoque. Fora do v2 não aparece. */}
              <EstoqueDoPedido key={`${order?.status ?? ""}-${items.length}`} pedidoId={String(params.id || "")} />
              </div>

              <div hidden={aba !== "financeiro"} className="space-y-6">
              {notasFiscais.podeVer ? (
                <NotasFiscaisDoPedido
                  pedidoId={order.id}
                  clienteId={order.client_id}
                  telefoneDoCliente={order.clients?.whatsapp || order.clients?.phone || null}
                  pedidoCancelado={order.status === "canceled"}
                  notas={notasFiscais.notas}
                  aoMudar={() => void notasFiscais.recarregar()}
                  emissaoAberta={emissaoFiscalAberta}
                  setEmissaoAberta={setEmissaoFiscalAberta}
                />
              ) : null}
              {canReadFinancial && (
                <div className="overflow-hidden rounded-2xl border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-elevated)] px-6 pb-6 sm:px-8 sm:pb-8">
                  <FinancialSection
                    order={order}
                    payments={payments}
                    onUpdate={fetchOrder}
                    canWrite={canWriteFinancial}
                    profile={profile}
                  />
                </div>
              )}

                {catalogPaymentDetails && (
                  <div className="overflow-hidden rounded-xl border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-elevated)]">
                    <div className="border-b border-zinc-200/70 px-6 py-4">
                      <h3 className="text-lg font-semibold text-zinc-950">Pagamento do catalogo</h3>
                    </div>
                    <div className="space-y-4 p-6 text-sm">
                      <div className="flex items-center justify-between gap-3">
                        <span className="text-zinc-500">Status</span>
                        <span className="font-semibold text-zinc-950">
                          {catalogPaymentDetails.status === "approved"
                            ? "Pago"
                            : catalogPaymentDetails.status === "pending"
                              ? "Pendente"
                              : catalogPaymentDetails.status === "rejected"
                                ? "Nao aprovado"
                                : catalogPaymentDetails.status === "cancelled"
                                  ? "Cancelado"
                                  : "Registrado"}
                        </span>
                      </div>
                      <div className="flex items-center justify-between gap-3">
                        <span className="text-zinc-500">Pagamento</span>
                        <span className="text-right font-semibold text-zinc-950">{catalogPaymentDetails.methodLabel}</span>
                      </div>
                      <div className="flex items-center justify-between gap-3">
                        <span className="text-zinc-500">Forma de pagamento</span>
                        <span className="text-right font-semibold text-zinc-950">{catalogPaymentDetails.conditionsLabel}</span>
                      </div>
                      <div className="flex items-center justify-between gap-3">
                        <span className="text-zinc-500">Valor</span>
                        <span className="text-right font-semibold text-zinc-950">{formatMoney(Number(catalogPaymentDetails.amount || 0))}</span>
                      </div>
                      <div className="flex items-center justify-between gap-3">
                        <span className="text-zinc-500">Referencia</span>
                        <span className="break-all text-right font-semibold text-zinc-950">{catalogPaymentDetails.reference || "-"}</span>
                      </div>
                      {catalogPaymentDetails.paidAt ? (
                        <div className="flex items-center justify-between gap-3">
                          <span className="text-zinc-500">Pago em</span>
                          <span className="text-right font-semibold text-zinc-950">
                            {new Date(catalogPaymentDetails.paidAt).toLocaleString("pt-BR")}
                          </span>
                        </div>
                      ) : null}
                    </div>
                  </div>
                )}
                {!canReadFinancial && !catalogPaymentDetails ? (
                  <div className="ks-surface rounded-xl border border-[var(--ks-color-border-subtle)] p-6 text-sm text-[var(--ks-color-text-muted)]">
                    Você não tem acesso ao financeiro deste pedido.
                  </div>
                ) : null}
              </div>

              <div hidden={aba !== "producao"} className="space-y-6">
              {/* Linha do tempo: responde "e o meu?" sem abrir quatro telas. */}
              <div className="rounded-xl border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-elevated)] p-6">
                <h3 className="mb-4 text-lg font-semibold text-[var(--ks-color-text-primary)]">
                  Linha do tempo
                </h3>
                <LinhaDoTempo
                  orcamentoEm={order.created_at}
                  aprovadoEm={order.approval_signed_at ?? null}
                  producaoIniciadaEm={order.production_first_started_at ?? order.production_started_at ?? null}
                  prazoEntrega={dueDateValue}
                  entregueEm={order.production_finished_at ?? order.updated_at ?? null}
                  status={String(order.status)}
                />
              </div>

              {!pdvOrder && (
                <div className="rounded-xl border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-elevated)] p-6">
                  <div className="mb-4 flex flex-wrap items-baseline justify-between gap-2">
                    <h3 className="text-lg font-semibold text-[var(--ks-color-text-primary)]">Produção</h3>
                    {painel ? (
                      <span className="text-[11px] text-[var(--ks-color-text-muted)]">
                        Expediente {NOME_DO_DIA.filter((_, dia) => painel.expediente.dias.includes(dia)).join(", ")} ·{" "}
                        {painel.expediente.inicio}–{painel.expediente.fim}
                      </span>
                    ) : null}
                  </div>
                  <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
                    <div className="rounded-lg border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-soft)] px-4 py-3">
                      <div className="text-xs text-[var(--ks-color-text-muted)]">Previsto na ficha</div>
                      <div className="mt-1 font-mono text-xl font-bold text-[var(--ks-color-text-primary)]">
                        {painel ? (painel.order.minutos_previstos > 0 ? formatarDuracao(painel.order.minutos_previstos) : "sem ficha") : "…"}
                      </div>
                    </div>
                    <div
                      className="rounded-lg border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-soft)] px-4 py-3"
                      title="Tempo de cronômetro dentro do expediente da produção"
                    >
                      <div className="text-xs text-[var(--ks-color-text-muted)]">Tempo útil</div>
                      <div className="mt-1 font-mono text-xl font-bold text-[var(--ks-color-primary)]">
                        {tempoUtilSeg == null ? "…" : formatDuration(tempoUtilSeg)}
                      </div>
                    </div>
                    <div
                      className="rounded-lg border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-soft)] px-4 py-3"
                      title="Tempo de relógio com o cronômetro ligado, incluindo noites e fins de semana"
                    >
                      <div className="text-xs text-[var(--ks-color-text-muted)]">Tempo corrido</div>
                      <div className="mt-1 font-mono text-xl font-bold text-[var(--ks-color-text-muted)]">{formatDuration(productionSeconds)}</div>
                    </div>
                    <div className="rounded-lg border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-soft)] px-4 py-3">
                      <div className="text-xs text-[var(--ks-color-text-muted)]">Cronômetro</div>
                      <div className="mt-1 text-sm font-semibold text-[var(--ks-color-text-primary)]">
                        {productionRunning ? "Em andamento" : "Pausado"}
                      </div>
                      <div className="mt-0.5 text-[11px] text-[var(--ks-color-text-muted)]">
                        {order.production_last_stopped_at
                          ? `Última pausa ${new Date(order.production_last_stopped_at).toLocaleString("pt-BR")}`
                          : "Nunca pausado"}
                      </div>
                    </div>
                  </div>

                  {etapasVisiveis.length > 0 ? (
                    <ol className="mt-4 flex flex-wrap gap-2">
                      {etapasVisiveis.map((etapa, etapaIndex) => (
                        <li
                          key={`${etapa.inicio}-${etapaIndex}`}
                          className={`rounded-lg border px-3 py-2 text-xs ${
                            etapa.aberta && !etapa.terminal
                              ? "border-[var(--ks-color-primary)] bg-[rgba(68,37,167,0.06)]"
                              : "border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-soft)]"
                          }`}
                        >
                          <div className="font-semibold text-[var(--ks-color-text-primary)]">
                            {etapa.rotulo}
                            {etapa.aproximada ? " *" : ""}
                          </div>
                          <div className="text-[var(--ks-color-text-muted)]">
                            {etapa.terminal
                              ? `desde ${new Date(etapa.inicio).toLocaleDateString("pt-BR")}`
                              : `${formatarDuracao(etapa.minutos)}${
                                  etapa.minutosUteis !== etapa.minutos ? ` · ${formatarDuracao(etapa.minutosUteis)} úteis` : ""
                                }${etapa.aberta ? " · agora" : ""}`}
                          </div>
                        </li>
                      ))}
                    </ol>
                  ) : null}

                  {/* Como vai rodar: só os itens com algo a decidir (folha, bobina). */}
                  {painel
                    ? painel.itens
                        .filter((i) => i.insumos.some((insumo) => insumo.ajustavel))
                        .map((i) => {
                          const doPedido = items.find((it) => it.id === i.id);
                          return (
                            <PlanoDeRodagem
                              key={i.id}
                              orderId={order.id}
                              item={i}
                              medida={{
                                larguraM: Number(doPedido?.width_m) || 0,
                                alturaM: Number(doPedido?.height_m) || 0,
                                pecas: Number(doPedido?.quantity) || 0,
                              }}
                              podeEditar={canWriteOrders}
                              aoSalvar={setPainel}
                              titulo={i.title}
                            />
                          );
                        })
                    : null}

                  {painel && painel.itens.some((i) => i.feitos.length > 0 || i.aberto) ? (
                    <ul className="mt-3 space-y-1 text-xs">
                      {painel.itens
                        .filter((i) => i.feitos.length > 0 || i.aberto)
                        .map((i) => (
                          <li key={i.id} className="flex flex-wrap items-center gap-2 text-[var(--ks-color-text-muted)]">
                            <span className="font-semibold text-[var(--ks-color-text-primary)]">{i.title}</span>
                            {i.aberto ? (
                              <span>em andamento · {i.aberto.porNome || "Usuário"} · {formatarDuracao(i.aberto.minutos)}</span>
                            ) : (
                              <span>
                                feito em {formatarDuracao(i.minutos_reais)} por{" "}
                                {Array.from(new Set(i.feitos.map((f) => f.porNome || "Usuário"))).join(", ")}
                                {i.minutos_previstos > 0 ? ` · previsto ${formatarDuracao(i.minutos_previstos)}` : ""}
                              </span>
                            )}
                          </li>
                        ))}
                    </ul>
                  ) : null}
                </div>
              )}
              </div>

              {/* A análise só monta quando aberta: os gráficos medem a largura ao nascer. */}
              {aba === "analise" ? (
                <AnaliseDoPedido
                  orderId={order.id}
                  order={order}
                  items={items}
                  payments={payments}
                  painel={painel}
                  totais={{ subtotal: quoteSubtotal, desconto: quoteDiscount, frete: quoteShipping, total: quoteTotal }}
                />
              ) : null}

              {/* A conversa monta so quando aberta: ela busca mensagens e rola para o
                  fim ao nascer. */}
              {aba === "conversa" ? (
                <ConversaDoPedido orderId={order.id} podeResponder={canEditOrders} />
              ) : null}

              {catalogOrder ? (
                <div hidden={aba !== "entrega"} className="space-y-6">
              {catalogOrder && clientFullAddress && (
                <div className="overflow-hidden rounded-xl border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-elevated)]">
                  {/* Cartoes com cabecalho de 24px de altura e miolo com caixinhas
                      cinzas dentro de caixa branca: era espaco demais para tres
                      informacoes. Aqui e cabecalho enxuto e linhas rotulo/valor. */}
                  <div className="flex flex-wrap items-center justify-between gap-2 border-b border-[var(--ks-color-border-subtle)] px-4 py-3">
                    <h3 className="text-sm font-semibold text-zinc-950">Endereço de entrega</h3>
                    {deliverySourceLabel ? (
                      <span className="text-[11px] text-zinc-500">{deliverySourceLabel}</span>
                    ) : null}
                  </div>
                  <div className="p-4 text-sm">
                    <div className="font-semibold text-zinc-950">{deliveryRecipientName}</div>
                    <div className="mt-1 break-words leading-6 text-zinc-600">{clientFullAddress}</div>

                    <dl className="mt-3 divide-y divide-[var(--ks-color-border-subtle)] border-t border-[var(--ks-color-border-subtle)]">
                      <div className="flex items-center justify-between gap-3 py-2">
                        <dt className="text-xs text-zinc-500">Contato</dt>
                        <dd className="font-medium text-zinc-900">{deliveryContactPhone || "-"}</dd>
                      </div>
                      <div className="flex items-center justify-between gap-3 py-2">
                        <dt className="text-xs text-zinc-500">CEP</dt>
                        <dd className="font-medium text-zinc-900">
                          {formatZipCode(catalogDeliveryAddress?.zip || order.clients?.address_zip)}
                        </dd>
                      </div>
                      {catalogDeliveryAddress?.reference ? (
                        <div className="flex items-start justify-between gap-3 py-2">
                          <dt className="shrink-0 text-xs text-zinc-500">Referência</dt>
                          <dd className="whitespace-pre-wrap text-right font-medium text-zinc-900">
                            {catalogDeliveryAddress.reference}
                          </dd>
                        </div>
                      ) : null}
                    </dl>
                  </div>
                </div>
              )}

                {catalogOrder && (catalogShippingAmount > 0 || catalogShippingIsPickup) && (
                  <div className="overflow-hidden rounded-xl border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-elevated)]">
                    <div className="border-b border-[var(--ks-color-border-subtle)] px-4 py-3">
                      <h3 className="text-sm font-semibold text-zinc-950">
                        {catalogShippingIsPickup ? "Retirada no balcão" : "Frete escolhido pelo cliente"}
                      </h3>
                    </div>
                    <div className="space-y-3 p-4">
                      <div className="flex items-start justify-between gap-4">
                        <div className="flex min-w-0 items-center gap-3">
                          {!catalogShippingIsPickup && catalogShippingDetails?.logoUrl ? (
                            <Image
                              src={catalogShippingDetails.logoUrl}
                              alt={catalogShippingDetails.carrierName || shippingPrimaryLabel}
                              width={40}
                              height={40}
                              className="h-10 w-10 rounded-xl border border-zinc-200 bg-white object-contain p-1.5"
                              unoptimized
                            />
                          ) : (
                            <div className="flex h-10 w-10 items-center justify-center rounded-xl border border-zinc-200 bg-zinc-50">
                              {catalogShippingIsPickup ? (
                                <Store size={18} className="text-zinc-500" />
                              ) : (
                                <Package size={18} className="text-zinc-500" />
                              )}
                            </div>
                          )}
                          <div className="min-w-0">
                            <div className="truncate text-sm font-semibold text-zinc-950">{shippingPrimaryLabel}</div>
                            <div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-zinc-500">
                              {catalogShippingDetails?.providerLabel ? (
                                <span className="inline-flex rounded-full border border-sky-200 bg-sky-50 px-2 py-0.5 font-semibold text-sky-700">
                                  {catalogShippingDetails.providerLabel}
                                </span>
                              ) : null}
                              {catalogShippingIsPickup ? (
                                catalogShippingDetails?.pickupAddress ? (
                                  <span className="truncate">{catalogShippingDetails.pickupAddress}</span>
                                ) : null
                              ) : shippingSecondaryLabel ? (
                                <span className="truncate">{shippingSecondaryLabel}</span>
                              ) : null}
                            </div>
                          </div>
                        </div>
                        <div className="text-right">
                          <div className="text-xs text-zinc-500">Valor</div>
                          <div className="text-base font-bold text-zinc-950">
                            {catalogShippingIsPickup && catalogShippingAmount <= 0
                              ? "Grátis"
                              : formatMoney(catalogShippingAmount)}
                          </div>
                        </div>
                      </div>

                      <dl className="divide-y divide-[var(--ks-color-border-subtle)] border-t border-[var(--ks-color-border-subtle)] text-sm">
                        <div className="flex items-center justify-between gap-3 py-2">
                          <dt className="text-xs text-zinc-500">Prazo</dt>
                          <dd className="font-medium text-zinc-900">
                            {catalogShippingIsPickup
                              ? catalogShippingDetails?.deliveryTime
                                ? formatShippingDeadline(catalogShippingDetails.deliveryTime)
                                : "Pronto para retirar"
                              : formatShippingDeadline(catalogShippingDetails?.deliveryTime ?? null)}
                          </dd>
                        </div>
                        <div className="flex items-start justify-between gap-3 py-2">
                          <dt className="shrink-0 text-xs text-zinc-500">
                            {catalogShippingIsPickup ? "Instruções ao cliente" : "CEP de destino"}
                          </dt>
                          <dd className="text-right font-medium text-zinc-900">
                            {catalogShippingIsPickup
                              ? catalogShippingDetails?.pickupInstructions || "-"
                              : formatZipCode(catalogShippingDetails?.destinationZip)}
                          </dd>
                        </div>
                      </dl>
                    </div>
                  </div>
                )}

              {catalogOrder && (
                <div className="overflow-hidden rounded-xl border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-elevated)]">
                  <div className="flex flex-wrap items-center justify-between gap-2 border-b border-[var(--ks-color-border-subtle)] px-4 py-3">
                    <div className="min-w-0">
                      <h3 className="text-sm font-semibold text-zinc-950">Rastreio da entrega</h3>
                      <p className="text-xs text-zinc-500">O cliente acompanha estes dados no portal.</p>
                    </div>
                    {trackingUpdatedAt ? (
                      <span className="text-[11px] text-zinc-500">Atualizado em {trackingUpdatedAt}</span>
                    ) : null}
                  </div>

                  <div className="space-y-4 p-4">
                    <div>
                      <label className="text-[11px] font-semibold uppercase tracking-wide text-zinc-500">
                        Códigos de rastreio
                      </label>
                      <div className="mt-1.5 flex gap-2">
                        <input
                          type="text"
                          value={novoCodigoDeRastreio}
                          onChange={(event) => setNovoCodigoDeRastreio(event.target.value)}
                          onKeyDown={(event) => {
                            if (event.key === "Enter") {
                              event.preventDefault();
                              adicionarCodigoDeRastreio();
                            }
                          }}
                          disabled={!canEditOrders || savingTracking}
                          className="ks-input h-10 flex-1 font-mono uppercase"
                          placeholder="Cole o código e aperte +"
                        />
                        <button
                          type="button"
                          onClick={adicionarCodigoDeRastreio}
                          disabled={!canEditOrders || savingTracking || !novoCodigoDeRastreio.trim()}
                          aria-label="Adicionar código de rastreio"
                          className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-[var(--ks-color-primary)] text-white transition hover:bg-[var(--ks-color-primary-strong)] disabled:cursor-not-allowed disabled:opacity-40"
                        >
                          <Plus size={18} />
                        </button>
                      </div>

                      {codigosDeRastreio.length ? (
                        <div className="mt-2.5 flex flex-wrap gap-2">
                          {codigosDeRastreio.map((codigo) => (
                            <span
                              key={codigo}
                              className="inline-flex items-center gap-1.5 rounded-full border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-inset)] py-1 pl-3 pr-1.5 font-mono text-[13px] font-semibold text-zinc-900"
                            >
                              {codigo}
                              <button
                                type="button"
                                onClick={() => removerCodigoDeRastreio(codigo)}
                                disabled={!canEditOrders || savingTracking}
                                aria-label={`Remover ${codigo}`}
                                className="inline-flex h-5 w-5 items-center justify-center rounded-full text-zinc-400 transition hover:bg-rose-50 hover:text-rose-600 disabled:cursor-not-allowed"
                              >
                                <X size={12} />
                              </button>
                            </span>
                          ))}
                        </div>
                      ) : (
                        <p className="mt-2 text-xs text-zinc-500">
                          Nenhum código ainda. Pode colar vários de uma vez, separados por vírgula.
                        </p>
                      )}
                    </div>

                    <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
                      <div>
                        <label className="text-[11px] font-semibold uppercase tracking-wide text-zinc-500">
                          Link de acompanhamento
                        </label>
                        <input
                          type="text"
                          value={trackingUrlInput}
                          onChange={(event) => setTrackingUrlInput(event.target.value)}
                          disabled={!canEditOrders || savingTracking}
                          className="ks-input mt-1.5 h-10"
                          placeholder="https://transportadora.com/rastreio/..."
                        />
                      </div>
                      <div>
                        <label className="text-[11px] font-semibold uppercase tracking-wide text-zinc-500">
                          Recado para o cliente
                        </label>
                        <input
                          type="text"
                          value={trackingNotesInput}
                          onChange={(event) => setTrackingNotesInput(event.target.value)}
                          disabled={!canEditOrders || savingTracking}
                          className="ks-input mt-1.5 h-10"
                          placeholder="Ex.: postado hoje, entrega em dois volumes."
                        />
                      </div>
                    </div>

                    {trackingFeedback ? (
                      <div
                        className={`rounded-xl border px-3 py-2 text-sm ${
                          trackingFeedback.type === "success"
                            ? "border-emerald-200 bg-emerald-50 text-emerald-700"
                            : "border-rose-200 bg-rose-50 text-rose-700"
                        }`}
                      >
                        {trackingFeedback.message}
                      </div>
                    ) : null}

                    <div className="flex flex-wrap items-center gap-2">
                      <button
                        type="button"
                        onClick={handleSaveTracking}
                        disabled={savingTracking || !canEditOrders}
                        className="ks-button ks-button-primary ks-button-sm"
                      >
                        {savingTracking ? "Salvando..." : "Salvar rastreio"}
                      </button>
                      {codigosDeRastreio.length || trackingUrlInput || trackingNotesInput ? (
                        <button
                          type="button"
                          onClick={() => {
                            setCodigosDeRastreio([]);
                            setNovoCodigoDeRastreio("");
                            setTrackingUrlInput("");
                            setTrackingNotesInput("");
                            setTrackingFeedback(null);
                          }}
                          disabled={savingTracking || !canEditOrders}
                          className="ks-button ks-button-ghost ks-button-sm"
                        >
                          Limpar
                        </button>
                      ) : null}
                      {trackingUrl ? (
                        <a
                          href={trackingUrl}
                          target="_blank"
                          rel="noreferrer"
                          className="ks-button ks-button-ghost ks-button-sm"
                        >
                          Abrir link salvo
                        </a>
                      ) : null}
                    </div>
                  </div>
                </div>
              )}
                </div>
              ) : null}
            </div>

          </div>
        </div>

        <OrderPrintDocument
          order={order as OrderPrintDocumentOrder}
          items={items}
          payments={payments}
          profile={profile}
          creatorName={creatorName}
        />

        {/* Modals */}
        <Dialog open={clientDetailsOpen} onOpenChange={setClientDetailsOpen}>
          <DialogContent className="max-w-lg">
            <DialogHeader>
              <DialogTitle>Dados completos do cliente</DialogTitle>
              <DialogDescription>Informações cadastradas no CRM para este cliente.</DialogDescription>
            </DialogHeader>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
              <div className="rounded-lg border border-zinc-200 px-3 py-2">
                <div className="text-xs text-zinc-500">Nome</div>
                <div className="font-medium text-zinc-900">{order.clients?.name || "-"}</div>
              </div>
              <div className="rounded-lg border border-zinc-200 px-3 py-2">
                <div className="text-xs text-zinc-500">Empresa</div>
                <div className="font-medium text-zinc-900">{order.clients?.company_name || "-"}</div>
              </div>
              <div className="rounded-lg border border-zinc-200 px-3 py-2">
                <div className="text-xs text-zinc-500">Tipo</div>
                <div className="font-medium text-zinc-900">{order.clients?.type === "pj" ? "Pessoa Jurídica" : order.clients?.type === "pf" ? "Pessoa Física" : "-"}</div>
              </div>
              <div className="rounded-lg border border-zinc-200 px-3 py-2">
                <div className="text-xs text-zinc-500">Documento</div>
                <div className="font-medium text-zinc-900">{order.clients?.document || "-"}</div>
              </div>
              <div className="rounded-lg border border-zinc-200 px-3 py-2">
                <div className="text-xs text-zinc-500">WhatsApp</div>
                <div className="font-medium text-zinc-900">{order.clients?.whatsapp || "-"}</div>
              </div>
              <div className="rounded-lg border border-zinc-200 px-3 py-2">
                <div className="text-xs text-zinc-500">Telefone</div>
                <div className="font-medium text-zinc-900">{order.clients?.phone || "-"}</div>
              </div>
              <div className="rounded-lg border border-zinc-200 px-3 py-2 sm:col-span-2">
                <div className="text-xs text-zinc-500">E-mail</div>
                <div className="font-medium text-zinc-900 break-all">{order.clients?.email || "-"}</div>
              </div>
              <div className="rounded-lg border border-zinc-200 px-3 py-2 sm:col-span-2">
                <div className="text-xs text-zinc-500">{catalogOrder ? "Endereço de entrega" : "Endereço"}</div>
                <div className="font-medium text-zinc-900 break-words">{clientFullAddress || "-"}</div>
              </div>
              <div className="rounded-lg border border-zinc-200 px-3 py-2 sm:col-span-2">
                <div className="text-xs text-zinc-500">Tags</div>
                <div className="font-medium text-zinc-900">{order.clients?.tags && order.clients.tags.length > 0 ? order.clients.tags.join(", ") : "-"}</div>
              </div>
              <div className="rounded-lg border border-zinc-200 px-3 py-2 sm:col-span-2">
                <div className="text-xs text-zinc-500">Observações</div>
                <div className="font-medium text-zinc-900 whitespace-pre-wrap break-words">{order.clients?.notes || "-"}</div>
              </div>
            </div>
          </DialogContent>
        </Dialog>
        <CaixaDeConfirmacao pedido={confirmacao} ocupado={updating} aoFechar={() => setConfirmacao(null)} />

        {/* A prévia da atualização, no desenho da casa.
            Estava com grade de "rótulo: valor" em cinza cru, fora do sistema
            de estilos, e o que interessa (quanto o pedido passa a valer) ficava
            perdido no meio de onze linhas de igual peso. */}
        <Dialog open={syncPreviewOpen} onOpenChange={setSyncPreviewOpen}>
          <DialogContent className="flex max-h-[90vh] w-[calc(100vw-1.5rem)] max-w-[720px] flex-col gap-0 overflow-hidden rounded-2xl border-[var(--ks-color-border-subtle)] p-0 sm:w-[95vw]">
            <DialogHeader className="shrink-0 border-b border-[var(--ks-color-border-subtle)] px-5 py-4 text-left sm:px-6 sm:py-5">
              <DialogTitle className="text-base font-semibold tracking-[-0.02em]">Atualizar o pedido pelo orçamento</DialogTitle>
              <DialogDescription className="text-sm text-[var(--ks-color-text-muted)]">
                Os itens deste pedido passam a ser os do orçamento{order.quotes?.number ? ` #${order.quotes.number}` : ""}, do
                jeito que ele está agora.
              </DialogDescription>
            </DialogHeader>

            <div className="min-h-0 flex-1 space-y-4 overflow-y-auto px-5 py-5 sm:px-6">
              {/* Atualizar um pedido que já está na bancada mexe no que a
                  produção está fazendo, e o apontamento por item perde o
                  vínculo. Melhor dizer antes do que descobrir depois. */}
              {order.status === "in_production" ? (
                <Aviso titulo="Este pedido já está em produção">
                  O tempo já apontado por item deixa de ficar ligado a eles. O total de horas do pedido continua
                  registrado.
                </Aviso>
              ) : null}

              {/* O que interessa: quanto o pedido vale hoje e quanto passa a
                  valer. Os dois lado a lado, e o de chegada com destaque. */}
              <div className="grid gap-3 sm:grid-cols-2">
                <div className="ks-card">
                  <div className="ks-metric">
                    <div className="ks-metric-label">Como está hoje</div>
                    <div className="ks-metric-value ks-num">{formatMoney(syncPreviewSummary?.totalBefore ?? 0)}</div>
                    <div className="ks-metric-foot">
                      {syncPreviewSummary?.itemsBefore ?? 0} {(syncPreviewSummary?.itemsBefore ?? 0) === 1 ? "item" : "itens"}
                    </div>
                  </div>
                </div>

                <div className="ks-card border-[rgba(79,70,229,0.35)] bg-[rgba(79,70,229,0.05)]">
                  <div className="ks-metric">
                    <div className="ks-metric-label text-[var(--ks-color-primary)]">Como fica</div>
                    <div className="ks-metric-value ks-num">{formatMoney(syncPreviewSummary?.totalAfter ?? 0)}</div>
                    <div className="ks-metric-foot">
                      <span>
                        {syncPreviewSummary?.itemsAfter ?? 0} {(syncPreviewSummary?.itemsAfter ?? 0) === 1 ? "item" : "itens"}
                      </span>
                      {(() => {
                        const antes = Number(syncPreviewSummary?.totalBefore ?? 0);
                        const depois = Number(syncPreviewSummary?.totalAfter ?? 0);
                        const diferenca = depois - antes;
                        if (Math.abs(diferenca) < 0.01) return <span className="ks-delta ks-delta-flat">mesmo valor</span>;
                        return (
                          <span className={diferenca > 0 ? "ks-delta ks-delta-up" : "ks-delta ks-delta-down"}>
                            {diferenca > 0 ? "+" : "−"} {formatMoney(Math.abs(diferenca))}
                          </span>
                        );
                      })()}
                    </div>
                  </div>
                </div>
              </div>

              {/* Desconto e frete só aparecem quando existem: linha de zero é
                  linha que a pessoa lê à toa. */}
              {(syncPreviewSummary?.quoteDiscount ?? 0) > 0 || (syncPreviewSummary?.quoteShipping ?? 0) > 0 ? (
                <div className="flex flex-wrap items-center gap-x-5 gap-y-1 px-1 text-sm text-[var(--ks-color-text-muted)]">
                  <span>
                    Subtotal do orçamento{" "}
                    <strong className="ks-num text-[var(--ks-color-text-primary)]">
                      {formatMoney(syncPreviewSummary?.quoteSubtotal ?? 0)}
                    </strong>
                  </span>
                  {(syncPreviewSummary?.quoteDiscount ?? 0) > 0 ? (
                    <span>
                      Desconto{" "}
                      <strong className="ks-num text-rose-600">− {formatMoney(syncPreviewSummary?.quoteDiscount ?? 0)}</strong>
                    </span>
                  ) : null}
                  {(syncPreviewSummary?.quoteShipping ?? 0) > 0 ? (
                    <span>
                      Frete <strong className="ks-num text-sky-600">+ {formatMoney(syncPreviewSummary?.quoteShipping ?? 0)}</strong>
                    </span>
                  ) : null}
                </div>
              ) : null}

              <div className="space-y-2">
                <div className="flex flex-wrap items-center gap-2">
                  <span className="text-[13px] font-semibold text-[var(--ks-color-text-primary)]">O que muda nos itens</span>
                  {/* "1 alterado(s)" é preguiça de plural: quem lê é gente. */}
                  {(syncPreviewSummary?.changed ?? 0) > 0 ? (
                    <span className="ks-chip ks-chip-info">
                      {syncPreviewSummary?.changed === 1 ? "1 item muda" : `${syncPreviewSummary?.changed} itens mudam`}
                    </span>
                  ) : null}
                  {(syncPreviewSummary?.added ?? 0) > 0 ? (
                    <span className="ks-chip ks-chip-success">
                      {syncPreviewSummary?.added === 1 ? "1 item novo" : `${syncPreviewSummary?.added} itens novos`}
                    </span>
                  ) : null}
                  {(syncPreviewSummary?.removed ?? 0) > 0 ? (
                    <span className="ks-chip ks-chip-danger">
                      {syncPreviewSummary?.removed === 1 ? "1 item sai" : `${syncPreviewSummary?.removed} itens saem`}
                    </span>
                  ) : null}
                </div>

                {syncPreviewChanges.length === 0 ? (
                  <div className="ks-card px-4 py-5 text-center text-sm text-[var(--ks-color-text-muted)]">
                    {syncPreviewSummary?.totalChanged
                      ? "Os itens continuam os mesmos. O que mudou no orçamento foi o frete ou o desconto — e é isso que a atualização traz para o pedido."
                      : "O pedido já está igual ao orçamento. Não há nada para atualizar."}
                  </div>
                ) : (
                  <div className="ks-card divide-y divide-[var(--ks-color-border-subtle)] overflow-hidden p-0">
                    {syncPreviewChanges.map((change) => {
                      const rotulo =
                        change.type === "added" ? "Novo item" : change.type === "removed" ? "Sai do pedido" : "Muda";
                      const tom =
                        change.type === "added"
                          ? "ks-chip ks-chip-success"
                          : change.type === "removed"
                            ? "ks-chip ks-chip-danger"
                            : "ks-chip ks-chip-info";
                      const nome = change.after?.title || change.before?.title || "Item";
                      return (
                        <div key={`${change.index}-${change.type}`} className="px-4 py-3">
                          <div className="flex flex-wrap items-center gap-2">
                            <span className="text-sm font-semibold text-[var(--ks-color-text-primary)]">{nome}</span>
                            <span className={tom}>{rotulo}</span>
                          </div>

                          <div className="mt-2 grid gap-1.5 text-sm sm:grid-cols-2">
                            {change.before ? (
                              <div className={change.type === "removed" ? "text-rose-700" : "text-[var(--ks-color-text-muted)]"}>
                                <span className="text-xs uppercase tracking-wide text-[var(--ks-color-text-soft)]">Antes</span>
                                <div className="ks-num">
                                  {change.before.quantity} un · {formatMoney(change.before.unit_price)} cada ·{" "}
                                  <strong>{formatMoney(change.before.total_price)}</strong>
                                </div>
                              </div>
                            ) : (
                              <div className="text-[var(--ks-color-text-soft)]">
                                <span className="text-xs uppercase tracking-wide">Antes</span>
                                <div>não existia no pedido</div>
                              </div>
                            )}

                            {change.after ? (
                              <div className="text-[var(--ks-color-text-primary)]">
                                <span className="text-xs uppercase tracking-wide text-[var(--ks-color-text-soft)]">Depois</span>
                                <div className="ks-num">
                                  {change.after.quantity} un · {formatMoney(change.after.unit_price)} cada ·{" "}
                                  <strong>{formatMoney(change.after.total_price)}</strong>
                                </div>
                              </div>
                            ) : (
                              <div className="text-rose-700">
                                <span className="text-xs uppercase tracking-wide text-[var(--ks-color-text-soft)]">Depois</span>
                                <div>sai do pedido</div>
                              </div>
                            )}
                          </div>
                        </div>
                      );
                    })}
                  </div>
                )}
              </div>

              {!podeSincronizarAgora ? (
                <Aviso tom="neutro">
                  {order.status === "canceled"
                    ? "Pedido cancelado não é atualizado pelo orçamento."
                    : "Pedido já finalizado não é atualizado pelo orçamento. Volte ele para a produção antes, se precisar corrigir."}
                </Aviso>
              ) : null}
            </div>

            <DialogFooter className="shrink-0 gap-2 border-t border-[var(--ks-color-border-subtle)] px-5 py-4 sm:px-6">
              <button type="button" onClick={() => setSyncPreviewOpen(false)} className="ks-button ks-button-secondary">
                Fechar
              </button>
              <button
                type="button"
                onClick={handleApplySyncFromQuote}
                disabled={syncingFromQuote || !podeSincronizarAgora || !haOQueAtualizar}
                className="ks-button ks-button-primary"
              >
                {syncingFromQuote ? "Aplicando…" : "Aplicar atualização"}
              </button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
        <Dialog open={cancelPdvModalOpen} onOpenChange={setCancelPdvModalOpen}>
          <DialogContent className="max-w-md">
            <DialogHeader>
              <DialogTitle>Cancelar venda PDV</DialogTitle>
              <DialogDescription>
                Esta ação vai cancelar a venda e aplicar o estorno financeiro automaticamente.
              </DialogDescription>
            </DialogHeader>
            <DialogFooter>
              <button
                type="button"
                onClick={() => setCancelPdvModalOpen(false)}
                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={handleCancelPdvSale}
                disabled={cancelingPdvSale || !canWriteOrders}
                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"
              >
                {cancelingPdvSale ? "Cancelando..." : "Confirmar cancelamento"}
              </button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
        <Dialog open={Boolean(cancelFeedbackModal)} onOpenChange={(open) => !open && setCancelFeedbackModal(null)}>
          <DialogContent className="max-w-md">
            <DialogHeader>
              <DialogTitle>{cancelFeedbackModal?.title || "Aviso"}</DialogTitle>
              <DialogDescription>{cancelFeedbackModal?.message || ""}</DialogDescription>
            </DialogHeader>
            <DialogFooter>
              <button
                type="button"
                onClick={() => setCancelFeedbackModal(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={protocoloModalOpen}
        onOpenChange={setProtocoloModalOpen}
        orderId={order?.id}
        orderNumber={order?.number}
      />

      <OrderLabelPrintModal
        open={labelModalOpen}
        onOpenChange={setLabelModalOpen}
        orderId={order?.id}
        orderNumber={order?.number}
      />
      </div>
  );
}