/**
 * 품목 수식 맵핑 관리 페이지
 * ItemPriceMappingManager를 PageLayout으로 감싼 페이지 컴포넌트
 */

import { useState, useEffect } from "react";
import { PageLayout } from "./organisms/PageLayout";
import { PageHeader } from "./organisms/PageHeader";
import { ItemPriceMappingManager } from "./ItemPriceMappingManager";
import { useData } from "./contexts/DataContext";
import { Tag } from "lucide-react";

interface PriceMappingItem {
  id: string;
  itemId: string;
  itemName: string;
  categoryOrGroup: string;
  type: "category" | "group";
  createdAt: string;
  updatedAt?: string;
}

export function ItemPriceMappingPage() {
  const { formulas } = useData();
  const [priceMappingItems, setPriceMappingItems] = useState<PriceMappingItem[]>([]);

  // localStorage에서 맵핑 데이터 로드
  useEffect(() => {
    const savedMappings = localStorage.getItem("priceMappingItems");
    if (savedMappings) {
      setPriceMappingItems(JSON.parse(savedMappings));
    }
  }, []);

  // 맵핑 데이터 저장
  useEffect(() => {
    localStorage.setItem("priceMappingItems", JSON.stringify(priceMappingItems));
  }, [priceMappingItems]);

  return (
    <PageLayout>
      <PageHeader
        title="품목 수식 맵핑"
        description="품목별로 적용할 단가 수식 카테고리 또는 분류를 지정합니다"
        icon={Tag}
      />

      <div className="space-y-6">
        <ItemPriceMappingManager
          formulas={formulas}
          mappings={priceMappingItems}
          onMappingsChange={setPriceMappingItems}
        />
      </div>
    </PageLayout>
  );
}
