import React, { useState, useRef, useEffect } from 'react'
import { createPortal } from 'react-dom'
import {
  X,
  Check,
  Minus,
  Plus,
  AlignLeft,
  AlignCenter,
  AlignRight,
  Maximize2,
  Palette,
} from 'lucide-react'
import { HexColorPicker } from 'react-colorful'
import { useFormStore } from '../store/useFormStore'

// Opened from a submit field (`field` + `onUpdateField`): edits that field with the the reference builder keys the storefront reads
// (name/label, backgroundColor, textColor, fontSize, labelFontWeight, labelFontStyle, submitButtonAlignment,
// submitButtonWidth). Without a field it edits the form-level settings.submit* keys.
export default function InlineSubmitButtonEditor({ isOpen, onClose, anchorRef, field, onUpdateField }) {
  const settings = useFormStore((state) => state.settings)
  const setSettings = useFormStore((state) => state.setSettings)
  const setIsDirty = useFormStore((state) => state.setIsDirty)

  const [showBgPicker, setShowBgPicker] = useState(false)
  const [showTextPicker, setShowTextPicker] = useState(false)
  const [position, setPosition] = useState({ top: 200, left: 200 })
  const modalRef = useRef(null)
  const textRef = useRef(null)
  // The button's own box: the text is edited in place, inside the button (the reference builder).
  const [btnBox, setBtnBox] = useState(null)

  useEffect(() => {
    if (!isOpen || !anchorRef?.current) { setBtnBox(null); return undefined }
    const measure = () => {
      const el = anchorRef.current
      if (!el) return
      const r = el.getBoundingClientRect()
      const cs = window.getComputedStyle(el)
      setBtnBox({
        top: r.top, left: r.left, width: r.width, height: r.height,
        font: { fontFamily: cs.fontFamily, fontSize: cs.fontSize, fontWeight: cs.fontWeight, fontStyle: cs.fontStyle, lineHeight: cs.lineHeight, letterSpacing: cs.letterSpacing },
        color: cs.color, backgroundColor: cs.backgroundColor, backgroundImage: cs.backgroundImage, borderRadius: cs.borderRadius,
        paddingLeft: cs.paddingLeft, paddingRight: cs.paddingRight,
      })
    }
    measure()
    const ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(measure) : null
    if (ro) ro.observe(anchorRef.current)
    window.addEventListener('scroll', measure, true)
    window.addEventListener('resize', measure)
    return () => {
      if (ro) ro.disconnect()
      window.removeEventListener('scroll', measure, true)
      window.removeEventListener('resize', measure)
    }
  }, [isOpen, anchorRef, field])

  // Escape closes the editor (and its colour pickers) from anywhere.
  useEffect(() => {
    if (!isOpen) return undefined
    const onKey = (e) => {
      if (e.key !== 'Escape') return
      e.stopPropagation()
      setShowBgPicker(false)
      setShowTextPicker(false)
      onClose()
    }
    document.addEventListener('keydown', onKey, true)
    return () => document.removeEventListener('keydown', onKey, true)
  }, [isOpen, onClose])

  useEffect(() => {
    if (isOpen) {
      const updatePos = () => {
        if (!anchorRef?.current) {
          setPosition({ top: Math.max(20, Math.round(window.innerHeight / 2 - 180)), left: Math.max(20, Math.round(window.innerWidth / 2 - 170)) })
          return
        }
        const rect = anchorRef.current.getBoundingClientRect()
        const modalWidth = 340
        const modalHeight = 360
        let left = Math.round(rect.left + rect.width / 2 - modalWidth / 2)
        let top = Math.round(rect.top - modalHeight - 12)

        if (top < 10) top = Math.round(rect.bottom + 12)
        if (left < 10) left = 10
        if (left + modalWidth > window.innerWidth - 10) left = window.innerWidth - modalWidth - 10

        setPosition({ top, left })
      }
      updatePos()
      window.addEventListener('resize', updatePos)
      window.addEventListener('scroll', updatePos, true)

      const handleOutside = (e) => {
        if (modalRef.current && modalRef.current.contains(e.target)) return
        if (textRef.current && textRef.current.contains(e.target)) return
        if (anchorRef?.current && anchorRef.current.contains(e.target)) return
        onClose()
      }
      // Add listener with a slight timeout to ensure opening click has finished
      const timer = setTimeout(() => {
        document.addEventListener('mousedown', handleOutside)
      }, 50)
      return () => {
        clearTimeout(timer)
        window.removeEventListener('resize', updatePos)
        window.removeEventListener('scroll', updatePos, true)
        document.removeEventListener('mousedown', handleOutside)
      }
    }
  }, [isOpen, anchorRef, onClose])

  if (!isOpen) return null

  const isField = Boolean(field && onUpdateField)
  const firstSet = (...vals) => vals.find((v) => v !== undefined && v !== null && v !== '')
  const fieldPad = (side) => firstSet(field?.buttonPadding?.[side], Number(field?.padding?.[side]) > 0 ? field.padding[side] : undefined)
  const fieldBg = isField && typeof field.backgroundColor === 'string' && !field.backgroundColor.includes('gradient') ? field.backgroundColor : null

  const btnText = isField ? firstSet(field.buttonText, field.label, field.name, settings.submitButtonText, 'Submit') : (settings.submitButtonText || 'Submit')
  const btnBg = isField ? firstSet(fieldBg, settings.submitButtonBgColor, '#4f46e5') : (settings.submitButtonBgColor || '#10B981')
  const btnColor = isField ? firstSet(field.textColor, settings.submitButtonTextColor, '#ffffff') : (settings.submitButtonTextColor || '#ffffff')
  const btnRadius = isField ? Number(firstSet(field.borderRadius, field.fieldBorderRadius, settings.submitButtonBorderRadius, 8)) : (settings.submitButtonBorderRadius ?? 8)
  const btnAlign = isField ? firstSet(field.submitButtonAlignment, field.align, settings.submitButtonAlignment, 'full') : (settings.submitButtonAlignment || 'full')
  const btnPaddingY = isField ? Number(firstSet(fieldPad('top'), settings.submitButtonPaddingY, 12)) : (settings.submitButtonPaddingY ?? 10)
  const btnPaddingX = isField ? Number(firstSet(fieldPad('left'), settings.submitButtonPaddingX, 24)) : (settings.submitButtonPaddingX ?? 20)
  const btnFontSize = isField ? Number(firstSet(field.fontSize, settings.submitButtonFontSize, 15)) : null
  // Same default as the canvas/site button (labelFontWeight unset = normal weight).
  const btnBold = isField ? !['normal', '400', 400, 'lighter', '300', 300].includes(field.labelFontWeight ?? 'normal') : false
  const btnItalic = isField ? field.labelFontStyle === 'italic' : false
  const btnWidth = isField ? (Number(field.submitButtonWidth) > 0 ? Number(field.submitButtonWidth) : '') : ''

  // Settings-path keys → field keys. Only the keys the user touched are written.
  const toFieldUpdates = (updates) => {
    const out = {}
    Object.entries(updates).forEach(([k, v]) => {
      if (k === 'submitButtonText') {
        out.label = v
        out.name = v
        if (field.buttonText !== undefined) out.buttonText = v
      } else if (k === 'submitButtonBgColor') {
        out.backgroundColor = v
        if (field.buttonGradient) out.buttonGradient = undefined
      } else if (k === 'submitButtonTextColor') {
        out.textColor = v
      } else if (k === 'submitButtonBorderRadius') {
        out.borderRadius = v
        out.fieldBorderRadius = v
      } else if (k === 'submitButtonAlignment') {
        out.submitButtonAlignment = v
        if (field.align !== undefined) out.align = v
      } else if (k === 'submitButtonPaddingY' || k === 'submitButtonPaddingX') {
        const cur = { top: btnPaddingY, bottom: btnPaddingY, left: btnPaddingX, right: btnPaddingX, ...(out.padding || {}) }
        if (k === 'submitButtonPaddingY') { cur.top = v; cur.bottom = v } else { cur.left = v; cur.right = v }
        out.padding = cur
        if (field.buttonPadding) out.buttonPadding = { ...field.buttonPadding, ...cur }
      } else {
        out[k] = v
      }
    })
    return out
  }

  const handleUpdate = (updates) => {
    if (isField) onUpdateField(toFieldUpdates(updates))
    else setSettings(updates)
    if (setIsDirty) setIsDirty(true)
  }

  return createPortal(
    <div className="wpvfb-builder">
      {/* Button text edited in place, inside the button */}
      {isField && btnBox && (
        <input
          ref={textRef}
          type="text"
          data-submit-text-editor="true"
          aria-label="Button text"
          value={btnText}
          onChange={(e) => handleUpdate({ submitButtonText: e.target.value })}
          onKeyDown={(e) => {
            e.stopPropagation()
            if (e.key === 'Enter') { e.preventDefault(); onClose() }
          }}
          onMouseDown={(e) => e.stopPropagation()}
          onClick={(e) => e.stopPropagation()}
          autoFocus
          className="fixed z-[9998] outline-none text-center"
          style={{
            top: btnBox.top, left: btnBox.left, width: btnBox.width, height: btnBox.height,
            ...btnBox.font,
            color: btnBox.color,
            backgroundColor: btnBox.backgroundColor,
            backgroundImage: btnBox.backgroundImage,
            borderRadius: btnBox.borderRadius,
            paddingLeft: btnBox.paddingLeft,
            paddingRight: btnBox.paddingRight,
            border: 'none',
            boxShadow: '0 0 0 2px #3b82f6',
            margin: 0,
          }}
        />
      )}
      <div
        ref={modalRef}
        data-prevent-outside-click="true"
        className="fixed z-[9999] bg-white rounded-2xl shadow-2xl border border-gray-200 w-[340px] text-xs text-gray-700"
        style={{ top: `${position.top}px`, left: `${position.left}px` }}
        onClick={(e) => e.stopPropagation()}
        onMouseDown={(e) => e.stopPropagation()}
      >
        <div className="flex items-center justify-between px-3.5 py-2.5 border-b border-gray-100">
          <span className="font-bold text-gray-900 text-xs">Submit Button Style</span>
          <button
            type="button"
            onClick={onClose}
            className="p-1 text-gray-400 hover:text-gray-600 rounded-md cursor-pointer"
          >
            <X className="w-3.5 h-3.5" />
          </button>
        </div>

      <div className="p-3.5 space-y-3.5 max-h-[380px] overflow-y-auto">
        {/* Button Label */}
        <div>
          <label className="block text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1">
            Button Text
          </label>
          <input
            type="text"
            value={btnText}
            onChange={(e) => handleUpdate({ submitButtonText: e.target.value })}
            className="w-full px-2.5 py-1.5 border border-gray-200 rounded-lg text-xs font-semibold focus:ring-1 focus:ring-gray-900 focus:border-gray-900 focus:outline-none text-gray-900"
            placeholder="Submit"
          />
        </div>

        {/* Colors */}
        <div className="grid grid-cols-2 gap-2.5">
          <div className="relative">
            <label className="block text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1">
              Background Color
            </label>
            <div className="flex items-center gap-1.5">
              <button
                type="button"
                onClick={() => {
                  setShowBgPicker(!showBgPicker)
                  setShowTextPicker(false)
                }}
                className="w-7 h-7 rounded-lg border border-gray-300 shadow-2xs cursor-pointer flex-shrink-0"
                style={{ backgroundColor: btnBg }}
              />
              <input
                type="text"
                value={btnBg}
                onChange={(e) => handleUpdate({ submitButtonBgColor: e.target.value })}
                className="w-full px-2 py-1 text-[11px] border border-gray-200 rounded-lg font-mono uppercase"
              />
            </div>
            {showBgPicker && (
              <div className="absolute top-full mt-2 left-0 z-50 p-3 bg-white rounded-xl shadow-2xl border border-gray-200">
                <HexColorPicker color={btnBg} onChange={(c) => handleUpdate({ submitButtonBgColor: c })} />
              </div>
            )}
          </div>

          <div className="relative">
            <label className="block text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1">
              Text Color
            </label>
            <div className="flex items-center gap-1.5">
              <button
                type="button"
                onClick={() => {
                  setShowTextPicker(!showTextPicker)
                  setShowBgPicker(false)
                }}
                className="w-7 h-7 rounded-lg border border-gray-300 shadow-2xs cursor-pointer flex-shrink-0"
                style={{ backgroundColor: btnColor }}
              />
              <input
                type="text"
                value={btnColor}
                onChange={(e) => handleUpdate({ submitButtonTextColor: e.target.value })}
                className="w-full px-2 py-1 text-[11px] border border-gray-200 rounded-lg font-mono uppercase"
              />
            </div>
            {showTextPicker && (
              <div className="absolute top-full mt-2 right-0 z-50 p-3 bg-white rounded-xl shadow-2xl border border-gray-200">
                <HexColorPicker color={btnColor} onChange={(c) => handleUpdate({ submitButtonTextColor: c })} />
              </div>
            )}
          </div>
        </div>

        {/* Alignment */}
        <div>
          <label className="block text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1">
            Alignment
          </label>
          <div className="grid grid-cols-4 gap-1 p-0.5 bg-gray-100 rounded-lg">
            {[
              { val: 'left', icon: AlignLeft, label: 'Left' },
              { val: 'center', icon: AlignCenter, label: 'Center' },
              { val: 'right', icon: AlignRight, label: 'Right' },
              { val: 'full', icon: Maximize2, label: 'Full' },
            ].map((item) => {
              const Icon = item.icon
              const isSelected = btnAlign === item.val
              return (
                <button
                  key={item.val}
                  type="button"
                  onClick={() => handleUpdate({ submitButtonAlignment: item.val })}
                  className={`flex flex-col items-center justify-center py-1.5 rounded-md text-[10px] font-medium transition-all cursor-pointer ${
                    isSelected
                      ? 'bg-white text-gray-900 shadow-2xs font-bold'
                      : 'text-gray-500 hover:text-gray-800'
                  }`}
                >
                  <Icon className="w-3.5 h-3.5 mb-0.5" />
                  <span>{item.label}</span>
                </button>
              )
            })}
          </div>
        </div>

        {isField && (
          <div className="grid grid-cols-2 gap-2.5">
            <div>
              <label className="block text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1">
                Font Size (px)
              </label>
              <div className="flex items-center gap-1">
                <button
                  type="button"
                  title="Decrease font size"
                  onClick={() => handleUpdate({ fontSize: Math.max(8, (btnFontSize || 15) - 1) })}
                  className="p-1 rounded-md border border-gray-200 bg-white text-gray-600 hover:text-gray-900 cursor-pointer"
                >
                  <Minus className="w-3 h-3" />
                </button>
                <input
                  type="number"
                  min="8"
                  max="72"
                  aria-label="Font size"
                  value={btnFontSize}
                  onChange={(e) => handleUpdate({ fontSize: parseInt(e.target.value) || 15 })}
                  className="w-full min-w-0 px-1 py-1 border border-gray-200 rounded-lg font-mono text-[11px] text-center focus:border-gray-900 focus:outline-none"
                />
                <button
                  type="button"
                  title="Increase font size"
                  onClick={() => handleUpdate({ fontSize: Math.min(72, (btnFontSize || 15) + 1) })}
                  className="p-1 rounded-md border border-gray-200 bg-white text-gray-600 hover:text-gray-900 cursor-pointer"
                >
                  <Plus className="w-3 h-3" />
                </button>
                <button
                  type="button"
                  title="Bold"
                  aria-pressed={btnBold}
                  onClick={() => handleUpdate({ labelFontWeight: btnBold ? 'normal' : 'bold' })}
                  className={`px-2 py-1 rounded-md border text-[11px] font-bold cursor-pointer ${btnBold ? 'bg-gray-900 text-white border-gray-900' : 'bg-white text-gray-600 border-gray-200'}`}
                >
                  B
                </button>
                <button
                  type="button"
                  title="Italic"
                  aria-pressed={btnItalic}
                  onClick={() => handleUpdate({ labelFontStyle: btnItalic ? 'normal' : 'italic' })}
                  className={`px-2 py-1 rounded-md border text-[11px] italic cursor-pointer ${btnItalic ? 'bg-gray-900 text-white border-gray-900' : 'bg-white text-gray-600 border-gray-200'}`}
                >
                  I
                </button>
              </div>
            </div>
            <div>
              <label className="block text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1">
                Width (px)
              </label>
              <div className="flex items-center gap-1">
                <input
                  type="number"
                  min="0"
                  aria-label="Button width"
                  placeholder="Auto"
                  value={btnWidth}
                  onChange={(e) => {
                    const w = parseInt(e.target.value) || 0
                    // A fixed width needs a non-full alignment (full width wins on the site).
                    handleUpdate({ submitButtonWidth: w, ...(w > 0 && btnAlign === 'full' ? { submitButtonAlignment: 'left' } : {}) })
                  }}
                  className="w-full px-2 py-1 border border-gray-200 rounded-lg font-mono text-[11px] focus:border-gray-900 focus:outline-none disabled:bg-gray-50"
                />
                <button
                  type="button"
                  onClick={() => handleUpdate({ submitButtonWidth: 0, submitButtonAlignment: 'full' })}
                  className={`px-2 py-1 rounded-md border text-[10px] font-semibold cursor-pointer ${btnAlign === 'full' ? 'bg-gray-900 text-white border-gray-900' : 'border-gray-200 bg-white text-gray-600'}`}
                >
                  Full
                </button>
                <button
                  type="button"
                  onClick={() => handleUpdate({ submitButtonWidth: 0, ...(btnAlign === 'full' ? { submitButtonAlignment: 'left' } : {}) })}
                  className="px-2 py-1 rounded-md border border-gray-200 bg-white text-[10px] font-semibold text-gray-600 cursor-pointer"
                >
                  Auto
                </button>
              </div>
            </div>
          </div>
        )}

        {/* Corner Radius */}
        <div>
          <div className="flex justify-between items-center text-[11px] text-gray-600 mb-1">
            <span className="font-semibold">Corner Radius</span>
            <span className="font-mono text-gray-400">{btnRadius}px</span>
          </div>
          <input
            type="range"
            min="0"
            max="32"
            value={btnRadius}
            onChange={(e) =>
              handleUpdate({ submitButtonBorderRadius: parseInt(e.target.value) || 0 })
            }
            className="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-gray-900"
          />
        </div>

        {/* Padding */}
        <div className="grid grid-cols-2 gap-2 text-[11px]">
          <div>
            <span className="block text-gray-500 font-medium mb-1">Padding Y (px)</span>
            <input
              type="number"
              value={btnPaddingY}
              onChange={(e) =>
                handleUpdate({ submitButtonPaddingY: parseInt(e.target.value) || 0 })
              }
              className="w-full px-2 py-1 border border-gray-200 rounded-lg font-mono focus:border-gray-900 focus:outline-none"
            />
          </div>
          <div>
            <span className="block text-gray-500 font-medium mb-1">Padding X (px)</span>
            <input
              type="number"
              value={btnPaddingX}
              onChange={(e) =>
                handleUpdate({ submitButtonPaddingX: parseInt(e.target.value) || 0 })
              }
              className="w-full px-2 py-1 border border-gray-200 rounded-lg font-mono focus:border-gray-900 focus:outline-none"
            />
          </div>
        </div>
      </div>

      <div className="px-3.5 py-2.5 bg-gray-50 border-t border-gray-100 rounded-b-2xl flex justify-between items-center">
        <span className="text-[10px] text-gray-400">Live preview updated</span>
        <button
          type="button"
          onClick={onClose}
          className="flex items-center gap-1 px-3 py-1 bg-gray-900 hover:bg-black text-white rounded-lg text-xs font-semibold shadow-2xs cursor-pointer"
        >
          <Check className="w-3.5 h-3.5" /> Done
        </button>
      </div>
    </div>
  </div>,
  document.body
)
}