import React, { useState, useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Palette, X, RefreshCw } from 'lucide-react';
import BackgroundImageControls from './interaction/BackgroundImageControls';
import { HexInput } from './InlineLabelEditor';

const SWATCHES = [
  '#ffffff', '#f8fafc', '#f1f5f9', '#e2e8f0', '#cbd5e1',
  '#fef2f2', '#fff7ed', '#fefce8', '#f0fdf4', '#eff6ff',
  '#faf5ff', '#fdf4ff', '#000000', 'transparent'
];

// Column background (the reference builder keys under columnBackgrounds.columnN, read by the storefront grid renderer):
// backgroundColor, backgroundImageUrl, backgroundImageSize (cover/contain/auto or a custom "N%"),
// backgroundImagePosition (9 positions), backgroundImageRepeat, backgroundOverlayColor + backgroundOverlayOpacity (0–100).
export default function InlineColumnBackgroundEditor({ isOpen, onClose, columnData = {}, onUpdate, anchorRef }) {
  // columnData uses the the reference builder keys (columnBackgrounds.columnN); older columnSettings keys are read as a fallback.
  const [bgColor, setBgColor] = useState(columnData.backgroundColor || columnData.bgColor || 'transparent');
  const [bgImage, setBgImage] = useState(columnData.backgroundImageUrl || columnData.bgImage || '');
  const [bgSize, setBgSize] = useState(columnData.backgroundImageSize || columnData.bgSize || 'cover');
  const [bgPosition, setBgPosition] = useState(columnData.backgroundImagePosition || columnData.bgPosition || 'center');
  const [bgRepeat, setBgRepeat] = useState(columnData.backgroundImageRepeat || 'no-repeat');
  const [overlayColor, setOverlayColor] = useState(columnData.backgroundOverlayColor || '#000000');
  const [overlayOpacity, setOverlayOpacity] = useState(Number(columnData.backgroundOverlayOpacity) || 0);

  const panelRef = useRef(null);
  const [position, setPosition] = useState({ top: 0, left: 0 });

  useEffect(() => {
    if (isOpen && anchorRef?.current) {
      const rect = anchorRef.current.getBoundingClientRect();
      const width = 288;
      let left = rect.left;
      if (left + width > window.innerWidth - 10) left = window.innerWidth - width - 10;
      setPosition({ top: Math.max(10, Math.min(rect.top + 30, window.innerHeight - 420)), left: Math.max(10, left) });
    }
  }, [isOpen, anchorRef]);

  useEffect(() => {
    if (!isOpen) return;
    const handler = (e) => {
      // The WordPress media modal lives outside the popover; picking an image there must not close it.
      if (e.target.closest && e.target.closest('.media-modal, .media-modal-backdrop')) return;
      if (panelRef.current && !panelRef.current.contains(e.target) && !anchorRef?.current?.contains(e.target)) {
        onClose();
      }
    };
    const onKey = (e) => {
      if (e.key !== 'Escape') return;
      // Escape in the WordPress media modal closes that modal only.
      const mediaOpen = Array.from(document.querySelectorAll('.media-modal')).some((el) => el.getClientRects().length > 0);
      if (mediaOpen) return;
      e.stopPropagation();
      onClose();
    };
    document.addEventListener('mousedown', handler);
    document.addEventListener('keydown', onKey, true);
    return () => {
      document.removeEventListener('mousedown', handler);
      document.removeEventListener('keydown', onKey, true);
    };
  }, [isOpen, onClose]);

  const STORED_KEYS = { bgColor: 'backgroundColor', bgImage: 'backgroundImageUrl', bgSize: 'backgroundImageSize', bgPosition: 'backgroundImagePosition' };
  const applyChanges = (updates) => {
    const mapped = {};
    Object.entries(updates).forEach(([k, v]) => { mapped[STORED_KEYS[k] || k] = v; });
    onUpdate(mapped);
  };

  const setColor = (color) => { setBgColor(color); applyChanges({ bgColor: color }); };

  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div className="wpvfb-builder">
    <div
      ref={panelRef}
      data-column-bg-editor="true"
      data-prevent-outside-click="true"
      onClick={(e) => e.stopPropagation()}
      onPointerDown={(e) => e.stopPropagation()}
      className="fixed z-[9999] bg-white rounded-xl shadow-2xl border border-gray-200 p-4 w-72 max-h-[80vh] overflow-y-auto"
      style={{ top: `${position.top}px`, left: `${position.left}px` }}
    >
      <div className="flex items-center justify-between mb-3 border-b border-gray-100 pb-2">
        <h4 className="text-xs font-bold text-gray-900 flex items-center gap-1.5"><Palette className="w-3.5 h-3.5 text-gray-700"/> Column Background</h4>
        <button type="button" aria-label="Close" onClick={onClose} className="text-gray-400 hover:text-gray-600"><X className="w-4 h-4" /></button>
      </div>

      <div className="space-y-4">
        {/* Background Color */}
        <div>
          <label className="block text-[10px] font-semibold text-gray-500 uppercase mb-2">Background Color</label>
          <div className="flex flex-wrap gap-1 mb-2">
            {SWATCHES.map(color => (
              <button
                key={color}
                type="button"
                onClick={() => setColor(color)}
                className={`w-5 h-5 rounded border ${bgColor === color ? 'border-gray-900 ring-1 ring-gray-900' : 'border-gray-200'}`}
                style={{ backgroundColor: color === 'transparent' ? '#fff' : color, backgroundImage: color === 'transparent' ? 'linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc)' : 'none', backgroundPosition: '0 0, 4px 4px', backgroundSize: '8px 8px' }}
                title={color}
              />
            ))}
          </div>
          <div className="flex items-center gap-2">
            <input type="color" aria-label="Background colour" value={/^#[0-9a-f]{6}$/i.test(bgColor) ? bgColor : '#ffffff'} onChange={(e) => setColor(e.target.value)} className="w-8 h-8 flex-shrink-0 rounded border border-gray-200 cursor-pointer" />
            <div className="flex-1 -mt-2"><HexInput value={/^#/.test(bgColor) ? bgColor : ''} onChange={setColor} label="Background hex colour" /></div>
          </div>
        </div>

        {/* Background Image */}
        <div>
          <label className="block text-[10px] font-semibold text-gray-500 uppercase mb-2">Background Image</label>
          <BackgroundImageControls
            mediaTitle="Select Column Background Image"
            value={{ url: bgImage, size: bgSize, position: bgPosition, repeat: bgRepeat }}
            onChange={(patch) => {
              const out = {};
              if ('url' in patch) { setBgImage(patch.url); out.bgImage = patch.url; }
              if ('size' in patch) {
                setBgSize(patch.size); out.bgSize = patch.size;
                // the reference builder keeps the custom width in its own key as well.
                if (!['cover', 'contain', 'auto'].includes(patch.size)) out.backgroundImageCustomWidth = patch.size;
              }
              if ('position' in patch) { setBgPosition(patch.position); out.bgPosition = patch.position; }
              if ('repeat' in patch) { setBgRepeat(patch.repeat); out.backgroundImageRepeat = patch.repeat; }
              applyChanges(out);
            }}
          />
        </div>

        {/* Overlay over the image (drawn only when there is an image, like the published form) */}
        {bgImage && (
          <div data-bg-overlay-controls="true">
            <label className="block text-[10px] font-semibold text-gray-500 uppercase mb-2">Image Overlay</label>
            <div className="flex items-center gap-2">
              <input
                type="color"
                aria-label="Overlay colour"
                value={/^#[0-9a-f]{6}$/i.test(overlayColor) ? overlayColor : '#000000'}
                onChange={(e) => { setOverlayColor(e.target.value); applyChanges({ backgroundOverlayColor: e.target.value, backgroundOverlayOpacity: overlayOpacity }); }}
                className="w-8 h-8 rounded border border-gray-200 cursor-pointer flex-shrink-0"
              />
              <input
                type="range"
                min="0"
                max="100"
                aria-label="Overlay opacity"
                value={overlayOpacity}
                onChange={(e) => { const v = parseInt(e.target.value, 10) || 0; setOverlayOpacity(v); applyChanges({ backgroundOverlayColor: overlayColor, backgroundOverlayOpacity: v }); }}
                className="flex-1 accent-gray-900"
              />
              <span className="text-[10px] font-mono text-gray-500 w-9 text-right">{overlayOpacity}%</span>
            </div>
          </div>
        )}

        <button type="button" onClick={() => {
          setBgColor('transparent');
          setBgImage('');
          setOverlayOpacity(0);
          applyChanges({ bgColor: 'transparent', bgImage: '', backgroundOverlayOpacity: 0 });
        }} className="w-full py-1.5 flex items-center justify-center gap-1.5 text-xs font-semibold text-gray-500 hover:text-gray-700 bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors">
          <RefreshCw className="w-3.5 h-3.5" /> Reset Background
        </button>
      </div>
    </div>
    </div>,
    document.body
  );
}