import React from 'react'
import { Upload, Image as ImageIcon, Trash2 } from 'lucide-react'

// Shared background-image controls of the column and form background editors (the reference builder keys: background image URL,
// size cover/contain/auto/custom %, 9 positions, repeat). `value` = { url, size, position, repeat }.

export const BG_POSITIONS = [
  ['center', 'Center'], ['top', 'Top'], ['bottom', 'Bottom'], ['left', 'Left'], ['right', 'Right'],
  ['top left', 'Top Left'], ['top right', 'Top Right'], ['bottom left', 'Bottom Left'], ['bottom right', 'Bottom Right'],
]
export const BG_REPEATS = [['no-repeat', 'None'], ['repeat', 'Both'], ['repeat-x', 'Horizontal'], ['repeat-y', 'Vertical']]

/** A custom size is stored as the CSS value itself ("60%"), which the published form prints unchanged. */
export const isCustomSize = (size) => Boolean(size) && !['cover', 'contain', 'auto'].includes(size)
export const customSizePercent = (size) => {
  const n = parseInt(String(size || '').replace(/[^0-9]/g, ''), 10)
  return Number.isNaN(n) ? 100 : n
}

/** Opens the WordPress media library (wp.media); falls back to asking for a URL when it is not loaded. */
export function openMediaLibrary({ title, current, onSelect }) {
  if (typeof window !== 'undefined' && window.wp && window.wp.media) {
    const frame = window.wp.media({ title, button: { text: 'Use Image' }, library: { type: 'image' }, multiple: false })
    frame.on('select', () => {
      const attachment = frame.state().get('selection').first().toJSON()
      if (attachment && attachment.url) onSelect(attachment.url, attachment)
    })
    frame.open()
    return frame
  }
  const url = typeof window !== 'undefined' ? window.prompt('Image URL', current || '') : null
  if (url !== null && url !== undefined) onSelect(url, null)
  return null
}

const selectCls = 'w-full px-2 py-1.5 text-xs border border-gray-200 rounded-md bg-white focus:outline-none focus:border-gray-900'

export default function BackgroundImageControls({ value, onChange, mediaTitle = 'Select Background Image', hideSource = false }) {
  const { url = '', size = 'cover', position = 'center', repeat = 'no-repeat' } = value || {}
  const custom = isCustomSize(size)
  return (
    <div className="space-y-2" data-bg-image-controls="true">
      {!hideSource && (<>
      <div className="flex items-center gap-1.5">
        <button
          type="button"
          data-bg-upload="true"
          onClick={(e) => {
            e.stopPropagation()
            openMediaLibrary({ title: mediaTitle, current: url, onSelect: (u) => onChange({ url: u }) })
          }}
          className="flex-1 flex items-center justify-center gap-1.5 px-2 py-1.5 text-xs font-semibold border border-gray-200 rounded-md bg-white hover:bg-gray-50 text-gray-800 cursor-pointer"
          style={{ minHeight: 34 }}
        >
          <Upload className="w-3.5 h-3.5" /> {url ? 'Replace Image' : 'Upload Image'}
        </button>
        {url && (
          <button
            type="button"
            title="Remove image"
            aria-label="Remove image"
            onClick={(e) => { e.stopPropagation(); onChange({ url: '' }) }}
            className="p-2 rounded-md border border-gray-200 text-red-500 hover:bg-red-50 cursor-pointer"
          >
            <Trash2 className="w-3.5 h-3.5" />
          </button>
        )}
      </div>
      <div className="relative">
        <ImageIcon className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-gray-400" />
        <input
          type="text"
          aria-label="Image URL"
          placeholder="https://..."
          value={url}
          onChange={(e) => onChange({ url: e.target.value })}
          onKeyDown={(e) => e.stopPropagation()}
          className="w-full pl-7 pr-3 py-1.5 text-xs border border-gray-200 rounded-md focus:outline-none focus:border-gray-900"
          style={{ minHeight: 34 }}
        />
      </div>
      </>)}
      {url && (
        <>
          <div className="grid grid-cols-2 gap-2">
            <label className="block">
              <span className="block text-[10px] text-gray-500 mb-1">Size</span>
              <select aria-label="Background size" value={custom ? 'custom' : size} onChange={(e) => onChange({ size: e.target.value === 'custom' ? `${customSizePercent(size)}%` : e.target.value })} className={selectCls} style={{ minHeight: 34 }}>
                <option value="cover">Cover</option>
                <option value="contain">Contain</option>
                <option value="auto">Auto</option>
                <option value="custom">Custom</option>
              </select>
            </label>
            <label className="block">
              <span className="block text-[10px] text-gray-500 mb-1">Repeat</span>
              <select aria-label="Background repeat" value={repeat} onChange={(e) => onChange({ repeat: e.target.value })} className={selectCls} style={{ minHeight: 34 }}>
                {BG_REPEATS.map(([v, l]) => <option key={v} value={v}>{l}</option>)}
              </select>
            </label>
          </div>
          {custom && (
            <label className="flex items-center gap-2">
              <span className="text-[10px] text-gray-500 whitespace-nowrap">Width (%)</span>
              <input
                type="number"
                min="1"
                max="500"
                aria-label="Custom size percent"
                value={customSizePercent(size)}
                onChange={(e) => { const n = parseInt(e.target.value, 10); if (n > 0) onChange({ size: `${n}%` }) }}
                onKeyDown={(e) => e.stopPropagation()}
                className="w-20 px-2 py-1.5 text-xs border border-gray-200 rounded-md focus:outline-none focus:border-gray-900"
                style={{ minHeight: 34 }}
              />
            </label>
          )}
          <label className="block">
            <span className="block text-[10px] text-gray-500 mb-1">Position</span>
            <select aria-label="Background position" value={position} onChange={(e) => onChange({ position: e.target.value })} className={selectCls} style={{ minHeight: 34 }}>
              {BG_POSITIONS.map(([v, l]) => <option key={v} value={v}>{l}</option>)}
            </select>
          </label>
        </>
      )}
    </div>
  )
}