/**
 * HoverScaleControl
 * Canonical editor for hover scale factors (custom-only).
 *
 * Stored as a string (e.g., "1", "1.02", "1.15").
 * NOTE: Per appearance UX rule, we do NOT clamp or enforce min/max in the editor.
 */
import { useMemo } from 'react'
import { t } from '@/lib/i18n'

export interface HoverScaleControlProps {
    label?: string
    value: string | undefined
    onChange: (value: string) => void
    disabled?: boolean
    min?: number
    max?: number
    step?: number
    description?: string
}

type Preset = { value: string; label: string }

function getDefaultPresets(): Preset[] {
    return [
        { value: '1', label: t('None (1x)') },
        { value: '1.02', label: t('Small (1.02x)') },
        { value: '1.05', label: t('Subtle (1.05x)') },
        { value: '1.1', label: t('Medium (1.1x)') },
        { value: '1.15', label: t('Medium+ (1.15x)') },
        { value: '1.2', label: t('Large (1.2x)') },
    ]
}

function formatScale(n: number): string {
    // Keep it readable, but stable.
    const fixed = n.toFixed(2)
    return fixed.replace(/\.?0+$/, '')
}

export function HoverScaleControl({
    label = t('Hover Scale'),
    value,
    onChange,
    disabled = false,
    step = 0.01,
    description,
}: HoverScaleControlProps) {
    const raw = (typeof value === 'string' && value.trim()) ? value.trim() : '1'
    const num = Number.parseFloat(raw)
    const safeNum = Number.isFinite(num) ? num : 1
    const safeStr = formatScale(safeNum)

    const isPreset = useMemo(() => getDefaultPresets().some((p) => p.value === safeStr), [safeStr])
    const selected = isPreset ? safeStr : 'custom'

    return (
        <div className="space-y-1.5" dir="rtl">
            <div className="flex items-center justify-between gap-3">
                <label className="block text-xs text-gray-500">{label}</label>
            </div>
            {description && <p className="text-xs text-gray-400">{description}</p>}

            <div className="grid grid-cols-1 gap-2">
                <select
                    value={selected}
                    onChange={(e) => {
                        const v = e.target.value
                        if (v === 'custom') {
                            onChange(safeStr)
                            return
                        }
                        onChange(v)
                    }}
                    disabled={disabled}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-1 focus:ring-primary-500 focus:border-primary-500 disabled:bg-gray-100 disabled:opacity-50"
                >
                    {getDefaultPresets().map((p) => (
                        <option key={p.value} value={p.value}>
                            {p.label}
                        </option>
                    ))}
                    <option value="custom">{t('Custom')}</option>
                </select>

                {selected === 'custom' && (
                    <div className="flex items-center gap-2" dir="ltr">
                        <input
                            type="number"
                            value={safeNum}
                            step={step}
                            onChange={(e) => {
                                const next = Number.parseFloat(e.target.value)
                                if (!Number.isFinite(next)) {
                                    onChange('1')
                                    return
                                }
                                onChange(formatScale(next))
                            }}
                            onFocus={(e) => e.currentTarget.select()}
                            disabled={disabled}
                            className="w-28 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-1 focus:ring-primary-500 focus:border-primary-500 disabled:bg-gray-100 disabled:opacity-50"
                        />
                        <span className="text-xs text-gray-500">x</span>
                    </div>
                )}
            </div>
        </div>
    )
}

export default HoverScaleControl


