import { Label } from "./ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
import { getFieldOptions, getFieldOptionMapping, isFieldRequired } from "./DynamicFieldOptionsHelper";
import type { ItemMasterField } from "./contexts/DataContext";

interface DynamicSelectFieldProps {
  label: string;
  fieldKey: string;
  value: string;
  onChange: (value: string) => void;
  itemMasterFields: ItemMasterField[];
  placeholder?: string;
  disabled?: boolean;
  error?: string;
  clearError?: () => void;
  required?: boolean; // 명시적 필수 여부 (우선순위 높음)
  fallbackOptions?: string[]; // 품목기준관리에 옵션이 없을 때 사용할 기본 옵션
}

/**
 * 품목기준관리의 옵션을 동적으로 사용하는 Select 필드
 * 품목기준관리에 값이 추가되면 자동으로 반영됨
 */
export function DynamicSelectField({
  label,
  fieldKey,
  value,
  onChange,
  itemMasterFields,
  placeholder,
  disabled = false,
  error,
  clearError,
  required,
  fallbackOptions = []
}: DynamicSelectFieldProps) {
  // 품목기준관리에서 옵션 가져오기
  const masterOptions = getFieldOptions(itemMasterFields, fieldKey);
  const optionMapping = getFieldOptionMapping(itemMasterFields, fieldKey);
  
  // 옵션이 없으면 fallback 사용
  const options = masterOptions.length > 0 ? masterOptions : fallbackOptions;
  
  // 필수 여부 확인 (명시적 required가 없으면 품목기준관리에서 가져오기)
  const isRequired = required !== undefined 
    ? required 
    : isFieldRequired(itemMasterFields, fieldKey);

  // 옵션이 하나도 없으면 경고 메시지 표시
  if (options.length === 0) {
    return (
      <div className="space-y-2">
        <Label>
          {label}
          {isRequired && <span className="text-destructive ml-1">*</span>}
        </Label>
        <div className="text-sm text-muted-foreground border rounded-md p-3 bg-muted/50">
          품목기준관리에서 "{label}" 항목의 선택 옵션을 추가해주세요.
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-2">
      <Label>
        {label}
        {isRequired && <span className="text-destructive ml-1">*</span>}
      </Label>
      <Select
        value={value || undefined}
        onValueChange={(val) => {
          onChange(val);
          if (clearError) clearError();
        }}
        disabled={disabled}
      >
        <SelectTrigger 
          className={error ? "border-red-500" : ""}
          data-error={!!error}
        >
          <SelectValue placeholder={placeholder || `${label} 선택`} />
        </SelectTrigger>
        <SelectContent>
          {options.map((optionValue) => (
            <SelectItem key={optionValue} value={optionValue}>
              {optionMapping && optionMapping[optionValue] 
                ? optionMapping[optionValue] 
                : optionValue}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
      {error && (
        <p className="text-sm text-red-500 mt-1">{error}</p>
      )}
      {masterOptions.length > 0 && (
        <p className="text-xs text-blue-600">
          ✓ 품목기준관리에서 관리되는 항목입니다 ({masterOptions.length}개 옵션)
        </p>
      )}
      {masterOptions.length === 0 && fallbackOptions.length > 0 && (
        <p className="text-xs text-amber-600">
          ⚠ 품목기준관리에서 "{label}" 항목을 추가하면 옵션을 중앙에서 관리할 수 있습니다
        </p>
      )}
    </div>
  );
}

/**
 * 품목기준관리 옵션 + 커스텀 옵션을 함께 사용하는 Select
 * 기존 하드코딩된 값을 유지하면서 품목기준관리 값도 추가로 사용
 */
export function HybridSelectField({
  label,
  fieldKey,
  value,
  onChange,
  itemMasterFields,
  customOptions = [], // 하드코딩된 기존 옵션
  placeholder,
  disabled = false,
  error,
  clearError,
  required
}: DynamicSelectFieldProps & { customOptions?: string[] }) {
  // 품목기준관리에서 옵션 가져오기
  const masterOptions = getFieldOptions(itemMasterFields, fieldKey);
  
  // 중복 제거하여 합치기
  const allOptions = Array.from(new Set([...customOptions, ...masterOptions]));
  
  // 필수 여부 확인
  const isRequired = required !== undefined 
    ? required 
    : isFieldRequired(itemMasterFields, fieldKey);

  return (
    <div className="space-y-2">
      <Label>
        {label}
        {isRequired && <span className="text-destructive ml-1">*</span>}
      </Label>
      <Select
        value={value || undefined}
        onValueChange={(val) => {
          onChange(val);
          if (clearError) clearError();
        }}
        disabled={disabled}
      >
        <SelectTrigger 
          className={error ? "border-red-500" : ""}
          data-error={!!error}
        >
          <SelectValue placeholder={placeholder || `${label} 선택`} />
        </SelectTrigger>
        <SelectContent>
          {allOptions.map((option) => (
            <SelectItem key={option} value={option}>
              {option}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
      {error && (
        <p className="text-sm text-red-500 mt-1">{error}</p>
      )}
      {masterOptions.length > 0 && (
        <p className="text-xs text-blue-600">
          * 품목기준관리에서 관리되는 항목입니다
        </p>
      )}
    </div>
  );
}