/**
 * BorderRadiusEditor Component
 * Per-corner border radius input with unit selection (px, em, rem, etc.)
 * Follows Elementor-style UI pattern with linked/unlinked corners
 */

import { useState } from 'react'
import { t } from '@/lib/i18n'
import { Link, Unlink } from 'lucide-react'
import { NumberWithUnitInput, CSSUnit } from './NumberWithUnitInput'

export interface BorderRadiusValue {
    topLeft: string
    topRight: string
    bottomRight: string
    bottomLeft: string
}

interface BorderRadiusEditorProps {
    value: BorderRadiusValue
    onChange: (value: BorderRadiusValue) => void
    label?: string
    disabled?: boolean
    allowedUnits?: CSSUnit[]
}

const DEFAULT_VALUE: BorderRadiusValue = {
    topLeft: '8px',
    topRight: '8px',
    bottomRight: '8px',
    bottomLeft: '8px',
}

/**
 * Check if all corners have the same value
 */
function areAllCornersEqual(value: BorderRadiusValue): boolean {
    return (
        value.topLeft === value.topRight &&
        value.topRight === value.bottomRight &&
        value.bottomRight === value.bottomLeft
    )
}

export function BorderRadiusEditor({
    value = DEFAULT_VALUE,
    onChange,
    label = t('Border Radius'),
    disabled = false,
    allowedUnits = ['px', 'em', 'rem', '%'],
}: BorderRadiusEditorProps) {
    // Track whether corners are linked
    const [isLinked, setIsLinked] = useState(areAllCornersEqual(value))

    const handleSingleChange = (corner: keyof BorderRadiusValue, newValue: string) => {
        if (isLinked) {
            // Update all corners when linked
            onChange({
                topLeft: newValue,
                topRight: newValue,
                bottomRight: newValue,
                bottomLeft: newValue,
            })
        } else {
            // Update only the specified corner
            onChange({
                ...value,
                [corner]: newValue,
            })
        }
    }

    const toggleLink = () => {
        if (!isLinked) {
            // When linking, set all corners to the topLeft value
            const uniformValue = value.topLeft
            onChange({
                topLeft: uniformValue,
                topRight: uniformValue,
                bottomRight: uniformValue,
                bottomLeft: uniformValue,
            })
        }
        setIsLinked(!isLinked)
    }

    return (
        <div className="space-y-2" dir="rtl">
            {label && (
                <div className="flex items-center justify-between">
                    <label className="text-sm font-medium text-gray-700">
                        {label}
                    </label>
                    <button
                        type="button"
                        onClick={toggleLink}
                        disabled={disabled}
                        className={`
                            p-1.5 rounded transition-colors
                            ${isLinked
                                ? 'bg-primary-100 text-primary-600 hover:bg-primary-200'
                                : 'bg-gray-100 text-gray-500 hover:bg-gray-200'
                            }
                            disabled:opacity-50 disabled:cursor-not-allowed
                        `}
                        title={isLinked ? t('Unlink') : t('Link all corners')}
                    >
                        {isLinked ? <Link size={14} /> : <Unlink size={14} />}
                    </button>
                </div>
            )}

            {isLinked ? (
                /* Single input when linked */
                <div className="flex items-center gap-2">
                    <span className="text-xs text-gray-500 w-16">{t('All')}</span>
                    <NumberWithUnitInput
                        value={value.topLeft}
                        onChange={(v) => handleSingleChange('topLeft', v)}
                        disabled={disabled}
                        allowedUnits={allowedUnits}
                    />
                </div>
            ) : (
                /* Four inputs when unlinked - visual corner representation */
                <div className="space-y-2">
                    {/* Top corners - RTL: right is first */}
                    <div className="flex justify-between gap-4">
                        <div className="flex items-center gap-2">
                            <span className="text-xs text-gray-500 w-8">↗</span>
                            <NumberWithUnitInput
                                value={value.topRight}
                                onChange={(v) => handleSingleChange('topRight', v)}
                                disabled={disabled}
                                allowedUnits={allowedUnits}
                            />
                        </div>
                        <div className="flex items-center gap-2">
                            <span className="text-xs text-gray-500 w-8">↖</span>
                            <NumberWithUnitInput
                                value={value.topLeft}
                                onChange={(v) => handleSingleChange('topLeft', v)}
                                disabled={disabled}
                                allowedUnits={allowedUnits}
                            />
                        </div>
                    </div>
                    {/* Bottom corners - RTL: right is first */}
                    <div className="flex justify-between gap-4">
                        <div className="flex items-center gap-2">
                            <span className="text-xs text-gray-500 w-8">↘</span>
                            <NumberWithUnitInput
                                value={value.bottomRight}
                                onChange={(v) => handleSingleChange('bottomRight', v)}
                                disabled={disabled}
                                allowedUnits={allowedUnits}
                            />
                        </div>
                        <div className="flex items-center gap-2">
                            <span className="text-xs text-gray-500 w-8">↙</span>
                            <NumberWithUnitInput
                                value={value.bottomLeft}
                                onChange={(v) => handleSingleChange('bottomLeft', v)}
                                disabled={disabled}
                                allowedUnits={allowedUnits}
                            />
                        </div>
                    </div>
                </div>
            )}
        </div>
    )
}

export default BorderRadiusEditor

