import React from 'react'
import { Check, Sparkles } from 'lucide-react'
import InfoTip from './InfoTip'
import { FIELD_STYLE_PRESETS } from './fieldStylePresets'
import { applyFilters } from '../../extensions/registry'

/**
 * "Display Style" preset picker (port of the reference builder FieldStylePicker). Applying a preset writes its appliedStyles;
 * keys the preset sets to undefined are written as null so they are really removed from the saved field.
 * `extraClear` lists older WP keys that would override the the reference builder key on the canvas (radio/checkbox choiceStyle).
 */
export default function FieldStylePicker({ field, onUpdate }) {
  const presets = (applyFilters('fieldStylePresets', FIELD_STYLE_PRESETS) || FIELD_STYLE_PRESETS)[field.type]
  if (!presets || presets.length === 0) return null
  const legacyChoiceStyle = (field.type === 'radio' || field.type === 'checkbox') && field.choiceStyle

  const apply = (preset) => {
    const patch = {}
    for (const [k, v] of Object.entries(preset.appliedStyles)) patch[k] = v === undefined ? null : v
    if (legacyChoiceStyle) patch.choiceStyle = null
    onUpdate(patch)
  }

  return (
    <div className="mb-1 p-2 bg-gray-50/70 border border-gray-200 rounded-lg" data-testid="field-style-picker">
      <div className="flex items-center mb-2">
        <span className="text-xs font-semibold text-gray-700 flex items-center gap-1 uppercase tracking-wider">
          <Sparkles size={13} className="text-blue-600" aria-hidden="true" />
          Display Style
        </span>
        <InfoTip content="Choose a pre-designed layout & presentation style for this field." />
      </div>
      <div className="grid grid-cols-2 gap-2">
        {presets.map((preset) => {
          const active = !legacyChoiceStyle && preset.isActive(field)
          return (
            <button
              key={preset.id}
              type="button"
              onClick={() => apply(preset)}
              title={preset.description}
              aria-pressed={active}
              data-style-preset={preset.id}
              className={`relative flex flex-col items-center justify-between p-2 rounded-lg border-2 text-left transition-all duration-150 cursor-pointer ${active ? 'border-blue-600 bg-blue-50/50 shadow-sm' : 'border-gray-200 bg-white hover:border-blue-300 hover:bg-gray-50'}`}
            >
              {active && (
                <span className="absolute top-1 right-1 w-3.5 h-3.5 rounded-full bg-blue-600 flex items-center justify-center text-white" aria-hidden="true">
                  <Check size={10} strokeWidth={3} />
                </span>
              )}
              <span className="w-full h-12 flex items-center justify-center mb-1.5 overflow-hidden" aria-hidden="true">{preset.preview}</span>
              <span className={`text-[11px] text-center w-full leading-tight ${active ? 'text-blue-700 font-semibold' : 'text-gray-700 font-medium'}`}>{preset.name}</span>
            </button>
          )
        })}
      </div>
    </div>
  )
}