import React, { useState, useRef, useEffect } from "react";
import { createPortal } from "react-dom";
import { 
  Bold, Italic, Underline, Type, Heading1, ChevronDown, Check, 
  Minus, Plus, AlignLeft, AlignCenter, AlignRight, AlignJustify, RotateCcw
} from "lucide-react";
import { HexColorPicker } from "react-colorful";
import { systemFonts, googleFonts } from "./FontFamilyToggle";
import { loadFormFont } from "../utils/resolveFieldStyle";
import { useFormStore } from "../store/useFormStore";

export default function InlineLabelEditor({
  field,
  viewMode = "edit",
  mode = "label", // "label" | "description" | "placeholder" | "heading" | "option"
  headingFormat,
  defaultFieldName = "Unnamed Field",
  onSave,
  onUpdate,
  setIsDirty,
  suffix = null,
  anchorRef,
  isOpen: externalIsOpen,
  onClose: externalOnClose,
  // Storefront-resolved display (src/utils/resolveFieldStyle.js). When given, the label/description/heading is shown
  // exactly with these styles and this text; the editor toolbar still edits the field keys.
  displayStyle = null,
  displayText = null,
  asteriskColor = null,
}) {
  const isControlled = externalIsOpen !== undefined;
  // A field-level font (labelFontFamily/descriptionFontFamily/section fontFamily) beats the form font, like the
  // storefront's per-field !important rules: the canvas CSS reads it from --wpvfb-font on [data-font].
  const fontAttr = displayStyle && displayStyle.fontFamily ? { "data-font": "" } : {};
  if (displayStyle && displayStyle.fontFamily) displayStyle = { ...displayStyle, "--wpvfb-font": displayStyle.fontFamily };
  const [internalIsEditing, setInternalIsEditing] = useState(false);
  const isEditing = isControlled ? externalIsOpen : internalIsEditing;

  const setIsEditing = (val) => {
    if (isControlled) {
      if (!val && externalOnClose) externalOnClose();
    } else {
      setInternalIsEditing(val);
    }
  };

  // Get current text value based on mode
  const getCurrentValue = () => {
    if (mode === "description") return field.description || "";
    if (mode === "placeholder") return field.placeholder || "";
    if (mode === "option") return field.name || field.label || defaultFieldName;
    return field.label || field.name || defaultFieldName;
  };

  const settings = useFormStore((state) => state.settings) || {};
  const resolvedDefaultFont = field.labelFontFamily || field.fontFamily || settings?.fontFamily || "inherit";

  // Valid heading tag (the reference builder headingFormat first; a bad saved value falls back to h3).
  const HEADING_TAGS = ["h1", "h2", "h3", "h4", "h5", "h6"];
  const validTag = (t) => (HEADING_TAGS.includes(t) ? t : null);
  const isHeading = Boolean(headingFormat) || mode === "heading";
  const headingTag = validTag(headingFormat) || validTag(field.headingFormat) || "h3";
  const headingDefaultSize = (tag) =>
    Number(settings?.headingFontSizes?.[tag]) || Number(settings?.[`heading${tag.toUpperCase()}Size`]) || { h1: 32, h2: 28, h3: 24, h4: 20, h5: 18, h6: 16 }[tag] || 20;

  // What the canvas shows when the field has no value of its own. Labels fall back to the global Styling settings
  // (settings.label*/descriptionColor), like the storefront renderer.
  const pickSet = (...vals) => vals.find((v) => v !== undefined && v !== null && v !== "");
  const display = (() => {
    if (mode === "description") {
      return {
        color: pickSet(field.descriptionColor, settings.descriptionColor, "#6B7280"),
        fontSize: Number(pickSet(field.descriptionFontSize, settings.descriptionFontSize, settings.fontSize, 14)),
        lineHeight: Number(pickSet(field.descriptionLineHeight, settings.lineHeight > 3 ? settings.lineHeight : null, 20)),
        fontWeight: pickSet(field.descriptionFontWeight, 400),
        fontStyle: pickSet(field.descriptionFontStyle, "normal"),
        fontFamily: pickSet(field.descriptionFontFamily, "inherit"),
      };
    }
    if (mode === "option") {
      return {
        color: pickSet(field.labelTextColor, field.labelColor, settings.labelColor, "#374151"),
        fontSize: Number(pickSet(field.fontSize, 14)),
        lineHeight: Number(pickSet(field.lineHeight, 20)),
        fontWeight: pickSet(field.labelFontWeight, settings.labelFontWeight, 500),
        fontStyle: pickSet(field.labelFontStyle, "normal"),
        fontFamily: resolvedDefaultFont,
      };
    }
    if (isHeading) {
      // Section headings: field.fontSize, else the theme size of the heading level (headingFontSizes).
      return {
        color: pickSet(field.labelTextColor, field.labelColor, field.textColor, settings.labelColor, "#111827"),
        fontSize: Number(pickSet(field.fontSize, headingDefaultSize(headingTag))),
        lineHeight: Number(pickSet(field.lineHeight, settings.headingLineHeight > 3 ? settings.headingLineHeight : null, 28)),
        fontWeight: pickSet(field.labelFontWeight, 400),
        fontStyle: pickSet(field.labelFontStyle, "normal"),
        fontFamily: pickSet(field.fontFamily, resolvedDefaultFont),
      };
    }
    if (mode === "placeholder") {
      return { color: pickSet(field.placeholderTextColor, field.placeholderColor, settings.placeholderTextColor, "#9CA3AF"), fontSize: 14, fontFamily: resolvedDefaultFont };
    }
    return {
      color: pickSet(field.labelTextColor, field.labelColor, settings.labelColor, "#374151"),
      fontSize: Number(pickSet(field.labelFontSize, settings.labelFontSize, 14)),
      lineHeight: Number(pickSet(field.labelLineHeight, settings.labelLineHeight, 20)),
      fontWeight: pickSet(field.labelFontWeight, settings.labelFontWeight, 500),
      fontStyle: pickSet(field.labelFontStyle, "normal"),
      fontFamily: field.labelFontFamily || resolvedDefaultFont,
    };
  })();

  // Editor state: null = "not set on the field, use the default". Only keys the user changes are written.
  const initialState = () => {
    if (mode === "description") {
      return { color: field.descriptionColor ?? null, fontSize: field.descriptionFontSize ?? null, fontFamily: field.descriptionFontFamily ?? null, lineHeight: field.descriptionLineHeight ?? null, fontWeight: field.descriptionFontWeight ?? null, fontStyle: field.descriptionFontStyle ?? null };
    }
    if (mode === "placeholder") {
      return { color: field.placeholderTextColor ?? field.placeholderColor ?? null, fontSize: null, fontFamily: null, lineHeight: null, fontWeight: null, fontStyle: null };
    }
    if (isHeading) {
      // the reference builder section keys (read by the storefront section renderer): fontSize, lineHeight, fontFamily.
      return {
        color: field.labelTextColor ?? field.labelColor ?? null,
        fontSize: field.fontSize ?? null,
        lineHeight: field.lineHeight ?? null,
        fontWeight: field.labelFontWeight ?? null,
        fontStyle: field.labelFontStyle ?? null,
        fontFamily: field.fontFamily ?? null,
      };
    }
    if (mode === "option") {
      return { color: field.labelTextColor ?? null, fontSize: field.fontSize ?? null, lineHeight: field.lineHeight ?? null, fontWeight: field.labelFontWeight ?? null, fontStyle: field.labelFontStyle ?? null, fontFamily: null };
    }
    return {
      color: field.labelTextColor ?? field.labelColor ?? null,
      fontSize: field.labelFontSize ?? null,
      lineHeight: field.labelLineHeight ?? null,
      fontWeight: field.labelFontWeight ?? null,
      fontStyle: field.labelFontStyle ?? null,
      fontFamily: field.labelFontFamily ?? null,
    };
  };
  const init = initialState();

  // State management
  const [editingValue, setEditingValue] = useState(getCurrentValue());
  const [editingFontFamily, setEditingFontFamily] = useState(init.fontFamily);
  const [editingFontSize, setEditingFontSize] = useState(init.fontSize);
  const [editingLineHeight, setEditingLineHeight] = useState(init.lineHeight);
  const [editingFontWeight, setEditingFontWeight] = useState(init.fontWeight);
  const [editingFontStyle, setEditingFontStyle] = useState(init.fontStyle);
  const [editingUnderline, setEditingUnderline] = useState(field.labelUnderline || false);
  const [editingColor, setEditingColor] = useState(init.color);
  const [editingHeadingFormat, setEditingHeadingFormat] = useState(headingTag);
  const [editingAlignment, setEditingAlignment] = useState(field.labelAlignment || "left");

  // Effective values shown in the toolbar / input while editing.
  // Headings without their own size follow the theme size of the level being edited (H1–H4 → headingFontSizes).
  const shownFontSize = Number(editingFontSize ?? (isHeading && field.fontSize == null ? headingDefaultSize(editingHeadingFormat) : display.fontSize) ?? 14);
  const shownLineHeight = Number(editingLineHeight ?? display.lineHeight ?? 20);
  const shownFontWeight = editingFontWeight ?? display.fontWeight ?? 500;
  const shownFontStyle = editingFontStyle ?? display.fontStyle ?? "normal";
  const shownColor = editingColor ?? display.color ?? "#111827";
  const shownFontFamily = editingFontFamily ?? display.fontFamily ?? "inherit";
  const isBoldWeight = (w) => w === "bold" || Number(w) >= 600;

  const resetEditingState = () => {
    const i = initialState();
    setEditingValue(getCurrentValue());
    setEditingFontFamily(i.fontFamily);
    setEditingFontSize(i.fontSize);
    setEditingLineHeight(i.lineHeight);
    setEditingFontWeight(i.fontWeight);
    setEditingFontStyle(i.fontStyle);
    setEditingUnderline(field.labelUnderline || false);
    setEditingColor(i.color);
    setEditingHeadingFormat(validTag(headingFormat) || validTag(field.headingFormat) || "h3");
    setEditingAlignment(field.labelAlignment || "left");
  };

  // Dropdown / Popover states
  const [showColorPicker, setShowColorPicker] = useState(false);
  const [showFontFamilyDropdown, setShowFontFamilyDropdown] = useState(false);
  const [showHeadingDropdown, setShowHeadingDropdown] = useState(false);
  const [fontSearch, setFontSearch] = useState("");
  const [toolbarPosition, setToolbarPosition] = useState({ top: 0, left: 0 });

  // Refs
  const inputRef = useRef(null);
  const toolbarRef = useRef(null);
  const containerRef = useRef(null);

  // Sync state when field prop changes
  // Not while editing: parents rebuild option field objects on every render.
  useEffect(() => {
    if (!isEditing) resetEditingState();
  }, [field, mode, isEditing]);

  // Position calculation
  useEffect(() => {
    if (isEditing) {
      const updatePos = () => {
        const targetEl = anchorRef?.current || containerRef.current || inputRef.current;
        if (!targetEl) return;
        const rect = targetEl.getBoundingClientRect();
        const toolbarWidth = 420;
        let left = rect.left;
        let top = rect.top - 46;

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

        setToolbarPosition({ top, left });
      };

      updatePos();
      window.addEventListener("scroll", updatePos, true);
      window.addEventListener("resize", updatePos);
      return () => {
        window.removeEventListener("scroll", updatePos, true);
        window.removeEventListener("resize", updatePos);
      };
    }
  }, [isEditing, anchorRef]);

  // Outside click commits and closes (latest commit function via ref, so no stale state).
  const commitRef = useRef(null);
  useEffect(() => {
    if (isEditing) {
      const handleOutside = (e) => {
        const targetEl = anchorRef?.current || containerRef.current;
        if (targetEl && targetEl.contains(e.target)) return;
        if (toolbarRef.current && toolbarRef.current.contains(e.target)) return;
        if (commitRef.current) commitRef.current();
        setIsEditing(false);
      };

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

  const handleCommitSave = () => {
    const updates = {};
    const changed = (now, before) => now !== before;
    // null in the editor = "use the theme default": the key is removed from the field.
    const put = (key, value) => { updates[key] = value === null ? undefined : value; };
    const i = initialState();
    const valueChanged = editingValue !== getCurrentValue();
    if (mode === "description") {
      if (valueChanged) updates.description = editingValue;
      if (changed(editingColor, i.color)) put("descriptionColor", editingColor);
      if (changed(editingFontSize, i.fontSize)) put("descriptionFontSize", editingFontSize);
      if (changed(editingFontFamily, i.fontFamily)) put("descriptionFontFamily", editingFontFamily);
      if (changed(editingLineHeight, i.lineHeight)) put("descriptionLineHeight", editingLineHeight);
      if (changed(editingFontWeight, i.fontWeight)) put("descriptionFontWeight", editingFontWeight);
      if (changed(editingFontStyle, i.fontStyle)) put("descriptionFontStyle", editingFontStyle);
    } else if (mode === "placeholder") {
      if (valueChanged) updates.placeholder = editingValue;
      // the reference builder key read by the storefront (older placeholderColor stays a fallback).
      if (changed(editingColor, i.color)) put("placeholderTextColor", editingColor);
    } else if (mode === "option") {
      // Option formatting uses the keys the storefront reads per option (labelTextColor, fontSize, lineHeight).
      if (valueChanged) {
        updates.label = editingValue;
        updates.name = editingValue;
      }
      if (changed(editingFontWeight, i.fontWeight)) put("labelFontWeight", editingFontWeight);
      if (changed(editingFontStyle, i.fontStyle)) put("labelFontStyle", editingFontStyle);
      if (changed(editingColor, i.color)) put("labelTextColor", editingColor);
      if (changed(editingFontSize, i.fontSize)) put("fontSize", editingFontSize);
      if (changed(editingLineHeight, i.lineHeight)) put("lineHeight", editingLineHeight);
    } else if (isHeading) {
      // Section heading: the reference builder keys the storefront section renderer reads.
      if (valueChanged) {
        updates.label = editingValue;
        updates.name = editingValue;
      }
      if (changed(editingColor, i.color)) put("labelTextColor", editingColor);
      if (changed(editingFontSize, i.fontSize)) put("fontSize", editingFontSize);
      if (changed(editingLineHeight, i.lineHeight)) put("lineHeight", editingLineHeight);
      if (changed(editingFontFamily, i.fontFamily)) put("fontFamily", editingFontFamily);
      if (changed(editingFontWeight, i.fontWeight)) put("labelFontWeight", editingFontWeight);
      if (changed(editingFontStyle, i.fontStyle)) put("labelFontStyle", editingFontStyle);
      if (changed(editingHeadingFormat, headingTag)) updates.headingFormat = editingHeadingFormat;
    } else {
      if (valueChanged) {
        updates.label = editingValue;
        updates.name = editingValue;
      }
      // Label colour: the reference builder key labelTextColor (read by the storefront); older labelColor stays as a fallback.
      if (changed(editingColor, i.color)) {
        put("labelTextColor", editingColor);
        if (editingColor === null && field.labelColor !== undefined) updates.labelColor = undefined;
      }
      if (changed(editingFontSize, i.fontSize)) put("labelFontSize", editingFontSize);
      if (changed(editingFontFamily, i.fontFamily)) put("labelFontFamily", editingFontFamily);
      if (changed(editingFontWeight, i.fontWeight)) put("labelFontWeight", editingFontWeight);
      if (changed(editingFontStyle, i.fontStyle)) put("labelFontStyle", editingFontStyle);
      if (changed(editingLineHeight, i.lineHeight)) put("labelLineHeight", editingLineHeight);
      if (changed(editingUnderline, field.labelUnderline || false)) updates.labelUnderline = editingUnderline;
      if (changed(editingAlignment, field.labelAlignment || "left")) updates.labelAlignment = editingAlignment;
    }

    if (Object.keys(updates).length === 0) return;
    if (setIsDirty) setIsDirty(true);
    if (onSave) onSave(editingValue, updates);
    if (onUpdate) onUpdate(updates);
  };
  commitRef.current = handleCommitSave;

  // Clicking a label selects its field (and opens its settings), like the reference builder.
  const selectOwnerField = () => {
    if (field?.id) useFormStore.getState().setActiveFieldId?.(field.id);
  };

  const filteredFonts = [
    ...systemFonts.map(f => ({ name: f, type: 'System' })),
    ...googleFonts.map(f => ({ name: f, type: 'Google' }))
  ].filter(f => f.name.toLowerCase().includes(fontSearch.toLowerCase()));

  // Render Display Mode (when not editing)
  if (!isEditing) {
    if (isHeading) {
      const Tag = headingTag;
      return (
        <Tag
          ref={containerRef}
          data-inline-mode="heading"
          {...fontAttr}
          onClick={(e) => {
            if (viewMode === 'preview') return;
            e.stopPropagation();
            selectOwnerField();
            setIsEditing(true);
          }}
          className={`inline-editor-trigger cursor-pointer hover:outline hover:outline-1 hover:outline-blue-500 rounded transition-all${displayStyle ? '' : ' px-1'}`}
          style={displayStyle || {
            fontFamily: display.fontFamily,
            fontSize: `${display.fontSize}px`,
            fontWeight: display.fontWeight,
            fontStyle: display.fontStyle,
            textDecoration: field.labelUnderline ? "underline" : "none",
            color: display.color,
            lineHeight: `${display.lineHeight}px`,
            textAlign: field.labelAlignment || "left"
          }}
        >
          {displayText ?? getCurrentValue()}
          {field.required && !displayStyle && <span className="text-red-500 ml-1">*</span>}
          {suffix}
        </Tag>
      );
    }

    if (mode === "description") {
      if (!field.description && !isEditing) {
        return null;
      }
      return (
        <p
          ref={containerRef}
          data-inline-mode="description"
          {...fontAttr}
          onClick={(e) => {
            if (viewMode === 'preview') return;
            e.stopPropagation();
            selectOwnerField();
            setIsEditing(true);
          }}
          className={displayStyle ? 'inline-editor-trigger cursor-pointer hover:outline hover:outline-1 hover:outline-blue-500 rounded transition-all' : 'inline-editor-trigger cursor-pointer hover:outline hover:outline-1 hover:outline-blue-500 rounded px-1 transition-all text-xs text-gray-500'}
          style={displayStyle || {
            color: display.color,
            fontSize: `${display.fontSize}px`,
            fontFamily: display.fontFamily
          }}
        >
          {getCurrentValue() || <span className="text-gray-400 italic">Add field description...</span>}
        </p>
      );
    }

    if (mode === "placeholder") {
      return (
        <div
          ref={containerRef}
          data-inline-mode="placeholder"
          onClick={(e) => {
            if (viewMode === 'preview') return;
            e.stopPropagation();
            selectOwnerField();
            setIsEditing(true);
          }}
          className="inline-editor-trigger cursor-pointer hover:outline hover:outline-1 hover:outline-blue-500 rounded transition-all w-full"
        >
          <span className="text-gray-400 text-sm italic select-none">
            {getCurrentValue() || "Enter placeholder..."}
          </span>
        </div>
      );
    }

    // Storefront label: block <label>, the field name, then " *" in the asterisk colour.
    if (mode === "label" && displayStyle) {
      return (
        <label
          ref={containerRef}
          data-inline-mode="label"
          data-field-label="true"
          {...fontAttr}
          onClick={(e) => {
            if (viewMode === 'preview') return;
            e.preventDefault();
            e.stopPropagation();
            selectOwnerField();
            setIsEditing(true);
          }}
          className="inline-editor-trigger field-interactive-label cursor-pointer hover:outline hover:outline-1 hover:outline-blue-500 rounded transition-all"
          style={displayStyle}
        >
          {displayText ?? getCurrentValue()}
          {field.required && (
            <>
              {' '}
              <span className="required-asterisk" style={{ color: asteriskColor || '#ef4444', marginLeft: 2, display: 'inline-block' }}>*</span>
            </>
          )}
          {suffix}
        </label>
      );
    }

    // Default label / option mode
    return (
      <span
        ref={containerRef}
        data-inline-mode={mode}
        onClick={(e) => {
          if (viewMode === 'preview') return;
          e.stopPropagation();
          if (mode !== "option") selectOwnerField();
          setIsEditing(true);
        }}
        className={`inline-editor-trigger ${mode === 'option' ? 'option-interactive-label' : 'field-interactive-label'} cursor-pointer hover:outline hover:outline-1 hover:outline-blue-500 rounded transition-all${displayStyle ? '' : ' px-1 inline-flex items-center gap-1'}`}
        style={displayStyle || {
          fontFamily: display.fontFamily,
          fontSize: `${display.fontSize}px`,
          fontWeight: display.fontWeight,
          fontStyle: display.fontStyle,
          textDecoration: field.labelUnderline ? "underline" : "none",
          color: display.color,
          lineHeight: `${display.lineHeight}px`
        }}
      >
        <span>{getCurrentValue()}</span>
        {field.required && mode !== "option" && <span className="text-red-500">*</span>}
        {suffix}
      </span>
    );
  }

  // Which controls each mode shows: only what that mode saves (and what the published form renders).
  const controls = {
    family: mode !== "option" && mode !== "placeholder",
    size: mode !== "placeholder",
    lineHeight: mode !== "placeholder",
    boldItalic: mode !== "placeholder",
    color: true,
  };
  const revertAndClose = () => {
    resetEditingState();
    setShowColorPicker(false);
    setShowFontFamilyDropdown(false);
    setShowHeadingDropdown(false);
    setIsEditing(false);
  };
  const resetFormatting = () => {
    setEditingFontFamily(null);
    setEditingFontSize(null);
    setEditingLineHeight(null);
    setEditingFontWeight(null);
    setEditingFontStyle(null);
    setEditingColor(null);
    setEditingUnderline(false);
  };
  const hexValue = /^#[0-9a-f]{3,8}$/i.test(String(shownColor)) ? String(shownColor) : "";
  const isTextarea = mode !== "placeholder";

  // Render Edit Mode (multi-line text box in place + floating toolbar)
  return (
    <div ref={containerRef} className="relative inline-block w-full" data-inline-editor-open={mode}>
      <EscapeCatcher onEscape={revertAndClose} />
      {React.createElement(isTextarea ? "textarea" : "input", {
        ref: (el) => {
          inputRef.current = el;
          // Multi-line: grow with the text (no inner scrollbar).
          if (el && isTextarea) {
            el.style.height = "auto";
            el.style.height = `${el.scrollHeight + 2}px`;
          }
          // Caret at the end of the text when the editor opens (typing appends, like the single-line input did).
          if (el && !el.dataset.caretPlaced) {
            el.dataset.caretPlaced = "1";
            const n = el.value.length;
            try { el.setSelectionRange(n, n); } catch (e) { /* not focusable yet */ }
          }
        },
        ...(isTextarea ? { rows: 1 } : { type: "text" }),
        "data-inline-text": mode,
        // The canvas forces inherited fonts on inputs; [data-font] + --wpvfb-font show the chosen font here.
        "data-font": "",
        value: editingValue,
        onChange: (e) => {
          setEditingValue(e.target.value.replace(/\n/g, " "));
          if (isTextarea) {
            e.target.style.height = "auto";
            e.target.style.height = `${e.target.scrollHeight + 2}px`;
          }
        },
        onPointerDown: (e) => e.stopPropagation(),
        onKeyDown: (e) => {
          // Typed keys belong to the input (Space/Enter would otherwise start a keyboard drag of the field).
          e.stopPropagation();
          if (e.key === "Enter") {
            e.preventDefault();
            handleCommitSave();
            setIsEditing(false);
          }
          if (e.key === "Escape") {
            // Revert: close without saving.
            e.preventDefault();
            revertAndClose();
          }
        },
        autoFocus: true,
        className: "w-full bg-transparent border border-blue-600 rounded px-1.5 py-0.5 outline-none text-gray-900 shadow-xs resize-none overflow-hidden block",
        style: {
          fontFamily: shownFontFamily,
          "--wpvfb-font": shownFontFamily === "inherit" ? "inherit" : `'${String(shownFontFamily).replace(/['"]/g, "")}'`,
          fontSize: `${shownFontSize}px`,
          fontWeight: shownFontWeight,
          fontStyle: shownFontStyle,
          textDecoration: editingUnderline ? "underline" : "none",
          color: shownColor,
          lineHeight: `${shownLineHeight}px`,
          whiteSpace: "pre-wrap",
          overflowWrap: "break-word",
          minHeight: 0,
        },
      })}

      {/* Floating Toolbar Portal */}
      {createPortal(
        <div className="wpvfb-builder">
          <div
            ref={toolbarRef}
            data-inline-toolbar={mode}
            className="fixed z-[9999] bg-white rounded-xl shadow-2xl border border-gray-200 px-2 py-1.5 flex items-center gap-1 text-xs select-none animate-in fade-in zoom-in-95 duration-150"
            style={{ top: `${toolbarPosition.top}px`, left: `${toolbarPosition.left}px` }}
            onClick={(e) => e.stopPropagation()}
          >
          {/* Heading level switcher (sizes follow the theme's heading sizes) */}
          {isHeading && (
            <div className="relative">
              <button
                type="button"
                title="Heading level"
                onClick={() => setShowHeadingDropdown(!showHeadingDropdown)}
                className="px-2 py-1 bg-gray-100 hover:bg-gray-200 rounded-md font-bold text-gray-900 uppercase flex items-center gap-0.5"
              >
                <span>{editingHeadingFormat.toUpperCase()}</span>
                <ChevronDown className="w-3 h-3 text-gray-500" />
              </button>
              {showHeadingDropdown && (
                <div className="absolute top-full mt-1 left-0 bg-white border border-gray-200 rounded-lg shadow-xl py-1 z-50 min-w-[70px]">
                  {["h1", "h2", "h3", "h4"].map(tag => (
                    <button
                      key={tag}
                      type="button"
                      data-heading-option={tag}
                      onClick={() => {
                        setEditingHeadingFormat(tag);
                        setShowHeadingDropdown(false);
                      }}
                      className="w-full text-left px-3 py-1 uppercase font-bold hover:bg-gray-100 text-gray-800"
                    >
                      {tag}
                    </button>
                  ))}
                </div>
              )}
            </div>
          )}

          {/* Font Family Dropdown */}
          {controls.family && (
          <div className="relative">
            <button
              type="button"
              title="Font family"
              onClick={() => setShowFontFamilyDropdown(!showFontFamilyDropdown)}
              className="px-2 py-1 bg-gray-100 hover:bg-gray-200 rounded-md text-gray-800 max-w-[100px] truncate flex items-center gap-1 font-medium"
            >
              <span className="truncate">{shownFontFamily === "inherit" ? "Default" : shownFontFamily}</span>
              <ChevronDown className="w-3 h-3 text-gray-500 flex-shrink-0" />
            </button>
            {showFontFamilyDropdown && (
              <div className="absolute top-full mt-1 left-0 bg-white border border-gray-200 rounded-xl shadow-2xl p-1 z-50 w-52 max-h-56 flex flex-col">
                <input
                  type="text"
                  placeholder="Search font..."
                  value={fontSearch}
                  onChange={(e) => setFontSearch(e.target.value)}
                  onKeyDown={(e) => e.stopPropagation()}
                  className="px-2 py-1 text-xs border border-gray-200 rounded-md mb-1 outline-none focus:border-gray-900"
                  style={{ minHeight: 30 }}
                  autoFocus
                />
                <div className="overflow-y-auto flex-1">
                  {filteredFonts.map(f => (
                    <button
                      key={f.name}
                      type="button"
                      onClick={() => {
                        loadFormFont(f.name);
                        setEditingFontFamily(f.name);
                        setShowFontFamilyDropdown(false);
                      }}
                      className="w-full px-2 py-1 text-left text-xs hover:bg-gray-100 rounded flex justify-between items-center"
                    >
                      <span className="truncate" style={{ fontFamily: f.name }}>{f.name}</span>
                      <span className="text-[9px] text-gray-400">{f.type}</span>
                    </button>
                  ))}
                </div>
              </div>
            )}
          </div>
          )}

          {controls.family && <div className="w-px h-4 bg-gray-200 mx-0.5" />}

          {/* Font size: −, px input, + */}
          {controls.size && (
          <div className="flex items-center bg-gray-100 rounded-lg px-1 py-0.5" title="Font size (px)">
            <button
              type="button"
              onClick={() => setEditingFontSize(Math.max(8, shownFontSize - 1))}
              className="p-0.5 text-gray-600 hover:text-gray-900"
              title="Decrease Font Size"
            >
              <Minus className="w-3 h-3" />
            </button>
            <input
              type="number"
              min="8"
              max="96"
              aria-label="Font size"
              data-control="font-size"
              value={shownFontSize}
              onChange={(e) => {
                const n = parseInt(e.target.value, 10);
                if (!Number.isNaN(n)) setEditingFontSize(Math.min(96, Math.max(8, n)));
              }}
              onKeyDown={(e) => e.stopPropagation()}
              className="w-9 text-xs font-mono font-medium text-center bg-transparent outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
            />
            <button
              type="button"
              onClick={() => setEditingFontSize(Math.min(96, shownFontSize + 1))}
              className="p-0.5 text-gray-600 hover:text-gray-900"
              title="Increase Font Size"
            >
              <Plus className="w-3 h-3" />
            </button>
          </div>
          )}

          {/* Line height: −, value, + (px) */}
          {controls.lineHeight && (
          <div className="flex items-center bg-gray-100 rounded-lg px-1 py-0.5" title="Line height (px)">
            <button
              type="button"
              onClick={() => setEditingLineHeight(Math.max(8, Math.round(shownLineHeight) - 1))}
              className="p-0.5 text-gray-600 hover:text-gray-900"
              title="Decrease Line Height"
            >
              <Minus className="w-3 h-3" />
            </button>
            <span className="text-[10px] font-mono font-medium px-1 w-11 text-center" data-control="line-height">LH {Math.round(shownLineHeight)}</span>
            <button
              type="button"
              onClick={() => setEditingLineHeight(Math.min(120, Math.round(shownLineHeight) + 1))}
              className="p-0.5 text-gray-600 hover:text-gray-900"
              title="Increase Line Height"
            >
              <Plus className="w-3 h-3" />
            </button>
          </div>
          )}

          {/* Bold, Italic, Normal */}
          {controls.boldItalic && (
          <div className="flex items-center gap-0.5 bg-gray-100 rounded-lg p-0.5">
            <button
              type="button"
              onClick={() => setEditingFontWeight(isBoldWeight(shownFontWeight) ? 400 : 700)}
              className={`p-1 rounded-md transition-colors ${
                isBoldWeight(shownFontWeight) ? 'bg-gray-900 text-white shadow-xs font-bold' : 'text-gray-600 hover:text-gray-900'
              }`}
              title="Bold"
            >
              <Bold className="w-3.5 h-3.5" />
            </button>
            <button
              type="button"
              onClick={() => setEditingFontStyle(shownFontStyle === 'italic' ? 'normal' : 'italic')}
              className={`p-1 rounded-md transition-colors ${
                shownFontStyle === 'italic' ? 'bg-gray-900 text-white shadow-xs font-bold' : 'text-gray-600 hover:text-gray-900'
              }`}
              title="Italic"
            >
              <Italic className="w-3.5 h-3.5" />
            </button>
            <button
              type="button"
              onClick={resetFormatting}
              className="p-1 rounded-md transition-colors text-gray-600 hover:text-gray-900"
              title="Normal (reset formatting to the theme)"
            >
              <RotateCcw className="w-3.5 h-3.5" />
            </button>
          </div>
          )}

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

          {/* Text colour: picker + hex */}
          <div className="relative">
            <button
              type="button"
              onClick={() => setShowColorPicker(!showColorPicker)}
              className="p-1 rounded-lg hover:bg-gray-100 flex items-center gap-1 cursor-pointer"
              title="Text Color"
            >
              <div
                className="w-4 h-4 rounded-full border border-gray-300 shadow-2xs"
                style={{ backgroundColor: shownColor }}
              />
            </button>
            {showColorPicker && (
              <div className="absolute top-full mt-2 right-0 bg-white border border-gray-200 rounded-xl shadow-2xl p-3 z-50">
                <div className="text-[11px] font-semibold text-gray-700 mb-2">Text Color</div>
                <HexColorPicker color={hexValue || "#000000"} onChange={setEditingColor} />
                <HexInput value={hexValue} onChange={setEditingColor} />
              </div>
            )}
          </div>

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

          {/* Done Button */}
          <button
            type="button"
            onClick={() => {
              handleCommitSave();
              setIsEditing(false);
            }}
            className="p-1 text-emerald-600 hover:bg-emerald-50 rounded-lg transition-colors cursor-pointer"
            title="Done"
          >
            <Check className="w-4 h-4 stroke-[2.5]" />
          </button>
        </div>
      </div>,
        document.body
      )}
    </div>
  );
}

/** Escape anywhere (toolbar inputs, colour picker, font search) closes the editor without saving. */
function EscapeCatcher({ onEscape }) {
  const ref = useRef(onEscape);
  ref.current = onEscape;
  useEffect(() => {
    const onKey = (e) => {
      if (e.key !== "Escape") return;
      e.stopPropagation();
      ref.current();
    };
    document.addEventListener("keydown", onKey, true);
    return () => document.removeEventListener("keydown", onKey, true);
  }, []);
  return null;
}

/** Hex colour text box (accepts #rgb / #rrggbb / #rrggbbaa; applies once valid). */
export function HexInput({ value, onChange, label = "Hex colour" }) {
  const [text, setText] = useState(value || "");
  useEffect(() => { setText(value || ""); }, [value]);
  return (
    <input
      type="text"
      aria-label={label}
      data-control="hex"
      value={text}
      placeholder="#000000"
      onChange={(e) => {
        const v = e.target.value.trim();
        setText(v);
        const withHash = v.startsWith("#") ? v : `#${v}`;
        if (/^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(withHash)) onChange(withHash);
      }}
      onKeyDown={(e) => e.stopPropagation()}
      className="mt-2 w-full px-2 py-1.5 text-xs font-mono uppercase border border-gray-200 rounded-md outline-none focus:border-gray-900"
      style={{ minHeight: 30 }}
    />
  );
}