"use client";

import React, { useState, useEffect, useCallback } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
import { Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil, Truck, Search, Settings2 } from "lucide-react";
import { cn } from "@/lib/utils";
import { apiClient } from "@/lib/api/client";
import { useAuth } from "@/hooks/useAuth";
import { toast } from "sonner";
import { useConfirmDialog } from "@/components/common/ConfirmDialog";
import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
import { exportToExcel } from "@/lib/utils/excelExport";
import { useTableSettings } from "@/hooks/useTableSettings";
import { TableSettingsModal } from "@/components/common/TableSettingsModal";
import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";

const SUPPLIER_TABLE = "supplier_mng";
const MAPPING_TABLE = "supplier_item_mapping";

const SUPPLIER_COLUMNS = [
  { key: "contact_person", label: "담당자" },
  { key: "contact_phone", label: "연락처" },
  { key: "status", label: "상태" },
];

export default function SupplierManagementPage() {
  const { user } = useAuth();
  const { confirm, ConfirmDialogComponent } = useConfirmDialog();

  // 검색 필터 (DynamicSearchFilter)
  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);

  // 좌측: 공급업체 목록
  const [suppliers, setSuppliers] = useState<any[]>([]);
  const [supplierLoading, setSupplierLoading] = useState(false);
  const [selectedSupplierId, setSelectedSupplierId] = useState<string | null>(null);

  // 우측: 품목 매핑
  const [mappingItems, setMappingItems] = useState<any[]>([]);
  const [mappingLoading, setMappingLoading] = useState(false);
  const [mappingCheckedIds, setMappingCheckedIds] = useState<string[]>([]);

  // 공급업체 등록/수정 모달
  const [supplierModalOpen, setSupplierModalOpen] = useState(false);
  const [supplierEditMode, setSupplierEditMode] = useState(false);
  const [supplierForm, setSupplierForm] = useState<Record<string, any>>({});
  const [saving, setSaving] = useState(false);

  // 품목 추가 모달 (1단계: 검색/선택)
  const [itemSelectOpen, setItemSelectOpen] = useState(false);
  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
  const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
  const [itemSearchLoading, setItemSearchLoading] = useState(false);
  const [itemCheckedIds, setItemCheckedIds] = useState<Set<string>>(new Set());

  // 품목 상세 입력 모달 (2단계)
  const [itemDetailOpen, setItemDetailOpen] = useState(false);
  const [selectedItemsForDetail, setSelectedItemsForDetail] = useState<any[]>([]);
  const [itemMappings, setItemMappings] = useState<Record<string, {
    supplier_item_code: string; supplier_item_name: string;
    base_price: string; discount_type: string; discount_value: string; calculated_price: string;
    currency_code: string; start_date: string; end_date: string;
    lead_time_days: string; min_order_qty: string;
  }>>({});
  const [editItemData, setEditItemData] = useState<any>(null);

  // 엑셀
  const [excelUploadOpen, setExcelUploadOpen] = useState(false);

  // 테이블 설정
  const ts = useTableSettings("c16-supplier", SUPPLIER_TABLE, SUPPLIER_COLUMNS);

  // 좌측: 공급업체 조회
  const fetchSuppliers = useCallback(async () => {
    setSupplierLoading(true);
    try {
      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
      const res = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, {
        page: 1, size: 500,
        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
        autoFilter: true,
      });
      setSuppliers(res.data?.data?.data || res.data?.data?.rows || []);
    } catch {
      toast.error("공급업체 목록을 불러오는데 실패했습니다.");
    } finally {
      setSupplierLoading(false);
    }
  }, [searchFilters]);

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

  const selectedSupplier = suppliers.find((s) => s.id === selectedSupplierId);
  const isColVisible = (key: string) => ts.isVisible(key);
  const supplierColSpan = 2 + SUPPLIER_COLUMNS.filter((c) => isColVisible(c.key)).length;

  // 우측: 품목 매핑 조회
  useEffect(() => {
    if (!selectedSupplier?.supplier_code) { setMappingItems([]); setMappingCheckedIds([]); return; }
    setMappingCheckedIds([]);
    const fetchMappings = async () => {
      setMappingLoading(true);
      try {
        const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
          page: 1, size: 500,
          dataFilter: { enabled: true, filters: [{ columnName: "supplier_id", operator: "equals", value: selectedSupplier.supplier_code }] },
          autoFilter: true,
        });
        const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
        const itemIds = [...new Set(mappings.map((m: any) => m.item_id).filter(Boolean))];
        let itemMap: Record<string, any> = {};
        if (itemIds.length > 0) {
          try {
            const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
              page: 1, size: itemIds.length + 10,
              dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemIds }] },
              autoFilter: true,
            });
            for (const item of (itemRes.data?.data?.data || itemRes.data?.data?.rows || [])) {
              itemMap[item.item_number] = item;
            }
          } catch { /* skip */ }
        }
        setMappingItems(mappings.map((m: any) => ({
          ...m,
          item_number: m.item_id || "",
          item_name: itemMap[m.item_id]?.item_name || "",
        })));
      } catch {
        toast.error("품목 정보를 불러오는데 실패했습니다.");
      } finally {
        setMappingLoading(false);
      }
    };
    fetchMappings();
  }, [selectedSupplier?.supplier_code]);

  // 단가 자동 계산
  const calcPrice = (base: string, discType: string, discVal: string): string => {
    const bp = Number(base) || 0;
    const dv = Number(discVal) || 0;
    if (discType === "rate") return String(Math.round(bp * (1 - dv / 100)));
    if (discType === "amount") return String(Math.round(bp - dv));
    return String(bp);
  };

  const openSupplierRegister = () => { setSupplierForm({}); setSupplierEditMode(false); setSupplierModalOpen(true); };
  const openSupplierEdit = () => {
    if (!selectedSupplier) return;
    setSupplierForm({ ...selectedSupplier });
    setSupplierEditMode(true);
    setSupplierModalOpen(true);
  };

  const handleSupplierSave = async () => {
    if (!supplierForm.supplier_name) { toast.error("공급업체명은 필수입니다."); return; }
    setSaving(true);
    try {
      const { id, created_date, updated_date, writer, company_code, status: _s, ...fields } = supplierForm;
      const cleanFields: Record<string, any> = {};
      for (const [key, value] of Object.entries(fields)) cleanFields[key] = value === "" ? null : value;
      if (supplierEditMode && id) {
        await apiClient.put(`/table-management/tables/${SUPPLIER_TABLE}/edit`, { originalData: { id }, updatedData: cleanFields });
        toast.success("수정되었습니다.");
      } else {
        await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/add`, { id: crypto.randomUUID(), ...cleanFields });
        toast.success("등록되었습니다.");
      }
      setSupplierModalOpen(false);
      fetchSuppliers();
    } catch (err: any) {
      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
    } finally { setSaving(false); }
  };

  const handleSupplierDelete = async () => {
    if (!selectedSupplierId) return;
    const ok = await confirm("공급업체를 삭제하시겠습니까?", { description: "관련된 품목 매핑 정보도 함께 삭제됩니다.", variant: "destructive", confirmText: "삭제" });
    if (!ok) return;
    try {
      await apiClient.delete(`/table-management/tables/${SUPPLIER_TABLE}/delete`, { data: [{ id: selectedSupplierId }] });
      toast.success("삭제되었습니다.");
      setSelectedSupplierId(null);
      fetchSuppliers();
    } catch { toast.error("삭제에 실패했습니다."); }
  };

  const searchItems = async () => {
    setItemSearchLoading(true);
    try {
      const filters: any[] = [];
      if (itemSearchKeyword) filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
        page: 1, size: 50,
        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
        autoFilter: true,
      });
      const allItems = res.data?.data?.data || res.data?.data?.rows || [];
      const existingItemIds = new Set(mappingItems.map((m: any) => m.item_id));
      setItemSearchResults(allItems.filter((item: any) => !existingItemIds.has(item.item_number)));
    } catch { /* skip */ } finally { setItemSearchLoading(false); }
  };

  const goToItemDetail = () => {
    const selected = itemSearchResults.filter((i) => itemCheckedIds.has(i.id));
    if (selected.length === 0) { toast.error("품목을 선택해주세요."); return; }
    setSelectedItemsForDetail(selected);
    const mappings: typeof itemMappings = {};
    for (const item of selected) {
      const key = item.item_number || item.id;
      mappings[key] = {
        supplier_item_code: "", supplier_item_name: "",
        base_price: item.standard_price || "", discount_type: "none",
        discount_value: "", calculated_price: item.standard_price || "",
        currency_code: "", start_date: "", end_date: "",
        lead_time_days: "", min_order_qty: "",
      };
    }
    setItemMappings(mappings);
    setItemSelectOpen(false);
    setEditItemData(null);
    setItemDetailOpen(true);
  };

  const updateMapping = (itemKey: string, field: string, value: string) => {
    setItemMappings((prev) => {
      const cur = prev[itemKey] || {} as any;
      const updated = { ...cur, [field]: value };
      if (["base_price", "discount_type", "discount_value"].includes(field)) {
        updated.calculated_price = calcPrice(updated.base_price, updated.discount_type, updated.discount_value);
      }
      return { ...prev, [itemKey]: updated };
    });
  };

  const openEditItem = (row: any) => {
    const itemKey = row.item_id || row.item_number;
    setSelectedItemsForDetail([{ item_number: itemKey, item_name: row.item_name || "" }]);
    setItemMappings({
      [itemKey]: {
        supplier_item_code: row.supplier_item_code || "",
        supplier_item_name: row.supplier_item_name || "",
        base_price: row.base_price ? String(row.base_price) : "",
        discount_type: row.discount_type || "none",
        discount_value: row.discount_value ? String(row.discount_value) : "",
        calculated_price: row.calculated_price ? String(row.calculated_price) : "",
        currency_code: row.currency_code || "",
        start_date: row.start_date ? String(row.start_date).split("T")[0] : "",
        end_date: row.end_date ? String(row.end_date).split("T")[0] : "",
        lead_time_days: row.lead_time_days ? String(row.lead_time_days) : "",
        min_order_qty: row.min_order_qty ? String(row.min_order_qty) : "",
      },
    });
    setEditItemData(row);
    setItemDetailOpen(true);
  };

  const handleItemDetailSave = async () => {
    if (!selectedSupplier) return;
    const isEdit = !!editItemData;
    setSaving(true);
    try {
      for (const item of selectedItemsForDetail) {
        const itemKey = item.item_number || item.id;
        const m = itemMappings[itemKey];
        if (!m) continue;
        const fields: Record<string, any> = {
          supplier_id: selectedSupplier.supplier_code, item_id: itemKey,
          supplier_item_code: m.supplier_item_code || null,
          supplier_item_name: m.supplier_item_name || null,
          base_price: m.base_price ? Number(m.base_price) : null,
          discount_type: m.discount_type === "none" ? null : m.discount_type || null,
          discount_value: m.discount_value ? Number(m.discount_value) : null,
          calculated_price: m.calculated_price ? Number(m.calculated_price) : null,
          currency_code: m.currency_code || null,
          start_date: m.start_date || null,
          end_date: m.end_date || null,
          lead_time_days: m.lead_time_days ? Number(m.lead_time_days) : null,
          min_order_qty: m.min_order_qty ? Number(m.min_order_qty) : null,
        };
        if (isEdit && editItemData?.id) {
          await apiClient.put(`/table-management/tables/${MAPPING_TABLE}/edit`, { originalData: { id: editItemData.id }, updatedData: fields });
        } else {
          await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, { id: crypto.randomUUID(), ...fields });
        }
      }
      toast.success(isEdit ? "수정되었습니다." : `${selectedItemsForDetail.length}개 품목이 추가되었습니다.`);
      setItemDetailOpen(false);
      setEditItemData(null);
      setItemCheckedIds(new Set());
      const sid = selectedSupplierId;
      setSelectedSupplierId(null);
      setTimeout(() => setSelectedSupplierId(sid), 50);
    } catch (err: any) {
      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
    } finally { setSaving(false); }
  };

  const handleMappingDelete = async () => {
    if (mappingCheckedIds.length === 0) return;
    const ok = await confirm(`선택한 ${mappingCheckedIds.length}개 품목 매핑을 삭제하시겠습니까?`, { variant: "destructive", confirmText: "삭제" });
    if (!ok) return;
    try {
      await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, { data: mappingCheckedIds.map((id) => ({ id })) });
      toast.success(`${mappingCheckedIds.length}개 품목 매핑이 삭제되었습니다.`);
      setMappingCheckedIds([]);
      const sid = selectedSupplierId;
      setSelectedSupplierId(null);
      setTimeout(() => setSelectedSupplierId(sid), 50);
    } catch { toast.error("삭제에 실패했습니다."); }
  };

  const handleExcelDownload = async () => {
    if (suppliers.length === 0) return;
    await exportToExcel(suppliers.map((s) => ({
      공급업체코드: s.supplier_code, 공급업체명: s.supplier_name,
      담당자: s.contact_person, 연락처: s.contact_phone,
      사업자번호: s.business_number, 이메일: s.email, 상태: s.status,
    })), "공급업체관리.xlsx", "공급업체");
    toast.success("다운로드 완료");
  };

  return (
    <div className="flex h-full flex-col gap-3 p-3">
      {/* 검색 바 */}
      <DynamicSearchFilter
        tableName={SUPPLIER_TABLE}
        filterId="c16-supplier"
        onFilterChange={setSearchFilters}
        dataCount={suppliers.length}
        externalFilterConfig={ts.filterConfig}
        extraActions={
          <div className="flex items-center gap-1.5">
            <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
              <FileSpreadsheet className="w-3.5 h-3.5" /> 엑셀 업로드
            </Button>
            <Button variant="outline" size="sm" onClick={handleExcelDownload}>
              <Download className="w-3.5 h-3.5" /> 엑셀 다운로드
            </Button>
          </div>
        }
      />

      {/* 분할 패널 */}
      <div className="flex-1 overflow-hidden">
        <ResizablePanelGroup direction="horizontal" className="h-full rounded-lg border bg-card">
          {/* 좌측: 공급업체 목록 */}
          <ResizablePanel defaultSize={45} minSize={30}>
            <div className="flex flex-col h-full">
              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50 shrink-0">
                <div className="flex items-center gap-2">
                  <h3 className="text-[13px] font-bold">공급업체 목록</h3>
                  <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">{suppliers.length}건</span>
                  {supplierLoading && <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />}
                </div>
                <div className="flex gap-1.5">
                  <Button size="sm" onClick={openSupplierRegister}><Plus className="w-3.5 h-3.5" /> 등록</Button>
                  <Button variant="outline" size="sm" disabled={!selectedSupplierId} onClick={openSupplierEdit}><Pencil className="w-3.5 h-3.5" /> 수정</Button>
                  <Button variant="destructive" size="sm" disabled={!selectedSupplierId} onClick={handleSupplierDelete}><Trash2 className="w-3.5 h-3.5" /> 삭제</Button>
                  <Button size="sm" variant="ghost" onClick={() => ts.setOpen(true)}>
                    <Settings2 className="h-3.5 w-3.5" />
                  </Button>
                </div>
              </div>
              <div className="flex-1 overflow-auto">
                <Table>
                  <TableHeader className="sticky top-0 z-10">
                    <TableRow className="bg-muted hover:bg-muted">
                      <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체코드</TableHead>
                      <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체명</TableHead>
                      {isColVisible("contact_person") && <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>}
                      {isColVisible("contact_phone") && <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">연락처</TableHead>}
                      {isColVisible("status") && <TableHead className="w-[70px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>}
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {supplierLoading ? (
                      <TableRow><TableCell colSpan={supplierColSpan} className="h-32 text-center"><Loader2 className="mx-auto h-5 w-5 animate-spin" /></TableCell></TableRow>
                    ) : suppliers.length === 0 ? (
                      <TableRow><TableCell colSpan={supplierColSpan} className="h-32 text-center text-muted-foreground text-sm">등록된 공급업체가 없어요</TableCell></TableRow>
                    ) : suppliers.map((s) => (
                      <TableRow
                        key={s.id}
                        className={cn(
                          "cursor-pointer text-xs border-l-2",
                          selectedSupplierId === s.id ? "border-l-primary bg-primary/5" : "border-l-transparent"
                        )}
                        onClick={() => setSelectedSupplierId(s.id)}
                        onDoubleClick={openSupplierEdit}
                      >
                        <TableCell className="p-2 font-medium truncate max-w-[120px]">{s.supplier_code}</TableCell>
                        <TableCell className="p-2 truncate max-w-[160px]">{s.supplier_name}</TableCell>
                        {isColVisible("contact_person") && <TableCell className="p-2 truncate">{s.contact_person || "-"}</TableCell>}
                        {isColVisible("contact_phone") && <TableCell className="p-2 truncate">{s.contact_phone || "-"}</TableCell>}
                        {isColVisible("status") && (
                          <TableCell className="p-2 text-center">
                            <span className={cn("text-[10px] font-medium px-1.5 py-0.5 rounded",
                              s.status === "ACTIVE" || s.status === "사용" ? "bg-success/10 text-success" : "bg-muted text-muted-foreground"
                            )}>{s.status || "-"}</span>
                          </TableCell>
                        )}
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </div>
          </ResizablePanel>

          <ResizableHandle withHandle />

          {/* 우측: 품목 매핑 */}
          <ResizablePanel defaultSize={55} minSize={25}>
            <div className="flex flex-col h-full">
              {!selectedSupplierId ? (
                <div className="flex-1 flex items-center justify-center p-5">
                  <div className="flex flex-col items-center gap-3 border-2 border-dashed border-border rounded-lg p-10 text-center">
                    <Truck className="w-12 h-12 text-muted-foreground/40" />
                    <div className="text-sm font-semibold text-muted-foreground">공급업체를 선택해주세요</div>
                    <div className="text-xs text-muted-foreground">좌측에서 공급업체를 선택하면 품목 정보가 표시돼요</div>
                  </div>
                </div>
              ) : (
                <>
                  <div className="flex items-center gap-3 px-4 py-2.5 border-b bg-muted/50 shrink-0">
                    <h3 className="text-[13px] font-bold">{selectedSupplier?.supplier_name || "-"}</h3>
                    <span className="font-mono text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full">{selectedSupplier?.supplier_code || "-"}</span>
                  </div>
                  <div className="flex items-center justify-between px-4 py-2 border-b shrink-0">
                    <div className="flex items-center gap-2">
                      <span className="text-xs font-semibold text-muted-foreground">등록 품목</span>
                      <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-1.5 py-0.5 rounded-full font-mono">{mappingItems.length}건</span>
                    </div>
                    <div className="flex gap-1.5">
                      <Button size="sm" onClick={() => { setItemCheckedIds(new Set()); setItemSelectOpen(true); searchItems(); }}>
                        <Plus className="w-3.5 h-3.5" /> 품목 추가
                      </Button>
                      <Button variant="ghost" size="sm" disabled={mappingCheckedIds.length === 0}
                        className="text-destructive hover:text-destructive hover:bg-destructive/10"
                        onClick={handleMappingDelete}>
                        <Trash2 className="w-3.5 h-3.5" /> 삭제
                      </Button>
                    </div>
                  </div>
                  <div className="flex-1 overflow-auto">
                    <Table>
                      <TableHeader className="sticky top-0 z-10">
                        <TableRow className="bg-muted hover:bg-muted">
                          <TableHead className="p-2 w-10">
                            <Checkbox
                              checked={mappingItems.length > 0 && mappingCheckedIds.length === mappingItems.length}
                              onCheckedChange={(checked) => {
                                if (checked) setMappingCheckedIds(mappingItems.map((m) => m.id));
                                else setMappingCheckedIds([]);
                              }}
                            />
                          </TableHead>
                          <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
                          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
                          <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체품번</TableHead>
                          <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
                          <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
                          <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
                          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">리드타임</TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {mappingLoading ? (
                          <TableRow><TableCell colSpan={8} className="h-32 text-center"><Loader2 className="mx-auto h-5 w-5 animate-spin" /></TableCell></TableRow>
                        ) : mappingItems.length === 0 ? (
                          <TableRow><TableCell colSpan={8} className="h-32 text-center text-muted-foreground text-[13px]">등록된 품목이 없어요</TableCell></TableRow>
                        ) : mappingItems.map((m) => (
                          <TableRow
                            key={m.id}
                            className={cn("text-xs cursor-pointer", mappingCheckedIds.includes(m.id) && "bg-primary/5")}
                            onDoubleClick={() => openEditItem(m)}
                            onClick={() => setMappingCheckedIds((prev) => {
                              const next = [...prev];
                              const idx = next.indexOf(m.id);
                              if (idx >= 0) next.splice(idx, 1); else next.push(m.id);
                              return next;
                            })}
                          >
                            <TableCell className="p-2" onClick={(e) => e.stopPropagation()}>
                              <Checkbox
                                checked={mappingCheckedIds.includes(m.id)}
                                onCheckedChange={(checked) => setMappingCheckedIds((prev) =>
                                  checked ? [...prev, m.id] : prev.filter((id) => id !== m.id)
                                )}
                              />
                            </TableCell>
                            <TableCell className="p-2 font-medium truncate max-w-[100px]">{m.item_number}</TableCell>
                            <TableCell className="p-2 truncate max-w-[120px]">{m.item_name || "-"}</TableCell>
                            <TableCell className="p-2 truncate">{m.supplier_item_code || "-"}</TableCell>
                            <TableCell className="p-2 text-right">{m.base_price ? Number(m.base_price).toLocaleString() : "-"}</TableCell>
                            <TableCell className="p-2 text-right font-medium">{m.calculated_price ? Number(m.calculated_price).toLocaleString() : "-"}</TableCell>
                            <TableCell className="p-2">{m.currency_code || "-"}</TableCell>
                            <TableCell className="p-2 text-right">{m.lead_time_days ? `${m.lead_time_days}일` : "-"}</TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  </div>
                </>
              )}
            </div>
          </ResizablePanel>
        </ResizablePanelGroup>
      </div>

      {/* 공급업체 등록/수정 모달 */}
      <Dialog open={supplierModalOpen} onOpenChange={setSupplierModalOpen}>
        <DialogContent className="max-w-3xl">
          <DialogHeader>
            <DialogTitle>{supplierEditMode ? "공급업체 수정" : "공급업체 등록"}</DialogTitle>
            <DialogDescription>{supplierEditMode ? "공급업체 정보를 수정합니다." : "새로운 공급업체를 등록합니다."}</DialogDescription>
          </DialogHeader>
          <div className="grid grid-cols-4 gap-4">
            <div className="space-y-1.5">
              <Label className="text-sm">공급업체 코드</Label>
              <Input value={supplierForm.supplier_code || ""} onChange={(e) => setSupplierForm((p) => ({ ...p, supplier_code: e.target.value }))} placeholder="공급업체 코드" className="h-9" disabled={supplierEditMode} />
            </div>
            <div className="space-y-1.5">
              <Label className="text-sm">공급업체명 <span className="text-destructive">*</span></Label>
              <Input value={supplierForm.supplier_name || ""} onChange={(e) => setSupplierForm((p) => ({ ...p, supplier_name: e.target.value }))} placeholder="공급업체명" className="h-9" />
            </div>
            <div className="space-y-1.5">
              <Label className="text-sm">담당자명</Label>
              <Input value={supplierForm.contact_person || ""} onChange={(e) => setSupplierForm((p) => ({ ...p, contact_person: e.target.value }))} placeholder="담당자명" className="h-9" />
            </div>
            <div className="space-y-1.5">
              <Label className="text-sm">담당자 연락처</Label>
              <Input value={supplierForm.contact_phone || ""} onChange={(e) => setSupplierForm((p) => ({ ...p, contact_phone: e.target.value }))} placeholder="010-0000-0000" className="h-9" />
            </div>
            <div className="space-y-1.5">
              <Label className="text-sm">사업자번호</Label>
              <Input value={supplierForm.business_number || ""} onChange={(e) => setSupplierForm((p) => ({ ...p, business_number: e.target.value }))} placeholder="000-00-00000" className="h-9" />
            </div>
            <div className="space-y-1.5">
              <Label className="text-sm">이메일</Label>
              <Input value={supplierForm.email || ""} onChange={(e) => setSupplierForm((p) => ({ ...p, email: e.target.value }))} placeholder="example@email.com" className="h-9" />
            </div>
            <div className="space-y-1.5 col-span-2">
              <Label className="text-sm">주소</Label>
              <Input value={supplierForm.address || ""} onChange={(e) => setSupplierForm((p) => ({ ...p, address: e.target.value }))} placeholder="사업장 주소" className="h-9" />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setSupplierModalOpen(false)}>취소</Button>
            <Button onClick={handleSupplierSave} disabled={saving}>
              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />} 저장
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 품목 선택 모달 */}
      <Dialog open={itemSelectOpen} onOpenChange={setItemSelectOpen}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>품목 선택</DialogTitle>
            <DialogDescription>공급업체에 추가할 품목을 선택하세요.</DialogDescription>
          </DialogHeader>
          <div className="flex gap-2">
            <Input placeholder="품목명 검색" value={itemSearchKeyword}
              onChange={(e) => setItemSearchKeyword(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && searchItems()}
              className="h-9 flex-1" />
            <Button size="sm" onClick={searchItems} disabled={itemSearchLoading} className="h-9">
              {itemSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4" /> 조회</>}
            </Button>
          </div>
          <div className="overflow-auto max-h-[350px] border rounded-lg">
            <Table>
              <TableHeader className="sticky top-0 z-10">
                <TableRow className="bg-muted hover:bg-muted">
                  <TableHead className="w-10 text-center">
                    <Checkbox
                      checked={itemSearchResults.length > 0 && itemCheckedIds.size === itemSearchResults.length}
                      onCheckedChange={(checked) => {
                        if (checked) setItemCheckedIds(new Set(itemSearchResults.map((i) => i.id)));
                        else setItemCheckedIds(new Set());
                      }}
                    />
                  </TableHead>
                  <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
                  <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
                  <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
                  <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
                  <TableHead className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준단가</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {itemSearchResults.length === 0 ? (
                  <TableRow><TableCell colSpan={6} className="text-center text-muted-foreground py-8 text-sm">검색 결과가 없어요</TableCell></TableRow>
                ) : itemSearchResults.map((item) => (
                  <TableRow key={item.id} className={cn("cursor-pointer", itemCheckedIds.has(item.id) && "bg-primary/5")}
                    onClick={() => setItemCheckedIds((prev) => { const next = new Set(prev); if (next.has(item.id)) next.delete(item.id); else next.add(item.id); return next; })}>
                    <TableCell className="text-center"><Checkbox checked={itemCheckedIds.has(item.id)} onCheckedChange={() => {}} /></TableCell>
                    <TableCell className="text-[13px]">{item.item_number}</TableCell>
                    <TableCell className="text-sm">{item.item_name}</TableCell>
                    <TableCell className="text-[13px]">{item.size || "-"}</TableCell>
                    <TableCell className="text-[13px]">{item.unit || "-"}</TableCell>
                    <TableCell className="text-[13px] text-right">{item.standard_price ? Number(item.standard_price).toLocaleString() : "-"}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
          <DialogFooter>
            <div className="flex items-center gap-2 w-full justify-between">
              <span className="text-sm text-muted-foreground">{itemCheckedIds.size}개 선택됨</span>
              <div className="flex gap-2">
                <Button variant="outline" onClick={() => setItemSelectOpen(false)}>취소</Button>
                <Button onClick={goToItemDetail} disabled={itemCheckedIds.size === 0}>
                  <Plus className="w-4 h-4" /> {itemCheckedIds.size}개 다음
                </Button>
              </div>
            </div>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 품목 상세 입력/수정 모달 */}
      <Dialog open={itemDetailOpen} onOpenChange={setItemDetailOpen}>
        <DialogContent className="max-w-[900px] overflow-y-auto" style={{ maxHeight: "90vh" }}>
          <DialogHeader>
            <DialogTitle>품목 매핑 {editItemData ? "수정" : "등록"} — {selectedSupplier?.supplier_name || ""}</DialogTitle>
            <DialogDescription>{editItemData ? "공급업체 품번/단가 정보를 수정합니다." : "품목별 공급업체 품번과 단가를 입력합니다."}</DialogDescription>
          </DialogHeader>
          <div className="space-y-6">
            {selectedItemsForDetail.map((item, idx) => {
              const itemKey = item.item_number || item.id;
              const m = itemMappings[itemKey] || {} as any;
              return (
                <div key={itemKey} className="border rounded-lg overflow-hidden">
                  <div className="flex items-center gap-2.5 px-4 py-2.5 bg-muted/50 border-b">
                    <span className="text-[13px] font-bold">{idx + 1}. {item.item_name || itemKey}</span>
                    <span className="text-[11px] font-mono text-muted-foreground bg-muted-foreground/10 px-2 py-0.5 rounded-full">{itemKey}</span>
                  </div>
                  <div className="p-4 space-y-4">
                    <div className="grid grid-cols-2 gap-3">
                      <div className="space-y-1.5">
                        <Label className="text-xs">공급업체 품번</Label>
                        <Input value={m.supplier_item_code || ""} onChange={(e) => updateMapping(itemKey, "supplier_item_code", e.target.value)} placeholder="공급업체 자체 품번" className="h-9 text-sm" />
                      </div>
                      <div className="space-y-1.5">
                        <Label className="text-xs">공급업체 품명</Label>
                        <Input value={m.supplier_item_name || ""} onChange={(e) => updateMapping(itemKey, "supplier_item_name", e.target.value)} placeholder="공급업체 자체 품명" className="h-9 text-sm" />
                      </div>
                    </div>
                    <div className="border rounded-lg p-3 bg-muted/30 space-y-3">
                      <span className="text-xs font-semibold text-muted-foreground">단가 정보</span>
                      <div className="grid grid-cols-4 gap-3">
                        <div className="space-y-1">
                          <Label className="text-[10px]">기준단가</Label>
                          <Input type="number" value={m.base_price || ""} onChange={(e) => updateMapping(itemKey, "base_price", e.target.value)} className="h-8 text-xs text-right" placeholder="0" />
                        </div>
                        <div className="space-y-1">
                          <Label className="text-[10px]">할인유형</Label>
                          <Select value={m.discount_type || "none"} onValueChange={(v) => updateMapping(itemKey, "discount_type", v)}>
                            <SelectTrigger className="h-8 text-xs"><SelectValue /></SelectTrigger>
                            <SelectContent>
                              <SelectItem value="none">할인없음</SelectItem>
                              <SelectItem value="rate">할인율(%)</SelectItem>
                              <SelectItem value="amount">할인금액</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                        <div className="space-y-1">
                          <Label className="text-[10px]">할인값</Label>
                          <Input type="number" value={m.discount_value || ""} onChange={(e) => updateMapping(itemKey, "discount_value", e.target.value)} className="h-8 text-xs text-right" placeholder="0" />
                        </div>
                        <div className="space-y-1">
                          <Label className="text-[10px]">계산단가</Label>
                          <Input value={m.calculated_price ? Number(m.calculated_price).toLocaleString() : "-"} className="h-8 text-[13px] text-right bg-muted/50 font-bold" disabled />
                        </div>
                      </div>
                      <div className="grid grid-cols-4 gap-3">
                        <div className="space-y-1">
                          <Label className="text-[10px]">통화</Label>
                          <Input value={m.currency_code || ""} onChange={(e) => updateMapping(itemKey, "currency_code", e.target.value)} className="h-8 text-xs" placeholder="KRW" />
                        </div>
                        <div className="space-y-1">
                          <Label className="text-[10px]">적용시작일</Label>
                          <Input type="date" value={m.start_date || ""} onChange={(e) => updateMapping(itemKey, "start_date", e.target.value)} className="h-8 text-xs" />
                        </div>
                        <div className="space-y-1">
                          <Label className="text-[10px]">적용종료일</Label>
                          <Input type="date" value={m.end_date || ""} onChange={(e) => updateMapping(itemKey, "end_date", e.target.value)} className="h-8 text-xs" />
                        </div>
                        <div />
                      </div>
                      <div className="grid grid-cols-4 gap-3">
                        <div className="space-y-1">
                          <Label className="text-[10px]">리드타임(일)</Label>
                          <Input type="number" value={m.lead_time_days || ""} onChange={(e) => updateMapping(itemKey, "lead_time_days", e.target.value)} className="h-8 text-xs" placeholder="0" />
                        </div>
                        <div className="space-y-1">
                          <Label className="text-[10px]">최소주문수량</Label>
                          <Input type="number" value={m.min_order_qty || ""} onChange={(e) => updateMapping(itemKey, "min_order_qty", e.target.value)} className="h-8 text-xs" placeholder="0" />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => {
              setItemDetailOpen(false);
              if (!editItemData) setItemSelectOpen(true);
              setEditItemData(null);
            }}>{editItemData ? "취소" : "← 이전"}</Button>
            <Button onClick={handleItemDetailSave} disabled={saving}>
              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />} 저장
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <ExcelUploadModal open={excelUploadOpen} onOpenChange={setExcelUploadOpen} tableName={SUPPLIER_TABLE} userId={user?.userId} onSuccess={fetchSuppliers} />

      {/* 테이블 설정 모달 */}
      <TableSettingsModal
        open={ts.open}
        onOpenChange={ts.setOpen}
        tableName={ts.tableName}
        settingsId={ts.settingsId}
        defaultVisibleKeys={ts.defaultVisibleKeys}
        onSave={ts.applySettings}
      />

      {ConfirmDialogComponent}
    </div>
  );
}
