import React, { useState, useRef, useEffect } from "react";
import { createPortal } from "react-dom";
import { ToggleRight, Check } from "lucide-react";
import { HexColorPicker } from "react-colorful";

export default function InlineSwitchEditor({
  field,
  children,
  viewMode,
  onUpdate,
  setIsDirty,
}) {
  const [isEditing, setIsEditing] = useState(false);
  const [toolbarPosition, setToolbarPosition] = useState({ top: 0, left: 0 });
  const [showOnColorPicker, setShowOnColorPicker] = useState(false);
  const [showOffColorPicker, setShowOffColorPicker] = useState(false);

  const containerRef = useRef(null);
  const toolbarRef = useRef(null);
  const onColorPickerRef = useRef(null);
  const offColorPickerRef = useRef(null);

  useEffect(() => {
    if (isEditing && containerRef.current) {
      const updatePosition = () => {
        if (!containerRef.current) return;
        const rect = containerRef.current.getBoundingClientRect();
        const toolbarWidth = 260;
        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 (
        containerRef.current && !containerRef.current.contains(e.target) &&
        toolbarRef.current && !toolbarRef.current.contains(e.target) &&
        (!onColorPickerRef.current || !onColorPickerRef.current.contains(e.target)) &&
        (!offColorPickerRef.current || !offColorPickerRef.current.contains(e.target))
      ) {
        setIsEditing(false);
        setShowOnColorPicker(false);
        setShowOffColorPicker(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, [isEditing]);

  const updateFieldData = (updates) => {
    if (setIsDirty) setIsDirty(true);
    onUpdate(updates);
  };

  const switchOnColor = field.switchOnColor || "#10B981";
  const switchOffColor = field.switchOffColor || "#E5E7EB";
  const isDefaultOn = field.defaultValue === true || field.defaultValue === "on";

  return (
    <>
      <div
        ref={containerRef}
        onClick={(e) => {
          if (viewMode === 'preview') return;
          e.stopPropagation();
          setIsEditing(true);
        }}
        className={`inline-switch-editor-trigger ${viewMode === 'edit' ? "cursor-pointer group/switch relative" : ""}`}
      >
        {children}
      </div>

      {isEditing && createPortal(
        <div className="wpvfb-builder">
          <div
            ref={toolbarRef}
            className="fixed z-[9999] bg-white rounded-xl shadow-2xl border border-gray-200 p-1.5 flex items-center gap-2 text-xs animate-in fade-in zoom-in-95 duration-150"
            style={{ top: `${toolbarPosition.top}px`, left: `${toolbarPosition.left}px` }}
            onClick={(e) => e.stopPropagation()}
          >
          {/* On Color */}
          <div className="relative">
            <button
              type="button"
              className="flex items-center gap-1.5 px-2 py-1 hover:bg-gray-100 rounded-lg text-gray-700 transition-colors cursor-pointer"
              onClick={() => {
                setShowOnColorPicker(!showOnColorPicker);
                setShowOffColorPicker(false);
              }}
              title="Active Color"
            >
              <div
                className="w-3.5 h-3.5 rounded-full shadow-2xs border border-gray-300"
                style={{ backgroundColor: switchOnColor }}
              />
              <span className="font-semibold text-gray-800">On</span>
            </button>

            {showOnColorPicker && (
              <div
                ref={onColorPickerRef}
                className="absolute top-full left-0 mt-2 z-[10000] p-3 bg-white rounded-xl shadow-2xl border border-gray-200 animate-in fade-in zoom-in-95"
              >
                <div className="text-[11px] font-semibold text-gray-700 mb-2">Switch Active Color</div>
                <HexColorPicker
                  color={switchOnColor}
                  onChange={(c) => updateFieldData({ switchOnColor: c })}
                />
              </div>
            )}
          </div>

          {/* Off Color */}
          <div className="relative">
            <button
              type="button"
              className="flex items-center gap-1.5 px-2 py-1 hover:bg-gray-100 rounded-lg text-gray-700 transition-colors cursor-pointer"
              onClick={() => {
                setShowOffColorPicker(!showOffColorPicker);
                setShowOnColorPicker(false);
              }}
              title="Inactive Color"
            >
              <div
                className="w-3.5 h-3.5 rounded-full shadow-2xs border border-gray-300"
                style={{ backgroundColor: switchOffColor }}
              />
              <span className="font-semibold text-gray-800">Off</span>
            </button>

            {showOffColorPicker && (
              <div
                ref={offColorPickerRef}
                className="absolute top-full left-0 mt-2 z-[10000] p-3 bg-white rounded-xl shadow-2xl border border-gray-200 animate-in fade-in zoom-in-95"
              >
                <div className="text-[11px] font-semibold text-gray-700 mb-2">Switch Inactive Color</div>
                <HexColorPicker
                  color={switchOffColor}
                  onChange={(c) => updateFieldData({ switchOffColor: c })}
                />
              </div>
            )}
          </div>

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

          {/* Default Value Toggle */}
          <button
            type="button"
            className={`flex items-center gap-1.5 px-2 py-1 rounded-lg transition-colors cursor-pointer ${
              isDefaultOn ? 'bg-emerald-50 text-emerald-700 font-semibold' : 'hover:bg-gray-100 text-gray-700 font-medium'
            }`}
            onClick={() => updateFieldData({ defaultValue: !isDefaultOn })}
            title="Toggle Default State"
          >
            <ToggleRight className={`w-3.5 h-3.5 ${isDefaultOn ? 'text-emerald-600' : 'text-gray-400'}`} />
            <span>Default: {isDefaultOn ? "On" : "Off"}</span>
          </button>
          </div>
        </div>,
        document.body
      )}
    </>
  );
}