"use client";

import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import type { McpEnvVar } from "@/lib/api/settings";

type Props = {
  spec: McpEnvVar;
  value: string;
  onChange: (v: string) => void;
  disabled?: boolean;
};

export function EnvVarEditor({ spec, value, onChange, disabled }: Props) {
  if (spec.type === "bool") {
    const checked = value === "true";
    return (
      <Switch
        checked={checked}
        onCheckedChange={(c) => onChange(c ? "true" : "false")}
        disabled={disabled}
      />
    );
  }

  if (spec.enum_values && spec.enum_values.length > 0) {
    return (
      <Select value={value} onValueChange={onChange} disabled={disabled}>
        <SelectTrigger className="w-[220px]">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          {spec.enum_values.map((v) => (
            <SelectItem key={v} value={v}>
              {v}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    );
  }

  if (spec.type === "int" || spec.type === "float") {
    return (
      <Input
        type="number"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        min={spec.min ?? undefined}
        max={spec.max ?? undefined}
        step={spec.type === "float" ? "0.01" : "1"}
        disabled={disabled}
        className="w-[160px] text-start"
        dir="ltr"
      />
    );
  }

  return (
    <Input
      type="text"
      value={value}
      onChange={(e) => onChange(e.target.value)}
      disabled={disabled}
      className="w-[260px] text-start"
      dir="ltr"
    />
  );
}