import React from 'react'
import { RotateCcw, X } from 'lucide-react'
import InfoTip from './InfoTip'

// Shared storefront-style rows used by the Theme, Pages and Field Settings panels.
// the reference builder idiom: label left; read-only hex + circle swatch + reset on the right; numbers as slider + number + unit + reset.

export const inputBase = 'h-[34px] px-2.5 py-1.5 text-sm text-gray-900 border border-gray-200 rounded-md bg-white box-border focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500'

const isSet = (v) => v !== undefined && v !== null && v !== ''

export function SubHeading({ children, tip }) {
  return (
    <h4 className="flex items-center text-sm font-medium text-gray-900 mb-2 mt-1">
      <span>{children}</span>
      {tip && <InfoTip content={tip} />}
    </h4>
  )
}

/**
 * Colour row. `value` unset shows "Inherit" (the global theme colour applies). `onClear` (optional) writes null so the
 * key is really removed from the stored field (updateField merges); `onReset` (optional) restores a default.
 */
export function ColorRow({ label, value, placeholder = '#000000', onChange, onClear, onReset, tip, testId }) {
  const shown = isSet(value) ? String(value) : ''
  const swatch = isSet(value) ? String(value) : placeholder
  const pickerValue = /^#[0-9a-fA-F]{6}$/.test(swatch) ? swatch : (/^#[0-9a-fA-F]{3}$/.test(swatch) ? `#${swatch[1]}${swatch[1]}${swatch[2]}${swatch[2]}${swatch[3]}${swatch[3]}` : '#000000')
  return (
    <div className="flex items-center justify-between gap-2 py-1" data-color-row={testId || label} data-styling-control={testId}>
      <label className="flex items-center text-sm text-gray-500 min-w-0">
        <span className="truncate">{label}</span>
        {tip && <InfoTip content={tip} />}
      </label>
      <div className="flex items-center gap-2 flex-shrink-0">
        <input
          type="text"
          value={shown}
          placeholder="Inherit"
          onChange={(e) => onChange(e.target.value)}
          aria-label={`${label} hex value`}
          className="w-[84px] h-[34px] px-2 text-xs font-mono uppercase placeholder:normal-case placeholder:font-sans border border-gray-200 rounded-md bg-gray-50 text-gray-700 focus:outline-none focus:ring-1 focus:ring-blue-500"
        />
        <span
          className="relative w-5 h-5 rounded-full cursor-pointer flex-shrink-0"
          style={{ boxShadow: '0 0 0 2px #d1d5db', backgroundColor: isSet(value) ? swatch : 'transparent', backgroundImage: isSet(value) ? 'none' : 'linear-gradient(45deg,#e5e7eb 25%,transparent 25%,transparent 75%,#e5e7eb 75%),linear-gradient(45deg,#e5e7eb 25%,transparent 25%,transparent 75%,#e5e7eb 75%)', backgroundSize: '8px 8px', backgroundPosition: '0 0,4px 4px' }}
        >
          <input
            type="color"
            value={pickerValue}
            onChange={(e) => onChange(e.target.value)}
            aria-label={`${label} colour picker`}
            className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
          />
        </span>
        {onClear ? (
          <button
            type="button"
            onClick={onClear}
            disabled={!isSet(value)}
            title="Clear (use the theme colour)"
            aria-label={`Clear ${label}`}
            className="w-6 h-6 flex items-center justify-center rounded text-gray-400 hover:text-gray-800 hover:bg-gray-100 disabled:opacity-30 disabled:cursor-default"
          >
            <X className="w-3.5 h-3.5" aria-hidden="true" />
          </button>
        ) : onReset ? (
          <button
            type="button"
            onClick={onReset}
            title="Reset to default"
            aria-label={`Reset ${label}`}
            className="w-6 h-6 flex items-center justify-center rounded text-gray-400 hover:text-gray-800 hover:bg-gray-100"
          >
            <RotateCcw className="w-3.5 h-3.5" aria-hidden="true" />
          </button>
        ) : null}
      </div>
    </div>
  )
}

/** Slider + number input + unit + reset (the reference builder "Small [n] px ⟲"). */
export function NumberRow({ label, value, min = 0, max = 100, step = 1, unit = 'px', onChange, onReset, tip, testId, slider = true }) {
  const num = isSet(value) ? Number(value) : ''
  return (
    <div className="py-1.5" data-number-row={testId || label} data-styling-control={testId}>
      <div className="flex items-center justify-between gap-2">
        <label className="flex items-center text-sm text-gray-500 min-w-0">
          <span className="truncate">{label}</span>
          {tip && <InfoTip content={tip} />}
        </label>
        <div className="flex items-center gap-1.5 flex-shrink-0">
          <input
            type="number"
            min={min}
            max={max}
            step={step}
            value={num}
            onChange={(e) => onChange(e.target.value === '' ? null : parseFloat(e.target.value))}
            aria-label={label}
            className="w-[68px] h-[34px] px-2 text-sm border border-gray-200 rounded-md bg-gray-50 text-gray-900 box-border focus:outline-none focus:ring-1 focus:ring-blue-500"
          />
          {unit && <span className="text-xs text-gray-500 w-4">{unit}</span>}
          {onReset && (
            <button
              type="button"
              onClick={onReset}
              title="Reset to default"
              aria-label={`Reset ${label}`}
              className="w-6 h-6 flex items-center justify-center rounded text-gray-400 hover:text-gray-800 hover:bg-gray-100"
            >
              <RotateCcw className="w-3.5 h-3.5" aria-hidden="true" />
            </button>
          )}
        </div>
      </div>
      {slider && (
        <input
          type="range"
          min={min}
          max={max}
          step={step}
          value={num === '' ? min : num}
          onChange={(e) => onChange(parseFloat(e.target.value))}
          aria-label={`${label} slider`}
          className="w-full mt-1.5 h-1.5 accent-blue-600 cursor-pointer"
        />
      )}
    </div>
  )
}

export function SelectRow({ label, value, options, onChange, tip, testId, onReset }) {
  return (
    <div className="py-1.5" data-select-row={testId || label} data-styling-control={testId}>
      <label className="flex items-center text-sm text-gray-500 mb-1">
        <span>{label}</span>
        {tip && <InfoTip content={tip} />}
      </label>
      <div className="flex items-center gap-1.5">
        <select value={value ?? ''} onChange={(e) => onChange(e.target.value)} aria-label={label} className={`${inputBase} w-full`}>
          {options.map((o) => {
            const opt = typeof o === 'object' ? o : { value: o, label: o }
            return <option key={String(opt.value)} value={opt.value}>{opt.label}</option>
          })}
        </select>
        {onReset && (
          <button type="button" onClick={onReset} title="Reset to default" aria-label={`Reset ${label}`} className="w-6 h-6 flex-shrink-0 flex items-center justify-center rounded text-gray-400 hover:text-gray-800 hover:bg-gray-100">
            <RotateCcw className="w-3.5 h-3.5" aria-hidden="true" />
          </button>
        )}
      </div>
    </div>
  )
}

export function TextRow({ label, value, onChange, placeholder, tip, testId, type = 'text' }) {
  return (
    <div className="py-1.5" data-text-row={testId || label}>
      <label className="flex items-center text-sm text-gray-500 mb-1">
        <span>{label}</span>
        {tip && <InfoTip content={tip} />}
      </label>
      <input type={type} value={value ?? ''} placeholder={placeholder} onChange={(e) => onChange(e.target.value)} aria-label={label} className={`${inputBase} w-full`} />
    </div>
  )
}

/** the reference builder toggle switch (peer checkbox). */
export function ToggleRow({ label, checked, onChange, tip, testId, disabled = false }) {
  return (
    <div className="flex items-center justify-between gap-2 py-1.5" data-toggle-row={testId || label}>
      <span className="flex items-center text-sm text-gray-700">
        <span>{label}</span>
        {tip && <InfoTip content={tip} />}
      </span>
      <label className="relative inline-flex items-center cursor-pointer flex-shrink-0">
        <input type="checkbox" role="switch" aria-label={label} className="sr-only peer" checked={Boolean(checked)} disabled={disabled} onChange={(e) => onChange(e.target.checked)} />
        <span className="w-9 h-5 bg-gray-200 rounded-full peer peer-focus-visible:ring-2 peer-focus-visible:ring-blue-300 peer-checked:bg-blue-600 transition-colors after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border after:border-gray-300 after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:after:translate-x-4 peer-checked:after:border-white" />
      </label>
    </div>
  )
}

/** Segmented buttons (e.g. 12h / 24h, left / center / right). */
export function Segmented({ label, value, options, onChange, tip, testId }) {
  return (
    <div className="py-1.5" data-segmented={testId || label}>
      {label && (
        <label className="flex items-center text-sm text-gray-500 mb-1">
          <span>{label}</span>
          {tip && <InfoTip content={tip} />}
        </label>
      )}
      <div className="flex rounded-md border border-gray-200 overflow-hidden" role="group" aria-label={label}>
        {options.map((o) => {
          const active = String(value) === String(o.value)
          return (
            <button
              key={String(o.value)}
              type="button"
              aria-pressed={active}
              onClick={() => onChange(o.value)}
              className={`flex-1 h-[34px] px-2 text-xs font-medium border-r last:border-r-0 border-gray-200 ${active ? 'bg-blue-50 text-blue-700' : 'bg-white text-gray-600 hover:bg-gray-50'}`}
            >
              {o.label}
            </button>
          )
        })}
      </div>
    </div>
  )
}

/** Four numeric inputs (top/right/bottom/left or corners). */
export function FourSides({ label, values = {}, keys = ['top', 'right', 'bottom', 'left'], captions = ['Top', 'Right', 'Bottom', 'Left'], onChange, tip, testId }) {
  return (
    <div className="py-1.5" data-four-sides={testId || label}>
      <label className="flex items-center text-sm text-gray-500 mb-1">
        <span>{label}</span>
        {tip && <InfoTip content={tip} />}
      </label>
      <div className="grid grid-cols-4 gap-1.5">
        {keys.map((k, i) => (
          <div key={k}>
            <input
              type="number"
              value={isSet(values[k]) ? values[k] : ''}
              onChange={(e) => onChange(k, e.target.value === '' ? 0 : parseFloat(e.target.value))}
              aria-label={`${label} ${captions[i]}`}
              className="w-full h-[34px] px-1.5 text-sm text-center border border-gray-200 rounded-md bg-white box-border focus:outline-none focus:ring-1 focus:ring-blue-500"
            />
            <span className="block text-[10px] text-center text-gray-400 mt-0.5">{captions[i]}</span>
          </div>
        ))}
      </div>
    </div>
  )
}