/**
 * 통합 폼 템플릿 V3 사용 예제
 * 품목관리 상세 페이지와 동일한 구조를 템플릿으로 구현
 */

import { Package, FileImage, History, ArrowLeft, Edit, Trash2, Copy } from "lucide-react";
import { IntegratedFormTemplateV3, IntegratedFormTemplateV3Config } from "../templates/IntegratedFormTemplateV3";
import { Badge } from "../ui/badge";
import { Button } from "../ui/button";

export function IntegratedFormTemplateV3Example() {
  // 샘플 데이터
  const sampleData = {
    itemCode: "FG-GUIDE-R-ST-1800-V2",
    itemName: "가이드레일 조립품",
    itemType: "완제품",
    partType: "조립 부품",
    specification: "1800 × 120 × 50",
    unit: "SET",
    material: "STS304",
    finishType: "헤어라인",
    description: "방화문용 가이드레일 시스템",
    currentRevision: 2,
    createdAt: "2024-01-15",
    updatedBy: "김철수",
    certificationNumber: "FD-2024-001",
  };

  // 액션 버튼 그룹
  const actions = (
    <div className="flex gap-2">
      <Button variant="outline" size="sm">
        <ArrowLeft className="h-4 w-4 mr-1" />
        목록
      </Button>
      <Button variant="outline" size="sm">
        <Edit className="h-4 w-4 mr-1" />
        수정
      </Button>
      <Button variant="outline" size="sm">
        <Copy className="h-4 w-4 mr-1" />
        복사
      </Button>
      <Button variant="destructive" size="sm">
        <Trash2 className="h-4 w-4 mr-1" />
        삭제
      </Button>
    </div>
  );

  // 템플릿 설정
  const templateConfig: IntegratedFormTemplateV3Config = {
    // 헤더 설정
    header: {
      title: "품목 상세 정보",
      description: "등록된 품목 정보를 확인합니다",
      icon: Package,
      actions: actions,
    },

    // 버전 관리 설정
    versionControl: {
      currentRevision: sampleData.currentRevision,
      revisions: [
        { updatedAt: "2024-01-15", description: "초기 등록" },
        { updatedAt: "2024-02-20", description: "규격 변경" },
      ],
      selectedRevision: "current",
      onRevisionChange: (revision) => console.log("버전 변경:", revision),
      itemType: "품목",
      versionHistory: [
        {
          id: "1",
          version: 1,
          changeDescription: "초기 등록",
          changedBy: "김철수",
          changedAt: "2024-01-15T09:00:00Z",
        },
        {
          id: "2",
          version: 2,
          changeDescription: "규격 변경 및 마감재 업데이트",
          changedBy: "이영희",
          changedAt: "2024-02-20T14:30:00Z",
        },
      ],
    },

    // 정보 섹션들
    sections: [
      // 기본 정보 섹션
      {
        id: "basic-info",
        title: "기본 정보",
        icon: Package,
        gridCols: {
          default: 1,
          md: 2,
          lg: 3,
        },
        fields: [
          {
            label: "품목코드",
            value: sampleData.itemCode,
            type: "code",
          },
          {
            label: "품목명",
            value: sampleData.itemName,
          },
          {
            label: "품목유형",
            value: (
              <Badge variant="outline" className="bg-blue-50 text-blue-700">
                {sampleData.itemType}
              </Badge>
            ),
            type: "badge",
          },
          {
            label: "부품 유형",
            value: (
              <Badge variant="outline" className="bg-purple-50 text-purple-700">
                {sampleData.partType}
              </Badge>
            ),
            type: "badge",
          },
          {
            label: "규격",
            value: sampleData.specification,
          },
          {
            label: "단위",
            value: <Badge variant="secondary">{sampleData.unit}</Badge>,
            type: "badge",
          },
          {
            label: "재질",
            value: (
              <Badge variant="outline" className="bg-green-50 text-green-700">
                {sampleData.material}
              </Badge>
            ),
            type: "badge",
          },
          {
            label: "마감",
            value: (
              <Badge variant="outline" className="bg-blue-50 text-blue-700">
                {sampleData.finishType}
              </Badge>
            ),
            type: "badge",
          },
          {
            label: "비고",
            value: sampleData.description,
            span: 3,
          },
        ],
      },

      // 조립 부품 세부 정보
      {
        id: "assembly-details",
        title: "조립 부품 세부 정보",
        icon: Package,
        gridCols: {
          default: 1,
          md: 2,
          lg: 4,
        },
        fields: [
          {
            label: "품목명",
            value: (
              <Badge variant="outline" className="bg-indigo-50 text-indigo-700">
                가이드레일
              </Badge>
            ),
            type: "badge",
          },
          {
            label: "설치 유형",
            value: (
              <Badge variant="outline" className="bg-green-50 text-green-700">
                벽면형 (R)
              </Badge>
            ),
            type: "badge",
          },
          {
            label: "마감",
            value: "ST (스테인리스)",
            type: "code",
          },
          {
            label: "길이",
            value: "1800mm",
          },
        ],
      },

      // 인정 정보
      {
        id: "certification-info",
        title: "인정 정보",
        gridCols: {
          default: 1,
          md: 2,
        },
        fields: [
          {
            label: "인정번호",
            value: sampleData.certificationNumber,
          },
          {
            label: "인정 유효기간",
            value: "2024-01-01 ~ 2027-12-31",
          },
          {
            label: "시방서",
            value: (
              <Badge variant="outline" className="bg-blue-50 text-blue-700">
                시방서_가이드레일_v2.pdf
              </Badge>
            ),
            type: "badge",
          },
          {
            label: "인정서",
            value: (
              <Badge variant="outline" className="bg-green-50 text-green-700">
                인정서_FD-2024-001.pdf
              </Badge>
            ),
            type: "badge",
          },
        ],
      },

      // 버전 정보
      {
        id: "version-info",
        title: "버전 정보",
        gridCols: {
          default: 1,
          md: 3,
        },
        fields: [
          {
            label: "현재 버전",
            value: <Badge variant="secondary">V{sampleData.currentRevision}</Badge>,
            type: "badge",
          },
          {
            label: "수정 횟수",
            value: "2회",
          },
          {
            label: "등록일",
            value: sampleData.createdAt,
          },
        ],
      },
    ],

    // 테이블 섹션들
    tableSections: [
      {
        id: "bom-table",
        title: "BOM 구성 (자재 명세서)",
        icon: FileImage,
        columns: [
          { key: "seq", label: "순번", width: "60px" },
          { key: "itemCode", label: "품목코드", width: "150px" },
          { key: "itemName", label: "품목명" },
          { key: "specification", label: "규격" },
          { key: "quantity", label: "수량", width: "80px" },
          { key: "unit", label: "단위", width: "60px" },
        ],
        data: [
          {
            seq: 1,
            itemCode: "PT-RAIL-001",
            itemName: "메인 레일",
            specification: "1800 × 50 × 30",
            quantity: 2,
            unit: "EA",
          },
          {
            seq: 2,
            itemCode: "PT-BRACKET-002",
            itemName: "고정 브라켓",
            specification: "80 × 60 × 5",
            quantity: 4,
            unit: "EA",
          },
          {
            seq: 3,
            itemCode: "PT-BOLT-M8",
            itemName: "볼트",
            specification: "M8 × 40",
            quantity: 16,
            unit: "EA",
          },
        ],
        responsive: true,
        headerBadge: <Badge variant="secondary">3개 품목</Badge>,
      },
    ],

    // 이미지 갤러리
    imageGallery: {
      title: "제품 이미지 및 도면",
      icon: FileImage,
      columns: {
        default: 1,
        md: 2,
        lg: 3,
      },
      images: [
        {
          id: "1",
          url: "https://images.unsplash.com/photo-1581094794329-c8112a89af12?w=400",
          alt: "제품 정면",
          caption: "제품 정면 사진",
        },
        {
          id: "2",
          url: "https://images.unsplash.com/photo-1581092918484-8313e1f7e8d1?w=400",
          alt: "제품 측면",
          caption: "제품 측면 사진",
        },
        {
          id: "3",
          url: "https://images.unsplash.com/photo-1581092795360-fd1ca04f0952?w=400",
          alt: "설치 예시",
          caption: "실제 설치 예시",
        },
      ],
    },

    maxWidth: "default",
  };

  return <IntegratedFormTemplateV3 config={templateConfig} />;
}

export default IntegratedFormTemplateV3Example;
