import { Slider } from '@/components/base/slider/slider';
import { Select } from '@/components/base/select/select';
import { Toggle } from '@/components/base/toggle/toggle';
import { cx } from '@/utils/cx';

interface WeightSliderRowProps {
    label: string;
    weight: number;
    onWeightChange: (value: number) => void;
    enabled?: boolean;
    onToggle?: (enabled: boolean) => void;
    slaMinutes?: number;
    onSlaChange?: (minutes: number) => void;
    showSla?: boolean;
    className?: string;
}

const SLA_OPTIONS = [
    { id: '60', label: '1h' },
    { id: '240', label: '4h' },
    { id: '720', label: '12h' },
    { id: '1440', label: '1d' },
    { id: '2880', label: '2d' },
    { id: '4320', label: '3d' },
];

export const WeightSliderRow = ({
    label,
    weight,
    onWeightChange,
    enabled = true,
    onToggle,
    slaMinutes,
    onSlaChange,
    showSla = false,
    className,
}: WeightSliderRowProps) => {
    return (
        <div className={cx('flex items-center gap-4 py-3', !enabled && 'opacity-40', className)}>
            {onToggle && (
                <Toggle size="sm" isSelected={enabled} onChange={onToggle} />
            )}
            <div className="w-36 shrink-0">
                <span className="text-sm font-medium text-primary">{label}</span>
            </div>
            <div className="flex-1 min-w-[140px]">
                <Slider
                    minValue={0}
                    maxValue={10}
                    step={1}
                    value={weight}
                    onChange={(v) => onWeightChange(v as number)}
                    isDisabled={!enabled}
                    formatOptions={{ style: 'decimal', maximumFractionDigits: 0 }}
                />
            </div>
            <div className="w-8 text-center">
                <span className={cx('text-sm font-bold tabular-nums', weight >= 8 ? 'text-error-primary' : weight >= 5 ? 'text-warning-primary' : 'text-tertiary')}>
                    {weight}
                </span>
            </div>
            {showSla && slaMinutes != null && onSlaChange && (
                <div className="w-20 shrink-0">
                    <Select
                        size="sm"
                        placeholder="SLA"
                        items={SLA_OPTIONS}
                        selectedKey={String(slaMinutes)}
                        onSelectionChange={(key) => onSlaChange(Number(key))}
                        isDisabled={!enabled}
                    >
                        {(item) => <Select.Item id={item.id}>{item.label}</Select.Item>}
                    </Select>
                </div>
            )}
        </div>
    );
};
