import React from 'react';
import { Slider } from "@/components/ui/slider";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import * as Label from '@radix-ui/react-label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { ModelOptionLabel } from "@/components/common/ModelOptionLabel";

export const LabelText = ({ children, htmlFor, required }: { children: React.ReactNode; htmlFor?: string; required?: boolean }) => (
    <Label.Root 
        htmlFor={htmlFor}
        className="text-[10px] text-muted-foreground font-medium uppercase tracking-wider block mb-1.5"
    >
        {children}
        {required && <span className="text-red-500 ml-1">*</span>}
    </Label.Root>
);

export function RangeControl({ 
  label, 
  defaultValue, 
  value,
  min = 0, 
  max = 100,
  step = 1,
  onChange 
}: { 
  label: string; 
  defaultValue?: number; 
  value?: number;
  min?: number; 
  max?: number;
  step?: number;
  onChange?: (value: number) => void;
}) {
  const currentValue = value !== undefined ? value : defaultValue || min;

  return (
    <div className="space-y-1.5">
      <div className="flex justify-between text-[11px]">
        <LabelText>{label}</LabelText>
        <span className="text-foreground font-mono">{currentValue}</span>
      </div>
      <Slider
        value={[currentValue]}
        min={min}
        max={max}
        step={step}
        onValueChange={(vals) => onChange?.(vals[0])}
        className="py-1"
      />
    </div>
  );
}

export interface SelectOption {
    label: string;
    value: string;
    icon?: React.ReactNode;
    description?: string;
}

export function IconSelectControl({
    label,
    options,
    value,
    onChange,
    id,
    required
}: {
    label: string;
    options: SelectOption[];
    value: string;
    onChange: (value: string) => void;
    id?: string;
    required?: boolean;
}) {
    const generatedId = React.useId();
    const selectId = id || generatedId;

    return (
        <div className="space-y-1.5">
            <LabelText htmlFor={selectId} required={required}>{label}</LabelText>
            <Select value={value} onValueChange={onChange}>
                <SelectTrigger id={selectId} className="w-full !text-[11px] h-8 [&_span.text-muted-foreground]:hidden">
                    <SelectValue />
                </SelectTrigger>
                <SelectContent>
                    {options.map(opt => (
                        <SelectItem key={opt.value} value={opt.value} className="!text-[11px]">
                            <div className="flex items-center gap-2 text-left">
                                {opt.icon && <span className="flex items-center text-base shrink-0">{opt.icon}</span>}
                                <div className="flex flex-col leading-tight">
                                    <span>{opt.label}</span>
                                    {opt.description && <span className="text-[9px] text-muted-foreground font-normal">{opt.description}</span>}
                                </div>
                            </div>
                        </SelectItem>
                    ))}
                </SelectContent>
            </Select>
        </div>
    );
}

export function ModelSelectControl({
    label,
    models,
    value,
    onChange,
    id,
    required,
    placeholder = "请选择..."
}: {
    label: string;
    models: any[];
    value: string;
    onChange: (value: string) => void;
    id?: string;
    required?: boolean;
    placeholder?: string;
}) {
    const generatedId = React.useId();
    const selectId = id || generatedId;

    return (
        <div className="space-y-1.5">
            <LabelText htmlFor={selectId} required={required}>{label}</LabelText>
            <Select value={value} onValueChange={onChange}>
                <SelectTrigger id={selectId} className="w-full !text-[11px] h-8 [&_span.text-muted-foreground]:hidden">
                    <SelectValue placeholder={placeholder} />
                </SelectTrigger>
                <SelectContent>
                    {models.map(model => (
                        <SelectItem key={model.id} value={model.id} className="!text-[11px]">
                             <ModelOptionLabel provider={model.provider} name={model.name} />
                        </SelectItem>
                    ))}
                </SelectContent>
            </Select>
        </div>
    );
}

export function InputControl({ 
    label, 
    value, 
    onChange, 
    placeholder,
    type = "text",
    required
}: { 
    label: string; 
    value: string; 
    onChange: (value: string) => void; 
    placeholder?: string;
    type?: string;
    required?: boolean;
}) {
    const id = React.useId();
    return (
        <div className="space-y-1.5">
            <LabelText htmlFor={id} required={required}>{label}</LabelText>
            <Input 
                id={id}
                type={type}
                value={value} 
                onChange={(e) => onChange(e.target.value)} 
                placeholder={placeholder}
                className="h-8 !text-[11px]"
            />
        </div>
    );
}

export function TextareaControl({ 
    label, 
    value, 
    onChange, 
    placeholder,
    rows = 3,
    required
}: { 
    label: string; 
    value: string; 
    onChange: (value: string) => void; 
    placeholder?: string;
    rows?: number;
    required?: boolean;
}) {
    const id = React.useId();
    return (
        <div className="space-y-1.5">
            <LabelText htmlFor={id} required={required}>{label}</LabelText>
            <Textarea 
                id={id}
                value={value} 
                onChange={(e) => onChange(e.target.value)} 
                placeholder={placeholder}
                rows={rows}
                className="!text-[11px] resize-none"
            />
        </div>
    );
}

export function SelectControl({ 
    label, 
    options, 
    value, 
    onChange,
    id,
    required
}: { 
    label: string; 
    options: { label: string; value: string }[]; 
    value: string; 
    onChange: (value: string) => void;
    id?: string;
    required?: boolean;
}) {
    const generatedId = React.useId();
    const selectId = id || generatedId;

    return (
        <div className="space-y-1.5">
            <LabelText htmlFor={selectId} required={required}>{label}</LabelText>
            <Select value={value} onValueChange={onChange}>
                <SelectTrigger id={selectId} className="w-full !text-[11px] h-8">
                    <SelectValue />
                </SelectTrigger>
                <SelectContent>
                    {options.map(opt => (
                        <SelectItem key={opt.value} value={opt.value} className="!text-[11px]">
                            {opt.label}
                        </SelectItem>
                    ))}
                </SelectContent>
            </Select>
        </div>
    );
}
