/**
 * BoxShadowFieldEditor
 *
 * FieldValue-aware box-shadow editor that supports:
 * - Linking to global effects shadows (legacy, for backwards compat)
 * - Linking to default preset value (new default-ref system)
 * - Custom editing via BoxShadowControl popover UI
 */
import { t } from '@/lib/i18n'
import { Link2, Unlink2 } from 'lucide-react'
import {
  type FieldValue,
  type PresetGlobalValues,
  createCustomValue,
  createDefaultRef,
  resolveFieldValue,
  isGlobalRef,
  isDefaultRef,
} from '../../types/appearance'
import { BoxShadowControl } from '../appearance/controls/BoxShadowControl'

interface BoxShadowFieldEditorProps {
  label?: string
  value: FieldValue | undefined
  globalValues: PresetGlobalValues
  onChange: (value: FieldValue) => void
  disabled?: boolean
  /** @deprecated Legacy global ref — kept for backwards compatibility */
  defaultGlobalRef?: string
  /** True when editing the default preset — no toggle shown */
  isDefaultPreset?: boolean
  /** Resolved value from the default preset for this field */
  defaultPresetValue?: string
}

export function BoxShadowFieldEditor({
  label = t('Shadow'),
  value,
  globalValues,
  onChange,
  disabled = false,
  isDefaultPreset = false,
  defaultPresetValue,
}: BoxShadowFieldEditorProps) {
  const isLinkedToGlobal = !!value && isGlobalRef(value)
  const isLinkedToDefPreset = !!value && isDefaultRef(value)

  const resolved = value ? resolveFieldValue(value, globalValues) : ''
  const customValue = typeof resolved === 'string' && resolved.trim() ? resolved : 'none'
  const displayValue = isLinkedToDefPreset ? (defaultPresetValue || 'none') : customValue

  const toggleLink = () => {
    if (isLinkedToGlobal || isLinkedToDefPreset) {
      const fallback = isLinkedToDefPreset ? (defaultPresetValue || 'none') : (resolved || 'none')
      onChange(createCustomValue(fallback))
      return
    }
    if (!isDefaultPreset) {
      onChange(createDefaultRef())
    }
  }

  const showToggle = !isDefaultPreset || isLinkedToGlobal

  return (
    <div className="space-y-2" dir="rtl">
      <div className="flex items-center justify-between gap-3">
        <label className="text-sm font-medium text-gray-700">{label}</label>
        {showToggle && (
          <button
            type="button"
            onClick={toggleLink}
            disabled={disabled}
            className={[
              'p-2 rounded-md border transition-colors',
              (isLinkedToGlobal || isLinkedToDefPreset) ? 'bg-primary-50 border-primary-200 text-primary-700' : 'bg-white border-gray-200 text-gray-600',
              'hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed',
            ].join(' ')}
            title={(isLinkedToGlobal || isLinkedToDefPreset) ? t('Unlink') : t('Link to default')}
          >
            {(isLinkedToGlobal || isLinkedToDefPreset) ? <Link2 size={16} /> : <Unlink2 size={16} />}
          </button>
        )}
      </div>

      {(isLinkedToGlobal || isLinkedToDefPreset) ? (
        <div className="px-3 py-2 bg-primary/5 rounded-lg border-2 border-dashed border-primary/30 text-center">
          <div className="text-xs font-medium text-primary">
            {isLinkedToDefPreset ? t('Linked to default') : t('Linked to global')}
          </div>
          <div className="text-xs text-gray-500 mt-0.5">{displayValue}</div>
        </div>
      ) : (
        <BoxShadowControl
          label={label}
          value={customValue}
          onChange={(v) => onChange(createCustomValue(v))}
          disabled={disabled}
        />
      )}
    </div>
  )
}

export default BoxShadowFieldEditor
