"use client";

import { useEffect, useState } from "react";
import Button from "@/components/ui/Button";
import Badge from "@/components/ui/Badge";
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;
const LOGISTICS_STARTED_STATUSES = ["LOGISTICS_READY", "LOGISTICS_REQUEST_CREATED", "LOGISTICS_PICKUP_RETRY"];

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

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) {
  if (!value) return "-";
  const deadline = new Date(value);
  const diff = deadline.getTime() - Date.now();
  const suffix = diff < 0 ? `lewat ${durationText(diff)}` : `sisa ${durationText(diff)}`;
  return `${formatDate(value)} (${suffix})`;
}

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

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

function isMaskedText(value: string | null | undefined) {
  if (!value) return false;
  return /^[*\s/.-]+$/.test(value.trim());
}

function recipientValue(value: string | null | undefined) {
  if (!value) return "-";
  return isMaskedText(value) ? "Disamarkan Shopee" : 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 hasShopeePrintSignal(order: Order | null) {
  return Boolean(order?.trackingNumber && order.trackingNumber !== order.packageNumber);
}

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

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

function canPrintShopeeDocument(order: Order | null) {
  return Boolean(
    order &&
      !["CANCELLED", "IN_CANCEL", "UNPAID", "PENDING"].includes(order.orderStatus || "") &&
      (["PROCESSED", "SHIPPED", "TO_CONFIRM_RECEIVE", "COMPLETED"].includes(order.orderStatus || "")
        || hasShopeePrintSignal(order)
        || Boolean(order.shipmentMethod || order.shippingDocumentPrintedAt))
  );
}

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

function operationalStatusMeta(order: Order | null) {
  if (!order) return statusMeta(null);
  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 escapeHtml(value: string) {
  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
}

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 = data && typeof data === "object" ? (data as Record<string, unknown>) : {};
  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>;
}

export default function OrderDetailDrawer({
  open,
  orderSn,
  shopId,
  onClose,
  onToast,
  onRefresh,
}: {
  open: boolean;
  orderSn: string | null;
  shopId: string | null;
  onClose: () => void;
  onToast: (t: Toast) => void;
  onRefresh: () => void;
}) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [order, setOrder] = useState<Order | null>(null);
  const [items, setItems] = useState<OrderItem[]>([]);
  const [actionLoading, setActionLoading] = useState<"ship" | "print" | "pickup-ready" | null>(null);
  const [shipDialog, setShipDialog] = useState<ShipDialogState | null>(null);
  const [refreshKey, setRefreshKey] = useState(0);

  useEffect(() => {
    if (!open || !orderSn) return;
    let cancelled = false;

    (async () => {
      setLoading(true);
      setError(null);
      setOrder(null);
      setItems([]);
      try {
        const url = new URL(`/api/shopee/orders/${encodeURIComponent(orderSn)}`, window.location.origin);
        if (shopId) url.searchParams.set("shop_id", shopId);
        url.searchParams.set("refresh", "1");
        const res = await fetch(url.toString());
        const json = (await res.json()) as { ok: boolean; error?: string; data?: { order: Order; items: OrderItem[] } };
        if (!res.ok || !json.ok || !json.data) throw new Error(json.error || "Gagal mengambil detail order.");
        if (cancelled) return;
        setOrder(json.data.order);
        setItems(json.data.items);
      } catch (err) {
        if (cancelled) return;
        setError(err instanceof Error ? err.message : "Gagal mengambil detail order.");
      } finally {
        if (!cancelled) setLoading(false);
      }
    })();

    return () => {
      cancelled = true;
    };
  }, [open, orderSn, shopId, refreshKey]);

  if (!open || !orderSn) return null;

  const status = operationalStatusMeta(order);
  const canShip = canProcessShipment(order);
  const canPrint = canPrintShopeeDocument(order);
  const canReadyForPickup = canMarkPickupReady(order);

  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() {
    if (!order) return;
    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 (err) {
      const message = err instanceof Error ? err.message : "Gagal mengambil pilihan pickup/dropoff dari Shopee.";
      setShipDialog(null);
      onToast({ tone: "danger", message });
    }
  }

  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 };
      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 (err) {
      const message = err instanceof Error ? err.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));
    }
  }

  function printInternal() {
    if (!order) return;
    const item = items[0] || null;
    const popup = window.open("", "_blank", "width=820,height=700");
    if (!popup) {
      onToast({ tone: "danger", message: "Popup print diblokir browser." });
      return;
    }

    popup.document.write(`<!doctype html><html><head><title>Label ${escapeHtml(order.orderSn)}</title><style>
      body{font-family:Arial,sans-serif;background:#f1f5f9;color:#0f172a;margin:0;padding:24px}
      .label{max-width:760px;margin:0 auto;background:#fff;border:1px solid #cbd5e1;border-radius:16px;padding:22px}
      h1{margin:0;color:#0f766e}.top{display:flex;justify-content:space-between;border-bottom:3px solid #0f766e;padding-bottom:14px}
      .box{border:1px solid #e2e8f0;border-radius:12px;padding:12px;margin-top:10px}.k{display:block;color:#64748b;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}b{overflow-wrap:anywhere}p{margin:4px 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><b>${escapeHtml(status.label)}</b></div>
      <div class="box"><span class="k">Order SN</span><b>${escapeHtml(order.orderSn)}</b></div>
      <div class="box"><span class="k">Penerima</span><b>${escapeHtml(recipientValue(order.recipientName))}</b><p>${escapeHtml(recipientValue(order.recipientPhone))}</p><p>${escapeHtml(recipientValue(order.recipientFullAddr))}</p></div>
      <div class="box"><span class="k">Logistik</span><b>${escapeHtml(displayCarrier(order.shippingCarrier))}</b><p>${escapeHtml(safe(order.trackingNumber || order.packageNumber))}</p></div>
      <div class="box"><span class="k">Produk</span><b>${escapeHtml(safe(item?.itemName))}</b><p>${escapeHtml(safe(item?.modelName))}</p></div>
      <div class="box"><span class="k">Total</span><b>${escapeHtml(formatMoney(order.totalAmount, order.currency))}</b></div>
    </section></body></html>`);
    popup.document.close();
    popup.focus();
    window.setTimeout(() => popup.print(), 300);
  }

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

  async function printShopeeDocument() {
    if (!order) return;
    if (!canPrint) {
      onToast({ tone: "info", message: "Resi belum tersedia. Proses pesanan dulu." });
      return;
    }
    setActionLoading("print");
    try {
      const createRes = await fetch("/api/shopee/orders/shipping-document/create", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ shopId: order.shopId, orders: [{ orderSn: order.orderSn }] }),
      });
      const createJson = await readJsonResponse<{ ok: boolean; error?: string; data?: unknown }>(
        createRes,
        "Sesi login/API tidak valid saat membuat dokumen Shopee. Refresh halaman atau login ulang."
      );
      const createData = createJson.data && typeof createJson.data === "object" ? (createJson.data as { shippingDocumentType?: string }) : {};
      const documentType = createData.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 pengiriman.");

      const downloadReadyDocument = async () => {
        const downloadRes = await fetch("/api/shopee/orders/shipping-document/download", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ shopId: order.shopId, orders: [{ 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, 5).forEach((url) => window.open(url, "_blank", "noopener,noreferrer"));
        else if (!openBase64Document(downloadJson.data)) return false;
        onToast({ tone: "success", message: "Resi Shopee siap." });
        setRefreshKey((value) => value + 1);
        onRefresh();
        return true;
      };

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

      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: order.shopId, orders: [{ 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) {
          onToast({ tone: "success", message: "Dokumen Shopee siap." });
          urls.slice(0, 5).forEach((url) => window.open(url, "_blank", "noopener,noreferrer"));
          setRefreshKey((value) => value + 1);
          onRefresh();
          return;
        }
        if (hasReadyShippingDocument(json.data)) {
          if (await downloadReadyDocument()) return;
        }
      }

      onToast({ tone: "info", message: "Dokumen belum ready. Coba lagi setelah beberapa saat." });
    } catch (err) {
      onToast({ tone: "danger", message: err instanceof Error ? err.message : "Gagal cetak dokumen Shopee." });
    } finally {
      setActionLoading(null);
    }
  }

  async function markPickupReady() {
    if (!order || !canReadyForPickup) return;
    setActionLoading("pickup-ready");
    try {
      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: true }),
      });
      const json = (await response.json()) as { ok?: boolean; error?: string };
      if (!response.ok || !json.ok) throw new Error(json.error || "Gagal memindahkan pesanan ke Menunggu Pick-Up.");
      onToast({ tone: "success", message: "Pesanan dipindahkan ke Menunggu Pick-Up." });
      setRefreshKey((value) => value + 1);
      onRefresh();
    } catch (err) {
      onToast({ tone: "danger", message: err instanceof Error ? err.message : "Gagal memperbarui antrean pick-up." });
    } finally {
      setActionLoading(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 (
    <div className="fixed inset-0 z-[60]">
      <button className="absolute inset-0 bg-slate-950/35" aria-label="Close" onClick={onClose} />
      <aside className="absolute right-0 top-0 h-full w-full max-w-[560px] overflow-auto border-l border-slate-200 bg-white p-5 shadow-2xl">
        <div className="flex items-start justify-between gap-3">
          <div>
            <div className="muted-label">Detail Pesanan</div>
            <div className="mt-1 font-mono text-sm font-bold text-slate-950">{orderSn}</div>
          </div>
          <button className="text-sm font-semibold text-slate-500 hover:text-slate-950" onClick={onClose}>
            Tutup
          </button>
        </div>

        <div className="mt-4">
          {loading ? (
            <div className="rounded-xl border border-slate-200 bg-slate-50 p-4 text-sm text-slate-600">Memuat detail...</div>
          ) : error ? (
            <div className="rounded-xl border border-rose-200 bg-rose-50 p-4 text-sm text-rose-700">{error}</div>
          ) : order ? (
            <div className="space-y-4">
              <div className="flex flex-wrap items-center gap-2">
                <Badge tone={status.tone}>{status.label}</Badge>
                <Badge tone="success">Shopee API</Badge>
                <Badge tone="neutral">{order.shopId}</Badge>
              </div>

              <div className="grid gap-3 rounded-xl border border-slate-200 bg-slate-50 p-4 text-sm">
                {[
                  ["Nilai order bruto", formatMoney(order.totalAmount, order.currency)],
                  ["Estimasi dana Shopee", order.estimatedShopeeIncome === null ? "Menunggu API dana" : formatMoney(order.estimatedShopeeIncome, order.currency)],
                  ["HPP Final + packing", order.estimatedHpp === null ? "HPP Final belum diisi" : formatMoney(order.estimatedHpp, order.currency)],
                  ["Estimasi Profit", order.estimatedProfit === null ? "Belum akurat" : formatMoney(order.estimatedProfit, order.currency)],
                  ["Batas Shopee (risiko batal)", ["READY_TO_SHIP", "PROCESSED"].includes(order.orderStatus || "") ? formatShopeeDeadline(order.shipByDate) : "Tidak berlaku setelah pengiriman diproses"],
                  ["Logistik", displayCarrier(order.shippingCarrier)],
                  ["Metode pengiriman", shippingMethodLabel(order)],
                  ["Jadwal pickup", order.pickupScheduledAt ? formatDate(order.pickupScheduledAt) : "-"],
                  ["Tracking / Paket", order.trackingNumber || order.packageNumber || "-"],
                  ["Buyer", order.buyerUsername || "-"],
                  ["Pesan Pembeli", order.messageToSeller || "-"],
                ].map(([label, value]) => (
                  <div key={label} className="flex justify-between gap-3">
                    <span className="text-slate-500">{label}</span>
                    <span className="text-right font-semibold text-slate-950">{value}</span>
                  </div>
                ))}
              </div>

              <div className="rounded-xl border border-slate-200 bg-white p-4">
                <div className="muted-label">Produk</div>
                <div className="mt-2 space-y-2">
                  {items.length === 0 ? (
                    <div className="text-sm text-slate-500">Tidak ada item tersimpan.</div>
                  ) : (
                    items.map((item) => (
                      <div key={`${item.itemId}-${item.modelId}-${item.itemName}`} className="flex gap-3 rounded-lg border border-slate-200 bg-slate-50 p-3 text-sm">
                        {item.imageUrl ? (
                          // eslint-disable-next-line @next/next/no-img-element
                          <img className="h-14 w-14 shrink-0 rounded-lg border border-slate-200 object-cover" src={item.imageUrl} alt="" />
                        ) : (
                          <div className="h-14 w-14 shrink-0 rounded-lg border border-slate-200 bg-white" />
                        )}
                        <div className="min-w-0">
                          <div className="line-clamp-2 font-semibold text-slate-950">{item.itemName || "-"}</div>
                          <div className="text-xs text-slate-500">{item.modelName || ""}</div>
                          <div className="mt-1 text-xs text-slate-500">
                            {order?.orderStatus === "COMPLETED" ? (
                              <>
                                Dipesan <b className="text-slate-950">{item.quantity ?? 1}</b> · Terealisasi <b className="text-emerald-700">{item.activeQuantity}</b>
                                {item.returnedQuantity > 0 ? <> · Refund <b className="text-amber-700">{item.returnedQuantity}</b></> : null}
                                {item.returnRequestedQuantity > 0 ? <> · Pengajuan retur <b className="text-amber-700">{item.returnRequestedQuantity}</b></> : null}
                              </>
                            ) : (
                              <>Qty: <b className="text-slate-950">{item.quantity ?? 1}</b></>
                            )}
                            {" "}- SKU: {item.modelSku || item.itemSku || "-"}
                          </div>
                        </div>
                      </div>
                    ))
                  )}
                </div>
              </div>

              <div className="flex flex-wrap gap-2">
                <Button
                  variant="primary"
                  disabled={!canShip}
                  loading={false}
                  onClick={openShipDialog}
                  title={!canShip ? "Pesanan belum bisa diproses pengiriman atau sudah masuk tahap cetak/pickup." : undefined}
                >
                  Atur Pengiriman
                </Button>
                <Button onClick={printInternal}>Label Internal</Button>
                <Button disabled={!canPrint} loading={actionLoading === "print"} onClick={printShopeeDocument} title={!canPrint ? "Resi belum tersedia." : undefined}>
                  Dokumen Shopee
                </Button>
                <Button disabled={!canReadyForPickup} loading={actionLoading === "pickup-ready"} onClick={markPickupReady} title={!canReadyForPickup ? "Cetak resi dulu. Pesanan tidak berpindah otomatis ke antrean pick-up." : undefined}>
                  Tandai Siap Pick-Up
                </Button>
                <Button loading={loading} onClick={() => setRefreshKey((value) => value + 1)}>Perbarui Detail</Button>
              </div>
            </div>
          ) : null}
        </div>
      </aside>

      {shipDialog ? (
        <div className="fixed inset-0 z-[80] 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}
    </div>
  );
}