"use client";

import { useMemo, useState } from "react";
import Button from "@/components/ui/Button";
import Badge from "@/components/ui/Badge";
import ActionMenu from "@/components/ui/ActionMenu";
import type { Order, OrderItem } from "./types";
import {
  availableShippingModes,
  defaultShippingMode,
  formatSlotTime,
  parseShippingParameter,
  recommendedSlot,
  shippingModeLabel,
  slotDateIso,
  type ShippingMode,
  type ShippingParameterData,
} from "./shippingParameter";

type Toast = { tone: "success" | "danger" | "info"; message: string } | null;
type ApiRecord = Record<string, unknown>;
const LOGISTICS_STARTED_STATUSES = ["LOGISTICS_READY", "LOGISTICS_REQUEST_CREATED", "LOGISTICS_PICKUP_RETRY"];

function apiRecord(value: unknown): ApiRecord {
  return value && typeof value === "object" ? (value as ApiRecord) : {};
}

type ShipDialogState = {
  order: Order;
  loading: boolean;
  submitting: boolean;
  error: string | null;
  payload: ShippingParameterData | null;
  mode: ShippingMode;
  addressId: string;
  pickupTimeId: string;
  branchId: string;
};

function formatMoney(value: number | null, currency: string | null) {
  if (value === null || value === undefined) return "-";
  return `${currency || "IDR"} ${value.toLocaleString("id-ID")}`;
}

function formatDate(value: string | null) {
  if (!value) return "-";
  return new Intl.DateTimeFormat("id-ID", { dateStyle: "medium", timeStyle: "short" }).format(new Date(value));
}

function statusMeta(status: string | null) {
  const map: Record<string, { label: string; tone: "neutral" | "warning" | "success" | "danger" | "info" }> = {
    PENDING: { label: "Pending Shopee", tone: "info" },
    UNPAID: { label: "Belum Bayar", tone: "info" },
    INVOICE_PENDING: { label: "Invoice Pending", tone: "warning" },
    READY_TO_SHIP: { label: "Perlu Proses", tone: "warning" },
    PROCESSED: { label: "Siap Dikirim", tone: "info" },
    SHIPPED: { label: "Dikirim", tone: "success" },
    TO_CONFIRM_RECEIVE: { label: "Menunggu Konfirmasi Buyer", tone: "info" },
    COMPLETED: { label: "Selesai", tone: "success" },
    CANCELLED: { label: "Batal", tone: "danger" },
    IN_CANCEL: { label: "Batal Proses", tone: "danger" },
    TO_RETURN: { label: "Retur", tone: "danger" },
    RETURNED: { label: "Sudah Retur", tone: "danger" },
  };
  return map[status || ""] || { label: status || "-", tone: "neutral" };
}

function hasShopeePrintSignal(order: Order) {
  return Boolean(order.trackingNumber && order.trackingNumber !== order.packageNumber);
}

function hasShopeeLogisticsSignal(order: Order) {
  return LOGISTICS_STARTED_STATUSES.includes(order.logisticsStatus || "");
}

function canProcessShipment(order: Order) {
  return (
    order.orderStatus === "READY_TO_SHIP" &&
    !order.shipmentMethod &&
    !hasShopeePrintSignal(order) &&
    !order.shippingDocumentPrintedAt &&
    !order.pickupReadyAt
  );
}

function canPrintShopeeDocument(order: Order) {
  const status = order.orderStatus || "";
  if (["CANCELLED", "IN_CANCEL", "UNPAID", "PENDING"].includes(status)) {
    return false;
  }
  if (["PROCESSED", "SHIPPED", "TO_CONFIRM_RECEIVE", "COMPLETED"].includes(status)) {
    return true;
  }
  return status === "READY_TO_SHIP" && Boolean(order.shipmentMethod || order.shippingDocumentPrintedAt);
}

function canMarkPickupReady(order: Order) {
  return (
    ["READY_TO_SHIP", "PROCESSED"].includes(order.orderStatus || "") &&
    Boolean(order.shippingDocumentPrintedAt) &&
    !order.pickupReadyAt
  );
}

function canUndoPickupReady(order: Order) {
  return ["READY_TO_SHIP", "PROCESSED"].includes(order.orderStatus || "") && Boolean(order.pickupReadyAt);
}

function operationalStatusMeta(order: Order) {
  if (["SHIPPED", "TO_CONFIRM_RECEIVE", "COMPLETED", "CANCELLED", "IN_CANCEL", "TO_RETURN", "RETURNED"].includes(order.orderStatus || "")) {
    return statusMeta(order.orderStatus);
  }
  if (order.pickupReadyAt) {
    return { label: "Menunggu Pick-Up", tone: "info" as const };
  }
  if (order.shippingDocumentPrintedAt) {
    return { label: "Sudah Dicetak — Belum Dikirim", tone: "warning" as const };
  }
  if (order.orderStatus === "READY_TO_SHIP" && !order.shipmentMethod) {
    return { label: "Pesanan Masuk", tone: "warning" as const };
  }
  if (hasShopeePrintSignal(order)) {
    return { label: "Menunggu Dicetak", tone: "warning" as const };
  }
  if (order.shipmentMethod || hasShopeeLogisticsSignal(order) || order.orderStatus === "PROCESSED") {
    return { label: "Menunggu Dicetak", tone: "info" as const };
  }
  if (order.orderStatus === "READY_TO_SHIP") {
    return { label: "Pesanan Masuk", tone: "warning" as const };
  }
  return statusMeta(order.orderStatus);
}

function safe(value: string | number | null | undefined) {
  if (value === null || value === undefined || value === "") return "-";
  return String(value);
}

function displayCarrier(value: string | null | undefined) {
  if (!value) return "-";
  return value.replace(/^Sandbox-/i, "").replace(/\(Don't modify\)/gi, "").trim() || "-";
}

function shippingMethodLabel(order: Order) {
  if (order.shipmentMethod) return order.shipmentMethod.replace("_", " ");
  if (order.orderStatus === "PROCESSED") return "Diatur dari Shopee";
  return "Belum dipilih";
}

function logisticsProgressText(order: Order) {
  const status = order.orderStatus;
  if (status === "COMPLETED") return "Pesanan selesai";
  if (["CANCELLED", "IN_CANCEL"].includes(status || "")) return "Pesanan dibatalkan";
  if (status === "TO_RETURN") return "Dalam proses retur";
  if (status === "RETURNED") return "Pesanan sudah diretur";
  if (["SHIPPED", "TO_CONFIRM_RECEIVE"].includes(status || "")) return "Pengiriman sudah diproses";
  if (order.pickupReadyAt) return "Siap diserahkan ke kurir";
  if (order.shippingDocumentPrintedAt) return "Resi sudah dicetak, menunggu tindakan Kirim Barang";
  if (status === "READY_TO_SHIP" && !order.shipmentMethod) return "Pengiriman belum diatur";
  if (hasShopeePrintSignal(order)) return "Resi tersedia dan siap dicetak";
  if (order.shipmentMethod || hasShopeeLogisticsSignal(order) || status === "PROCESSED") return "Menunggu resi dari Shopee";
  return "Belum masuk proses pengiriman";
}

function riskLate(order: Order, referenceTime: number) {
  if (!order.shipByDate || !["READY_TO_SHIP", "PROCESSED"].includes(order.orderStatus || "")) return false;
  return new Date(order.shipByDate).getTime() - referenceTime <= 12 * 60 * 60 * 1000;
}

function durationText(ms: number) {
  const abs = Math.abs(ms);
  const days = Math.floor(abs / (24 * 60 * 60 * 1000));
  const hours = Math.floor((abs % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
  const minutes = Math.floor((abs % (60 * 60 * 1000)) / (60 * 1000));
  if (days > 0) return `${days} hari ${hours}j`;
  if (hours > 0) return `${hours}j ${minutes}m`;
  return `${minutes}m`;
}

function formatShopeeDeadline(value: string | null, referenceTime: number) {
  if (!value) return "-";
  const deadline = new Date(value);
  const diff = deadline.getTime() - referenceTime;
  const suffix = diff < 0 ? `lewat ${durationText(diff)}` : `sisa ${durationText(diff)}`;
  return `${formatDate(value)} (${suffix})`;
}

function escapeHtml(value: string) {
  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
}

function firstItem(items: OrderItem[]) {
  return items[0] || null;
}

function allQuantity(items: OrderItem[], completed: boolean) {
  const qty = items.reduce((sum, item) => sum + (completed ? item.activeQuantity : item.quantity || 0), 0);
  return items.length === 0 ? 1 : qty;
}

function returnedItemCount(items: OrderItem[]) {
  return items.reduce((sum, item) => sum + item.returnedQuantity, 0);
}

function findUrls(value: unknown): string[] {
  const urls: string[] = [];
  const seen = new Set<string>();
  const walk = (v: unknown) => {
    if (!v) return;
    if (typeof v === "string") {
      if (v.startsWith("http") && !seen.has(v)) {
        seen.add(v);
        urls.push(v);
      }
      return;
    }
    if (Array.isArray(v)) {
      v.forEach(walk);
      return;
    }
    if (typeof v === "object") {
      for (const [key, val] of Object.entries(v as Record<string, unknown>)) {
        if (typeof val === "string" && key.toLowerCase().includes("url") && val.startsWith("http") && !seen.has(val)) {
          seen.add(val);
          urls.push(val);
        }
        walk(val);
      }
    }
  };
  walk(value);
  return urls;
}

function hasReadyShippingDocument(value: unknown): boolean {
  let ready = false;
  const walk = (entry: unknown) => {
    if (ready || !entry) return;
    if (typeof entry === "string") {
      if (entry.toUpperCase() === "READY") ready = true;
      return;
    }
    if (Array.isArray(entry)) {
      entry.forEach(walk);
      return;
    }
    if (typeof entry === "object") Object.values(entry as Record<string, unknown>).forEach(walk);
  };
  walk(value);
  return ready;
}

function openBase64Document(data: unknown) {
  const record = apiRecord(data);
  if (typeof record.base64 !== "string") return false;
  const byteCharacters = atob(record.base64);
  const byteNumbers = new Array(byteCharacters.length);
  for (let i = 0; i < byteCharacters.length; i++) byteNumbers[i] = byteCharacters.charCodeAt(i);
  const blob = new Blob([new Uint8Array(byteNumbers)], { type: typeof record.contentType === "string" ? record.contentType : "application/pdf" });
  const url = URL.createObjectURL(blob);
  window.open(url, "_blank", "noopener,noreferrer");
  window.setTimeout(() => URL.revokeObjectURL(url), 60_000);
  return true;
}

async function readJsonResponse<T>(response: Response, fallbackMessage: string): Promise<T> {
  const contentType = response.headers.get("content-type") || "";
  if (!contentType.includes("application/json")) throw new Error(fallbackMessage);
  return response.json() as Promise<T>;
}

function orderItemKey(order: Pick<Order, "shopId" | "orderSn">) {
  return `${order.shopId}:${order.orderSn}`;
}

function downloadSelectedCsv(rows: Order[], itemsByOrderSn: Record<string, OrderItem[]>) {
  const header = ["order_sn", "shop_id", "status", "recipient", "package_number", "tracking_number", "shipping_carrier", "total", "items"];
  const cell = (value: unknown) => `"${String(value ?? "").replace(/"/g, '""')}"`;
  const body = rows.map((order) => {
    const items = (itemsByOrderSn[orderItemKey(order)] || []).map((item) => item.itemName || item.modelSku || item.itemSku).filter(Boolean).join(" ; ");
    return [
      order.orderSn,
      order.shopId,
      order.orderStatus,
      order.recipientName,
      order.packageNumber,
      order.trackingNumber,
      displayCarrier(order.shippingCarrier),
      order.totalAmount,
      items,
    ].map(cell).join(",");
  });
  const blob = new Blob([[header.map(cell).join(","), ...body].join("\n")], { type: "text/csv;charset=utf-8" });
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url;
  link.download = "shopee-orders-selected.csv";
  link.style.display = "none";
  document.body.appendChild(link);
  link.click();
  link.remove();
  window.setTimeout(() => URL.revokeObjectURL(url), 2_000);
}

function printInternalLabel(order: Order, item: OrderItem | null) {
  const popup = window.open("", "_blank", "width=860,height=720");
  if (!popup) {
    window.alert("Popup print diblokir browser.");
    return;
  }

  popup.document.write(`<!doctype html>
  <html>
    <head>
      <title>Label ${escapeHtml(order.orderSn)}</title>
      <style>
        body { margin: 0; padding: 24px; font-family: Arial, sans-serif; background: #f1f5f9; color: #0f172a; }
        .label { max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid #cbd5e1; border-radius: 16px; padding: 22px; }
        .top { display: flex; justify-content: space-between; gap: 16px; border-bottom: 3px solid #0f766e; padding-bottom: 14px; }
        h1 { margin: 0; font-size: 22px; color: #0f766e; }
        .pill { border: 1px solid #99f6e4; background: #f0fdfa; color: #0f766e; border-radius: 999px; padding: 7px 10px; font-weight: 700; }
        .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
        .box { border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; min-height: 70px; }
        .wide { grid-column: span 2; }
        .labeltxt { display: block; color: #64748b; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
        b { overflow-wrap: anywhere; }
        p { margin: 4px 0 0; color: #475569; }
        @media print { body { background: #fff; padding: 0; } .label { border: 0; border-radius: 0; } }
      </style>
    </head>
    <body>
      <section class="label">
        <div class="top">
          <div>
            <h1>Sellfin Commerce OS</h1>
            <p>Internal printable label</p>
          </div>
          <div class="pill">${escapeHtml(statusMeta(order.orderStatus).label)}</div>
        </div>
        <div class="grid">
          <div class="box wide"><span class="labeltxt">Order SN</span><b>${escapeHtml(order.orderSn)}</b></div>
          <div class="box"><span class="labeltxt">Penerima</span><b>${escapeHtml(safe(order.recipientName))}</b><p>${escapeHtml(safe(order.recipientPhone))}</p></div>
          <div class="box"><span class="labeltxt">Wilayah</span><b>${escapeHtml(safe([order.recipientRegion, order.recipientCity, order.recipientDistrict, order.recipientZipcode].filter(Boolean).join(" / ")))}</b></div>
          <div class="box wide"><span class="labeltxt">Alamat</span><b>${escapeHtml(safe(order.recipientFullAddr))}</b></div>
          <div class="box"><span class="labeltxt">Paket / Resi</span><b>${escapeHtml(safe(order.trackingNumber || order.packageNumber))}</b></div>
          <div class="box"><span class="labeltxt">Kurir</span><b>${escapeHtml(displayCarrier(order.shippingCarrier))}</b></div>
          <div class="box wide"><span class="labeltxt">Produk</span><b>${escapeHtml(safe(item?.itemName))}</b><p>${escapeHtml(safe(item?.modelName))}</p></div>
          <div class="box"><span class="labeltxt">SKU</span><b>${escapeHtml(safe(item?.modelSku || item?.itemSku))}</b></div>
          <div class="box"><span class="labeltxt">Total</span><b>${escapeHtml(formatMoney(order.totalAmount, order.currency))}</b></div>
        </div>
      </section>
    </body>
  </html>`);
  popup.document.close();
  popup.focus();
  window.setTimeout(() => popup.print(), 300);
}

async function openShopeeShippingDocs(input: {
  orders: Array<{ orderSn: string; shopId: string; packageNumber?: string | null }>;
  onToast: (t: Toast) => void;
}): Promise<boolean> {
  if (input.orders.length === 0) return false;
  if (input.orders.some((order) => order.shopId !== input.orders[0].shopId)) {
    throw new Error("Dokumen Shopee harus dibuat per toko agar token dan data pesanan tidak tercampur.");
  }

  input.onToast({ tone: "info", message: "Membuat dokumen Shopee..." });
  const createRes = await fetch("/api/shopee/orders/shipping-document/create", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      shopId: input.orders[0].shopId,
      orders: input.orders.map((order) => ({ orderSn: order.orderSn, packageNumber: order.packageNumber })),
    }),
  });
  const createJson = await readJsonResponse<{ ok: boolean; error?: string; data?: { shippingDocumentType?: string } }>(
    createRes,
    "Sesi login/API tidak valid saat membuat dokumen Shopee. Refresh halaman atau login ulang."
  );
  const documentType = createJson.data?.shippingDocumentType || "NORMAL_AIR_WAYBILL";
  const canReuseExistingTask = (!createRes.ok || !createJson.ok) && Boolean(createJson.error?.includes("belum bisa membuat dokumen resi"));
  if ((!createRes.ok || !createJson.ok) && !canReuseExistingTask) throw new Error(createJson.error || "Gagal membuat dokumen Shopee.");

  const downloadReadyDocument = async () => {
    const downloadRes = await fetch("/api/shopee/orders/shipping-document/download", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        shopId: input.orders[0].shopId,
        orders: input.orders.map((order) => ({ orderSn: order.orderSn, packageNumber: order.packageNumber, type: documentType })),
      }),
    });
    const downloadJson = await readJsonResponse<{ ok: boolean; error?: string; data?: unknown; urls?: string[] }>(
      downloadRes,
      "Sesi login/API tidak valid saat download resi Shopee. Refresh halaman atau login ulang."
    );
    if (!downloadRes.ok || !downloadJson.ok) return false;
    const downloadUrls = downloadJson.urls?.length ? downloadJson.urls : findUrls(downloadJson.data);
    if (downloadUrls.length > 0) {
      downloadUrls.slice(0, 10).forEach((url) => window.open(url, "_blank", "noopener,noreferrer"));
      input.onToast({ tone: "success", message: "Resi Shopee siap dan dibuka." });
      return true;
    }
    if (openBase64Document(downloadJson.data)) {
      input.onToast({ tone: "success", message: "Resi Shopee siap dan dibuka." });
      return true;
    }
    return false;
  };

  if (canReuseExistingTask) {
    input.onToast({ tone: "info", message: "Dokumen pernah dibuat. Mengambil resi yang sudah tersedia..." });
    if (await downloadReadyDocument()) return true;
  }

  for (let i = 0; i < 10; i++) {
    await new Promise((resolve) => setTimeout(resolve, 1500));
    const res = await fetch("/api/shopee/orders/shipping-document/result", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        shopId: input.orders[0].shopId,
        orders: input.orders.map((order) => ({ orderSn: order.orderSn, packageNumber: order.packageNumber, type: documentType })),
      }),
    });
    const json = await readJsonResponse<{ ok: boolean; error?: string; data?: unknown }>(
      res,
      "Sesi login/API tidak valid saat mengecek dokumen Shopee. Refresh halaman atau login ulang."
    );
    if (!res.ok || !json.ok) continue;

    const urls = findUrls(json.data);
    if (urls.length > 0) {
      urls.slice(0, 10).forEach((url) => window.open(url, "_blank", "noopener,noreferrer"));
      input.onToast({ tone: "success", message: "Dokumen Shopee siap dan dibuka." });
      return true;
    }

    if (hasReadyShippingDocument(json.data)) {
      if (await downloadReadyDocument()) return true;
    }
  }

  input.onToast({ tone: "info", message: "Dokumen Shopee belum ready. Coba lagi beberapa saat." });
  return false;
}

function OrderItemCostEditor({
  item,
  shopId,
  onToast,
  onRefresh,
}: {
  item: OrderItem;
  shopId: string;
  onToast: (toast: Toast) => void;
  onRefresh: () => void;
}) {
  const originalPlatformSku = (item.platformSku || item.modelSku || item.itemSku || "").trim();
  const [platformSku, setPlatformSku] = useState(originalPlatformSku);
  const [masterSku, setMasterSku] = useState(item.masterSku || "");
  const [hppAwal, setHppAwal] = useState(item.currentHppAwal === null ? "" : String(item.currentHppAwal));
  const [hppFinal, setHppFinal] = useState(item.currentHppFinal === null ? "" : String(item.currentHppFinal));
  const [saving, setSaving] = useState(false);
  const editable = Boolean(item.productItemId);
  const fieldsComplete = Boolean(
    platformSku.trim()
      && masterSku.trim()
      && hppAwal.trim() !== ""
      && hppFinal.trim() !== ""
  );
  const [expanded, setExpanded] = useState(!fieldsComplete);
  const dirty = platformSku.trim() !== originalPlatformSku
    || masterSku.trim() !== (item.masterSku || "").trim()
    || hppAwal.trim() !== String(item.currentHppAwal ?? "")
    || hppFinal.trim() !== String(item.currentHppFinal ?? "");

  async function save() {
    if (!item.productItemId || !dirty) return;
    const parsedAwal = hppAwal.trim() === "" ? null : Number(hppAwal);
    const parsedFinal = hppFinal.trim() === "" ? null : Number(hppFinal);
    if (platformSku.trim().length > 100) {
      onToast({ tone: "danger", message: "SKU Platform maksimal 100 karakter." });
      return;
    }
    if ((parsedAwal !== null && (!Number.isFinite(parsedAwal) || parsedAwal < 0))
      || (parsedFinal !== null && (!Number.isFinite(parsedFinal) || parsedFinal < 0))) {
      onToast({ tone: "danger", message: "HPP harus berupa angka positif atau dikosongkan." });
      return;
    }

    setSaving(true);
    const saved: string[] = [];
    try {
      if (masterSku.trim() !== (item.masterSku || "").trim()) {
        const skuResponse = await fetch(`/api/shopee/products/${encodeURIComponent(item.productItemId)}`, {
          method: "PATCH",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            action: "local",
            shopId,
            modelId: item.productModelId,
            masterSku: masterSku.trim() || null,
          }),
        });
        const skuJson = (await skuResponse.json()) as { ok?: boolean; error?: string };
        if (!skuResponse.ok || !skuJson.ok) throw new Error(skuJson.error || "Gagal menyimpan Master SKU.");
        saved.push("Master SKU");
      }

      if (hppAwal.trim() !== String(item.currentHppAwal ?? "") || hppFinal.trim() !== String(item.currentHppFinal ?? "")) {
        const hppResponse = await fetch(`/api/shopee/products/${encodeURIComponent(item.productItemId)}`, {
          method: "PATCH",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            action: "hpp",
            shopId,
            modelId: item.productModelId,
            hppAwal: parsedAwal,
            hppFinal: parsedFinal,
            currency: "IDR",
          }),
        });
        const hppJson = (await hppResponse.json()) as { ok?: boolean; error?: string };
        if (!hppResponse.ok || !hppJson.ok) throw new Error(hppJson.error || "Gagal menyimpan HPP.");
        saved.push("HPP");
      }

      if (platformSku.trim() !== originalPlatformSku) {
        const platformResponse = await fetch(`/api/shopee/products/${encodeURIComponent(item.productItemId)}`, {
          method: "PATCH",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            action: "update_shopee",
            shopId,
            modelId: item.productModelId,
            platformSku: platformSku.trim(),
          }),
        });
        const platformJson = (await platformResponse.json()) as { ok?: boolean; error?: string };
        if (!platformResponse.ok || !platformJson.ok) throw new Error(platformJson.error || "Gagal menyimpan SKU Platform ke Shopee.");
        saved.push("SKU Platform di Shopee dan Sellfin");
      }

      onToast({ tone: "success", message: `${saved.join(", ")} ${platformSku.trim() || item.itemName || "produk"} tersimpan.` });
      if (platformSku.trim() && masterSku.trim() && parsedAwal !== null && parsedFinal !== null) setExpanded(false);
      onRefresh();
    } catch (error) {
      const message = error instanceof Error ? error.message : "Gagal menyimpan data produk.";
      onToast({ tone: "danger", message: saved.length ? `${saved.join(", ")} sudah tersimpan. ${message}` : message });
      if (saved.length) onRefresh();
    } finally {
      setSaving(false);
    }
  }

  if (!editable) {
    return <div className="rounded-lg border border-amber-200 bg-amber-50 p-2 text-[10px] font-semibold text-amber-800">Produk belum tersinkron. Sinkronkan Produk &amp; SKU agar HPP dapat diedit.</div>;
  }

  if (!expanded && fieldsComplete) {
    return (
      <button className="flex w-full items-center justify-between gap-2 rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-left text-[10px] font-bold text-emerald-800 transition hover:bg-emerald-100" onClick={() => setExpanded(true)} type="button">
        <span>SKU &amp; HPP lengkap</span>
        <span className="rounded-md bg-white px-2 py-1 text-slate-600 shadow-sm">Edit</span>
      </button>
    );
  }

  return (
    <div className="space-y-2 rounded-lg border border-slate-200 bg-slate-50 p-2 dark:border-slate-700 dark:bg-slate-800/70">
      <div className="flex items-center justify-between gap-2">
        <span className={`text-[9px] font-black uppercase tracking-wide ${fieldsComplete ? "text-emerald-700" : "text-amber-700"}`}>{fieldsComplete ? "SKU & HPP lengkap" : "Data belum lengkap"}</span>
        {fieldsComplete ? <button className="text-[9px] font-bold text-slate-500 hover:text-slate-800" onClick={() => setExpanded(false)} type="button">Sembunyikan</button> : null}
      </div>
      <label className="block">
        <span className="text-[9px] font-black uppercase tracking-wide text-slate-400">SKU Platform (Shopee)</span>
        <input className="mt-1 w-full rounded-md border border-slate-200 bg-white px-2 py-1.5 font-mono text-[11px] font-bold text-slate-800 outline-none focus:border-emerald-500 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-100" maxLength={100} value={platformSku} onChange={(event) => setPlatformSku(event.target.value)} placeholder="Isi SKU Platform" />
      </label>
      <label className="block">
        <span className="text-[9px] font-black uppercase tracking-wide text-slate-400">Master SKU</span>
        <input className="mt-1 w-full rounded-md border border-slate-200 bg-white px-2 py-1.5 font-mono text-[11px] font-bold text-slate-800 outline-none focus:border-emerald-500 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-100" value={masterSku} onChange={(event) => setMasterSku(event.target.value)} placeholder="Isi Master SKU" />
      </label>
      <div className="grid grid-cols-2 gap-2">
        <label>
          <span className="text-[9px] font-black uppercase tracking-wide text-slate-400">HPP Awal produk</span>
          <input className="mt-1 w-full rounded-md border border-slate-200 bg-white px-2 py-1.5 text-right text-[11px] font-bold text-slate-800 outline-none focus:border-emerald-500 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-100" inputMode="decimal" value={hppAwal} onChange={(event) => setHppAwal(event.target.value)} placeholder="0" />
        </label>
        <label>
          <span className="text-[9px] font-black uppercase tracking-wide text-slate-400">HPP Final produk</span>
          <input className="mt-1 w-full rounded-md border border-slate-200 bg-white px-2 py-1.5 text-right text-[11px] font-bold text-slate-800 outline-none focus:border-emerald-500 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-100" inputMode="decimal" value={hppFinal} onChange={(event) => setHppFinal(event.target.value)} placeholder="0" />
        </label>
      </div>
      <p className="text-[10px] leading-4 text-slate-500">Yang diedit di sini adalah HPP produk saat ini dan berlaku untuk pesanan berikutnya. Snapshot order ini tidak berubah: HPP Awal {formatMoney(item.hppAwal, "IDR")} · HPP Final {formatMoney(item.hppFinal, "IDR")}.</p>
      <Button className="min-h-7 w-full px-2 py-1 text-[10px]" disabled={!dirty} loading={saving} onClick={save}>Simpan HPP &amp; SKU</Button>
    </div>
  );
}

export default function OrdersTable({
  orders,
  itemsByOrderSn,
  shopNames,
  renderedAt,
  sort,
  onSortChange,
  onOpenDetail,
  onToast,
  onRefresh,
  onSync,
  syncing,
  refreshing,
}: {
  orders: Order[];
  itemsByOrderSn: Record<string, OrderItem[]>;
  shopNames: Record<string, string>;
  renderedAt: string;
  sort: "update_time" | "create_time";
  onSortChange: (value: "update_time" | "create_time") => void;
  onOpenDetail: (orderSn: string, shopId: string) => void;
  onToast: (t: Toast) => void;
  onRefresh: () => void;
  onSync: () => void;
  syncing: boolean;
  refreshing: boolean;
}) {
  const [selected, setSelected] = useState<Record<string, boolean>>({});
  const [actionLoading, setActionLoading] = useState<Record<string, string | null>>({});
  const [shipDialog, setShipDialog] = useState<ShipDialogState | null>(null);
  const referenceTime = useMemo(() => new Date(renderedAt).getTime(), [renderedAt]);
  const selectedOrders = useMemo(() => orders.filter((order) => selected[`${order.shopId}:${order.orderSn}`]), [orders, selected]);
  const bulkRows = selectedOrders;
  const bulkPrintableRows = bulkRows.filter(canPrintShopeeDocument);
  const bulkProcessableRows = bulkRows.filter(canProcessShipment);
  const bulkPickupReadyRows = bulkRows.filter(canMarkPickupReady);

  function toggleAll(value: boolean) {
    setSelected(Object.fromEntries(orders.map((order) => [`${order.shopId}:${order.orderSn}`, value])));
  }

  function toggleInverse() {
    setSelected(Object.fromEntries(orders.map((order) => {
      const key = `${order.shopId}:${order.orderSn}`;
      return [key, !selected[key]];
    })));
  }

  function resetDialogDefaults(payload: ShippingParameterData, carrier: string | null, mode = defaultShippingMode(payload, carrier)) {
    const firstAddress = payload.pickup.address_list.find((address) => Number(address.address_id) > 0);
    const firstSlot = recommendedSlot(firstAddress);
    const firstBranch = payload.dropoff.branch_list.find((branch) => Number(branch.branch_id) > 0);
    return {
      mode,
      addressId: firstAddress?.address_id ? String(firstAddress.address_id) : "",
      pickupTimeId: firstSlot?.pickup_time_id ? String(firstSlot.pickup_time_id) : "",
      branchId: firstBranch?.branch_id ? String(firstBranch.branch_id) : "",
    };
  }

  async function openShipDialog(order: Order) {
    setActionLoading((state) => ({ ...state, [order.orderSn]: "shipping-parameter" }));
    setShipDialog({
      order,
      loading: true,
      submitting: false,
      error: null,
      payload: null,
      mode: "pickup",
      addressId: "",
      pickupTimeId: "",
      branchId: "",
    });
    try {
      const res = await fetch(
        `/api/shopee/orders/${encodeURIComponent(order.orderSn)}/shipping-parameter?shop_id=${encodeURIComponent(order.shopId)}`
      );
      const json = (await res.json()) as { ok: boolean; error?: string; data?: unknown };
      if (!res.ok || !json.ok) throw new Error(json.error || "Gagal mengambil pilihan pickup/dropoff dari Shopee.");
      const payload = parseShippingParameter(json);
      setShipDialog({
        order,
        loading: false,
        submitting: false,
        error: null,
        payload,
        ...resetDialogDefaults(payload, order.shippingCarrier),
      });
    } catch (error) {
      const message = error instanceof Error ? error.message : "Gagal mengambil pilihan pickup/dropoff dari Shopee.";
      setShipDialog((state) => (state ? { ...state, loading: false, error: message } : state));
      onToast({ tone: "danger", message });
    } finally {
      setActionLoading((state) => ({ ...state, [order.orderSn]: null }));
    }
  }

  function switchShippingMode(mode: ShippingMode) {
    setShipDialog((state) => {
      if (!state?.payload) return state;
      const defaults = resetDialogDefaults(state.payload, state.order.shippingCarrier, mode);
      return { ...state, ...defaults, mode };
    });
  }

  function selectPickupAddress(addressId: string) {
    setShipDialog((state) => {
      if (!state?.payload) return state;
      const address = state.payload.pickup.address_list.find((row) => String(row.address_id) === addressId);
      const slot = recommendedSlot(address);
      return { ...state, addressId, pickupTimeId: slot?.pickup_time_id ? String(slot.pickup_time_id) : "" };
    });
  }

  function buildShippingPayload(dialog: ShipDialogState) {
    if (dialog.mode === "pickup") {
      const addressId = Number(dialog.addressId);
      if (!Number.isFinite(addressId) || addressId <= 0) throw new Error("Pilih alamat pickup dulu.");
      const pickup: Record<string, unknown> = { address_id: addressId };
      if (dialog.pickupTimeId) pickup.pickup_time_id = dialog.pickupTimeId;
      return { pickup };
    }

    if (dialog.mode === "dropoff") {
      if (!dialog.branchId) return { dropoff: {} };
      const branchId = Number(dialog.branchId);
      if (!Number.isFinite(branchId) || branchId <= 0) throw new Error("Pilih cabang dropoff dulu.");
      return { dropoff: { branch_id: branchId } };
    }

    return { non_integrated: {} };
  }

  async function submitShipDialog() {
    const dialog = shipDialog;
    if (!dialog) return;
    setShipDialog((state) => (state ? { ...state, submitting: true, error: null } : state));
    try {
      const shipping = buildShippingPayload(dialog);
      const selectedSlot = dialog.payload?.pickup.address_list
        .find((address) => String(address.address_id) === dialog.addressId)
        ?.time_slot_list?.find((slot) => String(slot.pickup_time_id) === dialog.pickupTimeId);
      const res = await fetch(`/api/shopee/orders/${encodeURIComponent(dialog.order.orderSn)}/ship`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          shopId: dialog.order.shopId,
          shipping,
          pickupScheduledAt: dialog.mode === "pickup" ? slotDateIso(selectedSlot?.date) : null,
        }),
      });
      const json = (await res.json()) as { ok: boolean; error?: string; data?: unknown };
      if (!res.ok || !json.ok) throw new Error(json.error || "Gagal memproses pesanan.");
      onToast({ tone: "success", message: "Pesanan berhasil diproses. Status akan mengikuti update terbaru dari Shopee." });
      setShipDialog(null);
      onRefresh();
    } catch (error) {
      const message = error instanceof Error ? error.message : "Gagal memproses pesanan.";
      setShipDialog((state) => (state ? { ...state, submitting: false, error: message } : state));
      onToast({ tone: "danger", message });
    } finally {
      setShipDialog((state) => (state ? { ...state, submitting: false } : state));
    }
  }

  async function printShopeeDocs(rows: Order[]) {
    if (rows.length === 0) return;
    const rowKeys = rows.map((order) => order.orderSn);
    setActionLoading((state) => ({ ...state, ...Object.fromEntries(rowKeys.map((key) => [key, "print"])) }));
    try {
      const byShop = rows.slice(0, 50).reduce<Record<string, Order[]>>((groups, order) => {
        groups[order.shopId] ||= [];
        groups[order.shopId].push(order);
        return groups;
      }, {});
      let printedAny = false;
      for (const shopRows of Object.values(byShop)) {
        const printed = await openShopeeShippingDocs({
          orders: shopRows.map((order) => ({ orderSn: order.orderSn, shopId: order.shopId, packageNumber: order.packageNumber })),
          onToast,
        });
        printedAny ||= printed;
      }
      if (printedAny) onRefresh();
    } catch (error) {
      onToast({ tone: "danger", message: error instanceof Error ? error.message : "Gagal cetak dokumen Shopee." });
    } finally {
      setActionLoading((state) => ({ ...state, ...Object.fromEntries(rowKeys.map((key) => [key, null])) }));
    }
  }

  async function processSelected() {
    const ready = bulkProcessableRows;
    if (ready.length === 0) {
      onToast({ tone: "info", message: "Tidak ada pesanan yang masih perlu diproses pengiriman di daftar ini." });
      return;
    }
    if (ready.length > 1) {
      onToast({ tone: "info", message: "Proses pengiriman butuh pilihan pickup/dropoff per order. Pilih satu order dulu." });
      return;
    }
    await openShipDialog(ready[0]);
  }

  async function setPickupReady(rows: Order[], ready: boolean) {
    if (rows.length === 0) return;
    const rowKeys = rows.map((order) => order.orderSn);
    setActionLoading((state) => ({ ...state, ...Object.fromEntries(rowKeys.map((key) => [key, "pickup-ready"])) }));
    try {
      const results = await Promise.all(rows.map(async (order) => {
        const response = await fetch(`/api/shopee/orders/${encodeURIComponent(order.orderSn)}/pickup-ready`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ shopId: order.shopId, ready }),
        });
        const json = (await response.json()) as { ok?: boolean; error?: string };
        return { order, response, json };
      }));
      const failed = results.filter((result) => !result.response.ok || !result.json.ok);
      if (failed.length) throw new Error(failed[0].json.error || "Gagal memperbarui antrean pick-up.");
      onToast({
        tone: "success",
        message: ready
          ? `${rows.length} pesanan dipindahkan ke Menunggu Pick-Up.`
          : `${rows.length} pesanan dikembalikan ke antrean Menunggu Dicetak.`,
      });
      setSelected({});
      onRefresh();
    } catch (error) {
      onToast({ tone: "danger", message: error instanceof Error ? error.message : "Gagal memperbarui antrean pick-up." });
    } finally {
      setActionLoading((state) => ({ ...state, ...Object.fromEntries(rowKeys.map((key) => [key, null])) }));
    }
  }

  const dialogPayload = shipDialog?.payload;
  const pickupAddresses = dialogPayload?.pickup.address_list || [];
  const dropoffBranches = dialogPayload?.dropoff.branch_list || [];
  const shippingModes = dialogPayload ? availableShippingModes(dialogPayload, shipDialog?.order.shippingCarrier || null) : [];
  const displayedModes: ShippingMode[] = ["pickup", "dropoff", ...(shippingModes.includes("non_integrated") ? (["non_integrated"] as const) : [])];
  const selectedPickupAddress = pickupAddresses.find((address) => String(address.address_id) === shipDialog?.addressId);
  const pickupSlots = selectedPickupAddress?.time_slot_list || [];

  return (
    <>
    <section className="order-results overflow-hidden rounded-[14px] border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900">
      <div className="border-b border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900">
        <div className="order-bulk-toolbar flex flex-wrap items-center justify-between gap-3 px-4 py-3.5">
          <div className="flex flex-wrap items-center gap-2">
            <Button variant="primary" disabled={bulkProcessableRows.length === 0} onClick={processSelected}>
              Atur Pengiriman{bulkProcessableRows.length ? ` (${bulkProcessableRows.length})` : ""}
            </Button>
            <Button disabled={bulkPrintableRows.length !== 1} loading={bulkPrintableRows.some((order) => actionLoading[order.orderSn] === "print")} onClick={() => printShopeeDocs(bulkPrintableRows.slice(0, 1))}>
              Cetak Resi
            </Button>
            <Button disabled={bulkPrintableRows.length === 0} loading={bulkPrintableRows.some((order) => actionLoading[order.orderSn] === "print")} onClick={() => printShopeeDocs(bulkPrintableRows)} title="Cetak resi untuk pesanan terpilih">
              Cetak Massal{bulkPrintableRows.length ? ` (${bulkPrintableRows.length})` : ""}
            </Button>
            <Button disabled={bulkPickupReadyRows.length === 0} loading={bulkPickupReadyRows.some((order) => actionLoading[order.orderSn] === "pickup-ready")} onClick={() => setPickupReady(bulkPickupReadyRows, true)} title="Pindahkan manual ke antrean Menunggu Pick-Up">
              Tandai Siap Pick-Up{bulkPickupReadyRows.length ? ` (${bulkPickupReadyRows.length})` : ""}
            </Button>
            <ActionMenu
              align="left"
              items={[
                {
                  label: "Cetak label internal",
                  description: "Label gudang untuk pesanan terpilih",
                  disabled: bulkRows.length === 0,
                  onClick: () => bulkRows.forEach((order) => printInternalLabel(order, firstItem(itemsByOrderSn[orderItemKey(order)] || []))),
                },
                {
                  label: "Ekspor pesanan terpilih",
                  description: "Unduh CSV sesuai pilihan",
                  disabled: bulkRows.length === 0,
                  onClick: () => downloadSelectedCsv(bulkRows, itemsByOrderSn),
                },
              ]}
              label="Lainnya"
            />
          </div>
          <div className="flex flex-wrap items-center gap-2 text-sm">
          <select
            className="rounded-[10px] border border-slate-200 bg-white px-3 py-2 text-[12px] font-bold text-slate-700 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200"
            value={sort}
            onChange={(event) => onSortChange(event.target.value === "create_time" ? "create_time" : "update_time")}
          >
            <option value="update_time">Urut: Update terbaru</option>
            <option value="create_time">Urut: Pesanan terbaru</option>
          </select>
            <Button loading={refreshing} onClick={onRefresh}>Refresh</Button>
            <Button loading={syncing} onClick={onSync}>Sinkronkan Pesanan</Button>
          </div>
        </div>
        <div className="flex min-h-10 flex-wrap items-center justify-between gap-2 border-t border-slate-100 bg-slate-50/80 px-4 py-2.5 dark:border-slate-800 dark:bg-slate-950/30">
          <div className="flex flex-wrap items-center gap-2">
            <label className="flex items-center gap-2 text-[11px] font-bold text-slate-600 dark:text-slate-300"><input className="h-4 w-4 accent-emerald-600" type="checkbox" aria-label="Pilih semua pesanan" checked={orders.length > 0 && selectedOrders.length === orders.length} onChange={(event) => toggleAll(event.target.checked)} /> Pilih halaman</label>
            <Button className="min-h-8 px-2.5 py-1.5 text-[11px]" onClick={() => toggleAll(true)}>Pilih Semua</Button>
            <Button className="min-h-8 px-2.5 py-1.5 text-[11px]" onClick={toggleInverse}>Balik Pilihan</Button>
            {selectedOrders.length ? <Button className="min-h-8 px-2.5 py-1.5 text-[11px]" variant="ghost" onClick={() => setSelected({})}>Hapus Pilihan</Button> : null}
          </div>
          <span className={selectedOrders.length ? "rounded-full bg-emerald-100 px-3 py-1 text-[11px] font-black text-emerald-700" : "text-[11px] font-semibold text-slate-400"}>
            {selectedOrders.length ? `${selectedOrders.length} pesanan dipilih` : `${orders.length} pesanan pada halaman ini`}
          </span>
        </div>
      </div>

      <div className="w-full max-w-full overflow-x-auto bg-[#f5f6f8] p-3 dark:bg-slate-950/50">
        <div className="min-w-[1120px]">
          <div className="order-column-header grid grid-cols-[minmax(260px,1.4fr)_minmax(190px,1fr)_minmax(170px,.9fr)_minmax(170px,.9fr)_minmax(180px,.95fr)_minmax(150px,.8fr)] rounded-t-lg border border-slate-200 bg-slate-100 text-[10px] font-semibold uppercase tracking-[0.06em] text-slate-500 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300">
            <div className="px-3 py-2.5">Informasi Produk</div>
            <div className="border-l border-slate-300 px-3 py-2.5 dark:border-slate-700">Informasi Pengiriman</div>
            <div className="border-l border-slate-300 px-3 py-2.5 dark:border-slate-700">Jumlah Pesanan & Profit</div>
            <div className="border-l border-slate-300 px-3 py-2.5 dark:border-slate-700">HPP &amp; Master SKU</div>
            <div className="border-l border-slate-300 px-3 py-2.5 dark:border-slate-700">Informasi Logistik</div>
            <div className="border-l border-slate-300 px-3 py-2.5 dark:border-slate-700">Waktu</div>
          </div>
          <div className="space-y-3 pt-3">
            {orders.map((order) => {
              const items = itemsByOrderSn[orderItemKey(order)] || [];
              const item = firstItem(items);
              const status = operationalStatusMeta(order);
              const canShip = canProcessShipment(order);
              const canPrint = canPrintShopeeDocument(order);
              const canReadyForPickup = canMarkPickupReady(order);
              const canReturnToPrintQueue = canUndoPickupReady(order);
              const loading = actionLoading[order.orderSn];
              const late = riskLate(order, referenceTime);
              const completed = order.orderStatus === "COMPLETED";
              const qty = allQuantity(items, completed);
              const refundedQty = completed ? returnedItemCount(items) : 0;
              const activeFulfillment = ["READY_TO_SHIP", "PROCESSED"].includes(order.orderStatus || "");
              const income = completed ? order.realizedShopeeIncome : order.estimatedShopeeIncome;
              const profit = completed ? order.realizedProfit : order.estimatedProfit;
              const missingHpp = completed ? order.missingFinalHppItems : order.missingHppItems;
              const selectionKey = `${order.shopId}:${order.orderSn}`;
              return <article className="order-card overflow-hidden rounded-xl border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900" key={`${order.shopId}-${order.orderSn}`}>
                <div className="order-card-actions flex min-h-11 items-center justify-between gap-3 border-b border-slate-200 bg-white px-3 py-2 dark:border-slate-700 dark:bg-slate-900">
                  <div className="flex items-center gap-1.5">
                    <input className="mr-1 h-4 w-4 accent-emerald-600" aria-label={`Pilih pesanan ${order.orderSn}`} type="checkbox" checked={Boolean(selected[selectionKey])} onChange={(event) => setSelected((state) => ({ ...state, [selectionKey]: event.target.checked }))} />
                    <Button
                      className="min-h-7 px-2.5 py-1 text-[11px]"
                      variant="primary"
                      disabled={!canShip && !canReadyForPickup}
                      loading={loading === "shipping-parameter" || loading === "pickup-ready" || (shipDialog?.order.orderSn === order.orderSn && shipDialog.submitting)}
                      onClick={() => canShip ? openShipDialog(order) : setPickupReady([order], true)}
                      title={canShip ? "Pilih Pickup/Drop-off dan jadwal" : canReadyForPickup ? "Pindahkan ke Menunggu Pick-Up" : "Cetak resi dahulu"}
                    >{canShip ? "Atur Pengiriman" : canReadyForPickup ? "Tandai Siap Pick-Up" : "Atur Pengiriman"}</Button>
                    <Button className="min-h-7 px-3 py-1 text-[11px] font-bold" disabled={!canPrint} loading={loading === "print"} onClick={() => printShopeeDocs([order])}>Cetak Resi</Button>
                    <Button className="min-h-7 px-2.5 py-1 text-[11px]" onClick={() => onOpenDetail(order.orderSn, order.shopId)}>Detail</Button>
                    <ActionMenu compact align="left" items={[
                      { label: "Cetak resi Shopee", disabled: !canPrint, onClick: () => printShopeeDocs([order]) },
                      { label: "Pindahkan ke Menunggu Pick-Up", disabled: !canReadyForPickup, onClick: () => setPickupReady([order], true) },
                      { label: "Kembalikan ke Menunggu Dicetak", disabled: !canReturnToPrintQueue, onClick: () => setPickupReady([order], false) },
                      { label: "Cetak label internal", onClick: () => printInternalLabel(order, item) },
                      { label: "Ekspor pesanan ini", onClick: () => downloadSelectedCsv([order], itemsByOrderSn) },
                    ]} label="Lainnya" />
                  </div>
                  <div className="flex items-center gap-2">
                    <Button className="min-h-7 px-2.5 py-1 text-[11px]" onClick={() => printInternalLabel(order, item)}>Label</Button>
                    <Button className="min-h-7 px-2.5 py-1 text-[11px]" variant="ghost" onClick={() => onOpenDetail(order.orderSn, order.shopId)}>Keterangan</Button>
                  </div>
                </div>

                <div className="order-card-meta flex min-h-10 flex-wrap items-center gap-x-3 gap-y-1 border-b border-slate-200 bg-slate-50/70 px-3 py-2 text-[11px] dark:border-slate-700 dark:bg-slate-800/60">
                  <Badge tone={status.tone}>{status.label}</Badge>
                  {late ? <Badge tone="danger">Risiko telat</Badge> : null}
                  <span className="font-black text-orange-600">[Shopee-ID]</span>
                  <span className="font-black text-slate-900 dark:text-white">{shopNames[order.shopId] || order.shopId}</span>
                  <button className="font-mono font-bold text-slate-600 hover:text-emerald-700 dark:text-slate-300" onClick={() => onOpenDetail(order.orderSn, order.shopId)} type="button">{order.orderSn}</button>
                  <span className="text-slate-300">|</span>
                  <span className="text-slate-500">Metode pembayaran: <b className="text-slate-700 dark:text-slate-200">{safe(order.paymentMethod)}</b></span>
                </div>

                <div className="order-card-grid grid grid-cols-[minmax(260px,1.35fr)_minmax(185px,.9fr)_minmax(170px,.8fr)_minmax(230px,1.05fr)_minmax(180px,.85fr)_minmax(150px,.7fr)] text-[11px] text-slate-600 dark:text-slate-300">
                  <div className="divide-y divide-slate-100 px-3 dark:divide-slate-800">
                    {(items.length ? items : [null]).map((row, index) => <div className="flex min-h-[104px] gap-3 py-3" key={row ? `${row.itemId}-${row.modelId}-${index}` : "empty"}>
                      {row?.imageUrl ? (
                        // eslint-disable-next-line @next/next/no-img-element
                        <img className="h-16 w-16 shrink-0 rounded-md border border-slate-200 object-cover" src={row.imageUrl} alt="" />
                      ) : <div className="h-16 w-16 shrink-0 rounded-md border border-slate-200 bg-slate-100 dark:border-slate-700 dark:bg-slate-800" />}
                      <div className="min-w-0 flex-1">
                        <div className="line-clamp-2 font-bold leading-4 text-slate-900 dark:text-white">{safe(row?.itemName)}</div>
                        <div className="mt-1 text-slate-400">Spesifikasi: <b className="text-slate-600 dark:text-slate-300">{safe(row?.modelName)}</b></div>
                        <div className="mt-1">Harga satuan: <b className="text-slate-800 dark:text-slate-100">{formatMoney(row?.itemPrice ?? null, order.currency)}</b></div>
                        <div className="mt-1">SKU platform: <b className="font-mono text-slate-800 dark:text-slate-100">{safe(row?.platformSku || row?.modelSku || row?.itemSku)}</b></div>
                      </div>
                      <div className="shrink-0 text-right text-base font-black text-rose-500">×{completed ? row?.activeQuantity ?? 0 : row?.quantity || 1}{completed && row?.returnedQuantity ? <div className="mt-1 text-[10px] font-semibold text-amber-600">{row.returnedQuantity} refund</div> : null}</div>
                    </div>)}
                  </div>
                  <div className="border-l border-slate-200 px-3 py-3 dark:border-slate-700">
                    <div className="text-slate-400">Toko pengiriman</div><div className="mt-1 font-black text-slate-800 dark:text-slate-100">{shopNames[order.shopId] || order.shopId}</div>
                    <div className="mt-3 text-slate-400">Metode pengiriman</div><div className="mt-1 font-black capitalize text-slate-800 dark:text-slate-100">{shippingMethodLabel(order)}</div>
                    {order.pickupScheduledAt ? <><div className="mt-2 text-slate-400">Jadwal pickup</div><div className="mt-1 font-bold text-emerald-700">{formatDate(order.pickupScheduledAt)}</div></> : null}
                    <div className="mt-3 text-slate-400">{completed ? "Barang terealisasi" : "Total barang"}</div><div className="mt-1 font-black text-slate-800 dark:text-slate-100">× {qty}</div>
                    {completed && refundedQty > 0 ? <div className="mt-1 text-[10px] font-semibold text-amber-700">{refundedQty} barang refund (dari {qty + refundedQty} dipesan)</div> : null}
                    <div className="mt-3 text-slate-400">Kelengkapan HPP</div><div className={`mt-1 font-bold ${missingHpp ? "text-amber-600" : "text-emerald-600"}`}>{missingHpp ? `${missingHpp} item belum memiliki HPP Final` : "HPP Final seluruh item terealisasi lengkap"}</div>
                  </div>
                  <div className="border-l border-slate-200 px-3 py-3 dark:border-slate-700">
                    <div className="text-slate-400">{completed ? "Dana cair Shopee" : "Perkiraan pelepasan dana"}</div><div className="mt-1 font-black text-slate-900 dark:text-white">{income === null ? "Menunggu data Shopee" : formatMoney(income, order.currency)}</div>
                    <div className="mt-3 text-slate-400">{completed ? "Profit riil" : "Estimasi profit"}</div><div className={`mt-1 text-sm font-black ${profit === null ? "text-amber-600" : profit < 0 ? "text-rose-600" : "text-emerald-700"}`}>{profit === null ? "Belum lengkap" : formatMoney(profit, order.currency)}</div>
                    <div className="mt-2 text-slate-400">HPP Final + packing: <b className="text-slate-700 dark:text-slate-200">{formatMoney(completed ? order.realizedHpp : order.estimatedHpp, order.currency)}</b></div>
                    <div className="mt-1 text-slate-400">Bruto: <b className="text-slate-700 dark:text-slate-200">{formatMoney(order.totalAmount, order.currency)}</b></div>
                  </div>
                  <div className="border-l border-slate-200 px-3 py-3 dark:border-slate-700">
                    <div className="space-y-2">
                      {(items.length ? items : []).map((row, index) => (
                        <OrderItemCostEditor
                          item={row}
                          shopId={order.shopId}
                          onToast={onToast}
                          onRefresh={onRefresh}
                          key={`${row.productItemId || row.itemId || "item"}:${row.productModelId || row.modelId || index}`}
                        />
                      ))}
                      {items.length === 0 ? <div className="rounded-lg bg-slate-50 p-2 text-slate-500 dark:bg-slate-800">Item pesanan belum tersinkron.</div> : null}
                    </div>
                  </div>
                  <div className="border-l border-slate-200 px-3 py-3 dark:border-slate-700">
                    <div className="text-slate-400">Nomor paket</div><div className="mt-1 break-all font-mono font-bold text-slate-800 dark:text-slate-100">{safe(order.packageNumber)}</div>
                    <div className="mt-2 font-black text-slate-800 dark:text-slate-100">{displayCarrier(order.shippingCarrier)}</div>
                    <div className="mt-2 text-slate-400">Nomor resi</div><div className="mt-1 break-all font-mono font-bold text-slate-800 dark:text-slate-100">{safe(order.trackingNumber)}</div>
                    <div className="mt-3 font-semibold text-slate-500">{logisticsProgressText(order)}</div>
                  </div>
                  <div className="border-l border-slate-200 px-3 py-3 dark:border-slate-700">
                    <div className="text-slate-400">Pesanan</div><div className="mt-1 font-bold text-slate-800 dark:text-slate-100">{formatDate(order.createTime)}</div>
                    <div className="mt-2 text-slate-400">Pembaruan</div><div className="mt-1 font-bold text-slate-800 dark:text-slate-100">{formatDate(order.updateTime)}</div>
                    {activeFulfillment ? <><div className="mt-2 text-slate-400">Batas proses</div><div className={`mt-1 font-black ${late ? "text-rose-600" : "text-emerald-700"}`}>{formatShopeeDeadline(order.shipByDate, referenceTime)}</div></> : null}
                    {order.shippingDocumentPrintedAt ? <><div className="mt-2 text-slate-400">Resi dicetak</div><div className="mt-1 font-bold text-slate-700 dark:text-slate-200">{formatDate(order.shippingDocumentPrintedAt)}</div></> : null}
                    {order.pickupReadyAt ? <><div className="mt-2 text-slate-400">Siap pick-up sejak</div><div className="mt-1 font-bold text-emerald-700">{formatDate(order.pickupReadyAt)}</div></> : null}
                  </div>
                </div>
              </article>;
            })}
          </div>
        </div>
      </div>
    </section>
    {shipDialog ? (
      <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/45 p-4">
        <div className="max-h-[92vh] w-full max-w-3xl overflow-y-auto rounded-2xl border border-slate-200 bg-white shadow-2xl">
          <div className="flex items-start justify-between gap-4 border-b border-slate-200 p-5">
            <div>
              <div className="text-xs font-bold uppercase tracking-wide text-teal-700">Proses pengiriman Shopee</div>
              <h2 className="mt-1 text-xl font-black text-slate-950">{shipDialog.order.orderSn}</h2>
              <p className="mt-1 text-sm text-slate-500">
                Pilih satu metode dari data live Shopee, lalu submit ke API <b>ship_order</b>.
              </p>
            </div>
            <button
              className="rounded-lg px-3 py-2 text-sm font-bold text-slate-500 hover:bg-slate-100 hover:text-slate-950"
              onClick={() => setShipDialog(null)}
              type="button"
            >
              Tutup
            </button>
          </div>

          <div className="space-y-4 p-5">
            {shipDialog.loading ? (
              <div className="rounded-xl border border-slate-200 bg-slate-50 p-4 text-sm font-semibold text-slate-600">
                Mengambil pickup/dropoff dan jadwal dari Shopee...
              </div>
            ) : null}

            {shipDialog.error ? (
              <div className="rounded-xl border border-rose-200 bg-rose-50 p-4 text-sm font-semibold text-rose-700">
                {shipDialog.error}
              </div>
            ) : null}

            {dialogPayload ? (
              <>
                <div className="rounded-xl border border-slate-200 bg-slate-50 p-4">
                  <div className="mb-3 text-xs font-bold uppercase tracking-wide text-slate-500">Metode tersedia</div>
                  <div className="flex flex-wrap gap-2">
                    {displayedModes.map((mode) => (
                      <button
                        className={[
                          "rounded-lg border px-3 py-2 text-sm font-bold transition",
                          shipDialog.mode === mode
                            ? "border-teal-600 bg-teal-600 text-white"
                            : "border-slate-200 bg-white text-slate-700 hover:border-teal-300 hover:text-teal-700",
                        ].join(" ")}
                        key={mode}
                        disabled={!shippingModes.includes(mode)}
                        onClick={() => switchShippingMode(mode)}
                        type="button"
                      >
                        {shippingModeLabel(mode)}{!shippingModes.includes(mode) ? " · tidak tersedia" : ""}
                      </button>
                    ))}
                  </div>
                  {!shippingModes.includes("pickup") ? <p className="mt-2 text-xs text-slate-600">Pickup belum ditawarkan Shopee untuk pesanan ini; alamat pickup tidak tersedia.</p> : null}
                  {shippingModes.length === 0 ? <p className="mt-2 text-xs font-semibold text-rose-700">Shopee tidak memberi metode pengiriman yang dapat dipilih. Cek pengaturan kurir di Seller Centre sebelum memproses.</p> : null}
                  <div className="mt-3 text-xs text-slate-500">
                    Info yang diminta Shopee:
                    <b className="ml-1 text-slate-700">
                      {[
                        dialogPayload.info_needed.pickup.length ? `pickup(${dialogPayload.info_needed.pickup.join(", ")})` : "",
                        dialogPayload.info_needed.dropoff.length ? `dropoff(${dialogPayload.info_needed.dropoff.join(", ")})` : "",
                      ].filter(Boolean).join(" / ") || "Tidak ada parameter tambahan"}
                    </b>
                  </div>
                </div>

                {shipDialog.mode === "pickup" ? (
                  <div className="grid gap-4 md:grid-cols-2">
                    <label className="block">
                      <span className="text-xs font-bold uppercase tracking-wide text-slate-500">Alamat pickup</span>
                      <select
                        className="mt-2 w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-950"
                        value={shipDialog.addressId}
                        onChange={(event) => selectPickupAddress(event.target.value)}
                      >
                        {pickupAddresses.map((address) => (
                          <option key={String(address.address_id)} value={String(address.address_id)}>
                            {[address.city, address.district, address.zipcode].filter(Boolean).join(" / ") || address.address_id}
                          </option>
                        ))}
                      </select>
                    </label>
                    <label className="block">
                      <span className="text-xs font-bold uppercase tracking-wide text-slate-500">Tanggal/Jam pickup</span>
                      <select
                        className="mt-2 w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-950"
                        value={shipDialog.pickupTimeId}
                        onChange={(event) => setShipDialog((state) => (state ? { ...state, pickupTimeId: event.target.value } : state))}
                      >
                        {pickupSlots.map((slot) => (
                          <option key={String(slot.pickup_time_id)} value={String(slot.pickup_time_id)}>
                            {formatSlotTime(slot.date)} {slot.flags?.includes("recommended") ? "(recommended)" : ""}
                          </option>
                        ))}
                      </select>
                    </label>
                    <div className="md:col-span-2 rounded-xl border border-slate-200 bg-white p-4 text-sm text-slate-600">
                      <div className="font-bold text-slate-950">{selectedPickupAddress?.address || "-"}</div>
                      <div className="mt-1">
                        {[selectedPickupAddress?.state, selectedPickupAddress?.city, selectedPickupAddress?.district, selectedPickupAddress?.zipcode]
                          .filter(Boolean)
                          .join(" / ") || "-"}
                      </div>
                      {selectedPickupAddress?.address_flag?.length ? (
                        <div className="mt-2 flex flex-wrap gap-2">
                          {selectedPickupAddress.address_flag.map((flag) => (
                            <span className="rounded-full bg-teal-50 px-2 py-1 text-xs font-bold text-teal-700" key={flag}>
                              {flag}
                            </span>
                          ))}
                        </div>
                      ) : null}
                    </div>
                  </div>
                ) : null}

                {shipDialog.mode === "dropoff" ? (
                  dropoffBranches.length === 0 ? <div className="rounded-xl border border-teal-200 bg-teal-50 p-4 text-sm text-teal-900">Drop-off SPX tanpa pilihan cabang. Shopee tidak meminta branch_id untuk pesanan ini.</div> : <label className="block">
                    <span className="text-xs font-bold uppercase tracking-wide text-slate-500">Cabang dropoff</span>
                    <select
                      className="mt-2 w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-950"
                      value={shipDialog.branchId}
                      onChange={(event) => setShipDialog((state) => (state ? { ...state, branchId: event.target.value } : state))}
                    >
                      {dropoffBranches.map((branch) => (
                        <option key={String(branch.branch_id)} value={String(branch.branch_id)}>
                          {[branch.branch_name, branch.city, branch.district, branch.zipcode].filter(Boolean).join(" / ") || branch.branch_id}
                        </option>
                      ))}
                    </select>
                  </label>
                ) : null}

                {shipDialog.mode === "non_integrated" ? (
                  <div className="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm font-semibold text-amber-800">
                    Kurir non-integrated: Shopee tidak meminta pilihan pickup atau drop-off untuk pesanan ini.
                  </div>
                ) : null}
              </>
            ) : null}
          </div>

          <div className="flex flex-wrap justify-end gap-2 border-t border-slate-200 bg-slate-50 p-4">
            <Button onClick={() => setShipDialog(null)}>Batal</Button>
            <Button variant="primary" loading={shipDialog.submitting} disabled={shipDialog.loading || !dialogPayload || shippingModes.length === 0} onClick={submitShipDialog}>
              Proses Pengiriman
            </Button>
          </div>
        </div>
      </div>
    ) : null}
    </>
  );
}