"use client";

import { useEffect, useMemo, useRef, useState, type PointerEvent as ReactPointerEvent } from "react";
import Image from "next/image";
import { miniatura } from "@/lib/foto";
import { getSupabaseClient } from "@/lib/supabase";
import { canCompany, getCompanyContext } from "@/lib/company-context";
import { PlanoDeRodagem } from "@/components/producao/plano-de-rodagem";
import { PageHeader } from "@/components/ui/page-header";
import { Button } from "@/components/ui/button";
import { CustomSelect } from "@/components/ui/custom-select";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import {
  ClipboardList,
  Clock,
  Zap,
  CheckCircle2,
  Truck,
  Calendar,
  Thermometer,
  Eye,
  FileDown,
  Loader2,
  Pause,
  Settings,
  Plus,
  Trash2,
  Archive,
  ZoomIn,
  ZoomOut,
  Maximize2,
  Minimize2,
  X,
} from "lucide-react";
import { Order, OrderStatus, FinancialStatus, OrderItem } from "@/types/orders";
import type {
  ProductionSheetItem,
  ProductionSheetPayload,
} from "@/lib/orders/production-sheet-print";
import { explicarConsumo, formatarDuracao, notasDaQuantidade, quantidadeLegivel } from "@/lib/orders/ficha-de-producao";
import { quantidadeDoItem } from "@/lib/orders/quantidade-do-item";
import {
  EXPEDIENTE_PADRAO,
  NOME_DO_DIA,
  expedienteValido,
  segundosUteisDasSessoes,
  type Expediente,
} from "@/lib/orders/expediente";
import {
  MOTIVOS_DE_PERDA,
  ROTULO_DO_MOTIVO,
  type MotivoDePerda,
  type PainelDeProducao,
  type StatusDaPerda,
} from "@/lib/orders/eventos-de-producao";
import type { CapacidadeDaFila } from "@/lib/precificacao/tempo-de-producao";
import type { FilaDeProducao } from "@/lib/precificacao/tempo-de-producao.server";
import { Timer } from "lucide-react";
import { formatDateBr, parseDateValue } from "@/utils/formatters";

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

type OrderItemSummary = Pick<OrderItem, "order_id" | "title" | "quantity" | "product_id"> & {
  image_url?: string | null;
  art_image_urls?: string[];
};

type OrderWithExtras = Omit<Order, "quotes"> & {
  quotes?: OrderQuoteFragment | null;
  items?: OrderItemSummary[];
};

type ProductionColumn = {
  id: string;
  label: string;
  status: OrderStatus;
  icon: typeof Clock;
  isDefault?: boolean;
};

type CustomColumnConfig = {
  id: string;
  label: string;
  status: OrderStatus;
  position: number;
};

type KanbanSettings = {
  columns: CustomColumnConfig[];
  archiveEnabled: boolean;
  archiveDays: number | null;
  archiveMode: "days" | "manual";
  /* O expediente da produção: o tempo útil do cronômetro conta só dentro dele. */
  expediente: Expediente;
  /* Perda acima deste % do consumo previsto espera aprovação. Nulo: baixa
     direto e avisa. Zero: toda perda espera. */
  perdaAprovacaoPct: number | null;
};

const ROTULO_DO_STATUS_DA_PERDA: Record<StatusDaPerda, string> = {
  aplicada: "Baixada",
  pendente: "Aguardando aprovação",
  recusada: "Recusada",
  estornada: "Estornada",
};

/* Quantas peças, e quanto isso dá na unidade de venda. "2 m²" para duas
   peças de 3 × 2 m era o rótulo copiando a unidade errada. */

const kanbanStatusOrder: OrderStatus[] = [
  "pending_production",
  "in_production",
  "finished",
  "delivered",
];

const kanbanStatusOptions = [
  { value: "pending_production", label: "Aguardando Produção" },
  { value: "in_production", label: "Em Produção" },
  { value: "finished", label: "Finalizado" },
  { value: "delivered", label: "Pronto para Entrega" },
];

const statusIcons: Record<OrderStatus, typeof Clock> = {
  pending_production: Clock,
  in_production: Zap,
  finished: CheckCircle2,
  delivered: Truck,
  canceled: Clock,
};

const baseColumns: ProductionColumn[] = [
  {
    id: "status:pending_production",
    status: "pending_production",
    label: "Aguardando Produção",
    icon: Clock,
    isDefault: true,
  },
  {
    id: "status:in_production",
    status: "in_production",
    label: "Em Produção",
    icon: Zap,
    isDefault: true,
  },
  {
    id: "status:finished",
    status: "finished",
    label: "Finalizado",
    icon: CheckCircle2,
    isDefault: true,
  },
  {
    id: "status:delivered",
    status: "delivered",
    label: "Pronto para Entrega",
    icon: Truck,
    isDefault: true,
  },
];

const baseColumnByStatus = baseColumns.reduce((acc, column) => {
  acc[column.status] = column;
  return acc;
}, {} as Partial<Record<OrderStatus, ProductionColumn>>);

const defaultKanbanSettings: KanbanSettings = {
  columns: [],
  archiveEnabled: true,
  archiveDays: 7,
  archiveMode: "days",
  expediente: EXPEDIENTE_PADRAO,
  perdaAprovacaoPct: null,
};

const KANBAN_ARCHIVED_STAGE_ID = "__kanban_archived__";

function makeColumnId() {
  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
    return `stage-${crypto.randomUUID()}`;
  }
  return `stage-${Date.now()}-${Math.random().toString(16).slice(2)}`;
}

function isKanbanStatus(value: unknown): value is OrderStatus {
  return kanbanStatusOrder.includes(value as OrderStatus);
}

function normalizeCustomColumns(raw: unknown): CustomColumnConfig[] {
  if (!Array.isArray(raw)) return [];
  const normalized = raw
    .map((item, index) => {
      if (!item || typeof item !== "object") return null;
      const record = item as Record<string, unknown>;
      const id = typeof record.id === "string" && record.id ? record.id : makeColumnId();
      const labelRaw = typeof record.label === "string" ? record.label.trim() : "";
      const label = labelRaw || `Etapa ${index + 1}`;
      const status = isKanbanStatus(record.status) ? (record.status as OrderStatus) : "in_production";
      const position = Number.isFinite(Number(record.position)) ? Number(record.position) : index;
      return { id, label, status, position };
    })
    .filter(Boolean) as CustomColumnConfig[];

  return normalized.sort((a, b) => a.position - b.position);
}

function normalizeArchiveDays(value: unknown, fallback: number | null) {
  const numeric = Number(value);
  if (!Number.isFinite(numeric) || numeric <= 0) return fallback;
  return Math.min(Math.max(Math.floor(numeric), 1), 365);
}

function normalizeArchiveMode(value: unknown, fallback: "days" | "manual" = "days") {
  if (value === "days" || value === "manual") return value;
  return fallback;
}

function toNumber(value: number | string | null | undefined) {
  const parsed = Number(value);
  return Number.isFinite(parsed) ? parsed : 0;
}

function formatQty(value: number | string | null | undefined, maxDigits = 3) {
  return new Intl.NumberFormat("pt-BR", {
    minimumFractionDigits: 0,
    maximumFractionDigits: maxDigits,
  }).format(toNumber(value));
}

function itemMeasure(item: ProductionSheetItem) {
  if (item.unit_type === "square_meter") {
    const width = toNumber(item.width_m);
    const height = toNumber(item.height_m);
    if (width > 0 && height > 0) return `${formatQty(width)}m x ${formatQty(height)}m`;
  }

  if (item.unit_type === "linear_meter" || item.unit_type === "meter") {
    const length = toNumber(item.length_m);
    if (length > 0) return `${formatQty(length)}m`;
  }

  return "-";
}

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 resolveProductionSeconds(
  order: {
    production_accumulated_seconds?: number | null;
    production_started_at?: string | null;
  } | null | undefined,
  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);
}

function formatDate(dateStr: string) {
  return formatDateBr(dateStr);
}

function startOfDay(date: Date) {
  const d = new Date(date);
  d.setHours(0, 0, 0, 0);
  return d;
}

function isOverdue(dateStr: string) {
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  const due = parseDateValue(dateStr);
  if (!due) return false;
  due.setHours(0, 0, 0, 0);
  return due < today;
}

function financialLabel(status: FinancialStatus) {
  switch (status) {
    case "unpaid":
      return "Não pago";
    case "partially_paid":
      return "Parcial";
    case "paid":
      return "Pago";
    default:
      return "Não pago";
  }
}

function financialBadgeClass(status: FinancialStatus) {
  switch (status) {
    case "paid":
      return "bg-emerald-50 text-emerald-700 border border-emerald-200";
    case "partially_paid":
      return "bg-amber-50 text-amber-700 border border-amber-200";
    case "unpaid":
      return "bg-rose-50 text-rose-700 border border-rose-200";
    default:
      return "bg-slate-50 text-slate-700 border border-slate-200";
  }
}

function initialsFromName(name: string) {
  const parts = name.split(" ").filter(Boolean);
  if (parts.length === 0) return "C";
  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
  return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
}

function deadlineProgress(createdAt: string, deadline?: string | null) {
  if (!deadline) return 0;
  const start = new Date(createdAt).getTime();
  const deadlineDate = parseDateValue(deadline);
  const end = deadlineDate ? deadlineDate.getTime() : NaN;
  const now = Date.now();
  if (!Number.isFinite(start) || !Number.isFinite(end) || end <= start) return 100;
  const ratio = (now - start) / (end - start);
  return Math.min(100, Math.max(0, ratio * 100));
}

function columnTone(status: OrderStatus) {
  switch (status) {
    case "pending_production":
      return {
        panel: "bg-white border border-indigo-200 shadow-[0_16px_32px_rgba(15,23,42,0.08)]",
        header: "bg-indigo-600 text-white",
        icon: "bg-white text-indigo-700",
        count: "bg-white text-indigo-700",
      };
    case "in_production":
      return {
        panel: "bg-white border border-sky-200 shadow-[0_16px_32px_rgba(15,23,42,0.08)]",
        header: "bg-sky-600 text-white",
        icon: "bg-white text-sky-700",
        count: "bg-white text-sky-700",
      };
    case "finished":
      return {
        panel: "bg-white border border-emerald-200 shadow-[0_16px_32px_rgba(15,23,42,0.08)]",
        header: "bg-emerald-600 text-white",
        icon: "bg-white text-emerald-700",
        count: "bg-white text-emerald-700",
      };
    case "delivered":
      return {
        panel: "bg-white border border-orange-200 shadow-[0_16px_32px_rgba(15,23,42,0.08)]",
        header: "bg-orange-600 text-white",
        icon: "bg-white text-orange-700",
        count: "bg-white text-orange-700",
      };
    default:
      return {
        panel: "bg-white border border-slate-200 shadow-[0_16px_32px_rgba(15,23,42,0.08)]",
        header: "bg-slate-700 text-white",
        icon: "bg-white text-slate-700",
        count: "bg-white text-slate-700",
      };
  }
}

export default function ProductionKanbanPage() {
  const [orders, setOrders] = useState<OrderWithExtras[]>([]);
  const [loading, setLoading] = useState(true);
  const [draggingOrderId, setDraggingOrderId] = useState<string | null>(null);
  const [updatingOrderId, setUpdatingOrderId] = useState<string | null>(null);
  const [canWriteOrders, setCanWriteOrders] = useState(false);
  const [productionModalOpen, setProductionModalOpen] = useState(false);
  const [productionModalOrderId, setProductionModalOrderId] = useState<string | null>(null);
  const [productionSheet, setProductionSheet] = useState<ProductionSheetPayload | null>(null);
  const [productionSheetLoading, setProductionSheetLoading] = useState(false);
  const [productionSheetError, setProductionSheetError] = useState<string | null>(null);
  const [downloadingProductionPdf, setDownloadingProductionPdf] = useState(false);
  const [startingProduction, setStartingProduction] = useState(false);
  const [pausingProduction, setPausingProduction] = useState(false);
  const [timerNowMs, setTimerNowMs] = useState(() => Date.now());
  /* O painel de produção do pedido aberto no modal: etapas, sessões do
     cronômetro e apontamentos por item. */
  const [painel, setPainel] = useState<PainelDeProducao | null>(null);
  const [painelLoading, setPainelLoading] = useState(false);
  /* Perdas e retrabalho: o formulário aberto num item, e o que está salvando. */
  const [perdaForm, setPerdaForm] = useState<{
    itemId: string;
    materialId: string;
    quantidade: string;
    motivo: MotivoDePerda;
    notas: string;
    refeito: boolean;
  } | null>(null);
  const [perdaSalvando, setPerdaSalvando] = useState(false);
  const [perdaAcaoPendente, setPerdaAcaoPendente] = useState<string | null>(null);
  const [perdaPctInput, setPerdaPctInput] = useState("");
  /* A fila contra a capacidade do mês: a faixa no topo do kanban. */
  const [fila, setFila] = useState<{ fila: FilaDeProducao; capacidade: CapacidadeDaFila; expediente: Expediente } | null>(null);
  const [itemAcaoPendente, setItemAcaoPendente] = useState<string | null>(null);
  const [kanbanSettings, setKanbanSettings] = useState<KanbanSettings>(defaultKanbanSettings);
  const [settingsProfileId, setSettingsProfileId] = useState<string | null>(null);
  const [settingsModalOpen, setSettingsModalOpen] = useState(false);
  const [settingsSaving, setSettingsSaving] = useState(false);
  const [settingsDraft, setSettingsDraft] = useState<KanbanSettings | null>(null);
  const [settingsError, setSettingsError] = useState<string | null>(null);
  const [canManageKanban, setCanManageKanban] = useState(false);
  const [activeKanbanView, setActiveKanbanView] = useState<"active" | "history">("active");
  const [isSwitchingView, setIsSwitchingView] = useState(false);
  const [historyRange, setHistoryRange] = useState<"today" | "7d" | "15d" | "30d">("today");
  const [artSlideTick, setArtSlideTick] = useState(0);
  const [archiveDaysInput, setArchiveDaysInput] = useState(
    String(defaultKanbanSettings.archiveDays ?? "")
  );
  const [kanbanZoom, setKanbanZoom] = useState(1);
  const [expandedColumnId, setExpandedColumnId] = useState<string | null>(null);
  const [isPanning, setIsPanning] = useState(false);
  const kanbanScrollRef = useRef<HTMLDivElement | null>(null);
  const panStateRef = useRef({ active: false, startX: 0, startLeft: 0 });
  const switchViewTimeoutRef = useRef<number | null>(null);

  const passthroughLoader = ({ src }: { src: string }) => src;
  const shouldIgnorePan = (target: HTMLElement | null) => {
    if (!target) return false;
    return Boolean(
      target.closest(
        'button, a, input, select, textarea, [role="button"], [draggable="true"]'
      )
    );
  };

  const handleKanbanPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
    if (event.button !== 0 || event.pointerType === "touch") return;
    if (shouldIgnorePan(event.target as HTMLElement | null)) return;
    const container = kanbanScrollRef.current;
    if (!container) return;
    panStateRef.current = {
      active: true,
      startX: event.clientX,
      startLeft: container.scrollLeft,
    };
    container.setPointerCapture(event.pointerId);
    setIsPanning(true);
  };

  const handleKanbanPointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {
    if (!panStateRef.current.active) return;
    const container = kanbanScrollRef.current;
    if (!container) return;
    const deltaX = event.clientX - panStateRef.current.startX;
    container.scrollLeft = panStateRef.current.startLeft - deltaX;
    event.preventDefault();
  };

  const endKanbanPan = (event: ReactPointerEvent<HTMLDivElement>) => {
    if (!panStateRef.current.active) return;
    panStateRef.current.active = false;
    const container = kanbanScrollRef.current;
    if (container?.hasPointerCapture(event.pointerId)) {
      container.releasePointerCapture(event.pointerId);
    }
    setIsPanning(false);
  };

  async function fetchKanbanSettings() {
    try {
      const supabase = getSupabaseClient();
      const {
        data: { user },
      } = await supabase.auth.getUser();
      if (!user) return;
      const ctx = await getCompanyContext(supabase, user);
      const profileId = ctx.ownerId || user.id;
      setSettingsProfileId(profileId);
      setCanManageKanban(canCompany(ctx, user.id, "production.board.columns"));

      const { data, error } = await supabase
        .from("profiles")
        .select(
          "production_kanban_columns, production_kanban_archive_enabled, production_kanban_archive_days, production_kanban_archive_mode, production_work_schedule, production_loss_approval_pct"
        )
        .eq("id", profileId)
        .maybeSingle();

      if (error) {
        const message = String(error.message || "");
        if (message.includes("production_kanban")) {
          setKanbanSettings(defaultKanbanSettings);
          return;
        }
        throw error;
      }

      const columns = normalizeCustomColumns(data?.production_kanban_columns);
      const archiveEnabled =
        typeof data?.production_kanban_archive_enabled === "boolean"
          ? data.production_kanban_archive_enabled
          : defaultKanbanSettings.archiveEnabled;
      const archiveDays = normalizeArchiveDays(
        data?.production_kanban_archive_days,
        defaultKanbanSettings.archiveDays
      );
      const archiveMode = normalizeArchiveMode(
        data?.production_kanban_archive_mode,
        defaultKanbanSettings.archiveMode
      );

      setKanbanSettings({
        columns,
        archiveEnabled,
        archiveDays,
        archiveMode,
        expediente: expedienteValido(data?.production_work_schedule),
        perdaAprovacaoPct:
          data?.production_loss_approval_pct === null || data?.production_loss_approval_pct === undefined
            ? null
            : Number(data.production_loss_approval_pct),
      });
      setArchiveDaysInput(String(archiveDays ?? ""));
    } catch (err) {
      console.error("Erro ao carregar configuracoes do kanban:", err);
    }
  }

  function openSettingsModal() {
    setSettingsDraft({
      columns: normalizeCustomColumns(kanbanSettings.columns),
      archiveEnabled: kanbanSettings.archiveEnabled,
      archiveDays: kanbanSettings.archiveDays,
      archiveMode: kanbanSettings.archiveMode,
      expediente: kanbanSettings.expediente,
      perdaAprovacaoPct: kanbanSettings.perdaAprovacaoPct,
    });
    setPerdaPctInput(kanbanSettings.perdaAprovacaoPct === null ? "" : String(kanbanSettings.perdaAprovacaoPct));
    setArchiveDaysInput(String(kanbanSettings.archiveDays ?? ""));
    setSettingsError(null);
    setSettingsModalOpen(true);
  }

  function closeSettingsModal() {
    setSettingsModalOpen(false);
    setSettingsDraft(null);
    setSettingsError(null);
    setArchiveDaysInput(String(kanbanSettings.archiveDays ?? ""));
  }

  function updateDraftColumns(
    updater: (columns: CustomColumnConfig[]) => CustomColumnConfig[]
  ) {
    setSettingsDraft((prev) => (prev ? { ...prev, columns: updater(prev.columns) } : prev));
  }

  function addCustomColumn() {
    updateDraftColumns((columns) => {
      const nextPosition =
        columns.length > 0 ? Math.max(...columns.map((item) => item.position)) + 1 : 0;
      return [
        ...columns,
        {
          id: makeColumnId(),
          label: `Etapa ${columns.length + 1}`,
          status: "in_production",
          position: nextPosition,
        },
      ];
    });
  }

  async function saveKanbanSettings() {
    if (!settingsDraft || !settingsProfileId) return;
    const sanitizedColumns = normalizeCustomColumns(settingsDraft.columns);
    const archiveDays = normalizeArchiveDays(
      settingsDraft.archiveEnabled && settingsDraft.archiveMode === "days"
        ? archiveDaysInput
        : null,
      defaultKanbanSettings.archiveDays
    );
    if (settingsDraft.archiveEnabled && settingsDraft.archiveMode === "days" && !archiveDays) {
      setSettingsError("Informe quantos dias os pedidos finalizados devem permanecer no Kanban.");
      return;
    }

    const expediente = expedienteValido(settingsDraft.expediente);
    if (settingsDraft.expediente.dias.length === 0) {
      setSettingsError("Marque pelo menos um dia de expediente.");
      return;
    }
    if (expediente.fim <= expediente.inicio) {
      setSettingsError("O expediente termina antes de começar. Confira início e fim.");
      return;
    }

    const perdaPctTexto = perdaPctInput.trim().replace(",", ".");
    const perdaAprovacaoPct = perdaPctTexto === "" ? null : Number(perdaPctTexto);
    if (perdaAprovacaoPct !== null && (!Number.isFinite(perdaAprovacaoPct) || perdaAprovacaoPct < 0 || perdaAprovacaoPct > 1000)) {
      setSettingsError("O limite de perda precisa ser um percentual válido, ou ficar em branco.");
      return;
    }

    setSettingsSaving(true);
    setSettingsError(null);
    try {
      const supabase = getSupabaseClient();
      const { error } = await supabase
        .from("profiles")
        .update({
          production_kanban_columns: sanitizedColumns,
          production_kanban_archive_enabled: settingsDraft.archiveEnabled,
          production_kanban_archive_days: archiveDays,
          production_kanban_archive_mode: settingsDraft.archiveMode,
          production_work_schedule: expediente,
          production_loss_approval_pct: perdaAprovacaoPct,
        })
        .eq("id", settingsProfileId);
      if (error) throw error;

      setKanbanSettings({
        columns: sanitizedColumns,
        archiveEnabled: settingsDraft.archiveEnabled,
        archiveDays,
        archiveMode: settingsDraft.archiveMode,
        expediente,
        perdaAprovacaoPct,
      });
      setArchiveDaysInput(String(archiveDays ?? ""));
      closeSettingsModal();
    } catch (error) {
      const message = error instanceof Error ? error.message : "Erro ao salvar configuracoes.";
      setSettingsError(message);
    } finally {
      setSettingsSaving(false);
    }
  }

  async function carregarFila() {
    try {
      const res = await fetch("/api/production/fila", { cache: "no-store" });
      const json = (await res.json().catch(() => null)) as
        | { ok?: boolean; fila?: FilaDeProducao; capacidade?: CapacidadeDaFila; expediente?: Expediente }
        | null;
      if (res.ok && json?.ok && json.fila && json.capacidade && json.expediente) {
        setFila({ fila: json.fila, capacidade: json.capacidade, expediente: json.expediente });
      }
    } catch {
      /* A faixa é informativa: sem ela o kanban segue. */
    }
  }

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

      const { data: ordersData, error: ordersError } = await supabase
        .from("orders")
        .select(
          "id, number, status, financial_status, client_id, quote_id, created_at, updated_at, production_started_at, production_started_by, production_accumulated_seconds, production_last_stopped_at, production_updated_at, production_stage_id, restock_pending"
        )
        .in("user_id", tenantIds)
        .neq("status", "canceled")
        .order("created_at", { ascending: false });

      if (ordersError) throw ordersError;

      let finalOrders: OrderWithExtras[] = (ordersData ?? []) as OrderWithExtras[];

      const clientIds = Array.from(
        new Set(finalOrders.map((order) => order.client_id).filter(Boolean))
      );
      if (clientIds.length > 0) {
        const { data: clientsData, error: clientsError } = await supabase
          .from("clients")
          .select("id, name, company_name")
          .in("id", clientIds)
          .in("user_id", tenantIds);
        if (!clientsError && clientsData) {
          type ClientSummary = {
            id: string;
            name: string;
            company_name: string | null;
          };
          const clientsMap = (clientsData as ClientSummary[]).reduce(
            (acc, client) => {
              acc[client.id] = client;
              return acc;
            },
            {} as Record<string, ClientSummary>
          );
          finalOrders = finalOrders.map((order) => ({
            ...order,
            clients: clientsMap[order.client_id] || null,
          }));
        }
      }

      const quoteIds = Array.from(
        new Set(finalOrders.map((order) => order.quote_id).filter(Boolean))
      );
      if (quoteIds.length > 0) {
        const { data: quotesData, error: quotesError } = await supabase
          .from("quotes")
          .select("id, delivery_date")
          .in("id", quoteIds)
          .in("user_id", tenantIds);
        if (!quotesError && quotesData) {
          type QuoteSummary = {
            id: string;
            delivery_date?: string | null;
          };
          const quotesMap = (quotesData as QuoteSummary[]).reduce(
            (acc, quote) => {
              acc[quote.id] = quote;
              return acc;
            },
            {} as Record<string, QuoteSummary>
          );
          finalOrders = finalOrders.map((order) => ({
            ...order,
            quotes: quotesMap[order.quote_id] || null,
          }));
        }
      }

      const orderIds = finalOrders.map((order) => order.id);
      if (orderIds.length > 0) {
        type QuoteItemRef = {
          id: string;
          quote_id: string;
          title: string | null;
          quantity: number | null;
          position?: number | null;
        };
        type QuoteArtRef = {
          quote_item_id: string;
          image_urls: string[] | null;
        };
        const quoteItemByQuote: Record<
          string,
          Array<{ title: string; quantity: number; image_urls: string[] }>
        > = {};
        if (quoteIds.length > 0) {
          const { data: quoteItemsData, error: quoteItemsError } = await supabase
            .from("quote_items")
            .select("id, quote_id, title, quantity, position")
            .in("quote_id", quoteIds)
            .order("position", { ascending: true });
          const { data: quoteArtsData, error: quoteArtsError } = await supabase
            .from("quote_item_arts")
            .select("quote_item_id, image_urls")
            .in("quote_id", quoteIds);

          if (!quoteItemsError && !quoteArtsError && quoteItemsData && quoteArtsData) {
            const artByItemId = (quoteArtsData as QuoteArtRef[]).reduce(
              (acc, art) => {
                acc[art.quote_item_id] = Array.isArray(art.image_urls)
                  ? art.image_urls.filter((url) => typeof url === "string" && url.length > 0)
                  : [];
                return acc;
              },
              {} as Record<string, string[]>
            );

            (quoteItemsData as QuoteItemRef[]).forEach((item) => {
              if (!quoteItemByQuote[item.quote_id]) quoteItemByQuote[item.quote_id] = [];
              quoteItemByQuote[item.quote_id].push({
                title: String(item.title || "").trim().toLowerCase(),
                quantity: Number(item.quantity) || 0,
                image_urls: artByItemId[item.id] || [],
              });
            });
          }
        }

        const { data: itemsData, error: itemsError } = await supabase
          .from("order_items")
          .select("order_id, title, quantity, product_id")
          .in("order_id", orderIds);

        if (!itemsError && itemsData) {
          const itemRows = itemsData as OrderItemSummary[];
          const productIds = Array.from(
            new Set(itemRows.map((item) => item.product_id).filter(Boolean))
          ) as string[];
          let productImages: Record<string, string | null> = {};

          if (productIds.length > 0) {
            const { data: productsData, error: productsError } = await supabase
              .from("products")
              .select("id, image_url")
              .in("id", productIds)
              .in("user_id", tenantIds);

            if (!productsError && productsData) {
              productImages = (productsData as { id: string; image_url: string | null }[]).reduce(
                (acc, product) => {
                  acc[product.id] = product.image_url;
                  return acc;
                },
                {} as Record<string, string | null>
              );
            }
          }

          const baseItems = itemRows.map((item) => ({
            ...item,
            image_url: item.product_id ? productImages[item.product_id] ?? null : null,
            art_image_urls: [] as string[],
          }));

          const itemsMap = baseItems.reduce(
            (acc, item) => {
              if (!acc[item.order_id]) {
                acc[item.order_id] = [];
              }
              acc[item.order_id].push(item);
              return acc;
            },
            {} as Record<string, OrderItemSummary[]>
          );

          finalOrders = finalOrders.map((order) => {
            const orderItems = itemsMap[order.id] || [];
            const quoteItems = quoteItemByQuote[order.quote_id] || [];
            const usedQuoteIndexes = new Set<number>();
            const enrichedOrderItems = orderItems.map((item) => {
              const normalizedTitle = String(item.title || "").trim().toLowerCase();
              const itemQty = Number(item.quantity) || 0;
              const exactIndex = quoteItems.findIndex(
                (quoteItem, index) =>
                  !usedQuoteIndexes.has(index) &&
                  quoteItem.title === normalizedTitle &&
                  quoteItem.quantity === itemQty
              );
              const looseIndex =
                exactIndex >= 0
                  ? exactIndex
                  : quoteItems.findIndex(
                      (quoteItem, index) =>
                        !usedQuoteIndexes.has(index) && quoteItem.title === normalizedTitle
                    );
              if (looseIndex >= 0) usedQuoteIndexes.add(looseIndex);
              return {
                ...item,
                art_image_urls: looseIndex >= 0 ? quoteItems[looseIndex].image_urls : [],
              };
            });
            return {
              ...order,
              items: enrichedOrderItems,
            };
          });
        }
      }

      setOrders(finalOrders);
    } catch (err) {
      console.error("Erro ao buscar pedidos:", err);
    } finally {
      setLoading(false);
    }
  }

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

  useEffect(() => {
    if (!kanbanSettings.archiveEnabled && activeKanbanView === "history") {
      setActiveKanbanView("active");
    }
  }, [kanbanSettings.archiveEnabled, activeKanbanView]);

  useEffect(() => {
    return () => {
      if (switchViewTimeoutRef.current) {
        window.clearTimeout(switchViewTimeoutRef.current);
      }
    };
  }, []);

  useEffect(() => {
    if (!productionModalOpen) return;
    const hasRunningTimer = Boolean(productionSheet?.order?.production_started_at);
    if (!hasRunningTimer) return;

    const interval = window.setInterval(() => {
      setTimerNowMs(Date.now());
    }, 1000);

    return () => window.clearInterval(interval);
  }, [productionModalOpen, productionSheet?.order?.production_started_at]);

  useEffect(() => {
    const interval = window.setInterval(() => {
      setArtSlideTick((prev) => prev + 1);
    }, 3200);
    return () => window.clearInterval(interval);
  }, []);

  useEffect(() => {
    if (!expandedColumnId) return;
    const previousOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";

    const handleEscape = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        setExpandedColumnId(null);
      }
    };

    window.addEventListener("keydown", handleEscape);
    return () => {
      document.body.style.overflow = previousOverflow;
      window.removeEventListener("keydown", handleEscape);
    };
  }, [expandedColumnId]);

  const customColumns = useMemo(
    () => normalizeCustomColumns(kanbanSettings.columns),
    [kanbanSettings.columns]
  );

  const archivedOrderIds = useMemo(() => {
    if (!kanbanSettings.archiveEnabled) return new Set<string>();
    const ids = new Set<string>();
    orders.forEach((order) => {
      if (order.production_stage_id === KANBAN_ARCHIVED_STAGE_ID) {
        ids.add(order.id);
      }
    });
    if (kanbanSettings.archiveMode !== "days") return ids;
    const days = normalizeArchiveDays(kanbanSettings.archiveDays, null);
    if (!days) return ids;
    const cutoff = Date.now() - days * 24 * 60 * 60 * 1000;
    orders.forEach((order) => {
      if (order.status !== "finished" && order.status !== "delivered") return;
      const updatedAt = order.production_updated_at || order.updated_at || order.created_at;
      if (!updatedAt) return;
      const updatedMs = new Date(updatedAt).getTime();
      if (Number.isFinite(updatedMs) && updatedMs <= cutoff) {
        ids.add(order.id);
      }
    });
    return ids;
  }, [orders, kanbanSettings.archiveEnabled, kanbanSettings.archiveDays, kanbanSettings.archiveMode]);

  const archivedOrders = useMemo(
    () => orders.filter((order) => archivedOrderIds.has(order.id)),
    [orders, archivedOrderIds]
  );

  const activeOrders = useMemo(
    () => orders.filter((order) => !archivedOrderIds.has(order.id)),
    [orders, archivedOrderIds]
  );

  const isHistoryView = activeKanbanView === "history";
  const canInteractBoard = canWriteOrders && !isHistoryView;
  const boardOrders = isHistoryView ? archivedOrders : activeOrders;

  const historyOrdersFiltered = useMemo(() => {
    const now = new Date();
    const nowMs = now.getTime();
    const todayStartMs = startOfDay(now).getTime();
    const daysMap = { "7d": 7, "15d": 15, "30d": 30 } as const;
    return archivedOrders.filter((order) => {
      const dateRaw = order.production_updated_at || order.updated_at || order.created_at;
      const dateMs = new Date(dateRaw).getTime();
      if (!Number.isFinite(dateMs)) return false;
      if (historyRange === "today") return dateMs >= todayStartMs;
      const days = daysMap[historyRange];
      const cutoff = nowMs - days * 24 * 60 * 60 * 1000;
      return dateMs >= cutoff;
    });
  }, [archivedOrders, historyRange]);

  const historyFinishedCount = useMemo(
    () => historyOrdersFiltered.filter((order) => order.status === "finished").length,
    [historyOrdersFiltered]
  );
  const historyDeliveredCount = useMemo(
    () => historyOrdersFiltered.filter((order) => order.status === "delivered").length,
    [historyOrdersFiltered]
  );
  const historyUnpaidCount = useMemo(
    () =>
      historyOrdersFiltered.filter(
        (order) => order.financial_status === "unpaid" || order.financial_status === "partially_paid"
      ).length,
    [historyOrdersFiltered]
  );
  const historyLateCount = useMemo(
    () =>
      historyOrdersFiltered.filter((order) => {
        const deadline = order.quotes?.delivery_date;
        if (!deadline) return false;
        const concludedAt = new Date(
          order.production_updated_at || order.updated_at || order.created_at
        ).getTime();
        const deadlineAt = parseDateValue(deadline)?.getTime() ?? NaN;
        return Number.isFinite(concludedAt) && Number.isFinite(deadlineAt) && concludedAt > deadlineAt;
      }).length,
    [historyOrdersFiltered]
  );
  const historyAvgCycleHours = useMemo(() => {
    if (!historyOrdersFiltered.length) return 0;
    const totalHours = historyOrdersFiltered.reduce((sum, order) => {
      const startMs = new Date(order.created_at).getTime();
      const endMs = new Date(order.production_updated_at || order.updated_at || order.created_at).getTime();
      if (!Number.isFinite(startMs) || !Number.isFinite(endMs) || endMs < startMs) return sum;
      return sum + (endMs - startMs) / (1000 * 60 * 60);
    }, 0);
    return totalHours / historyOrdersFiltered.length;
  }, [historyOrdersFiltered]);

  const visibleOrders = useMemo(() => boardOrders, [boardOrders]);

  const columnsData = useMemo(() => {
    const customIds = new Set(customColumns.map((column) => column.id));
    const orderedColumns = kanbanStatusOrder.flatMap((status) => {
      const base = baseColumnByStatus[status];
      const extras = customColumns.filter((column) => column.status === status);
      const mappedExtras: ProductionColumn[] = extras.map((column) => ({
        id: column.id,
        label: column.label,
        status: column.status,
        icon: statusIcons[column.status] || Clock,
        isDefault: false,
      }));
      return [...(base ? [base] : []), ...mappedExtras];
    });

    return orderedColumns.map((column) => ({
      ...column,
      orders: visibleOrders.filter((order) => {
        if (order.status !== column.status) return false;
        const stageId = order.production_stage_id ?? null;
        if (!stageId) return Boolean(column.isDefault);
        if (customIds.has(stageId)) return stageId === column.id;
        return Boolean(column.isDefault);
      }),
    }));
  }, [customColumns, visibleOrders]);

  const expandedColumn = useMemo(
    () => columnsData.find((column) => column.id === expandedColumnId) ?? null,
    [columnsData, expandedColumnId]
  );

  useEffect(() => {
    if (!expandedColumnId) return;
    if (!columnsData.some((column) => column.id === expandedColumnId)) {
      setExpandedColumnId(null);
    }
  }, [columnsData, expandedColumnId]);

  function switchKanbanView(nextView: "active" | "history") {
    if (nextView === activeKanbanView) return;
    if (switchViewTimeoutRef.current) {
      window.clearTimeout(switchViewTimeoutRef.current);
    }
    setIsSwitchingView(true);
    setActiveKanbanView(nextView);
    switchViewTimeoutRef.current = window.setTimeout(() => {
      setIsSwitchingView(false);
      switchViewTimeoutRef.current = null;
    }, 180);
  }

  async function archiveOrder(orderId: string) {
    const order = orders.find((item) => item.id === orderId);
    if (!order) return;
    if (order.status !== "finished" && order.status !== "delivered") return;
    await updateOrderStatus(orderId, order.status, {
      stageId: KANBAN_ARCHIVED_STAGE_ID,
      stageLabel: "Arquivado",
    });
  }

  async function restoreOrder(orderId: string) {
    const order = orders.find((item) => item.id === orderId);
    if (!order) return;
    await updateOrderStatus(orderId, order.status, {
      stageId: null,
      stageLabel: "Kanban ativo",
    });
  }

  async function updateOrderStatus(
    orderId: string,
    newStatus: OrderStatus,
    options?: {
      startTimer?: boolean;
      pauseTimer?: boolean;
      stageId?: string | null;
      stageLabel?: string;
    }
  ) {
    const order = orders.find((item) => item.id === orderId);
    if (!order) return null;
    const hasStage = Object.prototype.hasOwnProperty.call(options ?? {}, "stageId");
    const nextStageId = hasStage ? options?.stageId ?? null : order.production_stage_id ?? null;
    const stageChanged = hasStage && nextStageId !== (order.production_stage_id ?? null);
    if (
      order.status === newStatus &&
      !options?.startTimer &&
      !options?.pauseTimer &&
      !stageChanged
    ) {
      return order;
    }

    const previousStatus = order.status;
    const previousStageId = order.production_stage_id ?? null;
    setUpdatingOrderId(orderId);
    const shouldOptimisticStatus = previousStatus !== newStatus;
    if (shouldOptimisticStatus) {
      setOrders((prev) =>
        prev.map((item) =>
          item.id === orderId
            ? { ...item, status: newStatus, production_stage_id: nextStageId }
            : item
        )
      );
    } else if (stageChanged) {
      setOrders((prev) =>
        prev.map((item) =>
          item.id === orderId ? { ...item, production_stage_id: nextStageId } : item
        )
      );
    }

    try {
      const payload: Record<string, unknown> = {
        id: orderId,
        status: newStatus,
        source: "kanban",
        start_timer: options?.startTimer === true,
        pause_timer: options?.pauseTimer === true,
      };
      if (hasStage) {
        payload.production_stage_id = nextStageId;
        payload.production_stage_label = options?.stageLabel ?? "";
      }
      const res = await fetch("/api/orders/status", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify(payload),
      });
      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;
              production_stage_id?: string | null;
            };
          }
        | null;
      if (!res.ok) throw new Error(json?.error || "Erro ao atualizar status do pedido.");

      if (json?.order) {
        setOrders((prev) =>
          prev.map((item) =>
            item.id === orderId
              ? {
                  ...item,
                  status: json.order?.status || newStatus,
                  production_started_at: json.order?.production_started_at ?? item.production_started_at ?? null,
                  production_started_by: json.order?.production_started_by ?? item.production_started_by ?? null,
                  production_accumulated_seconds:
                    typeof json.order?.production_accumulated_seconds === "number"
                      ? json.order.production_accumulated_seconds
                      : item.production_accumulated_seconds ?? 0,
                  production_last_stopped_at:
                    json.order?.production_last_stopped_at ?? item.production_last_stopped_at ?? null,
                  production_updated_at:
                    json.order?.production_updated_at ?? item.production_updated_at ?? null,
                  production_stage_id:
                    json.order?.production_stage_id ?? item.production_stage_id ?? null,
                }
              : item
          )
        );
      }

      return {
        ...order,
        status: json?.order?.status || newStatus,
        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,
      } as OrderWithExtras;
    } catch (err) {
      console.error("Erro ao atualizar status:", err);
      if (shouldOptimisticStatus || stageChanged) {
        setOrders((prev) =>
          prev.map((item) =>
            item.id === orderId
              ? { ...item, status: previousStatus, production_stage_id: previousStageId }
              : item
          )
        );
      }
      alert("Erro ao atualizar status do pedido.");
      return null;
    } finally {
      setUpdatingOrderId(null);
    }
  }

  function handleDragStart(orderId: string, event: React.DragEvent<HTMLDivElement>) {
    event.dataTransfer.setData("text/plain", orderId);
    event.dataTransfer.effectAllowed = "move";
    setDraggingOrderId(orderId);
  }

  function handleDragEnd() {
    setDraggingOrderId(null);
  }

  function resolveStageId(columnId: string | null) {
    if (!columnId) return null;
    return columnId.startsWith("status:") ? null : columnId;
  }

  function findColumnTarget(target: HTMLElement | null) {
    let node: HTMLElement | null = target;
    while (node) {
      const status = node.getAttribute("data-column-status") as OrderStatus | null;
      const columnId = node.getAttribute("data-column-id");
      const columnLabel = node.getAttribute("data-column-label") || "";
      if (status && columnId) {
        return { status, columnId, columnLabel };
      }
      node = node.parentElement;
    }
    return null;
  }

  function handleTouchStart(orderId: string) {
    setDraggingOrderId(orderId);
  }

  function handleTouchEnd(event: React.TouchEvent<HTMLDivElement>, orderId: string) {
    const touch = event.changedTouches[0];
    if (!touch) {
      setDraggingOrderId(null);
      return;
    }
    const target = document.elementFromPoint(touch.clientX, touch.clientY) as HTMLElement | null;
    const columnTarget = findColumnTarget(target);
    if (columnTarget) {
      updateOrderStatus(orderId, columnTarget.status, {
        stageId: resolveStageId(columnTarget.columnId),
        stageLabel: columnTarget.columnLabel,
      });
    }
    setDraggingOrderId(null);
  }

  function handleDrop(event: React.DragEvent<HTMLDivElement>, column: ProductionColumn) {
    event.preventDefault();
    const orderId = event.dataTransfer.getData("text/plain") || draggingOrderId;
    if (!orderId) return;
    updateOrderStatus(orderId, column.status, {
      stageId: resolveStageId(column.id),
      stageLabel: column.label,
    });
  }

  const modalOrder = orders.find((order) => order.id === productionModalOrderId) || null;
  const modalOrderStatus = (productionSheet?.order?.status as OrderStatus | undefined) || modalOrder?.status || null;
  const modalProductionSeconds = resolveProductionSeconds(
    {
      production_accumulated_seconds: productionSheet?.order?.production_accumulated_seconds,
      production_started_at: productionSheet?.order?.production_started_at,
    },
    timerNowMs
  );
  const modalProductionRunning = Boolean(productionSheet?.order?.production_started_at);
  const canResumeTimer = modalOrderStatus === "in_production" && !modalProductionRunning;
  /* Tempo útil: as sessões do cronômetro cortadas pelo expediente, ao vivo. */
  const modalTempoUtilSeg = painel
    ? segundosUteisDasSessoes(painel.resumo.sessoes, painel.expediente, timerNowMs)
    : null;
  const canStartProduction = modalOrderStatus !== "in_production";

  function syncModalOrderFromUpdated(updated: OrderWithExtras) {
    setProductionSheet((prev) => {
      if (!prev) return prev;
      return {
        ...prev,
        order: {
          ...(prev.order || {}),
          status: updated.status,
          production_started_at: updated.production_started_at || null,
          production_started_by: updated.production_started_by || null,
          production_accumulated_seconds: Number(updated.production_accumulated_seconds || 0),
          production_last_stopped_at: updated.production_last_stopped_at || null,
          production_updated_at: updated.production_updated_at || null,
        },
      };
    });
    setTimerNowMs(Date.now());
    if (productionModalOrderId) void carregarPainel(productionModalOrderId);
  }

  /* Depois de salvar o plano de rodagem, a ficha muda de número (folhas,
     corte): recarrega sem fechar o modal. */
  async function recarregarFicha(orderId: string) {
    try {
      const res = await fetch(`/api/orders/${orderId}/production-sheet`, { cache: "no-store" });
      const json = (await res.json().catch(() => null)) as (ProductionSheetPayload & { error?: string }) | null;
      if (res.ok && json && !json.error) setProductionSheet(json);
    } catch {
      /* A ficha antiga continua na tela; o painel já veio atualizado. */
    }
  }

  async function carregarPainel(orderId: string) {
    setPainelLoading(true);
    try {
      const res = await fetch(`/api/orders/${orderId}/producao`, { cache: "no-store" });
      const json = (await res.json().catch(() => null)) as (PainelDeProducao & { error?: string }) | null;
      if (!res.ok || !json || json.error) {
        setPainel(null);
        return;
      }
      setPainel(json);
    } catch {
      setPainel(null);
    } finally {
      setPainelLoading(false);
    }
  }

  async function apontarItem(orderItemId: string, acao: "iniciar_item" | "concluir_item" | "cancelar_item") {
    if (!productionModalOrderId) return;
    setItemAcaoPendente(orderItemId);
    try {
      const res = await fetch(`/api/orders/${productionModalOrderId}/producao`, {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ acao, order_item_id: orderItemId }),
      });
      const json = (await res.json().catch(() => null)) as (PainelDeProducao & { error?: string }) | null;
      if (!res.ok || !json || json.error) {
        alert(json?.error || "Não foi possível registrar o apontamento.");
        return;
      }
      setPainel(json);
    } finally {
      setItemAcaoPendente(null);
    }
  }

  function abrirPerda(itemId: string) {
    setPerdaForm((prev) =>
      prev?.itemId === itemId
        ? null
        : { itemId, materialId: "", quantidade: "", motivo: "impressao", notas: "", refeito: false }
    );
  }

  async function registrarPerda() {
    if (!productionModalOrderId || !perdaForm) return;
    const quantidade = Number(String(perdaForm.quantidade).replace(",", "."));
    if (!(quantidade > 0)) {
      alert("Informe a quantidade perdida.");
      return;
    }
    setPerdaSalvando(true);
    try {
      const res = await fetch(`/api/orders/${productionModalOrderId}/perdas`, {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({
          acao: "registrar",
          order_item_id: perdaForm.itemId,
          material_id: perdaForm.materialId || null,
          quantidade,
          motivo: perdaForm.motivo,
          notas: perdaForm.notas,
          refeito: perdaForm.refeito,
        }),
      });
      const json = (await res.json().catch(() => null)) as (PainelDeProducao & { error?: string }) | null;
      if (!res.ok || !json || json.error) {
        alert(json?.error || "Não foi possível registrar a perda.");
        return;
      }
      setPainel(json);
      setPerdaForm(null);
    } finally {
      setPerdaSalvando(false);
    }
  }

  async function decidirPerda(perdaId: string, acao: "aprovar" | "recusar" | "estornar") {
    if (!productionModalOrderId) return;
    if (acao === "estornar" && !confirm("Estornar esta perda devolve o insumo ao estoque. Continuar?")) return;
    setPerdaAcaoPendente(perdaId);
    try {
      const res = await fetch(`/api/orders/${productionModalOrderId}/perdas`, {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ acao, perda_id: perdaId }),
      });
      const json = (await res.json().catch(() => null)) as (PainelDeProducao & { error?: string }) | null;
      if (!res.ok || !json || json.error) {
        alert(json?.error || "Não foi possível atualizar a perda.");
        return;
      }
      setPainel(json);
    } finally {
      setPerdaAcaoPendente(null);
    }
  }

  async function handleStartProduction() {
    if (!productionModalOrderId) return;
    setStartingProduction(true);
    try {
      const updated = await updateOrderStatus(productionModalOrderId, "in_production", { startTimer: true });
      if (!updated) return;
      syncModalOrderFromUpdated(updated);
    } finally {
      setStartingProduction(false);
    }
  }

  async function handlePauseProduction() {
    if (!productionModalOrderId) return;
    setPausingProduction(true);
    try {
      const updated = await updateOrderStatus(productionModalOrderId, "in_production", { pauseTimer: true });
      if (!updated) return;
      syncModalOrderFromUpdated(updated);
    } finally {
      setPausingProduction(false);
    }
  }

  async function openProductionModal(orderId: string) {
    setProductionModalOpen(true);
    setProductionModalOrderId(orderId);
    setTimerNowMs(Date.now());
    setProductionSheet(null);
    setProductionSheetError(null);
    setProductionSheetLoading(true);
    setPainel(null);
    void carregarPainel(orderId);

    try {
      const res = await fetch(`/api/orders/${orderId}/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 carregar a ordem de producao.");
      }
      if (json.error) {
        throw new Error(json.error);
      }
      setProductionSheet(json);
      if (json.order) {
        const orderMeta = json.order;
        setOrders((prev) =>
          prev.map((item) =>
            item.id === orderId
              ? {
                  ...item,
                  status: (orderMeta.status as OrderStatus | undefined) || item.status,
                  production_started_at: orderMeta.production_started_at ?? item.production_started_at ?? null,
                  production_accumulated_seconds:
                    typeof orderMeta.production_accumulated_seconds === "number"
                      ? orderMeta.production_accumulated_seconds
                      : item.production_accumulated_seconds ?? 0,
                  production_last_stopped_at:
                    orderMeta.production_last_stopped_at ?? item.production_last_stopped_at ?? null,
                }
              : item
          )
        );
      }
    } catch (error) {
      const message =
        error instanceof Error ? error.message : "Erro ao carregar ordem de producao.";
      setProductionSheetError(message);
    } finally {
      setProductionSheetLoading(false);
    }
  }

  async function handleDownloadProductionPdf() {
    if (!productionSheet) return;

    setDownloadingProductionPdf(true);
    try {
      const { buildProductionSheetHtml } = await import("@/lib/orders/production-sheet-print");
      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();
          alert("Nao foi possivel abrir a impressao.");
          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(productionSheet, {
        autoPrint: false,
        autoClose: false,
      });
      document.body.appendChild(iframe);
    } catch (error) {
      const message = error instanceof Error ? error.message : "Erro ao gerar PDF da ordem.";
      alert(message);
    } finally {
      setDownloadingProductionPdf(false);
    }
  }

  if (loading) {
    return (
      <div className="ks-surface flex items-center justify-center py-16">
        <div className="w-5 h-5 border-2 border-[var(--ks-color-primary)] border-t-transparent rounded-full animate-spin" />
      </div>
    );
  }

  const totalOrders = isHistoryView ? historyOrdersFiltered.length : visibleOrders.length;
  const restockPendingCount = visibleOrders.filter((order) => order.restock_pending).length;
  const archivedCount = archivedOrders.length;
  const historyRangeLabel =
    historyRange === "today"
      ? "Hoje"
      : historyRange === "7d"
        ? "Últimos 7 dias"
        : historyRange === "15d"
          ? "Últimos 15 dias"
          : "Últimos 30 dias";
  const minZoom = 0.7;
  const maxZoom = 1.3;
  const zoomStep = 0.05;
  const columnWidthClass = "min-w-[320px] max-w-[420px] sm:min-w-[360px] sm:max-w-[460px]";

  const headerTitle = "Kanban de Produção";
  const headerSubtitle = isHistoryView
    ? "Histórico de pedidos arquivados sem sair da página."
    : "Organize a produção diária arrastando os pedidos entre etapas.";
  const headerActions = (
    <div className="w-full rounded-[22px] border border-slate-200 bg-white/95 px-3 py-2 shadow-[0_12px_28px_rgba(15,23,42,0.1)] backdrop-blur-sm">
      <div className="flex flex-wrap items-center gap-2 sm:gap-3">
        {kanbanSettings.archiveEnabled ? (
          <div className="inline-flex items-center rounded-full border border-slate-200 bg-slate-50 p-1">
            <button
              type="button"
              onClick={() => switchKanbanView("active")}
              className={[
                "rounded-full px-3 py-1.5 text-xs font-semibold transition-colors",
                !isHistoryView
                  ? "bg-[var(--ks-color-primary)] text-white shadow-[0_8px_16px_rgba(15,23,42,0.18)]"
                  : "text-slate-700 hover:bg-white",
              ].join(" ")}
            >
              Kanban ativo ({activeOrders.length})
            </button>
            <button
              type="button"
              onClick={() => switchKanbanView("history")}
              className={[
                "rounded-full px-3 py-1.5 text-xs font-semibold transition-colors inline-flex items-center gap-1.5",
                isHistoryView
                  ? "bg-[var(--ks-color-primary)] text-white shadow-[0_8px_16px_rgba(68,37,167,0.22)]"
                  : "text-slate-700 hover:bg-white",
              ].join(" ")}
            >
              <Archive size={13} />
              Histórico ({archivedCount})
            </button>
          </div>
        ) : null}
        <div className="h-8 w-px bg-slate-200" />
        <div className="flex items-center gap-2 rounded-2xl bg-slate-50 px-2.5 py-1.5">
          <span className="text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500">
            Zoom
          </span>
          <div className="flex items-center gap-1 rounded-full bg-white px-2 py-1 border border-slate-200">
            <button
              type="button"
              onClick={() =>
                setKanbanZoom((prev) => Math.max(minZoom, Number((prev - zoomStep).toFixed(2))))
              }
              className="h-7 w-7 rounded-full border border-slate-200 bg-white text-slate-700 inline-flex items-center justify-center transition-colors hover:bg-slate-100"
              aria-label="Diminuir zoom"
            >
              <ZoomOut size={14} />
            </button>
            <input
              type="range"
              min={minZoom}
              max={maxZoom}
              step={zoomStep}
              value={kanbanZoom}
              onChange={(event) => setKanbanZoom(Number(event.target.value))}
              className="h-1.5 w-24 sm:w-28 accent-[var(--ks-color-primary)]"
              aria-label="Zoom do kanban"
            />
            <button
              type="button"
              onClick={() =>
                setKanbanZoom((prev) => Math.min(maxZoom, Number((prev + zoomStep).toFixed(2))))
              }
              className="h-7 w-7 rounded-full border border-slate-200 bg-white text-slate-700 inline-flex items-center justify-center transition-colors hover:bg-slate-100"
              aria-label="Aumentar zoom"
            >
              <ZoomIn size={14} />
            </button>
          </div>
          <span className="text-xs font-semibold text-slate-700 min-w-[42px] text-right">
            {Math.round(kanbanZoom * 100)}%
          </span>
        </div>
        <div className="ml-auto">
          <Button
            variant="outline"
            onClick={openSettingsModal}
            icon={<Settings size={16} />}
            disabled={!canManageKanban}
            className="rounded-full border-slate-200 bg-white text-slate-700 hover:bg-slate-100"
          >
            Colunas e regras
          </Button>
        </div>
      </div>
    </div>
  );

  function renderOrderCard(order: OrderWithExtras, expanded = false) {
    const isDragging = draggingOrderId === order.id;
    const isUpdating = updatingOrderId === order.id;
    const isArchived = archivedOrderIds.has(order.id);
    const clientName =
      order.clients?.company_name ||
      order.clients?.name ||
      "Cliente sem nome";
    const mainItem = order.items?.[0];
    const productTitle = mainItem?.title || "Produto";
    const deadline = order.quotes?.delivery_date;
    const overdue = deadline ? isOverdue(deadline) : false;
    const visualImages = [
      ...(mainItem?.art_image_urls || []),
      ...(mainItem?.art_image_urls?.length ? [] : mainItem?.image_url ? [mainItem.image_url] : []),
    ];
    const imageUrl =
      visualImages.length > 0
        ? visualImages[artSlideTick % visualImages.length]
        : null;
    const quantityTotal =
      order.items?.reduce((sum, item) => sum + (item.quantity || 0), 0) || 0;
    const initials = initialsFromName(clientName);
    const progress = deadlineProgress(order.created_at, deadline);
    const deadlineLabel = deadline ? formatDate(deadline) : "--/--/----";

    return (
      <div
        key={order.id}
        draggable={canInteractBoard}
        onDragStart={
          canInteractBoard
            ? (event) => handleDragStart(order.id, event)
            : undefined
        }
        onDragEnd={canInteractBoard ? handleDragEnd : undefined}
        onTouchStart={
          canInteractBoard ? () => handleTouchStart(order.id) : undefined
        }
        onTouchEnd={
          canInteractBoard
            ? (event) => handleTouchEnd(event, order.id)
            : undefined
        }
        className={[
          "rounded-2xl bg-white p-3 shadow-[0_14px_28px_rgba(15,23,42,0.1)] border border-slate-200 transition-all duration-200 min-w-0",
          expanded ? "min-h-[248px]" : "min-h-[230px]",
          "flex flex-col gap-2.5",
          isDragging
            ? "opacity-60 scale-[0.99]"
            : "hover:-translate-y-0.5 hover:shadow-[0_20px_50px_rgba(15,23,42,0.12)]",
          isUpdating ? "pointer-events-none opacity-70" : "",
        ].join(" ")}
      >
        <div className="flex flex-col gap-2.5">
          <div className="flex items-center justify-between gap-2">
            <div className="flex flex-wrap items-center gap-1.5">
              <span className="px-2 py-0.5 rounded-full text-[10px] font-semibold bg-slate-900 text-white">
                #{order.number}
              </span>
              {isArchived ? (
                <span className="px-2 py-0.5 rounded-full text-[10px] font-semibold bg-slate-100 text-slate-600 border border-slate-200">
                  Arquivado
                </span>
              ) : null}
            </div>
            <button
              type="button"
              onClick={(event) => {
                event.preventDefault();
                event.stopPropagation();
                void openProductionModal(order.id);
              }}
              onMouseDown={(event) => event.stopPropagation()}
              onTouchStart={(event) => event.stopPropagation()}
              className="h-7 w-7 rounded-full border border-slate-200 bg-white text-slate-600 inline-flex items-center justify-center transition-colors hover:bg-slate-100"
              title="Ver ordem de producao"
              aria-label="Ver ordem de producao"
            >
              <Eye size={12} />
            </button>
          </div>
          <div className="flex flex-wrap items-center gap-1.5">
            <span
              className={[
                "px-2 py-0.5 rounded-full text-[10px] font-semibold",
                financialBadgeClass(order.financial_status),
              ].join(" ")}
            >
              {financialLabel(order.financial_status)}
            </span>
            {kanbanSettings.archiveEnabled &&
            !isArchived &&
            (order.status === "finished" || order.status === "delivered") ? (
              <button
                type="button"
                onClick={() => void archiveOrder(order.id)}
                className="px-2 py-0.5 rounded-full text-[10px] font-semibold border border-slate-300 bg-slate-50 text-slate-700 hover:bg-slate-100 transition-colors"
              >
                Arquivar
              </button>
            ) : null}
            {order.restock_pending && (
              <span className="px-2 py-0.5 rounded-full text-[10px] font-semibold bg-amber-50 text-amber-700 border border-amber-200">
                Reposição pendente
              </span>
            )}
          </div>
        </div>

        <div className="text-[12px] font-semibold leading-snug text-slate-900 line-clamp-2">
          {productTitle}
        </div>

        <div className={["relative w-full shrink-0 rounded-xl overflow-hidden border border-slate-200 bg-slate-50", expanded ? "h-[112px]" : "h-[96px]"].join(" ")}>
          {imageUrl ? (
            <Image
              src={miniatura(imageUrl, 480)}
              alt={productTitle}
              width={320}
              height={240}
              sizes={expanded ? "(max-width: 1280px) 50vw, 360px" : "(max-width: 768px) 100vw, 320px"}
              className="w-full h-full object-cover"
              loader={passthroughLoader}
              unoptimized
            />
          ) : (
            <div className="flex h-full w-full items-center justify-center text-[11px] font-semibold text-slate-400 tracking-wide">
              Arte indisponível
            </div>
          )}
        </div>
        {visualImages.length > 1 ? (
          <div className="mt-1 flex items-center justify-center gap-1">
            {visualImages.map((_, index) => (
              <span
                key={`kanban-dot-${order.id}-${index}`}
                className={[
                  "h-1.5 rounded-full transition-all",
                  artSlideTick % visualImages.length === index
                    ? "w-4 bg-[var(--ks-color-primary)]"
                    : "w-1.5 bg-slate-300",
                ].join(" ")}
              />
            ))}
          </div>
        ) : null}

        <div className="text-[11px] font-semibold text-slate-500">
          {`Qtd: ${quantityTotal}`}
        </div>

        <div className="flex items-center gap-2 mt-1">
          <div className="flex shrink-0 h-7 w-7 items-center justify-center rounded-full bg-slate-900 text-[10px] font-semibold text-white">
            {initials}
          </div>
          <div className="min-w-0 text-[11px] leading-snug text-slate-600">
            Cliente:{" "}
            <span className="text-slate-900 font-semibold line-clamp-1">
              {clientName}
            </span>
          </div>
        </div>

        <div className="w-full">
          <div className="relative w-full">
            <div
              className="absolute z-10"
              style={{
                left: `calc(${progress}% - 8px)`,
                top: "50%",
                transform: "translateY(-50%)",
              }}
            >
              <div className="flex h-4 w-4 items-center justify-center rounded-full border border-slate-200 bg-white shadow-[0_4px_10px_rgba(15,23,42,0.2)]">
                <Thermometer size={11} className="text-slate-700" />
              </div>
            </div>
            <div className="h-2 rounded-full overflow-hidden bg-slate-100">
              <div className="h-full bg-gradient-to-r from-emerald-400 via-yellow-400 via-orange-400 to-rose-500" />
            </div>
          </div>
        </div>

        <div className="flex flex-wrap items-center justify-between gap-1.5 mt-auto">
          <div className="flex items-center gap-1 min-w-0">
            <span className="text-[10px] text-slate-400 font-bold uppercase tracking-wider shrink-0">Prazo:</span>
            <span className="text-[11px] text-slate-700 font-bold truncate">
              {deadlineLabel}
            </span>
          </div>
          <span
            className={[
              "inline-flex px-1.5 py-0.5 rounded text-[8px] font-bold uppercase tracking-wider border shadow-sm whitespace-nowrap shrink-0",
              overdue
                ? "bg-rose-50 text-rose-700 border-rose-200"
                : "bg-emerald-50 text-emerald-700 border-emerald-200",
            ].join(" ")}
          >
            {overdue ? "Atrasado" : "No Prazo"}
          </span>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-5 overflow-x-hidden">
      <PageHeader
        eyebrow="Produção"
        title={headerTitle}
        subtitle={headerSubtitle}
        actions={headerActions}
      />
      {!isHistoryView && fila ? (
        <div className="rounded-2xl border border-[var(--ks-color-border-subtle)] bg-white px-4 py-3 shadow-[0_6px_14px_rgba(15,23,42,0.06)]">
          <div className="flex flex-wrap items-center gap-x-6 gap-y-2">
            <div className="flex items-center gap-2.5">
              <span className="ks-tile ks-tile-sm shrink-0" style={{ background: "var(--ks-color-primary)" }}>
                <Timer size={16} />
              </span>
              <div>
                <div className="text-[10px] font-semibold uppercase tracking-wide text-[var(--ks-color-text-muted)]">Fila prevista</div>
                <div className="text-sm font-bold text-[var(--ks-color-text-primary)]">
                  {formatarDuracao(fila.fila.minutosPrevistos)}
                  <span className="ml-1.5 text-xs font-medium text-[var(--ks-color-text-muted)]">
                    em {fila.fila.pedidos} pedidos · {fila.fila.aguardando} aguardando, {fila.fila.emProducao} em produção
                  </span>
                </div>
              </div>
            </div>
            {fila.capacidade.horasMes ? (
              <>
                <div className="min-w-[180px] flex-1">
                  <div className="flex items-center justify-between text-[10px] font-semibold uppercase tracking-wide text-[var(--ks-color-text-muted)]">
                    <span>Ocupação do mês</span>
                    <span
                      style={{
                        color:
                          (fila.capacidade.ocupacaoDoMesPct ?? 0) > 100 ? "var(--ks-color-status-danger)" : "var(--ks-color-text-primary)",
                      }}
                    >
                      {(fila.capacidade.ocupacaoDoMesPct ?? 0).toFixed(0)}% de {fila.capacidade.horasMes} h
                    </span>
                  </div>
                  <div className="mt-1 h-2 overflow-hidden rounded-full bg-[rgba(15,23,42,0.08)]">
                    <div
                      className="h-full rounded-full"
                      style={{
                        width: `${Math.min(100, fila.capacidade.ocupacaoDoMesPct ?? 0)}%`,
                        background:
                          (fila.capacidade.ocupacaoDoMesPct ?? 0) > 100
                            ? "var(--ks-color-status-danger)"
                            : (fila.capacidade.ocupacaoDoMesPct ?? 0) > 70
                              ? "var(--ks-color-status-warning)"
                              : "var(--ks-color-primary)",
                      }}
                    />
                  </div>
                </div>
                <div>
                  <div className="text-[10px] font-semibold uppercase tracking-wide text-[var(--ks-color-text-muted)]">Próximo prazo livre</div>
                  <div className="text-sm font-bold text-[var(--ks-color-text-primary)]">
                    {fila.capacidade.prazoSugerido ? formatDateBr(fila.capacidade.prazoSugerido) : "—"}
                    <span className="ml-1.5 text-xs font-medium text-[var(--ks-color-text-muted)]">
                      {fila.capacidade.diasUteisNecessarios ?? 0}{" "}
                      {(fila.capacidade.diasUteisNecessarios ?? 0) === 1 ? "dia útil" : "dias úteis"} de fila ·{" "}
                      {formatQty(fila.capacidade.horasPorDiaUtil ?? 0, 1)} h por dia
                    </span>
                  </div>
                </div>
              </>
            ) : (
              <span className="text-xs text-[var(--ks-color-text-muted)]">
                Informe as horas produtivas do mês em{" "}
                <a href="/dashboard/financial/payables?tab=custos-fixos" className="font-semibold text-[var(--ks-color-primary)] underline">
                  Financeiro → Custos fixos
                </a>{" "}
                para ver a ocupação e o próximo prazo livre.
              </span>
            )}
            {fila.fila.itensSemFicha > 0 ? (
              <span className="text-[11px] text-[var(--ks-color-text-soft)]">
                {fila.fila.itensSemFicha} itens sem ficha ficam fora do tempo.
              </span>
            ) : null}
          </div>
        </div>
      ) : null}
      {!isHistoryView && restockPendingCount > 0 && (
        <div className="rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm font-semibold text-amber-800 shadow-[0_6px_14px_rgba(251,191,36,0.2)]">
          {restockPendingCount} pedido(s) com reposição pendente por saldo negativo.
        </div>
      )}

      {isSwitchingView ? (
        <div className="w-full pb-6 transition-all duration-300 ease-out opacity-100 translate-y-0">
          <div className="rounded-[28px] border border-slate-200 bg-white p-4 shadow-[0_20px_48px_rgba(15,23,42,0.08)]">
            <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4">
              {Array.from({ length: 6 }).map((_, index) => (
                <div
                  key={`view-skeleton-${index}`}
                  className="rounded-2xl border border-slate-200 bg-slate-50 p-4 animate-pulse"
                >
                  <div className="h-4 w-24 rounded-full bg-slate-200" />
                  <div className="mt-3 h-3 w-40 rounded-full bg-slate-200" />
                  <div className="mt-4 h-20 rounded-xl bg-slate-200" />
                  <div className="mt-4 h-3 w-28 rounded-full bg-slate-200" />
                </div>
              ))}
            </div>
          </div>
        </div>
      ) : totalOrders === 0 ? (
        <div className="rounded-[28px] border border-slate-200 bg-white px-6 py-8 text-center shadow-[0_16px_36px_rgba(15,23,42,0.08)] transition-all duration-300 ease-out opacity-100 translate-y-0">
          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-slate-900 text-white shadow-[0_10px_20px_rgba(15,23,42,0.18)]">
            <ClipboardList size={20} />
          </div>
          <h3 className="text-lg font-semibold text-slate-900">
            {isHistoryView ? "Nenhum pedido arquivado" : "Nenhum pedido em produção"}
          </h3>
          <p className="text-sm text-slate-500">
            {isHistoryView
              ? "Arquive um card finalizado para ele aparecer no histórico."
              : "Apenas pedidos ativos aparecem aqui para organizar a produção."}
          </p>
        </div>
      ) : isHistoryView ? (
        <div className="w-full pb-6 transition-all duration-300 ease-out opacity-100 translate-y-0">
          <div className="rounded-[28px] border border-indigo-100 bg-gradient-to-br from-[#EEF2FF] via-white to-[#ECFEFF] p-4 sm:p-5 shadow-[0_24px_60px_rgba(67,56,202,0.12)]">
            <div className="flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-indigo-100 bg-white/75 p-3">
              <div>
                <p className="text-xs font-semibold text-indigo-500">
                  Janela de análise
                </p>
                <p className="text-sm font-semibold text-slate-700">{historyRangeLabel}</p>
              </div>
              <div className="inline-flex items-center gap-1 rounded-full border border-slate-200 bg-white p-1">
                {[
                  { id: "today", label: "Hoje" },
                  { id: "7d", label: "7 dias" },
                  { id: "15d", label: "15 dias" },
                  { id: "30d", label: "30 dias" },
                ].map((range) => (
                  <button
                    key={range.id}
                    type="button"
                    onClick={() =>
                      setHistoryRange(range.id as "today" | "7d" | "15d" | "30d")
                    }
                    className={[
                      "rounded-full px-3 py-1.5 text-xs font-semibold transition-colors",
                      historyRange === range.id
                        ? "bg-[var(--ks-color-primary)] text-white"
                        : "text-slate-600 hover:bg-slate-100",
                    ].join(" ")}
                  >
                    {range.label}
                  </button>
                ))}
              </div>
            </div>
            <div className="mt-3 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-5 gap-3">
              <div className="rounded-2xl border border-indigo-200 bg-white/90 px-4 py-3 shadow-[0_10px_20px_rgba(67,56,202,0.08)]">
                <p className="text-[11px] text-indigo-500 font-semibold">Concluídos no período</p>
                <p className="mt-1 text-2xl font-bold text-indigo-700">{historyOrdersFiltered.length}</p>
              </div>
              <div className="rounded-2xl border border-emerald-200 bg-white/90 px-4 py-3 shadow-[0_10px_20px_rgba(16,185,129,0.08)]">
                <p className="text-[11px] text-emerald-600 font-semibold">Finalizados</p>
                <p className="mt-1 text-2xl font-bold text-emerald-700">
                  {historyFinishedCount}
                </p>
              </div>
              <div className="rounded-2xl border border-orange-200 bg-white/90 px-4 py-3 shadow-[0_10px_20px_rgba(249,115,22,0.08)]">
                <p className="text-[11px] text-orange-600 font-semibold">Entregues</p>
                <p className="mt-1 text-2xl font-bold text-orange-700">
                  {historyDeliveredCount}
                </p>
              </div>
              <div className="rounded-2xl border border-rose-200 bg-white/90 px-4 py-3 shadow-[0_10px_20px_rgba(244,63,94,0.08)]">
                <p className="text-[11px] text-rose-600 font-semibold">Pagto pendente</p>
                <p className="mt-1 text-2xl font-bold text-rose-700">{historyUnpaidCount}</p>
              </div>
              <div className="rounded-2xl border border-cyan-200 bg-white/90 px-4 py-3 shadow-[0_10px_20px_rgba(34,211,238,0.08)]">
                <p className="text-[11px] text-cyan-600 font-semibold">Tempo médio (h)</p>
                <p className="mt-1 text-2xl font-bold text-cyan-700">{historyAvgCycleHours.toFixed(1)}</p>
              </div>
            </div>
            <div className="mt-3 rounded-2xl border border-amber-200 bg-amber-50/80 px-4 py-2.5 text-xs font-semibold text-amber-800">
              Produções com entrega após prazo no período: {historyLateCount}
            </div>
            <div className="mt-4 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-3">
              {historyOrdersFiltered.map((order) => {
                const clientName =
                  order.clients?.company_name ||
                  order.clients?.name ||
                  "Cliente sem nome";
                const mainItem = order.items?.[0];
                const productTitle = mainItem?.title || "Produto";
                const visualImages = [
                  ...(mainItem?.art_image_urls || []),
                  ...(mainItem?.art_image_urls?.length ? [] : mainItem?.image_url ? [mainItem.image_url] : []),
                ];
                const imageUrl =
                  visualImages.length > 0 ? visualImages[artSlideTick % visualImages.length] : null;
                const quantityTotal =
                  order.items?.reduce((sum, item) => sum + (item.quantity || 0), 0) || 0;
                const archivedAt = order.production_updated_at || order.updated_at || order.created_at;
                return (
                  <div
                    key={`history-${order.id}`}
                    className="rounded-xl border border-slate-200 bg-white p-3 shadow-[0_6px_14px_rgba(15,23,42,0.06)]"
                  >
                    <div className="flex items-center justify-between gap-2">
                      <span className="px-2 py-0.5 rounded-full text-[10px] font-semibold bg-slate-900 text-white">
                        #{order.number}
                      </span>
                      <button
                        type="button"
                        onClick={() => void restoreOrder(order.id)}
                        className="px-2 py-0.5 rounded-full text-[10px] font-semibold border border-sky-300 bg-sky-50 text-sky-700 hover:bg-sky-100 transition-colors"
                      >
                        Restaurar
                      </button>
                    </div>
                    <div className="mt-2 flex flex-wrap items-center gap-1.5">
                      <span
                        className={[
                          "px-2 py-0.5 rounded-full text-[10px] font-semibold",
                          financialBadgeClass(order.financial_status),
                        ].join(" ")}
                      >
                        {financialLabel(order.financial_status)}
                      </span>
                      <span
                        className={[
                          "px-2 py-0.5 rounded-full text-[10px] font-semibold border",
                          order.status === "finished"
                            ? "bg-emerald-50 text-emerald-700 border-emerald-200"
                            : "bg-orange-50 text-orange-700 border-orange-200",
                        ].join(" ")}
                      >
                        {order.status === "finished" ? "Finalizado" : "Entregue"}
                      </span>
                    </div>
                    <p className="mt-2 text-[11px] font-semibold text-slate-900 line-clamp-2">{productTitle}</p>
                    <div className="mt-2 relative w-full h-[88px] rounded-lg overflow-hidden border border-slate-200 bg-slate-50 shrink-0">
                      {imageUrl ? (
                        <Image
                          src={imageUrl}
                          alt={productTitle}
                          width={360}
                          height={220}
                          sizes="(max-width: 1024px) 100vw, 360px"
                          className="w-full h-full object-cover"
                          loader={passthroughLoader}
                          unoptimized
                        />
                      ) : (
                        <div className="flex h-full w-full items-center justify-center text-[11px] font-semibold text-slate-400 tracking-wide">
                          Arte indisponível
                        </div>
                      )}
                    </div>
                    {visualImages.length > 1 ? (
                      <div className="mt-1.5 flex items-center justify-center gap-1">
                        {visualImages.map((_, index) => (
                          <span
                            key={`history-dot-${order.id}-${index}`}
                            className={[
                              "h-1.5 rounded-full transition-all",
                              artSlideTick % visualImages.length === index
                                ? "w-4 bg-[var(--ks-color-primary)]"
                                : "w-1.5 bg-slate-300",
                            ].join(" ")}
                          />
                        ))}
                      </div>
                    ) : null}
                    <div className="mt-2 flex items-center justify-between text-[10px]">
                      <span className="font-semibold text-slate-600">{`Qtd: ${quantityTotal}`}</span>
                      <span className="text-slate-500">{clientName}</span>
                    </div>
                    <div className="mt-1.5 text-[10px] text-slate-500">
                      Arquivado em {formatDate(archivedAt)}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      ) : (
        <div className="w-full pb-6 transition-all duration-300 ease-out opacity-100 translate-y-0">
          <div className="rounded-[28px] border border-slate-200 bg-white p-3 sm:p-4 shadow-[0_20px_48px_rgba(15,23,42,0.08)]">
            <div
              ref={kanbanScrollRef}
              className={[
                "ks-kanban-scroll overflow-x-auto overflow-y-auto h-[calc(100vh-240px)] rounded-[22px] bg-slate-50 px-2 pb-3",
                isPanning ? "cursor-grabbing select-none" : "cursor-grab",
              ].join(" ")}
              onPointerDown={handleKanbanPointerDown}
              onPointerMove={handleKanbanPointerMove}
              onPointerUp={endKanbanPan}
              onPointerCancel={endKanbanPan}
              onPointerLeave={endKanbanPan}
            >
              <div className="w-max mx-auto px-1 sm:px-2 pt-2" style={{ zoom: kanbanZoom }}>
                <div className="sticky top-0 z-30 bg-slate-50 pb-3 pt-2">
                  <div className="flex items-start gap-5 sm:gap-6">
                    {columnsData.map((column) => {
                      const ColumnIcon = column.icon;
                      const tone = columnTone(column.status);
                      return (
                        <div
                          key={`header-${column.id}`}
                          className={[
                            columnWidthClass,
                            "flex-1 rounded-[24px] p-2 sm:p-3",
                            tone.panel,
                          ].join(" ")}
                          data-column-status={column.status}
                          data-column-id={column.id}
                          data-column-label={column.label}
                          onDragOver={canInteractBoard ? (event) => event.preventDefault() : undefined}
                          onDrop={canInteractBoard ? (event) => handleDrop(event, column) : undefined}
                        >
                          <div
                            className={[
                              "flex items-center justify-between gap-3 rounded-[18px] px-3 py-2.5",
                              tone.header,
                            ].join(" ")}
                          >
                            <div className="flex items-center gap-3">
                              <span
                                className={[
                                  "flex h-9 w-9 items-center justify-center rounded-xl border border-white shadow-[0_6px_12px_rgba(15,23,42,0.18)]",
                                  tone.icon,
                                ].join(" ")}
                              >
                                <ColumnIcon size={16} />
                              </span>
                              <div>
                                <p className="text-sm font-semibold leading-tight">{column.label}</p>
                                <p className="text-[11px] opacity-70">Etapa de produção</p>
                              </div>
                            </div>
                            <div className="flex items-center gap-2">
                              <span
                                className={[
                                  "px-2.5 py-1 rounded-full text-[11px] font-semibold border border-white shadow-[0_6px_12px_rgba(15,23,42,0.15)]",
                                  tone.count,
                                ].join(" ")}
                              >
                                {column.orders.length}
                              </span>
                              <button
                                type="button"
                                onClick={() => setExpandedColumnId(column.id)}
                                className="inline-flex h-8 w-8 items-center justify-center rounded-xl border border-white/60 bg-white/15 text-white transition-colors hover:bg-white/25"
                                title={`Expandir etapa ${column.label}`}
                                aria-label={`Expandir etapa ${column.label}`}
                              >
                                <Maximize2 size={14} />
                              </button>
                            </div>
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>

                <div className="flex items-start gap-5 sm:gap-6 pb-2">
                  {columnsData.map((column) => (
                    <div
                      key={column.id}
                      className={[
                        columnWidthClass,
                        "flex-1 rounded-[24px] p-2 sm:p-3",
                        columnTone(column.status).panel,
                      ].join(" ")}
                      data-column-status={column.status}
                      data-column-id={column.id}
                      data-column-label={column.label}
                      onDragOver={canInteractBoard ? (event) => event.preventDefault() : undefined}
                      onDrop={canInteractBoard ? (event) => handleDrop(event, column) : undefined}
                    >
                      <div className="grid grid-cols-2 gap-3.5 pb-2 content-start auto-rows-max">
                        {column.orders.map((order) => renderOrderCard(order))}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {expandedColumn ? (
        <div className="fixed inset-0 z-[120] bg-slate-100/96 backdrop-blur-sm">
          <div className="flex h-full flex-col px-4 py-4 sm:px-6 lg:px-8">
            <div className="min-h-0 flex-1 rounded-[30px] border border-slate-200 bg-white p-3 shadow-[0_24px_52px_rgba(15,23,42,0.1)] sm:p-4">
              <div
                className="flex h-full flex-col rounded-[24px] bg-slate-50 p-3 sm:p-4"
                onDragOver={canInteractBoard ? (event) => event.preventDefault() : undefined}
                onDrop={canInteractBoard ? (event) => handleDrop(event, expandedColumn) : undefined}
              >
                <div
                  className={[
                    "sticky top-0 z-20 mb-4 flex items-center justify-between gap-3 rounded-[20px] px-4 py-3 shadow-[0_10px_24px_rgba(15,23,42,0.08)]",
                    columnTone(expandedColumn.status).header,
                  ].join(" ")}
                >
                  <div className="flex items-center gap-3">
                    <span
                      className={[
                        "flex h-11 w-11 items-center justify-center rounded-2xl border border-white shadow-[0_6px_12px_rgba(15,23,42,0.18)]",
                        columnTone(expandedColumn.status).icon,
                      ].join(" ")}
                    >
                      <expandedColumn.icon size={18} />
                    </span>
                    <div>
                      <p className="text-base font-semibold leading-tight">{expandedColumn.label}</p>
                      <p className="text-xs opacity-75">Visualização ampliada da etapa</p>
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <span className="inline-flex rounded-full border border-white/70 bg-white/15 px-3 py-1 text-sm font-semibold text-white">
                      {expandedColumn.orders.length} pedido(s)
                    </span>
                    <button
                      type="button"
                      onClick={() => setExpandedColumnId(null)}
                      className="inline-flex h-9 w-9 items-center justify-center rounded-xl border border-white/70 bg-white/15 text-white transition-colors hover:bg-white/25"
                      title="Minimizar etapa"
                      aria-label="Minimizar etapa"
                    >
                      <X size={15} />
                    </button>
                  </div>
                </div>

                <div className="min-h-0 flex-1 overflow-y-auto pr-1">
                  {expandedColumn.orders.length === 0 ? (
                    <div className="flex h-full min-h-[240px] items-center justify-center rounded-[24px] border border-dashed border-slate-300 bg-white/80 text-sm font-medium text-slate-500">
                      Nenhum pedido nesta etapa.
                    </div>
                  ) : (
                    <div className="grid grid-cols-1 gap-4 pb-2 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
                      {expandedColumn.orders.map((order) => renderOrderCard(order, true))}
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>
        </div>
      ) : null}

      {productionModalOpen && expandedColumn ? (
        <div
          className="fixed inset-0 z-[130] bg-slate-950/35 backdrop-blur-sm"
          onClick={() => setProductionModalOpen(false)}
        />
      ) : null}

      <Dialog open={productionModalOpen} onOpenChange={setProductionModalOpen}>
        <DialogContent className="z-[140] w-[96vw] max-w-5xl max-h-[88vh] overflow-hidden p-0 flex flex-col">
          <div className="border-b border-[var(--ks-color-border-subtle)] px-5 py-4 shrink-0">
            <DialogHeader className="space-y-2">
              <DialogTitle className="text-left text-[var(--ks-color-text-primary)] text-xl">
                Ordem de producao {productionSheet?.order?.number ? `#${productionSheet.order.number}` : modalOrder ? `#${modalOrder.number}` : ""}
              </DialogTitle>
              <div className="flex flex-wrap items-center gap-2 text-xs text-[var(--ks-color-text-muted)]">
                <span className="px-2 py-1 rounded-full bg-[rgba(68,37,167,0.1)] text-[var(--ks-color-text-primary)] font-semibold">
                  Cliente: {productionSheet?.client?.company_name || productionSheet?.client?.name || modalOrder?.clients?.company_name || modalOrder?.clients?.name || "-"}
                </span>
                <span className="px-2 py-1 rounded-full bg-[rgba(15,23,42,0.05)] text-[var(--ks-color-text-muted)] font-semibold">
                  Itens: {productionSheet?.items?.length || 0}
                </span>
              </div>
            </DialogHeader>
            <div className="mt-4 flex flex-wrap items-center gap-2">
              <div
                className="inline-flex items-center gap-2 rounded-full border border-[rgba(10,192,214,0.25)] bg-[rgba(10,192,214,0.12)] px-3 py-2 text-sm font-semibold text-[#0369a1]"
                title="Tempo de cronômetro dentro do expediente da produção"
              >
                <span className="text-[11px] uppercase tracking-wide opacity-80">Útil</span>
                <span className="font-mono text-base">
                  {modalTempoUtilSeg == null ? "--:--:--" : formatDuration(modalTempoUtilSeg)}
                </span>
              </div>
              <div
                className="inline-flex items-center gap-2 rounded-full border border-[var(--ks-color-border-subtle)] bg-white px-3 py-2 text-sm font-semibold text-[var(--ks-color-text-muted)]"
                title="Tempo de relógio com o cronômetro ligado, incluindo noites e fins de semana"
              >
                <span className="text-[11px] uppercase tracking-wide opacity-80">Corrido</span>
                <span className="font-mono text-base">{formatDuration(modalProductionSeconds)}</span>
              </div>
              {toNumber(productionSheet?.order?.minutos_previstos) > 0 ? (
                <div
                  className="inline-flex items-center gap-2 rounded-full border border-[rgba(68,37,167,0.25)] bg-[rgba(68,37,167,0.1)] px-3 py-2 text-sm font-semibold text-[var(--ks-color-text-primary)]"
                  title="Soma dos processos da ficha técnica, no tamanho e quantidade deste pedido"
                >
                  <span className="text-[11px] uppercase tracking-wide opacity-80">Previsto</span>
                  <span className="font-mono text-base">{formatarDuracao(toNumber(productionSheet?.order?.minutos_previstos))}</span>
                </div>
              ) : null}
              <span className={`px-3 py-2 rounded-full text-xs font-semibold ${modalOrderStatus === "in_production" ? "bg-emerald-100 text-emerald-700" : "bg-amber-100 text-amber-700"}`}>
                {modalOrderStatus === "in_production" ? "Em producao" : "Aguardando inicio"}
              </span>
              <button
                type="button"
                onClick={() => void handleStartProduction()}
                disabled={!productionSheet || productionSheetLoading || startingProduction || pausingProduction || modalProductionRunning}
                className="inline-flex items-center gap-2 rounded-full bg-[var(--ks-color-primary)] hover:bg-[var(--ks-color-primary-strong)] text-white px-4 py-2 text-sm font-semibold transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
              >
                {startingProduction ? <Loader2 size={15} className="animate-spin" /> : <Zap size={15} />}
                {canStartProduction
                  ? "Start producao"
                  : canResumeTimer
                    ? "Retomar cronometro"
                    : "Cronometro em andamento"}
              </button>
              {modalProductionRunning ? (
                <button
                  type="button"
                  onClick={() => void handlePauseProduction()}
                  disabled={!productionSheet || productionSheetLoading || pausingProduction || startingProduction}
                  className="inline-flex items-center gap-2 rounded-full bg-[rgba(249,115,22,0.16)] hover:bg-[rgba(249,115,22,0.24)] text-[#c2410c] border border-[rgba(249,115,22,0.35)] px-4 py-2 text-sm font-semibold transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
                >
                  {pausingProduction ? <Loader2 size={15} className="animate-spin" /> : <Pause size={15} />}
                  {pausingProduction ? "Pausando..." : "Pausar cronometro"}
                </button>
              ) : null}
              <button
                type="button"
                onClick={() => void handleDownloadProductionPdf()}
                disabled={!productionSheet || downloadingProductionPdf || productionSheetLoading}
                className="inline-flex items-center gap-2 rounded-full bg-[var(--ks-color-brand-dark)] hover:bg-[rgba(68,37,167,0.9)] text-white px-4 py-2 text-sm font-semibold transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
              >
                {downloadingProductionPdf ? <Loader2 size={15} className="animate-spin" /> : <FileDown size={15} />}
                {downloadingProductionPdf ? "Gerando..." : "Baixar PDF"}
              </button>
            </div>
          </div>

          <div className="flex-1 min-h-0 overflow-y-auto px-5 py-4 bg-[rgba(248,245,254,0.55)]">
            {productionSheetLoading ? (
              <div className="rounded-2xl border border-[var(--ks-color-border-subtle)] bg-white p-8 flex items-center justify-center gap-3 text-[var(--ks-color-text-muted)]">
                <Loader2 size={18} className="animate-spin" />
                Carregando ficha tecnica...
              </div>
            ) : productionSheetError ? (
              <div className="rounded-2xl border border-rose-200 bg-rose-50 p-4 text-sm text-rose-700">
                {productionSheetError}
              </div>
            ) : !productionSheet ? (
              <div className="rounded-2xl border border-[var(--ks-color-border-subtle)] bg-white p-4 text-sm text-[var(--ks-color-text-muted)]">
                Nenhum dado de ordem de producao disponivel.
              </div>
            ) : (
              <div className="space-y-4 pr-1">
                {painel && painel.resumo.etapas.length > 0 ? (
                  <section className="rounded-2xl border border-[var(--ks-color-border-subtle)] bg-white px-4 py-3 shadow-[0_10px_25px_rgba(15,23,42,0.05)]">
                    <div className="flex flex-wrap items-center justify-between gap-2">
                      <span className="text-xs font-semibold uppercase tracking-wide text-[var(--ks-color-text-muted)]">
                        Etapas
                      </span>
                      <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>
                    </div>
                    <ol className="mt-2 flex flex-wrap items-stretch gap-2">
                      {painel.resumo.etapas.map((etapa, etapaIndex) => (
                        <li
                          key={`${etapa.inicio}-${etapaIndex}`}
                          className={`rounded-xl 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-[rgba(248,245,254,0.6)]"
                          }`}
                        >
                          <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>
                    {painel.resumo.etapas.some((etapa) => etapa.aproximada) ? (
                      <p className="mt-2 text-[11px] text-[var(--ks-color-text-soft)]">
                        * reconstruída do histórico de status, sem a coluna do kanban.
                      </p>
                    ) : null}
                  </section>
                ) : null}

                {productionSheet.items?.map((item, index) => {
                  const insumos = item.insumos || [];
                  const processos = item.processos || [];
                  const variacoes = item.variacoes || [];
                  const gabaritos = item.gabaritos || [];
                  const temProduto = item.tem_produto !== false;
                  const medida = itemMeasure(item);
                  return (
                    <section
                      key={item.id || `${item.title || "item"}-${index}`}
                      className="rounded-2xl border border-[var(--ks-color-border-subtle)] bg-white p-4 shadow-[0_10px_25px_rgba(15,23,42,0.05)]"
                    >
                      <div className="flex flex-wrap items-start justify-between gap-3">
                        <div className="min-w-0">
                          <h4 className="text-[var(--ks-color-text-primary)] text-lg font-semibold">
                            {index + 1}. {item.title || "Item sem título"}
                          </h4>
                          {variacoes.length > 0 ? (
                            <div className="mt-1.5 flex flex-wrap gap-1.5">
                              {variacoes.map((v, variacaoIndex) => (
                                <span
                                  key={`${v.atributo}-${variacaoIndex}`}
                                  className="inline-flex items-center gap-1 rounded-md border border-[var(--ks-color-primary)] px-2 py-0.5 text-xs font-bold text-[var(--ks-color-text-primary)]"
                                >
                                  <span className="text-[10px] uppercase tracking-wide text-[var(--ks-color-primary)]">{v.atributo}</span>
                                  {v.valor}
                                </span>
                              ))}
                            </div>
                          ) : null}
                          {item.description ? (
                            <p className="text-sm text-[var(--ks-color-text-muted)] mt-1 whitespace-pre-wrap">{item.description}</p>
                          ) : null}
                          {!temProduto ? (
                            <p className="mt-2 text-xs font-semibold text-amber-700">
                              Item sem produto vinculado: não há ficha técnica. Produzir pela descrição e pela arte.
                            </p>
                          ) : null}
                          {(item.avisos || []).map((aviso, avisoIndex) => (
                            <p key={`aviso-${avisoIndex}`} className="mt-2 text-xs font-semibold text-amber-700">
                              {aviso}
                            </p>
                          ))}
                        </div>
                        <div className="flex flex-wrap items-center gap-2">
                          <span className="px-2.5 py-1 rounded-full text-xs font-semibold bg-[rgba(68,37,167,0.1)] text-[var(--ks-color-text-primary)]">
                            {quantidadeDoItem(item).pecasTexto}
                          </span>
                          {medida !== "-" ? (
                            <span className="px-2.5 py-1 rounded-full text-xs font-semibold bg-[rgba(15,23,42,0.05)] text-[var(--ks-color-text-muted)]">
                              {medida}
                            </span>
                          ) : null}
                          {quantidadeDoItem(item).total ? (
                            <span className="px-2.5 py-1 rounded-full text-xs font-semibold bg-[rgba(15,23,42,0.05)] text-[var(--ks-color-text-muted)]">
                              {quantidadeDoItem(item).total}
                            </span>
                          ) : null}
                          {processos.length > 0 ? (
                            <span
                              className="px-2.5 py-1 rounded-full text-xs font-semibold bg-[var(--ks-color-primary)] text-white"
                              title="Tempo previsto deste item"
                            >
                              {formatarDuracao(toNumber(item.minutos_totais))}
                            </span>
                          ) : null}
                        </div>
                      </div>

                      {/* Como vai rodar: folha e bobina têm escolha; caneca e argola não. */}
                      {(() => {
                        const doPainel = painel?.itens.find((i) => i.id === item.id);
                        if (!doPainel || !productionModalOrderId) return null;
                        return (
                          <PlanoDeRodagem
                            orderId={productionModalOrderId}
                            item={doPainel}
                            medida={{
                              larguraM: toNumber(item.width_m),
                              alturaM: toNumber(item.height_m),
                              pecas: toNumber(item.quantity),
                            }}
                            podeEditar={canWriteOrders}
                            aoSalvar={(novo) => {
                              setPainel(novo);
                              void recarregarFicha(productionModalOrderId);
                            }}
                          />
                        );
                      })()}

                      <div className="grid grid-cols-1 xl:grid-cols-2 gap-4 mt-4">
                        <div className="rounded-xl border border-[var(--ks-color-border-subtle)] overflow-hidden">
                          <div className="px-3 py-2 text-xs font-semibold tracking-wide uppercase bg-[rgba(68,37,167,0.08)] text-[var(--ks-color-text-primary)]">
                            Insumos
                          </div>
                          <div className="overflow-x-auto">
                            <table className="w-full text-sm">
                              <thead className="bg-[rgba(248,245,254,0.7)] text-[var(--ks-color-text-muted)]">
                                <tr>
                                  <th className="text-left px-3 py-2 font-semibold">Insumo</th>
                                  <th className="text-left px-3 py-2 font-semibold">Como se calcula</th>
                                  <th className="text-right px-3 py-2 font-semibold">Separar</th>
                                </tr>
                              </thead>
                              <tbody>
                                {insumos.length === 0 ? (
                                  <tr>
                                    <td colSpan={3} className="px-3 py-4 text-center text-[var(--ks-color-text-soft)]">
                                      {temProduto ? "Sem insumos na ficha técnica." : "Sem ficha técnica."}
                                    </td>
                                  </tr>
                                ) : (
                                  insumos.map((insumo, insumoIndex) => (
                                    <tr key={`ins-${insumoIndex}`} className="border-t border-[var(--ks-color-border-subtle)]">
                                      <td className="px-3 py-2 text-[var(--ks-color-text-primary)]">
                                        {insumo.nome}
                                        {insumo.origem.tipo === "opcao" ? (
                                          <span className="ml-1.5 rounded px-1.5 py-0.5 text-[10px] font-bold bg-pink-50 text-pink-800">
                                            opção: {insumo.origem.opcao}
                                          </span>
                                        ) : null}
                                      </td>
                                      <td className="px-3 py-2 text-[var(--ks-color-text-muted)]">{explicarConsumo(insumo)}</td>
                                      <td className="px-3 py-2 text-right">
                                        {insumo.semMedida ? (
                                          <span className="text-xs font-semibold text-amber-700">sem medida no item</span>
                                        ) : (
                                          <>
                                            <span className="font-semibold text-[var(--ks-color-text-primary)]">
                                              {formatQty(quantidadeLegivel(insumo.quantidade, insumo.unidade).valor)}{" "}
                                              {quantidadeLegivel(insumo.quantidade, insumo.unidade).unidade}
                                            </span>
                                            {notasDaQuantidade(insumo).map((nota, notaIndex) => (
                                              <div key={notaIndex} className="text-[11px] text-[var(--ks-color-text-muted)]">{nota}</div>
                                            ))}
                                          </>
                                        )}
                                      </td>
                                    </tr>
                                  ))
                                )}
                              </tbody>
                            </table>
                          </div>
                        </div>

                        <div className="rounded-xl border border-[var(--ks-color-border-subtle)] overflow-hidden">
                          <div className="px-3 py-2 text-xs font-semibold tracking-wide uppercase bg-[rgba(10,192,214,0.12)] text-[#0369a1]">
                            Processos, na ordem
                          </div>
                          <div className="overflow-x-auto">
                            <table className="w-full text-sm">
                              <thead className="bg-[rgba(248,245,254,0.7)] text-[var(--ks-color-text-muted)]">
                                <tr>
                                  <th className="text-center px-2 py-2 font-semibold w-8">#</th>
                                  <th className="text-left px-3 py-2 font-semibold">Processo</th>
                                  <th className="text-left px-3 py-2 font-semibold">Recurso</th>
                                  <th className="text-right px-3 py-2 font-semibold">Tempo</th>
                                </tr>
                              </thead>
                              <tbody>
                                {processos.length === 0 ? (
                                  <tr>
                                    <td colSpan={4} className="px-3 py-4 text-center text-[var(--ks-color-text-soft)]">
                                      {temProduto ? "Sem processos na ficha técnica." : "Sem ficha técnica."}
                                    </td>
                                  </tr>
                                ) : (
                                  processos.map((processo, processoIndex) => (
                                    <tr key={`proc-${processoIndex}`} className="border-t border-[var(--ks-color-border-subtle)]">
                                      <td className="px-2 py-2 text-center font-bold text-[var(--ks-color-text-muted)]">{processoIndex + 1}</td>
                                      <td className="px-3 py-2 text-[var(--ks-color-text-primary)]">{processo.nome}</td>
                                      <td className="px-3 py-2 text-[var(--ks-color-text-muted)]">
                                        {processo.recurso || "-"}
                                        {processo.tipo ? (
                                          <div className="text-[11px]">{processo.tipo === "maquina" ? "máquina" : "pessoa"}</div>
                                        ) : null}
                                      </td>
                                      <td className="px-3 py-2 text-right">
                                        {processo.semMedida ? (
                                          <span className="text-xs font-semibold text-amber-700">sem medida no item</span>
                                        ) : (
                                          <>
                                            <span className="font-semibold text-[var(--ks-color-text-primary)]">
                                              {formatarDuracao(processo.minutosTotais)}
                                            </span>
                                            {processo.minutosDeSetup > 0 ? (
                                              <div className="text-[11px] text-[var(--ks-color-text-muted)]">
                                                {formatQty(processo.minutosDeProducao, 1)} min + {formatQty(processo.minutosDeSetup, 1)} min de preparo
                                              </div>
                                            ) : null}
                                          </>
                                        )}
                                      </td>
                                    </tr>
                                  ))
                                )}
                              </tbody>
                              {processos.length > 0 ? (
                                <tfoot>
                                  <tr className="border-t-2 border-[var(--ks-color-text-primary)] bg-[rgba(248,245,254,0.7)]">
                                    <td colSpan={3} className="px-3 py-2 font-semibold text-[var(--ks-color-text-primary)]">
                                      Tempo do item
                                    </td>
                                    <td className="px-3 py-2 text-right font-bold text-[var(--ks-color-text-primary)]">
                                      {formatarDuracao(toNumber(item.minutos_totais))}
                                    </td>
                                  </tr>
                                </tfoot>
                              ) : null}
                            </table>
                          </div>
                        </div>
                      </div>

                      {gabaritos.length > 0 ? (
                        <div className="mt-3 flex flex-wrap items-center gap-2 text-xs">
                          <span className="font-semibold uppercase tracking-wide text-[var(--ks-color-text-muted)]">Gabaritos</span>
                          {gabaritos.map((gabarito, gabaritoIndex) => (
                            <a
                              key={`gab-${gabaritoIndex}`}
                              href={gabarito.url}
                              target="_blank"
                              rel="noreferrer"
                              className="inline-flex items-center gap-1 rounded-full border border-[var(--ks-color-border-subtle)] bg-white px-2.5 py-1 font-semibold text-[var(--ks-color-text-primary)] hover:bg-[rgba(68,37,167,0.06)]"
                            >
                              <span className="text-[10px] uppercase text-[var(--ks-color-primary)]">{gabarito.formato}</span>
                              {gabarito.nome}
                            </a>
                          ))}
                        </div>
                      ) : null}

                      {item.id
                        ? (() => {
                            const itemId = item.id;
                            const apontado = painel?.itens.find((p) => p.id === itemId) ?? null;
                            const pendente = itemAcaoPendente === itemId;
                            const feitoPor = apontado
                              ? Array.from(new Set(apontado.feitos.map((f) => f.porNome || "Usuário"))).join(", ")
                              : "";
                            return (
                              <div className="mt-3 flex flex-wrap items-center gap-2 rounded-xl border border-[var(--ks-color-border-subtle)] bg-[rgba(248,245,254,0.6)] px-3 py-2 text-xs">
                                <span className="font-semibold uppercase tracking-wide text-[var(--ks-color-text-muted)]">
                                  Apontamento
                                </span>
                                {apontado?.aberto ? (
                                  <span className="font-semibold text-[var(--ks-color-text-primary)]">
                                    Em andamento · {apontado.aberto.porNome || "Usuário"} · {formatarDuracao(apontado.aberto.minutos)}
                                  </span>
                                ) : null}
                                {apontado && apontado.feitos.length > 0 ? (
                                  <span className="text-[var(--ks-color-text-muted)]">
                                    Feito em {formatarDuracao(apontado.minutos_reais)} por {feitoPor}
                                    {processos.length > 0 ? ` · previsto ${formatarDuracao(toNumber(item.minutos_totais))}` : ""}
                                  </span>
                                ) : null}
                                {!apontado?.aberto && (!apontado || apontado.feitos.length === 0) ? (
                                  <span className="text-[var(--ks-color-text-soft)]">Ninguém iniciou este item.</span>
                                ) : null}
                                <span className="ml-auto flex items-center gap-1.5">
                                  {apontado?.aberto ? (
                                    <>
                                      <button
                                        type="button"
                                        disabled={pendente || painelLoading}
                                        onClick={() => void apontarItem(itemId, "concluir_item")}
                                        className="rounded-full bg-[var(--ks-color-primary)] px-3 py-1 font-semibold text-white transition-colors hover:bg-[var(--ks-color-primary-strong)] disabled:opacity-60"
                                      >
                                        Concluir
                                      </button>
                                      <button
                                        type="button"
                                        disabled={pendente || painelLoading}
                                        onClick={() => void apontarItem(itemId, "cancelar_item")}
                                        className="rounded-full border border-[var(--ks-color-border-subtle)] bg-white px-3 py-1 font-semibold text-[var(--ks-color-text-muted)] disabled:opacity-60"
                                      >
                                        Desfazer
                                      </button>
                                    </>
                                  ) : (
                                    <button
                                      type="button"
                                      disabled={pendente || painelLoading || !painel}
                                      onClick={() => void apontarItem(itemId, "iniciar_item")}
                                      className="rounded-full border border-[var(--ks-color-primary)] bg-white px-3 py-1 font-semibold text-[var(--ks-color-primary)] transition-colors hover:bg-[rgba(68,37,167,0.06)] disabled:opacity-60"
                                    >
                                      {apontado && apontado.feitos.length > 0 ? "Iniciar de novo" : "Iniciar"}
                                    </button>
                                  )}
                                </span>
                              </div>
                            );
                          })()
                        : null}

                      {item.id
                        ? (() => {
                            const itemId = item.id;
                            const doPainel = painel?.itens.find((p) => p.id === itemId) ?? null;
                            const perdasDoItem = doPainel?.perdas ?? [];
                            const formAberto = perdaForm?.itemId === itemId;
                            const insumosComCadastro = (doPainel?.insumos ?? []).filter((i) => i.materialId);
                            return (
                              <div className="mt-2 rounded-xl border border-pink-200/70 bg-white px-3 py-2 text-xs">
                                <div className="flex flex-wrap items-center gap-2">
                                  <span className="font-semibold uppercase tracking-wide text-pink-800">Perdas e retrabalho</span>
                                  {perdasDoItem.length === 0 ? (
                                    <span className="text-[var(--ks-color-text-soft)]">Nenhuma perda registrada.</span>
                                  ) : null}
                                  <span className="ml-auto">
                                    <button
                                      type="button"
                                      disabled={!painel || painelLoading}
                                      onClick={() => abrirPerda(itemId)}
                                      className="rounded-full border border-pink-300 bg-white px-3 py-1 font-semibold text-pink-800 transition-colors hover:bg-pink-50 disabled:opacity-60"
                                    >
                                      {formAberto ? "Fechar" : "Registrar perda"}
                                    </button>
                                  </span>
                                </div>

                                {perdasDoItem.length > 0 ? (
                                  <ul className="mt-2 space-y-1.5">
                                    {perdasDoItem.map((p) => (
                                      <li key={p.id} className="flex flex-wrap items-center gap-x-2 gap-y-1">
                                        <span
                                          className={`rounded px-1.5 py-0.5 text-[10px] font-bold ${
                                            p.status === "aplicada"
                                              ? "bg-pink-50 text-pink-800"
                                              : p.status === "pendente"
                                                ? "bg-amber-50 text-amber-800"
                                                : "bg-slate-100 text-slate-600"
                                          }`}
                                        >
                                          {ROTULO_DO_STATUS_DA_PERDA[p.status]}
                                        </span>
                                        <span className="font-semibold text-[var(--ks-color-text-primary)]">
                                          {formatQty(p.quantidade)} {p.unidade} de {p.materialNome}
                                        </span>
                                        <span className="text-[var(--ks-color-text-muted)]">
                                          · {ROTULO_DO_MOTIVO[p.motivo].toLowerCase()}
                                          {p.refeito ? " · refeito" : ""}
                                          {p.notas ? ` · ${p.notas}` : ""} · {p.registradoPorNome || "Usuário"},{" "}
                                          {new Date(p.registradoEm).toLocaleDateString("pt-BR")}
                                          {!p.comMovimento && p.status === "aplicada" ? " · sem baixa (insumo não controla estoque)" : ""}
                                        </span>
                                        {painel?.podeAprovarPerdas ? (
                                          <span className="ml-auto flex items-center gap-1">
                                            {p.status === "pendente" ? (
                                              <>
                                                <button
                                                  type="button"
                                                  disabled={perdaAcaoPendente === p.id}
                                                  onClick={() => void decidirPerda(p.id, "aprovar")}
                                                  className="rounded-full bg-[var(--ks-color-primary)] px-2.5 py-0.5 font-semibold text-white disabled:opacity-60"
                                                >
                                                  Aprovar
                                                </button>
                                                <button
                                                  type="button"
                                                  disabled={perdaAcaoPendente === p.id}
                                                  onClick={() => void decidirPerda(p.id, "recusar")}
                                                  className="rounded-full border border-[var(--ks-color-border-subtle)] bg-white px-2.5 py-0.5 font-semibold text-[var(--ks-color-text-muted)] disabled:opacity-60"
                                                >
                                                  Recusar
                                                </button>
                                              </>
                                            ) : null}
                                            {p.status === "aplicada" && p.comMovimento ? (
                                              <button
                                                type="button"
                                                disabled={perdaAcaoPendente === p.id}
                                                onClick={() => void decidirPerda(p.id, "estornar")}
                                                className="rounded-full border border-[var(--ks-color-border-subtle)] bg-white px-2.5 py-0.5 font-semibold text-[var(--ks-color-text-muted)] disabled:opacity-60"
                                              >
                                                Estornar
                                              </button>
                                            ) : null}
                                          </span>
                                        ) : null}
                                      </li>
                                    ))}
                                  </ul>
                                ) : null}

                                {formAberto && perdaForm ? (
                                  <div className="mt-2 grid grid-cols-1 gap-2 rounded-lg bg-pink-50/60 p-2 sm:grid-cols-[1.5fr_0.5fr_1fr_1.2fr]">
                                    <select
                                      className="ks-field w-full"
                                      value={perdaForm.materialId}
                                      onChange={(event) => setPerdaForm((prev) => (prev ? { ...prev, materialId: event.target.value } : prev))}
                                    >
                                      <option value="">Peça pronta (produto acabado)</option>
                                      {insumosComCadastro.map((i) => (
                                        <option key={i.materialId as string} value={i.materialId as string}>
                                          {i.nome} · previsto {formatQty(i.quantidadePrevista)} {i.unidade}
                                        </option>
                                      ))}
                                    </select>
                                    <input
                                      className="ks-field w-full"
                                      inputMode="decimal"
                                      placeholder="Qtd"
                                      value={perdaForm.quantidade}
                                      onChange={(event) => setPerdaForm((prev) => (prev ? { ...prev, quantidade: event.target.value } : prev))}
                                    />
                                    <select
                                      className="ks-field w-full"
                                      value={perdaForm.motivo}
                                      onChange={(event) =>
                                        setPerdaForm((prev) => (prev ? { ...prev, motivo: event.target.value as MotivoDePerda } : prev))
                                      }
                                    >
                                      {MOTIVOS_DE_PERDA.map((m) => (
                                        <option key={m} value={m}>
                                          {ROTULO_DO_MOTIVO[m]}
                                        </option>
                                      ))}
                                    </select>
                                    <input
                                      className="ks-field w-full"
                                      placeholder="Observação (opcional)"
                                      value={perdaForm.notas}
                                      onChange={(event) => setPerdaForm((prev) => (prev ? { ...prev, notas: event.target.value } : prev))}
                                    />
                                    <label className="flex items-center gap-2 text-[var(--ks-color-text-muted)] sm:col-span-2">
                                      <input
                                        type="checkbox"
                                        checked={perdaForm.refeito}
                                        onChange={(event) => setPerdaForm((prev) => (prev ? { ...prev, refeito: event.target.checked } : prev))}
                                      />
                                      A peça foi refeita
                                    </label>
                                    <div className="flex items-center justify-end gap-2 sm:col-span-2">
                                      <span className="text-[11px] text-[var(--ks-color-text-soft)]">
                                        {painel?.perdasExigemAprovacaoAcimaPct === null || painel?.perdasExigemAprovacaoAcimaPct === undefined
                                          ? "Baixa o estoque na hora e avisa o responsável."
                                          : painel.perdasExigemAprovacaoAcimaPct <= 0
                                            ? "Toda perda espera aprovação antes de baixar."
                                            : `Acima de ${painel.perdasExigemAprovacaoAcimaPct}% do previsto espera aprovação.`}
                                      </span>
                                      <button
                                        type="button"
                                        disabled={perdaSalvando}
                                        onClick={() => void registrarPerda()}
                                        className="rounded-full bg-pink-700 px-3 py-1 font-semibold text-white transition-colors hover:bg-pink-800 disabled:opacity-60"
                                      >
                                        {perdaSalvando ? "Registrando…" : "Registrar"}
                                      </button>
                                    </div>
                                  </div>
                                ) : null}
                              </div>
                            );
                          })()
                        : null}
                    </section>
                  );
                })}

                {(productionSheet.separacao || []).length > 0 ? (
                  <section className="rounded-2xl border border-[var(--ks-color-border-subtle)] bg-white overflow-hidden shadow-[0_10px_25px_rgba(15,23,42,0.05)]">
                    <div className="px-4 py-2.5 text-xs font-semibold tracking-wide uppercase bg-[var(--ks-color-brand-dark)] text-white">
                      Separação de insumos do pedido
                    </div>
                    <div className="overflow-x-auto">
                      <table className="w-full text-sm">
                        <thead className="bg-[rgba(248,245,254,0.7)] text-[var(--ks-color-text-muted)]">
                          <tr>
                            <th className="text-left px-4 py-2 font-semibold">Insumo</th>
                            <th className="text-right px-4 py-2 font-semibold">Quantidade</th>
                            <th className="text-right px-4 py-2 font-semibold">Itens</th>
                          </tr>
                        </thead>
                        <tbody>
                          {(productionSheet.separacao || []).map((linha, linhaIndex) => (
                            <tr key={`sep-${linhaIndex}`} className="border-t border-[var(--ks-color-border-subtle)]">
                              <td className="px-4 py-2 text-[var(--ks-color-text-primary)]">{linha.nome}</td>
                              <td className="px-4 py-2 text-right font-semibold text-[var(--ks-color-text-primary)]">
                                {formatQty(linha.quantidade)} {linha.unidade}
                              </td>
                              <td className="px-4 py-2 text-right text-[var(--ks-color-text-muted)]">{linha.itens}</td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  </section>
                ) : null}
              </div>
            )}
          </div>
        </DialogContent>
      </Dialog>

      <Dialog
        open={settingsModalOpen}
        onOpenChange={(open) => {
          if (!open) closeSettingsModal();
        }}
      >
        <DialogContent className="max-w-3xl">
          <DialogHeader>
            <DialogTitle>Personalizar Kanban</DialogTitle>
          </DialogHeader>

          <div className="space-y-6">
            <div className="rounded-2xl border border-slate-200 bg-white p-4 shadow-[0_12px_24px_rgba(15,23,42,0.06)]">
              <div className="flex flex-wrap items-center justify-between gap-2">
                <div>
                  <p className="text-sm font-semibold text-[var(--ks-color-text-primary)]">
                    Colunas personalizadas
                  </p>
                  <p className="text-xs text-[var(--ks-color-text-muted)]">
                    Defina o nome e qual status oficial cada etapa representa.
                  </p>
                </div>
                <Button
                  variant="outline"
                  size="sm"
                  icon={<Plus size={14} />}
                  onClick={addCustomColumn}
                  disabled={!settingsDraft}
                >
                  Adicionar coluna
                </Button>
              </div>

              <div className="mt-4 space-y-3">
                {(settingsDraft?.columns ?? []).length === 0 ? (
                  <div className="rounded-xl border border-dashed border-[rgba(120,136,190,0.4)] bg-[rgba(248,245,254,0.6)] px-4 py-3 text-xs text-[var(--ks-color-text-muted)]">
                    Nenhuma coluna personalizada criada. As etapas padrão continuam ativas.
                  </div>
                ) : (
                  settingsDraft?.columns.map((column) => (
                    <div
                      key={column.id}
                      className="grid grid-cols-1 gap-3 rounded-xl border border-[rgba(223,228,248,0.8)] bg-[rgba(248,245,254,0.6)] p-3 md:grid-cols-[minmax(0,1fr)_240px_auto] md:items-center"
                    >
                      <div className="ks-input-wrapper">
                        <input
                          className="ks-input"
                          placeholder="Nome da etapa"
                          value={column.label}
                          onChange={(event) => {
                            const value = event.target.value;
                            updateDraftColumns((columns) =>
                              columns.map((item) =>
                                item.id === column.id ? { ...item, label: value } : item
                              )
                            );
                          }}
                        />
                      </div>
                      <CustomSelect
                        options={kanbanStatusOptions}
                        value={column.status}
                        onChange={(value) => {
                          updateDraftColumns((columns) =>
                            columns.map((item) =>
                              item.id === column.id
                                ? { ...item, status: value as OrderStatus }
                                : item
                            )
                          );
                        }}
                        className="md:w-full"
                        portal={false}
                      />
                      <Button
                        variant="ghost"
                        size="icon"
                        onClick={() => {
                          updateDraftColumns((columns) =>
                            columns.filter((item) => item.id !== column.id)
                          );
                        }}
                        className="text-rose-500 hover:text-rose-600"
                      >
                        <Trash2 size={16} />
                      </Button>
                    </div>
                  ))
                )}
              </div>
            </div>

            <div className="rounded-2xl border border-slate-200 bg-white p-4 shadow-[0_12px_24px_rgba(15,23,42,0.06)]">
              <div className="flex items-center justify-between gap-3">
                <div>
                  <p className="text-sm font-semibold text-[var(--ks-color-text-primary)]">
                    Arquivamento
                  </p>
                  <p className="text-xs text-[var(--ks-color-text-muted)]">
                    Defina como pedidos finalizados vão para o histórico.
                  </p>
                </div>
                <Switch
                  checked={settingsDraft?.archiveEnabled ?? false}
                  onCheckedChange={(checked) => {
                    setSettingsDraft((prev) =>
                      prev ? { ...prev, archiveEnabled: checked } : prev
                    );
                  }}
                />
              </div>
              <div className="mt-4">
                <CustomSelect
                  label="Modo de arquivamento"
                  options={[
                    { value: "days", label: "Automático por dias" },
                    { value: "manual", label: "Manual no card finalizado" },
                  ]}
                  value={settingsDraft?.archiveMode ?? "days"}
                  onChange={(value) => {
                    setSettingsDraft((prev) =>
                      prev ? { ...prev, archiveMode: value as "days" | "manual" } : prev
                    );
                  }}
                  disabled={!settingsDraft?.archiveEnabled}
                  portal={false}
                />
              </div>
              <div className="mt-4">
                <Input
                  label="Dias para arquivar"
                  type="number"
                  min={1}
                  max={365}
                  value={archiveDaysInput}
                  onChange={(event) => setArchiveDaysInput(event.target.value)}
                  disabled={
                    !settingsDraft?.archiveEnabled || (settingsDraft?.archiveMode ?? "days") !== "days"
                  }
                />
              </div>
            </div>

            <div className="rounded-2xl border border-slate-200 bg-white p-4 shadow-[0_12px_24px_rgba(15,23,42,0.06)]">
              <p className="text-sm font-semibold text-[var(--ks-color-text-primary)]">Expediente da produção</p>
              <p className="text-xs text-[var(--ks-color-text-muted)]">
                O tempo útil do cronômetro conta só dentro deste horário. Fora dele o pedido está na fila, não na bancada.
              </p>
              <div className="mt-3 flex flex-wrap gap-1.5">
                {NOME_DO_DIA.map((nome, dia) => {
                  const ativo = settingsDraft?.expediente.dias.includes(dia) ?? false;
                  return (
                    <button
                      key={nome}
                      type="button"
                      onClick={() =>
                        setSettingsDraft((prev) => {
                          if (!prev) return prev;
                          const dias = ativo
                            ? prev.expediente.dias.filter((d) => d !== dia)
                            : [...prev.expediente.dias, dia].sort((a, b) => a - b);
                          return { ...prev, expediente: { ...prev.expediente, dias } };
                        })
                      }
                      className={`rounded-full px-3 py-1.5 text-xs font-semibold transition-colors ${
                        ativo
                          ? "bg-[var(--ks-color-primary)] text-white"
                          : "border border-slate-200 bg-white text-slate-600 hover:bg-slate-50"
                      }`}
                    >
                      {nome}
                    </button>
                  );
                })}
              </div>
              <div className="mt-3 grid grid-cols-2 gap-3 sm:grid-cols-3">
                <Input
                  label="Início"
                  type="time"
                  value={settingsDraft?.expediente.inicio ?? EXPEDIENTE_PADRAO.inicio}
                  onChange={(event) =>
                    setSettingsDraft((prev) =>
                      prev ? { ...prev, expediente: { ...prev.expediente, inicio: event.target.value } } : prev
                    )
                  }
                />
                <Input
                  label="Fim"
                  type="time"
                  value={settingsDraft?.expediente.fim ?? EXPEDIENTE_PADRAO.fim}
                  onChange={(event) =>
                    setSettingsDraft((prev) =>
                      prev ? { ...prev, expediente: { ...prev.expediente, fim: event.target.value } } : prev
                    )
                  }
                />
                <Input
                  label="Fuso horário"
                  value={settingsDraft?.expediente.fuso ?? EXPEDIENTE_PADRAO.fuso}
                  onChange={(event) =>
                    setSettingsDraft((prev) =>
                      prev ? { ...prev, expediente: { ...prev.expediente, fuso: event.target.value } } : prev
                    )
                  }
                />
              </div>
            </div>

            <div className="rounded-2xl border border-slate-200 bg-white p-4 shadow-[0_12px_24px_rgba(15,23,42,0.06)]">
              <p className="text-sm font-semibold text-[var(--ks-color-text-primary)]">Perdas e retrabalho</p>
              <p className="text-xs text-[var(--ks-color-text-muted)]">
                Quem produz registra a perda no item e o estoque baixa na hora, com aviso a quem responde. Se quiser
                segurar perdas grandes até alguém aprovar, informe o limite.
              </p>
              <div className="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-[220px_1fr] sm:items-end">
                <Input
                  label="Exigir aprovação acima de (%)"
                  inputMode="decimal"
                  placeholder="Em branco: nunca"
                  value={perdaPctInput}
                  onChange={(event) => setPerdaPctInput(event.target.value)}
                />
                <p className="text-[11px] text-[var(--ks-color-text-soft)]">
                  Percentual do consumo previsto do insumo no item. Zero faz toda perda esperar aprovação. Em branco,
                  nenhuma espera: baixa, avisa e pode ser estornada por quem cuida do estoque.
                </p>
              </div>
            </div>

            {settingsError ? (
              <div className="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
                {settingsError}
              </div>
            ) : null}

            <div className="flex flex-wrap items-center justify-end gap-2">
              <Button variant="ghost" onClick={closeSettingsModal}>
                Cancelar
              </Button>
              <Button onClick={saveKanbanSettings} disabled={settingsSaving || !settingsDraft}>
                {settingsSaving ? "Salvando..." : "Salvar alterações"}
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}