"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import { GitBranch, Loader2, PackagePlus, Pencil, Plus, Save, Search, Star, Trash2 } from "lucide-react";
import { toast } from "sonner";

import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import {
  createRoutingVersion,
  getProcessList,
  getRegisteredItems,
  getRoutingDetails,
  getRoutingVersions,
  registerItemsBatch,
  saveRoutingDetails,
  searchAllItems,
  unregisterItem,
  type ItemForRouting,
  type ProcessMaster,
  type RegisteredItem,
  type RoutingDetail,
  type RoutingVersion,
} from "@/lib/api/processInfo";
import { cn } from "@/lib/utils";

function normalizeDefaultFlag(v: RoutingVersion): boolean {
  const raw = v.is_default as unknown;
  if (typeof raw === "boolean") return raw;
  if (raw === "t" || raw === true || raw === "Y" || raw === "true") return true;
  return false;
}

function sortDetailsBySeq(rows: RoutingDetail[]): RoutingDetail[] {
  return [...rows].sort((a, b) => {
    const na = parseInt(String(a.seq_no), 10) || 0;
    const nb = parseInt(String(b.seq_no), 10) || 0;
    return na - nb;
  });
}

export function ItemRoutingTab() {
  const [searchInput, setSearchInput] = useState("");
  const [debouncedSearch, setDebouncedSearch] = useState("");
  const [items, setItems] = useState<RegisteredItem[]>([]);
  const [itemsLoading, setItemsLoading] = useState(false);
  const [selectedItem, setSelectedItem] = useState<RegisteredItem | null>(null);

  const [versions, setVersions] = useState<RoutingVersion[]>([]);
  const [versionsLoading, setVersionsLoading] = useState(false);
  const [selectedVersionId, setSelectedVersionId] = useState<string | null>(null);

  const [details, setDetails] = useState<RoutingDetail[]>([]);
  const [detailsLoading, setDetailsLoading] = useState(false);
  const [saving, setSaving] = useState(false);

  const [selectedDetailIds, setSelectedDetailIds] = useState<Set<string>>(new Set());

  const [processes, setProcesses] = useState<ProcessMaster[]>([]);
  const [processesLoading, setProcessesLoading] = useState(false);

  const [versionDialogOpen, setVersionDialogOpen] = useState(false);
  const [versionName, setVersionName] = useState("");
  const [versionDescription, setVersionDescription] = useState("");
  const [versionIsDefault, setVersionIsDefault] = useState(false);
  const [versionSubmitting, setVersionSubmitting] = useState(false);

  const [detailDialogOpen, setDetailDialogOpen] = useState(false);
  const [detailDialogMode, setDetailDialogMode] = useState<"add" | "edit">("add");
  const [editingDetailId, setEditingDetailId] = useState<string | null>(null);
  const [formProcessCode, setFormProcessCode] = useState("");
  const [formSeqNo, setFormSeqNo] = useState("");
  const [formRequired, setFormRequired] = useState("Y");
  const [formFixedOrder, setFormFixedOrder] = useState("Y");
  const [formWorkType, setFormWorkType] = useState("내부");
  const [formStandardTime, setFormStandardTime] = useState("");
  const [formOutsource, setFormOutsource] = useState("");
  const [detailSubmitting, setDetailSubmitting] = useState(false);

  // 품목 등록 모달 state
  const [registerDialogOpen, setRegisterDialogOpen] = useState(false);
  const [registerSearch, setRegisterSearch] = useState("");
  const [registerSearchDebounced, setRegisterSearchDebounced] = useState("");
  const [registerItems, setRegisterItems] = useState<ItemForRouting[]>([]);
  const [registerLoading, setRegisterLoading] = useState(false);
  const [registerSelectedIds, setRegisterSelectedIds] = useState<Set<string>>(new Set());
  const [registerSubmitting, setRegisterSubmitting] = useState(false);

  useEffect(() => {
    const t = window.setTimeout(() => setDebouncedSearch(searchInput.trim()), 300);
    return () => window.clearTimeout(t);
  }, [searchInput]);

  useEffect(() => {
    const t = window.setTimeout(() => setRegisterSearchDebounced(registerSearch.trim()), 300);
    return () => window.clearTimeout(t);
  }, [registerSearch]);

  const loadItems = useCallback(async (search: string) => {
    setItemsLoading(true);
    try {
      const res = await getRegisteredItems(search || undefined);
      if (res.success && res.data) {
        setItems(res.data);
      } else {
        toast.error(res.message || "품목 목록을 불러오지 못했습니다.");
        setItems([]);
      }
    } finally {
      setItemsLoading(false);
    }
  }, []);

  useEffect(() => {
    void loadItems(debouncedSearch);
  }, [debouncedSearch, loadItems]);

  const loadProcesses = useCallback(async () => {
    setProcessesLoading(true);
    try {
      const procRes = await getProcessList({ useYn: "Y" });
      if (!procRes.success || !procRes.data) {
        toast.error(procRes.message || "공정 목록을 불러오지 못했습니다.");
        setProcesses([]);
        return;
      }
      setProcesses(procRes.data);
    } finally {
      setProcessesLoading(false);
    }
  }, []);

  useEffect(() => {
    void loadProcesses();
  }, [loadProcesses]);

  // 등록 모달 품목 검색
  const loadRegisterItems = useCallback(async (search: string) => {
    setRegisterLoading(true);
    try {
      const res = await searchAllItems(search || undefined);
      if (res.success && res.data) {
        setRegisterItems(res.data);
      } else {
        setRegisterItems([]);
      }
    } finally {
      setRegisterLoading(false);
    }
  }, []);

  useEffect(() => {
    if (!registerDialogOpen) return;
    void loadRegisterItems(registerSearchDebounced);
  }, [registerSearchDebounced, registerDialogOpen, loadRegisterItems]);

  // 이미 등록된 품목인지 판별 (item_code 기준)
  const registeredItemCodes = useMemo(() => new Set(items.map((i) => i.item_code)), [items]);

  const handleRegisterItems = async () => {
    if (registerSelectedIds.size === 0) {
      toast.error("등록할 품목을 선택하세요.");
      return;
    }
    setRegisterSubmitting(true);
    try {
      const selected = registerItems.filter((ri) => registerSelectedIds.has(ri.id));
      const batchItems = selected.map((item) => ({
        itemId: item.id,
        itemCode: item.item_number,
      }));
      const res = await registerItemsBatch(batchItems);
      if (res.success) {
        toast.success(`${batchItems.length}건 품목이 등록되었습니다.`);
        setRegisterDialogOpen(false);
        setRegisterSearch("");
        setRegisterSelectedIds(new Set());
        void loadItems(debouncedSearch);
      } else {
        toast.error(res.message || "품목 등록에 실패했습니다.");
      }
    } finally {
      setRegisterSubmitting(false);
    }
  };

  const loadVersions = useCallback(async (item: RegisteredItem, preferVersionId?: string) => {
    setVersionsLoading(true);
    setVersions([]);
    setSelectedVersionId(null);
    setDetails([]);
    setSelectedDetailIds(new Set());
    try {
      const res = await getRoutingVersions(item.item_code);
      if (!res.success || !res.data) {
        toast.error(res.message || "라우팅 버전을 불러오지 못했습니다.");
        return;
      }
      const list = res.data.map((v) => ({ ...v, is_default: normalizeDefaultFlag(v) }));
      setVersions(list);
      const preferred = preferVersionId ? list.find((v) => v.id === preferVersionId) : undefined;
      const def = list.find((v) => v.is_default);
      const pick = preferred ?? def ?? list[0];
      if (pick) setSelectedVersionId(pick.id);
    } finally {
      setVersionsLoading(false);
    }
  }, []);

  useEffect(() => {
    if (!selectedItem) return;
    void loadVersions(selectedItem);
  }, [selectedItem, loadVersions]);

  const loadDetails = useCallback(async (versionId: string) => {
    setDetailsLoading(true);
    setSelectedDetailIds(new Set());
    try {
      const res = await getRoutingDetails(versionId);
      if (res.success && res.data) {
        setDetails(sortDetailsBySeq(res.data));
      } else {
        toast.error(res.message || "라우팅 공정을 불러오지 못했습니다.");
        setDetails([]);
      }
    } finally {
      setDetailsLoading(false);
    }
  }, []);

  useEffect(() => {
    if (!selectedVersionId) {
      setDetails([]);
      return;
    }
    void loadDetails(selectedVersionId);
  }, [selectedVersionId, loadDetails]);

  const showOutsourceField = formWorkType === "외주" || formWorkType === "선택가능";

  const openAddDetailDialog = () => {
    if (!selectedVersionId) {
      toast.error("먼저 라우팅 버전을 선택하세요.");
      return;
    }
    setDetailDialogMode("add");
    setEditingDetailId(null);
    setFormProcessCode("");
    const nextSeq = details.length === 0 ? 1 : Math.max(...details.map((d) => parseInt(String(d.seq_no), 10) || 0)) + 1;
    setFormSeqNo(String(nextSeq));
    setFormRequired("Y");
    setFormFixedOrder("Y");
    setFormWorkType("내부");
    setFormStandardTime("");
    setFormOutsource("");
    setDetailDialogOpen(true);
  };

  const openEditDetailDialog = () => {
    if (!selectedVersionId) {
      toast.error("먼저 라우팅 버전을 선택하세요.");
      return;
    }
    if (selectedDetailIds.size !== 1) {
      toast.error("수정할 공정 한 건만 선택하세요.");
      return;
    }
    const id = [...selectedDetailIds][0];
    const row = details.find((d) => d.id === id);
    if (!row) {
      toast.error("선택한 공정을 찾을 수 없습니다.");
      return;
    }
    setDetailDialogMode("edit");
    setEditingDetailId(row.id);
    setFormProcessCode(row.process_code);
    setFormSeqNo(String(row.seq_no));
    setFormRequired(row.is_required === "N" ? "N" : "Y");
    setFormFixedOrder(row.is_fixed_order === "N" ? "N" : "Y");
    setFormWorkType(row.work_type || "내부");
    setFormStandardTime(row.standard_time || "");
    setFormOutsource(row.outsource_supplier || "");
    setDetailDialogOpen(true);
  };

  const submitDetailForm = () => {
    if (!selectedVersionId) return;
    if (!formProcessCode) {
      toast.error("공정을 선택하세요.");
      return;
    }
    const seq = parseInt(formSeqNo, 10);
    if (Number.isNaN(seq) || seq < 1) {
      toast.error("올바른 순번을 입력하세요.");
      return;
    }
    const st = formStandardTime.trim();
    if (st !== "" && Number.isNaN(Number(st))) {
      toast.error("표준작업시간은 숫자로 입력하세요.");
      return;
    }
    const proc = processes.find((p) => p.process_code === formProcessCode);
    const outsource = showOutsourceField ? formOutsource.trim() : "";

    setDetailSubmitting(true);
    try {
      if (detailDialogMode === "add") {
        const newRow: RoutingDetail = {
          id: `new-${crypto.randomUUID()}`,
          routing_version_id: selectedVersionId,
          seq_no: String(seq),
          process_code: formProcessCode,
          process_name: proc?.process_name,
          is_required: formRequired,
          is_fixed_order: formFixedOrder,
          work_type: formWorkType,
          standard_time: st || "0",
          outsource_supplier: outsource,
        };
        setDetails((prev) => sortDetailsBySeq([...prev, newRow]));
        toast.success("공정이 추가되었습니다. 저장을 눌러 반영하세요.");
      } else if (editingDetailId) {
        setDetails((prev) =>
          sortDetailsBySeq(
            prev.map((d) =>
              d.id === editingDetailId
                ? {
                    ...d,
                    seq_no: String(seq),
                    process_code: formProcessCode,
                    process_name: proc?.process_name ?? d.process_name,
                    is_required: formRequired,
                    is_fixed_order: formFixedOrder,
                    work_type: formWorkType,
                    standard_time: st || "0",
                    outsource_supplier: outsource,
                  }
                : d,
            ),
          ),
        );
        toast.success("공정이 수정되었습니다. 저장을 눌러 반영하세요.");
      }
      setDetailDialogOpen(false);
    } finally {
      setDetailSubmitting(false);
    }
  };

  const deleteSelectedDetails = () => {
    if (selectedDetailIds.size === 0) {
      toast.error("삭제할 공정을 선택하세요.");
      return;
    }
    setDetails((prev) => prev.filter((d) => !selectedDetailIds.has(d.id)));
    setSelectedDetailIds(new Set());
    toast.success("선택한 공정이 목록에서 제거되었습니다. 저장을 눌러 반영하세요.");
  };

  const toggleDetailSelected = (id: string, checked: boolean) => {
    setSelectedDetailIds((prev) => {
      const next = new Set(prev);
      if (checked) next.add(id);
      else next.delete(id);
      return next;
    });
  };

  const toggleAllDetails = (checked: boolean) => {
    if (!checked) {
      setSelectedDetailIds(new Set());
      return;
    }
    setSelectedDetailIds(new Set(details.map((d) => d.id)));
  };

  const allDetailsSelected = details.length > 0 && details.every((d) => selectedDetailIds.has(d.id));

  const persistDetails = async () => {
    if (!selectedVersionId) {
      toast.error("저장할 버전이 없습니다.");
      return;
    }
    const payload = details.map((d) => ({
      seq_no: String(d.seq_no),
      process_code: d.process_code,
      is_required: d.is_required || "Y",
      is_fixed_order: d.is_fixed_order || "Y",
      work_type: d.work_type || "내부",
      standard_time: String(d.standard_time ?? "0"),
      outsource_supplier: d.outsource_supplier || "",
    }));

    setSaving(true);
    try {
      const res = await saveRoutingDetails(selectedVersionId, payload);
      if (res.success) {
        toast.success("저장되었습니다.");
        await loadDetails(selectedVersionId);
      } else {
        toast.error(res.message || "저장에 실패했습니다.");
      }
    } finally {
      setSaving(false);
    }
  };

  const submitNewVersion = async () => {
    if (!selectedItem) return;
    const name = versionName.trim();
    if (!name) {
      toast.error("버전명을 입력하세요.");
      return;
    }
    setVersionSubmitting(true);
    try {
      const res = await createRoutingVersion({
        item_code: selectedItem.item_code,
        version_name: name,
        description: versionDescription.trim() || undefined,
        is_default: versionIsDefault || undefined,
      });
      if (res.success && res.data) {
        toast.success("버전이 추가되었습니다.");
        setVersionDialogOpen(false);
        setVersionName("");
        setVersionDescription("");
        setVersionIsDefault(false);
        const created = res.data as RoutingVersion;
        await loadVersions(selectedItem, created?.id);
      } else {
        toast.error(res.message || "버전 추가에 실패했습니다.");
      }
    } finally {
      setVersionSubmitting(false);
    }
  };

  return (
    <div className="flex min-h-[420px] w-full flex-1 flex-col md:min-h-[560px]">
      <ResizablePanelGroup
        direction="horizontal"
        className="border-border flex min-h-[420px] flex-1 rounded-lg border md:min-h-[560px]"
      >
        <ResizablePanel defaultSize={30} minSize={18} className="min-w-0">
          <div className="flex h-full flex-col gap-3 p-3 sm:p-4">
            <div className="flex items-center gap-2">
              <div className="relative flex-1">
                <Search className="text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2 sm:h-4 sm:w-4" />
              <Input
                value={searchInput}
                onChange={(e) => setSearchInput(e.target.value)}
                placeholder="품목코드 / 품목명 검색"
                className="focus-visible:ring-ring h-8 pl-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:pl-9 sm:text-sm"
                aria-label="품목 검색"
              />
              </div>
              <Button
                type="button"
                size="icon"
                variant="outline"
                className="h-8 w-8 shrink-0 sm:h-10 sm:w-10"
                onClick={() => {
                  setRegisterSearch("");
                  setRegisterSelectedIds(new Set());
                  setRegisterItems([]);
                  setRegisterDialogOpen(true);
                }}
                title="품목 등록"
              >
                <PackagePlus className="h-4 w-4" />
              </Button>
            </div>
            <div className="min-h-0 flex-1 overflow-hidden">
              {itemsLoading ? (
                <div className="text-muted-foreground flex h-40 items-center justify-center gap-2 text-xs sm:text-sm">
                  <Loader2 className="text-primary h-5 w-5 animate-spin" />
                  불러오는 중...
                </div>
              ) : items.length === 0 ? (
                <div className="flex flex-col items-center justify-center gap-3 px-1 py-10">
                  <p className="text-muted-foreground text-center text-xs sm:text-sm">등록된 품목이 없습니다.</p>
                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    className="gap-1 text-xs"
                    onClick={() => {
                      setRegisterSearch("");
                      setRegisterSelectedIds(new Set());
                      setRegisterItems([]);
                      setRegisterDialogOpen(true);
                    }}
                  >
                    <PackagePlus className="h-3.5 w-3.5" />
                    품목 등록하기
                  </Button>
                </div>
              ) : (
                <div className="flex h-full max-h-[calc(100vh-16rem)] flex-col gap-2 overflow-y-auto pr-1">
                  {items.map((item) => {
                    const active = selectedItem?.id === item.id;
                    return (
                      <button
                        key={item.id}
                        type="button"
                        onClick={() => setSelectedItem(item)}
                        className={cn(
                          "focus-visible:ring-ring w-full rounded-lg border p-3 text-left transition-colors focus-visible:ring-2 focus-visible:ring-offset-2",
                          "border-border bg-card hover:bg-accent/50 shadow-sm",
                          active && "border-primary ring-ring/30 ring-2",
                        )}
                      >
                        <p className="text-foreground text-xs font-medium sm:text-sm">{item.item_code}</p>
                        <p className="text-muted-foreground mt-0.5 line-clamp-2 text-[11px] sm:text-xs">
                          {item.item_name}
                        </p>
                      </button>
                    );
                  })}
                </div>
              )}
            </div>
          </div>
        </ResizablePanel>

        <ResizableHandle withHandle />

        <ResizablePanel defaultSize={70} minSize={35} className="min-w-0">
          <div className="flex h-full min-h-0 flex-col">
            {!selectedItem ? (
              <div className="text-muted-foreground flex flex-1 flex-col items-center justify-center gap-2 px-4 text-center text-xs sm:text-sm">
                <GitBranch className="h-8 w-8 opacity-50" aria-hidden />
                좌측에서 품목을 선택하면 라우팅을 관리할 수 있습니다.
              </div>
            ) : (
              <>
                <div className="border-border flex shrink-0 flex-col gap-3 border-b p-3 sm:p-4">
                  <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                    <div className="min-w-0">
                      <p className="text-foreground text-xs font-semibold sm:text-sm">{selectedItem.item_name}</p>
                      <p className="text-muted-foreground mt-0.5 text-[11px] sm:text-xs">
                        품목코드 {selectedItem.item_code}
                      </p>
                    </div>
                    <div className="flex shrink-0 gap-2">
                      <Button
                        type="button"
                        size="sm"
                        variant="destructive"
                        className="h-8 gap-1 text-xs sm:h-9 sm:text-sm"
                        onClick={async () => {
                          if (!selectedItem.registered_id) return;
                          const res = await unregisterItem(selectedItem.registered_id);
                          if (res.success) {
                            toast.success("품목 등록이 해제되었습니다.");
                            setSelectedItem(null);
                            void loadItems(debouncedSearch);
                          } else {
                            toast.error(res.message || "등록 해제에 실패했습니다.");
                          }
                        }}
                      >
                        <Trash2 className="h-3.5 w-3.5 sm:h-4 sm:w-4" />
                        등록 해제
                      </Button>
                      <Button
                        type="button"
                        size="sm"
                        className="h-8 gap-1 text-xs sm:h-9 sm:text-sm"
                        onClick={() => {
                          setVersionName("");
                          setVersionDescription("");
                          setVersionIsDefault(false);
                          setVersionDialogOpen(true);
                        }}
                      >
                        <Plus className="h-3.5 w-3.5 sm:h-4 sm:w-4" />
                        버전 추가
                      </Button>
                    </div>
                  </div>

                  <div className="flex flex-wrap items-center gap-2">
                    {versionsLoading ? (
                      <div className="text-muted-foreground flex items-center gap-2 text-xs sm:text-sm">
                        <Loader2 className="text-primary h-4 w-4 animate-spin" />
                        버전 불러오는 중...
                      </div>
                    ) : versions.length === 0 ? (
                      <p className="text-muted-foreground text-xs sm:text-sm">
                        등록된 버전이 없습니다. 버전을 추가하세요.
                      </p>
                    ) : (
                      versions.map((v) => {
                        const selected = v.id === selectedVersionId;
                        const def = normalizeDefaultFlag(v);
                        return (
                          <button
                            key={v.id}
                            type="button"
                            onClick={() => setSelectedVersionId(v.id)}
                            className={cn(
                              "focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 sm:text-sm",
                              selected
                                ? "border-primary bg-primary text-primary-foreground"
                                : "border-border bg-secondary text-secondary-foreground hover:bg-secondary/80",
                            )}
                          >
                            {def && (
                              <Star
                                className={cn(
                                  "h-3.5 w-3.5 sm:h-4 sm:w-4",
                                  selected ? "fill-primary-foreground" : "fill-warning text-warning",
                                )}
                                aria-label="기본 버전"
                              />
                            )}
                            {v.version_name}
                          </button>
                        );
                      })
                    )}
                  </div>
                </div>

                <div className="flex min-h-0 flex-1 flex-col gap-3 p-3 sm:p-4">
                  <div className="flex flex-wrap gap-2">
                    <Button
                      type="button"
                      variant="secondary"
                      size="sm"
                      className="h-8 text-xs sm:h-9 sm:text-sm"
                      onClick={openAddDetailDialog}
                      disabled={!selectedVersionId || detailsLoading}
                    >
                      <Plus className="mr-1 h-3.5 w-3.5" />
                      공정 추가
                    </Button>
                    <Button
                      type="button"
                      variant="secondary"
                      size="sm"
                      className="h-8 text-xs sm:h-9 sm:text-sm"
                      onClick={openEditDetailDialog}
                      disabled={!selectedVersionId || detailsLoading}
                    >
                      <Pencil className="mr-1 h-3.5 w-3.5" />
                      수정
                    </Button>
                    <Button
                      type="button"
                      variant="outline"
                      size="sm"
                      className="h-8 text-xs sm:h-9 sm:text-sm"
                      onClick={deleteSelectedDetails}
                      disabled={!selectedVersionId || detailsLoading}
                    >
                      <Trash2 className="mr-1 h-3.5 w-3.5" />
                      선택 삭제
                    </Button>
                    <Button
                      type="button"
                      size="sm"
                      className="h-8 text-xs sm:h-9 sm:text-sm"
                      onClick={() => void persistDetails()}
                      disabled={!selectedVersionId || detailsLoading || saving}
                    >
                      {saving ? (
                        <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
                      ) : (
                        <Save className="mr-1 h-3.5 w-3.5" />
                      )}
                      저장
                    </Button>
                  </div>

                  <div className="border-border min-h-0 flex-1 overflow-hidden rounded-md border">
                    {detailsLoading ? (
                      <div className="text-muted-foreground flex h-48 items-center justify-center gap-2 text-xs sm:text-sm">
                        <Loader2 className="text-primary h-5 w-5 animate-spin" />
                        공정 순서 불러오는 중...
                      </div>
                    ) : !selectedVersionId ? (
                      <p className="text-muted-foreground p-6 text-center text-xs sm:text-sm">버전을 선택하세요.</p>
                    ) : (
                      <div className="h-full max-h-[calc(100vh-20rem)] overflow-auto">
                        <Table>
                          <TableHeader>
                            <TableRow className="hover:bg-transparent">
                              <TableHead className="w-10">
                                <Checkbox
                                  checked={allDetailsSelected}
                                  onCheckedChange={(c) => toggleAllDetails(c === true)}
                                  aria-label="전체 선택"
                                  className="focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2"
                                />
                              </TableHead>
                              <TableHead className="text-xs sm:text-sm">순번</TableHead>
                              <TableHead className="text-xs sm:text-sm">공정명</TableHead>
                              <TableHead className="text-xs sm:text-sm">필수</TableHead>
                              <TableHead className="text-xs sm:text-sm">순서고정</TableHead>
                              <TableHead className="text-xs sm:text-sm">작업구분</TableHead>
                              <TableHead className="text-xs sm:text-sm">표준시간</TableHead>
                              <TableHead className="text-xs sm:text-sm">외주업체</TableHead>
                            </TableRow>
                          </TableHeader>
                          <TableBody>
                            {details.length === 0 ? (
                              <TableRow>
                                <TableCell
                                  colSpan={8}
                                  className="text-muted-foreground py-10 text-center text-xs sm:text-sm"
                                >
                                  등록된 공정이 없습니다.
                                </TableCell>
                              </TableRow>
                            ) : (
                              details.map((row) => (
                                <TableRow key={row.id}>
                                  <TableCell>
                                    <Checkbox
                                      checked={selectedDetailIds.has(row.id)}
                                      onCheckedChange={(c) => toggleDetailSelected(row.id, c === true)}
                                      aria-label={`${row.process_name || row.process_code} 선택`}
                                      className="focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2"
                                    />
                                  </TableCell>
                                  <TableCell className="text-xs sm:text-sm">{row.seq_no}</TableCell>
                                  <TableCell className="text-xs sm:text-sm">
                                    {row.process_name || row.process_code}
                                  </TableCell>
                                  <TableCell className="text-xs sm:text-sm">
                                    {row.is_required === "N" ? "N" : "Y"}
                                  </TableCell>
                                  <TableCell className="text-xs sm:text-sm">
                                    {row.is_fixed_order === "N" ? "N" : "Y"}
                                  </TableCell>
                                  <TableCell className="text-xs sm:text-sm">{row.work_type}</TableCell>
                                  <TableCell className="text-xs sm:text-sm">{row.standard_time}</TableCell>
                                  <TableCell className="max-w-[140px] truncate text-xs sm:text-sm">
                                    {row.outsource_supplier || "—"}
                                  </TableCell>
                                </TableRow>
                              ))
                            )}
                          </TableBody>
                        </Table>
                      </div>
                    )}
                  </div>
                </div>
              </>
            )}
          </div>
        </ResizablePanel>
      </ResizablePanelGroup>

      <Dialog open={versionDialogOpen} onOpenChange={setVersionDialogOpen}>
        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle className="text-base sm:text-lg">라우팅 버전 추가</DialogTitle>
            <DialogDescription className="text-xs sm:text-sm">
              선택한 품목에 새 라우팅 버전을 추가합니다.
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-3 sm:space-y-4">
            <div>
              <Label htmlFor="versionName" className="text-xs sm:text-sm">
                버전명 <span className="text-destructive">*</span>
              </Label>
              <Input
                id="versionName"
                value={versionName}
                onChange={(e) => setVersionName(e.target.value)}
                placeholder="예: Rev.A"
                className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm"
              />
            </div>
            <div>
              <Label htmlFor="versionDesc" className="text-xs sm:text-sm">
                설명
              </Label>
              <Input
                id="versionDesc"
                value={versionDescription}
                onChange={(e) => setVersionDescription(e.target.value)}
                placeholder="선택 입력"
                className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm"
              />
            </div>
            <div className="flex items-center gap-2">
              <Checkbox
                id="versionDefault"
                checked={versionIsDefault}
                onCheckedChange={(c) => setVersionIsDefault(c === true)}
                className="focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2"
              />
              <Label htmlFor="versionDefault" className="text-xs font-normal sm:text-sm">
                기본 버전으로 설정
              </Label>
            </div>
          </div>
          <DialogFooter className="gap-2 sm:gap-0">
            <Button
              type="button"
              variant="outline"
              onClick={() => setVersionDialogOpen(false)}
              className="focus-visible:ring-ring h-8 flex-1 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:flex-none sm:text-sm"
            >
              취소
            </Button>
            <Button
              type="button"
              onClick={() => void submitNewVersion()}
              disabled={versionSubmitting}
              className="focus-visible:ring-ring h-8 flex-1 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:flex-none sm:text-sm"
            >
              {versionSubmitting ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
              추가
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog open={detailDialogOpen} onOpenChange={setDetailDialogOpen}>
        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle className="text-base sm:text-lg">
              {detailDialogMode === "add" ? "공정 추가" : "공정 수정"}
            </DialogTitle>
            <DialogDescription className="text-xs sm:text-sm">
              라우팅 공정 순서에 반영할 내용을 입력합니다. 적용 후 저장을 눌러주세요.
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-3 sm:space-y-4">
            <div>
              <Label className="text-xs sm:text-sm">
                공정 <span className="text-destructive">*</span>
              </Label>
              <Select value={formProcessCode} onValueChange={setFormProcessCode}>
                <SelectTrigger
                  className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm"
                  aria-label="공정 선택"
                >
                  <SelectValue placeholder={processesLoading ? "불러오는 중..." : "공정 선택"} />
                </SelectTrigger>
                <SelectContent>
                  {processes.map((p) => (
                    <SelectItem key={p.id} value={p.process_code} className="text-xs sm:text-sm">
                      {p.process_name} ({p.process_code})
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label htmlFor="seqNo" className="text-xs sm:text-sm">
                순번 <span className="text-destructive">*</span>
              </Label>
              <Input
                id="seqNo"
                type="number"
                min={1}
                value={formSeqNo}
                onChange={(e) => setFormSeqNo(e.target.value)}
                className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm"
              />
            </div>
            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
              <div>
                <Label className="text-xs sm:text-sm">필수여부</Label>
                <Select value={formRequired} onValueChange={setFormRequired}>
                  <SelectTrigger className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Y" className="text-xs sm:text-sm">
                      Y
                    </SelectItem>
                    <SelectItem value="N" className="text-xs sm:text-sm">
                      N
                    </SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label className="text-xs sm:text-sm">순서고정여부</Label>
                <Select value={formFixedOrder} onValueChange={setFormFixedOrder}>
                  <SelectTrigger className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Y" className="text-xs sm:text-sm">
                      Y
                    </SelectItem>
                    <SelectItem value="N" className="text-xs sm:text-sm">
                      N
                    </SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
            <div>
              <Label className="text-xs sm:text-sm">작업구분</Label>
              <Select value={formWorkType} onValueChange={setFormWorkType}>
                <SelectTrigger className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="내부" className="text-xs sm:text-sm">
                    내부
                  </SelectItem>
                  <SelectItem value="외주" className="text-xs sm:text-sm">
                    외주
                  </SelectItem>
                  <SelectItem value="선택가능" className="text-xs sm:text-sm">
                    선택가능
                  </SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label htmlFor="stdTime" className="text-xs sm:text-sm">
                표준작업시간(분)
              </Label>
              <Input
                id="stdTime"
                type="number"
                min={0}
                step={1}
                value={formStandardTime}
                onChange={(e) => setFormStandardTime(e.target.value)}
                placeholder="0"
                className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm"
              />
            </div>
            {showOutsourceField && (
              <div>
                <Label htmlFor="outsource" className="text-xs sm:text-sm">
                  외주업체
                </Label>
                <Input
                  id="outsource"
                  value={formOutsource}
                  onChange={(e) => setFormOutsource(e.target.value)}
                  placeholder="외주 업체명"
                  className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm"
                />
              </div>
            )}
          </div>
          <DialogFooter className="gap-2 sm:gap-0">
            <Button
              type="button"
              variant="outline"
              onClick={() => setDetailDialogOpen(false)}
              className="focus-visible:ring-ring h-8 flex-1 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:flex-none sm:text-sm"
            >
              취소
            </Button>
            <Button
              type="button"
              onClick={submitDetailForm}
              disabled={detailSubmitting}
              className="focus-visible:ring-ring h-8 flex-1 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:flex-none sm:text-sm"
            >
              {detailSubmitting ? <Loader2 className="h-4 w-4 animate-spin" /> : "확인"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 품목 등록 모달 */}
      <Dialog open={registerDialogOpen} onOpenChange={setRegisterDialogOpen}>
        <DialogContent className="max-w-[95vw] sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle className="text-base sm:text-lg">품목 등록</DialogTitle>
            <DialogDescription className="text-xs sm:text-sm">
              라우팅에 추가할 품목을 검색하고 선택하세요.
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-3">
            <div className="relative">
              <Search className="text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2" />
              <Input
                value={registerSearch}
                onChange={(e) => setRegisterSearch(e.target.value)}
                placeholder="품목코드 / 품목명으로 검색"
                className="h-8 pl-8 text-xs sm:h-10 sm:pl-9 sm:text-sm"
                aria-label="품목 검색"
              />
            </div>
            <div className="max-h-[300px] overflow-y-auto rounded-md border">
              {registerLoading ? (
                <div className="text-muted-foreground flex h-32 items-center justify-center gap-2 text-xs sm:text-sm">
                  <Loader2 className="text-primary h-5 w-5 animate-spin" />
                  검색 중...
                </div>
              ) : registerItems.length === 0 ? (
                <p className="text-muted-foreground py-8 text-center text-xs sm:text-sm">
                  {registerSearchDebounced ? "검색 결과가 없습니다." : "품목을 검색하세요."}
                </p>
              ) : (
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead className="w-10 text-center">
                        <Checkbox
                          checked={
                            registerItems.filter((ri) => !registeredItemCodes.has(ri.item_number)).length > 0 &&
                            registerItems
                              .filter((ri) => !registeredItemCodes.has(ri.item_number))
                              .every((ri) => registerSelectedIds.has(ri.id))
                          }
                          onCheckedChange={(checked) => {
                            const next = new Set(registerSelectedIds);
                            const available = registerItems.filter((ri) => !registeredItemCodes.has(ri.item_number));
                            if (checked) {
                              available.forEach((ri) => next.add(ri.id));
                            } else {
                              available.forEach((ri) => next.delete(ri.id));
                            }
                            setRegisterSelectedIds(next);
                          }}
                        />
                      </TableHead>
                      <TableHead className="text-xs sm:text-sm">품목코드</TableHead>
                      <TableHead className="text-xs sm:text-sm">품목명</TableHead>
                      <TableHead className="text-xs sm:text-sm">상태</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {registerItems.map((ri) => {
                      const alreadyRegistered = registeredItemCodes.has(ri.item_number);
                      return (
                        <TableRow
                          key={ri.id}
                          className={cn(alreadyRegistered && "opacity-50")}
                        >
                          <TableCell className="text-center">
                            <Checkbox
                              checked={registerSelectedIds.has(ri.id)}
                              disabled={alreadyRegistered}
                              onCheckedChange={(checked) => {
                                const next = new Set(registerSelectedIds);
                                if (checked) next.add(ri.id);
                                else next.delete(ri.id);
                                setRegisterSelectedIds(next);
                              }}
                            />
                          </TableCell>
                          <TableCell className="text-xs sm:text-sm">{ri.item_number}</TableCell>
                          <TableCell className="text-xs sm:text-sm">{ri.item_name}</TableCell>
                          <TableCell className="text-xs sm:text-sm">
                            {alreadyRegistered ? (
                              <span className="text-muted-foreground">등록됨</span>
                            ) : (
                              <span className="text-primary">미등록</span>
                            )}
                          </TableCell>
                        </TableRow>
                      );
                    })}
                  </TableBody>
                </Table>
              )}
            </div>
            {registerSelectedIds.size > 0 && (
              <p className="text-muted-foreground text-xs">
                {registerSelectedIds.size}건 선택됨
              </p>
            )}
          </div>
          <DialogFooter className="gap-2 sm:gap-0">
            <Button
              type="button"
              variant="outline"
              onClick={() => setRegisterDialogOpen(false)}
              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
            >
              취소
            </Button>
            <Button
              type="button"
              onClick={handleRegisterItems}
              disabled={registerSubmitting || registerSelectedIds.size === 0}
              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
            >
              {registerSubmitting ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
              등록 ({registerSelectedIds.size}건)
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}