"use client";

import React, { useState, useEffect, useCallback } from "react";
import { useRouter } from "next/navigation";
import { apiClient } from "@/lib/api/client";
import { PopShell } from "../PopShell";
import { BarcodeScanModal } from "../common/BarcodeScanModal";

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

interface Warehouse {
  id: string;
  warehouse_code: string;
  warehouse_name: string;
  warehouse_type?: string;
}

interface StockItem {
  id: string;
  item_code: string;
  item_name?: string;
  warehouse_code: string;
  warehouse_name?: string;
  location_code?: string;
  location_name?: string;
  floor?: string;
  current_qty: string;
  unit?: string;
  spec?: string;
}

interface WarehouseLocation {
  id: string;
  location_code: string;
  location_name: string;
  floor?: string;
  zone?: string;
  row_num?: string;
  level_num?: string;
  warehouse_code: string;
  warehouse_name?: string;
}

type AdjustReason = "실사차이" | "파손/훼손" | "유효기간" | "반품처리" | "위치불일치" | "기타";

interface ProcessedItem {
  stock: StockItem;
  type: "confirm" | "adjust";
  actualQty?: number;
  reason?: AdjustReason;
  newWarehouse?: string;
  newLocation?: string;
  memo?: string;
}

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

export function InventoryTransfer() {
  const router = useRouter();
  const [warehouses, setWarehouses] = useState<Warehouse[]>([]);
  const [selectedWarehouse, setSelectedWarehouse] = useState("all");
  const [stockItems, setStockItems] = useState<StockItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchKeyword, setSearchKeyword] = useState("");
  const [processedItems, setProcessedItems] = useState<ProcessedItem[]>([]);

  // 토스트 메시지
  const [toastMsg, setToastMsg] = useState<{ text: string; type: "success" | "error" } | null>(null);
  const showToast = (text: string, type: "success" | "error" = "success") => {
    setToastMsg({ text, type });
    setTimeout(() => setToastMsg(null), 2500);
  };

  // 임시저장 cart_items ID 추적 (X버튼 개별 취소용)
  const [savedCartIds, setSavedCartIds] = useState<Record<string, string>>({});

  // 모달 상태
  const [checkModal, setCheckModal] = useState<StockItem | null>(null);
  const [adjustModal, setAdjustModal] = useState<StockItem | null>(null);
  const [adjustQty, setAdjustQty] = useState("");
  const [numpadOpen, setNumpadOpen] = useState(false);
  const [numpadValue, setNumpadValue] = useState("");
  const [adjustReason, setAdjustReason] = useState<AdjustReason | "">("");
  const [adjustMemo, setAdjustMemo] = useState("");
  const [adjustNewWh, setAdjustNewWh] = useState("");
  const [adjustNewLoc, setAdjustNewLoc] = useState("");

  // 위치불일치 UI 상태
  const [showBarcodeScan, setShowBarcodeScan] = useState(false);
  const [showWhSelectModal, setShowWhSelectModal] = useState(false);
  const [showLocSelectModal, setShowLocSelectModal] = useState(false);
  const [locSelectWhCode, setLocSelectWhCode] = useState("");
  const [locSelectWhName, setLocSelectWhName] = useState("");
  const [locationList, setLocationList] = useState<WarehouseLocation[]>([]);
  const [locationLoading, setLocationLoading] = useState(false);
  const [selectedLocationDisplay, setSelectedLocationDisplay] = useState("");

  const fetchWarehouses = useCallback(async () => {
    try {
      const res = await apiClient.get("/outbound/warehouses");
      setWarehouses(res.data?.data || []);
    } catch { /* */ }
  }, []);

  const fetchStock = useCallback(async () => {
    setLoading(true);
    try {
      const params: Record<string, string> = {};
      if (selectedWarehouse !== "all") {
        params.warehouse_code = selectedWarehouse;
      }
      const res = await apiClient.get("/pop/inventory/stock-detail", { params });
      const data = res.data?.data ?? [];
      setStockItems(Array.isArray(data) ? data : []);
    } catch {
      setStockItems([]);
    } finally {
      setLoading(false);
    }
  }, [selectedWarehouse]);

  // 특정 창고의 위치 목록 조회
  const fetchLocations = useCallback(async (warehouseCode: string) => {
    setLocationLoading(true);
    try {
      const res = await apiClient.get("/pop/inventory/locations", {
        params: { warehouse_code: warehouseCode },
      });
      setLocationList(res.data?.data || []);
    } catch {
      setLocationList([]);
    } finally {
      setLocationLoading(false);
    }
  }, []);

  // QR 스캔 결과로 위치 조회
  const handleLocationQrScan = useCallback(async (code: string) => {
    try {
      const res = await apiClient.get("/pop/inventory/location-lookup", {
        params: { code },
      });
      if (res.data?.success && res.data.data) {
        const loc = res.data.data as WarehouseLocation;
        setAdjustNewWh(loc.warehouse_code);
        setAdjustNewLoc(loc.location_code);
        setSelectedLocationDisplay(
          `${loc.warehouse_name || loc.warehouse_code} · ${loc.location_name || loc.location_code}`
        );
      } else {
        showToast("해당 위치코드를 찾을 수 없습니다", "error");
      }
    } catch {
      showToast("위치 조회 실패", "error");
    }
    setShowBarcodeScan(false);
  }, []);

  // 창고 선택 → 위치 목록 모달
  const handleWhSelect = useCallback((wh: Warehouse) => {
    setLocSelectWhCode(wh.warehouse_code);
    setLocSelectWhName(wh.warehouse_name);
    setShowWhSelectModal(false);
    fetchLocations(wh.warehouse_code);
    setShowLocSelectModal(true);
  }, [fetchLocations]);

  // 위치 선택 완료
  const handleLocSelect = useCallback((loc: WarehouseLocation) => {
    setAdjustNewWh(loc.warehouse_code);
    setAdjustNewLoc(loc.location_code);
    setSelectedLocationDisplay(
      `${loc.warehouse_name || loc.warehouse_code} · ${loc.location_name || loc.location_code}`
    );
    setShowLocSelectModal(false);
  }, []);

  // 위치 없이 창고만 선택 (위치 데이터가 없는 경우)
  const handleWhOnlySelect = useCallback(() => {
    setAdjustNewWh(locSelectWhCode);
    setAdjustNewLoc("");
    setSelectedLocationDisplay(locSelectWhName || locSelectWhCode);
    setShowLocSelectModal(false);
  }, [locSelectWhCode, locSelectWhName]);

  useEffect(() => { fetchWarehouses(); }, [fetchWarehouses]);
  useEffect(() => { fetchStock(); }, [fetchStock]);

  // 임시저장 (cart_items 테이블 활용)
  const TEMP_KEY = "inventory-adjust";
  const handleTempSave = async () => {
    if (processedItems.length === 0) return;
    try {
      // 1. 기존 saved 건 → cancelled
      await apiClient.post("/pop/inventory/temp-status", {
        cart_type: TEMP_KEY,
        from_status: "saved",
        to_status: "cancelled",
      });
      // 2. 새 데이터 저장 (tasks 구조 + id + row_data + status)
      const newIds: Record<string, string> = {};
      const toCreate = processedItems.map((p) => {
        const id = crypto.randomUUID();
        newIds[p.stock.id] = id;
        return {
          id,
          cart_type: TEMP_KEY,
          status: "saved",
          row_data: JSON.stringify({
            stock_id: p.stock.id,
            item_code: p.stock.item_code,
            item_name: p.stock.item_name,
            warehouse_code: p.stock.warehouse_code,
            warehouse_name: p.stock.warehouse_name,
            location_code: p.stock.location_code,
            current_qty: p.stock.current_qty,
            unit: p.stock.unit,
            spec: p.stock.spec,
            type: p.type,
            actualQty: p.actualQty,
            reason: p.reason,
            newWarehouse: p.newWarehouse,
            newLocation: p.newLocation,
            memo: p.memo,
          }),
        };
      });
      await apiClient.post("/pop/execute-action", {
        tasks: [{ id: "cart-save-1", type: "cart-save" }],
        data: {},
        cartChanges: { toCreate },
      });
      setSavedCartIds(newIds);
      showToast(`${processedItems.length}건 임시저장 완료`);
    } catch {
      showToast("임시저장 실패", "error");
    }
  };

  // 임시저장 불러오기 (status='saved'인 건만)
  const loadTempSave = useCallback(async () => {
    try {
      const res = await apiClient.get("/pop/inventory/temp-load", {
        params: { cart_type: TEMP_KEY },
      });
      const rows = res.data?.data || [];
      if (rows.length === 0) return;
      const loaded: ProcessedItem[] = [];
      const idMap: Record<string, string> = {};
      for (const row of rows) {
        try {
          const d = typeof row.row_data === "string" ? JSON.parse(row.row_data) : row.row_data;
          loaded.push({
            stock: {
              id: d.stock_id,
              item_code: d.item_code,
              item_name: d.item_name,
              warehouse_code: d.warehouse_code,
              warehouse_name: d.warehouse_name,
              location_code: d.location_code,
              current_qty: d.current_qty,
              unit: d.unit,
              spec: d.spec,
            },
            type: d.type,
            actualQty: d.actualQty,
            reason: d.reason,
            newWarehouse: d.newWarehouse,
            newLocation: d.newLocation,
            memo: d.memo,
          });
          idMap[d.stock_id] = row.id;
        } catch { /* skip */ }
      }
      if (loaded.length > 0) {
        setProcessedItems(loaded);
        setSavedCartIds(idMap);
      }
    } catch { /* no temp data */ }
  }, []);

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

  const filtered = stockItems.filter((item) => {
    if (!searchKeyword) return true;
    const kw = searchKeyword.toLowerCase();
    return (item.item_code || "").toLowerCase().includes(kw) || (item.item_name || "").toLowerCase().includes(kw);
  });

  // 품목 클릭 → 재고 확인 모달
  const handleItemClick = (stock: StockItem) => {
    if (processedItems.find((p) => p.stock.id === stock.id)) return;
    setCheckModal(stock);
  };

  // 확인(이상없음)
  const handleConfirmOk = () => {
    if (!checkModal) return;
    setProcessedItems((prev) => [...prev, { stock: checkModal, type: "confirm" }]);
    setCheckModal(null);
  };

  // 조정 필요 → 조정 모달 열기
  const handleNeedAdjust = () => {
    if (!checkModal) return;
    setAdjustModal(checkModal);
    setAdjustQty(checkModal.current_qty || "0");
    setAdjustReason("");
    setAdjustMemo("");
    setAdjustNewWh("");
    setAdjustNewLoc("");
    setSelectedLocationDisplay("");
    setCheckModal(null);
  };

  // 조정 등록
  const handleAdjustSubmit = () => {
    if (!adjustModal || !adjustReason) {
      showToast("조정 사유를 선택해주세요.", "error");
      return;
    }
    setProcessedItems((prev) => [
      ...prev,
      {
        stock: adjustModal,
        type: "adjust",
        actualQty: parseFloat(adjustQty) || 0,
        reason: adjustReason as AdjustReason,
        newWarehouse: adjustNewWh || undefined,
        newLocation: adjustNewLoc || undefined,
        memo: adjustMemo || undefined,
      },
    ]);
    setAdjustModal(null);
  };

  const removeProcessed = async (stockId: string) => {
    // cart_items에 저장된 건이면 status='cancelled'로 변경
    const cartId = savedCartIds[stockId];
    if (cartId) {
      try {
        await apiClient.post("/pop/inventory/temp-status", {
          cart_type: TEMP_KEY,
          to_status: "cancelled",
          ids: [cartId],
        });
      } catch { /* 실패해도 UI에서는 제거 */ }
      setSavedCartIds((prev) => {
        const next = { ...prev };
        delete next[stockId];
        return next;
      });
    }
    setProcessedItems((prev) => prev.filter((p) => p.stock.id !== stockId));
  };

  const confirmCount = processedItems.filter((p) => p.type === "confirm").length;
  const adjustCount = processedItems.filter((p) => p.type === "adjust").length;
  const [submitting, setSubmitting] = useState(false);

  // 초기화 (전체 saved → cancelled)
  const handleReset = async () => {
    // cart_items에 saved 건이 있으면 전부 cancelled
    if (Object.keys(savedCartIds).length > 0) {
      try {
        await apiClient.post("/pop/inventory/temp-status", {
          cart_type: TEMP_KEY,
          from_status: "saved",
          to_status: "cancelled",
        });
      } catch { /* 실패해도 UI는 초기화 */ }
    }
    setProcessedItems([]);
    setSavedCartIds({});
  };

  // 일괄 확정
  const handleBatchConfirm = async () => {
    if (processedItems.length === 0) return;
    setSubmitting(true);
    try {
      const res = await apiClient.post("/pop/inventory/adjust-batch", {
        items: processedItems.map((p) => ({
          stock_id: p.stock.id,
          item_code: p.stock.item_code,
          warehouse_code: p.stock.warehouse_code,
          location_code: p.stock.location_code || "",
          system_qty: parseFloat(p.stock.current_qty || "0"),
          type: p.type,
          actual_qty: p.actualQty,
          reason: p.reason,
          new_warehouse: p.newWarehouse,
          new_location: p.newLocation,
          memo: p.memo,
        })),
      });
      if (res.data?.success) {
        // 확정 성공 → cart_items status='confirmed'
        if (Object.keys(savedCartIds).length > 0) {
          try {
            await apiClient.post("/pop/inventory/temp-status", {
              cart_type: TEMP_KEY,
              from_status: "saved",
              to_status: "confirmed",
            });
          } catch { /* 상태 변경 실패해도 확정은 완료 */ }
        }
        showToast(res.data.message || "처리 완료");
        setProcessedItems([]);
        setSavedCartIds({});
        fetchStock();
      } else {
        showToast(res.data?.message || "처리 실패", "error");
      }
    } catch (err: unknown) {
      const e = err as { response?: { data?: { message?: string } }; message?: string };
      showToast(e?.response?.data?.message || e?.message || "오류 발생", "error");
    } finally {
      setSubmitting(false);
    }
  };

  const REASONS: AdjustReason[] = ["실사차이", "파손/훼손", "유효기간", "반품처리", "위치불일치", "기타"];

  const historyButton = (
    <button onClick={() => router.push("/pop/inventory/adjust-history")} className="px-4 py-2 rounded-xl bg-white/10 text-white text-sm font-bold active:bg-white/20">
      이력조회
    </button>
  );

  return (
    <PopShell title="재고조정" showBanner={false} fullBleed showBack headerRight={historyButton}>
      <div className="flex overflow-hidden" style={{ height: "calc(100dvh - 56px)" }}>
          {/* ===== 왼쪽: 제품 선택 ===== */}
          <div className="w-[55%] flex flex-col bg-white border-r-2 border-gray-200">
            {/* 창고 탭 + 검색 */}
            <div className="px-3 py-2 border-b border-gray-100 bg-amber-50">
              <div className="flex gap-1.5 overflow-x-auto pb-1.5">
                <button
                  onClick={() => setSelectedWarehouse("all")}
                  className={`px-5 py-3 rounded-xl text-base font-bold whitespace-nowrap transition-all active:scale-[0.97] ${
                    selectedWarehouse === "all"
                      ? "bg-amber-500 text-white shadow-md"
                      : "bg-white text-gray-600 border border-gray-200"
                  }`}
                >
                  전체
                </button>
                {warehouses.map((wh) => (
                  <button
                    key={wh.warehouse_code}
                    onClick={() => setSelectedWarehouse(wh.warehouse_code)}
                    className={`px-5 py-3 rounded-xl text-base font-bold whitespace-nowrap transition-all active:scale-[0.97] ${
                      selectedWarehouse === wh.warehouse_code
                        ? "bg-amber-500 text-white shadow-md"
                        : "bg-white text-gray-600 border border-gray-200"
                    }`}
                  >
                    {wh.warehouse_name}
                  </button>
                ))}
              </div>
              <div className="flex gap-2">
                <input
                  type="text"
                  placeholder="품목명 / 코드 검색"
                  value={searchKeyword}
                  onChange={(e) => setSearchKeyword(e.target.value)}
                  className="flex-1 px-4 py-3.5 rounded-xl border border-gray-200 text-lg focus:outline-none focus:border-amber-400 bg-white"
                />
                <button className="px-5 py-3.5 rounded-xl bg-amber-500 text-white text-lg font-bold active:bg-amber-600">
                  검색
                </button>
              </div>
            </div>

            {/* 품목 리스트 */}
            <div className="flex-1 overflow-y-auto">
              {loading ? (
                <div className="flex justify-center py-16">
                  <div className="w-10 h-10 border-4 border-amber-500 border-t-transparent rounded-full animate-spin" />
                </div>
              ) : filtered.length === 0 ? (
                <div className="flex flex-col items-center justify-center py-16 text-gray-400">
                  <span className="text-5xl mb-3">📦</span>
                  <p className="text-lg font-semibold">재고 데이터가 없습니다</p>
                </div>
              ) : (
                <div className="divide-y divide-gray-100">
                  {filtered.map((item) => {
                    const isProcessed = processedItems.some((p) => p.stock.id === item.id);
                    const processedInfo = processedItems.find((p) => p.stock.id === item.id);
                    return (
                      <button
                        key={item.id}
                        onClick={() => handleItemClick(item)}
                        disabled={isProcessed}
                        className={`w-full flex items-center justify-between px-4 py-3.5 text-left transition-colors ${
                          isProcessed
                            ? processedInfo?.type === "confirm"
                              ? "bg-green-50"
                              : "bg-amber-50"
                            : "bg-white active:bg-gray-50"
                        }`}
                      >
                        <div className="flex-1 min-w-0">
                          <p className="text-lg font-bold text-gray-900 truncate">
                            {item.item_name || item.item_code} / {item.item_code}
                          </p>
                          <p className="text-sm text-gray-400 mt-0.5">
                            {item.spec ? `${item.spec} / ` : ""}{item.warehouse_name || item.warehouse_code}{item.floor ? ` · ${item.floor}` : ""}{item.location_name ? ` · ${item.location_name}` : item.location_code ? ` · ${item.location_code}` : ""}
                          </p>
                        </div>
                        <div className="flex items-center gap-3 shrink-0 ml-3">
                          <div className="text-right">
                            <p className="text-2xl font-extrabold text-gray-900">{parseFloat(item.current_qty || "0").toLocaleString()}</p>
                            <p className="text-xs text-gray-400">{item.unit || "EA"}</p>
                          </div>
                          {isProcessed ? (
                            <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${
                              processedInfo?.type === "confirm" ? "bg-green-500" : "bg-amber-500"
                            }`}>
                              <svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" strokeWidth={3} viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                              </svg>
                            </div>
                          ) : (
                            <div className="w-12 h-12 rounded-xl bg-amber-500 flex items-center justify-center text-white text-2xl font-bold active:bg-amber-600">
                              +
                            </div>
                          )}
                        </div>
                      </button>
                    );
                  })}
                </div>
              )}
            </div>
          </div>

          {/* ===== 오른쪽: 처리 결과 ===== */}
          <div className="w-[45%] min-w-[380px] flex flex-col bg-gray-50">
            <div className="flex-1 overflow-y-auto px-2 py-2">
              {/* 헤더 — 스크롤 영역 안 */}
              <div className="flex items-center justify-between px-2 pb-2 mb-1">
                <h2 className="text-lg font-bold text-gray-900">처리 결과</h2>
                <div className="flex items-center gap-2">
                  <span className="text-sm font-bold text-green-600 bg-green-50 px-3 py-1.5 rounded-lg">확인 {confirmCount}</span>
                  <span className="text-sm font-bold text-amber-600 bg-amber-50 px-3 py-1.5 rounded-lg">조정 {adjustCount}</span>
                </div>
              </div>
              {processedItems.length === 0 ? (
                <div className="flex flex-col items-center justify-center py-20 text-gray-400">
                  <span className="text-5xl mb-3">📋</span>
                  <p className="text-lg font-semibold">품목을 선택하여</p>
                  <p className="text-lg font-semibold">재고를 확인하세요</p>
                </div>
              ) : (
                <div className="space-y-2">
                  {processedItems.map((p) => {
                    const qty = parseFloat(p.stock.current_qty || "0");
                    const diff = p.type === "adjust" && p.actualQty != null ? p.actualQty - qty : 0;
                    return (
                      <div key={p.stock.id} className={`rounded-xl border-2 p-4 ${
                        p.type === "confirm"
                          ? "bg-white border-green-300 border-l-4 border-l-green-500"
                          : "bg-amber-50 border-amber-300 border-l-4 border-l-amber-500"
                      }`}>
                        <div className="flex items-start justify-between mb-2">
                          <div className="flex-1 min-w-0">
                            <p className="text-base font-bold text-gray-900 truncate">{p.stock.item_name || p.stock.item_code}</p>
                            <p className="text-sm text-gray-400">{p.stock.warehouse_name || p.stock.warehouse_code}{p.stock.location_code ? ` · ${p.stock.location_code}` : ""}</p>
                          </div>
                          <button
                            onClick={() => removeProcessed(p.stock.id)}
                            className="w-10 h-10 rounded-lg border border-red-200 bg-red-50 flex items-center justify-center text-red-500 font-bold text-lg active:bg-red-100 shrink-0 ml-2"
                          >
                            ✕
                          </button>
                        </div>
                        {p.type === "confirm" ? (
                          <div className="flex items-center gap-2">
                            <span className="text-sm font-bold text-green-600 bg-green-100 px-3 py-1 rounded-lg">이상없음</span>
                            <span className="text-base font-bold text-gray-700">{qty.toLocaleString()} {p.stock.unit || "EA"}</span>
                          </div>
                        ) : (
                          <div className="space-y-1">
                            <div className="flex items-center gap-2 flex-wrap">
                              <span className="text-sm font-bold text-amber-700 bg-amber-100 px-3 py-1 rounded-lg">
                                {qty.toLocaleString()} → {p.actualQty?.toLocaleString()} ({diff > 0 ? "+" : ""}{diff})
                              </span>
                            </div>
                            {p.reason && (
                              <span className="inline-block text-sm px-3 py-1 rounded-lg bg-gray-100 text-gray-600 font-semibold">{p.reason}</span>
                            )}
                            {p.memo && (
                              <p className="text-sm text-gray-400 truncate">{p.memo}</p>
                            )}
                          </div>
                        )}
                      </div>
                    );
                  })}
                </div>
              )}
            </div>

            {/* 하단 바 */}
            <div className="px-3 py-2.5 border-t-2 border-gray-200 bg-white flex items-center gap-2 shrink-0">
              <button
                onClick={handleReset}
                className="px-4 py-3 rounded-xl border-2 border-gray-300 text-base font-bold text-gray-600 active:bg-gray-100"
              >
                초기화
              </button>
              <button
                onClick={handleTempSave}
                disabled={processedItems.length === 0 || (Object.keys(savedCartIds).length === processedItems.length && processedItems.every(p => savedCartIds[p.stock.id]))}
                className={`px-4 py-3 rounded-xl border-2 text-base font-bold ${
                  processedItems.length === 0 || (Object.keys(savedCartIds).length === processedItems.length && processedItems.every(p => savedCartIds[p.stock.id]))
                    ? "border-gray-300 text-gray-400"
                    : "border-blue-300 text-blue-600 active:bg-blue-50"
                }`}
              >
                임시저장
              </button>
              <button
                disabled={processedItems.length === 0 || submitting}
                onClick={handleBatchConfirm}
                className={`flex-1 py-3.5 rounded-xl text-lg font-bold text-white transition-all active:scale-[0.98] ${
                  processedItems.length > 0 && !submitting
                    ? "bg-red-500 active:bg-red-600 shadow-lg"
                    : "bg-gray-300"
                }`}
              >
                {submitting ? "처리중..." : `일괄 확정 (${processedItems.length}건)`}
              </button>
            </div>
          </div>

        {/* ===== 재고 확인 모달 ===== */}
        {checkModal && (
          <div className="fixed inset-0 z-[100] flex items-end sm:items-center justify-center" onClick={() => setCheckModal(null)}>
            <div className="absolute inset-0 bg-black/50" />
            <div className="relative bg-white rounded-t-3xl sm:rounded-2xl shadow-2xl w-full sm:max-w-md sm:mx-4 overflow-hidden" onClick={(e) => e.stopPropagation()}>
              <div className="flex items-center justify-between px-5 pt-5 pb-2">
                <h3 className="text-xl font-bold text-gray-900">재고 확인</h3>
                <button onClick={() => setCheckModal(null)} className="w-10 h-10 rounded-xl bg-gray-100 flex items-center justify-center text-gray-500 text-lg active:bg-gray-200">✕</button>
              </div>
              <div className="px-5 pb-4">
                <div className="bg-amber-50 rounded-2xl p-5">
                  <p className="text-xl font-bold text-gray-900">{checkModal.item_name || checkModal.item_code}</p>
                  <p className="text-base text-gray-500 mt-1">{checkModal.item_code}{checkModal.spec ? ` · ${checkModal.spec}` : ""}</p>
                  <p className="text-sm text-gray-400 mt-1">{checkModal.warehouse_name || checkModal.warehouse_code}{checkModal.location_code ? ` · ${checkModal.location_code}` : ""}</p>
                  <div className="mt-4 bg-white rounded-xl px-4 py-3 text-center">
                    <p className="text-sm text-gray-500">전산재고</p>
                    <p className="text-4xl font-extrabold text-gray-900 mt-1">
                      {parseFloat(checkModal.current_qty || "0").toLocaleString()}
                      <span className="text-lg text-gray-400 ml-1">{checkModal.unit || "EA"}</span>
                    </p>
                  </div>
                </div>
              </div>
              <div className="px-5 pb-5 flex gap-3">
                <button onClick={() => setCheckModal(null)} className="flex-1 py-4 rounded-xl border-2 border-gray-300 text-lg font-bold text-gray-500 active:bg-gray-100">
                  취소
                </button>
                <button onClick={handleConfirmOk} className="flex-1 py-4 rounded-xl bg-green-500 text-lg font-bold text-white active:bg-green-600 shadow-md">
                  이상없음
                </button>
                <button onClick={handleNeedAdjust} className="flex-1 py-4 rounded-xl bg-amber-500 text-lg font-bold text-white active:bg-amber-600 shadow-md">
                  조정필요
                </button>
              </div>
            </div>
          </div>
        )}

        {/* ===== 재고 조정 입력 모달 ===== */}
        {adjustModal && (
          <div className="fixed inset-0 z-[100] flex items-end sm:items-center justify-center" onClick={() => setAdjustModal(null)}>
            <div className="absolute inset-0 bg-black/50" />
            <div className="relative bg-white rounded-t-3xl sm:rounded-2xl shadow-2xl w-full sm:max-w-lg sm:mx-4 max-h-[92vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
              <div className="flex items-center justify-between px-5 pt-5 pb-2 sticky top-0 bg-white z-10">
                <h3 className="text-xl font-bold text-gray-900">재고 조정</h3>
                <button onClick={() => setAdjustModal(null)} className="w-10 h-10 rounded-xl bg-gray-100 flex items-center justify-center text-gray-500 text-lg active:bg-gray-200">✕</button>
              </div>
              <div className="px-5 pb-4 space-y-3">
                {/* 품목 정보 — 1행 */}
                <div className="bg-amber-50 rounded-xl px-4 py-3 flex items-center justify-between gap-3">
                  <p className="text-lg font-bold text-gray-900 truncate">{adjustModal.item_name || adjustModal.item_code}</p>
                  <p className="text-sm text-gray-400 shrink-0">{adjustModal.item_code}{adjustModal.spec ? ` · ${adjustModal.spec}` : ""} · {adjustModal.warehouse_name || adjustModal.warehouse_code}</p>
                </div>

                {/* 실제 수량 — 터치로 숫자 키패드 열기 */}
                <div>
                  <label className="text-base font-bold text-gray-700 mb-1.5 block">실제 수량</label>
                  <button
                    type="button"
                    onClick={() => { setNumpadValue(adjustQty); setNumpadOpen(true); }}
                    className="w-full px-4 py-5 rounded-xl border-2 border-amber-400 bg-amber-50 text-center active:bg-amber-100"
                  >
                    <span className="text-7xl font-extrabold text-gray-900">{adjustQty || "0"}</span>
                    <span className="text-2xl text-gray-400 ml-2">{adjustModal.unit || "EA"}</span>
                  </button>
                  {(() => {
                    const d = (parseFloat(adjustQty) || 0) - parseFloat(adjustModal.current_qty || "0");
                    if (d === 0) return null;
                    return (
                      <p className={`text-center text-lg font-bold mt-1 ${d > 0 ? "text-blue-600" : "text-red-600"}`}>
                        차이: {d > 0 ? `+${d}` : d} (전산: {parseFloat(adjustModal.current_qty || "0").toLocaleString()})
                      </p>
                    );
                  })()}
                </div>

                {/* 조정 사유 */}
                <div>
                  <label className="text-base font-bold text-gray-700 mb-1.5 block">조정 사유</label>
                  <div className="grid grid-cols-3 gap-1.5">
                    {REASONS.map((r) => (
                      <button
                        key={r}
                        onClick={() => setAdjustReason(r)}
                        className={`py-4 rounded-xl text-base font-bold transition-all active:scale-[0.97] ${
                          adjustReason === r
                            ? "bg-amber-500 text-white shadow-md"
                            : "bg-gray-100 text-gray-600 border border-gray-200"
                        }`}
                      >
                        {r}
                      </button>
                    ))}
                  </div>
                </div>

                {/* 위치불일치 → 실제 위치 (QR스캔 / 직접선택) */}
                {adjustReason === "위치불일치" && (
                  <div className="bg-blue-50 rounded-2xl p-4 space-y-3">
                    <label className="text-base font-bold text-blue-800 block">실제 위치</label>
                    <p className="text-sm text-blue-600">현재: {adjustModal.warehouse_name || adjustModal.warehouse_code} · {adjustModal.location_code || "-"}</p>

                    {/* 2개 큰 버튼: QR스캔 + 직접선택 */}
                    <div className="grid grid-cols-2 gap-3">
                      <button
                        type="button"
                        onClick={() => setShowBarcodeScan(true)}
                        className="flex flex-col items-center justify-center gap-2 py-5 rounded-xl bg-white border-2 border-blue-300 text-blue-700 font-bold text-lg active:bg-blue-100 transition-all"
                      >
                        <svg className="w-8 h-8" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
                          <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 01-1.125-1.125v-4.5z" />
                          <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 14.625v1.875m0 3.75v-3.75m0 0h1.875m1.875 0h-1.875m0 0h-1.875" />
                        </svg>
                        QR스캔
                      </button>
                      <button
                        type="button"
                        onClick={() => setShowWhSelectModal(true)}
                        className="flex flex-col items-center justify-center gap-2 py-5 rounded-xl bg-white border-2 border-blue-300 text-blue-700 font-bold text-lg active:bg-blue-100 transition-all"
                      >
                        <svg className="w-8 h-8" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 21v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21m0 0h4.5V3.545M12.75 21h7.5V10.75M2.25 21h1.5m18 0h-18M2.25 9l4.5-1.636M18.75 3l-1.5.545m0 6.205l3 1m1.5.5l-1.5-.5M6.75 7.364V3h-3v18m3-13.636l10.5-3.819" />
                        </svg>
                        직접선택
                      </button>
                    </div>

                    {/* 선택 결과 표시 */}
                    {selectedLocationDisplay && (
                      <div className="flex items-center justify-between bg-white rounded-xl border-2 border-green-300 px-4 py-3">
                        <div className="flex items-center gap-2">
                          <svg className="w-6 h-6 text-green-500 shrink-0" fill="none" stroke="currentColor" strokeWidth={2.5} viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                          </svg>
                          <span className="text-base font-bold text-gray-900">{selectedLocationDisplay}</span>
                        </div>
                        <button
                          type="button"
                          onClick={() => {
                            setAdjustNewWh("");
                            setAdjustNewLoc("");
                            setSelectedLocationDisplay("");
                          }}
                          className="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center text-gray-400 text-sm active:bg-gray-200"
                        >
                          ✕
                        </button>
                      </div>
                    )}
                  </div>
                )}

                {/* 메모 */}
                <div>
                  <label className="text-base font-bold text-gray-700 mb-1 block">메모 (선택)</label>
                  <input
                    type="text"
                    value={adjustMemo}
                    onChange={(e) => setAdjustMemo(e.target.value)}
                    placeholder="메모를 입력하세요"
                    className="w-full px-4 py-3.5 rounded-xl border-2 border-gray-200 text-base focus:outline-none focus:border-amber-400"
                  />
                </div>
              </div>

              {/* 버튼 — 하단 고정 */}
              <div className="px-5 pb-5 flex gap-3 sticky bottom-0 bg-white pt-2">
                <button onClick={() => setAdjustModal(null)} className="py-5 px-8 rounded-xl border-2 border-gray-300 text-lg font-bold text-gray-500 active:bg-gray-100">
                  취소
                </button>
                <button onClick={handleAdjustSubmit} className="flex-1 py-5 rounded-xl bg-amber-500 text-xl font-bold text-white active:bg-amber-600 shadow-md">
                  조정 등록
                </button>
              </div>
            </div>
          </div>
        )}

        {/* ===== 숫자 키패드 모달 ===== */}
        {numpadOpen && (
          <div className="fixed inset-0 z-[200] flex items-end sm:items-center justify-center" onClick={() => setNumpadOpen(false)}>
            <div className="absolute inset-0 bg-black/60" />
            <div className="relative bg-white rounded-t-3xl sm:rounded-2xl shadow-2xl w-full sm:max-w-sm sm:mx-4" onClick={(e) => e.stopPropagation()}>
              <div className="px-5 pt-5 pb-3 text-center">
                <p className="text-sm text-gray-400">실제 수량 입력</p>
                <p className="text-4xl font-extrabold text-gray-900 mt-2 min-h-[48px]">{numpadValue || "0"}</p>
              </div>
              <div className="px-4 pb-3 grid grid-cols-4 gap-2">
                {["7","8","9","←","4","5","6","C","1","2","3",".",].map((k) => (
                  <button
                    key={k}
                    onClick={() => {
                      if (k === "←") setNumpadValue((v) => v.slice(0, -1));
                      else if (k === "C") setNumpadValue("");
                      else if (k === ".") setNumpadValue((v) => v.includes(".") ? v : v + ".");
                      else setNumpadValue((v) => (v === "0" ? k : v + k));
                    }}
                    className={`py-5 rounded-xl text-xl font-bold active:scale-[0.95] ${
                      k === "←" || k === "C" ? "bg-gray-200 text-gray-600" : "bg-gray-100 text-gray-900"
                    }`}
                  >
                    {k}
                  </button>
                ))}
                <button
                  onClick={() => setNumpadValue((v) => (v === "0" ? "0" : v + "0"))}
                  className="col-span-2 py-5 rounded-xl text-xl font-bold bg-gray-100 text-gray-900 active:scale-[0.95]"
                >
                  0
                </button>
                <button
                  onClick={() => { setAdjustQty(numpadValue || "0"); setNumpadOpen(false); }}
                  className="col-span-2 py-5 rounded-xl text-xl font-bold bg-amber-500 text-white active:bg-amber-600 shadow-md"
                >
                  확인
                </button>
              </div>
            </div>
          </div>
        )}

        {/* ===== QR 스캔 모달 ===== */}
        <BarcodeScanModal
          open={showBarcodeScan}
          onOpenChange={setShowBarcodeScan}
          targetField="위치코드"
          barcodeFormat="all"
          autoSubmit
          onScanSuccess={handleLocationQrScan}
        />

        {/* ===== 창고 선택 모달 ===== */}
        {showWhSelectModal && (
          <div className="fixed inset-0 z-[150] flex items-end justify-center" onClick={() => setShowWhSelectModal(false)}>
            <div className="absolute inset-0 bg-black/50" />
            <div className="relative bg-white rounded-t-3xl shadow-2xl w-full max-h-[80vh] overflow-hidden" onClick={(e) => e.stopPropagation()}>
              <div className="flex items-center justify-between px-5 pt-5 pb-3">
                <h3 className="text-xl font-bold text-gray-900">창고 선택</h3>
                <button onClick={() => setShowWhSelectModal(false)} className="w-10 h-10 rounded-xl bg-gray-100 flex items-center justify-center text-gray-500 text-lg active:bg-gray-200">✕</button>
              </div>
              <div className="px-4 pb-5 overflow-y-auto max-h-[65vh]">
                <div className="grid grid-cols-2 gap-3">
                  {warehouses.map((wh) => (
                    <button
                      key={wh.warehouse_code}
                      onClick={() => handleWhSelect(wh)}
                      className="flex flex-col items-center justify-center gap-1 py-5 px-3 rounded-xl bg-blue-50 border-2 border-blue-200 active:bg-blue-100 transition-all min-h-[72px]"
                    >
                      <svg className="w-7 h-7 text-blue-500" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 21v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21m0 0h4.5V3.545M12.75 21h7.5V10.75M2.25 21h1.5m18 0h-18M2.25 9l4.5-1.636M18.75 3l-1.5.545m0 6.205l3 1m1.5.5l-1.5-.5M6.75 7.364V3h-3v18m3-13.636l10.5-3.819" />
                      </svg>
                      <span className="text-lg font-bold text-gray-900">{wh.warehouse_name}</span>
                      <span className="text-sm text-gray-400">{wh.warehouse_code}</span>
                    </button>
                  ))}
                </div>
              </div>
            </div>
          </div>
        )}

        {/* ===== 위치 선택 모달 ===== */}
        {showLocSelectModal && (
          <div className="fixed inset-0 z-[150] flex items-end justify-center" onClick={() => setShowLocSelectModal(false)}>
            <div className="absolute inset-0 bg-black/50" />
            <div className="relative bg-white rounded-t-3xl shadow-2xl w-full max-h-[80vh] overflow-hidden" onClick={(e) => e.stopPropagation()}>
              <div className="flex items-center justify-between px-5 pt-5 pb-3">
                <h3 className="text-xl font-bold text-gray-900">{locSelectWhName} - 위치 선택</h3>
                <button onClick={() => setShowLocSelectModal(false)} className="w-10 h-10 rounded-xl bg-gray-100 flex items-center justify-center text-gray-500 text-lg active:bg-gray-200">✕</button>
              </div>
              <div className="px-4 pb-5 overflow-y-auto max-h-[65vh]">
                {locationLoading ? (
                  <div className="flex justify-center py-12">
                    <div className="w-10 h-10 border-4 border-blue-500 border-t-transparent rounded-full animate-spin" />
                  </div>
                ) : locationList.length === 0 ? (
                  <div className="flex flex-col items-center py-12 text-gray-400">
                    <p className="text-lg font-semibold mb-4">등록된 위치가 없습니다</p>
                    <button
                      onClick={handleWhOnlySelect}
                      className="py-4 px-8 rounded-xl bg-blue-500 text-white text-lg font-bold active:bg-blue-600 shadow-md"
                    >
                      창고만 선택
                    </button>
                  </div>
                ) : (
                  <div className="grid grid-cols-2 gap-2">
                    {locationList.map((loc) => (
                      <button
                        key={loc.id}
                        onClick={() => handleLocSelect(loc)}
                        className="flex flex-col items-start gap-0.5 py-4 px-4 rounded-xl bg-blue-50 border-2 border-blue-200 active:bg-blue-100 transition-all text-left min-h-[64px]"
                      >
                        <span className="text-base font-bold text-gray-900 truncate w-full">{loc.location_name || loc.location_code}</span>
                        <span className="text-sm text-gray-400 truncate w-full">
                          {[loc.floor, loc.zone, loc.row_num ? `${loc.row_num}열` : "", loc.level_num ? `${loc.level_num}단` : ""].filter(Boolean).join(" · ") || loc.location_code}
                        </span>
                      </button>
                    ))}
                  </div>
                )}
              </div>
            </div>
          </div>
        )}

        {/* ===== 토스트 메시지 ===== */}
        {toastMsg && (
          <div className="fixed top-4 left-1/2 -translate-x-1/2 z-[200] animate-in fade-in slide-in-from-top-2">
            <div className={`px-6 py-3 rounded-2xl shadow-xl text-base font-bold ${
              toastMsg.type === "success"
                ? "bg-green-600 text-white"
                : "bg-red-600 text-white"
            }`}>
              {toastMsg.text}
            </div>
          </div>
        )}

      </div>
    </PopShell>
  );
}
