"use client";

/**
 * 외주품목정보 — 하드코딩 페이지
 *
 * 좌측: 품목 목록 (subcontractor_item_mapping 기반 품목, item_info 조인)
 * 우측: 선택한 품목의 외주업체 정보 (subcontractor_item_mapping → subcontractor_mng 조인)
 *
 * 외주업체관리와 양방향 연동 (같은 subcontractor_item_mapping 테이블)
 */

import React, { useState, useEffect, useCallback, useMemo } 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 { Badge } from "@/components/ui/badge";
import {
  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
import { Plus, Save, Loader2, FileSpreadsheet, Download, Pencil, Inbox, Search, RotateCcw, 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";
import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";

const ITEM_TABLE = "item_info";
const MAPPING_TABLE = "subcontractor_item_mapping";
const SUBCONTRACTOR_TABLE = "subcontractor_mng";

const formatNum = (v: any) => (v == null || v === "" ? "-" : Number(v).toLocaleString());

const GRID_COLUMNS_CONFIG = [
  { key: "item_number", label: "품번" },
  { key: "item_name", label: "품명" },
  { key: "size", label: "규격" },
  { key: "unit", label: "단위" },
  { key: "standard_price", label: "기준단가" },
  { key: "selling_price", label: "판매가격" },
  { key: "currency_code", label: "통화" },
  { key: "status", label: "상태" },
];
export default function SubcontractorItemPage() {
  const { user } = useAuth();
  const { confirm, ConfirmDialogComponent } = useConfirmDialog();

  // 좌측: 품목
  const [items, setItems] = useState<any[]>([]);
  const [itemLoading, setItemLoading] = useState(false);
  const [itemCount, setItemCount] = useState(0);
  const [inputKeyword, setInputKeyword] = useState("");
  const [searchKeyword, setSearchKeyword] = useState("");
  const [selectedItemId, setSelectedItemId] = useState<string | null>(null);

  // 우측: 외주업체
  const [subcontractorItems, setSubcontractorItems] = useState<any[]>([]);
  const [subcontractorLoading, setSubcontractorLoading] = useState(false);

  // 카테고리
  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});

  // 외주업체 추가 모달
  const [subSelectOpen, setSubSelectOpen] = useState(false);
  const [subSearchKeyword, setSubSearchKeyword] = useState("");
  const [subSearchResults, setSubSearchResults] = useState<any[]>([]);
  const [subSearchLoading, setSubSearchLoading] = useState(false);
  const [subCheckedIds, setSubCheckedIds] = useState<Set<string>>(new Set());

  // 품목 수정 모달
  const [editItemOpen, setEditItemOpen] = useState(false);
  const [editItemForm, setEditItemForm] = useState<Record<string, any>>({});
  const [saving, setSaving] = useState(false);

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

  // 테이블 설정
  const ts = useTableSettings("c16-subcontractor-item", ITEM_TABLE, GRID_COLUMNS_CONFIG);

  // 카테고리 로드
  useEffect(() => {
    const load = async () => {
      const optMap: Record<string, { code: string; label: string }[]> = {};
      const flatten = (vals: any[]): { code: string; label: string }[] => {
        const result: { code: string; label: string }[] = [];
        for (const v of vals) {
          result.push({ code: v.valueCode, label: v.valueLabel });
          if (v.children?.length) result.push(...flatten(v.children));
        }
        return result;
      };
      for (const col of ["material", "division", "type", "status", "unit", "inventory_unit", "currency_code", "user_type01", "user_type02"]) {
        try {
          const res = await apiClient.get(`/table-categories/${ITEM_TABLE}/${col}/values`);
          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
        } catch { /* skip */ }
      }
      // 외주사관리에서 사용하는 subcontractor_item_prices.currency_code도 병합
      try {
        const res = await apiClient.get(`/table-categories/subcontractor_item_prices/currency_code/values`);
        if (res.data?.success) {
          const extra = flatten(res.data.data || []);
          const seen = new Set((optMap["currency_code"] || []).map((o) => o.code));
          for (const e of extra) {
            if (!seen.has(e.code)) {
              (optMap["currency_code"] ||= []).push(e);
              seen.add(e.code);
            }
          }
        }
      } catch { /* skip */ }
      // 외주업체 거래유형 (subcontractor_mng.division)
      try {
        const res = await apiClient.get(`/table-categories/${SUBCONTRACTOR_TABLE}/division/values`);
        if (res.data?.success) optMap["subcontractor_division"] = flatten(res.data.data || []);
      } catch { /* skip */ }
      setCategoryOptions(optMap);
    };
    load();
  }, []);

  const resolve = (col: string, code: string) => {
    if (!code) return "";
    return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
  };

  const mainTableColumns = useMemo<EDataTableColumn[]>(() => {
    const colProps: Record<string, Partial<EDataTableColumn>> = {
      item_number: { width: "w-[110px]" },
      item_name: { minWidth: "min-w-[130px]", render: (v) => v || "-" },
      size: { width: "w-[90px]", render: (v) => v || "-" },
      unit: { width: "w-[60px]", render: (v) => resolve("unit", v) || "-" },
      standard_price: { width: "w-[90px]", align: "right", formatNumber: true },
      selling_price: { width: "w-[90px]", align: "right", formatNumber: true },
      currency_code: { width: "w-[50px]", render: (v) => resolve("currency_code", v) || "-" },
      status: { width: "w-[60px]", render: (v) => v || "-" },
    };
    return ts.visibleColumns.map((col) => ({
      key: col.key,
      label: col.label,
      ...colProps[col.key],
    }));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [ts.visibleColumns, categoryOptions]);

  // 좌측: 품목 조회 (division이 "외주관리"인 품목만 필터링)
  const outsourcingDivisionCode = categoryOptions["division"]?.find(
    (o) => o.label === "외주관리" || o.label === "외주" || o.label.includes("외주")
  )?.code;

  const fetchItems = useCallback(async () => {
    setItemLoading(true);
    try {
      const filters: any[] = [];
      if (outsourcingDivisionCode) {
        filters.push({ columnName: "division", operator: "contains", value: outsourcingDivisionCode });
      }
      if (searchKeyword) {
        filters.push({ columnName: "item_name", operator: "contains", value: searchKeyword });
      }
      const res = await apiClient.post(`/table-management/tables/${ITEM_TABLE}/data`, {
        page: 1, size: 0,
        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
        autoFilter: true,
      });
      const raw = res.data?.data?.data || res.data?.data?.rows || [];
      const CATS = ["material", "division", "type", "status", "inventory_unit", "currency_code", "user_type01", "user_type02"];
      const data = raw.map((r: any) => {
        const converted = { ...r };
        for (const col of CATS) {
          if (converted[col]) converted[col] = resolve(col, converted[col]);
        }
        // "단위" 컬럼은 재고단위(inventory_unit)만 사용 — unit 폴백 제거
        converted.unit = converted.inventory_unit || "";
        return converted;
      });
      setItems(data);
      setItemCount(res.data?.data?.total || raw.length);
    } catch (err) {
      console.error("품목 조회 실패:", err);
      toast.error("품목 목록을 불러오는데 실패했습니다.");
    } finally {
      setItemLoading(false);
    }
  }, [searchKeyword, categoryOptions, outsourcingDivisionCode]);

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

  // 선택된 품목
  const selectedItem = items.find((i) => i.id === selectedItemId);

  // 우측: 외주업체 목록 조회
  useEffect(() => {
    if (!selectedItem?.item_number) { setSubcontractorItems([]); return; }
    const itemKey = selectedItem.item_number;
    const fetchSubcontractorItems = async () => {
      setSubcontractorLoading(true);
      try {
        const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
          page: 1, size: 0,
          dataFilter: { enabled: true, filters: [{ columnName: "item_id", operator: "equals", value: itemKey }] },
          autoFilter: true,
        });
        const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];

        const subIds = [...new Set(mappings.map((m: any) => m.subcontractor_id).filter(Boolean))];
        let subMap: Record<string, any> = {};
        if (subIds.length > 0) {
          try {
            const subRes = await apiClient.post(`/table-management/tables/${SUBCONTRACTOR_TABLE}/data`, {
              page: 1, size: subIds.length + 10,
              dataFilter: { enabled: true, filters: [{ columnName: "subcontractor_code", operator: "in", value: subIds }] },
              autoFilter: true,
            });
            for (const s of (subRes.data?.data?.data || subRes.data?.data?.rows || [])) {
              subMap[s.subcontractor_code] = s;
            }
          } catch { /* skip */ }
        }

        // 외주사관리에서 입력된 최신 단가(subcontractor_item_prices) 조회 → subcontractor_id 별 최신 1건
        const priceMap: Record<string, any> = {};
        try {
          const priceRes = await apiClient.post(`/table-management/tables/subcontractor_item_prices/data`, {
            page: 1, size: 0,
            dataFilter: { enabled: true, filters: [{ columnName: "item_id", operator: "equals", value: itemKey }] },
            autoFilter: true,
          });
          const prices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
          for (const p of prices) {
            const key = p.subcontractor_id;
            if (!key) continue;
            if (!priceMap[key] || (p.start_date && (!priceMap[key].start_date || p.start_date > priceMap[key].start_date))) {
              priceMap[key] = p;
            }
          }
        } catch { /* skip */ }

        setSubcontractorItems(mappings.map((m: any) => {
          const price = priceMap[m.subcontractor_id] || {};
          return {
            ...m,
            subcontractor_code: m.subcontractor_id,
            subcontractor_name: subMap[m.subcontractor_id]?.subcontractor_name || "",
            base_price: price.base_price ?? m.base_price,
            calculated_price: price.calculated_price ?? price.unit_price ?? m.calculated_price,
            currency_code: resolve("currency_code", price.currency_code ?? m.currency_code),
          };
        }));
      } catch (err) {
        console.error("외주업체 조회 실패:", err);
      } finally {
        setSubcontractorLoading(false);
      }
    };
    fetchSubcontractorItems();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [selectedItem?.item_number, categoryOptions]);

  // 외주업체 검색
  const searchSubcontractors = async () => {
    setSubSearchLoading(true);
    try {
      const filters: any[] = [];
      if (subSearchKeyword) filters.push({ columnName: "subcontractor_name", operator: "contains", value: subSearchKeyword });
      const res = await apiClient.post(`/table-management/tables/${SUBCONTRACTOR_TABLE}/data`, {
        page: 1, size: 50,
        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
        autoFilter: true,
      });
      const all = res.data?.data?.data || res.data?.data?.rows || [];
      const existing = new Set(subcontractorItems.map((s: any) => s.subcontractor_id || s.subcontractor_code));
      setSubSearchResults(all.filter((s: any) => !existing.has(s.subcontractor_code)));
    } catch { /* skip */ } finally { setSubSearchLoading(false); }
  };

  // 외주업체 추가 저장
  const addSelectedSubcontractors = async () => {
    const selected = subSearchResults.filter((s) => subCheckedIds.has(s.id));
    if (selected.length === 0 || !selectedItem) return;
    try {
      for (const sub of selected) {
        await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
          id: crypto.randomUUID(),
          subcontractor_id: sub.subcontractor_code,
          item_id: selectedItem.item_number,
        });
      }
      toast.success(`${selected.length}개 외주업체가 추가되었습니다.`);
      setSubCheckedIds(new Set());
      setSubSelectOpen(false);
      const sid = selectedItemId;
      setSelectedItemId(null);
      setTimeout(() => setSelectedItemId(sid), 50);
    } catch (err: any) {
      toast.error(err.response?.data?.message || "외주업체 추가에 실패했습니다.");
    }
  };

  // 품목 수정
  const openEditItem = () => {
    if (!selectedItem) return;
    setEditItemForm({ ...selectedItem });
    setEditItemOpen(true);
  };

  const handleEditSave = async () => {
    if (!editItemForm.id) return;
    setSaving(true);
    try {
      await apiClient.put(`/table-management/tables/${ITEM_TABLE}/edit`, {
        originalData: { id: editItemForm.id },
        updatedData: {
          selling_price: editItemForm.selling_price || null,
          standard_price: editItemForm.standard_price || null,
          currency_code: editItemForm.currency_code || null,
        },
      });
      toast.success("수정되었습니다.");
      setEditItemOpen(false);
      fetchItems();
    } catch (err: any) {
      toast.error(err.response?.data?.message || "수정에 실패했습니다.");
    } finally {
      setSaving(false);
    }
  };

  // 엑셀 다운로드
  const handleExcelDownload = async () => {
    if (items.length === 0) return;
    const data = items.map((i) => ({
      품번: i.item_number, 품명: i.item_name, 규격: i.size, 단위: i.unit,
      기준단가: i.standard_price, 판매가격: i.selling_price, 통화: i.currency_code, 상태: i.status,
    }));
    await exportToExcel(data, "외주품목정보.xlsx", "외주품목");
    toast.success("다운로드 완료");
  };

  const handleSearch = () => setSearchKeyword(inputKeyword);

  return (
    <div className="flex h-full flex-col gap-3 p-3">
      {/* 브레드크럼 */}
      <div className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
        <span>외주관리</span>
        <span className="text-muted-foreground/50">/</span>
        <span className="text-foreground font-medium">외주품목정보</span>
      </div>

      {/* 검색 바 */}
      <div className="flex items-center gap-2 px-4 py-3 bg-card border rounded-lg shrink-0">
        <span className="text-[11px] font-semibold text-muted-foreground whitespace-nowrap">품명</span>
        <Input
          className="h-9 w-[200px]"
          placeholder="품명 검색"
          value={inputKeyword}
          onChange={(e) => setInputKeyword(e.target.value)}
          onKeyDown={(e) => e.key === "Enter" && handleSearch()}
        />
        <Button variant="outline" size="sm" className="h-9" onClick={() => { setInputKeyword(""); setSearchKeyword(""); }}>
          <RotateCcw className="w-3.5 h-3.5 mr-1" /> 초기화
        </Button>
        <Button size="sm" className="h-9" onClick={handleSearch}>
          <Search className="w-3.5 h-3.5 mr-1" /> 조회
        </Button>
        <div className="ml-auto flex gap-1.5">
          <Button variant="outline" size="sm" className="h-9" onClick={() => setExcelUploadOpen(true)}>
            <FileSpreadsheet className="w-3.5 h-3.5 mr-1" /> 엑셀 업로드
          </Button>
          <Button variant="outline" size="sm" className="h-9" onClick={handleExcelDownload}>
            <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
          </Button>
        </div>
      </div>

      {/* 분할 패널 */}
      <div className="flex-1 overflow-hidden border rounded-lg bg-card">
        <ResizablePanelGroup direction="horizontal">
          {/* 좌측: 외주품목 목록 */}
          <ResizablePanel defaultSize={55} minSize={30}>
            <div className="flex flex-col h-full">
              <div className="flex items-center justify-between p-3 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">{itemCount}건</span>
                </div>
                <div className="flex items-center gap-1.5">
                  <Button variant="outline" size="sm" disabled={!selectedItemId} onClick={openEditItem}>
                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
                  </Button>
                  <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)}>
                    <Settings2 className="w-3.5 h-3.5" />
                  </Button>
                </div>
              </div>
              <EDataTable
                columns={mainTableColumns}
                data={ts.groupData(items)}
                loading={itemLoading}
                emptyMessage="등록된 외주품목이 없어요"
                selectedId={selectedItemId}
                onSelect={(id) => setSelectedItemId(id)}
                onRowDoubleClick={() => openEditItem()}
                showPagination={true}
                draggableColumns={false}
                columnOrderKey="c16-subcontractor-item-main"
              />
            </div>
          </ResizablePanel>

          <ResizableHandle withHandle />

          {/* 우측: 외주업체 정보 */}
          <ResizablePanel defaultSize={45} minSize={25}>
            <div className="flex flex-col h-full">
              <div className="flex items-center justify-between p-3 border-b bg-muted/50 shrink-0">
                <div className="flex items-center gap-2">
                  <h3 className="text-[13px] font-bold">외주업체 정보</h3>
                  {selectedItem && <Badge variant="outline" className="font-normal">{selectedItem.item_name}</Badge>}
                </div>
                <Button variant="outline" size="sm" disabled={!selectedItemId}
                  onClick={() => { setSubCheckedIds(new Set()); setSubSelectOpen(true); searchSubcontractors(); }}>
                  <Plus className="w-3.5 h-3.5 mr-1" /> 외주업체 추가
                </Button>
              </div>
              {!selectedItemId ? (
                <div className="flex-1 flex flex-col items-center justify-center gap-3 m-3 border-2 border-dashed rounded-lg text-center">
                  <Inbox className="w-12 h-12 text-muted-foreground/40" />
                  <div>
                    <p className="text-sm font-semibold text-muted-foreground">품목을 선택해주세요</p>
                    <p className="text-xs text-muted-foreground mt-1">좌측에서 품목을 선택하면 외주업체 정보가 표시돼요</p>
                  </div>
                </div>
              ) : subcontractorLoading ? (
                <div className="flex items-center justify-center py-12">
                  <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
                </div>
              ) : subcontractorItems.length === 0 ? (
                <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
                  <Inbox className="w-8 h-8 mb-2 opacity-40" />
                  <p className="text-sm">등록된 외주업체가 없어요</p>
                </div>
              ) : (
                <div className="flex-1 overflow-auto">
                  <Table noWrapper>
                    <thead className="sticky top-0 z-10 bg-card">
                      <TableRow>
                        <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주업체코드</TableHead>
                        <TableHead className="min-w-[120px] 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-[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>
                      </TableRow>
                    </thead>
                    <TableBody>
                      {subcontractorItems.map((item, idx) => (
                        <TableRow key={item.id || idx}>
                          <TableCell className="text-[13px] font-mono">{item.subcontractor_code || "-"}</TableCell>
                          <TableCell className="text-sm">{item.subcontractor_name || "-"}</TableCell>
                          <TableCell className="text-[13px]">{item.subcontractor_item_code || "-"}</TableCell>
                          <TableCell className="text-[13px]">{item.subcontractor_item_name || "-"}</TableCell>
                          <TableCell className="text-[13px] text-right font-mono">{formatNum(item.base_price)}</TableCell>
                          <TableCell className="text-[13px] text-right font-mono">{formatNum(item.calculated_price)}</TableCell>
                          <TableCell className="text-[13px]">{item.currency_code || "-"}</TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </div>
              )}
            </div>
          </ResizablePanel>
        </ResizablePanelGroup>
      </div>

      {/* 품목 수정 모달 */}
      <Dialog open={editItemOpen} onOpenChange={setEditItemOpen}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>외주품목 수정</DialogTitle>
            <DialogDescription>{editItemForm.item_number || ""} — {editItemForm.item_name || ""}</DialogDescription>
          </DialogHeader>
          <div className="grid grid-cols-2 gap-4 py-4">
            {[
              { key: "item_number", label: "품목코드" },
              { key: "item_name", label: "품명" },
              { key: "size", label: "규격" },
              { key: "unit", label: "단위" },
              { key: "material", label: "재질" },
              { key: "status", label: "상태" },
            ].map((f) => (
              <div key={f.key} className="space-y-1.5">
                <Label className="text-sm text-muted-foreground">{f.label}</Label>
                <Input value={editItemForm[f.key] || ""} className="h-9 bg-muted/50" disabled />
              </div>
            ))}
            <div className="col-span-2 border-t my-2" />
            <div className="space-y-1.5">
              <Label className="text-sm">판매가격</Label>
              <Input value={editItemForm.selling_price || ""} onChange={(e) => setEditItemForm((p) => ({ ...p, selling_price: e.target.value }))}
                placeholder="판매가격" className="h-9" />
            </div>
            <div className="space-y-1.5">
              <Label className="text-sm">기준단가</Label>
              <Input value={editItemForm.standard_price || ""} onChange={(e) => setEditItemForm((p) => ({ ...p, standard_price: e.target.value }))}
                placeholder="기준단가" className="h-9" />
            </div>
            <div className="space-y-1.5">
              <Label className="text-sm">통화</Label>
              <Select value={editItemForm.currency_code || ""} onValueChange={(v) => setEditItemForm((p) => ({ ...p, currency_code: v }))}>
                <SelectTrigger className="h-9"><SelectValue placeholder="통화" /></SelectTrigger>
                <SelectContent>
                  {(categoryOptions["currency_code"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
                </SelectContent>
              </Select>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setEditItemOpen(false)}>취소</Button>
            <Button onClick={handleEditSave} disabled={saving}>
              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 외주업체 추가 모달 */}
      <Dialog open={subSelectOpen} onOpenChange={setSubSelectOpen}>
        <DialogContent className="max-w-2xl max-h-[70vh] flex flex-col overflow-hidden">
          <DialogHeader>
            <DialogTitle>외주업체 선택</DialogTitle>
            <DialogDescription>품목에 추가할 외주업체를 선택해주세요.</DialogDescription>
          </DialogHeader>
          <div className="flex gap-2">
            <Input placeholder="외주업체명 검색" value={subSearchKeyword}
              onChange={(e) => setSubSearchKeyword(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && searchSubcontractors()}
              className="h-9 flex-1" />
            <Button size="sm" onClick={searchSubcontractors} disabled={subSearchLoading} className="h-9">
              {subSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" /> 조회</>}
            </Button>
          </div>
          <div className="flex-1 overflow-auto border rounded-lg">
            <Table noWrapper>
              <thead className="sticky top-0 z-10 bg-card">
                <TableRow>
                  <TableHead className="w-[40px] text-center">
                    <input type="checkbox"
                      checked={subSearchResults.length > 0 && subCheckedIds.size === subSearchResults.length}
                      onChange={(e) => {
                        if (e.target.checked) setSubCheckedIds(new Set(subSearchResults.map((s) => s.id)));
                        else setSubCheckedIds(new Set());
                      }} />
                  </TableHead>
                  <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주업체코드</TableHead>
                  <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주업체명</TableHead>
                  <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래유형</TableHead>
                  <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>
                </TableRow>
              </thead>
              <TableBody>
                {subSearchResults.length === 0 ? (
                  <TableRow><TableCell colSpan={5} className="text-center text-muted-foreground py-8">검색 결과가 없어요</TableCell></TableRow>
                ) : subSearchResults.map((s) => (
                  <TableRow key={s.id} className={cn("cursor-pointer", subCheckedIds.has(s.id) && "bg-primary/5")}
                    onClick={() => setSubCheckedIds((prev) => {
                      const next = new Set(prev);
                      if (next.has(s.id)) next.delete(s.id); else next.add(s.id);
                      return next;
                    })}>
                    <TableCell className="text-center"><input type="checkbox" checked={subCheckedIds.has(s.id)} readOnly /></TableCell>
                    <TableCell className="text-[13px]">{s.subcontractor_code}</TableCell>
                    <TableCell className="text-sm">{s.subcontractor_name}</TableCell>
                    <TableCell className="text-[13px]">{resolve("subcontractor_division", s.division)}</TableCell>
                    <TableCell className="text-[13px]">{s.contact_person}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
          <DialogFooter>
            <div className="flex items-center gap-2 w-full justify-between">
              <span className="text-sm text-muted-foreground">{subCheckedIds.size}개 선택됨</span>
              <div className="flex gap-2">
                <Button variant="outline" onClick={() => setSubSelectOpen(false)}>취소</Button>
                <Button onClick={addSelectedSubcontractors} disabled={subCheckedIds.size === 0}>
                  <Plus className="w-4 h-4 mr-1" /> {subCheckedIds.size}개 추가
                </Button>
              </div>
            </div>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 엑셀 업로드 */}
      <ExcelUploadModal
        open={excelUploadOpen}
        onOpenChange={setExcelUploadOpen}
        tableName={ITEM_TABLE}
        userId={user?.userId}
        onSuccess={() => fetchItems()}
      />

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

      {ConfirmDialogComponent}
    </div>
  );
}
