import React from 'react'
import { ColorRow, NumberRow, SelectRow, TextRow, ToggleRow, Segmented, SubHeading, FourSides, inputBase } from './Controls'
import InfoTip from './InfoTip'
import { getFieldType, Slot } from '../../extensions/registry'

// Per-type Field Settings blocks (the reference builder keys; older WP keys are read as fallbacks and cleared with null on write).

const isSet = (v) => v !== undefined && v !== null && v !== ''
const pick = (...vals) => vals.find(isSet)

/* ── Colours per field type (the reference builder F:16468-17240) ───────────────────────────────────────────── */

const COLOR_TYPES = ['text', 'email', 'number', 'tel', 'url', 'textarea', 'address', 'select', 'dropdown', 'checkbox', 'radio', 'submit', 'date', 'time', 'name', 'password']

export function hasFieldColors(type) {
  const registered = getFieldType(type)
  if (registered) return Boolean(registered.hasColors)
  return COLOR_TYPES.includes(type)
}

export function FieldColors({ field, onUpdate }) {
  const t = field.type
  const choice = t === 'checkbox' || t === 'radio'
  const isSubmit = t === 'submit'
  const row = (label, key, placeholder, tip) => (
    <ColorRow
      key={key}
      label={label}
      testId={key}
      value={field[key]}
      placeholder={placeholder}
      tip={tip}
      onChange={(v) => onUpdate({ [key]: v })}
      onClear={() => onUpdate({ [key]: null })}
    />
  )
  return (
    <div data-testid="field-colors">
      <SubHeading tip="Set individual colors for this field. Cleared colors use the theme colors.">Colors</SubHeading>
      {!choice && !isSubmit && row('Input Background', 'inputBackgroundColor', '#F9FAFB')}
      {!choice && !isSubmit && row('Input Border', 'inputBorderColor', '#D1D5DB')}
      {isSubmit && row('Background Color', 'backgroundColor', '#4F46E5', 'Background of this submit button.')}
      {row('Text Color', 'textColor', isSubmit ? '#FFFFFF' : '#000000')}
      {!choice && !isSubmit && row('Placeholder Text', 'placeholderTextColor', '#9CA3AF')}
      {!choice && !isSubmit && row('Hover Border', 'hoverBorderColor', '#6B7280')}
      {!choice && !isSubmit && row('Focus Border', 'focusBorderColor', '#3B82F6')}
      {(t === 'select' || t === 'dropdown') && row('Selected Value Color', 'selectedValueColor', '#000000', 'Text color of the chosen value in the dropdown.')}
      {t === 'checkbox' && row('Checkbox Selected', 'checkboxSelectedColor', '#2563EB')}
      {t === 'checkbox' && row('Checkbox Unselected', 'checkboxUnselectedColor', '#D1D5DB')}
      {t === 'radio' && row('Radio Selected', 'radioSelectedColor', '#2563EB')}
      {choice && (field.radioStyle === 'card' || field.checkboxStyle === 'card') && row('Selected Card Border', 'selectedBorderColor', '#2563EB', 'Border of the selected card.')}
      {isSubmit && (
        <>
          <Segmented
            label="Alignment"
            testId="submitButtonAlignment"
            value={pick(field.submitButtonAlignment, 'left')}
            options={[{ value: 'left', label: 'Left' }, { value: 'center', label: 'Center' }, { value: 'right', label: 'Right' }, { value: 'full', label: 'Full' }]}
            onChange={(v) => onUpdate({ submitButtonAlignment: v })}
          />
          <NumberRow label="Button Width" testId="submitButtonWidth" unit="px" min={0} max={800} value={field.submitButtonWidth} onChange={(v) => onUpdate({ submitButtonWidth: v || null })} onReset={() => onUpdate({ submitButtonWidth: null })} tip="0 or empty = fit the text." />
        </>
      )}
    </div>
  )
}

/* ── Default value per type (the reference builder F:17530-17958) ───────────────────────────────────────────── */

const NO_DEFAULT = ['submit', 'checkbox', 'radio', 'switch', 'html', 'section', 'image', 'captcha',
  'select', 'dropdown', 'grid', 'static-content', 'promo-banner', 'trust-badges', 'faq-accordion', 'countdown-banner', 'name', 'address']

export function hasPlainDefault(type) {
  const registered = getFieldType(type)
  if (registered) return registered.hasDefault === true
  return !NO_DEFAULT.includes(type) && type !== 'date' && type !== 'time'
}

export function DefaultValueEditor({ field, onUpdate }) {
  const t = field.type
  if (t === 'date') {
    const dv = field.defaultValues && typeof field.defaultValues === 'object' ? field.defaultValues : {}
    const set = (k, v) => onUpdate({ defaultValues: { ...dv, [k]: v } })
    return (
      <div data-testid="default-date">
        <SubHeading tip="Pre-fill the date (used by the dropdown and text date styles).">Default Value</SubHeading>
        <div className="grid grid-cols-3 gap-1.5">
          <input aria-label="Default month" placeholder="MM" value={dv.month ?? ''} onChange={(e) => set('month', e.target.value)} className={inputBase} />
          <input aria-label="Default day" placeholder="DD" value={dv.day ?? ''} onChange={(e) => set('day', e.target.value)} className={inputBase} />
          <input aria-label="Default year" placeholder="YYYY" value={dv.year ?? ''} onChange={(e) => set('year', e.target.value)} className={inputBase} />
        </div>
      </div>
    )
  }
  if (t === 'time') {
    const dv = field.defaultValues && typeof field.defaultValues === 'object' ? field.defaultValues : {}
    const set = (k, v) => onUpdate({ defaultValues: { ...dv, [k]: v } })
    const is12 = timeFormatOf(field) === '12hour'
    return (
      <div data-testid="default-time">
        <SubHeading tip="Pre-fill the time.">Default Value</SubHeading>
        <div className={`grid ${is12 ? 'grid-cols-3' : 'grid-cols-2'} gap-1.5`}>
          <input aria-label="Default hour" placeholder="HH" value={dv.hour ?? ''} onChange={(e) => set('hour', e.target.value)} className={inputBase} />
          <input aria-label="Default minute" placeholder="MM" value={dv.minute ?? ''} onChange={(e) => set('minute', e.target.value)} className={inputBase} />
          {is12 && (
            <select aria-label="Default AM/PM" value={dv.ampm ?? ''} onChange={(e) => set('ampm', e.target.value)} className={inputBase}>
              <option value="">—</option>
              <option value="AM">AM</option>
              <option value="PM">PM</option>
            </select>
          )}
        </div>
      </div>
    )
  }
  if (!hasPlainDefault(t)) return null
  const multiline = t === 'textarea'
  return (
    <div data-testid="default-plain">
      <SubHeading tip="Pre-fill this field with a value when the form loads.">Default Value</SubHeading>
      {multiline ? (
        <textarea id="prop-field-default" rows={2} value={field.defaultValue ?? ''} onChange={(e) => onUpdate({ defaultValue: e.target.value })} aria-label="Default Value" className="w-full text-sm border border-gray-200 rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500" />
      ) : (
        <input id="prop-field-default" type={t === 'number' ? 'number' : 'text'} value={field.defaultValue ?? ''} onChange={(e) => onUpdate({ defaultValue: e.target.value })} aria-label="Default Value" className={`${inputBase} w-full`} />
      )}
    </div>
  )
}

/* ── Sub-field tables: name / address (the reference builder NameFieldSettings, F:16094-16326, 17552-17958) ──── */

const NAME_KEYS = [
  ['prefix', 'Prefix', 'Select Prefix', false],
  ['first', 'First', 'First Name', true],
  ['middle', 'Middle', 'M.I.', false],
  ['last', 'Last', 'Last Name', true],
  ['suffix', 'Suffix', 'Jr.', false],
]
const ADDRESS_KEYS = [
  ['street', 'Street Address', '123 Main St', true],
  ['address2', 'Address Line 2', 'Apartment, suite, unit, etc.', true],
  ['city', 'City', 'City', true],
  ['state', 'State / Province', 'State / Province', true],
  ['zip', 'Postal / Zip Code', 'ZIP Code', true],
  ['country', 'Country', 'Select Country', true],
]

/** Current subfields object: the reference builder `subfields`, else the older WP nameSettings/addressSettings (visible/label). */
function readSubfields(field, keys) {
  const sf = field.subfields && typeof field.subfields === 'object' && !Array.isArray(field.subfields) ? field.subfields : null
  const legacy = field.type === 'name' ? field.nameSettings : field.addressSettings
  const out = {}
  for (const [k, label, placeholder, visible] of keys) {
    const s = sf && sf[k] ? sf[k] : {}
    const l = legacy && legacy[k] ? legacy[k] : {}
    out[k] = {
      ...s,
      isVisible: s.isVisible !== undefined ? s.isVisible !== false : (l.visible !== undefined ? l.visible !== false : visible),
      label: pick(s.label, l.label, label),
      placeholder: pick(s.placeholder, placeholder),
    }
  }
  return out
}

export function SubfieldsEditor({ field, onUpdate }) {
  const isName = field.type === 'name'
  const keys = isName ? NAME_KEYS : ADDRESS_KEYS
  const subs = readSubfields(field, keys)
  const dv = field.defaultValues && typeof field.defaultValues === 'object' ? field.defaultValues : {}
  const write = (k, patch) => {
    const next = { ...subs, [k]: { ...subs[k], ...patch } }
    onUpdate({ subfields: next, ...(isName ? { nameSettings: null } : { addressSettings: null }) })
  }
  // Name defaults live in subfields.<key>.defaultValue, address defaults in defaultValues.<key> (renderer keys).
  const defaultOf = (k) => (isName ? subs[k].defaultValue : dv[k]) ?? ''
  const setDefault = (k, v) => (isName ? write(k, { defaultValue: v }) : onUpdate({ defaultValues: { ...dv, [k]: v } }))
  return (
    <div className="space-y-2" data-testid="subfields-editor">
      <SubHeading tip="Show or hide each part, and set its label, placeholder and default value.">Sub-fields</SubHeading>
      {keys.map(([k]) => (
        <div key={k} className="p-2 bg-gray-50 rounded-lg border border-gray-200 space-y-1.5" data-subfield={k}>
          <label className="flex items-center gap-2 text-sm font-medium text-gray-700">
            <input type="checkbox" checked={subs[k].isVisible} onChange={(e) => write(k, { isVisible: e.target.checked })} aria-label={`Show ${subs[k].label}`} className="w-4 h-4 accent-blue-600" />
            <span>{keys.find((x) => x[0] === k)[1]}</span>
          </label>
          {subs[k].isVisible && (
            <div className="grid grid-cols-2 gap-1.5">
              <input aria-label={`${k} label`} placeholder="Label" value={subs[k].label} onChange={(e) => write(k, { label: e.target.value })} className={`${inputBase} min-w-0 text-xs`} />
              <input aria-label={`${k} placeholder`} placeholder="Placeholder" value={subs[k].placeholder} onChange={(e) => write(k, { placeholder: e.target.value })} className={`${inputBase} min-w-0 text-xs`} />
              {k !== 'prefix' && (
                <input aria-label={`${k} default value`} placeholder="Default value" value={defaultOf(k)} onChange={(e) => setDefault(k, e.target.value)} className={`${inputBase} min-w-0 text-xs col-span-2`} />
              )}
            </div>
          )}
        </div>
      ))}
    </div>
  )
}

/* ── Date / time / phone / textarea ─────────────────────────────────────────────────────────────── */

export function DateSettings({ field, onUpdate }) {
  const type = field.dateInputType || 'date-field'
  return (
    <div data-testid="date-settings">
      <SelectRow
        label="Date Input Type"
        testId="dateInputType"
        tip="Choose how users enter the date: typed, calendar popup or dropdowns."
        value={type}
        options={[{ value: 'date-field', label: 'Date Field' }, { value: 'date-picker', label: 'Date Picker' }, { value: 'date-dropdown', label: 'Date Drop Down' }]}
        onChange={(v) => onUpdate({ dateInputType: v, datePickerIcon: v === 'date-picker' ? (field.datePickerIcon || 'no-icon') : null })}
      />
      {type === 'date-picker' && (
        <Segmented label="Date Picker Icon" testId="datePickerIcon" value={field.datePickerIcon || 'no-icon'} options={[{ value: 'no-icon', label: 'No Icon' }, { value: 'calendar-icon', label: 'Calendar Icon' }]} onChange={(v) => onUpdate({ datePickerIcon: v })} />
      )}
      <SelectRow
        label="Date Format"
        testId="dateFormat"
        tip="Select the format in which the date will be displayed."
        value={field.dateFormat || 'mm/dd/yyyy'}
        options={['mm/dd/yyyy', 'dd/mm/yyyy', 'dd-mm-yyyy', 'dd.mm.yyyy', 'yyyy/mm/dd', 'yyyy-mm-dd', 'yyyy.mm.dd']}
        onChange={(v) => onUpdate({ dateFormat: v })}
      />
    </div>
  )
}

/** the reference builder values are '12hour' / '24hour'; older WP forms saved '12h' / '24h'. */
export const timeFormatOf = (field) => (field.timeFormat === '24h' || field.timeFormat === '24hour' ? '24hour' : '12hour')

export function TimeSettings({ field, onUpdate }) {
  const sf = field.subfields && typeof field.subfields === 'object' && !Array.isArray(field.subfields) ? field.subfields : {}
  const setPh = (k, v) => onUpdate({ subfields: { ...sf, [k]: { ...(sf[k] || {}), placeholder: v } } })
  return (
    <div data-testid="time-settings">
      <Segmented label="Time Format" testId="timeFormat" value={timeFormatOf(field)} options={[{ value: '12hour', label: '12 hour' }, { value: '24hour', label: '24 hour' }]} onChange={(v) => onUpdate({ timeFormat: v })} />
      <div className="grid grid-cols-2 gap-1.5 pt-1">
        <TextRow label="Hour Placeholder" testId="hourPlaceholder" value={sf.hour?.placeholder ?? ''} placeholder="HH" onChange={(v) => setPh('hour', v)} />
        <TextRow label="Minute Placeholder" testId="minutePlaceholder" value={sf.minute?.placeholder ?? ''} placeholder="MM" onChange={(v) => setPh('minute', v)} />
      </div>
    </div>
  )
}

export function PhoneSettings({ field, onUpdate }) {
  return <ToggleRow label="Enable Phone Mask" testId="enablePhoneMask" tip="Format the number with the country code while the user types." checked={field.enablePhoneMask} onChange={(v) => onUpdate({ enablePhoneMask: v })} />
}

export function RichTextToggle({ field, onUpdate }) {
  return <ToggleRow label="Rich Text Editor" testId="useRichTextEditor" tip="Let users format their answer (bold, italic, lists)." checked={field.useRichTextEditor} onChange={(v) => onUpdate({ useRichTextEditor: v })} />
}

/* ── Image styling (renderer: imageSize small/medium/large/custom/full, per-corner radius, border, shadow) ── */

export function ImageStyleSettings({ field, onUpdate }) {
  const size = field.imageSize || 'medium'
  const legacyRadius = isSet(field.imageBorderRadius) ? Number(field.imageBorderRadius) : undefined
  const corner = (k) => (isSet(field[k]) ? field[k] : legacyRadius)
  const corners = { imageBorderRadiusTopLeft: corner('imageBorderRadiusTopLeft'), imageBorderRadiusTopRight: corner('imageBorderRadiusTopRight'), imageBorderRadiusBottomRight: corner('imageBorderRadiusBottomRight'), imageBorderRadiusBottomLeft: corner('imageBorderRadiusBottomLeft') }
  return (
    <div className="space-y-1 pt-3 mt-2 border-t border-gray-100" data-testid="image-style-settings">
      <SubHeading tip="Size, corners, border and shadow of the image on the live form.">Image Style</SubHeading>
      <SelectRow label="Image Size" testId="imageSize" value={size}
        options={[{ value: 'small', label: 'Small (50px)' }, { value: 'medium', label: 'Medium (200px)' }, { value: 'large', label: 'Large (400px)' }, { value: 'custom', label: 'Custom' }, { value: 'full', label: 'Full Width' }]}
        onChange={(v) => onUpdate({ imageSize: v })} />
      {size === 'custom' && (
        <div className="grid grid-cols-2 gap-1.5">
          <NumberRow label="Max Width" testId="imageCustomWidth" slider={false} min={10} max={2000} value={field.imageCustomWidth} onChange={(v) => onUpdate({ imageCustomWidth: v })} />
          <NumberRow label="Max Height" testId="imageCustomHeight" slider={false} min={10} max={2000} value={field.imageCustomHeight} onChange={(v) => onUpdate({ imageCustomHeight: v })} />
        </div>
      )}
      <FourSides label="Corner Radius (px)" testId="imageCornerRadius" values={corners}
        keys={['imageBorderRadiusTopLeft', 'imageBorderRadiusTopRight', 'imageBorderRadiusBottomRight', 'imageBorderRadiusBottomLeft']}
        captions={['Top L', 'Top R', 'Bot R', 'Bot L']}
        onChange={(k, v) => onUpdate({ ...corners, [k]: v })} />
      <NumberRow label="Border Width" testId="imageBorderWidth" min={0} max={20} value={field.imageBorderWidth ?? 0} onChange={(v) => onUpdate({ imageBorderWidth: v })} onReset={() => onUpdate({ imageBorderWidth: null })} />
      <ColorRow label="Border Color" testId="imageBorderColor" value={field.imageBorderColor} placeholder="#E5E7EB" onChange={(v) => onUpdate({ imageBorderColor: v })} onClear={() => onUpdate({ imageBorderColor: null })} />
      <ColorRow label="Background" testId="imageBackgroundColor" value={field.imageBackgroundColor} placeholder="#FFFFFF" onChange={(v) => onUpdate({ imageBackgroundColor: v })} onClear={() => onUpdate({ imageBackgroundColor: null })} />
      <SelectRow label="Shadow" testId="imageBoxShadow" value={field.imageBoxShadow || 'none'} options={[{ value: 'none', label: 'None' }, { value: 'subtle', label: 'Subtle' }, { value: 'medium', label: 'Medium' }, { value: 'strong', label: 'Strong' }]} onChange={(v) => onUpdate({ imageBoxShadow: v })} />
    </div>
  )
}

/* ── Grid: column widths, wrapper + per-column styling (the reference builder F:11213-14460) ───── */

const WIDTH_PRESETS = {
  2: [['equal', 'Equal (1:1)'], ['narrow-wide', 'Narrow - Wide (1:2)'], ['wide-narrow', 'Wide - Narrow (2:1)'], ['very-narrow-wide', 'Very Narrow - Wide (1:3)'], ['wide-very-narrow', 'Wide - Very Narrow (3:1)'], ['custom', 'Custom']],
  3: [['equal', 'Equal'], ['center-wide', 'Center Wide (1:2:1)'], ['wide-narrow-narrow', 'Wide First (2:1:1)'], ['narrow-narrow-wide', 'Wide Last (1:1:2)'], ['custom', 'Custom']],
  4: [['equal', 'Equal'], ['wide-narrow-narrow-narrow', 'Wide First (3:1:1:1)'], ['narrow-wide-narrow-narrow', 'Wide Second (1:3:1:1)'], ['custom', 'Custom']],
}

/** Renderer column key for a grid column id ("col-0" → "column1"). */
export const columnKey = (key) => {
  const m = /^col-(\d+)$/.exec(key)
  return m ? `column${Number(m[1]) + 1}` : key
}

const SHADOW_DEFAULT = { dropShadowColor: 'rgba(15, 23, 42, 0.12)', dropShadowOffsetX: 0, dropShadowOffsetY: 4, dropShadowBlur: 16 }

export function GridSettings({ field, onUpdate }) {
  const colIds = field.columns && typeof field.columns === 'object' ? Object.keys(field.columns) : []
  const count = colIds.length
  const presets = WIDTH_PRESETS[count] || [['equal', 'Equal'], ['custom', 'Custom']]
  const widths = field.columnWidths || 'equal'
  const custom = Array.isArray(field.customColumnWidths) && field.customColumnWidths.length === count ? field.customColumnWidths : Array.from({ length: count }, () => Math.round(100 / Math.max(1, count)))
  const [col, setCol] = React.useState(colIds[0] ? columnKey(colIds[0]) : 'column1')
  const cb = (field.columnBackgrounds && field.columnBackgrounds[col]) || {}
  const cs = (field.columnDropShadows && field.columnDropShadows[col]) || null
  const cr = (field.columnBorderRadius && field.columnBorderRadius[col]) || { topLeft: 0, topRight: 0, bottomRight: 0, bottomLeft: 0 }
  const setColBg = (patch) => onUpdate({ columnBackgrounds: { ...(field.columnBackgrounds || {}), [col]: { ...cb, ...patch } } })
  const hasShadow = isSet(field.dropShadowColor)
  return (
    <div className="space-y-1" data-testid="grid-settings">
      {count > 1 && (
        <SelectRow label="Column Widths" testId="columnWidths" value={widths} options={presets.map(([value, label]) => ({ value, label }))}
          onChange={(v) => onUpdate(v === 'custom' ? { columnWidths: v, customColumnWidths: custom } : { columnWidths: v })} />
      )}
      {widths === 'custom' && count > 1 && (
        <div className="py-1" data-testid="custom-column-widths">
          <span className="block text-sm text-gray-500 mb-1">Custom Widths (%)</span>
          <div className="grid gap-1.5" style={{ gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))` }}>
            {custom.map((w, i) => (
              <input key={i} type="number" min={5} max={95} value={w} aria-label={`Column ${i + 1} width percent`} data-custom-width={i}
                onChange={(e) => { const next = [...custom]; next[i] = Number(e.target.value) || 0; onUpdate({ customColumnWidths: next }) }} className={`${inputBase} min-w-0 text-center`} />
            ))}
          </div>
          <span className={`block text-[11px] mt-1 ${custom.reduce((a, b) => a + Number(b || 0), 0) === 100 ? 'text-gray-400' : 'text-amber-600'}`}>Total {custom.reduce((a, b) => a + Number(b || 0), 0)}%</span>
        </div>
      )}
      {/* Extension grid options */}
      <Slot name="gridSettings.options" field={field} onUpdate={onUpdate} />

      <SubHeading tip="Background, corners and shadow of the whole grid.">Wrapper Styling</SubHeading>
      <ColorRow label="Background" testId="gridBackgroundColor" value={field.backgroundColor} placeholder="#FFFFFF" onChange={(v) => onUpdate({ backgroundColor: v })} onClear={() => onUpdate({ backgroundColor: null })} />
      <TextRow label="Background Image URL" testId="gridBackgroundImageUrl" value={field.backgroundImageUrl} placeholder="https://…" onChange={(v) => onUpdate({ backgroundImageUrl: v })} />
      {isSet(field.backgroundImageUrl) && (
        <>
          <ColorRow label="Overlay Color" testId="backgroundOverlayColor" value={field.backgroundOverlayColor} placeholder="#000000" onChange={(v) => onUpdate({ backgroundOverlayColor: v })} onClear={() => onUpdate({ backgroundOverlayColor: null })} />
          <NumberRow label="Overlay Opacity" testId="backgroundOverlayOpacity" unit="%" min={0} max={100} value={field.backgroundOverlayOpacity ?? 0} onChange={(v) => onUpdate({ backgroundOverlayOpacity: v })} />
        </>
      )}
      <SelectRow label="Corner Radius Applies To" testId="borderRadiusScope" value={field.borderRadiusScope || 'entire'}
        options={[{ value: 'entire', label: 'Entire grid' }, { value: 'columns', label: 'Each column' }, ...colIds.map((id, i) => ({ value: columnKey(id), label: `Column ${i + 1} only` }))]}
        onChange={(v) => onUpdate({ borderRadiusScope: v })} />
      {(field.borderRadiusScope || 'entire') === 'entire' && (
        <NumberRow label="Corner Radius" testId="gridBorderRadius" min={0} max={60} value={field.borderRadius ?? 0} onChange={(v) => onUpdate({ borderRadius: v })} onReset={() => onUpdate({ borderRadius: null })} />
      )}
      <ToggleRow label="Drop Shadow" testId="gridDropShadow" checked={hasShadow} onChange={(v) => onUpdate(v ? SHADOW_DEFAULT : { dropShadowColor: null, dropShadowOffsetX: null, dropShadowOffsetY: null, dropShadowBlur: null })} />
      {hasShadow && (
        <>
          <ColorRow label="Shadow Color" testId="dropShadowColor" value={field.dropShadowColor} onChange={(v) => onUpdate({ dropShadowColor: v })} />
          <NumberRow label="Shadow Blur" testId="dropShadowBlur" min={0} max={60} value={field.dropShadowBlur ?? 16} onChange={(v) => onUpdate({ dropShadowBlur: v })} />
          <NumberRow label="Shadow Y Offset" testId="dropShadowOffsetY" min={-30} max={30} value={field.dropShadowOffsetY ?? 4} onChange={(v) => onUpdate({ dropShadowOffsetY: v })} />
        </>
      )}

      {count > 0 && (
        <>
          <SubHeading tip="Background, corners and shadow of one column.">Column Styling</SubHeading>
          <Segmented testId="gridColumnPicker" value={col} options={colIds.map((id, i) => ({ value: columnKey(id), label: `Col ${i + 1}` }))} onChange={setCol} />
          <ColorRow label="Column Background" testId="columnBackgroundColor" value={cb.backgroundColor} placeholder="#FFFFFF" onChange={(v) => setColBg({ backgroundColor: v })} onClear={() => setColBg({ backgroundColor: null })} />
          <FourSides label="Column Corner Radius (px)" testId="columnBorderRadius" values={cr} keys={['topLeft', 'topRight', 'bottomRight', 'bottomLeft']} captions={['Top L', 'Top R', 'Bot R', 'Bot L']}
            onChange={(k, v) => onUpdate({ columnBorderRadius: { ...(field.columnBorderRadius || {}), [col]: { ...cr, [k]: v } }, ...((field.borderRadiusScope || 'entire') === 'entire' ? { borderRadiusScope: 'columns' } : {}) })} />
          <ToggleRow label="Column Shadow" testId="columnDropShadow" checked={Boolean(cs && cs.dropShadowColor)}
            onChange={(v) => onUpdate({ columnDropShadows: { ...(field.columnDropShadows || {}), [col]: v ? { ...SHADOW_DEFAULT } : null } })} />
          {cs && cs.dropShadowColor && (
            <ColorRow label="Column Shadow Color" testId="columnDropShadowColor" value={cs.dropShadowColor} onChange={(v) => onUpdate({ columnDropShadows: { ...(field.columnDropShadows || {}), [col]: { ...cs, dropShadowColor: v } } })} />
          )}
        </>
      )}
    </div>
  )
}

export { InfoTip }