import React from "react";
import { Label } from "./ui/label";
import { Input } from "./ui/input";
import { Checkbox } from "./ui/checkbox";
import { Badge } from "./ui/badge";

interface SecondaryConditionInputProps {
  hasSecondaryCondition?: boolean;
  secondaryVariable?: string;
  secondaryMinValue?: number;
  secondaryMaxValue?: number;
  onHasSecondaryConditionChange: (checked: boolean) => void;
  onSecondaryVariableChange: (value: string) => void;
  onSecondaryMinValueChange: (value: number) => void;
  onSecondaryMaxValueChange: (value: number) => void;
}

export function SecondaryConditionInput({
  hasSecondaryCondition,
  secondaryVariable,
  secondaryMinValue,
  secondaryMaxValue,
  onHasSecondaryConditionChange,
  onSecondaryVariableChange,
  onSecondaryMinValueChange,
  onSecondaryMaxValueChange,
}: SecondaryConditionInputProps) {
  return (
    <div className="border-t mt-3 pt-3 space-y-3">
      <div className="flex items-center space-x-2">
        <Checkbox
          id="has-secondary-condition"
          checked={hasSecondaryCondition || false}
          onCheckedChange={onHasSecondaryConditionChange}
        />
        <label
          htmlFor="has-secondary-condition"
          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
        >
          2차 조건 추가 <Badge variant="outline" className="ml-1 bg-purple-50 text-purple-700">복합조건</Badge>
        </label>
      </div>

      {hasSecondaryCondition && (
        <div className="pl-6 space-y-3 border-l-2 border-purple-200 bg-purple-50/30 p-3 rounded-r">
          <div className="grid grid-cols-3 gap-2">
            <div>
              <Label className="text-xs text-purple-700">2차 변수</Label>
              <Input
                type="text"
                value={secondaryVariable || ""}
                onChange={(e) => onSecondaryVariableChange(e.target.value)}
                placeholder="K"
                className="h-8 text-sm"
              />
            </div>
            <div>
              <Label className="text-xs text-purple-700">2차 최소값</Label>
              <Input
                type="number"
                value={secondaryMinValue ?? ""}
                onChange={(e) => onSecondaryMinValueChange(parseFloat(e.target.value) || 0)}
                placeholder="0"
                className="h-8 text-sm"
              />
            </div>
            <div>
              <Label className="text-xs text-purple-700">2차 최대값</Label>
              <Input
                type="number"
                value={secondaryMaxValue ?? ""}
                onChange={(e) => onSecondaryMaxValueChange(parseFloat(e.target.value) || 0)}
                placeholder="400"
                className="h-8 text-sm"
              />
            </div>
          </div>
          <p className="text-xs text-purple-600 italic">
            💡 예: W1 구간과 함께 K(산출중량) ≤ 400 조건 추가
          </p>
        </div>
      )}
    </div>
  );
}
