import React from "react";
import { Label } from "../ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "../ui/select";

export interface StageRuleInputProps {
  // 중간 단계 규칙 여부
  isIntermediateRule: boolean;
  onIsIntermediateRuleChange: (value: boolean) => void;
  
  // 단계 번호
  stageLevel?: number;
  onStageLevelChange: (value: number) => void;
  
  // 중간 단계 결과 타입
  intermediateResultType?: 'specification' | 'item' | 'quantity' | 'value';
  onIntermediateResultTypeChange: (value: 'specification' | 'item' | 'quantity' | 'value') => void;
  
  // UI 커스터마이징
  currentMaxStageLevel?: number; // 현재 시스템의 최대 단계 번호 (동적 확장용)
  showResultType?: boolean; // 결과 타입 필드 표시 여부 (기본: true)
  className?: string;
}

/**
 * StageRuleInput - 다단계 규칙 설정 입력 컴포넌트
 * 
 * 중간 단계 규칙 여부, 단계 번호, 결과 타입을 설정할 수 있는 UI 컴포넌트
 * FormulaManagement 등 다양한 페이지에서 재사용 가능
 * 
 * @param currentMaxStageLevel - 현재 시스템의 최대 단계 번호를 전달하면 자동으로 (최대값 + 1)단계까지 선택 가능
 *                                예: 3을 전달하면 1,2,3단계 표시 / 5를 전달하면 1,2,3,4,5단계 표시
 */
export function StageRuleInput({
  isIntermediateRule,
  onIsIntermediateRuleChange,
  stageLevel = 1,
  onStageLevelChange,
  intermediateResultType = 'specification',
  onIntermediateResultTypeChange,
  currentMaxStageLevel = 5,
  showResultType = true,
  className = "",
}: StageRuleInputProps) {
  // 동적 단계 생성: 현재 최대 단계 + 1까지 선택 가능
  const maxSelectableStage = currentMaxStageLevel + 1;

  return (
    <div className={className}>
      {/* 중간 단계 규칙 설정 */}
      <div className="grid grid-cols-2 gap-4 border-t pt-4">
        <div className="flex items-center gap-2">
          <input
            type="checkbox"
            id="isIntermediateRule"
            checked={isIntermediateRule}
            onChange={(e) => onIsIntermediateRuleChange(e.target.checked)}
            className="h-4 w-4"
          />
          <Label htmlFor="isIntermediateRule" className="cursor-pointer">
            중간 단계 규칙 (다음 단계에서 사용)
          </Label>
        </div>

        {isIntermediateRule && (
          <div>
            <Label>단계 번호</Label>
            <Select
              value={stageLevel.toString()}
              onValueChange={(value) => onStageLevelChange(parseInt(value))}
            >
              <SelectTrigger>
                <SelectValue placeholder="단계 선택" />
              </SelectTrigger>
              <SelectContent>
                {Array.from({ length: maxSelectableStage }, (_, i) => i + 1).map((level) => (
                  <SelectItem key={level} value={level.toString()}>
                    {level}단계
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        )}
      </div>

      {/* 중간 단계 결과 타입 */}
      {isIntermediateRule && showResultType && (
        <div>
          <Label>중간 단계 결과 타입</Label>
          <Select
            value={intermediateResultType}
            onValueChange={(value: any) => onIntermediateResultTypeChange(value)}
          >
            <SelectTrigger>
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="specification">
                규격 (Specification) - 문자열
              </SelectItem>
              <SelectItem value="item">
                품목 (Item) - 품목코드+품목명
              </SelectItem>
              <SelectItem value="quantity">
                수량 (Quantity) - 숫자
              </SelectItem>
              <SelectItem value="value">
                값 (Value) - 숫자/문자열
              </SelectItem>
            </SelectContent>
          </Select>
        </div>
      )}
    </div>
  );
}