"use client";

import React, { useState, useCallback, useEffect, useMemo, useRef } from "react";
import { useRouter } from "next/navigation";
import { apiClient } from "@/lib/api/client";
import { SupplierModal, type Supplier, matchChosung } from "./SupplierModal";
import { NumberPadModal, type PackageEntry } from "./NumberPadModal";
import { BarcodeScanModal } from "../common/BarcodeScanModal";
import type { CartItemWithId } from "../common/useCartSync";

/* ------------------------------------------------------------------ */
/* Types                                                               */
/* ------------------------------------------------------------------ */

interface PurchaseOrder {
  id: string;
  purchase_no: string;
  order_date: string;
  supplier_code: string;
  supplier_name: string;
  item_code: string;
  item_name: string;
  spec: string;
  material: string;
  order_qty: number;
  received_qty: number;
  remain_qty: number;
  unit_price: number;
  status: string;
  due_date: string;
  source_table: string;
  /** Inspection type: "self" = self inspection required, "request" = inspection request optional, null = none */
  inspection_type: "self" | "request" | null;
  /** Item image URL from item_info.image (may be null) */
  image: string | null;
}

/* ------------------------------------------------------------------ */
/* Dummy data (fallback)                                               */
/* ------------------------------------------------------------------ */

const DUMMY_ORDERS: PurchaseOrder[] = [
  {
    id: "dm1", purchase_no: "PO-2026-0401-001", order_date: "2026-03-28",
    supplier_code: "C001", supplier_name: "(주)한국철강",
    item_code: "STS304-2T", item_name: "STS304 2T 판재",
    spec: "2T x 1219 x 2438", material: "STS304", order_qty: 500, received_qty: 0, remain_qty: 500,
    unit_price: 12000, status: "발주확정", due_date: "2026-04-05", source_table: "purchase_detail",
    inspection_type: "self",
    image: null,
  },
  {
    id: "dm2", purchase_no: "PO-2026-0401-001", order_date: "2026-03-28",
    supplier_code: "C001", supplier_name: "(주)한국철강",
    item_code: "STS316-3T", item_name: "STS316 3T 판재",
    spec: "3T x 1219 x 2438", material: "STS316", order_qty: 200, received_qty: 50, remain_qty: 150,
    unit_price: 18000, status: "부분입고", due_date: "2026-04-05", source_table: "purchase_detail",
    inspection_type: "request",
    image: null,
  },
  {
    id: "dm3", purchase_no: "PO-2026-0330-005", order_date: "2026-03-25",
    supplier_code: "C001", supplier_name: "(주)한국철강",
    item_code: "AL-A100", item_name: "알루미늄 프로파일 A100",
    spec: "A100 x 6000L", material: "AL6063", order_qty: 300, received_qty: 100, remain_qty: 200,
    unit_price: 8500, status: "부분입고", due_date: "2026-04-02", source_table: "purchase_detail",
    inspection_type: null,
    image: null,
  },
  {
    id: "dm4", purchase_no: "PO-2026-0329-003", order_date: "2026-03-22",
    supplier_code: "C002", supplier_name: "(주)대한알루미늄",
    item_code: "BOLT-M10", item_name: "볼트 M10x30",
    spec: "M10x30 SUS", material: "SUS304", order_qty: 1000, received_qty: 0, remain_qty: 1000,
    unit_price: 150, status: "발주확정", due_date: "2026-04-01", source_table: "purchase_detail",
    inspection_type: "self",
    image: null,
  },
  {
    id: "dm5", purchase_no: "PO-2026-0329-003", order_date: "2026-03-22",
    supplier_code: "C002", supplier_name: "(주)대한알루미늄",
    item_code: "NUT-M10", item_name: "너트 M10 SUS",
    spec: "M10", material: "SUS304", order_qty: 1000, received_qty: 0, remain_qty: 1000,
    unit_price: 80, status: "발주확정", due_date: "2026-04-01", source_table: "purchase_detail",
    inspection_type: null,
    image: null,
  },
];

/* ------------------------------------------------------------------ */
/* Component                                                           */
/* ------------------------------------------------------------------ */

interface PurchaseInboundProps {
  /** useCartSync 훅 인스턴스 (page.tsx에서 생성하여 전달) */
  cart: import("../common/useCartSync").UseCartSyncReturn;
}

export function PurchaseInbound({ cart }: PurchaseInboundProps) {
  const router = useRouter();

  /* State */
  const [selectedSupplier, setSelectedSupplier] = useState<Supplier | null>(null);
  const [supplierModalOpen, setSupplierModalOpen] = useState(false);
  const [orders, setOrders] = useState<PurchaseOrder[]>([]);
  const [loading, setLoading] = useState(false);
  const [keyword, setKeyword] = useState("");

  /* NumberPad state */
  const [numpadOpen, setNumpadOpen] = useState(false);
  const [numpadTarget, setNumpadTarget] = useState<PurchaseOrder | null>(null);

  /* Barcode scan modal state */
  const [supplierScanOpen, setSupplierScanOpen] = useState(false);
  const [itemScanOpen, setItemScanOpen] = useState(false);

  /* Inline supplier search state */
  const [supplierSearchText, setSupplierSearchText] = useState("");
  const [supplierDropdownOpen, setSupplierDropdownOpen] = useState(false);
  const [allSuppliers, setAllSuppliers] = useState<Supplier[]>([]);
  const supplierInputRef = useRef<HTMLInputElement>(null);
  const supplierDropdownRef = useRef<HTMLDivElement>(null);

  /* Fetch all suppliers for inline search (supplier_mng = 공급사) */
  const fetchAllSuppliers = useCallback(async () => {
    try {
      const res = await apiClient.get("/data/supplier_mng", { params: { pageSize: 500 } });
      const data = res.data?.data ?? res.data?.rows ?? [];
      const list: Supplier[] = (Array.isArray(data) ? data : []).map((r: Record<string, unknown>) => ({
        id: String(r.id ?? ""),
        customer_name: String(r.supplier_name ?? r.customer_name ?? r.name ?? ""),
        customer_code: String(r.supplier_code ?? r.customer_code ?? r.code ?? ""),
        business_number: String(r.business_number ?? ""),
        phone: String(r.contact_phone ?? r.phone ?? ""),
        address: String(r.address ?? ""),
      }));
      setAllSuppliers(list);
    } catch {
      setAllSuppliers([]);
    }
  }, []);

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

  /* Filtered suppliers for inline dropdown */
  const filteredSuppliers = useMemo(() => {
    if (!supplierSearchText.trim()) return [];
    return allSuppliers.filter((s) => matchChosung(s.customer_name, supplierSearchText.trim()));
  }, [allSuppliers, supplierSearchText]);

  /* Close dropdown on outside click */
  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (
        supplierDropdownRef.current &&
        !supplierDropdownRef.current.contains(e.target as Node) &&
        supplierInputRef.current &&
        !supplierInputRef.current.contains(e.target as Node)
      ) {
        setSupplierDropdownOpen(false);
      }
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  /* Fetch purchase orders */
  const fetchOrders = useCallback(async (searchKeyword?: string) => {
    setLoading(true);
    try {
      const params: Record<string, string> = { pageSize: "50" };
      if (searchKeyword) params.keyword = searchKeyword;

      const res = await apiClient.get("/receiving/source/purchase-orders", { params });
      const data = res.data?.data;

      if (Array.isArray(data) && data.length > 0) {
        setOrders(data.map((r: Record<string, unknown>) => ({
          id: String(r.id ?? ""),
          purchase_no: String(r.purchase_no ?? ""),
          order_date: String(r.order_date ?? "").slice(0, 10),
          supplier_code: String(r.supplier_code ?? ""),
          supplier_name: String(r.supplier_name ?? ""),
          item_code: String(r.item_code ?? ""),
          item_name: String(r.item_name ?? ""),
          spec: String(r.spec ?? ""),
          material: String(r.material ?? ""),
          order_qty: Number(r.order_qty ?? 0),
          received_qty: Number(r.received_qty ?? 0),
          remain_qty: Number(r.remain_qty ?? 0),
          unit_price: Number(r.unit_price ?? 0),
          status: String(r.status ?? ""),
          due_date: String(r.due_date ?? "").slice(0, 10),
          source_table: String(r.source_table ?? "purchase_detail"),
          inspection_type: r.inspection_type === "self" ? "self"
            : r.inspection_type === "request" ? "request"
            : null,
          image: r.image ? String(r.image) : null,
        })));
      } else {
        setOrders(DUMMY_ORDERS);
      }
    } catch {
      setOrders(DUMMY_ORDERS);
    } finally {
      setLoading(false);
    }
  }, []);

  /* Initial load */
  useEffect(() => {
    fetchOrders();
  }, [fetchOrders]);

  /* Filter orders by selected supplier */
  const filteredOrders = selectedSupplier
    ? orders.filter((o) =>
        o.supplier_code === selectedSupplier.customer_code ||
        o.supplier_name === selectedSupplier.customer_name
      )
    : orders;

  /* Filter by keyword */
  const displayOrders = keyword
    ? filteredOrders.filter((o) =>
        o.item_name.toLowerCase().includes(keyword.toLowerCase()) ||
        o.item_code.toLowerCase().includes(keyword.toLowerCase()) ||
        o.purchase_no.toLowerCase().includes(keyword.toLowerCase())
      )
    : filteredOrders;

  /* Open numpad for an order */
  const openNumpad = (order: PurchaseOrder) => {
    setNumpadTarget(order);
    setNumpadOpen(true);
  };

  /* Add to cart with numpad result */
  const handleNumpadConfirm = (qty: number, packages: PackageEntry[]) => {
    if (!numpadTarget) return;
    const order = numpadTarget;
    if (cart.isItemInCart(order.id)) return;

    const finalQty = Math.min(qty, order.remain_qty);

    cart.addItem(
      {
        row: {
          id: order.id,
          item_code: order.item_code,
          item_name: order.item_name,
          supplier_code: order.supplier_code,
          supplier_name: order.supplier_name,
          purchase_no: order.purchase_no,
          unit_price: order.unit_price || 0,
          spec: order.spec || "",
          material: order.material || "",
          order_qty: order.order_qty,
          remain_qty: order.remain_qty,
          order_date: order.order_date || "",
          inspection_type: order.inspection_type,
          source_table: order.source_table,
          image: order.image || null,
        },
        quantity: finalQty,
        // PackageEntry 타입이 registry vs NumberPadModal에서 다르므로 any 캐스팅
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        packageEntries: packages.length > 0 ? packages as any : undefined,
      },
      order.id,
    );
    setNumpadTarget(null);
  };

  /* Remove from cart (cancel) */
  const handleRemoveFromCart = (id: string) => {
    cart.removeItem(id);
  };

  /* Search */
  const handleSearch = () => {
    fetchOrders(keyword || undefined);
  };

  const isInCart = (id: string) => cart.isItemInCart(id);
  const getCartItem = (id: string): CartItemWithId | undefined => cart.getCartItem(id);

  return (
    <div className="flex flex-col gap-4">
      {/* ===== Header ===== */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <button
            onClick={() => router.push("/pop/inbound")}
            className="w-10 h-10 rounded-xl bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-50 active:scale-95 transition-all"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
            </svg>
          </button>
          <div>
            <h1 className="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">구매입고</h1>
            <p className="text-xs text-gray-400 mt-0.5">발주 품목을 선택하여 입고하세요</p>
          </div>
        </div>

        {/* Cart button moved to header via headerRight prop */}
      </div>

      {/* ===== Search area (2 columns on tablet+) ===== */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
        {/* Supplier search card */}
        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
          <div className="flex items-center justify-between mb-1.5">
            <span className="text-xs font-semibold text-gray-500">거래처</span>
            {selectedSupplier && (
              <span className="text-[11px] font-medium text-green-600 bg-green-50 px-2 py-0.5 rounded-full">
                {selectedSupplier.customer_name}
              </span>
            )}
          </div>
          <div className="relative flex items-center gap-2">
            <button
              onClick={() => setSupplierModalOpen(true)}
              className={`flex-1 px-3 py-2.5 border rounded-lg text-sm text-left outline-none transition-all ${
                selectedSupplier
                  ? "bg-green-50/50 border-green-200 text-green-800 font-medium"
                  : "border-gray-200 text-gray-500 hover:border-gray-300 hover:bg-gray-50"
              }`}
            >
              {selectedSupplier ? selectedSupplier.customer_name : "거래처를 선택하세요"}
            </button>
            {/* QR/Barcode scan button - glossy v3 */}
            <button
              onClick={() => setSupplierScanOpen(true)}
              className="min-w-[48px] min-h-[48px] rounded-xl flex items-center justify-center text-white active:scale-95 transition-all shrink-0"
              style={{
                background: "linear-gradient(to bottom, #60a5fa, #2563eb)",
                boxShadow: "0 4px 12px rgba(59,130,246,0.3)",
              }}
            >
              <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 14.625v2.25h2.25m-2.25 2.25h4.5v-4.5" />
              </svg>
            </button>
            {selectedSupplier && (
              <button
                onClick={() => { setSelectedSupplier(null); setSupplierSearchText(""); }}
                className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center text-gray-400 hover:bg-gray-200 transition-colors shrink-0"
              >
                <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            )}

            {/* Supplier dropdown removed — use modal instead */}
          </div>
        </div>

        {/* Item search card */}
        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
          <div className="flex items-center justify-between mb-1.5">
            <span className="text-xs font-semibold text-gray-500">발주 품목</span>
            <span className="text-[11px] font-semibold text-white bg-blue-500 px-2 py-0.5 rounded-full min-w-[24px] text-center">
              {selectedSupplier ? displayOrders.length : 0}
            </span>
          </div>
          <div className="flex items-center gap-2">
            <input
              type="text"
              value={keyword}
              onChange={(e) => setKeyword(e.target.value)}
              onKeyDown={(e) => { if (e.key === "Enter") handleSearch(); }}
              placeholder="품목명, 품목코드, 발주번호 검색..."
              disabled={!selectedSupplier}
              className={`flex-1 px-3 py-2.5 border border-gray-200 rounded-lg text-sm outline-none transition-all ${
                selectedSupplier
                  ? "focus:border-blue-400 focus:ring-2 focus:ring-blue-100"
                  : "bg-gray-50 text-gray-400 cursor-not-allowed"
              }`}
            />
            {/* QR/Barcode scan button - glossy v3 */}
            <button
              onClick={() => setItemScanOpen(true)}
              disabled={!selectedSupplier}
              className={`min-w-[48px] min-h-[48px] rounded-xl flex items-center justify-center text-white active:scale-95 transition-all shrink-0 ${
                !selectedSupplier ? "opacity-40 cursor-not-allowed" : ""
              }`}
              style={{
                background: "linear-gradient(to bottom, #60a5fa, #2563eb)",
                boxShadow: selectedSupplier ? "0 4px 12px rgba(59,130,246,0.3)" : "none",
              }}
            >
              <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 14.625v2.25h2.25m-2.25 2.25h4.5v-4.5" />
              </svg>
            </button>
          </div>
        </div>
      </div>

      {/* ===== Order items ===== */}
      <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
        <div className="flex items-center justify-between mb-2 pb-2 border-b border-gray-50">
          <span className="text-xs font-semibold text-gray-500">
            발주 품목 목록
          </span>
          <span className="text-[11px] text-gray-400">
            {selectedSupplier ? `${displayOrders.length}건` : "-"}
          </span>
        </div>

        {!selectedSupplier ? (
          <div className="flex flex-col items-center justify-center py-16 text-gray-400">
            <svg className="w-16 h-16 mb-4 opacity-20" fill="none" stroke="currentColor" strokeWidth={1} viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
            </svg>
            <p className="text-sm font-medium text-gray-500 mb-1">거래처를 먼저 선택하세요</p>
            <p className="text-xs text-gray-400">거래처를 선택하면 해당 거래처의 발주 품목이 표시됩니다</p>
          </div>
        ) : loading ? (
          <div className="flex items-center justify-center py-12 text-sm text-gray-400">
            <svg className="animate-spin w-5 h-5 mr-2 text-blue-500" fill="none" viewBox="0 0 24 24">
              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
            </svg>
            불러오는 중...
          </div>
        ) : displayOrders.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-12 text-gray-400">
            <svg className="w-12 h-12 mb-3 opacity-30" fill="none" stroke="currentColor" strokeWidth={1} viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
            </svg>
            <p className="text-sm">
              {selectedSupplier ? "해당 거래처의 미입고 발주가 없습니다" : "거래처를 선택하거나 품목을 검색하세요"}
            </p>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
            {displayOrders.map((order) => {
              const inCart = isInCart(order.id);
              const cartItem = getCartItem(order.id);

              return (
                <div
                  key={order.id}
                  className={`relative rounded-xl border p-3 transition-all ${
                    inCart
                      ? "border-green-300 bg-gradient-to-br from-green-50/80 to-emerald-50/50"
                      : "border-gray-200 bg-white hover:border-blue-300"
                  }`}
                >
                  {/* Green left bar for in-cart items */}
                  {inCart && (
                    <div className="absolute top-0 left-0 w-[3px] h-full bg-green-500 rounded-l-xl" />
                  )}

                  {/* === Header row: item code + item name + inspection badge === */}
                  <div className="flex items-center gap-1.5 mb-2.5 pb-2 border-b border-gray-100">
                    <span className="text-[11px] text-gray-400 font-medium shrink-0">{order.item_code}</span>
                    <span className="text-[13px] font-semibold text-gray-900 flex-1 truncate">{order.item_name}</span>
                    {order.inspection_type === "self" && (
                      <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 border border-blue-200 shrink-0 whitespace-nowrap">
                        검사 필수
                      </span>
                    )}
                    {order.inspection_type === "request" && (
                      <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-amber-100 text-amber-700 border border-amber-200 shrink-0 whitespace-nowrap">
                        검사의뢰 선택
                      </span>
                    )}
                  </div>

                  {/* === Body row: image + info + action === */}
                  <div className="flex gap-2.5">
                    {/* Product image */}
                    <div className="w-[56px] h-[56px] min-w-[56px] bg-gray-50 border border-gray-200 rounded-lg flex items-center justify-center shrink-0 overflow-hidden">
                      {order.image ? (
                        <img src={order.image} alt={order.item_name} className="w-full h-full object-cover rounded-lg" />
                      ) : (
                        <span className="text-2xl text-gray-300">{"\uD83D\uDCE6"}</span>
                      )}
                    </div>

                    {/* Info columns */}
                    <div className="flex-1 min-w-0 flex flex-col gap-[3px]">
                      <div className="flex items-center gap-1.5 text-[11px]">
                        <span className="text-gray-400 min-w-[45px] shrink-0">발주일</span>
                        <span className="font-medium text-gray-700">{order.order_date}</span>
                      </div>
                      <div className="flex items-center gap-1.5 text-[11px]">
                        <span className="text-gray-400 min-w-[45px] shrink-0">발주번호</span>
                        <span className="font-medium text-gray-700 truncate">{order.purchase_no}</span>
                      </div>
                      <div className="flex items-center gap-1.5 text-[11px]">
                        <span className="text-gray-400 min-w-[45px] shrink-0">발주수량</span>
                        <span className="font-medium text-gray-700">{order.order_qty.toLocaleString()}</span>
                      </div>
                      <div className="flex items-center gap-1.5 text-[11px]">
                        <span className="text-gray-400 min-w-[45px] shrink-0">미입고</span>
                        <span className="font-bold text-red-500">
                          {inCart
                            ? (order.remain_qty - (cartItem?.quantity ?? 0)).toLocaleString()
                            : order.remain_qty.toLocaleString()
                          }
                        </span>
                      </div>
                    </div>

                    {/* Action column: qty display + add/cancel button */}
                    <div className="flex flex-col gap-1.5 items-stretch min-w-[80px] shrink-0">
                      {/* Qty display - clickable to open numpad */}
                      <button
                        onClick={() => {
                          if (!inCart) openNumpad(order);
                        }}
                        disabled={inCart}
                        className={`flex items-center justify-center gap-1 px-2.5 py-2 rounded-md border transition-all ${
                          inCart
                            ? "bg-gray-50 border-gray-200 cursor-default"
                            : "bg-blue-50 border-blue-200 hover:bg-blue-100 cursor-pointer active:scale-95"
                        }`}
                      >
                        <span className={`text-sm font-bold ${inCart ? "text-gray-400" : "text-blue-700"}`}
                          style={{ fontVariantNumeric: "tabular-nums" }}
                        >
                          {inCart
                            ? (cartItem?.quantity ?? order.remain_qty).toLocaleString()
                            : order.remain_qty.toLocaleString()
                          }
                        </span>
                        <span className="text-[10px] text-gray-400">EA</span>
                      </button>

                      {/* Add / Cancel button */}
                      {inCart ? (
                        <button
                          onClick={() => handleRemoveFromCart(order.id)}
                          className="flex items-center justify-center gap-1 px-2.5 py-2 rounded-md bg-red-500 text-white text-xs font-semibold hover:bg-red-600 active:scale-95 transition-all"
                        >
                          취소
                        </button>
                      ) : (
                        <button
                          onClick={() => openNumpad(order)}
                          className="flex items-center justify-center gap-1 px-2.5 py-2 rounded-md text-white text-xs font-semibold active:scale-95 transition-all"
                          style={{
                            background: "linear-gradient(135deg, #f59e0b 0%, #d97706 100%)",
                          }}
                        >
                          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22" />
                          </svg>
                          담기
                        </button>
                      )}
                    </div>
                  </div>

                  {/* === Package info (shown when in cart with packages) === */}
                  {(() => {
                    // packageEntries의 실제 런타임 타입은 NumberPadModal의 PackageEntry[]
                    const pkgs = (inCart && cartItem?.packageEntries) ? cartItem.packageEntries as unknown as PackageEntry[] : [];
                    return pkgs.length > 0 && (
                      <div className="mt-2.5 px-3 py-2 bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 rounded-lg">
                        <div className="flex items-center justify-between mb-1">
                          <span className="text-[10px] font-bold text-white bg-gradient-to-r from-green-500 to-green-600 px-2 py-0.5 rounded-full">
                            포장완료
                          </span>
                          <span className="text-[11px] font-semibold text-green-600">
                            {pkgs.reduce((s, p) => s + p.count * p.qtyPerUnit, 0).toLocaleString()} EA
                          </span>
                        </div>
                        {pkgs.map((pkg, idx) => (
                          <div key={idx} className="flex items-center gap-1.5 text-[11px] text-gray-600">
                            <span>{pkg.unit.icon}</span>
                            <span>{pkg.count}{pkg.unit.label} x {pkg.qtyPerUnit.toLocaleString()}EA = {(pkg.count * pkg.qtyPerUnit).toLocaleString()}EA</span>
                          </div>
                        ))}
                      </div>
                    );
                  })()}
                </div>
              );
            })}
          </div>
        )}
      </div>

      {/* ===== Modals ===== */}
      <SupplierModal
        open={supplierModalOpen}
        onClose={() => setSupplierModalOpen(false)}
        onSelect={(s) => setSelectedSupplier(s)}
      />

      <NumberPadModal
        open={numpadOpen}
        onClose={() => { setNumpadOpen(false); setNumpadTarget(null); }}
        onConfirm={handleNumpadConfirm}
        maxQty={numpadTarget?.remain_qty ?? 0}
        itemName={numpadTarget?.item_name ?? ""}
      />

      {/* Barcode scan modal for supplier */}
      <BarcodeScanModal
        open={supplierScanOpen}
        onOpenChange={setSupplierScanOpen}
        targetField="거래처"
        autoSubmit
        onScanSuccess={(barcode) => {
          setSupplierScanOpen(false);
          // 스캔 결과로 거래처 검색 (거래처명 또는 코드 매칭)
          const match = allSuppliers.find(
            (s) =>
              s.customer_code === barcode ||
              s.customer_name.includes(barcode)
          );
          if (match) {
            setSelectedSupplier(match);
            setSupplierSearchText("");
          } else {
            // 매칭 안 되면 검색 텍스트에 넣어서 드롭다운 표시
            setSupplierSearchText(barcode);
            setSupplierDropdownOpen(true);
          }
        }}
      />

      {/* Barcode scan modal for item */}
      <BarcodeScanModal
        open={itemScanOpen}
        onOpenChange={setItemScanOpen}
        targetField="발주 품목"
        autoSubmit
        onScanSuccess={(barcode) => {
          setItemScanOpen(false);
          // 스캔 결과로 품목 필터
          setKeyword(barcode);
          fetchOrders(barcode);
        }}
      />
    </div>
  );
}
