"use client";

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

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

interface ShipmentInstruction {
  id: string;
  detail_id: string;
  instruction_id: string;
  instruction_no: string;
  instruction_date: string;
  partner_id: string;
  customer_code: string;
  customer_name: string;
  item_code: string;
  item_name: string;
  spec: string;
  material: string;
  plan_qty: number;
  ship_qty: number;
  remain_qty: number;
  order_qty: number;
  source_type: 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_INSTRUCTIONS: ShipmentInstruction[] = [
  {
    id: "dm1", detail_id: "dm1", instruction_id: "ins1",
    instruction_no: "SI-2026-0401-001", instruction_date: "2026-03-30",
    partner_id: "C001", customer_code: "C001", customer_name: "(주)삼성전자",
    item_code: "STS304-2T", item_name: "STS304 2T 판재",
    spec: "2T x 1219 x 2438", material: "STS304",
    plan_qty: 500, ship_qty: 0, remain_qty: 500, order_qty: 500,
    source_type: "shipment_instruction_detail",
    inspection_type: null,
    image: null,
  },
  {
    id: "dm2", detail_id: "dm2", instruction_id: "ins1",
    instruction_no: "SI-2026-0401-001", instruction_date: "2026-03-30",
    partner_id: "C001", customer_code: "C001", customer_name: "(주)삼성전자",
    item_code: "AL-A100", item_name: "알루미늄 프로파일 A100",
    spec: "A100 x 6000L", material: "AL6063",
    plan_qty: 200, ship_qty: 50, remain_qty: 150, order_qty: 200,
    source_type: "shipment_instruction_detail",
    inspection_type: null,
    image: null,
  },
  {
    id: "dm3", detail_id: "dm3", instruction_id: "ins2",
    instruction_no: "SI-2026-0330-005", instruction_date: "2026-03-28",
    partner_id: "C002", customer_code: "C002", customer_name: "(주)LG전자",
    item_code: "BOLT-M10", item_name: "볼트 M10x30",
    spec: "M10x30 SUS", material: "SUS304",
    plan_qty: 1000, ship_qty: 0, remain_qty: 1000, order_qty: 1000,
    source_type: "shipment_instruction_detail",
    inspection_type: null,
    image: null,
  },
];

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

interface SalesOutboundProps {
  /** useCartSync hook instance (created in page.tsx and passed in) */
  cart: import("../common/useCartSync").UseCartSyncReturn;
}

export function SalesOutbound({ cart }: SalesOutboundProps) {
  const router = useRouter();

  /* State */
  const [selectedCustomer, setSelectedCustomer] = useState<Customer | null>(null);
  const [customerModalOpen, setCustomerModalOpen] = useState(false);
  const [instructions, setInstructions] = useState<ShipmentInstruction[]>([]);
  const [loading, setLoading] = useState(false);
  const [keyword, setKeyword] = useState("");

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

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

  /* Inline customer search state */
  const [allCustomers, setAllCustomers] = useState<Customer[]>([]);

  /* Fetch all customers for inline search (customer_mng = 고객사) */
  const fetchAllCustomers = useCallback(async () => {
    try {
      const res = await apiClient.get("/data/customer_mng", { params: { pageSize: 500 } });
      const data = res.data?.data ?? res.data?.rows ?? [];
      const list: Customer[] = (Array.isArray(data) ? data : []).map((r: Record<string, unknown>) => ({
        id: String(r.id ?? ""),
        customer_name: String(r.customer_name ?? r.name ?? ""),
        customer_code: String(r.customer_code ?? r.code ?? ""),
        business_number: String(r.business_number ?? ""),
        phone: String(r.contact_phone ?? r.phone ?? ""),
        address: String(r.address ?? ""),
      }));
      setAllCustomers(list);
    } catch {
      setAllCustomers([]);
    }
  }, []);

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

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

      const res = await apiClient.get("/outbound/source/shipment-instructions", { params });
      const data = res.data?.data;

      if (Array.isArray(data) && data.length > 0) {
        setInstructions(data.map((r: Record<string, unknown>) => ({
          id: String(r.detail_id ?? r.id ?? ""),
          detail_id: String(r.detail_id ?? ""),
          instruction_id: String(r.instruction_id ?? ""),
          instruction_no: String(r.instruction_no ?? ""),
          instruction_date: String(r.instruction_date ?? "").slice(0, 10),
          partner_id: String(r.partner_id ?? ""),
          customer_code: String(r.partner_id ?? ""),
          customer_name: "",  // will be resolved from customer list or instruction
          item_code: String(r.item_code ?? ""),
          item_name: String(r.item_name ?? ""),
          spec: String(r.spec ?? ""),
          material: String(r.material ?? ""),
          plan_qty: Number(r.plan_qty ?? 0),
          ship_qty: Number(r.ship_qty ?? 0),
          remain_qty: Number(r.remain_qty ?? 0),
          order_qty: Number(r.order_qty ?? 0),
          source_type: String(r.source_type ?? "shipment_instruction_detail"),
          inspection_type: r.inspection_type === "self" ? "self"
            : r.inspection_type === "request" ? "request"
            : null,
          image: r.image ? String(r.image) : null,
        })));
      } else {
        setInstructions(DUMMY_INSTRUCTIONS);
      }
    } catch {
      setInstructions(DUMMY_INSTRUCTIONS);
    } finally {
      setLoading(false);
    }
  }, []);

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

  /* Filter instructions by selected customer */
  const filteredInstructions = selectedCustomer
    ? instructions.filter((o) =>
        o.customer_code === selectedCustomer.customer_code ||
        o.partner_id === selectedCustomer.customer_code ||
        o.partner_id === selectedCustomer.customer_name
      )
    : instructions;

  /* Filter by keyword */
  const displayInstructions = keyword
    ? filteredInstructions.filter((o) =>
        o.item_name.toLowerCase().includes(keyword.toLowerCase()) ||
        o.item_code.toLowerCase().includes(keyword.toLowerCase()) ||
        o.instruction_no.toLowerCase().includes(keyword.toLowerCase())
      )
    : filteredInstructions;

  /* Open numpad for an instruction */
  const openNumpad = (instr: ShipmentInstruction) => {
    setNumpadTarget(instr);
    setNumpadOpen(true);
  };

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

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

    cart.addItem(
      {
        row: {
          id: instr.id,
          detail_id: instr.detail_id,
          instruction_id: instr.instruction_id,
          item_code: instr.item_code,
          item_name: instr.item_name,
          customer_code: instr.customer_code || instr.partner_id,
          customer_name: selectedCustomer?.customer_name || instr.customer_name,
          instruction_no: instr.instruction_no,
          instruction_date: instr.instruction_date,
          unit_price: 0,
          spec: instr.spec || "",
          material: instr.material || "",
          plan_qty: instr.plan_qty,
          remain_qty: instr.remain_qty,
          inspection_type: instr.inspection_type,
          source_table: "shipment_instruction_detail",
          source_type: "shipment_instruction_detail",
          source_id: instr.detail_id || instr.id,
          image: instr.image || null,
        },
        quantity: finalQty,
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        packageEntries: packages.length > 0 ? packages as any : undefined,
      },
      instr.id,
    );
    setNumpadTarget(null);
  };

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

  /* Search */
  const handleSearch = () => {
    fetchInstructions(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/outbound")}
            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>
      </div>

      {/* ===== Search area (2 columns on tablet+) ===== */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
        {/* Customer 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>
            {selectedCustomer && (
              <span className="text-[11px] font-medium text-green-600 bg-green-50 px-2 py-0.5 rounded-full">
                {selectedCustomer.customer_name}
              </span>
            )}
          </div>
          <div className="relative flex items-center gap-2">
            <button
              onClick={() => setCustomerModalOpen(true)}
              className={`flex-1 px-3 py-2.5 border rounded-lg text-sm text-left outline-none transition-all ${
                selectedCustomer
                  ? "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"
              }`}
            >
              {selectedCustomer ? selectedCustomer.customer_name : "고객사를 선택하세요"}
            </button>
            {/* QR/Barcode scan button */}
            <button
              onClick={() => setCustomerScanOpen(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, #4ade80, #16a34a)",
                boxShadow: "0 4px 12px rgba(34,197,94,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>
            {selectedCustomer && (
              <button
                onClick={() => setSelectedCustomer(null)}
                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>
            )}
          </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-green-500 px-2 py-0.5 rounded-full min-w-[24px] text-center">
              {selectedCustomer ? displayInstructions.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={!selectedCustomer}
              className={`flex-1 px-3 py-2.5 border border-gray-200 rounded-lg text-sm outline-none transition-all ${
                selectedCustomer
                  ? "focus:border-green-400 focus:ring-2 focus:ring-green-100"
                  : "bg-gray-50 text-gray-400 cursor-not-allowed"
              }`}
            />
            {/* QR/Barcode scan button */}
            <button
              onClick={() => setItemScanOpen(true)}
              disabled={!selectedCustomer}
              className={`min-w-[48px] min-h-[48px] rounded-xl flex items-center justify-center text-white active:scale-95 transition-all shrink-0 ${
                !selectedCustomer ? "opacity-40 cursor-not-allowed" : ""
              }`}
              style={{
                background: "linear-gradient(to bottom, #4ade80, #16a34a)",
                boxShadow: selectedCustomer ? "0 4px 12px rgba(34,197,94,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>

      {/* ===== Instruction 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">
            {selectedCustomer ? `${displayInstructions.length}건` : "-"}
          </span>
        </div>

        {!selectedCustomer ? (
          <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-green-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>
        ) : displayInstructions.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="M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0H6.75m11.25 0h2.625c.621 0 1.125-.504 1.125-1.125v-4.875c0-.621-.504-1.125-1.125-1.125H17.25" />
            </svg>
            <p className="text-sm">
              {selectedCustomer ? "해당 고객사의 미출고 출하지시가 없습니다" : "고객사를 선택하거나 품목을 검색하세요"}
            </p>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
            {displayInstructions.map((instr) => {
              const inCart = isInCart(instr.id);
              const cartItem = getCartItem(instr.id);

              return (
                <div
                  key={instr.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-green-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 === */}
                  <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">{instr.item_code}</span>
                    <span className="text-[13px] font-semibold text-gray-900 flex-1 truncate">{instr.item_name}</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">
                      {instr.image ? (
                        <img src={instr.image} alt={instr.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-[55px] shrink-0">지시일</span>
                        <span className="font-medium text-gray-700">{instr.instruction_date}</span>
                      </div>
                      <div className="flex items-center gap-1.5 text-[11px]">
                        <span className="text-gray-400 min-w-[55px] shrink-0">지시번호</span>
                        <span className="font-medium text-gray-700 truncate">{instr.instruction_no}</span>
                      </div>
                      <div className="flex items-center gap-1.5 text-[11px]">
                        <span className="text-gray-400 min-w-[55px] shrink-0">지시수량</span>
                        <span className="font-medium text-gray-700">{instr.plan_qty.toLocaleString()}</span>
                      </div>
                      <div className="flex items-center gap-1.5 text-[11px]">
                        <span className="text-gray-400 min-w-[55px] shrink-0">미출고</span>
                        <span className="font-bold text-red-500">
                          {inCart
                            ? (instr.remain_qty - (cartItem?.quantity ?? 0)).toLocaleString()
                            : instr.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 */}
                      <button
                        onClick={() => {
                          if (!inCart) openNumpad(instr);
                        }}
                        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-green-50 border-green-200 hover:bg-green-100 cursor-pointer active:scale-95"
                        }`}
                      >
                        <span className={`text-sm font-bold ${inCart ? "text-gray-400" : "text-green-700"}`}
                          style={{ fontVariantNumeric: "tabular-nums" }}
                        >
                          {inCart
                            ? (cartItem?.quantity ?? instr.remain_qty).toLocaleString()
                            : instr.remain_qty.toLocaleString()
                          }
                        </span>
                        <span className="text-[10px] text-gray-400">EA</span>
                      </button>

                      {/* Add / Cancel button */}
                      {inCart ? (
                        <button
                          onClick={() => handleRemoveFromCart(instr.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(instr)}
                          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, #22c55e 0%, #15803d 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) === */}
                  {(() => {
                    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 ===== */}
      <CustomerModal
        open={customerModalOpen}
        onClose={() => setCustomerModalOpen(false)}
        onSelect={(c) => setSelectedCustomer(c)}
      />

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

      {/* Barcode scan modal for customer */}
      <BarcodeScanModal
        open={customerScanOpen}
        onOpenChange={setCustomerScanOpen}
        targetField="고객사"
        autoSubmit
        onScanSuccess={(barcode) => {
          setCustomerScanOpen(false);
          const match = allCustomers.find(
            (c) =>
              c.customer_code === barcode ||
              c.customer_name.includes(barcode)
          );
          if (match) {
            setSelectedCustomer(match);
          }
        }}
      />

      {/* Barcode scan modal for item */}
      <BarcodeScanModal
        open={itemScanOpen}
        onOpenChange={setItemScanOpen}
        targetField="출하지시 품목"
        autoSubmit
        onScanSuccess={(barcode) => {
          setItemScanOpen(false);
          setKeyword(barcode);
          fetchInstructions(barcode);
        }}
      />
    </div>
  );
}