import React, { useState, useEffect, useRef } from "react";
import { Calculator, Plus, Edit, Trash2, Save, X, Settings, GripVertical, HelpCircle, CheckCircle2, AlertCircle, ChevronUp, ChevronDown, Search } from "lucide-react";
import { PageLayout } from "./organisms/PageLayout";
import { PageHeader } from "./organisms/PageHeader";
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
import { Button } from "./ui/button";
import { Input } from "./ui/input";
import { Label } from "./ui/label";
import { Textarea } from "./ui/textarea";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "./ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
  TableRowWithRef,
} from "./ui/table";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogBody,
} from "./ui/dialog";
import { Badge } from "./ui/badge";
import { Checkbox } from "./ui/checkbox";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
import { StandardDialog } from "./molecules/StandardDialog";
import { AutoCalculationWithTabs } from "./AutoCalculationWithTabs";
import { FormulaHelper } from "./molecules/FormulaHelper";
import { validateFormula, evaluateFormula, extractVariables } from "./utils/formulaEvaluator";
import { toast } from "sonner@2.0.3";
import { useDrag, useDrop, DndProvider } from "react-dnd";
import { SingletonHTML5Backend } from "../lib/dnd";
import { useData } from "./contexts/DataContext";
import { ItemPriceMappingManager } from "./ItemPriceMappingManager";
import { CategoryGroupManager } from "./CategoryGroupManager";
import { generateCompleteSampleData } from "./utils/formulaSampleData";

// 품목 아이템 타입 정의
interface FormulaItem {
  id: string;
  itemCode: string;
  itemName: string;
  quantity: string; // 수량은 수식으로도 입력 가능하므로 string
}

// 수식 타입 정의
interface Formula {
  id: string;
  product: string; // 제품명 (공통 또는 특정 제품)
  category: string;
  name: string;
  variable: string;
  formula: string;
  type: "calculation" | "range" | "mapping" | "input"; // 계산식, 범위별, 매핑, 입력값
  ranges?: RangeItem[]; // 범위별 규칙
  outputType?: "variable" | "item"; // 결과 출력 타입: 변수 저장 또는 품목/수량
  items?: FormulaItem[]; // 품목 목록 (outputType이 item일 때)
  description?: string;
  order?: number; // 실행 순서
  createdAt: string;
  updatedAt: string;
}

interface RangeItem {
  id: string;
  minValue: number;
  maxValue: number;
  result: string;
  resultType?: "variable" | "item"; // 결과 타입: 변수 또는 품목
  items?: FormulaItem[]; // 품목 목록 (resultType이 item일 때)
  description?: string;
}

// 단가 맵핑 아이템 타입
interface PriceMappingItem {
  id: string;
  mappingType: 'individual' | 'formulaCategory'; // 개별 품목 | 수식 분류별
  
  // 개별 품목 매핑 (mappingType === 'individual')
  itemCode?: string; // 품목 코드
  itemName?: string; // 품목명
  
  // 수식 분류별 매핑 (mappingType === 'formulaCategory')
  formulaCategory?: string; // 수식 카테고리 (예: "오픈사이즈", "제작사이즈", "면적" 등)
  
  // 공통
  priceFormulaId: string; // 적용할 단가 계산 수식 ID
  priceFormulaName: string; // 단가 수식명 (표시용)
  basePrice?: number; // 기본 판매단가 (개별 품목만 해당)
  quantityFormula: string; // 수량/계수 계산 수식 (예: W0 * H0 / 1000000)
  description?: string;
  enabled: boolean; // 활성화 여부
  priority?: number; // 우선순위 (낮을수록 우선, 개별이 분류보다 우선)
  createdAt: string;
  updatedAt?: string;
}

// 초기 샘플 데이터
const INITIAL_FORMULAS: Formula[] = [
  // 기본정보
  {
    id: "basic-product",
    product: "공통",
    category: "기본정보",
    name: "제품명",
    variable: "-",
    formula: "-",
    type: "calculation",
    description: "제품 선택용 (변수 아님)",
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  },
  {
    id: "basic-category",
    product: "공통",
    category: "기본정보",
    name: "제품 카테고리",
    variable: "PC",
    formula: "PC",
    type: "calculation",
    description: "Product Category",
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  },
  {
    id: "open-width",
    product: "공통",
    category: "기본정보",
    name: "오픈사이즈 가로",
    variable: "W0",
    formula: "W0",
    type: "calculation",
    description: "",
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  },
  {
    id: "open-height",
    product: "공통",
    category: "기본정보",
    name: "오픈사이즈 세로",
    variable: "H0",
    formula: "H0",
    type: "calculation",
    description: "",
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  },
  {
    id: "basic-guide-rail-type",
    product: "공통",
    category: "기본정보",
    name: "가이드레일 유형",
    variable: "GT",
    formula: "GT",
    type: "calculation",
    description: "",
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  },
  {
    id: "basic-motor-power",
    product: "공통",
    category: "기본정보",
    name: "모터 전원",
    variable: "MP",
    formula: "MP",
    type: "calculation",
    description: "",
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  },
  {
    id: "basic-controller",
    product: "공통",
    category: "기본정보",
    name: "연동제어기",
    variable: "CT",
    formula: "CT",
    type: "calculation",
    description: "",
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  },
  {
    id: "basic-quantity",
    product: "공통",
    category: "기본정보",
    name: "수량",
    variable: "QTY",
    formula: "QTY",
    type: "calculation",
    description: "",
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  },
  {
    id: "basic-edge-wing-size",
    product: "공통",
    category: "기본정보",
    name: "마구리 날개치수",
    variable: "WS",
    formula: "WS",
    type: "calculation",
    description: "",
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  },
  {
    id: "basic-inspection-fee",
    product: "공통",
    category: "기본정보",
    name: "검사비",
    variable: "INSP",
    formula: "INSP",
    type: "calculation",
    description: "",
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  },
  // 제작사이즈
  {
    id: "screen-width",
    product: "공통",
    category: "제작사이즈",
    name: "스크린 가로",
    variable: "W1_스크린",
    formula: "W0 + 140",
    type: "calculation",
    description: "스크린 제작 가로 사이즈",
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  },
  {
    id: "screen-height",
    product: "공통",
    category: "제작사이즈",
    name: "스크린 세로",
    variable: "H1_스크린",
    formula: "H0 + 350",
    type: "calculation",
    description: "스크린 제작 세로 사이즈",
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  },
  {
    id: "steel-width",
    product: "공통",
    category: "제작사이즈",
    name: "철재 가로",
    variable: "W1_철재",
    formula: "W0 + 110",
    type: "calculation",
    description: "철재 제작 가로 사이즈",
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  },
  {
    id: "steel-height",
    product: "공통",
    category: "제작사이즈",
    name: "철재 세로",
    variable: "H1_철재",
    formula: "H0 + 350",
    type: "calculation",
    description: "철재 제작 세로 사이즈",
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  },
  // 면적
  {
    id: "area",
    product: "공통",
    category: "면적",
    name: "면적",
    variable: "M",
    formula: "W1 * H1 / 1000000",
    type: "calculation",
    description: "제품 면적 (㎡)",
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  },
  // 모터 용량 산출
  {
    id: "screen-motor-weight",
    product: "공통",
    category: "모터용량산출",
    name: "스크린 모터 중량",
    variable: "K_스크린",
    formula: "M * 2 + W0 / 1000 * 14.17",
    type: "calculation",
    description: "스크린 모터 중량 계산",
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  },
  {
    id: "steel-motor-weight",
    product: "공통",
    category: "모터용량산출",
    name: "철재 모터 중량",
    variable: "K_철재",
    formula: "M * 25",
    type: "calculation",
    description: "철재 모터 중량 계산",
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  },
  // 감기샤프트 4"
  {
    id: "shaft-4inch",
    product: "공통",
    category: "감기샤프트",
    name: "감기샤프트 4인치",
    variable: "모터_4인치",
    formula: "",
    type: "range",
    ranges: [
      { id: "r1", minValue: 0, maxValue: 150, result: "개폐전동기 150k" },
      { id: "r2", minValue: 151, maxValue: 300, result: "개폐전동기 300k" },
      { id: "r3", minValue: 301, maxValue: 400, result: "개폐전동기 400k" },
    ],
    description: "모터 중량 기반 4인치 샤프트 모터 선정",
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  },
  // 감기샤프트 5"
  {
    id: "shaft-5inch",
    product: "공통",
    category: "감기샤프트",
    name: "감기샤프트 5인치",
    variable: "모터_5인치",
    formula: "",
    type: "range",
    ranges: [
      { id: "r1", minValue: 0, maxValue: 123, result: "개폐전동기 150k" },
      { id: "r2", minValue: 124, maxValue: 246, result: "개폐전동기 300k" },
      { id: "r3", minValue: 247, maxValue: 327, result: "개폐전동기 400k" },
      { id: "r4", minValue: 328, maxValue: 500, result: "개폐전동기 500k" },
      { id: "r5", minValue: 501, maxValue: 600, result: "개폐전동기 600k" },
    ],
    description: "모터 중량 기반 5인치 샤프트 모터 선정",
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  },
  // 가이드레일
  {
    id: "guide-rail-size",
    product: "공통",
    category: "가이드레일",
    name: "가이드레일 제작사이즈",
    variable: "G",
    formula: "H0 + 250",
    type: "calculation",
    description: "스크린/철재 가이드레일 제작사이즈",
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  },
  {
    id: "guide-rail-material",
    product: "공통",
    category: "가이드레일",
    name: "가이드레일 자재 적용",
    variable: "가이드레일_자재",
    formula: "",
    type: "range",
    ranges: [
      {
        id: "r1",
        minValue: 1219,
        maxValue: 2438,
        result: "가이드레일 2438 2개",
        description: "1219 < G ≤ 2438",
      },
      {
        id: "r2",
        minValue: 2438,
        maxValue: 3000,
        result: "가이드레일 3000 2개",
        description: "2438 < G ≤ 3000",
      },
    ],
    description: "가이드레일 길이 및 수량 산출",
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  },
  // 셔터박스
  {
    id: "screen-case-size",
    product: "공통",
    category: "셔터박스",
    name: "스크린 셔터박스 사이즈",
    variable: "S_스크린",
    formula: "W0 + 220",
    type: "calculation",
    description: "스크린 셔터박스 사이즈",
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  },
  {
    id: "steel-case-size",
    product: "공통",
    category: "셔터박스",
    name: "철재 셔터박스 사이즈",
    variable: "S_철재",
    formula: "W0 + 240",
    type: "calculation",
    description: "철재 셔터박스 사이즈",
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  },
  {
    id: "case-material",
    product: "공통",
    category: "셔터박스",
    name: "셔터박스 자재 적용",
    variable: "셔터박스_자재",
    formula: "",
    type: "range",
    ranges: [
      {
        id: "r1",
        minValue: 0,
        maxValue: 1219,
        result: "1219 1개",
        description: "0 < S ≤ 1219",
      },
      {
        id: "r2",
        minValue: 1219,
        maxValue: 2438,
        result: "2438 1개",
        description: "1219 < S ≤ 2438",
      },
    ],
    description: "셔터박스 자재 길이 및 수량",
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  },
];

// 기본 카테고리 (삭제 불가)
const DEFAULT_CATEGORIES = [
  "기본정보",
  "제작사이즈",
  "면적",
  "모터용량산출",
  "감기샤프트",
  "브라켓&받침용앵글",
  "가이드레일",
  "가이드레일설치유형",
  "셔터박스",
  "하단마감재",
];

// 드래그앤드롭 타입
const DND_TYPES = {
  CATEGORY: "category",
  FORMULA: "formula",
};

// 드래그 가능한 카테고리 버튼 컴포넌트
interface DraggableCategoryProps {
  category: string;
  index: number;
  isSelected: boolean;
  count: number;
  isEditing: boolean;
  editValue: string;
  isEditMode: boolean; // 전체 수정 모드 여부
  onSelect: () => void;
  onMove: (fromIndex: number, toIndex: number) => void;
  onEdit: () => void;
  onSaveEdit: (newName: string) => void;
  onCancelEdit: () => void;
  onDelete: () => void;
  onEditValueChange: (value: string) => void;
}

function DraggableCategory({
  category,
  index,
  isSelected,
  count,
  isEditing,
  editValue,
  isEditMode,
  onSelect,
  onMove,
  onEdit,
  onSaveEdit,
  onCancelEdit,
  onDelete,
  onEditValueChange,
}: DraggableCategoryProps) {
  const ref = useRef<HTMLDivElement>(null);

  const [{ isDragging }, drag] = useDrag({
    type: DND_TYPES.CATEGORY,
    item: { index },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
    canDrag: isEditMode && !isEditing, // 수정 모드이고 현재 편집 중이 아닐 때만 드래그 가능
  });

  const [{ isOver }, drop] = useDrop({
    accept: DND_TYPES.CATEGORY,
    hover: (item: { index: number }) => {
      if (item.index !== index) {
        onMove(item.index, index);
        item.index = index;
      }
    },
    collect: (monitor) => ({
      isOver: monitor.isOver(),
    }),
  });

  drag(drop(ref));

  // 인라인 편집 모드
  if (isEditing) {
    return (
      <div
        ref={ref}
        className="inline-flex items-center gap-2 border rounded-full px-4 py-2 bg-white h-11"
      >
        <Input
          value={editValue}
          onChange={(e) => onEditValueChange(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === "Enter") {
              onSaveEdit(editValue);
            } else if (e.key === "Escape") {
              onCancelEdit();
            }
          }}
          className="h-7 w-40"
          autoFocus
        />
        <Button
          variant="ghost"
          size="sm"
          onClick={() => onSaveEdit(editValue)}
          className="h-7 w-7 p-0"
        >
          <Save className="h-3 w-3" />
        </Button>
        <Button
          variant="ghost"
          size="sm"
          onClick={onCancelEdit}
          className="h-7 w-7 p-0"
        >
          <X className="h-3 w-3" />
        </Button>
      </div>
    );
  }

  // 기본 모드
  return (
    <div
      ref={ref}
      className={`inline-flex items-center gap-1 transition-all ${
        isDragging ? "opacity-50 scale-95" : ""
      } ${isOver ? "ring-2 ring-primary rounded-full" : ""}`}
    >
      <Button
        variant={isSelected ? "default" : "outline"}
        size="sm"
        onClick={onSelect}
        className={`rounded-full h-11 px-4 ${isEditMode ? "cursor-move" : "cursor-pointer"}`}
      >
        {isEditMode && <GripVertical className="h-3 w-3 mr-1 opacity-50" />}
        <span className={`inline-flex items-center justify-center rounded-full w-4 h-4 text-[10px] font-semibold mr-1.5 ${
          isSelected ? "bg-white/20 text-white" : "bg-primary/10 text-primary"
        }`}>
          {index + 1}
        </span>
        {category}
        {count > 0 && (
          <Badge variant="secondary" className="ml-2">
            {count}
          </Badge>
        )}
      </Button>
      {isEditMode && (
        <div className="flex gap-1">
          <Button
            variant="ghost"
            size="sm"
            onClick={(e) => {
              e.stopPropagation();
              onEdit();
            }}
            className="h-7 w-7 p-0"
          >
            <Edit className="h-3 w-3" />
          </Button>
          <Button
            variant="ghost"
            size="sm"
            onClick={(e) => {
              e.stopPropagation();
              onDelete();
            }}
            className="h-7 w-7 p-0"
          >
            <Trash2 className="h-3 w-3 text-red-500" />
          </Button>
        </div>
      )}
    </div>
  );
}

// 드래그 가능한 수식 행 컴포넌트
interface DraggableFormulaRowProps {
  formula: Formula;
  index: number;
  isFirst: boolean;
  isLast: boolean;
  onEdit: () => void;
  onDelete: () => void;
  onMove: (fromIndex: number, toIndex: number) => void;
}

function DraggableFormulaRow({
  formula,
  index,
  isFirst,
  isLast,
  onEdit,
  onDelete,
  onMove,
}: DraggableFormulaRowProps) {
  const ref = useRef<HTMLTableRowElement>(null);

  const [{ isDragging }, drag] = useDrag({
    type: DND_TYPES.FORMULA,
    item: { index },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  });

  const [{ isOver }, drop] = useDrop({
    accept: DND_TYPES.FORMULA,
    drop: (item: { index: number }) => {
      if (item.index !== index) {
        onMove(item.index, index);
      }
    },
    hover: (item: { index: number }) => {
      // hover 시에는 item.index 업데이트만
      if (item.index !== index) {
        item.index = index;
      }
    },
    collect: (monitor) => ({
      isOver: monitor.isOver(),
    }),
  });

  drag(drop(ref));

  return (
    <TableRowWithRef
      ref={ref}
      className={`cursor-move transition-all ${
        isDragging ? "opacity-50" : ""
      } ${isOver ? "bg-blue-50" : ""}`}
    >
      <TableCell>
        <div className="flex items-center gap-2">
          <GripVertical className="h-4 w-4 text-muted-foreground" />
          <span className="text-sm font-medium text-muted-foreground">{index + 1}</span>
        </div>
      </TableCell>
      <TableCell>{formula.name}</TableCell>
      <TableCell>
        <code className="bg-gray-100 px-2 py-1 rounded text-sm">
          {formula.variable}
        </code>
      </TableCell>
      <TableCell>
        <Badge variant={formula.type === "calculation" ? "default" : "secondary"}>
          {formula.type === "calculation" ? "계산식" : formula.type === "input" ? "입력값" : "범위별"}
        </Badge>
      </TableCell>
      <TableCell>
        {formula.type === "calculation" ? (
          <code className="text-sm">{formula.formula}</code>
        ) : (
          <div className="space-y-2">
            {formula.ranges?.map((range, idx) => (
              <div
                key={range.id}
                className="bg-gray-50 border rounded px-3 py-2 text-sm"
              >
                <div className="flex items-center gap-2">
                  <Badge variant="outline" className="text-xs">
                    {idx + 1}
                  </Badge>
                  <span className="font-medium">
                    {range.minValue} ~ {range.maxValue}
                  </span>
                  <span className="text-gray-400">→</span>
                  <span className="text-blue-600">{range.result}</span>
                  {range.resultType === "variable" && (
                    <Badge variant="default" className="text-xs bg-purple-500">
                      변수
                    </Badge>
                  )}
                  {(!range.resultType || range.resultType === "item") && (
                    <Badge variant="default" className="text-xs bg-green-500">
                      품목
                    </Badge>
                  )}
                </div>
                {range.description && (
                  <div className="text-xs text-gray-500 mt-1 ml-6">
                    {range.description}
                  </div>
                )}
              </div>
            ))}
          </div>
        )}
      </TableCell>
      <TableCell>
        <Badge variant={formula.outputType === "variable" ? "default" : "secondary"}>
          {formula.outputType === "variable" ? "변수" : "품목"}
        </Badge>
      </TableCell>
      <TableCell className="text-sm text-gray-600">
        {formula.description}
      </TableCell>
      <TableCell>
        <div className="flex gap-2">
          <Button
            variant="ghost"
            size="sm"
            onClick={onEdit}
          >
            <Edit className="h-4 w-4" />
          </Button>
          <Button
            variant="ghost"
            size="sm"
            onClick={onDelete}
          >
            <Trash2 className="h-4 w-4 text-red-500" />
          </Button>
        </div>
      </TableCell>
    </TableRowWithRef>
  );
}

// 모바일 카드형 수식 행 컴포넌트
interface DraggableFormulaCardProps {
  formula: Formula;
  index: number;
  onEdit: () => void;
  onDelete: () => void;
  onMove: (dragIndex: number, hoverIndex: number) => void;
}

function DraggableFormulaCard({
  formula,
  index,
  onEdit,
  onDelete,
  onMove,
}: DraggableFormulaCardProps) {
  const ref = useRef<HTMLDivElement>(null);

  const [{ isDragging }, drag] = useDrag({
    type: DND_TYPES.FORMULA,
    item: { index },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  });

  const [{ isOver }, drop] = useDrop({
    accept: DND_TYPES.FORMULA,
    drop: (item: { index: number }) => {
      if (item.index !== index) {
        onMove(item.index, index);
      }
    },
    hover: (item: { index: number }) => {
      if (item.index !== index) {
        item.index = index;
      }
    },
    collect: (monitor) => ({
      isOver: monitor.isOver(),
    }),
  });

  drag(drop(ref));

  return (
    <div
      ref={ref}
      className={`border rounded-lg p-4 space-y-3 bg-white transition-all cursor-move ${
        isDragging ? "opacity-50" : ""
      } ${isOver ? "bg-blue-50 border-blue-300" : "hover:bg-gray-50"}`}
    >
      {/* 순서 및 드래그 핸들 */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <GripVertical className="h-5 w-5 text-muted-foreground" />
          <Badge variant="outline" className="bg-gray-100 text-gray-700">
            #{index + 1}
          </Badge>
        </div>
        <div className="flex gap-2">
          <Button variant="ghost" size="sm" onClick={onEdit}>
            <Edit className="h-4 w-4" />
          </Button>
          <Button variant="ghost" size="sm" onClick={onDelete}>
            <Trash2 className="h-4 w-4 text-red-500" />
          </Button>
        </div>
      </div>

      {/* 수식 이름 */}
      <div>
        <div className="text-xs text-muted-foreground mb-1">이름</div>
        <div className="font-semibold">{formula.name}</div>
      </div>

      {/* 변수 */}
      <div>
        <div className="text-xs text-muted-foreground mb-1">변수</div>
        <code className="bg-gray-100 px-2 py-1 rounded text-sm">
          {formula.variable}
        </code>
      </div>

      {/* 타입 */}
      <div className="flex gap-4">
        <div>
          <div className="text-xs text-muted-foreground mb-1">타입</div>
          <Badge variant={formula.type === "calculation" ? "default" : "secondary"}>
            {formula.type === "calculation" ? "계산식" : formula.type === "input" ? "입력값" : "범위별"}
          </Badge>
        </div>
        <div>
          <div className="text-xs text-muted-foreground mb-1">결과 타입</div>
          <Badge variant={formula.outputType === "variable" ? "default" : "secondary"}>
            {formula.outputType === "variable" ? "변수" : "품목"}
          </Badge>
        </div>
      </div>

      {/* 수식/범위 */}
      <div>
        <div className="text-xs text-muted-foreground mb-1">수식/범위</div>
        {formula.type === "calculation" ? (
          <code className="text-sm bg-gray-50 p-2 rounded block break-all">
            {formula.formula}
          </code>
        ) : (
          <div className="space-y-2">
            {formula.ranges?.map((range, idx) => (
              <div
                key={range.id}
                className="bg-gray-50 border rounded px-3 py-2 text-sm"
              >
                <div className="flex flex-wrap items-center gap-2">
                  <Badge variant="outline" className="text-xs">
                    {idx + 1}
                  </Badge>
                  <span className="font-medium">
                    {range.minValue} ~ {range.maxValue}
                  </span>
                  <span className="text-gray-400">→</span>
                  <span className="text-blue-600">{range.result}</span>
                  {range.resultType === "variable" && (
                    <Badge variant="default" className="text-xs bg-purple-500">
                      변수
                    </Badge>
                  )}
                  {(!range.resultType || range.resultType === "item") && (
                    <Badge variant="default" className="text-xs bg-green-500">
                      품목
                    </Badge>
                  )}
                </div>
                {range.description && (
                  <div className="text-xs text-gray-500 mt-1">
                    {range.description}
                  </div>
                )}
              </div>
            ))}
          </div>
        )}
      </div>

      {/* 설명 */}
      {formula.description && (
        <div>
          <div className="text-xs text-muted-foreground mb-1">설명</div>
          <div className="text-sm text-gray-600">{formula.description}</div>
        </div>
      )}
    </div>
  );
}

/**
 * 견적수식관리
 *
 * 수식 관리 및 자동 산출 시뮬레이터
 */
export function FormulaManagement2() {
  const { 
    itemMasters: allItems,
    addItemMaster,
    addCategoryGroup,
    addPricing,
    addFormulaRule,
    categoryGroups,
    pricing,
    formulaRules
  } = useData(); // DataContext에서 데이터 및 함수 가져오기
  const [formulas, setFormulas] = useState<Formula[]>([]);
  const [categories, setCategories] = useState<string[]>(DEFAULT_CATEGORIES);
  const [selectedCategory, setSelectedCategory] = useState<string>("기본정보");
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [editingFormula, setEditingFormula] = useState<Formula | null>(null);
  
  // 제품 선택 state
  const [selectedProduct, setSelectedProduct] = useState<string>("공통");
  
  // 제품 검색 state
  const [productSearchQuery, setProductSearchQuery] = useState("");
  const [showProductPicker, setShowProductPicker] = useState(false);
  const [productSearchQueryDialog, setProductSearchQueryDialog] = useState("");
  const [showProductPickerDialog, setShowProductPickerDialog] = useState(false);
  
  // 카테고리 관리 state
  const [isCategoryEditMode, setIsCategoryEditMode] = useState(false); // 카테고리 수정 모드
  const [editingCategoryIndex, setEditingCategoryIndex] = useState<number | null>(null);
  const [categoryEditValue, setCategoryEditValue] = useState("");
  const [isAddCategoryDialogOpen, setIsAddCategoryDialogOpen] = useState(false); // 카테고리 추가 다이얼로그
  const [newCategoryName, setNewCategoryName] = useState(""); // 새 카테고리 이름
  
  // 수식 validation state
  const [formulaValidation, setFormulaValidation] = useState<{ valid: boolean; error?: string }>({ valid: true });
  const [showFormulaHelper, setShowFormulaHelper] = useState(false);
  
  // 변수 검색 state
  const [showVariablePicker, setShowVariablePicker] = useState(false);
  const [variableSearchQuery, setVariableSearchQuery] = useState("");
  const [activeInputField, setActiveInputField] = useState<'formula' | 'range' | null>(null);
  const [activeRangeId, setActiveRangeId] = useState<string | null>(null);
  
  // 품목 검색 state
  const [showItemPicker, setShowItemPicker] = useState(false);
  const [itemSearchQuery, setItemSearchQuery] = useState("");
  const [activeItemTarget, setActiveItemTarget] = useState<'formula' | 'range' | null>(null);
  const [activeRangeIdForItem, setActiveRangeIdForItem] = useState<string | null>(null);
  
  // 단가 맵핑 품목 검색 state
  const [showPriceMappingItemPicker, setShowPriceMappingItemPicker] = useState(false);
  const [priceMappingItemSearchQuery, setPriceMappingItemSearchQuery] = useState("");
  
  // 폼 상태
  const [formData, setFormData] = useState<Partial<Formula>>({
    product: "공통",
    category: "기본정보",
    name: "",
    variable: "",
    formula: "",
    type: "calculation",
    ranges: [],
    items: [],
    description: "",
  });
  
  // 단가 맵핑 state
  const [priceMappingItems, setPriceMappingItems] = useState<PriceMappingItem[]>([]);
  const [isPriceMappingDialogOpen, setIsPriceMappingDialogOpen] = useState(false);
  const [editingPriceMapping, setEditingPriceMapping] = useState<PriceMappingItem | null>(null);
  const [tempMapping, setTempMapping] = useState<Partial<PriceMappingItem>>({
    itemCode: "",
    itemName: "",
    basePrice: 0,
    quantityFormula: "",
    description: "",
    enabled: true,
  });

  // localStorage에서 데이터 로드
  useEffect(() => {
    const saved = localStorage.getItem("SAM_FORMULAS_V2");
    if (saved) {
      let loadedFormulas = JSON.parse(saved);
      // "오픈사이즈" 카테고리를 "기본정보"로 마이그레이션
      loadedFormulas = loadedFormulas.map((f: Formula) => 
        f.category === "오픈사이즈" ? { ...f, category: "기본정보" } : f
      );
      
      // order 필드가 없는 항목들에 대해 자동으로 순서 부여
      loadedFormulas = loadedFormulas.map((f: Formula, idx: number) => ({
        ...f,
        order: f.order !== undefined ? f.order : idx
      }));
      
      setFormulas(loadedFormulas);
      localStorage.setItem("SAM_FORMULAS_V2", JSON.stringify(loadedFormulas));
    } else {
      // 초기 데이터 설정 - order 필드 추가
      const initialWithOrder = INITIAL_FORMULAS.map((f, idx) => ({
        ...f,
        order: f.order !== undefined ? f.order : idx
      }));
      setFormulas(initialWithOrder);
      localStorage.setItem("SAM_FORMULAS_V2", JSON.stringify(initialWithOrder));
    }
    
    // 카테고리 로드 및 마이그레이션
    const savedCategories = localStorage.getItem("SAM_CATEGORIES");
    if (savedCategories) {
      let loadedCategories = JSON.parse(savedCategories);
      // "오픈사이즈"를 "기본정보"로 변경
      loadedCategories = loadedCategories.map((cat: string) => 
        cat === "오픈사이즈" ? "기본정보" : cat
      );
      setCategories(loadedCategories);
      localStorage.setItem("SAM_CATEGORIES", JSON.stringify(loadedCategories));
    } else {
      localStorage.setItem("SAM_CATEGORIES", JSON.stringify(DEFAULT_CATEGORIES));
    }
    
  }, []);
  
  // 제품 변경 시 해당 제품의 단가 맵핑 로드
  useEffect(() => {
    const savedPriceMappings = localStorage.getItem(`SAM_PRICE_MAPPINGS_${selectedProduct}`);
    if (savedPriceMappings) {
      setPriceMappingItems(JSON.parse(savedPriceMappings));
    } else {
      setPriceMappingItems([]);
    }
  }, [selectedProduct]);

  // 품목 데이터 로드 확인 (디버깅용)
  useEffect(() => {
    console.log('🔍 [FormulaManagement2] 품목 데이터 로드:', {
      총품목수: allItems?.length || 0,
      품목샘플: allItems?.slice(0, 3).map(item => ({
        itemCode: item.itemCode,
        itemName: item.itemName,
        itemType: item.itemType
      }))
    });
  }, [allItems]);

  // 카테고리 저장
  const saveCategories = (newCategories: string[]) => {
    setCategories(newCategories);
    localStorage.setItem("SAM_CATEGORIES", JSON.stringify(newCategories));
  };

  // 데이터 저장
  const saveFormulas = (newFormulas: Formula[]) => {
    setFormulas(newFormulas);
    localStorage.setItem("SAM_FORMULAS_V2", JSON.stringify(newFormulas));
  };

  // 카테고리 추가 다이얼로그 열기
  const handleAddCategory = () => {
    setNewCategoryName("");
    setIsAddCategoryDialogOpen(true);
  };

  // 카테고리 추가 실행
  const handleConfirmAddCategory = () => {
    // 벨리데이션: 빈 값 체크
    if (!newCategoryName || !newCategoryName.trim()) {
      toast.error("카테고리 이름을 입력하세요.");
      return;
    }
    
    // 벨리데이션: 길이 체크 (최대 20자)
    if (newCategoryName.trim().length > 20) {
      toast.error("카테고리 이름은 20자 이내로 입력하세요.");
      return;
    }
    
    // 벨리데이션: 중복 체크
    if (categories.includes(newCategoryName.trim())) {
      toast.error("이미 존재하는 카테고리입니다.");
      return;
    }
    
    // 벨리데이션: 특수문자 체크
    const invalidChars = /[<>\/\\]/;
    if (invalidChars.test(newCategoryName.trim())) {
      toast.error("카테고리 이름에 특수문자(<, >, /, \\)를 사용할 수 없습니다.");
      return;
    }
    
    const newCategories = [...categories, newCategoryName.trim()];
    saveCategories(newCategories);
    toast.success("카테고리가 추가되었습니다.");
    setIsAddCategoryDialogOpen(false);
    setNewCategoryName("");
  };

  // 카테고리 수정 시작
  const handleEditCategory = (index: number) => {
    setEditingCategoryIndex(index);
    setCategoryEditValue(categories[index]);
  };

  // 카테고리 수정 저장
  const handleSaveEditCategory = (newName: string) => {
    if (editingCategoryIndex === null) return;
    
    if (!newName.trim()) {
      toast.error("카테고리 이름을 입력하세요.");
      return;
    }
    
    const oldCategory = categories[editingCategoryIndex];
    const newCategory = newName.trim();
    
    if (oldCategory !== newCategory && categories.includes(newCategory)) {
      toast.error("이미 존재하는 카테고리입니다.");
      return;
    }
    
    // 카테고리 이름 변경
    const newCategories = [...categories];
    newCategories[editingCategoryIndex] = newCategory;
    saveCategories(newCategories);
    
    // 해당 카테고리를 사용하는 모든 수식 업데이트
    const updatedFormulas = formulas.map(f => 
      f.category === oldCategory ? { ...f, category: newCategory } : f
    );
    saveFormulas(updatedFormulas);
    
    // 선택된 카테고리도 업데이트
    if (selectedCategory === oldCategory) {
      setSelectedCategory(newCategory);
    }
    
    setEditingCategoryIndex(null);
    setCategoryEditValue("");
    toast.success("카테고리가 수정되었습니다.");
  };

  // 카테고리 수정 취소
  const handleCancelEditCategory = () => {
    setEditingCategoryIndex(null);
    setCategoryEditValue("");
  };

  // 카테고리 삭제
  const handleDeleteCategory = (index: number) => {
    const categoryToDelete = categories[index];
    
    // 기본 카테고리는 삭제 불가
    if (DEFAULT_CATEGORIES.includes(categoryToDelete)) {
      toast.error("기본 카테고리는 삭제할 수 없습니다.");
      return;
    }
    
    // 해당 카테고리를 사용하는 수식이 있는지 확인
    const hasFormulas = formulas.some(f => f.category === categoryToDelete);
    if (hasFormulas) {
      toast.error("해당 카테고리를 사용하는 수식이 있어 삭제할 수 없습니다.");
      return;
    }
    
    if (!confirm(`"${categoryToDelete}" 카테고리를 삭제하시겠습니까?`)) {
      return;
    }
    
    const newCategories = categories.filter((_, i) => i !== index);
    saveCategories(newCategories);
    
    // 삭제된 카테고리가 선택되어 있었다면 첫 번째 카테고리로 변경
    if (selectedCategory === categoryToDelete && newCategories.length > 0) {
      setSelectedCategory(newCategories[0]);
    }
    
    toast.success("카테고리가 삭제되었습니다.");
  };



  // 카테고리 드래그앤드롭
  const handleMoveCategoryDnd = (fromIndex: number, toIndex: number) => {
    const newCategories = [...categories];
    const [movedItem] = newCategories.splice(fromIndex, 1);
    newCategories.splice(toIndex, 0, movedItem);
    saveCategories(newCategories);
  };

  // 수식 추가
  const handleAdd = () => {
    setEditingFormula(null);
    setFormData({
      product: selectedProduct,
      category: selectedCategory,
      name: "",
      variable: "",
      formula: "",
      type: "calculation",
      ranges: [],
      items: [],
      description: "",
    });
    setIsDialogOpen(true);
  };

  // 수식 수정
  const handleEdit = (formula: Formula) => {
    setEditingFormula(formula);
    setFormData(formula);
    setIsDialogOpen(true);
  };

  // 수식 삭제
  const handleDelete = (id: string) => {
    if (confirm("이 수식을 삭제하시겠습니까?")) {
      const newFormulas = formulas.filter((f) => f.id !== id);
      saveFormulas(newFormulas);
      toast.success("수식이 삭제되었습니다.");
    }
  };
  
  // 단가 맵핑 저장
  const savePriceMappings = (items: PriceMappingItem[]) => {
    setPriceMappingItems(items);
    localStorage.setItem(`SAM_PRICE_MAPPINGS_${selectedProduct}`, JSON.stringify(items));
  };
  
  // 단가 맵핑 추가 다이얼로그 열기
  const handleAddPriceMapping = () => {
    setEditingPriceMapping(null);
    setTempMapping({
      itemCode: "",
      itemName: "",
      basePrice: 0,
      quantityFormula: "",
      description: "",
      enabled: true,
    });
    setIsPriceMappingDialogOpen(true);
  };
  
  // 단가 맵핑 수정
  const handleEditPriceMapping = (mapping: PriceMappingItem) => {
    setEditingPriceMapping(mapping);
    setTempMapping({ ...mapping });
    setIsPriceMappingDialogOpen(true);
  };
  
  // 단가 맵핑 저장 (추가/수정)
  const handleSavePriceMapping = () => {
    // 벨리데이션: 필수 필드 체크
    if (!tempMapping.itemCode || !tempMapping.itemCode.trim()) {
      toast.error("품목 코드를 입력하세요.");
      return;
    }
    
    if (!tempMapping.itemName || !tempMapping.itemName.trim()) {
      toast.error("품목명을 입력하세요.");
      return;
    }
    
    if (!tempMapping.quantityFormula || !tempMapping.quantityFormula.trim()) {
      toast.error("수량 계산식을 입력하세요.");
      return;
    }
    
    // 벨리데이션: 단가 유효성 체크
    if (tempMapping.basePrice !== undefined && tempMapping.basePrice < 0) {
      toast.error("기본 단가는 0 이상이어야 합니다.");
      return;
    }
    
    // 벨리데이션: 수식 유효성 검증
    const validation = validateFormula(tempMapping.quantityFormula);
    if (!validation.isValid) {
      toast.error(`수식 오류: ${validation.error}`);
      return;
    }
    
    // 벨리데이션: 중복 체크 (추가 시에만)
    if (!editingPriceMapping) {
      const isDuplicate = priceMappingItems.some(
        item => item.itemCode.trim() === tempMapping.itemCode.trim()
      );
      if (isDuplicate) {
        toast.error("이미 등록된 품목 코드입니다.");
        return;
      }
    }
    
    let updated: PriceMappingItem[];
    
    if (editingPriceMapping) {
      // 수정
      updated = priceMappingItems.map(item =>
        item.id === editingPriceMapping.id
          ? { ...item, ...tempMapping } as PriceMappingItem
          : item
      );
      toast.success("단가 맵핑이 수정되었습니다.");
    } else {
      // 추가
      const newMapping: PriceMappingItem = {
        id: `${selectedProduct}-mapping-${Date.now()}`,
        itemCode: tempMapping.itemCode!,
        itemName: tempMapping.itemName!,
        basePrice: tempMapping.basePrice || 0,
        quantityFormula: tempMapping.quantityFormula!,
        description: tempMapping.description,
        enabled: tempMapping.enabled ?? true,
      };
      updated = [...priceMappingItems, newMapping];
      toast.success("단가 맵핑이 추가되었습니다.");
    }
    
    savePriceMappings(updated);
    setIsPriceMappingDialogOpen(false);
  };
  
  // 단가 맵핑 삭제
  const handleDeletePriceMapping = (id: string) => {
    if (confirm("이 단가 맵핑을 삭제하시겠습니까?")) {
      const updated = priceMappingItems.filter(item => item.id !== id);
      savePriceMappings(updated);
      toast.success("단가 맵핑이 삭제되었습니다.");
    }
  };
  
  // 단가 맵핑 활성화/비활성화
  const togglePriceMappingEnabled = (id: string) => {
    const updated = priceMappingItems.map(item =>
      item.id === id ? { ...item, enabled: !item.enabled } : item
    );
    savePriceMappings(updated);
    toast.success(updated.find(item => item.id === id)?.enabled ? "단가 맵핑이 활성화되었습니다." : "단가 맵핑이 비활성화되었습니다.");
  };
  
  // 단가 맵핑용 품목 선택 핸들러
  const handleSelectPriceMappingItem = (item: any) => {
    setTempMapping({
      ...tempMapping,
      itemCode: item.itemCode || "",
      itemName: item.itemName || "",
      basePrice: item.sellingPrice || 0,
    });
    setShowPriceMappingItemPicker(false);
    setPriceMappingItemSearchQuery("");
    toast.success("품목이 선택되었습니다.");
  };

  // 수식 저장
  const handleSave = () => {
    console.log("=== handleSave 호출됨 ===");
    console.log("formData:", formData);
    
    // 벨리데이션: 필수 필드 체크
    if (!formData.name || !formData.name.trim()) {
      console.log("Validation 실패: 수식 이름 없음");
      toast.error("수식 이름을 입력하세요.");
      return;
    }

    if (!formData.variable || !formData.variable.trim()) {
      console.log("Validation 실패: 변수명 없음");
      toast.error("변수명을 입력하세요.");
      return;
    }

    if (!formData.product || !formData.product.trim()) {
      console.log("Validation 실패: 제품 없음");
      toast.error("제품을 선택하세요.");
      return;
    }

    if (!formData.category || !formData.category.trim()) {
      console.log("Validation 실패: 카테고리 없음");
      toast.error("카테고리를 선택하세요.");
      return;
    }

    // 벨리데이션: 변수명 형식 체크 (영문, 숫자, 언더스코어만 허용)
    const variablePattern = /^[a-zA-Z_][a-zA-Z0-9_]*$/;
    if (!variablePattern.test(formData.variable.trim())) {
      console.log("Validation 실패: 변수명 형식 오류");
      toast.error("변수명은 영문자로 시작하고 영문, 숫자, 언더스코어(_)만 사용할 수 있습니다.");
      return;
    }

    // 벨리데이션: 변수명 중복 체크 (수정 시 자신 제외)
    const duplicateVariable = formulas.find(
      (f) => f.variable === formData.variable.trim() && f.id !== editingFormula?.id
    );
    if (duplicateVariable) {
      toast.error(`변수명 "${formData.variable}"는 이미 사용 중입니다. 다른 변수명을 입력하세요.`);
      return;
    }

    // 벨리데이션: 계산식 타입별 체크
    if (formData.type === "calculation") {
      if (!formData.formula || !formData.formula.trim()) {
        toast.error("계산식을 입력해주세요.");
        return;
      }
      
      // 수식 유효성 검증
      const validation = validateFormula(formData.formula);
      if (!validation.isValid) {
        toast.error(`수식 오류: ${validation.error}`);
        return;
      }

      // 벨리데이션: 수식에 사용된 변수가 정의되어 있는지 확인
      const usedVariables = extractVariables(formData.formula);
      const definedVariables = formulas
        .filter((f) => f.id !== editingFormula?.id) // 자기 자신 제외
        .map((f) => f.variable);
      
      const undefinedVariables = usedVariables.filter(
        (v) => !definedVariables.includes(v) && v !== formData.variable
      );
      
      if (undefinedVariables.length > 0) {
        toast.error(
          `정의되지 않은 변수가 수식에 포함되어 있습니다: ${undefinedVariables.join(", ")}\n먼저 해당 변수를 정의하는 수식을 추가하세요.`
        );
        return;
      }
    }

    // 입력값 타입은 계산식이 필요 없음
    if (formData.type === "input") {
      // 계산식 validation 스킵
    }

    if (formData.type === "range") {
      if (!formData.ranges || formData.ranges.length === 0) {
        toast.error("최소 1개 이상의 범위를 추가해주세요.");
        return;
      }
      
      // 범위별 결과값 체크
      for (let i = 0; i < formData.ranges.length; i++) {
        const range = formData.ranges[i];
        if (!range.result || !range.result.trim()) {
          toast.error(`범위 ${i + 1}번의 결과값을 입력하세요.`);
          return;
        }
        if (range.minValue >= range.maxValue) {
          toast.error(`범위 ${i + 1}번의 최소값은 최대값보다 작아야 합니다.`);
          return;
        }
        
        // 범위 중복 검사
        for (let j = i + 1; j < formData.ranges.length; j++) {
          const otherRange = formData.ranges[j];
          const hasOverlap =
            (range.minValue < otherRange.maxValue && range.maxValue > otherRange.minValue);
          if (hasOverlap) {
            toast.error(`범위 ${i + 1}번과 범위 ${j + 1}번이 겹칩니다. 범위가 중복되지 않도록 수정하세요.`);
            return;
          }
        }
        
        // resultType이 item인 경우 품목 체크
        if (range.resultType === "item") {
          if (!range.items || range.items.length === 0) {
            toast.error(`범위 ${i + 1}번에 최소 1개 이상의 품목을 추가해주세요.`);
            return;
          }
          
          for (let j = 0; j < range.items.length; j++) {
            const item = range.items[j];
            if (!item.itemCode || !item.itemCode.trim()) {
              toast.error(`범위 ${i + 1}번 품목 ${j + 1}번의 품목코드를 입력하세요.`);
              return;
            }
            if (!item.itemName || !item.itemName.trim()) {
              toast.error(`범위 ${i + 1}번 품목 ${j + 1}번의 품목명을 입력하세요.`);
              return;
            }
            if (!item.quantity || !item.quantity.trim()) {
              toast.error(`범위 ${i + 1}번 품목 ${j + 1}번의 수량을 입력하세요.`);
              return;
            }
          }
        }
      }
    }

    if (formData.type === "mapping") {
      toast.error("매핑 타입은 아직 구현되지 않았습니다.");
      return;
    }

    // 벨리데이션: outputType이 item인 경우 품목 체크
    if (formData.outputType === "item") {
      if (!formData.items || formData.items.length === 0) {
        toast.error("최소 1개 이상의 품목을 추가해주세요.");
        return;
      }
      
      // 각 품목의 필수 필드 체크
      for (let i = 0; i < formData.items.length; i++) {
        const item = formData.items[i];
        if (!item.itemCode || !item.itemCode.trim()) {
          toast.error(`품목 ${i + 1}번의 품목코드를 입력하세요.`);
          return;
        }
        if (!item.itemName || !item.itemName.trim()) {
          toast.error(`품목 ${i + 1}번의 품목명을 입력하세요.`);
          return;
        }
        if (!item.quantity || !item.quantity.trim()) {
          toast.error(`품목 ${i + 1}번의 수량을 입력하세요.`);
          return;
        }
        
        // 수량이 숫자 또는 유효한 수식인지 검증
        const quantityStr = item.quantity.trim();
        const isNumeric = !isNaN(Number(quantityStr));
        if (!isNumeric) {
          // 수식으로 간주하고 검증
          const validation = validateFormula(quantityStr);
          if (!validation.isValid) {
            toast.error(`품목 ${i + 1}번의 수량 수식 오류: ${validation.error}`);
            return;
          }
        }
      }
    }

    const now = new Date().toISOString();
    let newFormulas: Formula[];

    // 입력값 타입인 경우 formula를 변수명으로 설정
    const formulaData = formData.type === "input" 
      ? { ...formData, formula: formData.variable || "" }
      : formData;

    if (editingFormula) {
      // 수정 - order 유지
      newFormulas = formulas.map((f) =>
        f.id === editingFormula.id
          ? { ...formulaData as Formula, id: f.id, createdAt: f.createdAt, updatedAt: now, order: f.order }
          : f
      );
      toast.success("수식이 수정되었습니다.");
    } else {
      // 추가 - 같은 제품/카테고리의 마지막 order + 1
      const sameGroupFormulas = formulas.filter(
        f => f.product === formulaData.product && f.category === formulaData.category
      );
      const maxOrder = sameGroupFormulas.length > 0 
        ? Math.max(...sameGroupFormulas.map(f => f.order || 0))
        : -1;
      
      const newFormula: Formula = {
        ...formulaData as Formula,
        id: `formula-${Date.now()}`,
        createdAt: now,
        updatedAt: now,
        order: maxOrder + 1,
      };
      newFormulas = [...formulas, newFormula];
      toast.success("수식이 추가되었습니다.");
    }

    saveFormulas(newFormulas);
    setIsDialogOpen(false);
  };

  // 범위 추가
  const handleAddRange = () => {
    const newRange: RangeItem = {
      id: `range-${Date.now()}`,
      minValue: 0,
      maxValue: 100,
      result: "",
    };
    setFormData({
      ...formData,
      ranges: [...(formData.ranges || []), newRange],
    });
  };

  // 범위 삭제
  const handleDeleteRange = (rangeId: string) => {
    setFormData({
      ...formData,
      ranges: formData.ranges?.filter((r) => r.id !== rangeId) || [],
    });
  };

  // 범위 수정
  const handleUpdateRange = (rangeId: string, field: keyof RangeItem, value: any) => {
    setFormData({
      ...formData,
      ranges: formData.ranges?.map((r) =>
        r.id === rangeId ? { ...r, [field]: value } : r
      ) || [],
    });
  };
  
  // 품목 추가 (formula 레벨)
  const handleAddFormulaItem = (item: any) => {
    const newItem: FormulaItem = {
      id: `item-${Date.now()}`,
      itemCode: item.itemCode,
      itemName: item.itemName,
      quantity: "1",
    };
    setFormData({
      ...formData,
      items: [...(formData.items || []), newItem],
    });
    setShowItemPicker(false);
    setItemSearchQuery("");
    toast.success("품목이 추가되었습니다.");
  };

  // 품목 삭제 (formula 레벨)
  const handleDeleteFormulaItem = (itemId: string) => {
    setFormData({
      ...formData,
      items: formData.items?.filter((i) => i.id !== itemId) || [],
    });
  };

  // 품목 수량 수정 (formula 레벨)
  const handleUpdateFormulaItemQuantity = (itemId: string, quantity: string) => {
    setFormData({
      ...formData,
      items: formData.items?.map((i) =>
        i.id === itemId ? { ...i, quantity } : i
      ) || [],
    });
  };

  // 품목 추가 (range 레벨)
  const handleAddRangeItem = (rangeId: string, item: any) => {
    const newItem: FormulaItem = {
      id: `item-${Date.now()}`,
      itemCode: item.itemCode,
      itemName: item.itemName,
      quantity: "1",
    };
    
    setFormData({
      ...formData,
      ranges: formData.ranges?.map((r) =>
        r.id === rangeId
          ? { ...r, items: [...(r.items || []), newItem] }
          : r
      ) || [],
    });
    setShowItemPicker(false);
    setItemSearchQuery("");
    toast.success("품목이 추가되었습니다.");
  };

  // 품목 삭제 (range 레벨)
  const handleDeleteRangeItem = (rangeId: string, itemId: string) => {
    setFormData({
      ...formData,
      ranges: formData.ranges?.map((r) =>
        r.id === rangeId
          ? { ...r, items: r.items?.filter((i) => i.id !== itemId) || [] }
          : r
      ) || [],
    });
  };

  // 품목 수량 수정 (range 레벨)
  const handleUpdateRangeItemQuantity = (rangeId: string, itemId: string, quantity: string) => {
    setFormData({
      ...formData,
      ranges: formData.ranges?.map((r) =>
        r.id === rangeId
          ? {
              ...r,
              items: r.items?.map((i) =>
                i.id === itemId ? { ...i, quantity } : i
              ) || [],
            }
          : r
      ) || [],
    });
  };
  
  // 등록된 변수 목록 가져오기
  const availableVariables = formulas.map(f => ({
    variable: f.variable,
    name: f.name,
    category: f.category,
  }));
  
  // 변수 검색 필터링
  const filteredVariables = availableVariables.filter(v =>
    v.variable.toLowerCase().includes(variableSearchQuery.toLowerCase()) ||
    v.name.toLowerCase().includes(variableSearchQuery.toLowerCase())
  );
  
  // 품목 검색 필터링
  const filteredItems = (allItems || []).filter(item =>
    (item.itemCode || '').toLowerCase().includes(itemSearchQuery.toLowerCase()) ||
    (item.itemName || '').toLowerCase().includes(itemSearchQuery.toLowerCase())
  );
  
  // 디버그: 필터링된 품목 추적
  useEffect(() => {
    if (itemSearchQuery) {
      console.log('🔍 [FormulaManagement2] 품목 검색:', {
        검색어: itemSearchQuery,
        전체품목수: allItems?.length || 0,
        필터결과수: filteredItems.length,
        필터결과샘플: filteredItems.slice(0, 3).map(item => ({
          itemCode: item.itemCode,
          itemName: item.itemName
        }))
      });
    }
  }, [itemSearchQuery, filteredItems.length]);
  
  // 단가 맵핑용 품목 검색 필터링
  const filteredPriceMappingItems = (allItems || []).filter(item =>
    (item.itemCode || '').toLowerCase().includes(priceMappingItemSearchQuery.toLowerCase()) ||
    (item.itemName || '').toLowerCase().includes(priceMappingItemSearchQuery.toLowerCase())
  );
  
  // 변수 삽입 핸들러
  const handleInsertVariable = (variable: string) => {
    if (activeInputField === 'formula') {
      const input = document.getElementById("formula") as HTMLInputElement;
      if (input) {
        const cursorPos = input.selectionStart || formData.formula?.length || 0;
        const before = formData.formula?.substring(0, cursorPos) || "";
        const after = formData.formula?.substring(cursorPos) || "";
        const newFormula = before + variable + after;
        setFormData({ ...formData, formula: newFormula });
        
        setTimeout(() => {
          const validation = validateFormula(newFormula);
          setFormulaValidation(validation);
        }, 0);
      }
    } else if (activeInputField === 'range' && activeRangeId) {
      handleUpdateRange(activeRangeId, 'result', variable);
    }
    
    setShowVariablePicker(false);
    setVariableSearchQuery("");
  };

  // 제품 목록 가져오기 (품목관리에서 '제품'인 품목들)
  const products = ["공통", ...(allItems || [])
    .filter(item => item.itemType === "FG")
    .map(item => item.itemName)];
  
  // 제품 검색 필터링 (메인 페이지)
  const filteredProducts = products.filter(product =>
    product.toLowerCase().includes(productSearchQuery.toLowerCase())
  );
  
  // 제품 검색 필터링 (다이얼로그)
  const filteredProductsDialog = products.filter(product =>
    product.toLowerCase().includes(productSearchQueryDialog.toLowerCase())
  );
  
  // 현재 선택된 제품과 카테고리의 수식 필터링
  const filteredFormulas = formulas
    .filter((f) => f.product === selectedProduct && f.category === selectedCategory)
    .sort((a, b) => (a.order || 999) - (b.order || 999)); // 순서대로 정렬

  // 수식 순서 변경 (위로)
  const handleMoveFormulaUp = (index: number) => {
    if (index === 0) return;
    
    const current = filteredFormulas[index];
    const previous = filteredFormulas[index - 1];
    
    const newFormulas = formulas.map((f) => {
      if (f.id === current.id) {
        return { ...f, order: (previous.order || index - 1) };
      }
      if (f.id === previous.id) {
        return { ...f, order: (current.order || index) };
      }
      return f;
    });
    
    saveFormulas(newFormulas);
    toast.success("수식 순서가 변경되었습니다.");
  };

  // 수식 순서 변경 (아래로)
  const handleMoveFormulaDown = (index: number) => {
    if (index === filteredFormulas.length - 1) return;
    
    const current = filteredFormulas[index];
    const next = filteredFormulas[index + 1];
    
    const newFormulas = formulas.map((f) => {
      if (f.id === current.id) {
        return { ...f, order: (next.order || index + 1) };
      }
      if (f.id === next.id) {
        return { ...f, order: (current.order || index) };
      }
      return f;
    });
    
    saveFormulas(newFormulas);
    toast.success("수식 순서가 변경되었습니다.");
  };

  // 수식 드래그앤드롭
  const handleMoveFormulaDnd = (fromIndex: number, toIndex: number) => {
    if (fromIndex === toIndex) return;
    
    console.log(`드래그: ${fromIndex} → ${toIndex}`);
    
    const updatedFiltered = [...filteredFormulas];
    const [movedItem] = updatedFiltered.splice(fromIndex, 1);
    updatedFiltered.splice(toIndex, 0, movedItem);
    
    // order 필드 업데이트 - filteredFormulas에 있는 항목들만 재정렬
    const updatedFormulas = formulas.map((f) => {
      const newIndex = updatedFiltered.findIndex(uf => uf.id === f.id);
      if (newIndex !== -1) {
        // 필터된 목록에 있는 경우 새로운 order 부여
        return { ...f, order: newIndex };
      }
      // 필터된 목록에 없는 경우 기존 order 유지
      return f;
    });
    
    saveFormulas(updatedFormulas);
    toast.success("수식 순서가 변경되었습니다.");
  };

  // 샘플 데이터 추가 함수
  const handleAddSampleData = () => {
    try {
      console.log('🔧 자동 견적 산출 연동 샘플 데이터 생성 시작...');
      console.log('📊 현재 상태:', {
        allItems: allItems.length,
        pricing: pricing.length,
        formulaRules: formulaRules.length,
        categoryGroups: categoryGroups.length
      });
      
      // 별도 모듈에서 완전한 샘플 데이터 가져오기
      const sampleData = generateCompleteSampleData();
      
      console.log('📦 생성된 샘플 데이터:', {
        itemMasters: sampleData.itemMasters.length,
        pricings: sampleData.pricings.length,
        formulaRules: sampleData.formulaRules.length,
        categoryGroups: sampleData.categoryGroups.length
      });
      
      // 1. 품목 마스터 추가
      const existingItemCodes = allItems.map(im => im.itemCode);
      const newItems = sampleData.itemMasters.filter((item: any) => !existingItemCodes.includes(item.itemCode));
      
      console.log(`🔍 품목 마스터: ${newItems.length}개 추가 예정 (기존: ${existingItemCodes.length}개)`);
      
      newItems.forEach((item: any) => {
        addItemMaster(item);
      });
      
      console.log(`✅ 품목 마스터 ${newItems.length}개 추가 완료`);
      
      // 2. 단가 관리 추가
      const existingPricingCodes = pricing.map(p => p.itemCode);
      const newPricings = sampleData.pricings.filter((p: any) => !existingPricingCodes.includes(p.itemCode));
      
      console.log(`🔍 단가 관리: ${newPricings.length}개 추가 예정 (기존: ${existingPricingCodes.length}개)`);
      
      newPricings.forEach((p: any) => {
        addPricing(p);
      });
      
      console.log(`✅ 단가 관리 ${newPricings.length}개 추가 완료`);
      
      // 3. 품목 수식 및 단가 수식 추가
      const existingFormulaRuleCodes = formulaRules.map(fr => fr.ruleCode);
      const newFormulaRules = sampleData.formulaRules.filter((fr: any) => !existingFormulaRuleCodes.includes(fr.ruleCode));
      
      console.log(`🔍 수식 관리: ${newFormulaRules.length}개 추가 예정 (기존: ${existingFormulaRuleCodes.length}개)`);
      
      newFormulaRules.forEach((fr: any) => {
        addFormulaRule(fr);
      });
      
      console.log(`✅ 품목 수식 및 단가 수식 ${newFormulaRules.length}개 추가 완료`);
      
      // 4. 분류 데이터 추가
      const existingCategoryGroupNames = categoryGroups.map(cg => cg.name);
      const newCategoryGroups = sampleData.categoryGroups.filter((cg: any) => !existingCategoryGroupNames.includes(cg.name));
      
      console.log(`🔍 분류 데이터: ${newCategoryGroups.length}개 추가 예정 (기존: ${existingCategoryGroupNames.length}개)`);
      
      newCategoryGroups.forEach((cg: any) => {
        addCategoryGroup(cg);
      });
      
      console.log(`✅ 분류 데이터 ${newCategoryGroups.length}개 추가 완료`);
      
      // 결과 요약
      const totalAdded = newItems.length + newPricings.length + newFormulaRules.length + newCategoryGroups.length;
      
      if (totalAdded === 0) {
        toast.info(
          '모든 샘플 데이터가 이미 존재합니다.\n자동 견적 산출 섹션에서 테스트하세요.',
          { duration: 4000 }
        );
      } else {
        toast.success(
          `✅ 완전한 샘플 데이터가 추가되었습니다!\n` +
          `- 품목 마스터: ${newItems.length}개\n` +
          `- 단가 관리: ${newPricings.length}개\n` +
          `- 수식 관리: ${newFormulaRules.length}개\n` +
          `- 분류 데이터: ${newCategoryGroups.length}개\n\n` +
          `자동 견적 산출 섹션에서 테스트하세요.`,
          { duration: 6000 }
        );
      }
      
    } catch (error) {
      console.error('❌ 샘플 데이터 추가 오류:', error);
      console.error('오류 상세:', error instanceof Error ? error.message : String(error));
      console.error('오류 스택:', error instanceof Error ? error.stack : '');
      toast.error(`샘플 데이터 추가 중 오류가 발생했습니다.\n${error instanceof Error ? error.message : String(error)}`);
    }
  };

  return (
    <DndProvider backend={SingletonHTML5Backend}>
      <PageLayout>
        <PageHeader
          title="견적수식 목록"
          description="견적 수식 관리 및 자동 산출 시뮬레이터"
          icon={Calculator}
      />

        <div className="space-y-6">
          {/* 수식 관리 섹션 */}
          <Card>
            <CardHeader>
              <div>
                <CardTitle>품목 수식 관리</CardTitle>
                <p className="text-sm text-muted-foreground mt-1">
                  품목별 수량, 면적 등을 계산하는 수식을 제품과 카테고리별로 관리합니다
                </p>
              </div>
            </CardHeader>
            <CardContent>
              {/* 제품 선택 */}
              <div className="mb-6 pb-6 border-b">
                <div className="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4">
                  <Label className="sm:min-w-[80px]">제품 선택</Label>
                  <div className="relative w-full sm:w-[400px]">
                    <Button
                      variant="outline"
                      onClick={() => setShowProductPicker(!showProductPicker)}
                      className="w-full justify-between"
                    >
                      <div className="flex items-center gap-2">
                        <span>{selectedProduct}</span>
                        <Badge variant="secondary" className="ml-1">
                          {formulas.filter(f => f.product === selectedProduct).length}개 수식
                        </Badge>
                      </div>
                      <ChevronDown className="h-4 w-4 opacity-50" />
                    </Button>
                    
                    {showProductPicker && (
                      <div className="absolute top-full left-0 right-0 mt-2 border rounded-lg p-3 bg-white shadow-lg z-50">
                        <div className="flex items-center gap-2 mb-3">
                          <Search className="h-4 w-4 text-muted-foreground" />
                          <Input
                            placeholder="제품 검색..."
                            value={productSearchQuery}
                            onChange={(e) => setProductSearchQuery(e.target.value)}
                            className="h-8"
                            autoFocus
                          />
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => {
                              setShowProductPicker(false);
                              setProductSearchQuery("");
                            }}
                            className="h-8 w-8 p-0"
                          >
                            <X className="h-4 w-4" />
                          </Button>
                        </div>
                        
                        <div className="max-h-60 overflow-y-auto space-y-1">
                          {filteredProducts.length === 0 ? (
                            <div className="text-center py-4 text-gray-500 text-sm">
                              검색 결과가 없습니다.
                            </div>
                          ) : (
                            filteredProducts.map((product) => {
                              const productFormulaCount = formulas.filter(f => f.product === product).length;
                              return (
                                <button
                                  key={product}
                                  type="button"
                                  onClick={() => {
                                    setSelectedProduct(product);
                                    setShowProductPicker(false);
                                    setProductSearchQuery("");
                                    toast.success(`${product} 제품으로 전환되었습니다.`);
                                  }}
                                  className={`w-full px-3 py-2 rounded hover:bg-gray-100 transition-colors ${
                                    selectedProduct === product ? "bg-primary/10 font-medium" : ""
                                  }`}
                                >
                                  <div className="flex items-center justify-between">
                                    <span>{product}</span>
                                  </div>
                                  <div className="mt-1">
                                    <Badge variant={productFormulaCount > 0 ? "default" : "outline"} className="text-xs">
                                      {productFormulaCount}개 수식
                                    </Badge>
                                  </div>
                                </button>
                              );
                            })
                          )}
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              </div>

              {/* 카테고리 탭 */}
              <div className="mb-6">
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-3">
                  <div className="text-sm text-muted-foreground">
                    <span className="hidden sm:inline">카테고리 선택 (실행 순서) - </span>
                    <span className="sm:hidden">카테고리 선택</span>
                    <span className="inline-flex items-center gap-1 ml-2">
                      <span className="hidden sm:inline">예:</span>
                      <span className="inline-flex items-center justify-center rounded-full w-4 h-4 text-[10px] font-semibold bg-primary/10 text-primary">
                        1
                      </span>
                      <span className="inline-flex items-center justify-center rounded-full w-4 h-4 text-[10px] font-semibold bg-primary/10 text-primary">
                        2
                      </span>
                      <span className="inline-flex items-center justify-center rounded-full w-4 h-4 text-[10px] font-semibold bg-primary/10 text-primary">
                        3
                      </span>
                    </span>
                  </div>
                  <div className="flex gap-2">
                    <Button 
                      variant={isCategoryEditMode ? "default" : "outline"}
                      size="sm"
                      onClick={() => {
                        setIsCategoryEditMode(!isCategoryEditMode);
                        // 수정 모드 종료 시 편집 중인 카테고리도 취소
                        if (isCategoryEditMode) {
                          setEditingCategoryIndex(null);
                          setCategoryEditValue("");
                        }
                      }}
                      className="flex-1 sm:flex-none"
                    >
                      <Settings className="h-4 w-4 sm:mr-2" />
                      <span className="hidden sm:inline">{isCategoryEditMode ? "완료" : "수정"}</span>
                    </Button>
                    <Button 
                      variant="outline" 
                      size="sm"
                      onClick={handleAddCategory}
                      className="flex-1 sm:flex-none"
                    >
                      <Plus className="h-4 w-4 sm:mr-2" />
                      <span className="hidden sm:inline">카테고리 추가</span>
                      <span className="sm:hidden">추가</span>
                    </Button>
                  </div>
                </div>
                <div className="flex flex-wrap gap-3">
                  {categories.map((category, index) => {
                    const count = formulas.filter((f) => f.product === selectedProduct && f.category === category).length;
                    return (
                      <DraggableCategory
                        key={category}
                        category={category}
                        index={index}
                        isSelected={selectedCategory === category}
                        count={count}
                        isEditing={editingCategoryIndex === index}
                        editValue={categoryEditValue}
                        onSelect={() => setSelectedCategory(category)}
                        onMove={handleMoveCategoryDnd}
                        onEdit={() => handleEditCategory(index)}
                        onSaveEdit={handleSaveEditCategory}
                        onCancelEdit={handleCancelEditCategory}
                        onDelete={() => handleDeleteCategory(index)}
                        onEditValueChange={setCategoryEditValue}
                        isEditMode={isCategoryEditMode}
                      />
                    );
                  })}
                </div>
              </div>

              {/* 수식 추가 버튼 */}
              <div className="mb-6 pb-6 border-b">
                <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
                  <div className="text-sm text-muted-foreground flex items-center gap-2">
                    <Badge variant="outline">
                      {selectedCategory}
                    </Badge>
                    <span className="hidden sm:inline">카테고리에 수식 추가</span>
                    <span className="sm:hidden">수식 추가</span>
                  </div>
                  <Button onClick={handleAdd} size="sm" className="w-full sm:w-auto">
                    <Plus className="h-4 w-4 mr-2" />
                    수식 추가
                  </Button>
                </div>
              </div>

              {/* 수식 목록 */}
              {filteredFormulas.length === 0 ? (
                <div className="text-center py-12 text-gray-500">
                  <Calculator className="h-12 w-12 mx-auto mb-4 opacity-50" />
                  <p>등록된 수식이 없습니다.</p>
                  <p className="text-sm mt-2">우측 상단의 "수식 추가" 버튼을 클릭하세요.</p>
                </div>
              ) : (
                <>
                  {/* 데스크톱 (1280px+) - 테이블 */}
                  <div className="hidden xl:block border rounded-lg overflow-x-auto">
                    <Table>
                      <TableHeader>
                        <TableRow>
                          <TableHead className="w-[60px]">순서</TableHead>
                          <TableHead className="w-[200px]">이름</TableHead>
                          <TableHead className="w-[120px]">변수</TableHead>
                          <TableHead className="w-[100px]">타입</TableHead>
                          <TableHead>수식/범위</TableHead>
                          <TableHead className="w-[120px]">결과 타입</TableHead>
                          <TableHead className="w-[200px]">설명</TableHead>
                          <TableHead className="w-[120px]">작업</TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {filteredFormulas.map((formula, idx) => (
                          <DraggableFormulaRow
                            key={formula.id}
                            formula={formula}
                            index={idx}
                            isFirst={idx === 0}
                            isLast={idx === filteredFormulas.length - 1}
                            onEdit={() => handleEdit(formula)}
                            onDelete={() => handleDelete(formula.id)}
                            onMove={handleMoveFormulaDnd}
                          />
                        ))}
                      </TableBody>
                    </Table>
                  </div>

                  {/* 모바일/태블릿/소형 노트북 (~1279px) - 카드 리스트 */}
                  <div className="xl:hidden space-y-3">
                    {filteredFormulas.map((formula, idx) => (
                      <DraggableFormulaCard
                        key={formula.id}
                        formula={formula}
                        index={idx}
                        onEdit={() => handleEdit(formula)}
                        onDelete={() => handleDelete(formula.id)}
                        onMove={handleMoveFormulaDnd}
                      />
                    ))}
                  </div>
                </>
              )}
            </CardContent>
          </Card>

          {/* 분류 관리 */}
          <CategoryGroupManager formulas={formulas} categories={categories} />

          {/* 단가 맵핑 관리 - 새로운 컴포넌트 */}
          <ItemPriceMappingManager
            formulas={formulas}
            mappings={priceMappingItems}
            onMappingsChange={setPriceMappingItems}
          />

          {/* 자동 산출 시뮬레이터 */}
          <AutoCalculationWithTabs />
        </div>

        {/* 카테고리 추가 다이얼로그 */}
        <Dialog open={isAddCategoryDialogOpen} onOpenChange={setIsAddCategoryDialogOpen}>
          <DialogContent className="sm:max-w-md">
            <DialogHeader>
              <DialogTitle>카테고리 추가</DialogTitle>
              <DialogDescription>
                새로운 카테고리 이름을 입력하세요.
              </DialogDescription>
            </DialogHeader>
            <DialogBody className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="categoryName">카테고리 이름 <span className="text-red-500">*</span></Label>
                <Input
                  id="categoryName"
                  value={newCategoryName}
                  onChange={(e) => setNewCategoryName(e.target.value)}
                  placeholder="예: 공정비, 원단비 등"
                  onKeyDown={(e) => {
                    if (e.key === "Enter" && newCategoryName?.trim() && newCategoryName.trim().length <= 20) {
                      handleConfirmAddCategory();
                    }
                  }}
                  className={
                    newCategoryName && (
                      !newCategoryName.trim() || 
                      newCategoryName.trim().length > 20 ||
                      categories.includes(newCategoryName.trim())
                    ) ? "border-red-500" : ""
                  }
                />
                {newCategoryName && newCategoryName.trim().length > 20 && (
                  <p className="text-xs text-red-500">카테고리 이름은 20자 이내로 입력하세요.</p>
                )}
                {newCategoryName && categories.includes(newCategoryName.trim()) && (
                  <p className="text-xs text-red-500">이미 존재하는 카테고리입니다.</p>
                )}
                {newCategoryName && /[<>\/\\]/.test(newCategoryName) && (
                  <p className="text-xs text-red-500">특수문자(&lt;, &gt;, /, \)를 사용할 수 없습니다.</p>
                )}
              </div>
            </DialogBody>
            <DialogFooter>
              <Button variant="outline" onClick={() => setIsAddCategoryDialogOpen(false)}>
                취소
              </Button>
              <Button 
                onClick={handleConfirmAddCategory}
                disabled={!newCategoryName || !newCategoryName.trim() || newCategoryName.trim().length > 20}
              >
                <Plus className="h-4 w-4 mr-2" />
                추가
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>

        {/* 수식 추가/수정 다이얼로그 */}
        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
          <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
            <DialogHeader>
              <DialogTitle>
                {editingFormula ? "수식 수정" : "수식 추가"}
              </DialogTitle>
              <DialogDescription>
                수식 정보를 입력하세요.
              </DialogDescription>
            </DialogHeader>

            <DialogBody className="space-y-4">
              {/* 제품 */}
              <div className="grid grid-cols-4 items-start gap-4">
                <Label htmlFor="product" className="text-right pt-2">
                  제품 <span className="text-red-500">*</span>
                </Label>
                <div className="col-span-3 relative space-y-1">
                  <Button
                    variant="outline"
                    onClick={() => setShowProductPickerDialog(!showProductPickerDialog)}
                    className={`w-full justify-between ${!formData.product ? "border-red-300" : ""}`}
                  >
                    <div className="flex items-center gap-2">
                      <span>{formData.product || "제품 선택"}</span>
                      {formData.product && (
                        <Badge variant="secondary" className="text-xs">
                          {formData.product === "공통" ? "공통" : "전용"}
                        </Badge>
                      )}
                    </div>
                    <ChevronDown className="h-4 w-4 opacity-50" />
                  </Button>
                  
                  {showProductPickerDialog && (
                    <div className="absolute top-full left-0 right-0 mt-2 border rounded-lg p-3 bg-white shadow-lg z-50 max-w-md">
                      <div className="flex items-center gap-2 mb-3">
                        <Search className="h-4 w-4 text-muted-foreground" />
                        <Input
                          placeholder="제품 검색..."
                          value={productSearchQueryDialog}
                          onChange={(e) => setProductSearchQueryDialog(e.target.value)}
                          className="h-8"
                          autoFocus
                        />
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => {
                            setShowProductPickerDialog(false);
                            setProductSearchQueryDialog("");
                          }}
                          className="h-8 w-8 p-0"
                        >
                          <X className="h-4 w-4" />
                        </Button>
                      </div>
                      
                      <div className="max-h-60 overflow-y-auto space-y-1">
                        {filteredProductsDialog.length === 0 ? (
                          <div className="text-center py-4 text-gray-500 text-sm">
                            검색 결과가 없습니다.
                          </div>
                        ) : (
                          filteredProductsDialog.map((product) => {
                            const productFormulaCount = formulas.filter(f => f.product === product).length;
                            return (
                              <button
                                key={product}
                                type="button"
                                onClick={() => {
                                  setFormData({ ...formData, product: product });
                                  setShowProductPickerDialog(false);
                                  setProductSearchQueryDialog("");
                                }}
                                className={`w-full flex items-center justify-between px-3 py-2 rounded hover:bg-gray-100 transition-colors ${
                                  formData.product === product ? "bg-primary/10 font-medium" : ""
                                }`}
                              >
                                <span>{product}</span>
                                <Badge variant={productFormulaCount > 0 ? "default" : "outline"} className="text-xs">
                                  {productFormulaCount}
                                </Badge>
                              </button>
                            );
                          })
                        )}
                      </div>
                    </div>
                  )}
                </div>
              </div>

              {/* 카테고리 */}
              <div className="grid grid-cols-4 items-start gap-4">
                <Label htmlFor="category" className="text-right pt-2">
                  카테고리 <span className="text-red-500">*</span>
                </Label>
                <div className="col-span-3 space-y-1">
                  <Select
                    value={formData.category}
                    onValueChange={(value) =>
                      setFormData({ ...formData, category: value })
                    }
                  >
                    <SelectTrigger className={!formData.category ? "border-red-300" : ""}>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      {categories.map((cat) => (
                        <SelectItem key={cat} value={cat}>
                          {cat}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>

              {/* 이름 */}
              <div className="grid grid-cols-4 items-start gap-4">
                <Label htmlFor="name" className="text-right pt-2">
                  이름 <span className="text-red-500">*</span>
                </Label>
                <div className="col-span-3 space-y-1">
                  <Input
                    id="name"
                    value={formData.name}
                    onChange={(e) =>
                      setFormData({ ...formData, name: e.target.value })
                    }
                    placeholder="예: 스크린 가로"
                    className={!formData.name?.trim() ? "border-red-300" : ""}
                  />
                </div>
              </div>

              {/* 변수 */}
              <div className="grid grid-cols-4 items-start gap-4">
                <Label htmlFor="variable" className="text-right pt-2">
                  변수 <span className="text-red-500">*</span>
                </Label>
                <div className="col-span-3 space-y-1">
                  <Input
                    id="variable"
                    value={formData.variable}
                    onChange={(e) =>
                      setFormData({ ...formData, variable: e.target.value })
                    }
                    placeholder="예: W1_스크린"
                    className={!formData.variable?.trim() ? "border-red-300" : ""}
                  />
                </div>
              </div>

              {/* 타입 */}
              <div className="grid grid-cols-4 items-center gap-4">
                <Label htmlFor="type" className="text-right">
                  타입 <span className="text-red-500">*</span>
                </Label>
                <div className="col-span-3">
                  <Select
                    value={formData.type}
                    onValueChange={(value: "calculation" | "range" | "input") =>
                      setFormData({ ...formData, type: value })
                    }
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="calculation">계산식</SelectItem>
                      <SelectItem value="range">범위별</SelectItem>
                      <SelectItem value="input">입력값</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

              {/* 결과 출력 타입 */}
              <div className="grid grid-cols-4 items-center gap-4">
                <Label className="text-right">
                  결과 출력 <span className="text-red-500">*</span>
                </Label>
                <div className="col-span-3 flex gap-6">
                  <label className="flex items-center gap-2 cursor-pointer">
                    <input
                      type="radio"
                      name="outputType"
                      value="variable"
                      checked={!formData.outputType || formData.outputType === "variable"}
                      onChange={() => setFormData({ ...formData, outputType: "variable" })}
                      className="w-4 h-4"
                    />
                    <span className="text-sm">변수에 저장</span>
                  </label>
                  <label className="flex items-center gap-2 cursor-pointer">
                    <input
                      type="radio"
                      name="outputType"
                      value="item"
                      checked={formData.outputType === "item"}
                      onChange={() => setFormData({ ...formData, outputType: "item" })}
                      className="w-4 h-4"
                    />
                    <span className="text-sm">품목/수량 출력</span>
                  </label>
                </div>
              </div>

              {/* 품목 관리 (outputType이 item일 때 - 계산식 타입에서만) */}
              {formData.type === "calculation" && formData.outputType === "item" && (
                <div className="grid grid-cols-4 gap-4">
                  <Label className="text-right pt-2">품목 목록 <span className="text-red-500">*</span></Label>
                  <div className="col-span-3 space-y-3 relative">
                    {formData.items && formData.items.length > 0 && (
                      <div className="space-y-2">
                        {formData.items.map((item) => (
                          <div
                            key={item.id}
                            className="flex items-center gap-2 p-2 border rounded bg-gray-50"
                          >
                            <div className="flex-1">
                              <div className="flex items-center gap-2">
                                <code className="text-xs bg-blue-50 text-blue-700 px-2 py-1 rounded font-mono">
                                  {item.itemCode}
                                </code>
                                <span className="text-sm">{item.itemName}</span>
                              </div>
                            </div>
                            <div className="w-32">
                              <Input
                                placeholder="수량"
                                value={item.quantity}
                                onChange={(e) =>
                                  handleUpdateFormulaItemQuantity(item.id, e.target.value)
                                }
                              />
                            </div>
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => handleDeleteFormulaItem(item.id)}
                            >
                              <Trash2 className="h-4 w-4 text-red-500" />
                            </Button>
                          </div>
                        ))}
                      </div>
                    )}
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => {
                        setActiveItemTarget('formula');
                        setShowItemPicker(true);
                      }}
                      className="w-full"
                    >
                      <Plus className="h-4 w-4 mr-2" />
                      품목 추가
                    </Button>
                    
                    {/* 품목 검색 팝오버 - 버튼 바로 아래 */}
                    {showItemPicker && activeItemTarget === 'formula' && (
                      <div className="absolute top-full left-0 right-0 mt-2 border rounded-lg p-4 bg-white shadow-lg z-50">
                        <div className="flex items-center justify-between mb-3">
                          <Label>품목 검색</Label>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => {
                              setShowItemPicker(false);
                              setItemSearchQuery("");
                            }}
                          >
                            <X className="h-4 w-4" />
                          </Button>
                        </div>
                        
                        <Input
                          placeholder="품목코드 또는 품목명으로 검색..."
                          value={itemSearchQuery}
                          onChange={(e) => setItemSearchQuery(e.target.value)}
                          className="mb-3"
                          autoFocus
                        />
                        
                        <div className="max-h-60 overflow-y-auto space-y-1">
                          {filteredItems.length === 0 ? (
                            <div className="text-center py-4 text-gray-500 text-sm">
                              {itemSearchQuery ? "검색 결과가 없습니다." : "등록된 품목이 없습니다."}
                            </div>
                          ) : (
                            filteredItems.map((item, idx) => (
                              <button
                                key={idx}
                                type="button"
                                onClick={() => {
                                  handleAddFormulaItem(item);
                                }}
                                className="w-full flex items-center justify-between p-2 hover:bg-gray-100 rounded transition-colors text-left"
                              >
                                <div className="flex items-center gap-2">
                                  <code className="text-xs bg-blue-50 text-blue-700 px-2 py-1 rounded font-mono">
                                    {item.itemCode}
                                  </code>
                                  <span className="text-sm">{item.itemName}</span>
                                </div>
                                <Badge variant="secondary" className="text-xs">
                                  {item.itemType === 'FG' ? '제품' : item.itemType === 'PT' ? '부품' : item.itemType === 'SM' ? '부자재' : item.itemType === 'RM' ? '원자재' : '소모품'}
                                </Badge>
                              </button>
                            ))
                          )}
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              )}

              {/* 계산식 (타입이 calculation일 때만 표시, 입력값은 숨김) */}
              {formData.type === "calculation" && (
                <div className="space-y-3">
                    <Label htmlFor="formula">
                      계산식 <span className="text-red-500">*</span>
                    </Label>
                    <div className="space-y-2">
                      <div className="relative">
                        <Input
                          id="formula"
                          value={formData.formula}
                          onChange={(e) => {
                            setFormData({ ...formData, formula: e.target.value });
                            // 실시간 validation
                            const validation = validateFormula(e.target.value);
                            setFormulaValidation(validation);
                          }}
                          placeholder="예: W0 + 140, SUM(W0, H0), ROUND(M * 2.5, 2)"
                        />
                        {formData.formula && (
                          <div className="absolute right-2 top-2">
                            {formulaValidation.valid ? (
                              <CheckCircle2 className="w-4 h-4 text-green-600" />
                            ) : (
                              <AlertCircle className="w-4 h-4 text-red-600" />
                            )}
                          </div>
                        )}
                      </div>
                      <div className="flex gap-2">
                        <Button
                          type="button"
                          variant="outline"
                          size="sm"
                          onClick={() => {
                            setActiveInputField('formula');
                            setShowVariablePicker(!showVariablePicker);
                          }}
                        >
                          <Search className="h-4 w-4 mr-1" />
                          변수 검색
                        </Button>
                        <Button
                          type="button"
                          variant="outline"
                          size="sm"
                          onClick={() => setShowFormulaHelper(!showFormulaHelper)}
                        >
                          <HelpCircle className="h-4 w-4 mr-1" />
                          함수 도움말
                        </Button>
                      </div>
                      
                      {/* 사용된 변수 표시 */}
                      {formData.formula && formulaValidation.valid && (
                        <div className="text-xs text-muted-foreground">
                          <span className="font-medium">사용된 변수:</span>{" "}
                          {extractVariables(formData.formula).length > 0 ? (
                            extractVariables(formData.formula).map((v, i) => (
                              <code key={i} className="bg-gray-100 px-1.5 py-0.5 rounded mr-1">
                                {v}
                              </code>
                            ))
                          ) : (
                            <span>없음</span>
                          )}
                        </div>
                      )}
                    </div>
                  
                  {/* 함수 도움말 */}
                  {showFormulaHelper && (
                    <div className="mt-3">
                      <FormulaHelper 
                        onInsertFunction={(syntax) => {
                          // 커서 위치에 함수 삽입
                          const input = document.getElementById("formula") as HTMLInputElement;
                          if (input) {
                            const cursorPos = input.selectionStart || formData.formula?.length || 0;
                            const before = formData.formula?.substring(0, cursorPos) || "";
                            const after = formData.formula?.substring(cursorPos) || "";
                            const newFormula = before + syntax + after;
                            setFormData({ ...formData, formula: newFormula });
                            
                            // Validation
                            setTimeout(() => {
                              const validation = validateFormula(newFormula);
                              setFormulaValidation(validation);
                            }, 0);
                          }
                        }}
                      />
                    </div>
                  )}
                </div>
              )}

              {/* 범위 규칙 (타입이 range일 때) */}
              {formData.type === "range" && (
                <div className="grid grid-cols-4 gap-4">
                  <Label className="text-right pt-2">범위 규칙 <span className="text-red-500">*</span></Label>
                  <div className="col-span-3 space-y-3">
                    {formData.ranges?.map((range) => (
                      <div
                        key={range.id}
                        className="border rounded-lg p-3 space-y-2 bg-gray-50"
                      >
                        <div className="flex justify-end">
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => handleDeleteRange(range.id)}
                          >
                            <X className="h-4 w-4" />
                          </Button>
                        </div>
                        <div className="grid grid-cols-2 gap-2">
                          <div>
                            <Label className="text-xs">최소값</Label>
                            <Input
                              type="number"
                              value={range.minValue}
                              onChange={(e) =>
                                handleUpdateRange(
                                  range.id,
                                  "minValue",
                                  parseFloat(e.target.value)
                                )
                              }
                            />
                          </div>
                          <div>
                            <Label className="text-xs">최대값</Label>
                            <Input
                              type="number"
                              value={range.maxValue}
                              onChange={(e) =>
                                handleUpdateRange(
                                  range.id,
                                  "maxValue",
                                  parseFloat(e.target.value)
                                )
                              }
                            />
                          </div>
                        </div>

                        <div>
                          <Label className="text-xs">결과 타입</Label>
                          <div className="flex gap-4 mt-2 mb-2">
                            <label className="flex items-center gap-2 cursor-pointer">
                              <input
                                type="radio"
                                name={`resultType-${range.id}`}
                                value="item"
                                checked={!range.resultType || range.resultType === "item"}
                                onChange={(e) =>
                                  handleUpdateRange(range.id, "resultType", "item")
                                }
                                className="w-4 h-4"
                              />
                              <span className="text-sm">품목</span>
                            </label>
                            <label className="flex items-center gap-2 cursor-pointer">
                              <input
                                type="radio"
                                name={`resultType-${range.id}`}
                                value="variable"
                                checked={range.resultType === "variable"}
                                onChange={(e) =>
                                  handleUpdateRange(range.id, "resultType", "variable")
                                }
                                className="w-4 h-4"
                              />
                              <span className="text-sm">변수</span>
                            </label>
                          </div>
                        </div>
                        {/* 결과값 - 변수 타입일 때 */}
                        {range.resultType === "variable" && (
                          <div>
                            <Label className="text-xs">결과값 (변수)</Label>
                            <div className="flex gap-2">
                              <Input
                                value={range.result}
                                onChange={(e) =>
                                  handleUpdateRange(range.id, "result", e.target.value)
                                }
                                placeholder="예: W1_스크린"
                              />
                              <Button
                                type="button"
                                variant="outline"
                                size="sm"
                                onClick={() => {
                                  setActiveInputField('range');
                                  setActiveRangeId(range.id);
                                  setShowVariablePicker(!showVariablePicker);
                                }}
                              >
                                <Search className="h-4 w-4" />
                              </Button>
                            </div>
                          </div>
                        )}
                        
                        {/* 품목 목록 - 품목 타입일 때 */}
                        {(!range.resultType || range.resultType === "item") && (
                          <div>
                            <Label className="text-xs">품목 목록</Label>
                            <div className="space-y-2 mt-2 relative">
                              {range.items && range.items.length > 0 && (
                                <div className="space-y-2">
                                  {range.items.map((item) => (
                                    <div
                                      key={item.id}
                                      className="flex items-center gap-2 p-2 border rounded bg-white"
                                    >
                                      <div className="flex-1">
                                        <div className="flex items-center gap-2">
                                          <code className="text-xs bg-blue-50 text-blue-700 px-2 py-1 rounded font-mono">
                                            {item.itemCode}
                                          </code>
                                          <span className="text-xs">{item.itemName}</span>
                                        </div>
                                      </div>
                                      <div className="w-24">
                                        <Input
                                          placeholder="수량"
                                          value={item.quantity}
                                          onChange={(e) =>
                                            handleUpdateRangeItemQuantity(range.id, item.id, e.target.value)
                                          }
                                          className="h-8 text-xs"
                                        />
                                      </div>
                                      <Button
                                        variant="ghost"
                                        size="sm"
                                        onClick={() => handleDeleteRangeItem(range.id, item.id)}
                                        className="h-8 w-8 p-0"
                                      >
                                        <Trash2 className="h-3 w-3 text-red-500" />
                                      </Button>
                                    </div>
                                  ))}
                                </div>
                              )}
                              <Button
                                variant="outline"
                                size="sm"
                                onClick={() => {
                                  setActiveItemTarget('range');
                                  setActiveRangeIdForItem(range.id);
                                  setShowItemPicker(true);
                                }}
                                className="w-full h-8 text-xs"
                              >
                                <Plus className="h-3 w-3 mr-1" />
                                품목 추가
                              </Button>
                              
                              {/* 품목 검색 팝오버 - 버튼 바로 아래 */}
                              {showItemPicker && activeItemTarget === 'range' && activeRangeIdForItem === range.id && (
                                <div className="absolute top-full left-0 right-0 mt-2 border rounded-lg p-4 bg-white shadow-lg z-50">
                                  <div className="flex items-center justify-between mb-3">
                                    <Label>품목 검색</Label>
                                    <Button
                                      variant="ghost"
                                      size="sm"
                                      onClick={() => {
                                        setShowItemPicker(false);
                                        setItemSearchQuery("");
                                      }}
                                    >
                                      <X className="h-4 w-4" />
                                    </Button>
                                  </div>
                                  
                                  <Input
                                    placeholder="품목코드 또는 품목명으로 검색..."
                                    value={itemSearchQuery}
                                    onChange={(e) => setItemSearchQuery(e.target.value)}
                                    className="mb-3"
                                    autoFocus
                                  />
                                  
                                  <div className="max-h-60 overflow-y-auto space-y-1">
                                    {filteredItems.length === 0 ? (
                                      <div className="text-center py-4 text-gray-500 text-sm">
                                        {itemSearchQuery ? "검색 결과가 없습니다." : "등록된 품목이 없습니다."}
                                      </div>
                                    ) : (
                                      filteredItems.map((item, idx) => (
                                        <button
                                          key={idx}
                                          type="button"
                                          onClick={() => {
                                            handleAddRangeItem(range.id, item);
                                          }}
                                          className="w-full flex items-center justify-between p-2 hover:bg-gray-100 rounded transition-colors text-left"
                                        >
                                          <div className="flex items-center gap-2">
                                            <code className="text-xs bg-blue-50 text-blue-700 px-2 py-1 rounded font-mono">
                                              {item.itemCode}
                                            </code>
                                            <span className="text-sm">{item.itemName}</span>
                                          </div>
                                          <Badge variant="secondary" className="text-xs">
                                            {item.itemType === 'FG' ? '제품' : item.itemType === 'PT' ? '부품' : item.itemType === 'SM' ? '부자재' : item.itemType === 'RM' ? '원자재' : '소모품'}
                                          </Badge>
                                        </button>
                                      ))
                                    )}
                                  </div>
                                </div>
                              )}
                            </div>
                          </div>
                        )}
                        
                        <div>
                          <Label className="text-xs">설명 (선택)</Label>
                          <Input
                            value={range.description || ""}
                            onChange={(e) =>
                              handleUpdateRange(
                                range.id,
                                "description",
                                e.target.value
                              )
                            }
                            placeholder="예: 0 ~ 150 범위"
                          />
                        </div>
                      </div>
                    ))}
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={handleAddRange}
                      className="w-full"
                    >
                      <Plus className="h-4 w-4 mr-2" />
                      범위 추가
                    </Button>
                  </div>
                </div>
              )}

              {/* 설명 */}
              <div className="grid grid-cols-4 items-start gap-4">
                <Label htmlFor="description" className="text-right pt-2">
                  설명
                </Label>
                <Textarea
                  id="description"
                  className="col-span-3"
                  value={formData.description}
                  onChange={(e) =>
                    setFormData({ ...formData, description: e.target.value })
                  }
                  placeholder="수식에 대한 설명을 입력하세요."
                  rows={3}
                />
              </div>
              
              {/* 변수 검색 팝오버 */}
              {showVariablePicker && (
                <div className="col-span-4 border rounded-lg p-4 bg-white shadow-lg">
                  <div className="flex items-center justify-between mb-3">
                    <Label>등록된 변수 검색</Label>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => {
                        setShowVariablePicker(false);
                        setVariableSearchQuery("");
                      }}
                    >
                      <X className="h-4 w-4" />
                    </Button>
                  </div>
                  
                  <Input
                    placeholder="변수명 또는 이름으로 검색..."
                    value={variableSearchQuery}
                    onChange={(e) => setVariableSearchQuery(e.target.value)}
                    className="mb-3"
                    autoFocus
                  />
                  
                  <div className="max-h-60 overflow-y-auto space-y-1">
                    {filteredVariables.length === 0 ? (
                      <div className="text-center py-4 text-gray-500 text-sm">
                        {variableSearchQuery ? "검색 결과가 없습니다." : "등록된 변수가 없습니다."}
                      </div>
                    ) : (
                      filteredVariables.map((v, idx) => (
                        <button
                          key={idx}
                          type="button"
                          onClick={() => handleInsertVariable(v.variable)}
                          className="w-full flex items-center justify-between p-2 hover:bg-gray-100 rounded transition-colors text-left"
                        >
                          <div className="flex items-center gap-2">
                            <code className="bg-gray-100 px-2 py-1 rounded text-sm font-medium">
                              {v.variable}
                            </code>
                            <span className="text-sm text-gray-600">{v.name}</span>
                          </div>
                          <Badge variant="outline" className="text-xs">
                            {v.category}
                          </Badge>
                        </button>
                      ))
                    )}
                  </div>
                </div>
              )}
            </DialogBody>

            <DialogFooter>
              <Button variant="outline" onClick={() => setIsDialogOpen(false)}>
                <X className="h-4 w-4 mr-2" />
                취소
              </Button>
              <Button 
                onClick={handleSave}
              >
                <Save className="h-4 w-4 mr-2" />
                저장
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>

        {/* 단가 맵핑 추가/수정 다이얼로그 */}
        <Dialog open={isPriceMappingDialogOpen} onOpenChange={setIsPriceMappingDialogOpen}>
          <DialogContent className="sm:max-w-lg">
            <DialogHeader>
              <DialogTitle>
                {editingPriceMapping ? "단가 맵핑 수정" : "단가 맵핑 추가"}
              </DialogTitle>
              <DialogDescription>
                품목과 계산 수식을 입력하세요.
              </DialogDescription>
            </DialogHeader>
            
            <DialogBody className="space-y-4">
              {/* 품목 선택 버튼 */}
              <div className="space-y-2">
                <Label>품목 선택</Label>
                <div className="relative">
                  <Button
                    variant="outline"
                    onClick={() => setShowPriceMappingItemPicker(!showPriceMappingItemPicker)}
                    className="w-full justify-between"
                    type="button"
                  >
                    <span className="text-sm">
                      {tempMapping.itemCode 
                        ? `${tempMapping.itemCode} - ${tempMapping.itemName}`
                        : "품목관리에서 선택하기"
                      }
                    </span>
                    <Search className="h-4 w-4 opacity-50" />
                  </Button>
                  
                  {/* 품목 검색 팝오버 */}
                  {showPriceMappingItemPicker && (
                    <div className="absolute top-full left-0 right-0 mt-2 border rounded-lg p-4 bg-white shadow-lg z-50 max-h-96 overflow-y-auto">
                      <div className="flex items-center justify-between mb-3">
                        <Label>품목 검색</Label>
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => {
                            setShowPriceMappingItemPicker(false);
                            setPriceMappingItemSearchQuery("");
                          }}
                          type="button"
                        >
                          <X className="h-4 w-4" />
                        </Button>
                      </div>
                      
                      <Input
                        placeholder="품목 코드 또는 품목명 검색..."
                        value={priceMappingItemSearchQuery}
                        onChange={(e) => setPriceMappingItemSearchQuery(e.target.value)}
                        className="mb-3"
                      />
                      
                      <div className="space-y-2 max-h-60 overflow-y-auto">
                        {filteredPriceMappingItems.length === 0 ? (
                          <div className="text-center py-4 text-gray-500 text-sm">
                            검색 결과가 없습니다.
                          </div>
                        ) : (
                          filteredPriceMappingItems.map((item) => (
                            <button
                              key={item.id}
                              type="button"
                              onClick={() => handleSelectPriceMappingItem(item)}
                              className="w-full text-left px-3 py-2 rounded hover:bg-gray-100 transition-colors border"
                            >
                              <div className="flex items-center justify-between">
                                <div className="flex-1">
                                  <div className="flex items-center gap-2">
                                    <Badge variant="outline" className="text-xs">
                                      {item.itemCode}
                                    </Badge>
                                    <span className="text-sm font-medium">{item.itemName}</span>
                                  </div>
                                  <div className="text-xs text-muted-foreground mt-1">
                                    판매단가: {(item.sellingPrice || 0).toLocaleString()}원
                                  </div>
                                </div>
                              </div>
                            </button>
                          ))
                        )}
                      </div>
                    </div>
                  )}
                </div>
                <p className="text-xs text-muted-foreground">
                  품목관리에서 등록된 품목을 선택하거나 아래에서 직접 입력하세요
                </p>
              </div>
              
              <div className="space-y-2">
                <Label htmlFor="itemCode">품목 코드 *</Label>
                <Input
                  id="itemCode"
                  value={tempMapping.itemCode || ""}
                  onChange={(e) => setTempMapping({ ...tempMapping, itemCode: e.target.value })}
                  placeholder="예: ITEM001"
                  className={!tempMapping.itemCode?.trim() ? "border-red-300" : ""}
                />
              </div>
              
              <div className="space-y-2">
                <Label htmlFor="itemName">품목명 *</Label>
                <Input
                  id="itemName"
                  value={tempMapping.itemName || ""}
                  onChange={(e) => setTempMapping({ ...tempMapping, itemName: e.target.value })}
                  placeholder="예: 스크린 원단"
                  className={!tempMapping.itemName?.trim() ? "border-red-300" : ""}
                />
              </div>
              
              <div className="space-y-2">
                <Label htmlFor="basePrice">품목 판매단가 (원)</Label>
                <Input
                  id="basePrice"
                  type="number"
                  value={tempMapping.basePrice || 0}
                  onChange={(e) => setTempMapping({ ...tempMapping, basePrice: parseFloat(e.target.value) || 0 })}
                  placeholder="예: 10000"
                />
                <p className="text-xs text-muted-foreground">
                  품목을 선택하면 자동으로 입력되며, 수동으로 수정할 수도 있습니다
                </p>
              </div>
              
              <div className="space-y-2">
                <Label htmlFor="quantityFormula">계산 수식 *</Label>
                <Textarea
                  id="quantityFormula"
                  value={tempMapping.quantityFormula || ""}
                  onChange={(e) => setTempMapping({ ...tempMapping, quantityFormula: e.target.value })}
                  placeholder="예: (W0 * H0) / 1000000"
                  rows={3}
                  className={!tempMapping.quantityFormula?.trim() ? "border-red-300" : ""}
                />
                <p className="text-xs text-muted-foreground">
                  수식관리에서 정의한 변수를 활용하여 수량/계수를 계산하는 수식을 입력하세요
                </p>
              </div>
              
              <div className="space-y-2">
                <Label htmlFor="description">설명 (선택)</Label>
                <Textarea
                  id="description"
                  value={tempMapping.description || ""}
                  onChange={(e) => setTempMapping({ ...tempMapping, description: e.target.value })}
                  placeholder="맵핑에 대한 설명을 입력하세요"
                  rows={2}
                />
              </div>
            </DialogBody>
            
            <DialogFooter>
              <Button variant="outline" onClick={() => setIsPriceMappingDialogOpen(false)}>
                취소
              </Button>
              <Button 
                onClick={handleSavePriceMapping}
                disabled={
                  !tempMapping.itemCode?.trim() || 
                  !tempMapping.itemName?.trim() || 
                  !tempMapping.quantityFormula?.trim() ||
                  (tempMapping.basePrice !== undefined && tempMapping.basePrice < 0)
                }
              >
                <Save className="h-4 w-4 mr-2" />
                저장
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>

      </PageLayout>
    </DndProvider>
  );
}