import React, { useState } from 'react'
import { Pencil } from 'lucide-react'
import { useFormStore } from '../store/useFormStore'
import ConditionalLogicToggle from './ConditionalLogicToggle'
import ImageFieldEditor from './field-editors/ImageFieldEditor'
import StaticContentEditor from './field-editors/StaticContentEditor'
import UtilityFieldSettings from './field-editors/UtilityFieldSettings'
import FieldIconControl from './field-editors/FieldIconControl'
import OptionsEditor from './property/OptionsEditor'
import FieldStylePicker from './property/FieldStylePicker'
import {
  FieldColors, hasFieldColors, DefaultValueEditor, SubfieldsEditor, DateSettings, TimeSettings, PhoneSettings,
  RichTextToggle, ImageStyleSettings, GridSettings,
} from './property/TypeSettings'
import { getFieldType, Slot, useRegistryVersion } from '../extensions/registry'
import { BUILTIN_FIELD_TYPES } from './FormField'
import InfoTip from './property/InfoTip'
import { SettingLabel, AccordionSection } from './property/PanelParts'

// Human-readable field type for the storefront-style "Edit : [Type]" chip.
const FIELD_TYPE_LABELS = {
  select: 'Dropdown',
  tel: 'Phone',
  url: 'Website',
  textarea: 'Paragraph Text',
  text: 'Text',
  checkbox: 'Checkbox',
  radio: 'Radio',
  'static-content': 'Static Content',
  html: 'HTML',
  captcha: 'CAPTCHA',
}
export function getFieldTypeDisplay(type) {
  if (!type) return 'Unknown Field Type'
  if (FIELD_TYPE_LABELS[type]) return FIELD_TYPE_LABELS[type]
  const registered = getFieldType(type)
  if (registered && (registered.typeLabel || registered.label)) return registered.typeLabel || registered.label
  return type.split('-').map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(' ')
}

export default function PropertyEditor() {
  useRegistryVersion()
  const activeFieldId = useFormStore((state) => state.activeFieldId)
  const fields = useFormStore((state) => state.fields)
  const updateField = useFormStore((state) => state.updateField)
  const setIsLogicSidebarOpen = useFormStore((state) => state.setIsLogicSidebarOpen)

  // Fields inside container columns are editable too (a `columns` array holds column definitions).
  const findField = (list) => {
    for (const f of list || []) {
      if (f.id === activeFieldId) return f
      if (f.columns && !Array.isArray(f.columns) && typeof f.columns === 'object') {
        for (const col of Object.values(f.columns)) {
          const found = Array.isArray(col) ? findField(col) : null
          if (found) return found
        }
      }
    }
    return null
  }
  const activeField = findField(fields)
  // the reference builder accordion: one section open at a time, General open by default.
  const [openSection, setOpenSection] = useState('General')
  const setActiveFieldId = useFormStore((state) => state.setActiveFieldId)

  if (!activeField) {
    return (
      <div className="p-6 text-center text-slate-400 text-xs">
        Select a field on the canvas to configure its settings.
      </div>
    )
  }

  const field = activeField
  const onUpdate = (updates) => {
    updateField(activeField.id, updates)
  }

  const t = activeField.type
  const typeDef = getFieldType(t)
  const flag = (key, fallback) => (typeDef && typeDef[key] !== undefined ? Boolean(typeDef[key]) : fallback)
  const hasOptions = flag('hasOptions', ['select', 'checkbox', 'radio'].includes(t)) && (!typeDef || typeDef.hasOptions !== 'array' || Array.isArray(activeField.options))

  // the reference builder hides these per type (F:15555 Required, F:18213 Visibility, F:17510 Advanced, F:18280 logic).
  const showRequired = flag('showRequired', !['submit', 'hidden', 'html', 'section', 'static-content', 'image', 'grid', 'promo-banner', 'trust-badges', 'faq-accordion', 'countdown-banner'].includes(t))
  const showVisibility = !['submit', 'hidden'].includes(t)
  const showAdvanced = t !== 'submit'
  const showLogic = t !== 'hidden'
  const showIcon = flag('showIcon', ['text', 'email', 'tel', 'url', 'number', 'password', 'date', 'time', 'select', 'dropdown'].includes(t))
  const isUnsupported = !typeDef && !BUILTIN_FIELD_TYPES.includes(t)

  if (isUnsupported) {
    return (
      <div className="bg-white flex flex-col h-full text-gray-900" data-testid="property-editor">
        <div className="relative border-b-2 border-gray-300 bg-white flex-shrink-0 flex items-center justify-between px-3 py-2.5">
          <p className="text-sm font-semibold text-gray-700">Unsupported field type: {String(t || 'unknown')}</p>
          <button type="button" aria-label="Close field settings" onClick={() => setActiveFieldId(null)} className="w-7 h-7 flex items-center justify-center rounded-md text-gray-600 hover:bg-gray-100 cursor-pointer">
            <span aria-hidden="true">✕</span>
          </button>
        </div>
        <div className="p-4 space-y-3 text-xs text-gray-600">
          <p>This field type can't be edited here. The field and its settings are kept when you save the form.</p>
          <button
            type="button"
            data-testid="remove-unsupported-field"
            onClick={() => { useFormStore.getState().removeField(activeField.id) }}
            className="px-3 py-1.5 rounded-md border border-gray-200 bg-white text-gray-700 hover:text-red-600 hover:border-red-200 cursor-pointer"
          >
            Remove field
          </button>
        </div>
      </div>
    )
  }

  const typeDisplay = getFieldTypeDisplay(field.type)
  const isOpen = (section) => openSection === section
  const toggleSection = (section) => setOpenSection(openSection === section ? null : section)
  const inputCls = 'w-full text-sm border border-gray-200 rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-gray-900 focus:border-gray-900 text-gray-900'

  return (
    <div className="bg-white flex flex-col h-full overflow-hidden text-gray-900" data-testid="property-editor">
      {/* Edit header — the reference builder "Edit : [Type]" chip with ✕ close */}
      <div className="relative border-b-2 border-blue-500 bg-white flex-shrink-0">
        <button
          type="button"
          aria-label="Close field settings"
          title="Close"
          data-testid="property-editor-close"
          onClick={() => setActiveFieldId(null)}
          className="absolute top-1/2 -translate-y-1/2 right-2 w-7 h-7 flex items-center justify-center rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100 z-10 cursor-pointer"
        >
          <span aria-hidden="true">✕</span>
        </button>
        <div className="flex items-center w-full pr-10 py-2.5">
          <Pencil className="w-3.5 h-3.5 ml-3 mr-2 text-blue-500 flex-shrink-0" aria-hidden="true" />
          <p className="text-sm font-semibold flex items-center gap-1 min-w-0">
            <span className="text-gray-700">Edit :</span>
            <span
              data-testid="property-editor-type-chip"
              className="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-semibold bg-gray-100 text-gray-600 truncate"
              style={{ letterSpacing: '0.025em' }}
            >
              {typeDisplay}
            </span>
          </p>
        </div>
      </div>

      <div className="flex-1 overflow-y-auto">
        {/* ── General ─────────────────────────────────────────── */}
        <AccordionSection id="general" title="General" open={isOpen('General')} onToggle={() => toggleSection('General')}>
          <div className="space-y-4">
            {/* Field Label */}
            <div>
              <SettingLabel htmlFor="prop-field-label" tip="Set the label for this field. This will be displayed to users.">Label</SettingLabel>
              <input
                id="prop-field-label"
                type="text"
                value={field.label || ''}
                onChange={(e) => onUpdate({ label: e.target.value })}
                className={inputCls}
                placeholder="Field label"
              />
            </div>

            {/* Field Description */}
            <div>
              <SettingLabel htmlFor="prop-field-description" tip="Provide additional information about this field. This will be displayed to users.">Description</SettingLabel>
              <textarea
                id="prop-field-description"
                value={field.description || ''}
                onChange={(e) => onUpdate({ description: e.target.value })}
                className={inputCls}
                rows={2}
                placeholder="Add helper text below the field..."
              />
            </div>

            <FieldStylePicker field={field} onUpdate={onUpdate} />

            {hasOptions && <OptionsEditor field={field} onUpdate={onUpdate} />}

            {/* Field-Specific Settings */}
            {field.type === 'number' && (
              <div className="space-y-2 mt-2">
                <div className="grid grid-cols-2 gap-2">
                  <div>
                    <label className="block text-xs font-medium text-gray-600 mb-1">Min Value</label>
                    <input type="number" value={field.min || ''} onChange={e => onUpdate({min: e.target.value})} className="w-full text-sm border border-gray-200 rounded-md px-2 py-1.5" />
                  </div>
                  <div>
                    <label className="block text-xs font-medium text-gray-600 mb-1">Max Value</label>
                    <input type="number" value={field.max || ''} onChange={e => onUpdate({max: e.target.value})} className="w-full text-sm border border-gray-200 rounded-md px-2 py-1.5" />
                  </div>
                  <div className="col-span-2">
                    <label className="block text-xs font-medium text-gray-600 mb-1">Step</label>
                    <input type="number" value={field.step || ''} onChange={e => onUpdate({step: e.target.value})} className="w-full text-sm border border-gray-200 rounded-md px-2 py-1.5" />
                  </div>
                </div>
                <div className="grid grid-cols-2 gap-2">
                  <div>
                    <label className="block text-xs font-medium text-gray-600 mb-1">Prefix Adornment</label>
                    <input type="text" value={field.prefix || ''} onChange={e => onUpdate({prefix: e.target.value})} placeholder="e.g. $" className="w-full text-sm border border-gray-200 rounded-md px-2 py-1.5" />
                  </div>
                  <div>
                    <label className="block text-xs font-medium text-gray-600 mb-1">Suffix Adornment</label>
                    <input type="text" value={field.suffix || ''} onChange={e => onUpdate({suffix: e.target.value})} placeholder="e.g. kg, pcs" className="w-full text-sm border border-gray-200 rounded-md px-2 py-1.5" />
                  </div>
                </div>
              </div>
            )}

            {['text', 'textarea'].includes(field.type) && (
              <div className="grid grid-cols-2 gap-2 mt-2">
                <div>
                  <label className="flex items-center text-xs font-medium text-gray-600 mb-1">Max Characters<InfoTip content="Limit how many characters the user can enter (0 = unlimited)." /></label>
                  <input
                    type="number"
                    min="0"
                    value={field.maxLength || ''}
                    onChange={(e) => onUpdate({ maxLength: parseInt(e.target.value) || 0 })}
                    placeholder="e.g. 250"
                    className="w-full text-sm border border-gray-200 rounded-md px-2 py-1.5"
                  />
                </div>
                <div className="flex items-center gap-2 mt-5">
                  <input
                    type="checkbox"
                    id="show-char-count"
                    checked={field.showCharCount || false}
                    onChange={(e) => onUpdate({ showCharCount: e.target.checked })}
                    className="rounded text-gray-900 focus:ring-gray-900 cursor-pointer"
                  />
                  <label htmlFor="show-char-count" className="text-xs font-medium text-gray-600 cursor-pointer">
                    Show Counter
                  </label>
                </div>
              </div>
            )}

            {field.type === 'password' && (
              <div className="space-y-2 mt-2">
                <div className="flex items-center gap-2">
                  <input
                    type="checkbox"
                    id="pass-eye"
                    checked={field.showPasswordToggle !== false}
                    onChange={(e) => onUpdate({ showPasswordToggle: e.target.checked })}
                    className="rounded text-gray-900 focus:ring-gray-900 cursor-pointer"
                  />
                  <label htmlFor="pass-eye" className="text-xs font-medium text-gray-600 cursor-pointer">
                    Show Eye Show/Hide Toggle
                  </label>
                </div>
                <div className="flex items-center gap-2">
                  <input
                    type="checkbox"
                    id="pass-strength"
                    checked={field.showStrengthMeter || false}
                    onChange={(e) => onUpdate({ showStrengthMeter: e.target.checked })}
                    className="rounded text-gray-900 focus:ring-gray-900 cursor-pointer"
                  />
                  <label htmlFor="pass-strength" className="text-xs font-medium text-gray-600 cursor-pointer">
                    Show Password Strength Meter
                  </label>
                </div>
              </div>
            )}

            {field.type === 'date' && <DateSettings field={field} onUpdate={onUpdate} />}

            {field.type === 'time' && <TimeSettings field={field} onUpdate={onUpdate} />}

            {field.type === 'tel' && <PhoneSettings field={field} onUpdate={onUpdate} />}

            {field.type === 'textarea' && <RichTextToggle field={field} onUpdate={onUpdate} />}

            {(field.type === 'address' || field.type === 'name') && <SubfieldsEditor field={field} onUpdate={onUpdate} />}

            {field.type === 'consent' && (
              <div className="mt-2">
                <label className="block text-xs font-medium text-gray-600 mb-1">Consent Text (supports [Link](url))</label>
                <textarea
                  value={field.consentText || 'I agree to the terms and conditions.'}
                  onChange={(e) => onUpdate({ consentText: e.target.value })}
                  className="w-full text-sm border border-gray-200 rounded-md px-3 py-2 focus:ring-1 focus:ring-gray-900 focus:border-gray-900 text-gray-900"
                  rows={4}
                />
              </div>
            )}

            {field.type === 'html' && (
              <div className="mt-2">
                <label className="block text-xs font-medium text-gray-600 mb-1">HTML Content</label>
                <textarea
                  value={field.htmlContent || '<p>Enter HTML here</p>'}
                  onChange={(e) => onUpdate({ htmlContent: e.target.value })}
                  className="w-full text-sm font-mono border border-gray-200 rounded-md px-3 py-2 focus:ring-1 focus:ring-gray-900 focus:border-gray-900 text-gray-900"
                  rows={6}
                />
              </div>
            )}

            {field.type === 'captcha' && (
              <div className="space-y-3 mt-2">
                <div>
                  <label className="block text-xs font-medium text-gray-600 mb-1">reCAPTCHA Type</label>
                  <select value={field.captchaType || 'v2'} onChange={e => onUpdate({captchaType: e.target.value})} className="w-full text-sm border border-gray-200 rounded-md px-2 py-1.5">
                    <option value="v2">v2 (Checkbox)</option>
                    <option value="invisible">v2 (Invisible badge)</option>
                    <option value="v3">v3 (Score-based)</option>
                  </select>
                </div>
                <div>
                  <label className="flex items-center text-xs font-medium text-gray-600 mb-1">Site Key<InfoTip content="The Site Key identifies your site to Google reCAPTCHA. Get it from the reCAPTCHA admin console." /></label>
                  <input type="text" value={field.siteKey || ''} onChange={e => onUpdate({siteKey: e.target.value})} className="w-full text-sm border border-gray-200 rounded-md px-2 py-1.5" />
                </div>
                <div>
                  <label className="flex items-center text-xs font-medium text-gray-600 mb-1">Secret Key<InfoTip content="The Secret Key authenticates your server with Google reCAPTCHA. Keep it private." /></label>
                  <input type="password" value={field.secretKey || ''} onChange={e => onUpdate({secretKey: e.target.value})} className="w-full text-sm border border-gray-200 rounded-md px-2 py-1.5" />
                </div>
              </div>
            )}

            {field.type === 'grid' && (
              <div className="mt-2 space-y-2">
                <label className="flex items-center text-xs font-medium text-gray-600 mb-1">Column Count (1-12)<InfoTip content="Set the number of columns for this field layout." /></label>
                <input type="number" min="1" max="12" value={field.columnCount || 2} onChange={e => onUpdate({columnCount: parseInt(e.target.value) || 2})} className="w-full text-sm border border-gray-200 rounded-md px-2 py-1.5" />
                <GridSettings field={field} onUpdate={onUpdate} />
              </div>
            )}

            {field.type === 'switch' && (() => {
              // the reference builder keys; forms saved by older builders keep onValue/offValue/onColor/offColor/defaultState.
              const pick = (...vals) => vals.find((v) => v !== undefined && v !== null && v !== '')
              const onValue = pick(field.switchOnValue, field.onValue) ?? 'on'
              const offValue = pick(field.switchOffValue, field.offValue) ?? 'off'
              const dv = field.defaultValue === undefined || field.defaultValue === null || field.defaultValue === '' ? field.defaultState : field.defaultValue
              const defaultOn = dv === true || dv === 'true' || dv === 'on' || (dv !== undefined && dv !== false && String(dv) === String(onValue))
              return (
              <div className="space-y-3 mt-2">
                <div className="flex items-center gap-2">
                  <input type="checkbox" id="switch-default" checked={defaultOn} onChange={e => onUpdate({defaultValue: e.target.checked, defaultState: undefined})} className="rounded text-gray-900 focus:ring-gray-900 cursor-pointer" />
                  <label htmlFor="switch-default" className="text-xs font-medium text-gray-600 cursor-pointer">Default On</label>
                </div>
                <div className="grid grid-cols-2 gap-2">
                  <div>
                    <label className="block text-xs font-medium text-gray-600 mb-1">On Value</label>
                    <input type="text" value={onValue} onChange={e => onUpdate({switchOnValue: e.target.value, onValue: undefined})} className="w-full text-sm border border-gray-200 rounded-md px-2 py-1.5" />
                  </div>
                  <div>
                    <label className="block text-xs font-medium text-gray-600 mb-1">Off Value</label>
                    <input type="text" value={offValue} onChange={e => onUpdate({switchOffValue: e.target.value, offValue: undefined})} className="w-full text-sm border border-gray-200 rounded-md px-2 py-1.5" />
                  </div>
                  <div>
                    <label className="block text-xs font-medium text-gray-600 mb-1">On Color</label>
                    <input type="color" value={pick(field.switchOnColor, field.onColor) || '#10B981'} onChange={e => onUpdate({switchOnColor: e.target.value, onColor: undefined})} className="w-full h-8 rounded border border-gray-200 cursor-pointer p-0.5" />
                  </div>
                  <div>
                    <label className="block text-xs font-medium text-gray-600 mb-1">Off Color</label>
                    <input type="color" value={pick(field.switchOffColor, field.offColor) || '#D1D5DB'} onChange={e => onUpdate({switchOffColor: e.target.value, offColor: undefined})} className="w-full h-8 rounded border border-gray-200 cursor-pointer p-0.5" />
                  </div>
                </div>
              </div>
              )
            })()}

            {typeDef && typeDef.Settings && (
              <typeDef.Settings field={field} onUpdate={onUpdate} allFields={fields} />
            )}

            {field.type === 'image' && (
              <>
                <ImageFieldEditor field={field} onUpdate={onUpdate} />
                <ImageStyleSettings field={field} onUpdate={onUpdate} />
              </>
            )}

            {field.type === 'static-content' && (
              <StaticContentEditor field={field} onUpdate={onUpdate} />
            )}

            {['promo-banner', 'trust-badges', 'faq-accordion', 'countdown-banner', 'section'].includes(field.type) && (
              <UtilityFieldSettings field={field} onUpdate={onUpdate} />
            )}


            {/* Extension settings for any field type (receives the field) */}
            <Slot name="fieldSettings.general" field={field} onUpdate={onUpdate} allFields={fields} />

            {/* Required */}
            {showRequired && (
            <div className="flex items-center gap-2 pt-1">
              <input
                type="checkbox"
                id="field-required"
                checked={field.required || false}
                onChange={(e) => onUpdate({ required: e.target.checked })}
                className="rounded text-gray-900 focus:ring-gray-900 cursor-pointer"
              />
              <label htmlFor="field-required" className="text-sm text-gray-700 cursor-pointer select-none">
                Required
              </label>
              <InfoTip content="Mark this field as required to ensure users must fill it out." />
            </div>
            )}
          </div>
        </AccordionSection>

        {/* ── Appearance (hidden for "hidden" fields, as in the reference builder) ── */}
        {field.type !== 'hidden' && (
          <AccordionSection id="appearance" title="Appearance" open={isOpen('Appearance')} onToggle={() => toggleSection('Appearance')}>
            <div className="space-y-4">
              {/* Placeholder */}
              {flag('showPlaceholder', ['text', 'email', 'textarea', 'number', 'select', 'hidden', 'tel', 'url', 'password', 'time'].includes(field.type)) && (
                <div>
                  <SettingLabel htmlFor="prop-field-placeholder" tip="Text shown inside the input before the user types.">Placeholder</SettingLabel>
                  <input
                    id="prop-field-placeholder"
                    type="text"
                    value={field.placeholder || ''}
                    onChange={(e) => onUpdate({ placeholder: e.target.value })}
                    className={inputCls}
                  />
                </div>
              )}

              {showIcon && (
                <FieldIconControl field={field} onUpdate={onUpdate} />
              )}

              {hasFieldColors(field.type) && (
                <div className="pb-3 border-b border-gray-100">
                  <FieldColors field={field} onUpdate={onUpdate} />
                </div>
              )}

              <div className="space-y-2 pb-3 border-b border-gray-100">
                <h5 className="text-xs font-bold text-gray-700 uppercase mb-2">Spacing & Sizing</h5>

                <div>
                  <label className="flex items-center text-xs text-gray-600 mb-1">Label Visibility<InfoTip content="Show or hide the field label on the form." /></label>
                  <div className="flex gap-4">
                    <label className="flex items-center gap-1 text-xs text-gray-600">
                      <input type="radio" checked={field.labelVisibility !== 'hidden'} onChange={() => onUpdate({labelVisibility: 'visible'})} /> Visible
                    </label>
                    <label className="flex items-center gap-1 text-xs text-gray-600">
                      <input type="radio" checked={field.labelVisibility === 'hidden'} onChange={() => onUpdate({labelVisibility: 'hidden'})} /> Hidden
                    </label>
                  </div>
                </div>

                <div>
                  <label className="flex items-center text-xs text-gray-600 mb-1 mt-2">Label Margin (px)<InfoTip content="Space around the label: top, right, bottom, left." /></label>
                  <div className="grid grid-cols-4 gap-1">
                    <input type="number" placeholder="T" value={field.labelMarginTop || ''} onChange={e => onUpdate({labelMarginTop: e.target.value})} className="w-full text-xs border rounded p-1" />
                    <input type="number" placeholder="R" value={field.labelMarginRight || ''} onChange={e => onUpdate({labelMarginRight: e.target.value})} className="w-full text-xs border rounded p-1" />
                    <input type="number" placeholder="B" value={field.labelMarginBottom || ''} onChange={e => onUpdate({labelMarginBottom: e.target.value})} className="w-full text-xs border rounded p-1" />
                    <input type="number" placeholder="L" value={field.labelMarginLeft || ''} onChange={e => onUpdate({labelMarginLeft: e.target.value})} className="w-full text-xs border rounded p-1" />
                  </div>
                </div>

                <div>
                  <label className="flex items-center text-xs text-gray-600 mb-1 mt-2">Field Padding (px)<InfoTip content="Inner spacing of the input: top, right, bottom, left." /></label>
                  <div className="grid grid-cols-4 gap-1">
                    <input type="number" placeholder="T" value={field.paddingTop || ''} onChange={e => onUpdate({paddingTop: e.target.value})} className="w-full text-xs border rounded p-1" />
                    <input type="number" placeholder="R" value={field.paddingRight || ''} onChange={e => onUpdate({paddingRight: e.target.value})} className="w-full text-xs border rounded p-1" />
                    <input type="number" placeholder="B" value={field.paddingBottom || ''} onChange={e => onUpdate({paddingBottom: e.target.value})} className="w-full text-xs border rounded p-1" />
                    <input type="number" placeholder="L" value={field.paddingLeft || ''} onChange={e => onUpdate({paddingLeft: e.target.value})} className="w-full text-xs border rounded p-1" />
                  </div>
                </div>

                <div>
                  <label className="flex items-center text-xs text-gray-600 mb-1 mt-2">Field Margin (px)<InfoTip content="Outer spacing around the field: top, right, bottom, left." /></label>
                  <div className="grid grid-cols-4 gap-1">
                    <input type="number" placeholder="T" value={field.marginTop || ''} onChange={e => onUpdate({marginTop: e.target.value})} className="w-full text-xs border rounded p-1" />
                    <input type="number" placeholder="R" value={field.marginRight || ''} onChange={e => onUpdate({marginRight: e.target.value})} className="w-full text-xs border rounded p-1" />
                    <input type="number" placeholder="B" value={field.marginBottom || '15'} onChange={e => onUpdate({marginBottom: e.target.value})} className="w-full text-xs border rounded p-1" />
                    <input type="number" placeholder="L" value={field.marginLeft || ''} onChange={e => onUpdate({marginLeft: e.target.value})} className="w-full text-xs border rounded p-1" />
                  </div>
                </div>

                <div className="mt-2">
                  <div className="flex justify-between items-center mb-1">
                    <label className="flex items-center text-xs text-gray-600">Border Radius (px)<InfoTip content="Set the border radius for this field in pixels." /></label>
                    <span className="text-xs text-gray-400">{field.borderRadius || 0}px</span>
                  </div>
                  <input type="range" min="0" max="50" value={field.borderRadius || 0} onChange={e => onUpdate({borderRadius: parseInt(e.target.value)})} className="w-full accent-gray-900" />
                </div>

                {field.type === 'textarea' && (
                  <div className="mt-2">
                    <div className="flex justify-between items-center mb-1">
                      <label className="flex items-center text-xs text-gray-600">Textarea Height (px)<InfoTip content="Set the height of the textarea in pixels." /></label>
                      <span className="text-xs text-gray-400">{field.textareaHeight || 100}px</span>
                    </div>
                    <input type="range" min="50" max="500" value={field.textareaHeight || 100} onChange={e => onUpdate({textareaHeight: parseInt(e.target.value)})} className="w-full accent-gray-900" />
                  </div>
                )}
              </div>

              <div className="space-y-2">
                <h5 className="text-xs font-bold text-gray-700 uppercase mb-2">Advanced Styling</h5>
                <div>
                  <label className="flex items-center text-xs text-gray-600 mb-1">Custom CSS Class<InfoTip content="Add one or more CSS classes to this field's wrapper for custom styling." /></label>
                  <input type="text" value={field.customCssClass || ''} onChange={e => onUpdate({customCssClass: e.target.value})} placeholder="my-custom-class" className="w-full text-xs border border-gray-200 rounded px-2 py-1.5" />
                </div>

                {['checkbox', 'radio'].includes(field.type) && (
                  <div className="mt-2 space-y-2">
                    <div>
                      <label className="flex items-center text-xs text-gray-600 mb-1">Choice Columns<InfoTip content="Arrange the choices in columns or inline." /></label>
                      <select
                        value={field.choiceColumns || field[field.type === 'checkbox' ? 'checkboxRowColumns' : 'radioRowColumns'] || 1}
                        onChange={(e) => {
                          // the reference builder key (checkboxRowColumns / radioRowColumns); 'inline' has no the reference builder equivalent.
                          if (e.target.value === 'inline') {
                            onUpdate({ choiceColumns: 'inline' })
                          } else {
                            onUpdate({ [field.type === 'checkbox' ? 'checkboxRowColumns' : 'radioRowColumns']: parseInt(e.target.value) || 1, choiceColumns: undefined })
                          }
                        }}
                        className="w-full text-xs border border-gray-200 rounded px-2 py-1.5"
                      >
                        <option value={1}>1 Column (Vertical List)</option>
                        <option value={2}>2 Columns</option>
                        <option value={3}>3 Columns</option>
                        <option value={4}>4 Columns</option>
                        <option value="inline">Inline (Horizontal Flex Wrap)</option>
                      </select>
                    </div>

                  </div>
                )}
              </div>
            </div>
          </AccordionSection>
        )}

        {/* ── Advanced (hidden for submit, as in the reference builder) ───────── */}
        {showAdvanced && (
        <AccordionSection id="advanced" title="Advanced" open={isOpen('Advanced')} onToggle={() => toggleSection('Advanced')}>
          <div className="space-y-4">
            <DefaultValueEditor field={field} onUpdate={onUpdate} />

            {showVisibility && (
            <div>
              <SettingLabel htmlFor="prop-field-visibility" tip="Visible: shown to everyone. Hidden: kept in the form but not shown. Administrative: only visible in entries.">Visibility</SettingLabel>
              <select id="prop-field-visibility" value={field.visibility || 'visible'} onChange={e => onUpdate({visibility: e.target.value})} className={inputCls}>
                <option value="visible">Visible</option>
                <option value="hidden">Hidden</option>
                <option value="administrative">Administrative (Backend Only)</option>
              </select>
            </div>
            )}

            {(field.type === 'select' || field.type === 'dropdown') && (
              <div className="flex items-center gap-2">
                <input type="checkbox" id="multi-select" checked={Boolean(field.isMulti ?? field.multiSelect)} onChange={e => onUpdate({isMulti: e.target.checked, multiSelect: undefined})} className="rounded text-gray-900 focus:ring-gray-900 cursor-pointer" />
                <label htmlFor="multi-select" className="text-sm text-gray-700 cursor-pointer">Enable Multiple Selection</label>
                <InfoTip content="Allow users to pick more than one option from the dropdown." />
              </div>
            )}

            {showLogic && (
            <div className="pt-3 border-t border-slate-100">
              <ConditionalLogicToggle
                selectedField={field}
                onOpenLogicDrawer={() => setIsLogicSidebarOpen(true)}
              />
            </div>
            )}
          </div>
        </AccordionSection>
        )}
      </div>
    </div>
  )
}