import React, { useState, useRef, useEffect } from "react";
import { createPortal } from "react-dom";
import { Upload, Trash2, AlignLeft, AlignCenter, AlignRight, Image as ImageIcon, CornerDownRight, X } from "lucide-react";

export default function InlineImageEditor({
  field,
  onUpdate,
  viewMode,
  setIsDirty,
  children
}) {
  const [isEditing, setIsEditing] = useState(false);
  const [toolbarPosition, setToolbarPosition] = useState({ top: 0, left: 0 });
  const [showCustomSizePopover, setShowCustomSizePopover] = useState(false);
  // the reference builder keys read by the canvas and the published form: imageCustomWidth / imageCustomHeight (older
  // imageWidth / imageHeight are read as a fallback).
  const [customWidth, setCustomWidth] = useState(field.imageCustomWidth || field.imageWidth || 400);
  const [customHeight, setCustomHeight] = useState(field.imageCustomHeight || field.imageHeight || 400);
  const [showRadius, setShowRadius] = useState(false);

  const containerRef = useRef(null);
  const toolbarRef = useRef(null);
  const customSizePopoverRef = useRef(null);

  useEffect(() => {
    if (isEditing && containerRef.current) {
      const updatePosition = () => {
        if (!containerRef.current) return;
        const rect = containerRef.current.getBoundingClientRect();
        const toolbarWidth = 320;
        let left = rect.left + (rect.width / 2) - (toolbarWidth / 2);
        let top = rect.bottom + 8;

        if (left < 10) left = 10;
        if (left + toolbarWidth > window.innerWidth - 10) left = window.innerWidth - toolbarWidth - 10;
        if (top + 50 > window.innerHeight) top = rect.top - 50;

        setToolbarPosition({ top, left });
      };

      updatePosition();
      window.addEventListener('scroll', updatePosition, true);
      window.addEventListener('resize', updatePosition);
      return () => {
        window.removeEventListener('scroll', updatePosition, true);
        window.removeEventListener('resize', updatePosition);
      };
    }
  }, [isEditing]);

  useEffect(() => {
    const handleClickOutside = (e) => {
      if (!isEditing) return;
      if (e.target.closest && e.target.closest(".media-modal, .media-modal-backdrop")) return;
      if (
        containerRef.current && !containerRef.current.contains(e.target) &&
        toolbarRef.current && !toolbarRef.current.contains(e.target) &&
        (!customSizePopoverRef.current || !customSizePopoverRef.current.contains(e.target))
      ) {
        setIsEditing(false);
        setShowCustomSizePopover(false);
      }
    };
    // Escape closes the toolbar (the WordPress media modal handles its own Escape).
    const onKey = (e) => {
      if (!isEditing || e.key !== "Escape") return;
      const mediaOpen = Array.from(document.querySelectorAll('.media-modal')).some((el) => el.getClientRects().length > 0);
      if (mediaOpen) return;
      e.stopPropagation();
      setIsEditing(false);
      setShowCustomSizePopover(false);
      setShowRadius(false);
    };
    document.addEventListener("mousedown", handleClickOutside);
    document.addEventListener("keydown", onKey, true);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
      document.removeEventListener("keydown", onKey, true);
    };
  }, [isEditing]);

  const handleOpenMediaLibrary = (e) => {
    e.stopPropagation();
    if (window.wp && window.wp.media) {
      const mediaFrame = window.wp.media({
        title: 'Select or Upload Form Image',
        button: { text: 'Use Image' },
        multiple: false
      });
      mediaFrame.on('select', () => {
        const attachment = mediaFrame.state().get('selection').first().toJSON();
        if (attachment?.url) {
          if (setIsDirty) setIsDirty(true);
          onUpdate({
            imageUrl: attachment.url,
            url: attachment.url,
            imageAltText: attachment.alt || attachment.title || ''
          });
        }
      });
      mediaFrame.open();
    } else {
      const url = window.prompt("Enter Image URL:", field.imageUrl || field.url || "");
      if (url !== null) {
        if (setIsDirty) setIsDirty(true);
        onUpdate({ imageUrl: url, url });
      }
    }
  };

  const handleAlignment = (alignment, e) => {
    e.stopPropagation();
    if (setIsDirty) setIsDirty(true);
    onUpdate({ imageAlignment: alignment, alignment });
  };

  const handleSizeChange = (size, e) => {
    e.stopPropagation();
    if (setIsDirty) setIsDirty(true);
    if (size === 'custom') {
      setShowCustomSizePopover(true);
      onUpdate({ imageSize: 'custom' });
    } else {
      setShowCustomSizePopover(false);
      onUpdate({ imageSize: size });
    }
  };

  const handleApplyCustomSize = (e) => {
    e.stopPropagation();
    if (setIsDirty) setIsDirty(true);
    onUpdate({
      imageSize: 'custom',
      imageCustomWidth: parseInt(customWidth) || 400,
      imageCustomHeight: parseInt(customHeight) || 400
    });
    setShowCustomSizePopover(false);
  };

  if (viewMode === 'preview') {
    return <div className="relative">{children}</div>;
  }

  return (
    <div
      ref={containerRef}
      className={`inline-image-editor-trigger relative inline-block w-full cursor-pointer group/img transition-all ${
        isEditing ? "ring-2 ring-blue-600 rounded-lg" : "hover:ring-1 hover:ring-blue-400 rounded-lg"
      }`}
      onClick={(e) => {
        if (viewMode === 'preview') return;
        e.stopPropagation();
        setIsEditing(true);
      }}
    >
      {children}

      {isEditing && createPortal(
        <div className="wpvfb-builder">
          <div
            ref={toolbarRef}
            className="fixed z-[9999] bg-white rounded-xl shadow-2xl border border-gray-200 px-2 py-1.5 flex items-center gap-1.5 text-xs animate-in fade-in zoom-in-95 duration-150"
            style={{ top: `${toolbarPosition.top}px`, left: `${toolbarPosition.left}px` }}
            onClick={(e) => e.stopPropagation()}
          >
          {/* Replace / Upload Image */}
          <button
            type="button"
            onClick={handleOpenMediaLibrary}
            className="flex items-center gap-1 px-2.5 py-1.5 rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium transition-colors cursor-pointer"
            title="Replace Image"
          >
            <ImageIcon className="w-3.5 h-3.5" />
            <span>Replace</span>
          </button>

          <div className="w-px h-4 bg-gray-200" />

          {/* Alignment */}
          <div className="flex items-center bg-gray-100 rounded-lg p-0.5">
            <button
              type="button"
              onClick={(e) => handleAlignment('left', e)}
              className={`p-1 rounded-md transition-colors ${
                (field.imageAlignment || field.alignment) === 'left' ? 'bg-white shadow-xs text-gray-900' : 'text-gray-500 hover:text-gray-900'
              }`}
              title="Align Left"
            >
              <AlignLeft className="w-3.5 h-3.5" />
            </button>
            <button
              type="button"
              onClick={(e) => handleAlignment('center', e)}
              className={`p-1 rounded-md transition-colors ${
                (field.imageAlignment || field.alignment) === 'center' ? 'bg-white shadow-xs text-gray-900' : 'text-gray-500 hover:text-gray-900'
              }`}
              title="Align Center"
            >
              <AlignCenter className="w-3.5 h-3.5" />
            </button>
            <button
              type="button"
              onClick={(e) => handleAlignment('right', e)}
              className={`p-1 rounded-md transition-colors ${
                (field.imageAlignment || field.alignment) === 'right' ? 'bg-white shadow-xs text-gray-900' : 'text-gray-500 hover:text-gray-900'
              }`}
              title="Align Right"
            >
              <AlignRight className="w-3.5 h-3.5" />
            </button>
          </div>

          <div className="w-px h-4 bg-gray-200" />

          {/* Size Preset */}
          {/* the reference builder sizes; an unset size renders as Medium on the canvas and the published form */}
          <select
            aria-label="Image size"
            value={['small', 'medium', 'large', 'full', 'custom'].includes(field.imageSize) ? field.imageSize : 'medium'}
            onChange={(e) => handleSizeChange(e.target.value, e)}
            className="px-2 py-1 bg-gray-100 border-none rounded-lg text-xs text-gray-800 font-medium focus:outline-none cursor-pointer"
            style={{ minHeight: 30 }}
          >
            <option value="small">Small</option>
            <option value="medium">Medium</option>
            <option value="large">Large</option>
            <option value="full">Full</option>
            <option value="custom">Custom</option>
          </select>
          {field.imageSize === 'custom' && !showCustomSizePopover && (
            <button
              type="button"
              onClick={(e) => { e.stopPropagation(); setShowCustomSizePopover(true); }}
              className="px-1.5 py-1 rounded-md text-[10px] font-mono text-gray-600 hover:bg-gray-100"
              title="Custom size"
            >
              {(field.imageCustomWidth || field.imageWidth || 400)}×{(field.imageCustomHeight || field.imageHeight || 400)}
            </button>
          )}

          <div className="w-px h-4 bg-gray-200" />

          {/* Corner radius per corner (imageBorderRadiusTopLeft/TopRight/BottomRight/BottomLeft) */}
          <div className="relative">
            <button
              type="button"
              title="Corner radius"
              aria-label="Corner radius"
              onClick={(e) => { e.stopPropagation(); setShowRadius(!showRadius); }}
              className={`p-1.5 rounded-lg transition-colors cursor-pointer ${showRadius ? 'bg-gray-900 text-white' : 'text-gray-600 hover:bg-gray-100'}`}
            >
              <CornerDownRight className="w-3.5 h-3.5" />
            </button>
            {showRadius && (
              <div
                data-image-radius="true"
                className="absolute top-full mt-2 right-0 bg-white border border-gray-200 rounded-xl shadow-xl p-3 z-[10000] w-56"
                onClick={(e) => e.stopPropagation()}
              >
                <div className="text-[11px] font-semibold text-gray-700 mb-2">Corner Radius (px)</div>
                <div className="grid grid-cols-2 gap-2">
                  {[['TopLeft', 'Top Left'], ['TopRight', 'Top Right'], ['BottomLeft', 'Bottom Left'], ['BottomRight', 'Bottom Right']].map(([k, l]) => (
                    <label key={k} className="block">
                      <span className="block text-[10px] text-gray-500 mb-0.5">{l}</span>
                      <input
                        type="number"
                        min="0"
                        aria-label={`${l} radius`}
                        value={field[`imageBorderRadius${k}`] ?? 0}
                        onChange={(e) => {
                          if (setIsDirty) setIsDirty(true);
                          onUpdate({ [`imageBorderRadius${k}`]: Math.max(0, parseInt(e.target.value, 10) || 0) });
                        }}
                        onKeyDown={(e) => e.stopPropagation()}
                        className="w-full px-2 py-1.5 text-xs border border-gray-200 rounded-md"
                        style={{ minHeight: 30 }}
                      />
                    </label>
                  ))}
                </div>
                <button
                  type="button"
                  onClick={() => {
                    if (setIsDirty) setIsDirty(true);
                    const all = Number(field.imageBorderRadiusTopLeft) || 0;
                    onUpdate({ imageBorderRadiusTopRight: all, imageBorderRadiusBottomRight: all, imageBorderRadiusBottomLeft: all });
                  }}
                  className="mt-2 w-full py-1 text-[11px] font-semibold text-gray-600 border border-gray-200 rounded-md hover:bg-gray-50"
                >
                  Use Top Left for all corners
                </button>
              </div>
            )}
          </div>

          {/* Custom Size Popover Trigger */}
          {showCustomSizePopover && (
            <div
              ref={customSizePopoverRef}
              className="absolute top-full mt-2 left-0 bg-white border border-gray-200 rounded-xl shadow-xl p-3 flex flex-col gap-2 z-[10000]"
            >
              <div className="text-[11px] font-semibold text-gray-700">Custom Dimensions (px)</div>
              <div className="flex items-center gap-2">
                <input
                  type="number"
                  placeholder="Width"
                  aria-label="Custom width"
                  onKeyDown={(e) => e.stopPropagation()}
                  value={customWidth}
                  onChange={(e) => setCustomWidth(e.target.value)}
                  className="w-16 px-2 py-1 text-xs border border-gray-200 rounded-lg text-center"
                />
                <span className="text-gray-400">×</span>
                <input
                  type="number"
                  placeholder="Height"
                  aria-label="Custom height"
                  onKeyDown={(e) => e.stopPropagation()}
                  value={customHeight}
                  onChange={(e) => setCustomHeight(e.target.value)}
                  className="w-16 px-2 py-1 text-xs border border-gray-200 rounded-lg text-center"
                />
              </div>
              <button
                type="button"
                onClick={handleApplyCustomSize}
                className="w-full py-1 bg-gray-900 text-white rounded-lg text-xs font-semibold hover:bg-black"
              >
                Apply
              </button>
            </div>
          )}

          <div className="w-px h-4 bg-gray-200" />

          {/* Remove Image */}
          <button
            type="button"
            onClick={(e) => {
              e.stopPropagation();
              if (setIsDirty) setIsDirty(true);
              onUpdate({ imageUrl: '', url: '' });
              setIsEditing(false);
            }}
            className="p-1.5 text-red-500 hover:text-red-700 hover:bg-red-50 rounded-lg transition-colors cursor-pointer"
            title="Remove Image"
          >
            <Trash2 className="w-3.5 h-3.5" />
          </button>
          </div>
        </div>,
        document.body
      )}
    </div>
  );
}