import React, { useState, useRef, useEffect } from 'react'
import {
  Upload,
  Trash2,
  Image as ImageIcon,
  Palette,
  X,
  Sliders,
  RotateCcw,
  Check,
} from 'lucide-react'
import { useFormStore } from '../store/useFormStore'
import BackgroundImageControls from './interaction/BackgroundImageControls'

const COLOR_PRESETS = [
  '#ffffff',
  '#f8fafc',
  '#f1f5f9',
  '#f0fdf4',
  '#eff6ff',
  '#faf5ff',
  '#fff1f2',
  '#0f172a',
]

export default function InlineFormBackgroundEditor({ isOpen, onClose }) {
  const settings = useFormStore((state) => state.settings)
  const setSettings = useFormStore((state) => state.setSettings)

  const [activeTab, setActiveTab] = useState('background') // 'background' | 'border' | 'dimensions'
  const fileInputRef = useRef(null)

  // Escape closes the editor (not while the WordPress media modal is open: Escape closes that one).
  useEffect(() => {
    if (!isOpen) return undefined
    const onKey = (e) => {
      if (e.key !== 'Escape') return
      const mediaOpen = Array.from(document.querySelectorAll('.media-modal')).some((el) => el.getClientRects().length > 0)
      if (mediaOpen) return
      e.stopPropagation()
      onClose()
    }
    document.addEventListener('keydown', onKey, true)
    return () => document.removeEventListener('keydown', onKey, true)
  }, [isOpen, onClose])

  if (!isOpen) return null

  const handleColorChange = (color) => {
    setSettings({ formBgColor: color })
  }

  const handleUploadImage = (e) => {
    const file = e.target.files?.[0]
    if (!file) return

    // If WordPress media library is available in window
    if (window.wp && window.wp.media) {
      const mediaFrame = window.wp.media({
        title: 'Select Form Background Image',
        button: { text: 'Use Image' },
        multiple: false,
      })
      mediaFrame.on('select', () => {
        const attachment = mediaFrame.state().get('selection').first().toJSON()
        setSettings({ backgroundImageUrl: attachment.url })
      })
      mediaFrame.open()
      return
    }

    // Fallback: Read local file as data URL
    const reader = new FileReader()
    reader.onload = () => {
      setSettings({ backgroundImageUrl: reader.result })
    }
    reader.readAsDataURL(file)
  }

  const handleWpMediaSelect = () => {
    if (window.wp && window.wp.media) {
      const mediaFrame = window.wp.media({
        title: 'Select Form Background Image',
        button: { text: 'Use Image' },
        multiple: false,
      })
      mediaFrame.on('select', () => {
        const attachment = mediaFrame.state().get('selection').first().toJSON()
        setSettings({ backgroundImageUrl: attachment.url })
      })
      mediaFrame.open()
    } else if (fileInputRef.current) {
      fileInputRef.current.click()
    }
  }

  const hasBackgroundImage = !!settings.backgroundImageUrl

  return (
    <div
      data-form-bg-editor="true"
      className="absolute top-0 left-0 mt-1 z-40 bg-white/95 backdrop-blur-md rounded-2xl shadow-2xl border border-slate-200/90 w-80 text-xs text-slate-700 animate-fadeIn"
      onClick={(e) => e.stopPropagation()}
      onMouseDown={(e) => e.stopPropagation()}
    >
      {/* Header with Tabs */}
      <div className="flex items-center justify-between px-3 pt-3 pb-2 border-b border-slate-150">
        <div className="flex items-center gap-1 bg-slate-100 p-0.5 rounded-lg">
          <button
            type="button"
            onClick={() => setActiveTab('background')}
            className={`px-2 py-1 rounded-md text-[11px] font-semibold transition-all ${
              activeTab === 'background'
                ? 'bg-white text-gray-900 font-bold shadow-2xs'
                : 'text-slate-500 hover:text-slate-800'
            }`}
          >
            Background
          </button>
          <button
            type="button"
            onClick={() => setActiveTab('border')}
            className={`px-2 py-1 rounded-md text-[11px] font-semibold transition-all ${
              activeTab === 'border'
                ? 'bg-white text-gray-900 font-bold shadow-2xs'
                : 'text-slate-500 hover:text-slate-800'
            }`}
          >
            Border & Shadow
          </button>
          <button
            type="button"
            onClick={() => setActiveTab('dimensions')}
            className={`px-2 py-1 rounded-md text-[11px] font-semibold transition-all ${
              activeTab === 'dimensions'
                ? 'bg-white text-gray-900 font-bold shadow-2xs'
                : 'text-slate-500 hover:text-slate-800'
            }`}
          >
            Size & Padding
          </button>
        </div>

        <button
          type="button"
          onClick={onClose}
          className="p-1 text-slate-400 hover:text-slate-600 rounded-md"
        >
          <X className="w-3.5 h-3.5" />
        </button>
      </div>

      {/* Body Content */}
      <div className="p-3.5 space-y-3.5 max-h-[380px] overflow-y-auto">
        {/* Tab 1: Background */}
        {activeTab === 'background' && (
          <div className="space-y-3">
            {/* Color Swatches */}
            <div>
              <label className="block text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1.5">
                Background Color
              </label>
              <div className="flex items-center gap-1.5 mb-2 flex-wrap">
                {COLOR_PRESETS.map((color) => (
                  <button
                    key={color}
                    type="button"
                    onClick={() => handleColorChange(color)}
                    style={{ backgroundColor: color }}
                    className={`w-6 h-6 rounded-md border transition-transform hover:scale-110 cursor-pointer ${
                      (settings.formBgColor || '#ffffff') === color
                        ? 'border-gray-900 ring-2 ring-gray-900/20 scale-105'
                        : 'border-slate-200'
                    }`}
                  />
                ))}
                {/* Native Color Picker */}
                <label className="relative w-6 h-6 rounded-md border border-slate-200 flex items-center justify-center cursor-pointer hover:bg-slate-50 overflow-hidden">
                  <Palette className="w-3 h-3 text-slate-600" />
                  <input
                    type="color"
                    value={settings.formBgColor || '#ffffff'}
                    onChange={(e) => handleColorChange(e.target.value)}
                    className="absolute inset-0 opacity-0 cursor-pointer w-full h-full"
                  />
                </label>
              </div>

              {/* Hex Input */}
              <div className="flex items-center gap-2">
                <input
                  type="text"
                  value={settings.formBgColor || '#ffffff'}
                  onChange={(e) => handleColorChange(e.target.value)}
                  className="w-24 px-2 py-1 text-xs border border-slate-200 rounded-md font-mono"
                  placeholder="#ffffff"
                />
                <button
                  type="button"
                  onClick={() => handleColorChange('transparent')}
                  className="px-2 py-1 text-[11px] text-slate-500 hover:text-slate-700 border border-slate-200 rounded-md hover:bg-slate-50"
                >
                  Transparent
                </button>
              </div>
            </div>

            {/* Background Image */}
            <div className="pt-2 border-t border-slate-100">
              <label className="block text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1.5">
                Background Image
              </label>
              <input
                ref={fileInputRef}
                type="file"
                accept="image/*"
                onChange={handleUploadImage}
                className="hidden"
              />

              {hasBackgroundImage ? (
                <div className="space-y-2">
                  <div className="flex items-center justify-between p-2 bg-slate-50 rounded-lg border border-slate-200">
                    <img
                      src={settings.backgroundImageUrl}
                      alt="Form Background"
                      className="w-10 h-10 object-cover rounded border border-slate-200"
                    />
                    <div className="flex items-center gap-1">
                      <button
                        type="button"
                        onClick={handleWpMediaSelect}
                        className="px-2 py-1 text-xs text-gray-900 hover:bg-gray-100 rounded border border-gray-300 font-medium"
                      >
                        Replace
                      </button>
                      <button
                        type="button"
                        onClick={() => setSettings({ backgroundImageUrl: '' })}
                        className="p-1.5 text-rose-500 hover:bg-rose-50 rounded"
                        title="Remove Image"
                      >
                        <Trash2 className="w-3.5 h-3.5" />
                      </button>
                    </div>
                  </div>

                  {/* Size (cover/contain/auto/custom %), repeat and 9 positions: keys the published form renders */}
                  <BackgroundImageControls
                    hideSource
                    value={{
                      url: settings.backgroundImageUrl,
                      size: settings.backgroundImageSize || 'cover',
                      position: settings.backgroundImagePosition || 'center',
                      repeat: settings.backgroundImageRepeat || 'no-repeat',
                    }}
                    onChange={(patch) => {
                      const next = {}
                      if ('size' in patch) next.backgroundImageSize = patch.size
                      if ('position' in patch) next.backgroundImagePosition = patch.position
                      if ('repeat' in patch) next.backgroundImageRepeat = patch.repeat
                      setSettings(next)
                    }}
                  />

                  {/* Opacity Slider */}
                  <div>
                    <div className="flex justify-between text-[11px] text-slate-500 mb-1">
                      <span>Opacity</span>
                      <span>{Math.round((settings.backgroundImageOpacity ?? 1) * 100)}%</span>
                    </div>
                    <input
                      type="range"
                      min="0"
                      max="1"
                      step="0.05"
                      value={settings.backgroundImageOpacity ?? 1}
                      onChange={(e) =>
                        setSettings({ backgroundImageOpacity: parseFloat(e.target.value) })
                      }
                      className="w-full h-1.5 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-gray-900"
                    />
                  </div>
                </div>
              ) : (
                <button
                  type="button"
                  onClick={handleWpMediaSelect}
                  className="w-full py-2.5 px-3 border border-dashed border-slate-300 hover:border-gray-900 rounded-lg flex items-center justify-center gap-1.5 text-slate-600 hover:text-gray-900 bg-slate-50/50 hover:bg-gray-100/50 transition-all cursor-pointer font-medium text-xs"
                >
                  <Upload className="w-3.5 h-3.5" />
                  <span>Choose or Upload Image</span>
                </button>
              )}
            </div>
          </div>
        )}

        {/* Tab 2: Border & Shadow */}
        {activeTab === 'border' && (
          <div className="space-y-3">
            <div>
              <div className="flex justify-between text-[11px] text-slate-600 mb-1">
                <span>Corner Radius</span>
                <span className="font-mono">{settings.formBorderRadius ?? settings.borderRadius ?? 8}px</span>
              </div>
              <input
                type="range"
                min="0"
                max="32"
                value={settings.formBorderRadius ?? settings.borderRadius ?? 8}
                onChange={(e) => setSettings({ formBorderRadius: parseInt(e.target.value) || 0 })}
                className="w-full h-1.5 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-gray-900"
              />
            </div>

            <div>
              <div className="flex justify-between text-[11px] text-slate-600 mb-1">
                <span>Border Width</span>
                <span className="font-mono">{settings.formBorderWidth ?? 1}px</span>
              </div>
              <input
                type="range"
                min="0"
                max="8"
                value={settings.formBorderWidth ?? 1}
                onChange={(e) => setSettings({ formBorderWidth: parseInt(e.target.value) || 0 })}
                className="w-full h-1.5 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-gray-900"
              />
            </div>

            <div className="grid grid-cols-2 gap-2 text-[11px]">
              <div>
                <span className="block text-slate-500 mb-1">Border Style</span>
                <select
                  value={settings.formBorderStyle || 'solid'}
                  onChange={(e) => setSettings({ formBorderStyle: e.target.value })}
                  className="w-full px-2 py-1 border border-slate-200 rounded-md bg-white"
                >
                  <option value="solid">Solid</option>
                  <option value="dashed">Dashed</option>
                  <option value="dotted">Dotted</option>
                  <option value="none">None</option>
                </select>
              </div>

              <div>
                <span className="block text-slate-500 mb-1">Border Color</span>
                <div className="flex items-center gap-1.5">
                  <input
                    type="color"
                    value={settings.formBorderColor || '#e2e8f0'}
                    onChange={(e) => setSettings({ formBorderColor: e.target.value })}
                    className="w-6 h-6 border border-slate-200 rounded cursor-pointer"
                  />
                  <input
                    type="text"
                    value={settings.formBorderColor || '#e2e8f0'}
                    onChange={(e) => setSettings({ formBorderColor: e.target.value })}
                    className="w-16 px-1.5 py-0.5 border border-slate-200 rounded text-[11px] font-mono"
                  />
                </div>
              </div>
            </div>

            <div className="pt-2 border-t border-slate-100">
              <span className="block text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1.5">
                Drop Shadow
              </span>
              <div className="grid grid-cols-4 gap-1.5">
                {[
                  { label: 'None', val: 'none' },
                  { label: 'Subtle', val: 'sm' },
                  { label: 'Medium', val: 'md' },
                  { label: 'Large', val: 'xl' },
                ].map((s) => (
                  <button
                    key={s.val}
                    type="button"
                    onClick={() => setSettings({ formShadow: s.val })}
                    className={`py-1 rounded-md text-[11px] font-medium border transition-all ${
                      (settings.formShadow || 'sm') === s.val
                        ? 'border-gray-900 bg-gray-100 text-gray-900 font-bold'
                        : 'border-slate-200 text-slate-600 hover:bg-slate-50'
                    }`}
                  >
                    {s.label}
                  </button>
                ))}
              </div>
            </div>
          </div>
        )}

        {/* Tab 3: Dimensions & Padding */}
        {activeTab === 'dimensions' && (
          <div className="space-y-3">
            {/* Form Width */}
            <div>
              <div className="flex justify-between items-center mb-1 text-[11px] text-slate-600">
                <span>Form Width</span>
                <button
                  type="button"
                  onClick={() => setSettings({ formWidth: 600 })}
                  className="text-slate-400 hover:text-slate-600"
                  title="Reset to 600px"
                >
                  <RotateCcw className="w-3 h-3" />
                </button>
              </div>
              <div className="flex items-center gap-2">
                <input
                  type="range"
                  min="320"
                  max="1200"
                  step="10"
                  value={settings.formWidth || 600}
                  onChange={(e) => setSettings({ formWidth: parseInt(e.target.value) || 600 })}
                  className="flex-1 h-1.5 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-gray-900"
                />
                <input
                  type="number"
                  value={settings.formWidth || 600}
                  onChange={(e) => setSettings({ formWidth: parseInt(e.target.value) || 600 })}
                  className="w-14 px-1.5 py-0.5 border border-slate-200 rounded text-center text-xs font-mono"
                />
                <span className="text-slate-400 text-xs">px</span>
              </div>
            </div>

            {/* Form Max Height */}
            <div>
              <div className="flex justify-between items-center mb-1 text-[11px] text-slate-600">
                <span>Max Height</span>
                <button
                  type="button"
                  onClick={() => setSettings({ formMaxHeight: 'auto' })}
                  className="text-slate-400 hover:text-slate-600"
                  title="Reset to Auto"
                >
                  <RotateCcw className="w-3 h-3" />
                </button>
              </div>
              <div className="flex items-center gap-2">
                <input
                  type="range"
                  min="200"
                  max="1000"
                  step="20"
                  value={parseInt(settings.formMaxHeight) || 200}
                  onChange={(e) => setSettings({ formMaxHeight: `${e.target.value}px` })}
                  className="flex-1 h-1.5 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-gray-900"
                />
                <span className="w-14 text-center text-xs text-slate-600 font-mono">
                  {settings.formMaxHeight || 'auto'}
                </span>
              </div>
            </div>

            {/* Container Padding */}
            <div>
              <div className="flex justify-between items-center mb-1 text-[11px] text-slate-600">
                <span>Container Padding</span>
                <span className="font-mono">{settings.formPadding || 24}px</span>
              </div>
              <input
                type="range"
                min="12"
                max="64"
                step="4"
                value={settings.formPadding || 24}
                onChange={(e) => setSettings({ formPadding: parseInt(e.target.value) || 24 })}
                className="w-full h-1.5 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-gray-900"
              />
            </div>
          </div>
        )}
      </div>

      {/* Footer */}
      <div className="px-3 py-2 bg-slate-50 border-t border-slate-150 rounded-b-2xl flex justify-between items-center">
        <span className="text-[10px] text-slate-400">Applies instantly to canvas</span>
        <button
          type="button"
          onClick={onClose}
          className="flex items-center gap-1 px-2.5 py-1 bg-gray-900 hover:bg-black text-white rounded-md text-xs font-semibold shadow-xs cursor-pointer"
        >
          <Check className="w-3.5 h-3.5" /> Done
        </button>
      </div>
    </div>
  )
}