import React, { useState } from 'react'
import { applyFilters } from '../../extensions/registry'
import { Trash2, Plus, ChevronUp, ChevronDown } from 'lucide-react'
import InfoTip from './InfoTip'

/**
 * Choice options editor (dropdown / checkbox / radio), the reference builder CheckboxFieldEditor + DropdownOptionsEditor:
 * label, value, default selection, price, quiz points, reorder, remove.
 * Reads string options (older forms) and object options; always writes objects {label, value, price?, points?, image?}.
 * Default selection uses the reference builder keys: checkbox / multi-dropdown → defaultValue: [values]; radio / dropdown → defaultValue: value.
 */
export const toOptionObject = (opt) => {
  if (opt && typeof opt === 'object') {
    const label = opt.label ?? opt.name ?? opt.value ?? ''
    return { ...opt, label: String(label), value: opt.value !== undefined && opt.value !== null && opt.value !== '' ? opt.value : String(label) }
  }
  const s = opt === undefined || opt === null ? '' : String(opt)
  return { label: s, value: s }
}

const slug = (s) => String(s).trim().toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, '') || 'option'

export default function OptionsEditor({ field, onUpdate }) {
  const options = (field.options || []).map(toOptionObject)
  const multi = field.type === 'checkbox' || ((field.type === 'select' || field.type === 'dropdown') && Boolean(field.isMulti ?? field.multiSelect))
  const [newLabel, setNewLabel] = useState('')

  const defaults = multi
    ? (Array.isArray(field.defaultValue) ? field.defaultValue : (field.defaultValue !== undefined && field.defaultValue !== null && field.defaultValue !== '' ? [field.defaultValue] : [])).map(String)
    : (Array.isArray(field.defaultValue) ? field.defaultValue.slice(0, 1) : [field.defaultValue]).filter((v) => v !== undefined && v !== null && v !== '').map(String)
  const isDefault = (opt) => defaults.includes(String(opt.value))

  const write = (nextOptions, extra = {}) => onUpdate({ options: nextOptions, ...extra })

  const setOption = (idx, patch) => {
    const prev = options[idx]
    const next = options.map((o, i) => (i === idx ? { ...o, ...patch } : o))
    const extra = {}
    // Keep the default selection pointing at the renamed value.
    if (patch.value !== undefined && isDefault(prev)) {
      extra.defaultValue = multi ? defaults.map((v) => (v === String(prev.value) ? patch.value : v)) : patch.value
    }
    write(next, extra)
  }

  const toggleDefault = (opt) => {
    const v = String(opt.value)
    if (multi) {
      const nextDefaults = defaults.includes(v) ? defaults.filter((d) => d !== v) : [...defaults, v]
      onUpdate({ defaultValue: nextDefaults })
    } else {
      onUpdate({ defaultValue: defaults.includes(v) ? '' : opt.value })
    }
  }

  const remove = (idx) => {
    const opt = options[idx]
    const extra = {}
    if (isDefault(opt)) extra.defaultValue = multi ? defaults.filter((d) => d !== String(opt.value)) : ''
    write(options.filter((_, i) => i !== idx), extra)
  }

  const move = (idx, dir) => {
    const to = idx + dir
    if (to < 0 || to >= options.length) return
    const next = [...options]
    const [o] = next.splice(idx, 1)
    next.splice(to, 0, o)
    write(next)
  }

  const add = (e) => {
    e.preventDefault()
    const label = newLabel.trim() || `Option ${options.length + 1}`
    let value = slug(label)
    const taken = new Set(options.map((o) => String(o.value)))
    let n = 2
    while (taken.has(value)) value = `${slug(label)}_${n++}`
    write([...options, { label, value }])
    setNewLabel('')
  }

  const numberOrUndef = (v) => (v === '' ? undefined : Number(v))
  // Extra per-option inputs from extensions (`optionsEditor.columns` filter: [{ key, width, render({ option, index,
  // setOption, field }) }]), shown between Value and Pts.
  const extraColumns = applyFilters('optionsEditor.columns', [], field) || []

  return (
    <div data-testid="options-editor">
      <div className="flex items-center justify-between mb-2">
        <label className="flex items-center text-sm font-medium text-gray-700">
          Options
          <InfoTip content="Define the available options users can choose from. Tick an option to pre-select it. Value is what is saved; Pts scores quizzes." />
        </label>
        <span className="text-[11px] text-gray-400">{multi ? 'Default: tick any' : 'Default: pick one'}</span>
      </div>
      <div className="space-y-2 mb-2.5">
        {options.map((opt, idx) => (
          <div key={idx} className="p-2 bg-gray-50 rounded-lg border border-gray-200" data-option-row={idx}>
            <div className="flex items-center gap-1.5">
              <input
                type={multi ? 'checkbox' : 'radio'}
                checked={isDefault(opt)}
                onChange={() => toggleDefault(opt)}
                onClick={(e) => { if (!multi && isDefault(opt)) { e.preventDefault(); toggleDefault(opt) } }}
                name={`opt-default-${field.id}`}
                aria-label={`Select "${opt.label}" by default`}
                title="Selected by default"
                className="w-4 h-4 flex-shrink-0 cursor-pointer accent-blue-600"
              />
              <input
                type="text"
                value={opt.label}
                onChange={(e) => setOption(idx, { label: e.target.value })}
                aria-label={`Option ${idx + 1} label`}
                data-option-label={idx}
                className="flex-1 min-w-0 h-[34px] px-2 text-sm border border-gray-200 rounded-md bg-white text-gray-900 focus:outline-none focus:ring-1 focus:ring-blue-500"
              />
              <button type="button" onClick={() => move(idx, -1)} disabled={idx === 0} aria-label={`Move option ${idx + 1} up`} title="Move up" className="w-6 h-6 flex items-center justify-center rounded text-gray-400 hover:text-gray-800 hover:bg-gray-200 disabled:opacity-30">
                <ChevronUp className="w-3.5 h-3.5" aria-hidden="true" />
              </button>
              <button type="button" onClick={() => move(idx, 1)} disabled={idx === options.length - 1} aria-label={`Move option ${idx + 1} down`} title="Move down" className="w-6 h-6 flex items-center justify-center rounded text-gray-400 hover:text-gray-800 hover:bg-gray-200 disabled:opacity-30">
                <ChevronDown className="w-3.5 h-3.5" aria-hidden="true" />
              </button>
              <button type="button" onClick={() => remove(idx)} aria-label={`Remove option ${idx + 1}`} title="Remove" className="w-6 h-6 flex items-center justify-center rounded text-gray-400 hover:text-red-600 hover:bg-red-50">
                <Trash2 className="w-3.5 h-3.5" aria-hidden="true" />
              </button>
            </div>
            <div className="grid gap-1.5 mt-1.5 pl-[22px]" style={{ gridTemplateColumns: ['1fr', ...extraColumns.map((c) => `${c.width || 64}px`), '52px'].join(' ') }}>
              <input type="text" value={opt.value ?? ''} onChange={(e) => setOption(idx, { value: e.target.value })} placeholder="Value" aria-label={`Option ${idx + 1} value`} data-option-value={idx} className="min-w-0 h-[34px] px-2 text-xs font-mono border border-gray-200 rounded-md bg-white text-gray-700 focus:outline-none focus:ring-1 focus:ring-blue-500" />
              {extraColumns.map((c) => <React.Fragment key={c.key}>{c.render({ option: opt, index: idx, setOption: (patch) => setOption(idx, patch), field })}</React.Fragment>)}
              <input type="number" value={opt.points ?? ''} onChange={(e) => setOption(idx, { points: numberOrUndef(e.target.value) })} placeholder="Pts" aria-label={`Option ${idx + 1} quiz points`} data-option-points={idx} className="min-w-0 h-[34px] px-1.5 text-xs border border-gray-200 rounded-md bg-white text-gray-700 focus:outline-none focus:ring-1 focus:ring-blue-500" />
            </div>
          </div>
        ))}
        {options.length === 0 && <p className="text-xs text-gray-400 py-1">No options yet.</p>}
      </div>
      <form onSubmit={add} className="flex gap-2">
        <input
          type="text"
          placeholder="New option..."
          value={newLabel}
          onChange={(e) => setNewLabel(e.target.value)}
          aria-label="New option label"
          className="flex-1 h-[34px] text-sm border border-gray-200 rounded-md px-3 focus:outline-none focus:ring-1 focus:ring-blue-500 text-gray-900"
        />
        <button type="submit" aria-label="Add option" title="Add option" className="h-[34px] px-3 inline-flex items-center gap-1 bg-gray-100 hover:bg-gray-200 text-gray-800 rounded-md text-sm cursor-pointer">
          <Plus className="w-4 h-4" aria-hidden="true" /> Add
        </button>
      </form>
    </div>
  )
}