import React, { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
import { StageRuleInput } from "../molecules/StageRuleInput";
import { MultiStageSelector } from "../molecules/MultiStageSelector";

/**
 * StageRuleExample - 다단계 규칙 컴포넌트 사용 예제
 * 
 * 이 컴포넌트는 StageRuleInput과 MultiStageSelector의 사용법을 보여줍니다.
 * 다른 등록 페이지에서 이 패턴을 참고하여 다단계 규칙 설정 기능을 구현할 수 있습니다.
 */
export function StageRuleExample() {
  // StageRuleInput 상태
  const [isIntermediateRule, setIsIntermediateRule] = useState(false);
  const [stageLevel, setStageLevel] = useState(1);
  const [intermediateResultType, setIntermediateResultType] = useState<
    'specification' | 'item' | 'quantity' | 'value'
  >('specification');

  // MultiStageSelector 상태
  const [selectedStageRuleIds, setSelectedStageRuleIds] = useState<string[]>([]);

  // 예제 규칙 목록
  const exampleRules = [
    {
      id: "rule-1",
      ruleCode: "RULE-001",
      ruleName: "1단계 규칙 - 샤프트 규격 선정",
      stageLevel: 1,
      intermediateResultType: 'specification' as const,
    },
    {
      id: "rule-2",
      ruleCode: "RULE-002",
      ruleName: "2단계 규칙 - 보조샤프트 품목 선정",
      stageLevel: 2,
      intermediateResultType: 'item' as const,
    },
    {
      id: "rule-3",
      ruleCode: "RULE-003",
      ruleName: "2단계 규칙 - 메인샤프트 품목 선정",
      stageLevel: 2,
      intermediateResultType: 'item' as const,
    },
    {
      id: "rule-4",
      ruleCode: "RULE-004",
      ruleName: "3단계 규칙 - 수량 계산",
      stageLevel: 3,
      intermediateResultType: 'quantity' as const,
    },
  ];

  // 현재 최대 단계 계산 (실제 앱에서는 DataContext에서 가져옴)
  const currentMaxStageLevel = exampleRules.reduce((max, rule) => 
    Math.max(max, rule.stageLevel), 0
  );

  return (
    <div className="space-y-6 p-6">
      <h1 className="text-2xl font-bold">다단계 규칙 컴포넌트 사용 예제</h1>

      {/* StageRuleInput 예제 */}
      <Card>
        <CardHeader>
          <CardTitle>StageRuleInput 컴포넌트</CardTitle>
        </CardHeader>
        <CardContent>
          <StageRuleInput
            isIntermediateRule={isIntermediateRule}
            onIsIntermediateRuleChange={setIsIntermediateRule}
            stageLevel={stageLevel}
            onStageLevelChange={setStageLevel}
            intermediateResultType={intermediateResultType}
            onIntermediateResultTypeChange={setIntermediateResultType}
            currentMaxStageLevel={currentMaxStageLevel}
          />

          {/* 현재 상태 표시 */}
          <div className="mt-4 p-4 bg-gray-50 rounded-lg">
            <p className="text-sm font-medium mb-2">현재 상태:</p>
            <pre className="text-xs">
              {JSON.stringify(
                {
                  isIntermediateRule,
                  stageLevel,
                  intermediateResultType,
                },
                null,
                2
              )}
            </pre>
          </div>
        </CardContent>
      </Card>

      {/* MultiStageSelector 예제 */}
      <Card>
        <CardHeader>
          <CardTitle>MultiStageSelector 컴포넌트</CardTitle>
        </CardHeader>
        <CardContent>
          <MultiStageSelector
            selectedStageRuleIds={selectedStageRuleIds}
            onSelectedStageRuleIdsChange={setSelectedStageRuleIds}
            availableRules={exampleRules}
            label="연결된 하위 단계 규칙"
            placeholder="규칙을 선택하세요"
          />

          {/* 현재 상태 표시 */}
          <div className="mt-4 p-4 bg-gray-50 rounded-lg">
            <p className="text-sm font-medium mb-2">선택된 규칙 ID:</p>
            <pre className="text-xs">
              {JSON.stringify(selectedStageRuleIds, null, 2)}
            </pre>
          </div>
        </CardContent>
      </Card>

      {/* 사용법 안내 */}
      <Card>
        <CardHeader>
          <CardTitle>사용법</CardTitle>
        </CardHeader>
        <CardContent className="prose max-w-none">
          <h3>StageRuleInput</h3>
          <p>단계 규칙 설정을 위한 입력 컴포넌트입니다.</p>
          <ul>
            <li><code>isIntermediateRule</code>: 중간 단계 규칙 여부</li>
            <li><code>stageLevel</code>: 단계 번호 (1, 2, 3, 4, 5...)</li>
            <li><code>intermediateResultType</code>: 결과 타입 (specification, item, quantity, value)</li>
            <li><code>currentMaxStageLevel</code>: 현재 시스템의 최대 단계 번호 (자동으로 +1 단계까지 선택 가능)</li>
          </ul>
          <div className="bg-blue-50 border-l-4 border-blue-500 p-3 my-3">
            <p className="text-sm"><strong>동적 확장:</strong> 예를 들어 현재 3단계까지 규칙이 있으면, 드롭다운에 1, 2, 3, 4단계가 표시됩니다. 4단계 규칙을 추가하면 다음번에는 5단계까지 선택 가능합니다.</p>
          </div>

          <h3>MultiStageSelector</h3>
          <p>여러 개의 하위 단계 규칙을 선택하고 관리하는 컴포넌트입니다.</p>
          <ul>
            <li><code>selectedStageRuleIds</code>: 선택된 규칙 ID 배열</li>
            <li><code>availableRules</code>: 선택 가능한 규칙 목록</li>
            <li><code>filterByStageLevel</code>: 특정 단계만 필터링</li>
            <li><code>maxSelection</code>: 최대 선택 개수 제한</li>
          </ul>

          <h3>통합 예제 (FormulaManagement 참고)</h3>
          <pre className="bg-gray-100 p-4 rounded text-sm overflow-x-auto">
{`// 1. Import
import { StageRuleInput } from "./molecules/StageRuleInput";
import { MultiStageSelector } from "./molecules/MultiStageSelector";

// 2. State
const [ruleForm, setRuleForm] = useState({
  isStage1: false,
  stageLevel: 1,
  stage1ResultType: 'specification',
  // ... other fields
});

// 3. Usage
<StageRuleInput
  isIntermediateRule={ruleForm.isStage1}
  onIsIntermediateRuleChange={(value) =>
    setRuleForm({ ...ruleForm, isStage1: value })
  }
  stageLevel={ruleForm.stageLevel || 1}
  onStageLevelChange={(value) =>
    setRuleForm({ ...ruleForm, stageLevel: value })
  }
  intermediateResultType={ruleForm.stage1ResultType}
  onIntermediateResultTypeChange={(value) =>
    setRuleForm({ ...ruleForm, stage1ResultType: value })
  }
/>`}
          </pre>
        </CardContent>
      </Card>
    </div>
  );
}