import React, { useState, useEffect, useRef } from "react";
import { useDrag, useDrop, DndProvider } from "react-dnd";
import { SingletonHTML5Backend } from "../lib/dnd";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "./ui/card";
import { Button } from "./ui/button";
import { Input } from "./ui/input";
import { Label } from "./ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "./ui/select";
import { Textarea } from "./ui/textarea";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "./ui/table";
import { Badge } from "./ui/badge";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "./ui/alert-dialog";
import { toast } from "sonner@2.0.3";
import {
  Calculator,
  Plus,
  Edit,
  Trash2,
  Play,
  ArrowLeft,
  RotateCcw,
  X,
  Package,
  Check,
  ChevronsUpDown,
  GripVertical,
  Lightbulb,
  Copy,
  Layers,
} from "lucide-react";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "./ui/popover";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "./ui/command";
import { useData } from "./contexts/DataContext";
import type {
  FormulaRule,
  RangeRule,
  RangeRuleItem,
  AdditionalCondition,
  Stage2MappingCondition,
} from "./contexts/DataContext";
import { PageLayout } from "./organisms/PageLayout";
import { PageHeader } from "./organisms/PageHeader";
import { StatCards } from "./organisms/StatCards";
import { DetailViewActions } from "./organisms/DetailViewActions";
import { FormulaCalculationResults } from "./FormulaCalculationResults";
import { AutoCalculationSimulator } from "./AutoCalculationSimulator";
import { ValidationErrorSummary } from "./molecules/ValidationErrorSummary";
import { useValidation, getFieldErrorClass, getSelectErrorClass } from "./hooks/useValidation";
import { SecondaryConditionInput } from "./SecondaryConditionInput";
import { WindingShaftSteelSummary } from "./WindingShaftSteelSummary";
import { MultiConditionInput } from "./MultiConditionInput";
import { Stage2MappingEditor } from "./Stage2MappingEditor";
import { NextStageMappingEditor } from "./NextStageMappingEditor";
import { StageRuleInput } from "./molecules/StageRuleInput";
import { MultiStageSelector } from "./molecules/MultiStageSelector";
import { RangeRuleCard } from "./RangeRuleCard";
import { MultiStageRuleForm } from "./MultiStageRuleForm";
import { RuleDependencyVisualizer } from "./RuleDependencyVisualizer";
import { RuleTemplateManager } from "./RuleTemplateManager";

// 카테고리 인터페이스
interface Category {
  id: string;
  label: string;
  ruleCodes: string[];
}

export function FormulaManagement() {
  const {
    formulaRules,
    addFormulaRule,
    updateFormulaRule,
    deleteFormulaRule,
    resetAllData,
    itemMasters,
    addItemMaster,
    stage2Mappings,
    addStage2Mapping,
    updateStage2Mapping,
  } = useData();

  // 단가 데이터 로드
  const [pricings, setPricings] = useState<any[]>(() => {
    const saved = localStorage.getItem('SAM_PRICINGS');
    return saved ? JSON.parse(saved) : [];
  });

  // localStorage 변경 감지하여 단가 데이터 업데이트
  useEffect(() => {
    const handleStorageChange = () => {
      const saved = localStorage.getItem('SAM_PRICINGS');
      if (saved) {
        setPricings(JSON.parse(saved));
      }
    };

    window.addEventListener('storage', handleStorageChange);
    return () => window.removeEventListener('storage', handleStorageChange);
  }, []);

  // 품목기준관리에서 단위 목록 추출
  const [availableUnits, setAvailableUnits] = useState<string[]>([]);

  useEffect(() => {
    // itemMasters에서 사용 중인 단위를 추출
    const units = new Set<string>();
    
    itemMasters.forEach((item) => {
      if (item.unit && item.unit.trim() !== '') {
        units.add(item.unit.trim());
      }
    });

    // 기본 단위 추가
    const defaultUnits = ['EA', 'KG', 'M', 'M²', 'MM', 'SET', 'PCS', 'L'];
    defaultUnits.forEach(unit => units.add(unit));

    // 정렬된 배열로 변환
    setAvailableUnits(Array.from(units).sort());
  }, [itemMasters]);

  // 현재 시스템의 최대 단계 번호 계산 (동적 확장용)
  const currentMaxStageLevel = formulaRules.reduce((max, rule) => {
    if (rule.isStage1 && rule.stageLevel) {
      return Math.max(max, rule.stageLevel);
    }
    return max;
  }, 0); // 아무 규칙도 없으면 0, 1단계부터 시작

  // 카테고리 관리 상태 - 기본정보와 품목으로 분리
  const [basicCategories, setBasicCategories] = useState<
    Category[]
  >([
    {
      id: "size-calculation",
      label: "제작사이즈",
      ruleCodes: [
        "W1-CALCULATION-SCREEN",
        "W1-CALCULATION-STEEL",
        "H1-CALCULATION-SCREEN",
        "H1-CALCULATION-STEEL",
      ],
    },
    {
      id: "area-calculation",
      label: "면적",
      ruleCodes: ["AREA-CALCULATION"],
    },
    {
      id: "weight-calculation",
      label: "중량",
      ruleCodes: [
        "WEIGHT-CALCULATION-SCREEN",
        "WEIGHT-CALCULATION-STEEL",
      ],
    },
  ]);

  const [itemCategories, setItemCategories] = useState<
    Category[]
  >([
    {
      id: "motor",
      label: "모터",
      ruleCodes: [
        "MOTOR-SCREEN-4",
        "MOTOR-SCREEN-5",
        "MOTOR-SCREEN-6",
        "MOTOR-STEEL-4",
        "MOTOR-STEEL-5",
        "MOTOR-STEEL-6",
        "MOTOR-STEEL-8",
      ],
    },
    {
      id: "guide-rail",
      label: "가이드레일",
      ruleCodes: [
        "GR-LENGTH",
        "GR-MATERIAL-2438",
        "GR-MATERIAL-3000-A",
        "GR-MATERIAL-3500-A",
        "GR-MATERIAL-4000-A",
        "GR-MATERIAL-4300-A",
        "GR-MATERIAL-MIXED-A",
        "GR-MATERIAL-3000-B",
        "GR-MATERIAL-4000-B",
        "GR-MATERIAL-4300-B",
        "GR-MATERIAL-4300-C",
        "GR-BASE-SCREEN-WALL",
        "GR-BASE-SCREEN-SIDE",
        "GR-BASE-SCREEN-MIXED",
        "GR-BASE-STEEL-WALL",
        "GR-BASE-STEEL-SIDE",
        "GR-BASE-STEEL-MIXED",
        "GUIDE-RAIL-TYPE",
        "GUIDE-RAIL-WALL",
        "GUIDE-RAIL-SIDE",
        "BASE-WALL",
        "BASE-SIDE",
        "GUIDE-RAIL-SCREEN-WALL",
        "GUIDE-RAIL-SCREEN-SIDE",
        "GUIDE-RAIL-STEEL-WALL",
        "GUIDE-RAIL-STEEL-SIDE",
        "BASE-SCREEN-WALL",
        "BASE-SCREEN-SIDE",
        "BASE-STEEL-WALL",
        "BASE-STEEL-SIDE",
      ],
    },
    {
      id: "smoke-barrier",
      label: "연기차단재",
      ruleCodes: ["SMOKE-BARRIER-QTY", "SMOKE-BARRIER-LENGTH", "SMOKE-BARRIER-SCREEN", "SMOKE-BARRIER-STEEL"],
    },
    {
      id: "case",
      label: "케이스(셔터박스)",
      ruleCodes: [
        "S-SIZE-SCREEN",
        "S-SIZE-STEEL",
        "CASE-STEEL-330",
        "CASE-SCREEN-380",
        "MARGURI-FIXED",
      ],
    },
    {
      id: "bottom-finish",
      label: "하단마감재",
      ruleCodes: [
        "BOTTOM-BAR-STEEL",
        "BOTTOM-BAR-SCREEN", 
        "L-BAR-SCREEN",
        "REINFORCE-FLAT-SCREEN",
        "WEIGHT-FLAT-SCREEN"
      ],
    },
    {
      id: "winding-shaft",
      label: "감기샤프트",
      ruleCodes: [
        "WINDING-SHAFT-SCREEN",
        "WINDING-SHAFT-SCREEN-AUX-4INCH",
        "WINDING-SHAFT-SCREEN-MAIN-4INCH",
        "WINDING-SHAFT-SCREEN-AUX-5INCH",
        "WINDING-SHAFT-SCREEN-MAIN-5INCH",
        "WINDING-SHAFT-SCREEN-AUX-6INCH",
        "WINDING-SHAFT-SCREEN-MAIN-6INCH",
        "WINDING-SHAFT-STEEL",
      ],
    },
    {
      id: "square-pipe",
      label: "각파이프",
      ruleCodes: [
        "SQUARE-PIPE",
        "SQUARE-PIPE-REINFORCEMENT-COUNT",
        "SQUARE-PIPE-SIZE",
        "SQUARE-PIPE-3000",
        "SQUARE-PIPE-6000"
      ],
    },
    {
      id: "round-bar",
      label: "환봉",
      ruleCodes: ["ROUND-BAR"],
    },
    {
      id: "joint-bar",
      label: "조인트바",
      ruleCodes: ["JOINT-BAR"],
    },
    {
      id: "bracket-angle",
      label: "모터용량별 브라켓 & 받침용앵글",
      ruleCodes: ["BRACKET-SCREEN", "BRACKET-STEEL"],
    },
    {
      id: "other-version",
      label: "다른버젼",
      ruleCodes: [],
    },
  ]);

  // 탭 상태 - 기본정보와 품목으로 분리
  const [activeBasicTab, setActiveBasicTab] = useState(
    "size-calculation",
  );
  const [activeItemTab, setActiveItemTab] = useState("motor");

  // 페이지 상태 ('list' | 'create' | 'edit' | 'multi-stage' | 'multi-stage-edit')
  const [pageMode, setPageMode] = useState<
    "list" | "create" | "edit" | "multi-stage" | "multi-stage-edit"
  >("list");

  // 다단계 편집 상태
  const [editingMultiStageRules, setEditingMultiStageRules] = useState<any[]>([]);

  // 탭 관리 상태 - 기본정보와 품목으로 분리
  const [isAddingBasicTab, setIsAddingBasicTab] =
    useState(false);
  const [newBasicTabName, setNewBasicTabName] = useState("");
  const [editingBasicTabId, setEditingBasicTabId] = useState<
    string | null
  >(null);
  const [editingBasicTabName, setEditingBasicTabName] =
    useState("");
  const [
    isManagingBasicCategories,
    setIsManagingBasicCategories,
  ] = useState(false);

  const [isAddingItemTab, setIsAddingItemTab] = useState(false);
  const [newItemTabName, setNewItemTabName] = useState("");
  const [editingItemTabId, setEditingItemTabId] = useState<
    string | null
  >(null);
  const [editingItemTabName, setEditingItemTabName] =
    useState("");
  const [
    isManagingItemCategories,
    setIsManagingItemCategories,
  ] = useState(false);

  // 입력 상태 (자동 계산용)
  const [inputs, setInputs] = useState({
    floors: 1,
    sign: "+",
    w0: 3000,
    h0: 2500,
    guideRailInstallType: "벽면형",
    power: "220V 단상",
    controller: "기본형",
    quantity: 1,
    category: "스크린" as "스크린" | "철재",
    productId: "",
  });

  // 계산 결과
  const [calculationResults, setCalculationResults] =
    useState<any>(null);

  // 규칙 관리 상태
  const [selectedRule, setSelectedRule] =
    useState<FormulaRule | null>(null);
  const [editingRanges, setEditingRanges] = useState<
    RangeRule[]
  >([]);
  const [stage2MappingConditions, setStage2MappingConditions] = useState<Stage2MappingCondition[]>([]);

  // 폼 상태
  const [ruleForm, setRuleForm] = useState({
    shaft: '4"',
    category: "스크린" as "스크린" | "철재",
    ruleType: "range" as "range" | "formula" | "fixed",
    formula: "",
    fixedValue: 0,
    inputVariable: "weight",
    unit: "",
    ruleCode: "",
    ruleName: "",
    isStage1: false,
    stage1ResultType: 'specification' as 'specification' | 'item' | 'quantity' | 'value',
  });

  // 벨리데이션 상태
  const { 
    validationErrors, 
    setValidationErrors, 
    clearFieldError, 
    clearAllErrors 
  } = useValidation();

  // 초기 브라켓 & 받침용앵글 산정기준 데이터 생성
  // 스크린용 감기샤프트 7개 규칙 샘플 생성 함수
  const handleCreateWindingShaftSample = () => {
    const existingRules = formulaRules.filter((r) => 
      r.ruleCode?.startsWith("WINDING-SHAFT-SCREEN")
    );
    
    if (existingRules.length > 0) {
      const confirmReplace = window.confirm(
        `기존 감기샤프트 규칙 ${existingRules.length}개가 있습니다.\n삭제하고 샘플 7개를 생성하시겠습니까?`
      );
      if (!confirmReplace) return;
      
      // 기존 규칙 삭제
      existingRules.forEach((rule) => {
        deleteFormulaRule(rule.id);
      });
    }

    // 1. [1단계] 샤프트 규격 선정
    addFormulaRule({
      id: `formula-${Date.now()}-shaft-screen`,
      ruleCode: "WINDING-SHAFT-SCREEN",
      ruleName: "[1단계] 스크린용 감기샤프트 규격 선정",
      description: "제작사이즈(W1) 기반 샤프트 규격 결정",
      ruleType: "range",
      category: "스크린",
      inputVariable: "W1",
      ranges: [
        {
          id: `range-${Date.now()}-1`,
          minValue: 0,
          maxValue: 6000,
          result: "4인치",
          description: "W1 ≤ 6000mm → 4인치 샤프트 규격 적용",
          itemCode: "",
          itemName: "",
          quantity: "",
        },
        {
          id: `range-${Date.now()}-2`,
          minValue: 6000,
          maxValue: 8200,
          result: "5인치",
          description: "6000mm < W1 ≤ 8200mm → 5인치 샤프트 규격 적용",
          itemCode: "",
          itemName: "",
          quantity: "",
        },
        {
          id: `range-${Date.now()}-3`,
          minValue: 8200,
          maxValue: 10200,
          result: "6인치",
          description: "8200mm < W1 ≤ 10200mm → 6인치 샤프트 규격 적용",
          itemCode: "",
          itemName: "",
          quantity: "",
        },
      ],
      status: "active",
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
    });

    // 2. [2단계] 4인치 보조샤프트
    setTimeout(() => {
      addFormulaRule({
        id: `formula-${Date.now()}-aux-4`,
        ruleCode: "WINDING-SHAFT-SCREEN-AUX-4INCH",
        ruleName: "[2단계] 4인치 보조샤프트",
        description: "4인치 샤프트 규격 선정 시 보조샤프트 품목 및 수량",
        ruleType: "range",
        category: "스크린",
        inputVariable: "W0",
        ranges: [
          {
            id: `range-${Date.now()}-1`,
            minValue: 0,
            maxValue: 999999,
            result: "보조샤프트 4인치 300mm x 2EA",
            description: "모든 폭에 대해 300mm 보조샤프트 2개",
            itemCode: "SHAFT-AUX-4-300",
            itemName: "보조샤프트 4인치 300mm",
            quantity: "2",
          },
        ],
        status: "active",
        createdAt: new Date().toISOString(),
        updatedAt: new Date().toISOString(),
      });
    }, 100);

    // 3. [2단계] 4인치 메인샤프트
    setTimeout(() => {
      addFormulaRule({
        id: `formula-${Date.now()}-main-4`,
        ruleCode: "WINDING-SHAFT-SCREEN-MAIN-4INCH",
        ruleName: "[2단계] 4인치 메인샤프트",
        description: "4인치 샤프트 규격 선정 시 메인샤프트 품목 및 수량",
        ruleType: "range",
        category: "스크린",
        inputVariable: "W0",
        ranges: [
          {
            id: `range-${Date.now()}-1`,
            minValue: 0,
            maxValue: 3000,
            result: "메인샤프트 4인치 3000mm x 1EA",
            description: "W0 ≤ 3000mm",
            itemCode: "SHAFT-MAIN-4-3000",
            itemName: "메인샤프트 4인치 3000mm",
            quantity: "1",
          },
          {
            id: `range-${Date.now()}-2`,
            minValue: 3000,
            maxValue: 6000,
            result: "메인샤프트 4인치 6000mm x 1EA",
            description: "3000mm < W0 ≤ 6000mm",
            itemCode: "SHAFT-MAIN-4-6000",
            itemName: "메인샤프트 4인치 6000mm",
            quantity: "1",
          },
        ],
        status: "active",
        createdAt: new Date().toISOString(),
        updatedAt: new Date().toISOString(),
      });
    }, 200);

    // 4. [2단계] 5인치 보조샤프트
    setTimeout(() => {
      addFormulaRule({
        id: `formula-${Date.now()}-aux-5`,
        ruleCode: "WINDING-SHAFT-SCREEN-AUX-5INCH",
        ruleName: "[2단계] 5인치 보조샤프트",
        description: "5인치 샤프트 규격 선정 시 보조샤프트 품목 및 수량",
        ruleType: "range",
        category: "스크린",
        inputVariable: "W0",
        ranges: [
          {
            id: `range-${Date.now()}-1`,
            minValue: 0,
            maxValue: 999999,
            result: "보조샤프트 5인치 300mm x 2EA",
            description: "모든 폭에 대해 300mm 보조샤프트 2개",
            itemCode: "SHAFT-AUX-5-300",
            itemName: "보조샤프트 5인치 300mm",
            quantity: "2",
          },
        ],
        status: "active",
        createdAt: new Date().toISOString(),
        updatedAt: new Date().toISOString(),
      });
    }, 300);

    // 5. [2단계] 5인치 메인샤프트
    setTimeout(() => {
      addFormulaRule({
        id: `formula-${Date.now()}-main-5`,
        ruleCode: "WINDING-SHAFT-SCREEN-MAIN-5INCH",
        ruleName: "[2단계] 5인치 메인샤프트",
        description: "5인치 샤프트 규격 선정 시 메인샤프트 품목 및 수량",
        ruleType: "range",
        category: "스크린",
        inputVariable: "W0",
        ranges: [
          {
            id: `range-${Date.now()}-1`,
            minValue: 0,
            maxValue: 4000,
            result: "메인샤프트 5인치 4000mm x 1EA",
            description: "W0 ≤ 4000mm",
            itemCode: "SHAFT-MAIN-5-4000",
            itemName: "메인샤프트 5인치 4000mm",
            quantity: "1",
          },
          {
            id: `range-${Date.now()}-2`,
            minValue: 4000,
            maxValue: 8000,
            result: "메인샤프트 5인치 8000mm x 1EA",
            description: "4000mm < W0 ≤ 8000mm",
            itemCode: "SHAFT-MAIN-5-8000",
            itemName: "메인샤프트 5인치 8000mm",
            quantity: "1",
          },
        ],
        status: "active",
        createdAt: new Date().toISOString(),
        updatedAt: new Date().toISOString(),
      });
    }, 400);

    // 6. [2단계] 6인치 보조샤프트
    setTimeout(() => {
      addFormulaRule({
        id: `formula-${Date.now()}-aux-6`,
        ruleCode: "WINDING-SHAFT-SCREEN-AUX-6INCH",
        ruleName: "[2단계] 6인치 보조샤프트",
        description: "6인치 샤프트 규격 선정 시 보조샤프트 품목 및 수량",
        ruleType: "range",
        category: "스크린",
        inputVariable: "W0",
        ranges: [
          {
            id: `range-${Date.now()}-1`,
            minValue: 0,
            maxValue: 999999,
            result: "보조샤프트 6인치 300mm x 2EA",
            description: "모든 폭에 대해 300mm 보조샤프트 2개",
            itemCode: "SHAFT-AUX-6-300",
            itemName: "보조샤프트 6인치 300mm",
            quantity: "2",
          },
        ],
        status: "active",
        createdAt: new Date().toISOString(),
        updatedAt: new Date().toISOString(),
      });
    }, 500);

    // 7. [2단계] 6인치 메인샤프트
    setTimeout(() => {
      addFormulaRule({
        id: `formula-${Date.now()}-main-6`,
        ruleCode: "WINDING-SHAFT-SCREEN-MAIN-6INCH",
        ruleName: "[2단계] 6인치 메인샤프트",
        description: "6인치 샤프트 규격 선정 시 메인샤프트 품목 및 수량",
        ruleType: "range",
        category: "스크린",
        inputVariable: "W0",
        ranges: [
          {
            id: `range-${Date.now()}-1`,
            minValue: 0,
            maxValue: 5000,
            result: "메인샤프트 6인치 5000mm x 1EA",
            description: "W0 ≤ 5000mm",
            itemCode: "SHAFT-MAIN-6-5000",
            itemName: "메인샤프트 6인치 5000mm",
            quantity: "1",
          },
          {
            id: `range-${Date.now()}-2`,
            minValue: 5000,
            maxValue: 10000,
            result: "메인샤프트 6인치 10000mm x 1EA",
            description: "5000mm < W0 ≤ 10000mm",
            itemCode: "SHAFT-MAIN-6-10000",
            itemName: "메인샤프트 6인치 10000mm",
            quantity: "1",
          },
        ],
        status: "active",
        createdAt: new Date().toISOString(),
        updatedAt: new Date().toISOString(),
      });

      toast.success("스크린용 감기샤프트 샘플 7개 규칙이 생성되었습니다!");
    }, 600);
  };

  // 철재용 감기샤프트 샘플 생성 함수
  const handleCreateWindingShaftSteelSample = () => {
    const existingRules = formulaRules.filter((r) => 
      r.ruleCode?.startsWith("WINDING-SHAFT-STEEL")
    );
    
    if (existingRules.length > 0) {
      const confirmReplace = window.confirm(
        `기존 철재용 감기샤프트 규칙 ${existingRules.length}개가 있습니다.\\n삭제하고 새로운 규칙을 생성하시겠습니까?`
      );
      if (!confirmReplace) return;
      
      // 기존 규칙 삭제
      existingRules.forEach((rule) => {
        deleteFormulaRule(rule.id);
      });
    }

    // [1단계] 철재용 감기샤프트 규격 선정
    addFormulaRule({
      id: `formula-${Date.now()}-shaft-steel`,
      ruleCode: "WINDING-SHAFT-STEEL",
      ruleName: "[1단계] 철재용 감기샤프트 규격 선정",
      description: "제작사이즈(W1)와 산출중량(K) 기반 샤프트 규격 결정",
      ruleType: "range",
      category: "철재",
      inputVariable: "W1",
      unit: "mm",
      ranges: [
        {
          id: `range-${Date.now()}-1`,
          minValue: 0,
          maxValue: 4500,
          result: "구간1",
          description: "0 < W1 ≤ 4500mm",
          itemCode: "",
          itemName: "",
          quantity: "",
          additionalConditions: [
            {
              id: `cond-${Date.now()}-1-1`,
              variable: "K",
              minValue: 0,
              maxValue: 400,
              conditionType: "and" as const,
              result: "4인치",
              description: "K ≤ 400 → 4인치"
            },
            {
              id: `cond-${Date.now()}-1-2`,
              variable: "K",
              minValue: 400,
              maxValue: 999999,
              conditionType: "or" as const,
              result: "5인치",
              description: "400 < K → 5인치"
            }
          ]
        },
        {
          id: `range-${Date.now()}-2`,
          minValue: 4500,
          maxValue: 5600,
          result: "구간2",
          description: "4500 < W1 ≤ 5600mm",
          itemCode: "",
          itemName: "",
          quantity: "",
          additionalConditions: [
            {
              id: `cond-${Date.now()}-2-1`,
              variable: "K",
              minValue: 0,
              maxValue: 600,
              conditionType: "and" as const,
              result: "5인치",
              description: "K ≤ 600 → 5인치"
            },
            {
              id: `cond-${Date.now()}-2-2`,
              variable: "K",
              minValue: 600,
              maxValue: 999999,
              conditionType: "or" as const,
              result: "6인치",
              description: "600 < K → 6인치"
            }
          ]
        },
        {
          id: `range-${Date.now()}-3`,
          minValue: 5600,
          maxValue: 7800,
          result: "구간3",
          description: "5600 < W1 ≤ 7800mm",
          itemCode: "",
          itemName: "",
          quantity: "",
          additionalConditions: [
            {
              id: `cond-${Date.now()}-3-1`,
              variable: "K",
              minValue: 0,
              maxValue: 800,
              conditionType: "and" as const,
              result: "6인치",
              description: "K ≤ 800 → 6인치"
            },
            {
              id: `cond-${Date.now()}-3-2`,
              variable: "K",
              minValue: 800,
              maxValue: 999999,
              conditionType: "or" as const,
              result: "8인치",
              description: "800 < K → 8인치"
            }
          ]
        },
        {
          id: `range-${Date.now()}-4`,
          minValue: 7800,
          maxValue: 8200,
          result: "8인치",
          description: "7800 < W1 ≤ 8200mm → 8인치",
          itemCode: "",
          itemName: "",
          quantity: "",
        },
      ],
      status: "active",
      isStage1: true,
      stage1ResultType: "specification",
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
    });

    toast.success("철재용 감기샤프트 규칙이 생성되었습니다.");
  };

  useEffect(() => {
    const bracketScreenExists = formulaRules.some(
      (rule) => rule.ruleCode === "BRACKET-SCREEN"
    );
    const bracketSteelExists = formulaRules.some(
      (rule) => rule.ruleCode === "BRACKET-STEEL"
    );

    // 스크린용 브라켓 & 받침용앵글 산정기준 추가
    if (!bracketScreenExists) {
      const screenRanges: RangeRule[] = [
        {
          id: `range-${Date.now()}-1`,
          minValue: 0,
          maxValue: 150,
          result: "150K 이하",
          description: "150K 이하",
          itemCode: "",
          itemName: "",
          quantity: 1,
        },
        {
          id: `range-${Date.now()}-2`,
          minValue: 150,
          maxValue: 300,
          result: "150K ~ 300K",
          description: "150K ~ 300K",
          itemCode: "",
          itemName: "",
          quantity: 1,
        },
        {
          id: `range-${Date.now()}-3`,
          minValue: 300,
          maxValue: 400,
          result: "300K ~ 400K",
          description: "300K ~ 400K",
          itemCode: "",
          itemName: "",
          quantity: 1,
        },
        {
          id: `range-${Date.now()}-4`,
          minValue: 400,
          maxValue: 999999,
          result: "400K 이상",
          description: "400K 이상",
          itemCode: "",
          itemName: "",
          quantity: 1,
        },
      ];

      addFormulaRule({
        id: `formula-${Date.now()}-screen`,
        ruleCode: "BRACKET-SCREEN",
        ruleName: "스크린용 브라켓 & 받침용앵글",
        description: "스크린용 모터 용량별 브라켓 및 받침용앵글 산정 기준",
        ruleType: "range",
        category: "스크린",
        inputVariable: "motorCapacity",
        ranges: screenRanges,
        status: "active",
        createdAt: new Date().toISOString(),
        updatedAt: new Date().toISOString(),
      });
    }

    // 철재용 브라켓 & 받침용앵글 산정기준 추가
    if (!bracketSteelExists) {
      const steelRanges: RangeRule[] = [
        {
          id: `range-${Date.now()}-11`,
          minValue: 0,
          maxValue: 300,
          result: "300K 이하",
          description: "300K 이하",
          itemCode: "",
          itemName: "",
          quantity: 1,
        },
        {
          id: `range-${Date.now()}-12`,
          minValue: 300,
          maxValue: 400,
          result: "300K ~ 400K",
          description: "300K ~ 400K",
          itemCode: "",
          itemName: "",
          quantity: 1,
        },
        {
          id: `range-${Date.now()}-13`,
          minValue: 400,
          maxValue: 500,
          result: "400K ~ 500K",
          description: "400K ~ 500K",
          itemCode: "",
          itemName: "",
          quantity: 1,
        },
        {
          id: `range-${Date.now()}-14`,
          minValue: 500,
          maxValue: 600,
          result: "500K ~ 600K",
          description: "500K ~ 600K",
          itemCode: "",
          itemName: "",
          quantity: 1,
        },
        {
          id: `range-${Date.now()}-15`,
          minValue: 600,
          maxValue: 800,
          result: "600K ~ 800K",
          description: "600K ~ 800K",
          itemCode: "",
          itemName: "",
          quantity: 1,
        },
        {
          id: `range-${Date.now()}-16`,
          minValue: 800,
          maxValue: 999999,
          result: "800K 이상",
          description: "800K 이상",
          itemCode: "",
          itemName: "",
          quantity: 1,
        },
      ];

      addFormulaRule({
        id: `formula-${Date.now()}-steel`,
        ruleCode: "BRACKET-STEEL",
        ruleName: "철재용 브라켓 & 받침용앵글",
        description: "철재용 모터 용량별 브라켓 및 받침용앵글 산정 기준",
        ruleType: "range",
        category: "철재",
        inputVariable: "motorCapacity",
        ranges: steelRanges,
        status: "active",
        createdAt: new Date().toISOString(),
        updatedAt: new Date().toISOString(),
      });
    }
  }, [formulaRules, addFormulaRule]);

  // 감기샤프트 산정기준 초기 데이터 생성
  useEffect(() => {
    const shaftScreenExists = formulaRules.some(
      (rule) => rule.ruleCode === "WINDING-SHAFT-SCREEN"
    );
    const shaftSteelExists = formulaRules.some(
      (rule) => rule.ruleCode === "WINDING-SHAFT-STEEL"
    );

    // 스크린용 감기샤프트 산정기준 추가
    if (!shaftScreenExists) {
      const screenRanges: RangeRule[] = [
        {
          id: `range-${Date.now()}-1`,
          minValue: 0,
          maxValue: 6000,
          result: "4인치",
          description: "W1 ≤ 6000mm → 4인치 샤프트 규격 적용",
          itemCode: "",
          itemName: "",
          quantity: "",
        },
        {
          id: `range-${Date.now()}-2`,
          minValue: 6000,
          maxValue: 8200,
          result: "5인치",
          description: "6000mm < W1 ≤ 8200mm → 5인치 샤프트 규격 적용",
          itemCode: "",
          itemName: "",
          quantity: "",
        },
        {
          id: `range-${Date.now()}-3`,
          minValue: 8200,
          maxValue: 10200,
          result: "6인치",
          description: "8200mm < W1 ≤ 10200mm → 6인치 샤프트 규격 적용",
          itemCode: "",
          itemName: "",
          quantity: "",
        },
      ];

      addFormulaRule({
        id: `formula-${Date.now()}-shaft-screen`,
        ruleCode: "WINDING-SHAFT-SCREEN",
        ruleName: "[1단계] 스크린용 감기샤프트 규격 선정",
        description: "제작사이즈(W1) 기반 샤프트 규격 결정",
        ruleType: "range",
        category: "스크린",
        inputVariable: "W1",
        unit: "mm",
        ranges: screenRanges,
        status: "active",
        createdAt: new Date().toISOString(),
        updatedAt: new Date().toISOString(),
      });
    }

    // 철재용 감기샤프트는 샘플 버튼으로 생성하도록 변경
    // (복합 조건이 필요하므로 수동으로 생성)
  }, [formulaRules, addFormulaRule]);

  // 각파이프 3단계 산정기준 초기 데이터 생성
  useEffect(() => {
    const squarePipeStage1Exists = formulaRules.some(
      (rule) => rule.ruleCode === "SQUARE-PIPE-REINFORCEMENT-COUNT"
    );

    if (!squarePipeStage1Exists) {
      // 1단계: 케이스 사이즈(S) → 보강 갯수
      const stage1Ranges: RangeRule[] = [
        { id: `range-sp1-${Date.now()}-1`, minValue: 0, maxValue: 1600, result: "3", description: "S ≤ 1600mm → 보강 3개", itemCode: "", itemName: "", quantity: "" },
        { id: `range-sp1-${Date.now()}-2`, minValue: 1600, maxValue: 2800, result: "4", description: "1600 < S ≤ 2800mm → 보강 4개", itemCode: "", itemName: "", quantity: "" },
        { id: `range-sp1-${Date.now()}-3`, minValue: 2800, maxValue: 4000, result: "5", description: "2800 < S ≤ 4000mm → 보강 5개", itemCode: "", itemName: "", quantity: "" },
        { id: `range-sp1-${Date.now()}-4`, minValue: 4000, maxValue: 5200, result: "6", description: "4000 < S ≤ 5200mm → 보강 6개", itemCode: "", itemName: "", quantity: "" },
        { id: `range-sp1-${Date.now()}-5`, minValue: 5200, maxValue: 6400, result: "7", description: "5200 < S ≤ 6400mm → 보강 7개", itemCode: "", itemName: "", quantity: "" },
        { id: `range-sp1-${Date.now()}-6`, minValue: 6400, maxValue: 7600, result: "8", description: "6400 < S ≤ 7600mm → 보강 8개", itemCode: "", itemName: "", quantity: "" },
        { id: `range-sp1-${Date.now()}-7`, minValue: 7600, maxValue: 8800, result: "9", description: "7600 < S ≤ 8800mm → 보강 9개", itemCode: "", itemName: "", quantity: "" },
        { id: `range-sp1-${Date.now()}-8`, minValue: 8800, maxValue: 10000, result: "10", description: "8800 < S ≤ 10000mm → 보강 10개", itemCode: "", itemName: "", quantity: "" },
        { id: `range-sp1-${Date.now()}-9`, minValue: 10000, maxValue: 12000, result: "11", description: "10000 < S ≤ 12000mm → 보강 11개", itemCode: "", itemName: "", quantity: "" },
      ];

      const stage1Id = `formula-${Date.now()}-sp1`;
      addFormulaRule({
        id: stage1Id,
        ruleCode: "SQUARE-PIPE-REINFORCEMENT-COUNT",
        ruleName: "[1단계] 각파이프 보강 갯수",
        description: "케이스 사이즈(S) 기반 보강 갯수 결정",
        ruleType: "range",
        category: "square-pipe",
        inputVariable: "S",
        unit: "mm",
        ranges: stage1Ranges,
        status: "active",
        isStage1: true,
        stageLevel: 1,
        stage1ResultType: "quantity",
        createdAt: new Date().toISOString(),
        updatedAt: new Date().toISOString(),
      });

      // 2단계: 보강 갯수 → 각파이프 사이즈 (수식)
      setTimeout(() => {
        const stage2Id = `formula-${Date.now()}-sp2`;
        addFormulaRule({
          id: stage2Id,
          ruleCode: "SQUARE-PIPE-SIZE",
          ruleName: "[2단계] 각파이프 사이즈 계산",
          description: "보강 갯수 기반 각파이프 총 사이즈 계산",
          ruleType: "formula",
          formula: "S + 3000 * BZ8",
          category: "square-pipe",
          inputVariable: "BZ8",
          unit: "mm",
          status: "active",
          isIntermediateRule: true,
          stageLevel: 2,
          intermediateResultType: "specification",
          parentStageRuleId: stage1Id,
          createdAt: new Date().toISOString(),
          updatedAt: new Date().toISOString(),
        });

        // 3단계-A: 각파이프 사이즈 → 3000 규격 갯수 (사이즈 ≤ 18000)
        setTimeout(() => {
          const stage3ARanges: RangeRule[] = [
            { id: `range-sp3a-${Date.now()}-1`, minValue: 0, maxValue: 9000, result: "3", description: "사이즈 ≤ 9000mm → 3000 규격 3개", itemCode: "SQUARE-PIPE-3000", itemName: "각파이프 3000mm", quantity: "3" },
            { id: `range-sp3a-${Date.now()}-2`, minValue: 9000, maxValue: 12000, result: "4", description: "9000 < 사이즈 ≤ 12000mm → 3000 규격 4개", itemCode: "SQUARE-PIPE-3000", itemName: "각파이프 3000mm", quantity: "4" },
            { id: `range-sp3a-${Date.now()}-3`, minValue: 12000, maxValue: 15000, result: "5", description: "12000 < 사이즈 ≤ 15000mm → 3000 규격 5개", itemCode: "SQUARE-PIPE-3000", itemName: "각파이프 3000mm", quantity: "5" },
            { id: `range-sp3a-${Date.now()}-4`, minValue: 15000, maxValue: 18000, result: "6", description: "15000 < 사이즈 ≤ 18000mm → 3000 규격 6개", itemCode: "SQUARE-PIPE-3000", itemName: "각파이프 3000mm", quantity: "6" },
          ];

          addFormulaRule({
            id: `formula-${Date.now()}-sp3a`,
            ruleCode: "SQUARE-PIPE-3000",
            ruleName: "[3단계-A] 각파이프 3000 규격 갯수",
            description: "각파이프 사이즈 ≤ 18000mm일 때 3000 규격 갯수",
            ruleType: "range",
            category: "square-pipe",
            inputVariable: "CA8",
            unit: "EA",
            ranges: stage3ARanges,
            status: "active",
            stageLevel: 3,
            parentStageRuleId: stage2Id,
            createdAt: new Date().toISOString(),
            updatedAt: new Date().toISOString(),
          });
        }, 100);

        // 3단계-B: 각파이프 사이즈 → 6000 규격 갯수 (사이즈 > 18000)
        setTimeout(() => {
          const stage3BRanges: RangeRule[] = [
            { id: `range-sp3b-${Date.now()}-1`, minValue: 18000, maxValue: 24000, result: "4", description: "18000 < 사이즈 ≤ 24000mm → 6000 규격 4개", itemCode: "SQUARE-PIPE-6000", itemName: "각파이프 6000mm", quantity: "4" },
            { id: `range-sp3b-${Date.now()}-2`, minValue: 24000, maxValue: 30000, result: "5", description: "24000 < 사이즈 ≤ 30000mm → 6000 규격 5개", itemCode: "SQUARE-PIPE-6000", itemName: "각파이프 6000mm", quantity: "5" },
            { id: `range-sp3b-${Date.now()}-3`, minValue: 30000, maxValue: 36000, result: "6", description: "30000 < 사이즈 ≤ 36000mm → 6000 규격 6개", itemCode: "SQUARE-PIPE-6000", itemName: "각파이프 6000mm", quantity: "6" },
            { id: `range-sp3b-${Date.now()}-4`, minValue: 36000, maxValue: 42000, result: "7", description: "36000 < 사이즈 ≤ 42000mm → 6000 규격 7개", itemCode: "SQUARE-PIPE-6000", itemName: "각파이프 6000mm", quantity: "7" },
            { id: `range-sp3b-${Date.now()}-5`, minValue: 42000, maxValue: 48000, result: "8", description: "42000 < 사이즈 ≤ 48000mm → 6000 규격 8개", itemCode: "SQUARE-PIPE-6000", itemName: "각파이프 6000mm", quantity: "8" },
          ];

          addFormulaRule({
            id: `formula-${Date.now()}-sp3b`,
            ruleCode: "SQUARE-PIPE-6000",
            ruleName: "[3단계-B] 각파이프 6000 규격 갯수",
            description: "각파이프 사이즈 > 18000mm일 때 6000 규격 갯수",
            ruleType: "range",
            category: "square-pipe",
            inputVariable: "CA8",
            unit: "EA",
            ranges: stage3BRanges,
            status: "active",
            stageLevel: 3,
            parentStageRuleId: stage2Id,
            createdAt: new Date().toISOString(),
            updatedAt: new Date().toISOString(),
          });

          toast.success("각파이프 3단계 산정 기준이 생성되었습니다.");
        }, 200);
      }, 100);
    }
  }, [formulaRules, addFormulaRule]);

  // 감기샤프트 2단계 산정기준 초기 데이터 생성
  // TODO: 필요시 createWindingShaft2ndStageRules 함수 구현
  /*
  useEffect(() => {
    const windingShaft2ndStageRules = createWindingShaft2ndStageRules();
    
    windingShaft2ndStageRules.forEach((ruleData) => {
      const exists = formulaRules.some(
        (rule) => rule.ruleCode === ruleData.ruleCode
      );
      
      if (!exists) {
        addFormulaRule({
          id: `formula-${Date.now()}-${ruleData.ruleCode}`,
          ruleCode: ruleData.ruleCode,
          ruleName: ruleData.ruleName,
          description: ruleData.description,
          ruleType: "range",
          category: ruleData.category as "스크린" | "철재" | "공통",
          inputVariable: ruleData.inputVariable,
          unit: ruleData.unit,
          ranges: ruleData.ranges,
          status: "active",
          createdAt: new Date().toISOString(),
          updatedAt: new Date().toISOString(),
        });
      }
    });
  }, [formulaRules, addFormulaRule]);
  */

  // 기본정보 탭 추가
  const handleAddBasicTab = () => {
    if (!newBasicTabName.trim()) {
      setValidationErrors({ basicTabName: "카테고리명을 입력해주세요" });
      return;
    }

    const newId = `basic-tab-${Date.now()}`;
    setBasicCategories([
      ...basicCategories,
      {
        id: newId,
        label: newBasicTabName.trim(),
        ruleCodes: [],
      },
    ]);
    setNewBasicTabName("");
    setIsAddingBasicTab(false);
    toast.success("카테고리가 추가되었습니다.");
  };

  // 기본정보 탭 수정
  const handleEditBasicTab = (id: string) => {
    const category = basicCategories.find((c) => c.id === id);
    if (category) {
      setEditingBasicTabId(id);
      setEditingBasicTabName(category.label);
    }
  };

  // 기본정보 탭 수정 저장
  const handleSaveBasicTabEdit = () => {
    if (!editingBasicTabName.trim()) {
      setValidationErrors({ basicTabName: "카테고리명을 입력해주세요" });
      return;
    }

    setBasicCategories(
      basicCategories.map((c) =>
        c.id === editingBasicTabId
          ? { ...c, label: editingBasicTabName.trim() }
          : c,
      ),
    );
    setEditingBasicTabId(null);
    setEditingBasicTabName("");
    toast.success("카테고리명이 수정되었습니다.");
  };

  // 기본정보 탭 삭제
  const handleDeleteBasicTab = (id: string) => {
    if (basicCategories.length <= 1) {
      toast.error("최소 1개 이상의 카테고리가 필요합니다.");
      return;
    }

    setBasicCategories(
      basicCategories.filter((c) => c.id !== id),
    );
    if (activeBasicTab === id) {
      setActiveBasicTab(basicCategories[0].id);
    }
    toast.success("카테고리가 삭제되었습니다.");
  };

  // 품목 탭 추가
  const handleAddItemTab = () => {
    if (!newItemTabName.trim()) {
      setValidationErrors({ itemTabName: "카테고리명을 입력해주세요" });
      return;
    }

    const newId = `item-tab-${Date.now()}`;
    setItemCategories([
      ...itemCategories,
      {
        id: newId,
        label: newItemTabName.trim(),
        ruleCodes: [],
      },
    ]);
    setNewItemTabName("");
    setIsAddingItemTab(false);
    toast.success("카테고리가 추가되었습니다.");
  };

  // 품목 탭 수정
  const handleEditItemTab = (id: string) => {
    const category = itemCategories.find((c) => c.id === id);
    if (category) {
      setEditingItemTabId(id);
      setEditingItemTabName(category.label);
    }
  };

  // 품목 탭 수정 저장
  const handleSaveItemTabEdit = () => {
    if (!editingItemTabName.trim()) {
      setValidationErrors({ itemTabName: "카테고리명을 입력해주세요" });
      return;
    }

    setItemCategories(
      itemCategories.map((c) =>
        c.id === editingItemTabId
          ? { ...c, label: editingItemTabName.trim() }
          : c,
      ),
    );
    setEditingItemTabId(null);
    setEditingItemTabName("");
    toast.success("카테고리명이 수정되었습니다.");
  };

  // 품목 탭 삭제
  const handleDeleteItemTab = (id: string) => {
    if (itemCategories.length <= 1) {
      toast.error("최소 1개 이상의 카테고리가 필요합니다.");
      return;
    }

    setItemCategories(
      itemCategories.filter((c) => c.id !== id),
    );
    if (activeItemTab === id) {
      setActiveItemTab(itemCategories[0].id);
    }
    toast.success("카테고리가 삭제되었습니다.");
  };

  // 자동 계산 실행
  const handleAutoCalculation = () => {
    const { w0, h0, category, productId, quantity } = inputs;

    const errors: Record<string, string> = {};
    
    if (w0 === 0 || h0 === 0) {
      errors.openSize = "오픈사이즈를 입력해주세요";
    }

    if (Object.keys(errors).length > 0) {
      setValidationErrors(errors);
      return;
    }

    // 에러가 없으면 초기화
    clearAllErrors();

    // 선택된 제품 정보 가져오기
    const selectedProduct = itemMasters.find(
      (item) => item.id === productId,
    );
    const productName = selectedProduct
      ? selectedProduct.itemName
      : "";

    // 기본 계산 - 산정 기준 적용
    let w1 = 0; // 제작폭
    let h1 = 0; // 제작높이
    let area = 0; // 면적
    let weight = 0; // 중량

    // W1 계산 (카테고리별 산정 기준 적용)
    const w1Code = `W1-CALCULATION-${category === "스크린" ? "SCREEN" : "STEEL"}`;
    const w1Rule = formulaRules.find(
      (r) => r.ruleCode === w1Code && r.status === "active",
    );
    if (w1Rule && w1Rule.formula) {
      try {
        w1 = evaluateFormula(w1Rule.formula, { W0: w0 });
      } catch (e) {
        console.error("W1 계산 오류:", e);
        // 기본 계산
        w1 = category === "스크린" ? w0 + 140 : w0 + 110;
      }
    } else {
      // 기본 계산
      w1 = category === "스크린" ? w0 + 140 : w0 + 110;
    }

    // H1 계산 (카테고리별 산정 기준 적용)
    const h1Code = `H1-CALCULATION-${category === "스크린" ? "SCREEN" : "STEEL"}`;
    const h1Rule = formulaRules.find(
      (r) => r.ruleCode === h1Code && r.status === "active",
    );
    if (h1Rule && h1Rule.formula) {
      try {
        h1 = evaluateFormula(h1Rule.formula, { H0: h0 });
      } catch (e) {
        console.error("H1 계산 오류:", e);
        // 기본 계산
        h1 = h0 + 350;
      }
    } else {
      // 기본 계산
      h1 = h0 + 350;
    }

    // 면적 계산 (산정 기준 적용)
    const areaRule = formulaRules.find(
      (r) =>
        r.ruleCode === "AREA-CALCULATION" &&
        r.status === "active",
    );
    if (areaRule && areaRule.formula) {
      try {
        area = evaluateFormula(areaRule.formula, {
          W0: w0,
          H0: h0,
          W1: w1,
          H1: h1,
        });
      } catch (e) {
        console.error("면적 계산 오류:", e);
        area = (w1 * h1) / 1000000; // 기본 계산
      }
    } else {
      area = (w1 * h1) / 1000000; // 기본 계산
    }

    // 중량 계산 (카테고리별 산정 기준 적용)
    const weightCode = `WEIGHT-CALCULATION-${category === "스크린" ? "SCREEN" : "STEEL"}`;
    const weightRule = formulaRules.find(
      (r) => r.ruleCode === weightCode && r.status === "active",
    );
    if (weightRule && weightRule.formula) {
      try {
        weight = evaluateFormula(weightRule.formula, {
          W0: w0,
          H0: h0,
          W1: w1,
          H1: h1,
          area,
          M: area,
        });
      } catch (e) {
        console.error("중량 계산 오류:", e);
        // 기본 계산
        weight =
          category === "스크린"
            ? area * 2 + (w0 * 14.17) / 1000
            : area * 25;
      }
    } else {
      // 기본 계산
      weight =
        category === "스크린"
          ? area * 2 + (w0 * 14.17) / 1000
          : area * 25;
    }

    // 각 카테고리별 자동 산출
    const results: any = {
      basic: {
        w0,
        h0,
        w1,
        h1,
        area,
        weight,
        category,
        productName,
        quantity,
      },
      items: {},
      bomItems: [], // BOM 기반 산출 결과
    };

    // 선택된 제품의 BOM에 등록된 품목만 자재 산출 (필터링 적용)
    if (
      selectedProduct?.bom &&
      selectedProduct.bom.length > 0
    ) {
      // BOM에 등록된 품목만 순회하여 계산
      selectedProduct.bom.forEach((bomLine) => {
        let calculatedQty = bomLine.quantity;

        // quantityFormula가 있으면 수식으로 계산
        if (bomLine.quantityFormula) {
          try {
            calculatedQty = evaluateFormula(
              bomLine.quantityFormula,
              {
                W0: w0,
                H0: h0,
                W1: w1,
                H1: h1,
                W: w1,
                H: h1, // 호환성을 위한 단축 변수
                area,
                weight,
              },
            );
          } catch (e) {
            console.error(
              `BOM 수량 계산 오류 (${bomLine.childItemName}):`,
              e,
            );
          }
        }

        const totalPrice =
          calculatedQty * (bomLine.unitPrice || 0);

        // BOM에 등록된 품목만 결과에 추가
        results.bomItems.push({
          itemCode: bomLine.childItemCode,
          itemName: bomLine.childItemName,
          baseQuantity: bomLine.quantity,
          calculatedQuantity: parseFloat(
            calculatedQty.toFixed(3),
          ),
          unit: bomLine.unit,
          unitPrice: bomLine.unitPrice || 0,
          totalPrice: totalPrice,
          formula: bomLine.quantityFormula,
          note: bomLine.note,
        });
      });
    }

    // 선택된 제품의 BOM 카테고리 확인
    const bomCategories = selectedProduct?.bomCategories || [];
    const shouldCalculate = (categoryId: string) => {
      // bomCategories가 비어있으면 모든 항목 계산 (기존 제품)
      // bomCategories가 있으면 포함된 항목만 계산 (샘플 제품)
      return (
        bomCategories.length === 0 ||
        bomCategories.includes(categoryId)
      );
    };

    // 모터 용량 산정 - 중량 기준으로만 계산
    if (shouldCalculate("motor")) {
      const motorCode = `MOTOR-${category === "스크린" ? "SCREEN" : "STEEL"}-4`;
      const motorRule = formulaRules.find(
        (r) =>
          r.ruleCode === motorCode && r.status === "active",
      );
      if (motorRule && motorRule.ranges) {
        const matchedRange = motorRule.ranges.find(
          (r) => weight >= r.minValue && weight <= r.maxValue,
        );
        results.items.motor = matchedRange
          ? matchedRange.result
          : "범위 초과";
      }
    }

    // 케이스판재
    const casePlateRule = formulaRules.find(
      (r) =>
        r.ruleCode === "CASE-PLATE" && r.status === "active",
    );
    const maxSize = Math.max(w1, h1);
    if (casePlateRule && casePlateRule.ranges) {
      const matchedRange = casePlateRule.ranges.find(
        (r) => maxSize >= r.minValue && maxSize <= r.maxValue,
      );
      results.items.casePlate = matchedRange
        ? matchedRange.result
        : "특주";
    }

    // 케이스세로대 수량 (수식 적용)
    const verticalRule = formulaRules.find(
      (r) =>
        r.ruleCode === "CASE-VERTICAL" && r.status === "active",
    );
    if (verticalRule && verticalRule.formula) {
      try {
        const qty = evaluateFormula(verticalRule.formula, {
          W1: w1,
          H1: h1,
          area,
          weight,
        });
        results.items.caseVertical = qty;
      } catch (e) {
        results.items.caseVertical = "계산오류";
      }
    }

    // 케이스가로대 수량
    const horizontalRule = formulaRules.find(
      (r) =>
        r.ruleCode === "CASE-HORIZONTAL" &&
        r.status === "active",
    );
    if (horizontalRule && horizontalRule.formula) {
      try {
        const qty = evaluateFormula(horizontalRule.formula, {
          W1: w1,
          H1: h1,
          area,
          weight,
        });
        results.items.caseHorizontal = qty;
      } catch (e) {
        results.items.caseHorizontal = "계산오류";
      }
    }

    // 브라켓 수량
    const bracketRule = formulaRules.find(
      (r) =>
        r.ruleCode === "BRACKET-QTY" && r.status === "active",
    );
    if (bracketRule && bracketRule.formula) {
      try {
        const qty = evaluateFormula(bracketRule.formula, {
          W1: w1,
          H1: h1,
          area,
          weight,
        });
        results.items.bracket = qty;
      } catch (e) {
        results.items.bracket = "계산오류";
      }
    }

    // 체인 길이
    const chainRule = formulaRules.find(
      (r) =>
        r.ruleCode === "CHAIN-LENGTH" && r.status === "active",
    );
    if (chainRule && chainRule.formula) {
      try {
        const length = evaluateFormula(chainRule.formula, {
          W1: w1,
          H1: h1,
          area,
          weight,
        });
        results.items.chain = parseFloat(length.toFixed(2));
      } catch (e) {
        results.items.chain = "계산오류";
      }
    }

    // 원단 면적 (스크린만)
    if (category === "스크린") {
      const fabricRule = formulaRules.find(
        (r) =>
          r.ruleCode === "FABRIC-AREA" && r.status === "active",
      );
      if (fabricRule && fabricRule.formula) {
        try {
          const fabricArea = evaluateFormula(
            fabricRule.formula,
            { W1: w1, H1: h1, area, weight },
          );
          results.items.fabric = parseFloat(
            fabricArea.toFixed(3),
          );
        } catch (e) {
          results.items.fabric = "계산오류";
        }
      }
    }

    // 가이드레일 제작길이(G) 계산
    let guideRailLength = 0;
    if (shouldCalculate("guide-rail")) {
      const grLengthRule = formulaRules.find(
        (r) =>
          r.ruleCode === "GR-LENGTH" && r.status === "active",
      );
      if (grLengthRule && grLengthRule.formula) {
        try {
          guideRailLength = evaluateFormula(
            grLengthRule.formula,
            { W1: w1, H1: h1, H0: h0, area, weight },
          );
          results.items.guideRailLength = guideRailLength;
        } catch (e) {
          results.items.guideRailLength = "계산오류";
        }
      }

      // 가이드레�� 자재 선택 (제작길이 G 기준)
      if (guideRailLength > 0) {
        const grMaterialRules = formulaRules.filter(
          (r) =>
            r.ruleCode.startsWith("GR-MATERIAL") &&
            r.status === "active",
        );
        for (const rule of grMaterialRules) {
          if (rule.ranges) {
            const matchedRange = rule.ranges.find(
              (r) =>
                guideRailLength > r.minValue &&
                guideRailLength <= r.maxValue,
            );
            if (matchedRange) {
              results.items.guideRailMaterial =
                matchedRange.result;
              break;
            }
          }
        }
      }

      // 가이드레일 품목 (중량 기준)
      const grTypeRule = formulaRules.find(
        (r) =>
          r.ruleCode === "GUIDE-RAIL-TYPE" &&
          r.status === "active",
      );
      if (grTypeRule && grTypeRule.ranges) {
        const matchedRange = grTypeRule.ranges.find(
          (r) => weight >= r.minValue && weight <= r.maxValue,
        );
        results.items.guideRailType = matchedRange
          ? matchedRange.result
          : "범위 초과";
      }
    }

    // 연기차단재 수량 (제품 카테고리별)
    if (shouldCalculate("smoke-barrier")) {
      const smokeBarrierQtyCode = `SMOKE-BARRIER-QTY-${category === "스크린" ? "SCREEN" : "STEEL"}`;
      const smokeBarrierQtyRule = formulaRules.find(
        (r) =>
          r.ruleCode === smokeBarrierQtyCode &&
          r.status === "active",
      );
      if (
        smokeBarrierQtyRule &&
        smokeBarrierQtyRule.fixedValue !== undefined
      ) {
        const qtyPer1Ryang = smokeBarrierQtyRule.fixedValue;
        const totalQty = qtyPer1Ryang * 2; // 1SET = 2량
        results.items.smokeBarrierQty = `${totalQty}개 (1량당 ${qtyPer1Ryang}개)`;
      }

      // 연기차단재 재단 길이 (가이드레일과 동일)
      if (guideRailLength > 0) {
        results.items.smokeBarrierLength = guideRailLength;
      }
    }

    // 감기샤프트 길이
    if (shouldCalculate("winding-shaft")) {
      const shaftRule = formulaRules.find(
        (r) =>
          r.ruleCode === "WINDING-SHAFT" &&
          r.status === "active",
      );
      if (shaftRule && shaftRule.formula) {
        try {
          const shaftLength = evaluateFormula(
            shaftRule.formula,
            { W1: w1, H1: h1, area, weight },
          );
          results.items.windingShaft = parseFloat(
            shaftLength.toFixed(2),
          );
        } catch (e) {
          results.items.windingShaft = "계산오류";
        }
      }
    }

    // 케이스(셔터박스) 관련
    if (shouldCalculate("case")) {
      const caseSize = w1;

      // 케이스판재 자재 선택 (제작사이즈 S 기준)
      if (caseSize > 0) {
        const caseMaterialRules = formulaRules.filter(
          (r) =>
            r.ruleCode.startsWith("CASE-MATERIAL") &&
            r.status === "active",
        );
        for (const rule of caseMaterialRules) {
          if (rule.ranges) {
            const matchedRange = rule.ranges.find(
              (r) =>
                caseSize > r.minValue && caseSize <= r.maxValue,
            );
            if (matchedRange) {
              results.items.caseMaterial = `${matchedRange.result} (${matchedRange.quantity}개)`;
              break;
            }
          }
        }
      }

      // 마구리 수량
      const marguriRule = formulaRules.find(
        (r) =>
          r.ruleCode === "MARGURI-QTY" && r.status === "active",
      );
      if (marguriRule && marguriRule.fixedValue !== undefined) {
        results.items.marguri = `${marguriRule.fixedValue}EA (1SET)`;
      }

      // 케이스용 연기차단재 수량
      const caseSmokeBarrierRule = formulaRules.find(
        (r) =>
          r.ruleCode === "CASE-SMOKE-BARRIER-QTY" &&
          r.status === "active",
      );
      if (
        caseSmokeBarrierRule &&
        caseSmokeBarrierRule.formula
      ) {
        try {
          const qty = evaluateFormula(
            caseSmokeBarrierRule.formula,
            { S: w1 },
          );
          results.items.caseSmokeBarrier = `${qty}개 (2줄 삽입)`;
        } catch (e) {
          results.items.caseSmokeBarrier = "계산오류";
        }
      }

      // 상부덮개 수량
      const topCoverRule = formulaRules.find(
        (r) =>
          r.ruleCode === "TOP-COVER-QTY" &&
          r.status === "active",
      );
      if (topCoverRule && topCoverRule.formula) {
        try {
          const qty = evaluateFormula(topCoverRule.formula, {
            S: w1,
          });
          results.items.topCover = `${qty}개`;
        } catch (e) {
          results.items.topCover = "계산오류";
        }
      }
    }

    // 하단바 길이
    if (shouldCalculate("bottom-bar")) {
      const bottomBarRule = formulaRules.find(
        (r) =>
          r.ruleCode === "BOTTOM-BAR" && r.status === "active",
      );
      if (bottomBarRule && bottomBarRule.formula) {
        try {
          const bottomBarLength = evaluateFormula(
            bottomBarRule.formula,
            { W1: w1, H1: h1, area, weight },
          );
          results.items.bottomBar = parseFloat(
            bottomBarLength.toFixed(2),
          );
        } catch (e) {
          results.items.bottomBar = "계산오류";
        }
      }
    }

    // 각파이프 3단계 계산
    if (shouldCalculate("square-pipe")) {
      // 케이스 사이즈 S 계산 (스크린: W0+220, 철재: W0+240)
      const caseSize = category === "스크린" ? w0 + 220 : w0 + 240;
      
      // 1단계: 케이스 사이즈 → 보강 갯수
      const reinforcementRule = formulaRules.find(
        (r) => r.ruleCode === "SQUARE-PIPE-REINFORCEMENT-COUNT" && r.status === "active"
      );
      
      if (reinforcementRule && reinforcementRule.ranges) {
        const matchedRange = reinforcementRule.ranges.find(
          (range) => caseSize > range.minValue && caseSize <= range.maxValue
        );
        
        if (matchedRange) {
          const reinforcementCount = parseInt(matchedRange.result);
          
          // 2단계: 보강 갯수 → 각파이프 사이즈
          const squarePipeSize = caseSize + 3000 * reinforcementCount;
          
          // 3단계: 각파이프 사이즈 → 3000/6000 규격 갯수
          if (squarePipeSize <= 18000) {
            // 3000 규격 사용
            const pipe3000Rule = formulaRules.find(
              (r) => r.ruleCode === "SQUARE-PIPE-3000" && r.status === "active"
            );
            if (pipe3000Rule && pipe3000Rule.ranges) {
              const pipe3000Range = pipe3000Rule.ranges.find(
                (range) => squarePipeSize > range.minValue && squarePipeSize <= range.maxValue
              );
              if (pipe3000Range) {
                results.items.squarePipe = `3000mm 규격 ${pipe3000Range.result}개 (총 사이즈: ${squarePipeSize}mm, 보강: ${reinforcementCount}개)`;
              }
            }
          } else {
            // 6000 규격 사용
            const pipe6000Rule = formulaRules.find(
              (r) => r.ruleCode === "SQUARE-PIPE-6000" && r.status === "active"
            );
            if (pipe6000Rule && pipe6000Rule.ranges) {
              const pipe6000Range = pipe6000Rule.ranges.find(
                (range) => squarePipeSize > range.minValue && squarePipeSize <= range.maxValue
              );
              if (pipe6000Range) {
                results.items.squarePipe = `6000mm 규격 ${pipe6000Range.result}개 (총 사이즈: ${squarePipeSize}mm, 보강: ${reinforcementCount}개)`;
              }
            }
          }
        }
      }
      
      // 기존 단순 계산 방식 (fallback)
      if (!results.items.squarePipe) {
        const squarePipeRule = formulaRules.find(
          (r) => r.ruleCode === "SQUARE-PIPE" && r.status === "active"
        );
        if (squarePipeRule && squarePipeRule.formula) {
          try {
            const length = evaluateFormula(
              squarePipeRule.formula,
              { W1: w1, H1: h1, area, weight },
            );
            results.items.squarePipe = parseFloat(length.toFixed(2));
          } catch (e) {
            results.items.squarePipe = "계산오류";
          }
        }
      }
    }

    // 환봉 길이
    if (shouldCalculate("round-bar")) {
      const roundBarRule = formulaRules.find(
        (r) =>
          r.ruleCode === "ROUND-BAR" && r.status === "active",
      );
      if (roundBarRule && roundBarRule.formula) {
        try {
          const length = evaluateFormula(roundBarRule.formula, {
            W1: w1,
            H1: h1,
            area,
            weight,
          });
          results.items.roundBar = parseFloat(
            length.toFixed(2),
          );
        } catch (e) {
          results.items.roundBar = "계산오류";
        }
      }
    }

    // 조인트바 길이
    if (shouldCalculate("joint-bar")) {
      const jointBarRule = formulaRules.find(
        (r) =>
          r.ruleCode === "JOINT-BAR" && r.status === "active",
      );
      if (jointBarRule && jointBarRule.formula) {
        try {
          const length = evaluateFormula(jointBarRule.formula, {
            W1: w1,
            H1: h1,
            area,
            weight,
          });
          results.items.jointBar = parseFloat(
            length.toFixed(2),
          );
        } catch (e) {
          results.items.jointBar = "계산오류";
        }
      }
    }

    setCalculationResults(results);
    toast.success("자동 계산이 완료되었습니다.");
  };

  // 샘플 제품 자동 생성 함수
  const handleCreateSampleProducts = () => {
    // 이미 샘플 제품이 있는지 확인
    const existingSamples = itemMasters.filter((item) =>
      item.itemCode.startsWith("견적산출용 샘플"),
    );

    if (existingSamples.length >= 5) {
      toast.error("샘플 제품이 이미 등록되어 있습니다.");
      return;
    }

    const now = new Date().toISOString().split("T")[0];

    const samples = [
      {
        id: "SAMPLE-001",
        itemCode: "견적산출용 샘플1",
        itemName: "견적산출용 샘플1",
        itemType: "FG" as const,
        productCategory: "SCREEN" as const,
        unit: "SET",
        isVariableSize: true,
        laborCost: 100000,
        installCost: 50000,
        marginRate: 30,
        salesPrice: 450000,
        safetyStock: 10,
        leadTime: 14,
        createdAt: now,
        bomCategories: [
          "motor",
          "guide-rail",
          "case",
          "bottom-bar",
          "smoke-barrier",
        ],
        bom: [
          {
            id: "BOM-S1-1",
            childItemCode: "모터-1HP 220V",
            childItemName: "모터",
            quantity: 1,
            unit: "EA",
            unitPrice: 80000,
            note: "고정 수량",
          },
          {
            id: "BOM-S1-2",
            childItemCode: "가이드레일-SUS 1.2T",
            childItemName: "가이드레일",
            quantity: 1,
            unit: "M",
            unitPrice: 3000,
            quantityFormula: "(W1 + H1) / 500",
            note: "가변 길이",
          },
          {
            id: "BOM-S1-3",
            childItemCode: "케이스판재-AL 1.0T",
            childItemName: "케이스판재",
            quantity: 2,
            unit: "EA",
            unitPrice: 15000,
            note: "고정 수량",
          },
          {
            id: "BOM-S1-4",
            childItemCode: "하단마감재-PVC",
            childItemName: "하단마감재",
            quantity: 1,
            unit: "M",
            unitPrice: 8000,
            quantityFormula: "W1 / 1000",
            note: "폭 기준",
          },
          {
            id: "BOM-S1-5",
            childItemCode: "연기차단재-실리콘",
            childItemName: "연기차단재",
            quantity: 1,
            unit: "M",
            unitPrice: 5000,
            quantityFormula: "(W1 + H1) / 500",
            note: "둘레 기준",
          },
        ],
      },
      {
        id: "SAMPLE-002",
        itemCode: "견적산출용 샘플2",
        itemName: "견적산출용 샘플2",
        itemType: "FG" as const,
        productCategory: "SCREEN" as const,
        unit: "SET",
        isVariableSize: true,
        laborCost: 120000,
        installCost: 60000,
        marginRate: 32,
        salesPrice: 520000,
        safetyStock: 8,
        leadTime: 16,
        createdAt: now,
        bomCategories: [
          "winding-shaft",
          "square-pipe",
          "round-bar",
          "guide-rail",
          "motor",
        ],
        bom: [
          {
            id: "BOM-S2-1",
            childItemCode: "감기샤프트-AL Ø60",
            childItemName: "감기샤프트",
            quantity: 1,
            unit: "M",
            unitPrice: 12000,
            quantityFormula: "W1 / 1000",
            note: "폭 기준",
          },
          {
            id: "BOM-S2-2",
            childItemCode: "각파이프-25x25x1.5T",
            childItemName: "각파이프",
            quantity: 1,
            unit: "M",
            unitPrice: 4000,
            quantityFormula: "H1 / 500",
            note: "높이 기준",
          },
          {
            id: "BOM-S2-3",
            childItemCode: "환봉-SUS Ø12",
            childItemName: "환봉",
            quantity: 1,
            unit: "M",
            unitPrice: 6000,
            quantityFormula: "W1 / 1000",
            note: "폭 기준",
          },
          {
            id: "BOM-S2-4",
            childItemCode: "가이드레일-EGI 1.6T",
            childItemName: "가이드레일",
            quantity: 1,
            unit: "M",
            unitPrice: 2500,
            quantityFormula: "(W1 + H1) / 500",
            note: "둘레 기준",
          },
          {
            id: "BOM-S2-5",
            childItemCode: "모터-1HP 220V",
            childItemName: "모터",
            quantity: 1,
            unit: "EA",
            unitPrice: 80000,
            note: "고정 수량",
          },
        ],
      },
      {
        id: "SAMPLE-003",
        itemCode: "견적산출용 샘플3",
        itemName: "견적산출용 샘플3",
        itemType: "FG" as const,
        productCategory: "STEEL" as const,
        unit: "SET",
        isVariableSize: true,
        laborCost: 150000,
        installCost: 80000,
        marginRate: 35,
        salesPrice: 600000,
        safetyStock: 5,
        leadTime: 18,
        createdAt: now,
        bomCategories: [
          "joint-bar",
          "smoke-barrier",
          "case",
          "motor",
          "bottom-bar",
        ],
        bom: [
          {
            id: "BOM-S3-1",
            childItemCode: "조인트바-AL 40x20",
            childItemName: "조인트바",
            quantity: 1,
            unit: "M",
            unitPrice: 7000,
            quantityFormula: "W1 / 1000",
            note: "폭 기준",
          },
          {
            id: "BOM-S3-2",
            childItemCode: "연기차단재-실리콘",
            childItemName: "연기차단재",
            quantity: 1,
            unit: "M",
            unitPrice: 5000,
            quantityFormula: "(W1 + H1) / 500",
            note: "둘레 기준",
          },
          {
            id: "BOM-S3-3",
            childItemCode: "케이스판재-AL 1.0T",
            childItemName: "케이스판재",
            quantity: 3,
            unit: "EA",
            unitPrice: 15000,
            note: "고정 수량",
          },
          {
            id: "BOM-S3-4",
            childItemCode: "모터-1HP 220V",
            childItemName: "모터",
            quantity: 1,
            unit: "EA",
            unitPrice: 80000,
            note: "고정 수량",
          },
          {
            id: "BOM-S3-5",
            childItemCode: "하단마감재-PVC",
            childItemName: "하단마감재",
            quantity: 1,
            unit: "M",
            unitPrice: 8000,
            quantityFormula: "W1 / 1000",
            note: "폭 기준",
          },
        ],
      },
      {
        id: "SAMPLE-004",
        itemCode: "견적산출용 샘플4",
        itemName: "견적산출용 샘플4",
        itemType: "FG" as const,
        productCategory: "STEEL" as const,
        unit: "SET",
        isVariableSize: true,
        laborCost: 180000,
        installCost: 100000,
        marginRate: 38,
        salesPrice: 750000,
        safetyStock: 3,
        leadTime: 21,
        createdAt: now,
        bomCategories: [
          "guide-rail",
          "winding-shaft",
          "case",
          "square-pipe",
          "joint-bar",
        ],
        bom: [
          {
            id: "BOM-S4-1",
            childItemCode: "가이드레일-SUS 1.2T",
            childItemName: "가이드레일",
            quantity: 1,
            unit: "M",
            unitPrice: 3000,
            quantityFormula: "(W1 + H1) / 500",
            note: "둘레 기준",
          },
          {
            id: "BOM-S4-2",
            childItemCode: "감기샤프트-AL Ø60",
            childItemName: "감기샤프트",
            quantity: 1,
            unit: "M",
            unitPrice: 12000,
            quantityFormula: "W1 / 1000",
            note: "폭 기준",
          },
          {
            id: "BOM-S4-3",
            childItemCode: "케이스판재-AL 1.0T",
            childItemName: "케이스판재",
            quantity: 2,
            unit: "EA",
            unitPrice: 15000,
            note: "고정 수량",
          },
          {
            id: "BOM-S4-4",
            childItemCode: "각파이프-25x25x1.5T",
            childItemName: "각파이프",
            quantity: 1,
            unit: "M",
            unitPrice: 4000,
            quantityFormula: "H1 / 500",
            note: "높이 기준",
          },
          {
            id: "BOM-S4-5",
            childItemCode: "조인트바-AL 40x20",
            childItemName: "조인트바",
            quantity: 1,
            unit: "M",
            unitPrice: 7000,
            quantityFormula: "W1 / 1000",
            note: "폭 기준",
          },
        ],
      },
      {
        id: "SAMPLE-005",
        itemCode: "견적산출용 샘플5",
        itemName: "견적산출용 샘플5",
        itemType: "FG" as const,
        productCategory: "SCREEN" as const,
        unit: "SET",
        isVariableSize: true,
        laborCost: 110000,
        installCost: 55000,
        marginRate: 30,
        salesPrice: 480000,
        safetyStock: 7,
        leadTime: 15,
        createdAt: now,
        bomCategories: [
          "motor",
          "round-bar",
          "bottom-bar",
          "smoke-barrier",
          "winding-shaft",
        ],
        bom: [
          {
            id: "BOM-S5-1",
            childItemCode: "모터-1HP 220V",
            childItemName: "모터",
            quantity: 1,
            unit: "EA",
            unitPrice: 80000,
            note: "고정 수량",
          },
          {
            id: "BOM-S5-2",
            childItemCode: "환봉-SUS Ø12",
            childItemName: "환봉",
            quantity: 1,
            unit: "M",
            unitPrice: 6000,
            quantityFormula: "W1 / 1000",
            note: "폭 기준",
          },
          {
            id: "BOM-S5-3",
            childItemCode: "하단마감재-PVC",
            childItemName: "하단마감재",
            quantity: 1,
            unit: "M",
            unitPrice: 8000,
            quantityFormula: "W1 / 1000",
            note: "폭 기준",
          },
          {
            id: "BOM-S5-4",
            childItemCode: "연기차단재-실리콘",
            childItemName: "연기차단재",
            quantity: 1,
            unit: "M",
            unitPrice: 5000,
            quantityFormula: "(W1 + H1) / 500",
            note: "둘레 기준",
          },
          {
            id: "BOM-S5-5",
            childItemCode: "감기샤프트-AL Ø60",
            childItemName: "감기샤프트",
            quantity: 1,
            unit: "M",
            unitPrice: 12000,
            quantityFormula: "W1 / 1000",
            note: "폭 기준",
          },
        ],
      },
    ];

    samples.forEach((sample) => {
      addItemMaster(sample);
    });

    toast.success(
      "견적산출용 샘플 제품 5개가 자동 생성되었습니다!",
    );
  };

  // 산정기준용 부품 자동 생성
  const generateReferenceItems = () => {
    const now = new Date().toISOString().split("T")[0];

    // 가이드레일 종류별 정보 (첨부 이미지 기반)
    const guideRailTypes = [
      { productCode: "R", typeCode: "C", name: "C형", basePrice: 200 },
      { productCode: "R", typeCode: "D", name: "D형", basePrice: 650 },
      { productCode: "R", typeCode: "M", name: "본체", basePrice: 600 },
      { productCode: "R", typeCode: "T", name: "본체(철재)", basePrice: 620 },
      { productCode: "R", typeCode: "S", name: "SUS(마감)", basePrice: 800 },
      { productCode: "S", typeCode: "M", name: "본체디딤", basePrice: 604 },
      { productCode: "S", typeCode: "T", name: "본체(철재)", basePrice: 620 },
      { productCode: "S", typeCode: "C", name: "C형", basePrice: 200 },
      { productCode: "S", typeCode: "D", name: "D형", basePrice: 650 },
      { productCode: "S", typeCode: "S", name: "SUS마감재①", basePrice: 800 },
      { productCode: "S", typeCode: "U", name: "SUS마감재②", basePrice: 820 },
    ];

    // 가이드레일 규격 정보 (첨부 이미지 기반 - 가로X세로)
    const guideRailSizes = [
      { width: 120, height: 70, code: "120X70" },
      { width: 130, height: 70, code: "130X70" },
      { width: 165, height: 165, code: "165X165" },
      { width: 130, height: 125, code: "130X125" },
      { width: 130, height: 75, code: "130X75" },
      { width: 120, height: 120, code: "120X120" },
    ];

    // 가이드레일 길이 정보 (첨부 이미지 기반)
    const guideRailLengths = [
      { length: 1219, code: "12" },
      { length: 2438, code: "24" },
      { length: 3000, code: "30" },
      { length: 3500, code: "35" },
      { length: 4000, code: "40" },
      { length: 4150, code: "41" },
      { length: 4200, code: "42" },
      { length: 4300, code: "43" },
    ];

    // 재고량 매핑 (첨부 이미지 기반 - 종류별, 길이별 실제 생산량)
    const stockQuantities: Record<string, number> = {
      // C형 (벽면형)
      "RC24": 200, "RC30": 737, "RC35": 608, "RC40": 421, "RC43": 550,
      // D형 (벽면형)
      "RD24": 200, "RD30": 650, "RD35": 510, "RD40": 352, "RD43": 430,
      // 본체 (벽면형)
      "RM24": 620, "RM30": 604, "RM35": 536, "RM40": 521, "RM43": 333,
      // SUS마감 (벽면형)
      "RS24": 396, "RS30": 804,
    };

    const referenceItems = [];

    // === 가이드레일 종류별 × 규격별 × 길이별 품목 생성 ===
    guideRailTypes.forEach((type) => {
      guideRailSizes.forEach((size) => {
        guideRailLengths.forEach((lengthInfo) => {
          // 품목코드: R(벽면형) or S(측면형) + 종류코드 + 길이코드 (예: RC24, SC30, RD24 등)
          const itemCode = `${type.productCode}${type.typeCode}${lengthInfo.code}`;
          
          // 가격 계산: 기본단가 × 길이(mm) / 1000 = 총가격
          const calculatedPrice = Math.round(type.basePrice * lengthInfo.length / 1000);
          const salesPrice = Math.round(calculatedPrice * 1.25); // 25% 마진

          // 제품 분류명 (R = 벽면형, S = 측면형)
          const productTypeName = type.productCode === "R" ? "벽면형" : "측면형";

          // 재고량 가져오기 (매핑에 있으면 사용, 없으면 기본값)
          const safetyStock = stockQuantities[itemCode] || 100;

          referenceItems.push({
            id: `ITEM-GR-${itemCode}-${size.code}`,
            itemCode: itemCode,
            itemName: `가이드레일(${productTypeName}) ${type.name}`,
            itemType: "PT" as const,
            unit: "EA",
            specification: `${size.width}X${size.height}X${lengthInfo.length}`,
            category1: "가이드레일",
            category2: productTypeName,
            category3: type.name,
            isVariableSize: false,
            purchasePrice: calculatedPrice,
            marginRate: 25,
            salesPrice: salesPrice,
            safetyStock: safetyStock,
            leadTime: lengthInfo.length >= 4000 ? 7 : 5,
            createdAt: now,
          });
        });
      });
    });

    // === 기존 모터 품목 추가 ===
    referenceItems.push(
      // === 모터 용량별 ===
      {
        id: "ITEM-MOTOR-150K",
        itemCode: "MOTOR-150K",
        itemName: "모터 150K",
        itemType: "PT" as const,
        unit: "EA",
        specification: "150K",
        isVariableSize: false,
        purchasePrice: 80000,
        marginRate: 30,
        salesPrice: 104000,
        safetyStock: 20,
        leadTime: 10,
        createdAt: now,
      },
      {
        id: "ITEM-MOTOR-300K",
        itemCode: "MOTOR-300K",
        itemName: "모터 300K",
        itemType: "PT" as const,
        unit: "EA",
        specification: "300K",
        isVariableSize: false,
        purchasePrice: 120000,
        marginRate: 30,
        salesPrice: 156000,
        safetyStock: 15,
        leadTime: 10,
        createdAt: now,
      },
      {
        id: "ITEM-MOTOR-400K",
        itemCode: "MOTOR-400K",
        itemName: "모터 400K",
        itemType: "PT" as const,
        unit: "EA",
        specification: "400K",
        isVariableSize: false,
        purchasePrice: 150000,
        marginRate: 30,
        salesPrice: 195000,
        safetyStock: 10,
        leadTime: 10,
        createdAt: now,
      },
      {
        id: "ITEM-MOTOR-500K",
        itemCode: "MOTOR-500K",
        itemName: "모터 500K",
        itemType: "PT" as const,
        unit: "EA",
        specification: "500K",
        isVariableSize: false,
        purchasePrice: 180000,
        marginRate: 30,
        salesPrice: 234000,
        safetyStock: 8,
        leadTime: 15,
        createdAt: now,
      },
      {
        id: "ITEM-MOTOR-800K",
        itemCode: "MOTOR-800K",
        itemName: "모터 800K",
        itemType: "PT" as const,
        unit: "EA",
        specification: "800K",
        isVariableSize: false,
        purchasePrice: 250000,
        marginRate: 30,
        salesPrice: 325000,
        safetyStock: 5,
        leadTime: 15,
        createdAt: now,
      },
      {
        id: "ITEM-MOTOR-1000K",
        itemCode: "MOTOR-1000K",
        itemName: "모터 1000K",
        itemType: "PT" as const,
        unit: "EA",
        specification: "1000K",
        isVariableSize: false,
        purchasePrice: 300000,
        marginRate: 30,
        salesPrice: 390000,
        safetyStock: 3,
        leadTime: 20,
        createdAt: now,
      },

      // === 가이드레일 하부BASE - 스크린용 ===
      {
        id: "ITEM-BASE-S-130X80",
        itemCode: "BASE-SCREEN-130X80",
        itemName: "하부BASE 스크린 130×80",
        itemType: "PT" as const,
        unit: "EA",
        specification: "130×80 (벽면형)",
        isVariableSize: false,
        purchasePrice: 8000,
        marginRate: 25,
        salesPrice: 10000,
        safetyStock: 50,
        leadTime: 5,
        createdAt: now,
      },
      {
        id: "ITEM-BASE-S-130X130",
        itemCode: "BASE-SCREEN-130X130",
        itemName: "하부BASE 스크린 130×130",
        itemType: "PT" as const,
        unit: "EA",
        specification: "130×130 (측면형)",
        isVariableSize: false,
        purchasePrice: 10000,
        marginRate: 25,
        salesPrice: 12500,
        safetyStock: 50,
        leadTime: 5,
        createdAt: now,
      },

      // === 가이드레일 하부BASE - 철재용 ===
      {
        id: "ITEM-BASE-T-140X85",
        itemCode: "BASE-STEEL-140X85",
        itemName: "하부BASE 철재 140×85",
        itemType: "PT" as const,
        unit: "EA",
        specification: "140×85 (벽면형)",
        isVariableSize: false,
        purchasePrice: 9000,
        marginRate: 25,
        salesPrice: 11250,
        safetyStock: 40,
        leadTime: 5,
        createdAt: now,
      },
      {
        id: "ITEM-BASE-T-140X135",
        itemCode: "BASE-STEEL-140X135",
        itemName: "하부BASE 철재 140×135",
        itemType: "PT" as const,
        unit: "EA",
        specification: "140×135 (측면형)",
        isVariableSize: false,
        purchasePrice: 11000,
        marginRate: 25,
        salesPrice: 13750,
        safetyStock: 40,
        leadTime: 5,
        createdAt: now,
      },

      // === 각파이프 ===
      {
        id: "ITEM-SQUARE-PIPE-3000",
        itemCode: "SQUARE-PIPE-3000",
        itemName: "각파이프 3000mm",
        itemType: "PT" as const,
        unit: "EA",
        specification: "3000mm",
        isVariableSize: false,
        purchasePrice: 15000,
        marginRate: 25,
        salesPrice: 18750,
        safetyStock: 100,
        leadTime: 7,
        createdAt: now,
      },
      {
        id: "ITEM-SQUARE-PIPE-6000",
        itemCode: "SQUARE-PIPE-6000",
        itemName: "각파이프 6000mm",
        itemType: "PT" as const,
        unit: "EA",
        specification: "6000mm",
        isVariableSize: false,
        purchasePrice: 28000,
        marginRate: 25,
        salesPrice: 35000,
        safetyStock: 80,
        leadTime: 7,
        createdAt: now,
      },

      // === 환봉 (스크린 전용) ===
      {
        id: "ITEM-ROUND-BAR-3000",
        itemCode: "ROUND-BAR-3000",
        itemName: "환봉 3000mm",
        itemType: "PT" as const,
        unit: "EA",
        specification: "3000mm (스크린 전용)",
        isVariableSize: false,
        purchasePrice: 12000,
        marginRate: 25,
        salesPrice: 15000,
        safetyStock: 50,
        leadTime: 5,
        createdAt: now,
      },

      // === 조인트바 ===
      {
        id: "ITEM-JOINT-BAR-250",
        itemCode: "JOINT-BAR-250",
        itemName: "조인트바 250mm",
        itemType: "PT" as const,
        unit: "EA",
        specification: "250mm (장당 치수)",
        isVariableSize: false,
        purchasePrice: 3000,
        marginRate: 25,
        salesPrice: 3750,
        safetyStock: 100,
        leadTime: 3,
        createdAt: now,
      },

      // === 케이스 본체 (철재용 330×320) ===
      {
        id: "ITEM-CASE-STEEL-330-1219",
        itemCode: "CASE-STEEL-330-1219",
        itemName: "케이스 본체 330×320 1219mm",
        itemType: "PT" as const,
        unit: "EA",
        specification: "철재용 330×320 / 1219mm",
        isVariableSize: false,
        purchasePrice: 25000,
        marginRate: 30,
        salesPrice: 32500,
        safetyStock: 20,
        leadTime: 7,
        createdAt: now,
      },
      {
        id: "ITEM-CASE-STEEL-330-2438",
        itemCode: "CASE-STEEL-330-2438",
        itemName: "케이스 본체 330×320 2438mm",
        itemType: "PT" as const,
        unit: "EA",
        specification: "철재용 330×320 / 2438mm",
        isVariableSize: false,
        purchasePrice: 45000,
        marginRate: 30,
        salesPrice: 58500,
        safetyStock: 15,
        leadTime: 7,
        createdAt: now,
      },
      {
        id: "ITEM-CASE-STEEL-330-3000",
        itemCode: "CASE-STEEL-330-3000",
        itemName: "케이스 본체 330×320 3000mm",
        itemType: "PT" as const,
        unit: "EA",
        specification: "철재용 330×320 / 3000mm",
        isVariableSize: false,
        purchasePrice: 55000,
        marginRate: 30,
        salesPrice: 71500,
        safetyStock: 15,
        leadTime: 7,
        createdAt: now,
      },
      {
        id: "ITEM-CASE-STEEL-330-3500",
        itemCode: "CASE-STEEL-330-3500",
        itemName: "케이스 본체 330×320 3500mm",
        itemType: "PT" as const,
        unit: "EA",
        specification: "철재용 330×320 / 3500mm",
        isVariableSize: false,
        purchasePrice: 62000,
        marginRate: 30,
        salesPrice: 80600,
        safetyStock: 10,
        leadTime: 7,
        createdAt: now,
      },
      {
        id: "ITEM-CASE-STEEL-330-4000",
        itemCode: "CASE-STEEL-330-4000",
        itemName: "케이스 본체 330×320 4000mm",
        itemType: "PT" as const,
        unit: "EA",
        specification: "철재용 330×320 / 4000mm",
        isVariableSize: false,
        purchasePrice: 70000,
        marginRate: 30,
        salesPrice: 91000,
        safetyStock: 10,
        leadTime: 7,
        createdAt: now,
      },
      {
        id: "ITEM-CASE-STEEL-330-4150",
        itemCode: "CASE-STEEL-330-4150",
        itemName: "케이스 본체 330×320 4150mm",
        itemType: "PT" as const,
        unit: "EA",
        specification: "철재용 330×320 / 4150mm",
        isVariableSize: false,
        purchasePrice: 72000,
        marginRate: 30,
        salesPrice: 93600,
        safetyStock: 10,
        leadTime: 7,
        createdAt: now,
      },

      // === 케이스 본체 (스크린용 380×180) ===
      {
        id: "ITEM-CASE-SCREEN-380-1219",
        itemCode: "CASE-SCREEN-380-1219",
        itemName: "케이스 본체 380×180 1219mm",
        itemType: "PT" as const,
        unit: "EA",
        specification: "스크린용 380×180 / 1219mm",
        isVariableSize: false,
        purchasePrice: 22000,
        marginRate: 30,
        salesPrice: 28600,
        safetyStock: 20,
        leadTime: 7,
        createdAt: now,
      },
      {
        id: "ITEM-CASE-SCREEN-380-2438",
        itemCode: "CASE-SCREEN-380-2438",
        itemName: "케이스 본체 380×180 2438mm",
        itemType: "PT" as const,
        unit: "EA",
        specification: "스크린용 380×180 / 2438mm",
        isVariableSize: false,
        purchasePrice: 40000,
        marginRate: 30,
        salesPrice: 52000,
        safetyStock: 15,
        leadTime: 7,
        createdAt: now,
      },
      {
        id: "ITEM-CASE-SCREEN-380-3000",
        itemCode: "CASE-SCREEN-380-3000",
        itemName: "케이스 본체 380×180 3000mm",
        itemType: "PT" as const,
        unit: "EA",
        specification: "스크린용 380×180 / 3000mm",
        isVariableSize: false,
        purchasePrice: 48000,
        marginRate: 30,
        salesPrice: 62400,
        safetyStock: 15,
        leadTime: 7,
        createdAt: now,
      },
      {
        id: "ITEM-CASE-SCREEN-380-3500",
        itemCode: "CASE-SCREEN-380-3500",
        itemName: "케이스 본체 380×180 3500mm",
        itemType: "PT" as const,
        unit: "EA",
        specification: "스크린용 380×180 / 3500mm",
        isVariableSize: false,
        purchasePrice: 55000,
        marginRate: 30,
        salesPrice: 71500,
        safetyStock: 10,
        leadTime: 7,
        createdAt: now,
      },
      {
        id: "ITEM-CASE-SCREEN-380-4000",
        itemCode: "CASE-SCREEN-380-4000",
        itemName: "케이스 본체 380×180 4000mm",
        itemType: "PT" as const,
        unit: "EA",
        specification: "스크린용 380×180 / 4000mm",
        isVariableSize: false,
        purchasePrice: 62000,
        marginRate: 30,
        salesPrice: 80600,
        safetyStock: 10,
        leadTime: 7,
        createdAt: now,
      },
      {
        id: "ITEM-CASE-SCREEN-380-4150",
        itemCode: "CASE-SCREEN-380-4150",
        itemName: "케이스 본체 380×180 4150mm",
        itemType: "PT" as const,
        unit: "EA",
        specification: "스크린용 380×180 / 4150mm",
        isVariableSize: false,
        purchasePrice: 64000,
        marginRate: 30,
        salesPrice: 83200,
        safetyStock: 10,
        leadTime: 7,
        createdAt: now,
      },

      // === 마구리 ===
      {
        id: "ITEM-MARGURI-330",
        itemCode: "MARGURI-330-320",
        itemName: "마구리 330×320",
        itemType: "PT" as const,
        unit: "EA",
        specification: "철재용 330×320",
        isVariableSize: false,
        purchasePrice: 8000,
        marginRate: 25,
        salesPrice: 10000,
        safetyStock: 50,
        leadTime: 5,
        createdAt: now,
      },
      {
        id: "ITEM-MARGURI-600",
        itemCode: "MARGURI-600-350",
        itemName: "마구리 600×350",
        itemType: "PT" as const,
        unit: "EA",
        specification: "철재용 600×350",
        isVariableSize: false,
        purchasePrice: 12000,
        marginRate: 25,
        salesPrice: 15000,
        safetyStock: 40,
        leadTime: 5,
        createdAt: now,
      },
      {
        id: "ITEM-MARGURI-690",
        itemCode: "MARGURI-690-390",
        itemName: "마구리 690×390",
        itemType: "PT" as const,
        unit: "EA",
        specification: "철재용 690×390",
        isVariableSize: false,
        purchasePrice: 15000,
        marginRate: 25,
        salesPrice: 18750,
        safetyStock: 30,
        leadTime: 5,
        createdAt: now,
      },
      {
        id: "ITEM-MARGURI-380",
        itemCode: "MARGURI-380-180",
        itemName: "마구리 380×180",
        itemType: "PT" as const,
        unit: "EA",
        specification: "스크린용 380×180",
        isVariableSize: false,
        purchasePrice: 7000,
        marginRate: 25,
        salesPrice: 8750,
        safetyStock: 50,
        leadTime: 5,
        createdAt: now,
      },
    );

    // 중복 체크하여 없는 것만 추가
    let addedCount = 0;
    referenceItems.forEach((item) => {
      const exists = itemMasters.some(
        (m) => m.itemCode === item.itemCode,
      );
      if (!exists) {
        addItemMaster(item);
        addedCount++;
      }
    });

    if (addedCount > 0) {
      toast.success(
        `산정기준용 부품 ${addedCount}개가 자동 생성되었습니다!`,
      );
    } else {
      toast.info("모든 부품이 이미 등록되어 있습니다.");
    }
  };

  // 간단한 수식 평가 함수
  const evaluateFormula = (
    formula: string,
    vars: Record<string, number>,
  ): number => {
    let expr = formula;

    // 변수 치환
    Object.keys(vars).forEach((key) => {
      const regex = new RegExp(`\\b${key}\\b`, "g");
      expr = expr.replace(regex, vars[key].toString());
    });

    // 함수 치환
    expr = expr.replace(/CEIL\(([^)]+)\)/g, (_, p1) => {
      const val = eval(p1);
      return Math.ceil(val).toString();
    });
    expr = expr.replace(/FLOOR\(([^)]+)\)/g, (_, p1) => {
      const val = eval(p1);
      return Math.floor(val).toString();
    });
    expr = expr.replace(/ROUND\(([^)]+)\)/g, (_, p1) => {
      const val = eval(p1);
      return Math.round(val).toString();
    });
    expr = expr.replace(
      /IF\(([^,]+),([^,]+),([^)]+)\)/g,
      (_, condition, trueVal, falseVal) => {
        const cond = eval(condition);
        return cond ? trueVal : falseVal;
      },
    );

    return eval(expr);
  };

  // 범위 추가
  const addRange = () => {
    setEditingRanges([
      ...editingRanges,
      {
        id: `RANGE-${Date.now()}`,
        minValue: 0,
        maxValue: 100,
        result: "",
        quantity: 1,
        description: "",
      },
    ]);
  };

  // 범위 수정
  const updateRange = (
    index: number,
    field: string,
    value: any,
  ) => {
    const newRanges = [...editingRanges];
    (newRanges[index] as any)[field] = value;
    setEditingRanges(newRanges);
  };

  // 범위 삭제
  const deleteRange = (index: number) => {
    setEditingRanges(
      editingRanges.filter((_, i) => i !== index),
    );
  };

  // 범위별 품목 추가
  const addRangeItem = (rangeIndex: number) => {
    const newRanges = [...editingRanges];
    const range = newRanges[rangeIndex];
    
    if (!range.items) {
      range.items = [];
    }
    
    range.items.push({
      id: `ITEM-${Date.now()}`,
      itemCode: '',
      itemName: '',
      quantity: 1,
      note: ''
    });
    
    setEditingRanges(newRanges);
  };

  // 범위별 품목 수정
  const updateRangeItem = (
    rangeIndex: number,
    itemIndex: number,
    field: string,
    value: any
  ) => {
    const newRanges = [...editingRanges];
    const range = newRanges[rangeIndex];
    
    if (range.items && range.items[itemIndex]) {
      (range.items[itemIndex] as any)[field] = value;
    }
    
    setEditingRanges(newRanges);
  };

  // 범위별 품목 삭제
  const deleteRangeItem = (rangeIndex: number, itemIndex: number) => {
    const newRanges = [...editingRanges];
    const range = newRanges[rangeIndex];
    
    if (range.items) {
      range.items = range.items.filter((_, i) => i !== itemIndex);
    }
    
    setEditingRanges(newRanges);
  };

  // 데이터 초기화
  const handleResetData = () => {
    resetAllData();
    window.location.reload(); // 페이지 새로고침하여 최신 데이터 로드
    toast.success(
      "모든 데이터가 초기화되었습니다. 최신 산정 기준이 반영됩니다.",
    );
  };

  // 규칙 생성
  const handleCreateRule = () => {
    // 유효성 검사
    const errors: Record<string, string> = {};

    if (
      ruleForm.ruleType === "range" &&
      editingRanges.length === 0
    ) {
      errors.ranges = "최소 1개 이상의 범위를 추가해주세요";
    }
    if (
      ruleForm.ruleType === "formula" &&
      !ruleForm.formula.trim()
    ) {
      errors.formula = "수식을 입력해주세요";
    }
    if (
      ruleForm.ruleType === "fixed" &&
      ruleForm.fixedValue === 0
    ) {
      errors.fixedValue = "고정값을 입력해주세요";
    }
    if (!ruleForm.ruleCode.trim()) {
      errors.ruleCode = "규칙 코드를 입력해주세요";
    }
    if (!ruleForm.ruleName.trim()) {
      errors.ruleName = "규칙명을 입력해주세요";
    }

    if (Object.keys(errors).length > 0) {
      setValidationErrors(errors);
      toast.error(`${Object.keys(errors).length}개의 필수 입력 항목을 확인해주세요.`);
      return;
    }

    // 에러가 없으면 초기화
    clearAllErrors();

    const newRule: FormulaRule = {
      id: `RULE-${Date.now()}`,
      ruleCode: ruleForm.ruleCode,
      ruleName: ruleForm.ruleName,
      category: ruleForm.category,
      inputVariable: ruleForm.inputVariable,
      ruleType: ruleForm.ruleType,
      ranges:
        ruleForm.ruleType === "range"
          ? editingRanges
          : undefined,
      formula:
        ruleForm.ruleType === "formula"
          ? ruleForm.formula
          : undefined,
      fixedValue:
        ruleForm.ruleType === "fixed"
          ? ruleForm.fixedValue
          : undefined,
      unit: ruleForm.unit,
      description: `${ruleForm.category} 제품 ${ruleForm.ruleName}`,
      status: "active",
      currentRevision: 0,
      isFinal: false,
      isStage1: ruleForm.isStage1 || false,
      stageLevel: ruleForm.stageLevel || 1,
      stage1ResultType: ruleForm.stage1ResultType || 'specification',
      stage2MappingConditions: ruleForm.isStage1 && stage2MappingConditions.length > 0 
        ? stage2MappingConditions 
        : undefined,
      createdAt: new Date().toISOString().split("T")[0],
      createdBy: "관리자",
      updatedAt: new Date().toISOString().split("T")[0],
    };

    addFormulaRule(newRule);
    toast.success("산정 기준이 등록되었습니다.");
    resetForm();
    setPageMode("list");
  };

  // 규칙 수정
  const handleUpdateRule = () => {
    if (!selectedRule) return;

    // 유효성 검사
    const errors: Record<string, string> = {};

    if (
      ruleForm.ruleType === "range" &&
      editingRanges.length === 0
    ) {
      errors.ranges = "최소 1개 이상의 범위를 추가해주세요";
    }
    if (
      ruleForm.ruleType === "formula" &&
      !ruleForm.formula.trim()
    ) {
      errors.formula = "수식을 입력해주세요";
    }
    if (
      ruleForm.ruleType === "fixed" &&
      ruleForm.fixedValue === 0
    ) {
      errors.fixedValue = "고정값을 입력해주세요";
    }

    if (Object.keys(errors).length > 0) {
      setValidationErrors(errors);
      toast.error(`${Object.keys(errors).length}개의 필수 입력 항목을 확인해주세요.`);
      return;
    }

    // 에러가 없으면 초기화
    clearAllErrors();

    updateFormulaRule(selectedRule.id, {
      ruleType: ruleForm.ruleType,
      ranges:
        ruleForm.ruleType === "range"
          ? editingRanges
          : undefined,
      formula:
        ruleForm.ruleType === "formula"
          ? ruleForm.formula
          : undefined,
      fixedValue:
        ruleForm.ruleType === "fixed"
          ? ruleForm.fixedValue
          : undefined,
      inputVariable: ruleForm.inputVariable,
      unit: ruleForm.unit,
      isStage1: ruleForm.isStage1 || false,
      stageLevel: ruleForm.stageLevel || 1,
      stage1ResultType: ruleForm.stage1ResultType || 'specification',
      stage2MappingConditions: ruleForm.isStage1 && stage2MappingConditions.length > 0 
        ? stage2MappingConditions 
        : undefined,
      updatedAt: new Date().toISOString().split("T")[0],
      updatedBy: "관리자",
    });

    toast.success("산정 기준이 수정되었습니다.");
    setPageMode("list");
    setSelectedRule(null);
    resetForm();
  };

  // 편집 시작
  const startEdit = (rule: FormulaRule) => {
    setSelectedRule(rule);
    setEditingRanges(rule.ranges || []);
    setStage2MappingConditions(rule.stage2MappingConditions || []);
    setRuleForm({
      shaft: '4"',
      category: rule.category,
      ruleType: rule.ruleType,
      formula: rule.formula || "",
      fixedValue: rule.fixedValue || 0,
      inputVariable: rule.inputVariable,
      unit: rule.unit,
      ruleCode: rule.ruleCode,
      ruleName: rule.ruleName,
      isStage1: rule.isStage1 || false,
      stageLevel: rule.stageLevel || 1,
      stage1ResultType: rule.stage1ResultType || 'specification',
    });
    setPageMode("edit");
  };

  // 규칙 삭제
  const handleDeleteRule = (id: string) => {
    deleteFormulaRule(id);
    toast.success("산정 기준이 삭제되었습니다.");
  };

  // 규칙 복사
  const handleCopyRule = (rule: FormulaRule) => {
    setSelectedRule(null); // 복사는 새 규칙 생성이므로 selectedRule은 null
    setEditingRanges(rule.ranges || []);
    setStage2MappingConditions(rule.stage2MappingConditions || []);
    setRuleForm({
      shaft: '4"',
      category: rule.category,
      ruleType: rule.ruleType,
      formula: rule.formula || "",
      fixedValue: rule.fixedValue || 0,
      inputVariable: rule.inputVariable,
      unit: rule.unit,
      ruleCode: `${rule.ruleCode}-COPY`,
      ruleName: `${rule.ruleName} (복사본)`,
      isStage1: rule.isStage1 || false,
      stageLevel: rule.stageLevel || 1,
      stage1ResultType: rule.stage1ResultType || 'specification',
    });
    setPageMode("create");
    toast.info("규칙이 복사되었습니다. 규칙 코드와 이름을 수정한 후 저장하세요.");
  };

  // 다단계 규칙 편집 시작
  const handleEditMultiStageRules = (firstStageRule: FormulaRule) => {
    // 1단계 규칙부터 시작하여 모든 연결된 단계를 찾음
    const stageChain: FormulaRule[] = [];
    let currentRule: FormulaRule | undefined = firstStageRule;

    // 첫 단계부터 마지막 단계까지 순회
    while (currentRule) {
      stageChain.push(currentRule);
      
      // 다음 단계 찾기
      if (currentRule.childStageRuleIds && currentRule.childStageRuleIds.length > 0) {
        const nextRuleId = currentRule.childStageRuleIds[0];
        currentRule = formulaRules.find(r => r.id === nextRuleId);
      } else if (currentRule.stage2RuleIds && currentRule.stage2RuleIds.length > 0) {
        // 하위 호환성
        const nextRuleId = currentRule.stage2RuleIds[0];
        currentRule = formulaRules.find(r => r.id === nextRuleId);
      } else {
        break;
      }
    }

    // FormulaRule을 MultiStageRuleForm의 StageFormData로 변환
    const stageFormDataArray = stageChain.map((rule, index) => ({
      stageLevel: index + 1,
      ruleCode: rule.ruleCode,
      ruleName: rule.ruleName,
      category: rule.category,
      inputVariable: rule.inputVariable,
      ruleType: rule.ruleType,
      ranges: rule.ranges || [],
      formula: rule.formula || '',
      fixedValue: rule.fixedValue || 0,
      unit: rule.unit || '',
      intermediateResultType: rule.intermediateResultType || rule.stage1ResultType || 'specification',
      ruleId: rule.id, // 수정 시 필요한 ID
    }));

    // 다단계 편집 모드로 전환하고 데이터 설정
    setEditingMultiStageRules(stageFormDataArray as any);
    setPageMode("multi-stage-edit");
    toast.info(`${stageChain.length}개 단계의 규칙을 한 번에 수정할 수 있습니다.`);
  };

  // 다단계 규칙 업데이트
  const handleUpdateMultiStageRules = (stages: any[]) => {
    try {
      const now = new Date().toISOString().split("T")[0];

      stages.forEach((stage, index) => {
        // 기존 규칙 ID가 있으면 업데이트
        if (stage.ruleId) {
          updateFormulaRule(stage.ruleId, {
            ruleCode: stage.ruleCode,
            ruleName: stage.ruleName,
            category: stage.category,
            inputVariable: stage.inputVariable,
            ruleType: stage.ruleType,
            ranges: stage.ruleType === 'range' ? stage.ranges : undefined,
            formula: stage.ruleType === 'formula' ? stage.formula : undefined,
            fixedValue: stage.ruleType === 'fixed' ? stage.fixedValue : undefined,
            unit: stage.unit,
            isIntermediateRule: index < stages.length - 1,
            isStage1: index < stages.length - 1,
            stageLevel: stage.stageLevel,
            intermediateResultType: stage.intermediateResultType,
            stage1ResultType: stage.intermediateResultType,
            updatedAt: now,
            updatedBy: "관리자",
          });
        }
      });

      toast.success(`🎉 ${stages.length}개 단계의 규칙이 모두 수정되었습니다!`);
      setEditingMultiStageRules([]);
      setPageMode("list");
    } catch (error) {
      console.error("다단계 규칙 수정 오류:", error);
      toast.error("규칙 수정 중 오류가 발생했습니다.");
    }
  };

  // 템플릿 불러오기
  const handleLoadTemplate = (rules: FormulaRule[]) => {
    rules.forEach(rule => {
      addFormulaRule(rule);
    });
    toast.success(`${rules.length}개의 규칙이 추가되었습니다!`);
  };

  // 다단계 규칙 저장
  const handleSaveMultiStageRules = (stages: any[]) => {
    try {
      // 1단계: 먼저 모든 ID를 생성
      const now = new Date().toISOString().split("T")[0];
      const timestamp = Date.now();
      const stageRuleIds = stages.map((_, index) => `RULE-${timestamp}-${index}`);

      // 2단계: 모든 규칙 생성 및 저장
      stages.forEach((stage, index) => {
        const newRule: FormulaRule = {
          id: stageRuleIds[index],
          ruleCode: stage.ruleCode,
          ruleName: stage.ruleName,
          category: stage.category,
          inputVariable: stage.inputVariable,
          ruleType: stage.ruleType,
          ranges: stage.ruleType === 'range' ? stage.ranges : undefined,
          formula: stage.ruleType === 'formula' ? stage.formula : undefined,
          fixedValue: stage.ruleType === 'fixed' ? stage.fixedValue : undefined,
          unit: stage.unit,
          description: `${stage.category} 제품 ${stage.ruleName}`,
          status: "active",
          currentRevision: 0,
          isFinal: false,
          // 마지막 단계가 아니면 중간 단계
          isIntermediateRule: index < stages.length - 1,
          isStage1: index < stages.length - 1, // 하위 호환성
          stageLevel: stage.stageLevel,
          intermediateResultType: stage.intermediateResultType,
          stage1ResultType: stage.intermediateResultType, // 하위 호환성
          // 다음 단계 규칙 ID 연결 (마지막 단계가 아닐 경우)
          childStageRuleIds: index < stages.length - 1 ? [stageRuleIds[index + 1]] : undefined,
          stage2RuleIds: index < stages.length - 1 ? [stageRuleIds[index + 1]] : undefined, // 하위 호환성
          // 이전 단계 규칙 ID 연결 (첫 번째 단계가 아닐 경우)
          parentStageRuleId: index > 0 ? stageRuleIds[index - 1] : undefined,
          stage1RuleId: index > 0 ? stageRuleIds[index - 1] : undefined, // 하위 호환성
          createdAt: now,
          createdBy: "관리자",
          updatedAt: now,
        };

        addFormulaRule(newRule);
      });

      toast.success(`🎉 ${stages.length}개 단계의 규칙이 모두 저장되었습니다!`);
      setPageMode("list");
    } catch (error) {
      console.error("다단계 규칙 저장 오류:", error);
      toast.error("규칙 저장 중 오류가 발생했습니다.");
    }
  };

  // 폼 초기화
  const resetForm = () => {
    setRuleForm({
      shaft: '4"',
      category: "스크린",
      ruleType: "range",
      formula: "",
      fixedValue: 0,
      inputVariable: "weight",
      unit: "",
      ruleCode: "",
      ruleName: "",
      isStage1: false,
      stage1ResultType: 'specification',
    });
    setEditingRanges([]);
    setStage2MappingConditions([]);
  };

  // 현재 탭의 규칙 필터링 - 기본정보
  const getCurrentBasicTabRules = () => {
    const category = basicCategories.find(
      (c) => c.id === activeBasicTab,
    );
    if (!category) return [];

    return formulaRules.filter((r) =>
      category.ruleCodes.includes(r.ruleCode),
    );
  };

  // 현재 탭의 규칙 필터링 - 품목
  const getCurrentItemTabRules = () => {
    const category = itemCategories.find(
      (c) => c.id === activeItemTab,
    );
    if (!category) {
      console.log('❌ [getCurrentItemTabRules] 카테고리를 찾을 수 없음:', activeItemTab);
      return [];
    }

    const filtered = formulaRules.filter((r) =>
      category.ruleCodes.includes(r.ruleCode),
    );
    
    console.log(`📋 [getCurrentItemTabRules] 탭: ${activeItemTab}, 규칙코드: ${category.ruleCodes.length}개, 매칭된 규칙: ${filtered.length}개`);
    if (activeItemTab === 'guide-rail') {
      console.log('🔍 [가이드레일 탭] 전체 규칙 수:', formulaRules.length);
      console.log('🔍 [가이드레일 탭] 카테고리 ruleCodes:', category.ruleCodes);
      console.log('🔍 [가이드레일 탭] 필터링된 규칙:', filtered.map(r => ({ code: r.ruleCode, name: r.ruleName })));
    }
    
    return filtered;
  };

  const currentBasicRules = getCurrentBasicTabRules();
  const currentItemRules = getCurrentItemTabRules();

  // 통계 계산
  const stats = [
    {
      label: "총 산정 기준",
      value: formulaRules.length.toString(),
    },
    {
      label: "활성 기준",
      value: formulaRules
        .filter((r) => r.status === "active")
        .length.toString(),
      highlighted: true,
    },
    {
      label: "범위 타입",
      value: formulaRules
        .filter((r) => r.ruleType === "range")
        .length.toString(),
    },
    {
      label: "수식 타입",
      value: formulaRules
        .filter((r) => r.ruleType === "formula")
        .length.toString(),
    },
  ];

  // 가이드레일 품목 자동 생성 참조
  const hasGeneratedRef = useRef(false);
  const hasGeneratedRoundBarRuleRef = useRef(false);
  const hasGeneratedJointBarRuleRef = useRef(false);
  const hasGeneratedCaseRuleRef = useRef(false);

  // 가이드레일 품목 자동 생성 (최초 1회만)
  useEffect(() => {
    // 이미 생성했다면 리턴
    if (hasGeneratedRef.current) return;

    // GR-로 시작하는 가이드레일 품목이 없으면 자동 생성
    const hasGuideRails = itemMasters.some((item) =>
      item.itemCode?.startsWith("GR-")
    );

    if (!hasGuideRails) {
      console.log("가이드레일 품목이 없어서 자동 생성합니다...");
      generateReferenceItems();
      hasGeneratedRef.current = true;
    }
  }, [itemMasters]); // itemMasters가 변경될 때마다 확인

  // 환봉 산정 규칙 자동 생성 (최초 1회만)
  useEffect(() => {
    // 이미 생성했다면 리턴
    if (hasGeneratedRoundBarRuleRef.current) return;

    // ROUND-BAR 규칙이 있는지 확인
    const hasRoundBarRule = formulaRules.some((rule) =>
      rule.ruleCode === "ROUND-BAR"
    );

    // 환봉 품목이 있는지 확인
    const hasRoundBarItem = itemMasters.some((item) =>
      item.itemCode === "ROUND-BAR-3000"
    );

    if (!hasRoundBarRule && hasRoundBarItem) {
      console.log("✅ 환봉 산정 규칙을 자동 생성합니다...");
      
      const roundBarRule: FormulaRule = {
        id: `FORMULA-ROUND-BAR-${Date.now()}`,
        ruleCode: "ROUND-BAR",
        ruleName: "환봉 (스크린 전용)",
        description: "제작사이즈(W1) 구간별 환봉 3000mm 수량 산정",
        category: "환봉",
        ruleType: "range",
        inputVariable: "W1",
        unit: "mm",
        status: "active",
        formula: "",
        fixedValue: 0,
        isStage1: false,
        stage1ResultType: "quantity",
        ranges: [
          {
            id: `RANGE-RB-1-${Date.now()}`,
            minValue: 0,
            maxValue: 3000,
            result: "1",
            itemCode: "ROUND-BAR-3000",
            itemName: "환봉 3000mm",
            quantity: 1,
            description: "W1 ≤ 3000mm: 1개",
          },
          {
            id: `RANGE-RB-2-${Date.now() + 1}`,
            minValue: 3000,
            maxValue: 6000,
            result: "2",
            itemCode: "ROUND-BAR-3000",
            itemName: "환봉 3000mm",
            quantity: 2,
            description: "3000 < W1 ≤ 6000mm: 2개",
          },
          {
            id: `RANGE-RB-3-${Date.now() + 2}`,
            minValue: 6000,
            maxValue: 9000,
            result: "3",
            itemCode: "ROUND-BAR-3000",
            itemName: "환봉 3000mm",
            quantity: 3,
            description: "6000 < W1 ≤ 9000mm: 3개",
          },
          {
            id: `RANGE-RB-4-${Date.now() + 3}`,
            minValue: 9000,
            maxValue: 12000,
            result: "4",
            itemCode: "ROUND-BAR-3000",
            itemName: "환봉 3000mm",
            quantity: 4,
            description: "9000 < W1 ≤ 12000mm: 4개",
          },
        ],
      };

      addFormulaRule(roundBarRule);
      hasGeneratedRoundBarRuleRef.current = true;
      toast.success("✅ 환봉 산정 규칙이 자동 생성되었습니다!");
    }
  }, [formulaRules, itemMasters]); // formulaRules와 itemMasters 변경 시 확인

  // 조인트바 산정 규칙 자동 생성 (최초 1회만)
  useEffect(() => {
    // 이미 생성했다면 리턴
    if (hasGeneratedJointBarRuleRef.current) return;

    // JOINT-BAR 규칙이 있는지 확인
    const hasJointBarRule = formulaRules.some((rule) =>
      rule.ruleCode === "JOINT-BAR"
    );

    // 조인트바 품목이 있는지 확인
    const hasJointBarItem = itemMasters.some((item) =>
      item.itemCode === "JOINT-BAR-250"
    );

    if (!hasJointBarRule && hasJointBarItem) {
      console.log("✅ 조인트바 산정 규칙을 자동 생성합니다...");
      
      const jointBarRule: FormulaRule = {
        id: `FORMULA-JOINT-BAR-${Date.now()}`,
        ruleCode: "JOINT-BAR",
        ruleName: "조인트바",
        description: "제작사이즈(W1) 기준 조인트바 수량 산정 (기본 2개 + 1000mm당 1개 추가)",
        category: "조인트바",
        ruleType: "formula",
        inputVariable: "W1",
        unit: "EA",
        status: "active",
        formula: "2 + FLOOR((W1 - 500) / 1000)",
        fixedValue: 0,
        isStage1: false,
        stage1ResultType: "quantity",
        ranges: [],
      };

      addFormulaRule(jointBarRule);
      hasGeneratedJointBarRuleRef.current = true;
      toast.success("✅ 조인트바 산정 규칙이 자동 생성되었습니다!");
    }
  }, [formulaRules, itemMasters]); // formulaRules와 itemMasters 변경 시 확인

  // 케이스(셔터박스) 산정 규칙 자동 생성 (최초 1회만) - 첨부파일 기준으로 재구성
  useEffect(() => {
    // 이미 생성했다면 리턴
    if (hasGeneratedCaseRuleRef.current) return;

    // 기존 케이스 관련 규칙 삭제
    const caseRuleCodes = [
      "CASE-MATERIAL",
      "MARGURI-QTY",
      "CASE-SMOKE-BARRIER-QTY",
      "TOP-COVER-QTY",
      "CASE-SCREEN",
      "CASE-STEEL",
      "CASE-SCREEN-SIZE",
      "CASE-STEEL-SIZE",
      "MARGURI-FIXED",
      "CASE-STEEL-330",
      "CASE-SCREEN-380",
    ];

    const oldCaseRules = formulaRules.filter((rule) =>
      caseRuleCodes.includes(rule.ruleCode)
    );

    if (oldCaseRules.length > 0) {
      console.log("🗑️ 기존 케이스 규칙 삭제:", oldCaseRules.length + "개");
      oldCaseRules.forEach((rule) => {
        deleteFormulaRule(rule.id);
      });
    }

    // 필요한 케이스 품목들이 모두 있는지 확인
    const requiredItems = [
      "CASE-STEEL-330-1219",
      "CASE-SCREEN-380-1219",
      "MARGURI-330-320",
      "MARGURI-380-180",
    ];

    const hasAllItems = requiredItems.every((code) =>
      itemMasters.some((item) => item.itemCode === code)
    );

    // 케이스 규칙이 없고 품목이 있으면 생성
    const hasCaseRule = formulaRules.some((rule) =>
      caseRuleCodes.includes(rule.ruleCode)
    );

    if (!hasCaseRule && hasAllItems && oldCaseRules.length === 0) {
      console.log("✅ 케이스(셔터박스) 산정 규칙을 자동 생성합니다... (첨부파일 기준)");

      const now = Date.now();

      // === 다단계 규칙: 스크린 케이스 (1단계) ===
      const stage1ScreenId = `FORMULA-S-SCREEN-${now + 300}`;
      const stage2ScreenId = `FORMULA-CASE-SCREEN-380-${now + 100}`;

      const sizeCalcScreenRule: FormulaRule = {
        id: stage1ScreenId,
        ruleCode: "S-SIZE-SCREEN",
        ruleName: "셔터박스 사이즈(S) - 스크린",
        description: "스크린용 셔터박스 사이즈 계산: W0 + 220",
        category: "케이스(셔터박스)",
        ruleType: "formula",
        inputVariable: "W0",
        unit: "mm",
        status: "active",
        formula: "W0 + 220",
        fixedValue: 0,
        isStage1: true,
        stageLevel: 1,
        stage1ResultType: "value",
        intermediateResultType: "value",
        childStageRuleIds: [stage2ScreenId],
        ranges: [],
      };

      // === 다단계 규칙: 철재 케이스 (1단계) ===
      const stage1SteelId = `FORMULA-S-STEEL-${now + 400}`;
      const stage2SteelId = `FORMULA-CASE-STEEL-330-${now}`;

      const sizeCalcSteelRule: FormulaRule = {
        id: stage1SteelId,
        ruleCode: "S-SIZE-STEEL",
        ruleName: "셔터박스 사이즈(S) - 철재",
        description: "철재용 셔터박스 사이즈 계산: W0 + 240",
        category: "케이스(셔터박스)",
        ruleType: "formula",
        inputVariable: "W0",
        unit: "mm",
        status: "active",
        formula: "W0 + 240",
        fixedValue: 0,
        isStage1: true,
        stageLevel: 1,
        stage1ResultType: "value",
        intermediateResultType: "value",
        childStageRuleIds: [stage2SteelId],
        ranges: [],
      };

      // === 철재 케이스 (2단계) ===
      const caseSteel330Rule: FormulaRule = {
        id: stage2SteelId,
        ruleCode: "CASE-STEEL-330",
        ruleName: "케이스 본체 - 철재 330×320",
        description: "S 구간별 케이스 본체 자재 산정 (철재 330×320 규격)",
        category: "케이스(셔터박스)",
        ruleType: "range",
        inputVariable: "S",
        unit: "EA",
        status: "active",
        formula: "",
        fixedValue: 0,
        isStage1: false,
        isIntermediateRule: true,
        stageLevel: 2,
        stage1ResultType: "item",
        parentStageRuleId: stage1SteelId,
        ranges: [
          {
            id: `RANGE-CS330-1-${now}`,
            minValue: 0,
            maxValue: 1219,
            result: "1",
            itemCode: "CASE-STEEL-330-1219",
            itemName: "케이스 본체 330×320 1219mm",
            quantity: 1,
            description: "0 < S ≤ 1219mm: 1219규격 1개",
          },
          {
            id: `RANGE-CS330-2-${now + 1}`,
            minValue: 1219,
            maxValue: 2438,
            result: "1",
            itemCode: "CASE-STEEL-330-2438",
            itemName: "케이스 본체 330×320 2438mm",
            quantity: 1,
            description: "1219 < S ≤ 2438mm: 2438규격 1개",
          },
          {
            id: `RANGE-CS330-3-${now + 2}`,
            minValue: 2438,
            maxValue: 3000,
            result: "1",
            itemCode: "CASE-STEEL-330-3000",
            itemName: "케이스 본체 330×320 3000mm",
            quantity: 1,
            description: "2438 < S ≤ 3000mm: 3000규격 1개",
          },
          {
            id: `RANGE-CS330-4-${now + 3}`,
            minValue: 3000,
            maxValue: 3500,
            result: "1",
            itemCode: "CASE-STEEL-330-3500",
            itemName: "케이스 본체 330×320 3500mm",
            quantity: 1,
            description: "3000 < S ≤ 3500mm: 3500규격 1개",
          },
          {
            id: `RANGE-CS330-5-${now + 4}`,
            minValue: 3500,
            maxValue: 4000,
            result: "1",
            itemCode: "CASE-STEEL-330-4000",
            itemName: "케이스 본체 330×320 4000mm",
            quantity: 1,
            description: "3500 < S ≤ 4000mm: 4000규격 1개",
          },
          {
            id: `RANGE-CS330-6-${now + 5}`,
            minValue: 4000,
            maxValue: 4150,
            result: "1",
            itemCode: "CASE-STEEL-330-4150",
            itemName: "케이스 본체 330×320 4150mm",
            quantity: 1,
            description: "4000 < S ≤ 4150mm: 4150규격 1개",
          },
        ],
      };

      // === 스크린 케이스 (2단계) ===
      const caseScreen380Rule: FormulaRule = {
        id: stage2ScreenId,
        ruleCode: "CASE-SCREEN-380",
        ruleName: "케이스 본체 - 스크린 380×180",
        description: "S 구간별 케이스 본체 자재 산정 (스크린 380×180 규격)",
        category: "케이스(셔터박스)",
        ruleType: "range",
        inputVariable: "S",
        unit: "EA",
        status: "active",
        formula: "",
        fixedValue: 0,
        isStage1: false,
        isIntermediateRule: true,
        stageLevel: 2,
        stage1ResultType: "item",
        parentStageRuleId: stage1ScreenId,
        ranges: [
          {
            id: `RANGE-CSC380-1-${now}`,
            minValue: 0,
            maxValue: 1219,
            result: "1",
            itemCode: "CASE-SCREEN-380-1219",
            itemName: "케이스 본체 380×180 1219mm",
            quantity: 1,
            description: "0 < S ≤ 1219mm: 1219규격 1개",
          },
          {
            id: `RANGE-CSC380-2-${now + 1}`,
            minValue: 1219,
            maxValue: 2438,
            result: "1",
            itemCode: "CASE-SCREEN-380-2438",
            itemName: "케이스 본체 380×180 2438mm",
            quantity: 1,
            description: "1219 < S ≤ 2438mm: 2438규격 1개",
          },
          {
            id: `RANGE-CSC380-3-${now + 2}`,
            minValue: 2438,
            maxValue: 3000,
            result: "1",
            itemCode: "CASE-SCREEN-380-3000",
            itemName: "케이스 본체 380×180 3000mm",
            quantity: 1,
            description: "2438 < S ≤ 3000mm: 3000규격 1개",
          },
          {
            id: `RANGE-CSC380-4-${now + 3}`,
            minValue: 3000,
            maxValue: 3500,
            result: "1",
            itemCode: "CASE-SCREEN-380-3500",
            itemName: "케이스 본체 380×180 3500mm",
            quantity: 1,
            description: "3000 < S ≤ 3500mm: 3500규격 1개",
          },
          {
            id: `RANGE-CSC380-5-${now + 4}`,
            minValue: 3500,
            maxValue: 4000,
            result: "1",
            itemCode: "CASE-SCREEN-380-4000",
            itemName: "케이스 본체 380×180 4000mm",
            quantity: 1,
            description: "3500 < S ≤ 4000mm: 4000규격 1개",
          },
          {
            id: `RANGE-CSC380-6-${now + 5}`,
            minValue: 4000,
            maxValue: 4150,
            result: "1",
            itemCode: "CASE-SCREEN-380-4150",
            itemName: "케이스 본체 380×180 4150mm",
            quantity: 1,
            description: "4000 < S ≤ 4150mm: 4150규격 1개",
          },
        ],
      };

      // === 마구리 수량 규칙 (고정값) ===
      const marguriRule: FormulaRule = {
        id: `FORMULA-MARGURI-${now + 200}`,
        ruleCode: "MARGURI-FIXED",
        ruleName: "마구리 수량",
        description: "마구리는 항상 2개 필요 (양쪽)",
        category: "케이스(셔터박스)",
        ruleType: "fixed",
        inputVariable: "",
        unit: "EA",
        status: "active",
        formula: "",
        fixedValue: 2,
        isStage1: false,
        stage1ResultType: "quantity",
        ranges: [],
      };

      addFormulaRule(sizeCalcScreenRule);
      addFormulaRule(sizeCalcSteelRule);
      addFormulaRule(caseSteel330Rule);
      addFormulaRule(caseScreen380Rule);
      addFormulaRule(marguriRule);
      hasGeneratedCaseRuleRef.current = true;
      toast.success("✅ 케이스(셔터박스) 산정 규칙이 자동 생성되었습니다! (첨부파일 기준)");
    }
  }, [formulaRules, itemMasters]); // formulaRules와 itemMasters 변경 시 확인

  // 드래그 가능한 탭 컴포넌트
  const DraggableTab: React.FC<{
    category: Category;
    index: number;
    moveTab: (dragIndex: number, hoverIndex: number) => void;
    activeTab: string;
    setActiveTab: (tab: string) => void;
    isManaging: boolean;
    editingTabId: string | null;
    editingTabName: string;
    setEditingTabName: (name: string) => void;
    setEditingTabId: (id: string | null) => void;
    handleEditTab: (id: string) => void;
    handleSaveTabEdit: () => void;
    handleDeleteTab: (id: string) => void;
  }> = ({
    category,
    index,
    moveTab,
    activeTab,
    setActiveTab,
    isManaging,
    editingTabId,
    editingTabName,
    setEditingTabName,
    setEditingTabId,
    handleEditTab,
    handleSaveTabEdit,
    handleDeleteTab,
  }) => {
    const ref = useRef<HTMLDivElement>(null);

    const [{ isDragging }, drag] = useDrag({
      type: "TAB",
      item: { index },
      canDrag: isManaging,
      collect: (monitor) => ({
        isDragging: monitor.isDragging(),
      }),
    });

    const [, drop] = useDrop({
      accept: "TAB",
      hover: (item: { index: number }, monitor) => {
        if (!ref.current) {
          return;
        }
        const dragIndex = item.index;
        const hoverIndex = index;

        if (dragIndex === hoverIndex) {
          return;
        }

        const hoverBoundingRect = ref.current?.getBoundingClientRect();
        const hoverMiddleX =
          (hoverBoundingRect.right - hoverBoundingRect.left) / 2;
        const clientOffset = monitor.getClientOffset();
        const hoverClientX = clientOffset!.x - hoverBoundingRect.left;

        if (dragIndex < hoverIndex && hoverClientX < hoverMiddleX) {
          return;
        }
        if (dragIndex > hoverIndex && hoverClientX > hoverMiddleX) {
          return;
        }

        moveTab(dragIndex, hoverIndex);
        item.index = hoverIndex;
      },
    });

    drag(drop(ref));

    return (
      <div
        ref={ref}
        style={{
          opacity: isDragging ? 0.5 : 1,
          cursor: isManaging ? "move" : "pointer",
        }}
        className="flex items-center gap-1"
      >
        {editingTabId === category.id ? (
          <div className="flex items-center gap-1 bg-blue-50 border-2 border-blue-400 rounded-lg px-3 py-2">
            <Input
              value={editingTabName}
              onChange={(e) => setEditingTabName(e.target.value)}
              className="h-6 w-32 text-sm"
              autoFocus
            />
            <Button
              size="sm"
              variant="ghost"
              onClick={handleSaveTabEdit}
              className="h-6 w-6 p-0"
            >
              <Plus className="h-3 w-3" />
            </Button>
            <Button
              size="sm"
              variant="ghost"
              onClick={() => {
                setEditingTabId(null);
                setEditingTabName("");
              }}
              className="h-6 w-6 p-0"
            >
              <X className="h-3 w-3" />
            </Button>
          </div>
        ) : (
          <div
            className={`flex items-center gap-2 px-4 py-2 rounded-lg border-2 cursor-pointer transition-all ${
              activeTab === category.id
                ? "bg-blue-600 text-white border-blue-600"
                : "bg-white text-gray-700 border-gray-200 hover:border-blue-300"
            }`}
            onClick={() => setActiveTab(category.id)}
          >
            {isManaging && (
              <GripVertical className="h-4 w-4 opacity-50" />
            )}
            <span className="text-sm">{category.label}</span>
            {isManaging && (
              <div className="flex items-center gap-1 ml-1">
                <Button
                  size="sm"
                  variant="ghost"
                  onClick={(e) => {
                    e.stopPropagation();
                    handleEditTab(category.id);
                  }}
                  className={`h-5 w-5 p-0 ${
                    activeTab === category.id
                      ? "text-white hover:bg-blue-500"
                      : "hover:bg-gray-100"
                  }`}
                >
                  <Edit className="h-3 w-3" />
                </Button>
                <AlertDialog>
                  <AlertDialogTrigger asChild>
                    <Button
                      size="sm"
                      variant="ghost"
                      onClick={(e) => e.stopPropagation()}
                      className={`h-5 w-5 p-0 ${
                        activeTab === category.id
                          ? "text-white hover:bg-blue-500"
                          : "hover:bg-gray-100"
                      }`}
                    >
                      <Trash2 className="h-3 w-3" />
                    </Button>
                  </AlertDialogTrigger>
                  <AlertDialogContent>
                    <AlertDialogHeader>
                      <AlertDialogTitle>카테고리 삭제</AlertDialogTitle>
                      <AlertDialogDescription>
                        &apos;{category.label}&apos; 카테고리를
                        삭제하시겠습니까?
                      </AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                      <AlertDialogCancel>취소</AlertDialogCancel>
                      <AlertDialogAction onClick={() => handleDeleteTab(category.id)}>
                        삭제
                      </AlertDialogAction>
                    </AlertDialogFooter>
                  </AlertDialogContent>
                </AlertDialog>
              </div>
            )}
          </div>
        )}
      </div>
    );
  };

  // CategoryTabSection 컴포넌트 - 재사용 가능한 카테고리 탭 섹션
  const CategoryTabSection: React.FC<{
    title: string;
    categories: Category[];
    setCategories: (categories: Category[]) => void;
    activeTab: string;
    setActiveTab: (tab: string) => void;
    isManaging: boolean;
    setIsManaging: (managing: boolean) => void;
    isAdding: boolean;
    setIsAdding: (adding: boolean) => void;
    newTabName: string;
    setNewTabName: (name: string) => void;
    editingTabId: string | null;
    setEditingTabId: (id: string | null) => void;
    editingTabName: string;
    setEditingTabName: (name: string) => void;
    handleAddTab: () => void;
    handleEditTab: (id: string) => void;
    handleSaveTabEdit: () => void;
    handleDeleteTab: (id: string) => void;
    currentRules: FormulaRule[];
  }> = ({
    title,
    categories,
    setCategories,
    activeTab,
    setActiveTab,
    isManaging,
    setIsManaging,
    isAdding,
    setIsAdding,
    newTabName,
    setNewTabName,
    editingTabId,
    setEditingTabId,
    editingTabName,
    setEditingTabName,
    handleAddTab,
    handleEditTab,
    handleSaveTabEdit,
    handleDeleteTab,
    currentRules,
  }) => {
    const moveTab = (dragIndex: number, hoverIndex: number) => {
      const draggedTab = categories[dragIndex];
      const newCategories = [...categories];
      newCategories.splice(dragIndex, 1);
      newCategories.splice(hoverIndex, 0, draggedTab);
      setCategories(newCategories);
    };

    return (
    <Card className="mt-6">
      <CardHeader className="flex flex-col gap-4">
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
          <CardTitle className="flex items-center gap-2">
            <Calculator className="h-5 w-5 text-blue-600" />
            {title}
          </CardTitle>
          <div className="flex flex-wrap gap-2 justify-end">
            <Button
              variant={isManaging ? "default" : "outline"}
              onClick={() => setIsManaging(!isManaging)}
              className="whitespace-nowrap"
            >
              <Edit className="h-4 w-4 mr-2" />
              {isManaging
                ? "카테고리 관리 완료"
                : "카테고리 관리"}
            </Button>
            <RuleTemplateManager 
              currentRules={currentRules} 
              onLoadTemplate={handleLoadTemplate}
            />
            <Button
              variant="outline"
              onClick={() => {
                resetForm();
                setPageMode("multi-stage");
              }}
              className="border-blue-500 text-blue-700 hover:bg-blue-50 whitespace-nowrap"
            >
              <Layers className="h-4 w-4 mr-2" />
              다단계 규칙 생성
            </Button>
            <Button
              onClick={() => {
                resetForm();
                setPageMode("create");
              }}
              className="whitespace-nowrap"
            >
              <Plus className="h-4 w-4 mr-2" />
              기준 등록
            </Button>
          </div>
        </div>
      </CardHeader>
      <CardContent>
        {/* 탭 목록 */}
        <div className="flex flex-wrap gap-2 mb-4">
          {categories.map((cat: Category, index: number) => (
            <DraggableTab
              key={cat.id}
              category={cat}
              index={index}
              moveTab={moveTab}
              activeTab={activeTab}
              setActiveTab={setActiveTab}
              isManaging={isManaging}
              editingTabId={editingTabId}
              editingTabName={editingTabName}
              setEditingTabName={setEditingTabName}
              setEditingTabId={setEditingTabId}
              handleEditTab={handleEditTab}
              handleSaveTabEdit={handleSaveTabEdit}
              handleDeleteTab={handleDeleteTab}
            />
          ))}

          {/* 탭 추가 - 관리 모드일 때만 표시 */}
          {isManaging &&
            (isAdding ? (
              <div className="flex items-center gap-1 bg-green-50 border-2 border-green-400 rounded-lg px-3 py-2">
                <Input
                  value={newTabName}
                  onChange={(e) =>
                    setNewTabName(e.target.value)
                  }
                  placeholder="카테고리명"
                  className="h-6 w-32 text-sm"
                  autoFocus
                />
                <Button
                  size="sm"
                  variant="ghost"
                  onClick={handleAddTab}
                  className="h-6 w-6 p-0"
                >
                  <Plus className="h-3 w-3" />
                </Button>
                <Button
                  size="sm"
                  variant="ghost"
                  onClick={() => {
                    setIsAdding(false);
                    setNewTabName("");
                  }}
                  className="h-6 w-6 p-0"
                >
                  <X className="h-3 w-3" />
                </Button>
              </div>
            ) : (
              <Button
                variant="outline"
                size="sm"
                onClick={() => setIsAdding(true)}
                className="border-2 border-dashed"
              >
                <Plus className="h-4 w-4 mr-1" />
                카테고리 추가
              </Button>
            ))}
        </div>

        {/* 카테고리 내용 */}
        <div className="space-y-4 mt-6">
          {/* 참고 안내 문구 - 가이드레일 탭 */}
          {activeTab === "guide-rail" && (
            <div className="space-y-4 mb-6">
              <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
                <p className="text-sm text-blue-800">
                  <strong>📌 가이드레일 산정 기준:</strong> 제작길이(G) 구간별로 
                  품목리스트에서 적합한 가이드레일 품목을 선택하고 필요한 수량을 등록합니다. 
                  각 구간에는 여러 품목과 수량을 설정할 수 있으며, 모든 수량은 1방 기준입니다.
                  실제 납품은 2방 1SET 기준으로 적용됩니다.
                </p>
              </div>

            </div>
          )}

          {/* 참고 안내 문구 - 브라켓 & 받침용앵글 탭 */}
          {activeTab === "bracket-angle" && (
            <div className="space-y-4 mb-6">
              <div className="p-4 bg-purple-50 border border-purple-200 rounded-lg">
                <p className="text-sm text-purple-800">
                  <strong>📌 브라켓 & 받침용앵글 산정 기준:</strong> 모터 용량(K) 구간별로 
                  브라켓 규격, 샤프트, 받침용앵글 규격을 선택하고 수량을 등록합니다. 
                  스크린용과 철재용을 구분하여 등록하며, 모든 수량은 1SET 기준입니다.
                </p>
              </div>
            </div>
          )}

          {/* 참고 안내 문구 - 케이스(셔터박스) 탭 */}
          {activeTab === "case" && (
            <div className="space-y-4 mb-6">
              <div className="p-4 bg-amber-50 border border-amber-200 rounded-lg">
                <p className="text-sm text-amber-800 mb-3">
                  <strong>📌 케이스(셔터박스) 산정 기준:</strong>
                </p>
                <div className="text-sm text-amber-700 space-y-3 ml-4">
                  <div>
                    <p className="font-semibold mb-1">변수 S 계산식:</p>
                    <ul className="list-disc ml-6 space-y-1">
                      <li><strong>스크린:</strong> S = W0 + 220 (오픈사이즈 + 220mm)</li>
                      <li><strong>철재:</strong> S = W0 + 240 (오픈사이즈 + 240mm)</li>
                    </ul>
                  </div>
                  <div>
                    <p className="font-semibold mb-1">S 구간별 케이스 본체 자재:</p>
                    <ul className="list-disc ml-6 space-y-1">
                      <li>0 &lt; S ≤ 1219mm → 1219 규격 1개</li>
                      <li>1219 &lt; S ≤ 2438mm → 2438 규격 1개</li>
                      <li>2438 &lt; S ≤ 3000mm → 3000 규격 1개</li>
                      <li>3000 &lt; S ≤ 3500mm → 3500 규격 1개</li>
                      <li>3500 &lt; S ≤ 4000mm → 4000 규격 1개</li>
                      <li>4000 &lt; S ≤ 4150mm → 4150 규격 1개</li>
                      <li>4150mm 초과 → 조합 사용 (4150 + 추가 규격)</li>
                    </ul>
                  </div>
                  <div>
                    <p className="font-semibold mb-1">케이스 규격 (브라켓 규격 따름):</p>
                    <ul className="list-disc ml-6 space-y-1">
                      <li><strong>철재:</strong> 330×320, 600×350, 690×390</li>
                      <li><strong>스크린:</strong> 380×180</li>
                    </ul>
                  </div>
                  <div>
                    <p className="font-semibold mb-1">마구리:</p>
                    <ul className="list-disc ml-6 space-y-1">
                      <li>케이스 규격과 동일한 규격 사용</li>
                      <li>수량: 고정 <strong>2개</strong> (양쪽)</li>
                    </ul>
                  </div>
                  <div className="bg-white/60 rounded p-2 mt-2">
                    <p className="text-xs">
                      💡 <strong>참고:</strong> 브라켓 규격에 따라 케이스와 마구리 규격이 자동으로 결정됩니다.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* 참고 안내 문구 - 감기샤프트 탭 */}
          {activeTab === "winding-shaft" && (
            <div className="space-y-4 mb-6">
              <div className="p-4 bg-orange-50 border border-orange-200 rounded-lg">
                <p className="text-sm text-orange-800 mb-3">
                  <strong>📌 스크린용 감기샤프트 산정 기준 (2단계 프로세스):</strong>
                </p>
                <div className="text-sm text-orange-700 space-y-2 ml-4">
                  <p><strong>1단계: 제작사이즈(W1) 기준 샤프트 규격 결정</strong></p>
                  <ul className="list-disc ml-6 space-y-1">
                    <li>0 &lt; W1 ≤ 6000mm → <strong>4인치</strong> 샤프트</li>
                    <li>6000mm &lt; W1 ≤ 8200mm → <strong>5인치</strong> 샤프트</li>
                    <li>8200mm &lt; W1 ≤ 10200mm → <strong>6인치</strong> 샤프트</li>
                  </ul>
                  <p className="mt-3"><strong>2단계: 오픈사이즈(W0) + 샤프트 규격 기준 수량 산출</strong></p>
                  <ul className="list-disc ml-6 space-y-1">
                    <li>오픈사이즈 범위와 1단계에서 결정된 샤프트 규격(4"/5"/6")에 따라</li>
                    <li><strong>보조샤프트</strong> 규격별 수량 (300mm ~ 8250mm)</li>
                    <li><strong>메인샤프트</strong> 규격별 수량 (3000mm ~ 8200mm)</li>
                  </ul>
                </div>
              </div>
            </div>
          )}

          {/* 참고 안내 문구 - 하단마감재 탭 */}
          {activeTab === "bottom-finish" && (
            <div className="space-y-4 mb-6">
              <div className="p-4 bg-teal-50 border border-teal-200 rounded-lg">
                <p className="text-sm text-teal-800 mb-3">
                  <strong>📌 하단마감재 산정 기준:</strong>
                </p>
                <div className="text-sm text-teal-700 space-y-3 ml-4">
                  <div>
                    <p className="font-semibold mb-1">1. 하장바 (철재 & 스크린 공통)</p>
                    <ul className="list-disc ml-6 space-y-1">
                      <li><strong>철재:</strong> 60×30 규격, 오픈사이즈(W0) & 폭(B) 기준</li>
                      <li><strong>스크린:</strong> 60×40 규격, 오픈사이즈(W0) & 폭(B) 기준</li>
                      <li>길이 3000mm, 4000mm 규격별 구간 설정</li>
                    </ul>
                  </div>
                  <div>
                    <p className="font-semibold mb-1">2. 엘바 (스크린 전용)</p>
                    <ul className="list-disc ml-6 space-y-1">
                      <li>17×60×2개 규격, 제작사이즈(W1) 기준</li>
                      <li>3000mm 길이 기준으로 수량 산출</li>
                    </ul>
                  </div>
                  <div>
                    <p className="font-semibold mb-1">3. 보강평철 (스크린 전용)</p>
                    <ul className="list-disc ml-6 space-y-1">
                      <li>50 규격, 제작사이즈(W1) 기준</li>
                      <li>3000mm, 4000mm 길이 구간별 수량 산출</li>
                    </ul>
                  </div>
                  <div>
                    <p className="font-semibold mb-1">4. 무게평철 (스크린 전용)</p>
                    <ul className="list-disc ml-6 space-y-1">
                      <li>50×12T×2개 규격, 오픈사이즈×2(W0×2) 기준</li>
                      <li>B×2 값에 따라 2000mm 단위 구간별 수량 산출</li>
                      <li>범위: 0 ~ 20000mm (10개 구간)</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* 참고 안내 문구 - 각파이프 탭 */}
          {activeTab === "square-pipe" && (
            <div className="space-y-4 mb-6">
              <div className="p-4 bg-indigo-50 border border-indigo-200 rounded-lg">
                <p className="text-sm text-indigo-800 mb-3">
                  <strong>📌 각파이프 산정 기준 (3단계 프로세스):</strong>
                </p>
                <div className="text-sm text-indigo-700 space-y-3 ml-4">
                  <div>
                    <p className="font-semibold mb-1">1단계: 케이스 사이즈(S) → 보강 갯수</p>
                    <ul className="list-disc ml-6 space-y-1">
                      <li>S ≤ 1600mm → 3개</li>
                      <li>1600 &lt; S ≤ 2800mm → 4개</li>
                      <li>2800 &lt; S ≤ 4000mm → 5개</li>
                      <li>... (최대 10000~12000mm → 11개)</li>
                    </ul>
                  </div>
                  <div>
                    <p className="font-semibold mb-1">2단계: 보강 갯수 → 각파이프 사이즈</p>
                    <ul className="list-disc ml-6 space-y-1">
                      <li><strong>수식:</strong> S + 3000 × 보강갯수</li>
                      <li>1단계에서 결정된 보강 갯수를 기반으로 총 사이즈 계산</li>
                    </ul>
                  </div>
                  <div>
                    <p className="font-semibold mb-1">3단계: 각파이프 사이즈 → 규격별 갯수</p>
                    <ul className="list-disc ml-6 space-y-1">
                      <li><strong>3000 규격:</strong> 사이즈 ≤ 18000mm일 때 적용 (3~6개)</li>
                      <li><strong>6000 규격:</strong> 사이즈 &gt; 18000mm일 때 적용 (4~8개)</li>
                      <li>각 규격별로 사이즈 구간에 따라 필요 갯수 자동 산출</li>
                    </ul>
                  </div>
                  <div className="bg-white/60 rounded p-2 mt-2">
                    <p className="text-xs">
                      💡 <strong>변수 설명:</strong> S = 케이스(셔터박스) 사이즈 (스크린: W0+220, 철재: W0+240)
                    </p>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* 참고 안내 문구 - 환봉 탭 */}
          {activeTab === "round-bar" && (
            <div className="space-y-4 mb-6">
              <div className="p-4 bg-cyan-50 border border-cyan-200 rounded-lg">
                <p className="text-sm text-cyan-800 mb-3">
                  <strong>📌 환봉 산정 기준 (스크린 전용):</strong>
                </p>
                <div className="text-sm text-cyan-700 space-y-2 ml-4">
                  <p><strong>자재 규격:</strong> 3000mm 고정</p>
                  <p><strong>산출 기준:</strong> 제작사이즈(W1) 구간별 수량 결정</p>
                  <ul className="list-disc ml-6 space-y-1 mt-2">
                    <li>0 &lt; W1 ≤ 3000mm → <strong>1개</strong></li>
                    <li>3000 &lt; W1 ≤ 6000mm → <strong>2개</strong></li>
                    <li>6000 &lt; W1 ≤ 9000mm → <strong>3개</strong></li>
                    <li>9000 &lt; W1 ≤ 12000mm → <strong>4개</strong></li>
                  </ul>
                  <div className="bg-white/60 rounded p-2 mt-2">
                    <p className="text-xs">
                      💡 <strong>참고:</strong> 철재 셔터에는 환봉이 사용되지 않습니다.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* 참고 안내 문구 - 조인트바 탭 */}
          {activeTab === "joint-bar" && (
            <div className="space-y-4 mb-6">
              <div className="p-4 bg-emerald-50 border border-emerald-200 rounded-lg">
                <p className="text-sm text-emerald-800 mb-3">
                  <strong>📌 조인트바 산정 기준:</strong>
                </p>
                <div className="text-sm text-emerald-700 space-y-3 ml-4">
                  <div>
                    <p><strong>자재 규격:</strong> 250mm 고정 (장당 치수)</p>
                    <p><strong>기본 설치:</strong> 양쪽 끝단 2개 고정</p>
                  </div>
                  <div>
                    <p className="font-semibold mb-1">산출 수식:</p>
                    <div className="bg-white/80 rounded p-2">
                      <code className="text-emerald-900">
                        조인트바 수량 = 2 + FLOOR((W1 - 500) / 1000)
                      </code>
                    </div>
                  </div>
                  <div>
                    <p className="font-semibold mb-1">계산 방법:</p>
                    <ul className="list-disc ml-6 space-y-1">
                      <li>기본 2개 (양쪽 끝단, 각 250mm)</li>
                      <li>중앙 여유공간 = W1 - 500mm</li>
                      <li>1000mm마다 1개씩 추가</li>
                    </ul>
                  </div>
                  <div>
                    <p className="font-semibold mb-1">예시:</p>
                    <ul className="list-disc ml-6 space-y-1">
                      <li>W1 = 1500mm → 2 + FLOOR(1000/1000) = <strong>3개</strong></li>
                      <li>W1 = 2500mm → 2 + FLOOR(2000/1000) = <strong>4개</strong></li>
                      <li>W1 = 3500mm → 2 + FLOOR(3000/1000) = <strong>5개</strong></li>
                      <li>W1 = 8000mm → 2 + FLOOR(7500/1000) = <strong>9개</strong></li>
                    </ul>
                  </div>
                  <div className="bg-white/60 rounded p-2 mt-2">
                    <p className="text-xs">
                      💡 <strong>참고:</strong> W1 = 제작사이즈(폭), FLOOR = 내림 함수
                    </p>
                  </div>
                </div>
              </div>
            </div>
          )}

          {currentRules.length === 0 ? (
            <div className="text-center py-8 text-gray-500">
              <Calculator className="h-12 w-12 mx-auto mb-2 opacity-30" />
              <p>등록된 산정 기준이 없습니다.</p>
            </div>
          ) : (
            currentRules.map((rule: FormulaRule) => (
              <div
                key={rule.id}
                className="border rounded-lg p-4 bg-white"
              >
                <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-3 mb-3">
                  <div className="flex-1">
                    <div className="flex flex-wrap items-center gap-2 mb-1">
                      <h3 className="font-medium">
                        {rule.ruleName}
                      </h3>
                      <Badge
                        variant={
                          rule.status === "active"
                            ? "default"
                            : "secondary"
                        }
                      >
                        {rule.status === "active"
                          ? "활성"
                          : "비활성"}
                      </Badge>
                      <Badge variant="outline">
                        {rule.category}
                      </Badge>
                      <Badge
                        variant="outline"
                        className={
                          rule.ruleType === "range"
                            ? "bg-purple-50 text-purple-700"
                            : rule.ruleType === "formula"
                              ? "bg-blue-50 text-blue-700"
                              : "bg-green-50 text-green-700"
                        }
                      >
                        {rule.ruleType === "range"
                          ? "범위"
                          : rule.ruleType === "formula"
                            ? "수식"
                            : "고정"}
                      </Badge>
                      {rule.isStage1 && (
                        <Badge variant="outline" className="bg-orange-50 text-orange-700">
                          {rule.stageLevel || 1}단계 ({rule.stage1ResultType === 'specification' ? '규격' : rule.stage1ResultType === 'item' ? '품목' : rule.stage1ResultType === 'quantity' ? '수량' : '값'})
                        </Badge>
                      )}
                    </div>
                    <p className="text-xs text-gray-500">
                      {rule.ruleCode}
                    </p>
                    <p className="text-sm text-gray-600 mt-1">
                      {rule.description}
                    </p>
                  </div>
                  <div className="flex flex-wrap gap-2">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => handleCopyRule(rule)}
                      title="규칙 복사"
                    >
                      <Copy className="h-3 w-3 text-blue-600" />
                    </Button>
                    {/* 다단계 규칙 편집 버튼 - 첫 번째 단계이고 다음 단계가 있는 경우에만 표시 */}
                    {(rule.isStage1 || rule.isIntermediateRule) && 
                     !rule.parentStageRuleId && 
                     !rule.stage1RuleId && 
                     (rule.childStageRuleIds?.length > 0 || rule.stage2RuleIds?.length > 0) && (
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => handleEditMultiStageRules(rule)}
                        title="다단계 규칙 한번에 수정"
                        className="border-purple-300 hover:bg-purple-50"
                      >
                        <Layers className="h-3 w-3 text-purple-600" />
                      </Button>
                    )}
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => startEdit(rule)}
                    >
                      <Edit className="h-3 w-3" />
                    </Button>
                    <AlertDialog>
                      <AlertDialogTrigger asChild>
                        <Button variant="outline" size="sm">
                          <Trash2 className="h-3 w-3 text-red-600" />
                        </Button>
                      </AlertDialogTrigger>
                      <AlertDialogContent>
                        <AlertDialogHeader>
                          <AlertDialogTitle>
                            기준 삭제
                          </AlertDialogTitle>
                          <AlertDialogDescription>
                            정말로 이 산정 기준을
                            삭제하시겠습니까?
                          </AlertDialogDescription>
                        </AlertDialogHeader>
                        <AlertDialogFooter>
                          <AlertDialogCancel>
                            취소
                          </AlertDialogCancel>
                          <AlertDialogAction
                            onClick={(e) => {
                              e.preventDefault();
                              handleDeleteRule(rule.id);
                            }}
                          >
                            삭제
                          </AlertDialogAction>
                        </AlertDialogFooter>
                      </AlertDialogContent>
                    </AlertDialog>
                  </div>
                </div>

                {/* 범위 타입 표시 */}
                {rule.ruleType === "range" &&
                  rule.ranges &&
                  rule.ranges.length > 0 && (
                    <div className="mt-3 bg-gray-50 rounded p-3">
                      <p className="text-xs font-medium text-gray-700 mb-2">
                        범위 조건
                      </p>
                      
                      {/* 모바일/태블릿 카드 뷰 */}
                      <div className="lg:hidden space-y-3">
                        {rule.ranges.map((range) => (
                          <div 
                            key={range.id}
                            className="bg-white border rounded-lg p-3 space-y-2"
                          >
                            <div className="flex items-center gap-2 pb-2 border-b">
                              <Badge variant="secondary" className="text-xs">
                                {range.result}
                              </Badge>
                            </div>
                            
                            <div className="grid grid-cols-2 gap-3 text-sm">
                              <div>
                                <span className="text-xs text-muted-foreground block mb-1">최소값</span>
                                <span className="font-medium">{range.minValue}</span>
                              </div>
                              <div>
                                <span className="text-xs text-muted-foreground block mb-1">최대값</span>
                                <span className="font-medium">{range.maxValue}</span>
                              </div>
                            </div>

                            {range.itemCode && (
                              <div>
                                <span className="text-xs text-muted-foreground block mb-1">품목</span>
                                <div className="flex flex-col gap-1">
                                  <span className="text-xs font-medium text-blue-600">
                                    {range.itemCode}
                                  </span>
                                  <span className="text-xs text-gray-500">
                                    {range.itemName}
                                  </span>
                                </div>
                              </div>
                            )}

                            {range.quantity && (
                              <div>
                                <span className="text-xs text-muted-foreground block mb-1">수량</span>
                                <Badge variant="outline" className="text-xs">
                                  {range.quantity}
                                </Badge>
                              </div>
                            )}

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

                            {range.additionalConditions && range.additionalConditions.length > 0 && (
                              <div className="pt-2 border-t border-purple-200">
                                <span className="text-xs text-purple-600 font-medium block mb-2">
                                  추가 조건 ({range.additionalConditions.length}개)
                                </span>
                                <div className="space-y-2">
                                  {range.additionalConditions.map((cond, idx) => (
                                    <div key={cond.id} className="bg-purple-50 p-2 rounded text-xs space-y-1">
                                      <div className="flex items-center gap-2 mb-1">
                                        <Badge 
                                          variant={cond.conditionType === 'and' ? 'default' : 'secondary'}
                                          className={`text-xs ${cond.conditionType === 'and' ? 'bg-purple-600' : 'bg-orange-500'}`}
                                        >
                                          {cond.conditionType.toUpperCase()}
                                        </Badge>
                                        <span className="text-purple-800 font-medium">
                                          {cond.variable}
                                        </span>
                                      </div>
                                      <div>
                                        <span className="text-purple-700">범위:</span>{" "}
                                        <span className="font-medium">
                                          {cond.minValue} ~ {cond.maxValue}
                                        </span>
                                      </div>
                                      {cond.result && (
                                        <div>
                                          <span className="text-purple-700">결과:</span>{" "}
                                          <span className="font-semibold text-purple-900">
                                            {cond.result}
                                          </span>
                                        </div>
                                      )}
                                      {cond.description && (
                                        <div className="text-purple-600 italic">
                                          {cond.description}
                                        </div>
                                      )}
                                    </div>
                                  ))}
                                </div>
                              </div>
                            )}
                          </div>
                        ))}
                      </div>

                      {/* 데스크톱 테이블 뷰 */}
                      <div className="hidden lg:block">
                        <Table>
                          <TableHeader>
                            <TableRow>
                              <TableHead>최소값</TableHead>
                              <TableHead>최대값</TableHead>
                              <TableHead>품목</TableHead>
                              <TableHead>수량</TableHead>
                              <TableHead>결과</TableHead>
                              <TableHead>설명</TableHead>
                            </TableRow>
                          </TableHeader>
                          <TableBody>
                            {rule.ranges.map((range) => (
                              <TableRow key={range.id}>
                                <TableCell>
                                  {range.minValue}
                                </TableCell>
                                <TableCell>
                                  {range.maxValue}
                                </TableCell>
                                <TableCell>
                                  {range.itemCode ? (
                                    <div className="flex flex-col">
                                      <span className="text-xs font-medium text-blue-600">
                                        {range.itemCode}
                                      </span>
                                      <span className="text-xs text-gray-500">
                                        {range.itemName}
                                      </span>
                                    </div>
                                  ) : (
                                    <span className="text-xs text-gray-400">
                                      -
                                    </span>
                                  )}
                                </TableCell>
                                <TableCell>
                                  {range.quantity ? (
                                    <Badge
                                      variant="outline"
                                      className="text-xs"
                                    >
                                      {range.quantity}
                                    </Badge>
                                  ) : (
                                    <span className="text-xs text-gray-400">
                                      -
                                    </span>
                                  )}
                                </TableCell>
                                <TableCell>
                                  <Badge variant="secondary">
                                    {range.result}
                                  </Badge>
                                </TableCell>
                                <TableCell className="text-sm text-gray-600">
                                  <div>{range.description}</div>
                                  {range.additionalConditions && range.additionalConditions.length > 0 && (
                                    <div className="mt-2 pt-2 border-t border-purple-200">
                                      <div className="text-xs text-purple-700 font-medium mb-1">
                                        추가 조건 ({range.additionalConditions.length}개)
                                      </div>
                                      <div className="text-xs space-y-2">
                                        {range.additionalConditions.map((cond) => (
                                          <div key={cond.id} className="flex items-center gap-2 flex-wrap">
                                            <Badge 
                                              variant={cond.conditionType === 'and' ? 'default' : 'secondary'}
                                              className={`text-xs ${cond.conditionType === 'and' ? 'bg-purple-600' : 'bg-orange-500'}`}
                                            >
                                              {cond.conditionType.toUpperCase()}
                                            </Badge>
                                            <Badge variant="outline" className="bg-purple-100 text-purple-800 text-xs">
                                              {cond.variable}
                                            </Badge>
                                            <span>{cond.minValue} ~ {cond.maxValue}</span>
                                          </div>
                                        ))}
                                      </div>
                                    </div>
                                  )}
                                </TableCell>
                              </TableRow>
                            ))}
                          </TableBody>
                        </Table>
                      </div>
                      
                      {/* 감기샤프트 철재 복합조건 요약 */}
                      {rule.ruleCode === "WINDING-SHAFT-STEEL" && (
                        <WindingShaftSteelSummary ranges={rule.ranges} />
                      )}
                    </div>
                  )}

                {/* 수식 타입 표시 */}
                {rule.ruleType === "formula" &&
                  rule.formula && (
                    <div className="mt-3 bg-blue-50 rounded p-3">
                      <p className="text-xs font-medium text-blue-700 mb-2">
                        계산 수식
                      </p>
                      <code className="text-sm bg-white px-3 py-2 rounded border block font-mono">
                        {rule.formula}
                      </code>
                      <p className="text-xs text-gray-600 mt-2">
                        입력 변수:{" "}
                        <Badge variant="outline">
                          {rule.inputVariable}
                        </Badge>{" "}
                        | 단위:{" "}
                        <Badge variant="outline">
                          {rule.unit || "N/A"}
                        </Badge>
                      </p>
                    </div>
                  )}

                {/* 고정값 타입 표시 */}
                {rule.ruleType === "fixed" &&
                  rule.fixedValue !== undefined && (
                    <div className="mt-3 bg-green-50 rounded p-3">
                      <p className="text-xs font-medium text-green-700 mb-2">
                        고정값
                      </p>
                      <div className="flex items-center gap-2">
                        <Badge
                          variant="secondary"
                          className="text-lg px-4 py-2"
                        >
                          {rule.fixedValue} {rule.unit}
                        </Badge>
                      </div>
                    </div>
                  )}
              </div>
            ))
          )}
        </div>
      </CardContent>
    </Card>
    );
  };

  // 등록/수정 페이지 렌더링
  // 다단계 규칙 생성 모드
  if (pageMode === "multi-stage") {
    return (
      <DndProvider backend={SingletonHTML5Backend}>
      <PageLayout>
        <div className="mb-6">
          <Button
            variant="outline"
            size="sm"
            onClick={() => {
              setPageMode("list");
            }}
          >
            <ArrowLeft className="h-4 w-4 mr-2" />
            목록으로
          </Button>
        </div>

        <PageHeader
          title="다단계 규칙 생성"
          description="여러 단계의 규칙을 한 번에 정의하고 저장할 수 있습니다"
          icon={Layers}
        />

        <MultiStageRuleForm
          baseRuleCode=""
          baseRuleName=""
          category={ruleForm.category}
          availableUnits={availableUnits}
          itemMasters={itemMasters}
          onSave={handleSaveMultiStageRules}
          onCancel={() => setPageMode("list")}
        />
      </PageLayout>
      </DndProvider>
    );
  }

  // 다단계 규칙 편집 모드
  if (pageMode === "multi-stage-edit") {
    return (
      <DndProvider backend={SingletonHTML5Backend}>
      <PageLayout>
        <div className="mb-6">
          <Button
            variant="outline"
            size="sm"
            onClick={() => {
              setPageMode("list");
              setEditingMultiStageRules([]);
            }}
          >
            <ArrowLeft className="h-4 w-4 mr-2" />
            목록으로
          </Button>
        </div>

        <PageHeader
          title="다단계 규칙 수정"
          description="연결된 모든 단계의 규칙을 한 번에 수정할 수 있습니다"
          icon={Layers}
        />

        <MultiStageRuleForm
          baseRuleCode={editingMultiStageRules[0]?.ruleCode || ""}
          baseRuleName={editingMultiStageRules[0]?.ruleName || ""}
          category={editingMultiStageRules[0]?.category || ruleForm.category}
          availableUnits={availableUnits}
          itemMasters={itemMasters}
          onSave={handleUpdateMultiStageRules}
          onCancel={() => {
            setPageMode("list");
            setEditingMultiStageRules([]);
          }}
          initialStages={editingMultiStageRules}
        />
      </PageLayout>
      </DndProvider>
    );
  }

  if (pageMode === "create" || pageMode === "edit") {
    return (
      <DndProvider backend={SingletonHTML5Backend}>
      <PageLayout>
        <div className="mb-6">
          <Button
            variant="outline"
            size="sm"
            onClick={() => {
              setPageMode("list");
              resetForm();
            }}
          >
            목록으로
          </Button>
        </div>

        <PageHeader
          title={
            pageMode === "create"
              ? "산정 기준 등록"
              : "산정 기준 수정"
          }
          description={
            pageMode === "create"
              ? "새로운 산정 기준을 등록합니다"
              : "기존 산정 기준을 수정합니다"
          }
          icon={Calculator}
        />

        <Card>
          <CardContent className="pt-6">
            <div className="space-y-6">
              {/* 사용 가이드 - 항상 표시 */}
              <div className="bg-gradient-to-r from-blue-50 to-indigo-50 border-2 border-blue-200 rounded-lg p-5 space-y-4">
                <div className="flex items-start gap-3">
                  <Lightbulb className="h-6 w-6 text-blue-600 mt-1 flex-shrink-0" />
                  <div className="flex-1 space-y-4">
                    <div>
                      <h3 className="font-semibold text-blue-900 mb-2">📘 산정 기준 등록 완전 가이드</h3>
                      <p className="text-sm text-blue-800 leading-relaxed">
                        모든 제품 카테고리의 산정 공식을 등록할 수 있습니다. 기준 유형, 단계 설정, 매핑 조건을 통해 복잡한 산정 로직도 구현 가능합니다.
                      </p>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                      {/* 기준 유형 설명 */}
                      <div className="bg-white/80 backdrop-blur rounded-lg p-3 border border-blue-200">
                        <h4 className="text-sm font-semibold text-gray-900 mb-2">1️⃣ 기준 유형</h4>
                        <ul className="text-xs text-gray-700 space-y-1.5">
                          <li>• <strong>범위(Range):</strong> 구간별 품목/수량 지정</li>
                          <li className="text-purple-700">예: 제작길이 0~1000 → 품목A 2개</li>
                          <li>• <strong>수식(Formula):</strong> 계산 공식</li>
                          <li className="text-purple-700">예: W1 * H1 / 1000000</li>
                          <li>• <strong>고정값(Fixed):</strong> 항상 같은 값</li>
                          <li className="text-purple-700">예: 연기차단재 항상 2개</li>
                        </ul>
                      </div>

                      {/* 단계 설정 설명 */}
                      <div className="bg-white/80 backdrop-blur rounded-lg p-3 border border-blue-200">
                        <h4 className="text-sm font-semibold text-gray-900 mb-2">2️⃣ 단계 설정</h4>
                        <ul className="text-xs text-gray-700 space-y-1.5">
                          <li>• <strong>중간 단계 규칙:</strong> 다음 단계로 전달</li>
                          <li className="text-orange-700">1단계: W1 → 샤프트 규격 결정</li>
                          <li className="text-orange-700">2단계: 규격 → 품목/수량 산출</li>
                          <li className="text-orange-700">3단계: 추가 조건으로 세분화</li>
                          <li>• <strong>최종 규칙:</strong> 결과만 반환</li>
                        </ul>
                      </div>

                      {/* 다단계 매핑 설명 */}
                      <div className="bg-white/80 backdrop-blur rounded-lg p-3 border border-blue-200">
                        <h4 className="text-sm font-semibold text-gray-900 mb-2">3️⃣ 다단계 매핑</h4>
                        <ul className="text-xs text-gray-700 space-y-1.5">
                          <li>• <strong className="text-green-600">추천:</strong> "다단계 규칙 생성" 버튼 사용</li>
                          <li className="text-green-700">→ 모든 단계를 한 번에 입력하고 저장</li>
                          <li className="mt-2">• <strong>개별 등록:</strong> 단계별로 따로 저장</li>
                          <li className="text-blue-700">→ 하위 단계 먼저 생성 후 상위 매핑</li>
                        </ul>
                      </div>
                    </div>

                    {/* 실전 예시 */}
                    <div className="bg-gradient-to-r from-purple-100 to-pink-100 rounded-lg p-4 border-2 border-purple-300">
                      <h4 className="text-sm font-semibold text-purple-900 mb-3">💡 실전 예시</h4>
                      <div className="space-y-3">
                        <div>
                          <p className="text-xs font-semibold text-purple-800 mb-1">📌 다단계 프로세스: 감기샤프트</p>
                          <div className="space-y-1 text-xs text-purple-900 ml-2">
                            <div className="flex items-center gap-2">
                              <Badge className="bg-purple-600 text-xs">1단계</Badge>
                              <span>제작사이즈(W1) → 샤프트 규격 결정 (4"/5"/6")</span>
                            </div>
                            <div className="flex items-center gap-2">
                              <Badge className="bg-purple-600 text-xs">2단계</Badge>
                              <span>샤프트 규격 + W0 → 메인/보조 샤프트 품목</span>
                            </div>
                          </div>
                        </div>
                        <div>
                          <p className="text-xs font-semibold text-purple-800 mb-1">📦 품목 조건: 브라케트</p>
                          <div className="space-y-1 text-xs text-purple-900 ml-2">
                            <div>• 조건 소스: <Badge variant="outline" className="text-xs mx-1">품목</Badge></div>
                            <div>• 모터 150K 선택 시 → 브라케트 380×180</div>
                            <div>• 모터 300K 선택 시 → 브라케트 530×320</div>
                          </div>
                        </div>
                      </div>
                    </div>

                    {/* 주의사항 */}
                    <div className="bg-green-50 border border-green-300 rounded-lg p-3">
                      <p className="text-xs text-green-900">
                        <strong>💡 팁:</strong> 다단계 규칙은 <strong className="text-green-700">"다단계 규칙 생성"</strong> 버튼을 사용하면 
                        모든 단계를 한 번에 입력하고 저장할 수 있습니다! 개별 등록 시에만 하위 단계를 먼저 생성해야 합니다.
                      </p>
                    </div>
                  </div>
                </div>
              </div>

              {/* Validation Error Summary */}
              <ValidationErrorSummary errors={validationErrors} />

              {pageMode === "edit" && selectedRule && (
                <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                  <p className="text-sm">
                    <strong>{selectedRule.ruleName}</strong> (
                    {selectedRule.ruleCode})
                  </p>
                  <p className="text-xs text-gray-600 mt-1">
                    {selectedRule.description}
                  </p>
                </div>
              )}

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label>규칙 코드 *</Label>
                  <Input
                    value={ruleForm.ruleCode}
                    onChange={(e) => {
                      setRuleForm({
                        ...ruleForm,
                        ruleCode: e.target.value,
                      });
                      clearFieldError('ruleCode');
                    }}
                    placeholder="예: MOTOR-SCREEN-4"
                    disabled={pageMode === "edit"}
                    className={getFieldErrorClass(validationErrors, 'ruleCode')}
                  />
                  <p className="text-xs text-muted-foreground mt-1">
                    고유한 규칙 식별 코드 (대문자, 하이픈 사용 권장)
                  </p>
                </div>
                <div>
                  <Label>규칙명 *</Label>
                  <Input
                    value={ruleForm.ruleName}
                    onChange={(e) => {
                      setRuleForm({
                        ...ruleForm,
                        ruleName: e.target.value,
                      });
                      clearFieldError('ruleName');
                    }}
                    placeholder="예: 모터 용량 - 스크린 4인치"
                    disabled={pageMode === "edit"}
                    className={getFieldErrorClass(validationErrors, 'ruleName')}
                  />
                  <p className="text-xs text-muted-foreground mt-1">
                    알기 쉬운 규칙 이름 (목록에 표시됨)
                  </p>
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                  <Label>제품 카테고리</Label>
                  <Select
                    value={ruleForm.category}
                    onValueChange={(v: any) =>
                      setRuleForm({ ...ruleForm, category: v })
                    }
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="스크린">
                        스크린
                      </SelectItem>
                      <SelectItem value="철재">철재</SelectItem>
                      <SelectItem value="공통">공통</SelectItem>
                    </SelectContent>
                  </Select>
                  <p className="text-xs text-muted-foreground mt-1">
                    스크린/철재 구분 또는 공통 적용
                  </p>
                </div>

                <div>
                  <Label>기준 유형 <span className="text-red-500">*</span></Label>
                  <Select
                    value={ruleForm.ruleType}
                    onValueChange={(v: any) =>
                      setRuleForm({ ...ruleForm, ruleType: v })
                    }
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="range">
                        📊 범위(Range) - 구간별 매핑
                      </SelectItem>
                      <SelectItem value="formula">
                        🧮 수식(Formula) - 계산식
                      </SelectItem>
                      <SelectItem value="fixed">
                        📌 고정값(Fixed) - 상수
                      </SelectItem>
                    </SelectContent>
                  </Select>
                  <p className="text-xs text-muted-foreground mt-1">
                    {ruleForm.ruleType === 'range' && '구간별로 다른 품목/수량 지정'}
                    {ruleForm.ruleType === 'formula' && '수학 공식으로 값 계산'}
                    {ruleForm.ruleType === 'fixed' && '항상 동일한 값 사용'}
                    {!ruleForm.ruleType && '산정 방식을 선택하세요'}
                  </p>
                </div>

                <div>
                  <Label>입력 변수</Label>
                  <Input
                    value={ruleForm.inputVariable}
                    onChange={(e) =>
                      setRuleForm({
                        ...ruleForm,
                        inputVariable: e.target.value,
                      })
                    }
                    placeholder="예: W0, W1, H1, area, weight"
                  />
                  <p className="text-xs text-muted-foreground mt-1">
                    조건 판단에 사용할 변수 (W0, W1, H1, K 등)
                  </p>
                </div>
              </div>

              {/* 중간 단계 규칙 설정 - 아토믹 컴포넌트 사용 */}
              <StageRuleInput
                isIntermediateRule={ruleForm.isStage1 || false}
                onIsIntermediateRuleChange={(value) =>
                  setRuleForm({
                    ...ruleForm,
                    isStage1: value,
                  })
                }
                stageLevel={ruleForm.stageLevel || 1}
                onStageLevelChange={(value) =>
                  setRuleForm({
                    ...ruleForm,
                    stageLevel: value,
                  })
                }
                intermediateResultType={ruleForm.stage1ResultType || 'specification'}
                onIntermediateResultTypeChange={(value) =>
                  setRuleForm({
                    ...ruleForm,
                    stage1ResultType: value,
                  })
                }
                currentMaxStageLevel={currentMaxStageLevel}
              />

              <div>
                <Label>단위</Label>
                <Select
                  value={ruleForm.unit}
                  onValueChange={(value) =>
                    setRuleForm({
                      ...ruleForm,
                      unit: value,
                    })
                  }
                >
                  <SelectTrigger>
                    <SelectValue placeholder="단위를 선택하세요" />
                  </SelectTrigger>
                  <SelectContent>
                    {availableUnits.map((unit) => (
                      <SelectItem key={unit} value={unit}>
                        {unit}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              {/* 범위 타입 */}
              {ruleForm.ruleType === "range" && (
                <div className="border-t pt-4">
                  {/* 복합 조건 안내 */}
                  <div className="mb-3 p-3 bg-gradient-to-r from-purple-50 to-blue-50 border border-purple-200 rounded-lg">
                    <p className="text-xs text-purple-800 mb-2">
                      <strong>💡 다중 조건 지원:</strong> 각 범위에 여러 개의 추가 조건을 등록할 수 있습니다.
                    </p>
                    <div className="text-xs text-purple-700 space-y-1">
                      <p>• <strong>AND 조건:</strong> 모든 조건을 만족해야 함 (교집합)</p>
                      <p>• <strong>OR 조건:</strong> 하나라도 만족하면 됨 (합집합)</p>
                      <p>• 예시: W1(1000~2000) <Badge variant="default" className="bg-purple-600 text-white text-xs mx-1">AND</Badge> K≤400 <Badge variant="default" className="bg-orange-500 text-white text-xs mx-1">OR</Badge> weight≤500</p>
                    </div>
                  </div>

                  <div className="flex items-center justify-between mb-3">
                    <Label>범위 조건</Label>
                    <Button
                      type="button"
                      variant="outline"
                      size="sm"
                      onClick={addRange}
                    >
                      <Plus className="h-3 w-3 mr-1" />
                      범위 추가
                    </Button>
                  </div>

                  {/* 가이드레일 산정 기준 안내 */}
                  {ruleForm.ruleCode.startsWith("GR-MATERIAL") && (
                    <div className="mb-3 p-3 bg-blue-50 border border-blue-200 rounded-lg">
                      <p className="text-xs text-blue-800">
                        <strong>💡 가이드레일 산정 기준:</strong> 제작길이(G) 구간별로 필요한 가이드레일 품목을 
                        품목리스트에서 선택하고 수량을 입력하세요. 하나의 구간에 여러 품목을 등록할 수 있습니다.
                      </p>
                    </div>
                  )}

                  <div className="space-y-4">
                    {editingRanges.map((range, index) => (
                      <RangeRuleCard
                        key={range.id}
                        range={range}
                        index={index}
                        isStage1={ruleForm.isStage1 || false}
                        stage1ResultType={ruleForm.stage1ResultType}
                        itemMasters={itemMasters}
                        onUpdateRange={updateRange}
                        onDeleteRange={deleteRange}
                        onAddItem={addRangeItem}
                        onUpdateItem={updateRangeItem}
                        onDeleteItem={deleteRangeItem}
                      />
                    ))}
                    {editingRanges.length === 0 && (
                      <p className="text-sm text-gray-500 text-center py-4">
                        범위 추가 버튼을 클릭하여 범위를 등록하세요.
                      </p>
                    )}
                  </div>
                </div>
              )}

              {/* 수식 타입 */}
              {ruleForm.ruleType === "formula" && (
                <div className="border-t pt-4">
                  <Label>계산 수식</Label>
                  <Textarea
                    value={ruleForm.formula}
                    onChange={(e) =>
                      setRuleForm({
                        ...ruleForm,
                        formula: e.target.value,
                      })
                    }
                    placeholder="예: W1 * H1 / 1000000 (변수: W1, H1, area, weight 등)"
                    rows={3}
                    className="font-mono"
                  />
                  <p className="text-xs text-gray-500 mt-1">
                    사용 가능한 함수: CEIL(올림), FLOOR(내림), ROUND(반올림), IF(조건, 참, 거짓)
                  </p>
                </div>
              )}

              {/* 고정값 타입 */}
              {ruleForm.ruleType === "fixed" && (
                <div className="border-t pt-4">
                  <Label>고정값</Label>
                  <Input
                    type="number"
                    value={ruleForm.fixedValue || ""}
                    onChange={(e) =>
                      setRuleForm({
                        ...ruleForm,
                        fixedValue: parseFloat(e.target.value) || 0,
                      })
                    }
                    placeholder="예: 150"
                  />
                </div>
              )}

              {/* 다음 단계 매핑 설정 (중간 단계 규칙인 경우에만) */}
              {ruleForm.isStage1 && (
                <div className="border-t pt-4">
                  <NextStageMappingEditor
                    currentRule={ruleForm as any}
                    currentStageLevel={ruleForm.stageLevel || 1}
                    conditions={stage2MappingConditions}
                    onConditionsChange={setStage2MappingConditions}
                    availableNextStageRules={formulaRules.filter(r => 
                      r.isStage1 && 
                      r.stageLevel === (ruleForm.stageLevel || 1) + 1 && 
                      r.status === 'active'
                    )}
                  />
                </div>
              )}

              <div className="flex justify-end gap-2 pt-4 border-t">
                <Button
                  variant="outline"
                  onClick={() => {
                    setPageMode("list");
                    resetForm();
                  }}
                >
                  취소
                </Button>
                <Button
                  onClick={
                    selectedRule ? handleUpdateRule : handleCreateRule
                  }
                >
                  {selectedRule ? "수정" : "등록"}
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>
      </PageLayout>
      </DndProvider>
    );
  }

  // 목록 페이지 렌더링
  return (
    <DndProvider backend={SingletonHTML5Backend}>
      <PageLayout>
        <PageHeader
          title="산정 기준 관리"
          description="품목별 자동 산출 기준 및 수식 관리 (층수, 오픈사이즈 입력 → 모든 부자재 자동 계산)"
          icon={Calculator}
        />

      <StatCards
        stats={stats}
        className="mb-6"
      />

      {/* 규칙 의존성 시각화 & 사용 가이드 - 전체 통합 */}
      <div className="mb-6">
        <RuleDependencyVisualizer 
          rules={formulaRules} 
          onEditMultiStage={handleEditMultiStageRules}
        />
      </div>

      {/* 기본정보 카테고리별 산정 기준 관리 */}
      <CategoryTabSection
        title="기본정보 카테고리별 산정기준"
        categories={basicCategories}
        setCategories={setBasicCategories}
        activeTab={activeBasicTab}
        setActiveTab={setActiveBasicTab}
        isManaging={isManagingBasicCategories}
        setIsManaging={setIsManagingBasicCategories}
        isAdding={isAddingBasicTab}
        setIsAdding={setIsAddingBasicTab}
        newTabName={newBasicTabName}
        setNewTabName={setNewBasicTabName}
        editingTabId={editingBasicTabId}
        setEditingTabId={setEditingBasicTabId}
        editingTabName={editingBasicTabName}
        setEditingTabName={setEditingBasicTabName}
        handleAddTab={handleAddBasicTab}
        handleEditTab={handleEditBasicTab}
        handleSaveTabEdit={handleSaveBasicTabEdit}
        handleDeleteTab={handleDeleteBasicTab}
        currentRules={currentBasicRules}
      />

      {/* 품목 카테고리별 산정 기준 관리 */}
      <CategoryTabSection
        title="품목 카테고리별 산정기준"
        categories={itemCategories}
        setCategories={setItemCategories}
        activeTab={activeItemTab}
        setActiveTab={setActiveItemTab}
        isManaging={isManagingItemCategories}
        setIsManaging={setIsManagingItemCategories}
        isAdding={isAddingItemTab}
        setIsAdding={setIsAddingItemTab}
        newTabName={newItemTabName}
        setNewTabName={setNewItemTabName}
        editingTabId={editingItemTabId}
        setEditingTabId={setEditingItemTabId}
        editingTabName={editingItemTabName}
        setEditingTabName={setEditingItemTabName}
        handleAddTab={handleAddItemTab}
        handleEditTab={handleEditItemTab}
        handleSaveTabEdit={handleSaveItemTabEdit}
        handleDeleteTab={handleDeleteItemTab}
        currentRules={currentItemRules}
      />

      {/* 견적 산출 영역 */}
      <Card className="mt-6">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Calculator className="h-5 w-5" />
            견적 산출 (자동 계산 시뮬레이터)
          </CardTitle>
        </CardHeader>
        <CardContent>
          <AutoCalculationSimulator
            inputs={inputs}
            setInputs={setInputs}
            onCalculate={handleAutoCalculation}
            validationErrors={validationErrors}
          />

          {calculationResults && (
            <div className="mt-6">
              <FormulaCalculationResults results={calculationResults} />
            </div>
          )}
        </CardContent>
      </Card>
      </PageLayout>
    </DndProvider>
  );
}