/**
 * DocumentEditor — the Lexical-based document body for Document Mode.
 *
 * Layout (top to bottom):
 *   - Read-only H1 with the directive's title.
 *   - Editable paragraph with the directive's goal. Editing the goal triggers
 *     a 3-second countdown bar at the bottom of the editor; if the timer
 *     expires, we call updateGoal(). Esc / ⌘Z cancels; further typing extends.
 *   - A custom non-editable StepsBlock decorator node showing each step.
 *
 * Right-click anywhere in the editor opens a custom context menu offering
 * the three directive-level actions: Clean Up, Update PR, Plan Orders.
 *
 * Live updates:
 *   - The directive prop is updated by the parent's useDirective polling.
 *   - StepsBlockContextProvider wraps the LexicalComposer so that the steps
 *     block (a Lexical DecoratorNode) sees fresh data on every render
 *     without us having to mutate the editor state.
 */
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import {
  $createParagraphNode,
  $createTextNode,
  $getRoot,
  $getSelection,
  $isElementNode,
  $isRangeSelection,
  $isTextNode,
  COMMAND_PRIORITY_LOW,
  FORMAT_TEXT_COMMAND,
  KEY_ESCAPE_COMMAND,
  SELECTION_CHANGE_COMMAND,
  UNDO_COMMAND,
  type LexicalEditor,
  type ElementNode,
  type TextFormatType,
} from "lexical";
import { $createHeadingNode, HeadingNode } from "@lexical/rich-text";
import { ListNode, ListItemNode } from "@lexical/list";
import { LexicalComposer } from "@lexical/react/LexicalComposer";
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
import {
  TEXT_FORMAT_TRANSFORMERS,
  type TextFormatTransformer,
} from "@lexical/markdown";
import type { DirectiveWithSteps } from "../../lib/api";
import {
  $createStepsBlockNode,
  $isStepsBlockNode,
  StepsBlockNode,
  StepsBlockContextProvider,
} from "./StepsBlockNode";

// =============================================================================
// Constants
// =============================================================================

/**
 * Time between the user's last keystroke and the goal being persisted (which
 * triggers the orchestrator to (re)plan). Longer when the directive is fresh
 * so the user can think; shorter when the orchestrator is already running and
 * we want changes to flow through quickly.
 */
const COUNTDOWN_FRESH_MS = 60_000;
const COUNTDOWN_RUNNING_MS = 10_000;
/** The countdown bar only appears once we're inside this many ms from firing. */
const BAR_VISIBLE_MS = 10_000;
const SAVED_TOAST_MS = 1200;
/**
 * Drafts are written synchronously to localStorage on every keystroke. We used
 * to debounce these by 250ms, but that lost the most recent edits whenever the
 * user navigated away within the debounce window — the cleanup effect cleared
 * the pending timer before it could flush. localStorage.setItem on a small
 * string is sub-millisecond, so debouncing was a premature optimisation.
 */
const DRAFT_KEY = (directiveId: string) => `makima:directive-goal-draft:${directiveId}`;
const LIVE_START_KEY = "makima:liveStartEnabled";

// =============================================================================
// Inline-only markdown round-trip for the goal paragraph.
//
// The directive goal is a single paragraph node in the editor (children[1]).
// We support inline formatting (bold, italic, underline, code, strikethrough)
// and persist it as inline markdown in `directive.goal`. We deliberately do
// NOT handle headings, lists, or blocks here — those would change the document
// shape and the goal column is just TEXT on the backend.
//
// Supported markers (single-format, no nesting except bold+italic):
//   `code`        → format: code
//   ***x***       → format: bold + italic
//   **x**         → format: bold
//   *x* / _x_     → format: italic
//   ~~x~~         → format: strikethrough
//
// Underline is preserved at the editor level via the Cmd+U shortcut and the
// toolbar, but is intentionally not emitted in markdown (it has no native
// markdown syntax). It will silently round-trip as plain text.
// =============================================================================

interface InlineToken {
  text: string;
  bold: boolean;
  italic: boolean;
  code: boolean;
  strike: boolean;
}

const INLINE_MARKERS: Array<[RegExp, Partial<InlineToken>]> = [
  // Code wins first — content inside backticks is literal.
  [/^`([^`]+)`/, { code: true }],
  // ***bold italic***
  [/^\*\*\*([^*]+)\*\*\*/, { bold: true, italic: true }],
  // **bold**
  [/^\*\*([^*]+)\*\*/, { bold: true }],
  // *italic*  or  _italic_
  [/^\*([^*]+)\*/, { italic: true }],
  [/^_([^_]+)_/, { italic: true }],
  // ~~strikethrough~~
  [/^~~([^~]+)~~/, { strike: true }],
];

function tokenizeInlineMarkdown(input: string): InlineToken[] {
  const tokens: InlineToken[] = [];
  let buf = "";
  let i = 0;
  const flushBuf = () => {
    if (buf.length > 0) {
      tokens.push({ text: buf, bold: false, italic: false, code: false, strike: false });
      buf = "";
    }
  };
  while (i < input.length) {
    const slice = input.slice(i);
    let matched = false;
    for (const [re, fmt] of INLINE_MARKERS) {
      const m = re.exec(slice);
      if (m) {
        flushBuf();
        tokens.push({
          text: m[1],
          bold: !!fmt.bold,
          italic: !!fmt.italic,
          code: !!fmt.code,
          strike: !!fmt.strike,
        });
        i += m[0].length;
        matched = true;
        break;
      }
    }
    if (!matched) {
      buf += input[i];
      i++;
    }
  }
  flushBuf();
  return tokens;
}

function appendInlineMarkdownTo(parent: ElementNode, markdown: string): void {
  const tokens = tokenizeInlineMarkdown(markdown);
  for (const t of tokens) {
    const node = $createTextNode(t.text);
    if (t.bold) node.toggleFormat("bold" as TextFormatType);
    if (t.italic) node.toggleFormat("italic" as TextFormatType);
    if (t.code) node.toggleFormat("code" as TextFormatType);
    if (t.strike) node.toggleFormat("strikethrough" as TextFormatType);
    parent.append(node);
  }
}

/**
 * Walk the editor root and serialise every non-decorator paragraph between
 * the H1 title and the end of the document into the goal markdown. This
 * captures user typing wherever it lands — the goal paragraph proper, but
 * also any extra paragraphs the user inserted above or below the StepsBlock.
 * Previously we read only `children[1]` and lost anything outside it.
 */
function serializeGoalFromRoot(root: ElementNode): string {
  const parts: string[] = [];
  const children = root.getChildren();
  for (let i = 0; i < children.length; i++) {
    const node = children[i];
    // Skip the H1 title (always at index 0 by construction).
    if (i === 0 && node.getType() === "heading") continue;
    // Skip the StepsBlock decorator and any other non-element nodes.
    if ($isStepsBlockNode(node)) continue;
    if (!$isElementNode(node)) continue;
    parts.push(serializeInlineMarkdown(node));
  }
  // Trim trailing empties; collapse runs of >2 blank lines.
  return parts
    .join("\n\n")
    .replace(/\n{3,}/g, "\n\n")
    .replace(/^\s+|\s+$/g, "");
}

/**
 * Walk the goal paragraph's children and emit inline markdown. Only TextNodes
 * are emitted — anything else falls back to its plain text content. We always
 * wrap in the most specific marker pair available so the round-trip is stable.
 */
function serializeInlineMarkdown(parent: ElementNode): string {
  let out = "";
  for (const child of parent.getChildren()) {
    if (!$isTextNode(child)) {
      out += child.getTextContent();
      continue;
    }
    let text = child.getTextContent();
    if (text.length === 0) continue;
    // Code is exclusive — applying any other marker would break the literal
    // semantics, so wrap once and skip the rest.
    if (child.hasFormat("code")) {
      out += "`" + text + "`";
      continue;
    }
    const bold = child.hasFormat("bold");
    const italic = child.hasFormat("italic");
    const strike = child.hasFormat("strikethrough");
    if (bold && italic) text = `***${text}***`;
    else if (bold) text = `**${text}**`;
    else if (italic) text = `*${text}*`;
    if (strike) text = `~~${text}~~`;
    out += text;
  }
  return out;
}

// Keep only the inline transformers; stripping the block-level ones keeps the
// MarkdownShortcutPlugin from auto-converting `# ` to a heading or `- ` to a
// list inside the goal paragraph (which would break the document shape).
const INLINE_TRANSFORMERS: TextFormatTransformer[] = TEXT_FORMAT_TRANSFORMERS;

function isLiveStartEnabled(): boolean {
  if (typeof window === "undefined") return true;
  const raw = window.localStorage.getItem(LIVE_START_KEY);
  // Default: live start ON — preserves existing behaviour for users who never
  // touch the toggle.
  return raw === null ? true : raw === "true";
}

function setLiveStartEnabled(value: boolean) {
  if (typeof window === "undefined") return;
  window.localStorage.setItem(LIVE_START_KEY, value ? "true" : "false");
}

// =============================================================================
// Editor theme — minimal, just enough so the rich-text plugin has something to
// hang class names on. We rely on our own typography otherwise.
// =============================================================================

const editorTheme = {
  paragraph: "makima-doc-paragraph",
  heading: {
    h1: "makima-doc-h1",
    h2: "makima-doc-h2",
  },
  text: {
    bold: "font-bold",
    italic: "italic",
    underline: "underline",
  },
};

// =============================================================================
// Plugins
// =============================================================================

/**
 * (Re)builds the editor's root content from the directive whenever the
 * directive ID changes. We keep this controlled so that switching documents
 * resets the editor cleanly.
 *
 * We deliberately do NOT re-seed on every directive update — only on id
 * change — so the user's in-flight goal edits aren't trampled by a poll that
 * happens mid-keystroke.
 */
function SeedContentPlugin({
  directive,
  onDraftRestored,
}: {
  directive: DirectiveWithSteps;
  onDraftRestored: (draft: string) => void;
}) {
  const [editor] = useLexicalComposerContext();
  const seededIdRef = useRef<string | null>(null);

  useEffect(() => {
    if (seededIdRef.current === directive.id) return;
    seededIdRef.current = directive.id;

    // If a localStorage draft exists for this directive, prefer it over the
    // persisted goal so the user does not lose unsaved work after navigating
    // away. The parent is told about the restored draft so its state machine
    // can transition to "dirty" or "pending".
    let initialGoal = directive.goal;
    let restoredDraft: string | null = null;
    try {
      const stored = window.localStorage.getItem(DRAFT_KEY(directive.id));
      if (stored !== null && stored !== directive.goal) {
        initialGoal = stored;
        restoredDraft = stored;
      }
    } catch {
      /* localStorage may be unavailable; fall back to persisted goal */
    }

    editor.update(
      () => {
        const root = $getRoot();
        root.clear();

        // H1: title (read-only — see ReadOnlyTitlePlugin).
        const heading = $createHeadingNode("h1");
        heading.append($createTextNode(directive.title));
        root.append(heading);

        // Goal body. The persisted goal may contain multiple paragraphs
        // (separated by blank lines) and inline markdown — split by blank
        // lines so each block becomes its own ParagraphNode, and parse the
        // inline formatting per paragraph. Always emit at least one
        // paragraph so users have a place to type even when the goal is
        // empty.
        const blocks =
          initialGoal.length > 0 ? initialGoal.split(/\n{2,}/) : [""];
        for (const block of blocks) {
          const p = $createParagraphNode();
          if (block.length > 0) {
            appendInlineMarkdownTo(p, block);
          }
          root.append(p);
        }

        // Steps block (decorator — non-editable).
        root.append($createStepsBlockNode());

        // Trailing empty paragraph so the cursor has somewhere to land below
        // the steps block. The trailing area is also captured as goal
        // content by serializeGoalFromRoot, so any typing here is preserved.
        root.append($createParagraphNode());
      },
      { tag: "history-merge" },
    );

    if (restoredDraft !== null) {
      // Defer so the parent's state update lands AFTER the editor's seeded
      // content (avoids the GoalChangePlugin firing first and double-tracking).
      queueMicrotask(() => onDraftRestored(restoredDraft!));
    }
  }, [editor, directive.id, directive.title, directive.goal, onDraftRestored]);

  return null;
}

/**
 * Prevents edits to the H1 (title) node. The title is meant to feel like a
 * file name — clicking it shows a caret, but typing is no-op'd. We watch the
 * editor's update stream and, if the H1's text drifts from the seed value,
 * revert it on the next microtask so the user sees the change get rejected
 * rather than silently swallowed.
 */
function ReadOnlyTitlePlugin({ title }: { title: string }) {
  const [editor] = useLexicalComposerContext();

  useEffect(() => {
    let reverting = false;
    return editor.registerUpdateListener(({ editorState }) => {
      if (reverting) return;
      editorState.read(() => {
        const root = $getRoot();
        const first = root.getFirstChild();
        if (!first || first.getType() !== "heading") return;
        const text = first.getTextContent();
        if (text === title) return;
        reverting = true;
        queueMicrotask(() => {
          editor.update(
            () => {
              const r = $getRoot();
              const h = r.getFirstChild();
              if (!h || h.getType() !== "heading") {
                reverting = false;
                return;
              }
              if ($isElementNode(h) && h.getTextContent() !== title) {
                h.getChildren().forEach((c) => c.remove());
                if (title.length > 0) {
                  h.append($createTextNode(title));
                }
              }
              reverting = false;
            },
            { tag: "history-merge" },
          );
        });
      });
    });
  }, [editor, title]);

  return null;
}

/**
 * Watches the goal paragraph (the second top-level child) and reports its
 * current text to the parent on every change. Kept separate from the
 * countdown bar so the bar is purely a UI concern.
 */
function GoalChangePlugin({
  onGoalChange,
}: {
  onGoalChange: (goal: string) => void;
}) {
  return (
    <OnChangePlugin
      ignoreSelectionChange
      onChange={(editorState) => {
        editorState.read(() => {
          // Walk the WHOLE root (minus title H1 and StepsBlock decorator) so
          // typing anywhere in the document body is captured. Previously we
          // only read children[1] and silently discarded edits placed in the
          // trailing area below the StepsBlock.
          onGoalChange(serializeGoalFromRoot($getRoot()));
        });
      }}
    />
  );
}

/**
 * Wires Lexical commands into UI callbacks. We forward Esc presses (used to
 * cancel the countdown) and Undo (⌘/Ctrl-Z) without intercepting them.
 */
function CountdownKeyBridge({
  onEsc,
  onUndo,
}: {
  onEsc: () => void;
  onUndo: () => void;
}) {
  const [editor] = useLexicalComposerContext();
  useEffect(() => {
    const unEsc = editor.registerCommand(
      KEY_ESCAPE_COMMAND,
      () => {
        onEsc();
        return false; // don't consume; let other handlers run
      },
      COMMAND_PRIORITY_LOW,
    );
    const unUndo = editor.registerCommand(
      UNDO_COMMAND,
      () => {
        onUndo();
        return false;
      },
      COMMAND_PRIORITY_LOW,
    );
    return () => {
      unEsc();
      unUndo();
    };
  }, [editor, onEsc, onUndo]);
  return null;
}

/**
 * Render a "Draft saved Ns ago" label that ticks once per second. Returns
 * null when the timestamp is older than 60 seconds (clutter-management).
 */
function useDraftFreshnessLabel(draftSavedAt: number | null): string | null {
  const [now, setNow] = useState(() => Date.now());
  useEffect(() => {
    const id = window.setInterval(() => setNow(Date.now()), 1000);
    return () => window.clearInterval(id);
  }, []);
  if (draftSavedAt == null) return null;
  const ageSec = Math.max(0, Math.floor((now - draftSavedAt) / 1000));
  if (ageSec > 60) return null;
  if (ageSec < 2) return "Draft saved";
  return `Draft saved ${ageSec}s ago`;
}

// =============================================================================
// Floating formatting toolbar
//
// Appears just above the current text selection when the selection covers any
// text inside the goal paragraph. Buttons dispatch FORMAT_TEXT_COMMAND which
// toggles the corresponding format flag on every covered TextNode — Lexical's
// built-in behaviour. Keyboard shortcuts (Cmd/Ctrl+B/I/U) also work via the
// RichTextPlugin even when the toolbar isn't shown.
// =============================================================================

function FloatingFormatToolbar() {
  const [editor] = useLexicalComposerContext();
  const [coords, setCoords] = useState<{ x: number; y: number } | null>(null);
  const [active, setActive] = useState({
    bold: false,
    italic: false,
    underline: false,
    code: false,
    strike: false,
  });

  useEffect(() => {
    const update = () => {
      editor.getEditorState().read(() => {
        const sel = $getSelection();
        if (!$isRangeSelection(sel) || sel.isCollapsed()) {
          setCoords(null);
          return;
        }
        // Only show inside the goal paragraph (children[1] of root).
        const anchorTop = sel.anchor.getNode().getTopLevelElement();
        const focusTop = sel.focus.getNode().getTopLevelElement();
        if (!anchorTop || !focusTop) {
          setCoords(null);
          return;
        }
        const root = $getRoot();
        const goalNode = root.getChildren()[1];
        if (anchorTop.getKey() !== goalNode?.getKey()) {
          setCoords(null);
          return;
        }
        // Selection rect from the DOM.
        const domSel = window.getSelection();
        if (!domSel || domSel.rangeCount === 0) {
          setCoords(null);
          return;
        }
        const rect = domSel.getRangeAt(0).getBoundingClientRect();
        if (rect.width === 0 && rect.height === 0) {
          setCoords(null);
          return;
        }
        setCoords({ x: rect.left + rect.width / 2, y: rect.top });
        setActive({
          bold: sel.hasFormat("bold"),
          italic: sel.hasFormat("italic"),
          underline: sel.hasFormat("underline"),
          code: sel.hasFormat("code"),
          strike: sel.hasFormat("strikethrough"),
        });
      });
    };

    const unselect = editor.registerCommand(
      SELECTION_CHANGE_COMMAND,
      () => {
        update();
        return false;
      },
      COMMAND_PRIORITY_LOW,
    );
    const unupdate = editor.registerUpdateListener(({ editorState }) => {
      // Use the just-committed state for format flags.
      void editorState;
      update();
    });
    return () => {
      unselect();
      unupdate();
    };
  }, [editor]);

  if (!coords) return null;

  const fmt = (type: TextFormatType) => () => {
    editor.dispatchCommand(FORMAT_TEXT_COMMAND, type);
  };

  const button = (label: string, onClick: () => void, isActive: boolean, hint: string) => (
    <button
      type="button"
      onMouseDown={(e) => e.preventDefault()}
      onClick={onClick}
      title={hint}
      className={`px-2 py-1 text-[11px] font-mono uppercase tracking-wide border-r border-[rgba(117,170,252,0.2)] last:border-r-0 transition-colors ${
        isActive
          ? "bg-[#75aafc] text-[#0a1628]"
          : "text-[#9bc3ff] hover:bg-[rgba(117,170,252,0.1)]"
      }`}
    >
      {label}
    </button>
  );

  return (
    <div
      className="fixed z-40 flex items-stretch bg-[#0a1628] border border-[rgba(117,170,252,0.35)] shadow-lg pointer-events-auto"
      style={{
        left: coords.x,
        top: coords.y - 8,
        transform: "translate(-50%, -100%)",
      }}
    >
      {button("B", fmt("bold"), active.bold, "Bold (⌘B)")}
      {button("I", fmt("italic"), active.italic, "Italic (⌘I)")}
      {button("U", fmt("underline"), active.underline, "Underline (⌘U)")}
      {button("S", fmt("strikethrough"), active.strike, "Strikethrough")}
      {button("</>", fmt("code"), active.code, "Inline code")}
    </div>
  );
}

// =============================================================================
// Right-click context menu
// =============================================================================

interface EditorContextMenuProps {
  x: number;
  y: number;
  onClose: () => void;
  onCleanup: () => void;
  onUpdatePR: () => void;
  onPlanOrders: () => void;
}

function EditorContextMenu({
  x,
  y,
  onClose,
  onCleanup,
  onUpdatePR,
  onPlanOrders,
}: EditorContextMenuProps) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const handleClick = (e: MouseEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node)) onClose();
    };
    const handleKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    document.addEventListener("mousedown", handleClick);
    document.addEventListener("keydown", handleKey);
    return () => {
      document.removeEventListener("mousedown", handleClick);
      document.removeEventListener("keydown", handleKey);
    };
  }, [onClose]);

  // Clamp into viewport.
  useEffect(() => {
    if (!ref.current) return;
    const rect = ref.current.getBoundingClientRect();
    const vw = window.innerWidth;
    const vh = window.innerHeight;
    if (rect.right > vw) ref.current.style.left = `${x - rect.width}px`;
    if (rect.bottom > vh) ref.current.style.top = `${y - rect.height}px`;
  }, [x, y]);

  const item =
    "w-full px-3 py-1.5 text-left text-xs font-mono text-[#9bc3ff] hover:bg-[rgba(117,170,252,0.1)] flex items-center gap-2";

  return (
    <div
      ref={ref}
      className="fixed z-50 bg-[#0a1628] border border-[rgba(117,170,252,0.3)] shadow-lg min-w-[180px]"
      style={{ left: x, top: y }}
    >
      <div className="px-3 py-1.5 text-[10px] font-mono text-[#556677] uppercase border-b border-[rgba(117,170,252,0.2)]">
        Contract
      </div>
      <button
        type="button"
        className={item}
        onClick={() => {
          onCleanup();
          onClose();
        }}
      >
        <span className="text-[#75aafc]">⎚</span>
        Clean Up
      </button>
      <button
        type="button"
        className={item}
        onClick={() => {
          onUpdatePR();
          onClose();
        }}
      >
        <span className="text-[#75aafc]">↗</span>
        Update PR
      </button>
      <button
        type="button"
        className={item}
        onClick={() => {
          onPlanOrders();
          onClose();
        }}
      >
        <span className="text-[#c084fc]">◆</span>
        Plan Orders
      </button>
    </div>
  );
}

// =============================================================================
// Countdown bar
// =============================================================================

interface SaveCountdownBarProps {
  state: "idle" | "dirty" | "pending" | "saving" | "saved" | "error";
  remainingMs: number;
  liveStart: boolean;
  orchestratorRunning: boolean;
  draftSavedAt: number | null;
  onSaveNow: () => void;
  onCancel: () => void;
  onToggleLiveStart: (next: boolean) => void;
}

function SaveCountdownBar({
  state,
  remainingMs,
  liveStart,
  orchestratorRunning,
  draftSavedAt,
  onSaveNow,
  onCancel,
  onToggleLiveStart,
}: SaveCountdownBarProps) {
  // The bar is now ALWAYS visible. Users explicitly asked to be able to
  // observe save state at all times — and to have a "Save now" button they
  // can hit without waiting for the countdown.

  let label: string;
  let progressPct = 0;
  let tone = "border-[rgba(117,170,252,0.3)] text-[#9bc3ff]";

  if (state === "pending") {
    const seconds = Math.max(0, Math.ceil(remainingMs / 1000));
    // Show ticking countdown in the last 10s, otherwise a quieter label.
    if (remainingMs <= BAR_VISIBLE_MS) {
      label = orchestratorRunning
        ? `Replanning in ${seconds}s — Esc/Undo cancels.`
        : `Saving in ${seconds}s — Esc/Undo cancels.`;
      progressPct = Math.max(
        0,
        Math.min(100, (1 - remainingMs / BAR_VISIBLE_MS) * 100),
      );
    } else {
      label = "Unsaved changes — auto-save soon.";
      progressPct = 0;
    }
  } else if (state === "dirty") {
    label = orchestratorRunning
      ? "Unsaved changes — saving will replan the contract."
      : "Unsaved changes.";
    progressPct = 0;
  } else if (state === "saving") {
    label = "Saving…";
    progressPct = 100;
    tone = "border-emerald-700 text-emerald-300";
  } else if (state === "saved") {
    label = "Saved";
    progressPct = 100;
    tone = "border-emerald-700 text-emerald-300";
  } else if (state === "error") {
    label = "Save failed — try again.";
    progressPct = 100;
    tone = "border-red-700 text-red-300";
  } else {
    label = "Up to date.";
    progressPct = 0;
    tone = "border-[rgba(117,170,252,0.2)] text-[#7788aa]";
  }

  // Right-side "Draft saved Xs ago" stamp — re-renders on a 1Hz ticker so
  // the user can see drafts being captured. We only ever surface this when
  // a write has happened in the last minute; otherwise we hide it.
  const draftLabel = useDraftFreshnessLabel(draftSavedAt);

  const dirtyish = state === "dirty" || state === "pending";

  return (
    <div
      className={`shrink-0 border-t border-dashed ${tone} bg-[#0a1628]`}
      data-makima-countdown={state}
    >
      <div className="h-0.5 bg-[#10203a]">
        <div
          className="h-full bg-[#75aafc] transition-[width] duration-100 ease-linear"
          style={{ width: `${progressPct}%` }}
        />
      </div>
      <div className="flex items-center gap-3 px-4 py-1.5">
        <span className="text-[10px] font-mono flex-1 truncate">{label}</span>

        {draftLabel && (
          <span
            className="text-[10px] font-mono text-[#556677] shrink-0"
            title="Drafts auto-save to this device on every keystroke"
          >
            {draftLabel}
          </span>
        )}

        {/* Live-start toggle is always shown so users can flip it from the bar. */}
        <label className="flex items-center gap-1.5 text-[10px] font-mono text-[#7788aa] cursor-pointer select-none shrink-0">
          <input
            type="checkbox"
            checked={liveStart}
            onChange={(e) => onToggleLiveStart(e.target.checked)}
            className="accent-[#75aafc]"
          />
          <span>Live start</span>
        </label>

        {/* "Save now" is always available when there are unsaved edits, so
            users don't have to wait for the auto-save countdown. */}
        <button
          type="button"
          onClick={onSaveNow}
          disabled={!dirtyish}
          className="text-[10px] font-mono text-emerald-300 hover:text-white disabled:text-[#445566] disabled:cursor-not-allowed border border-emerald-700/60 disabled:border-[#1f2a3a] rounded px-2 py-0.5 shrink-0"
        >
          Save now
        </button>
        {dirtyish && (
          <button
            type="button"
            onClick={onCancel}
            className="text-[10px] font-mono text-[#7788aa] hover:text-white border border-[#2a3a5a] rounded px-2 py-0.5 shrink-0"
          >
            Discard
          </button>
        )}
      </div>
    </div>
  );
}

// =============================================================================
// Main component
// =============================================================================

export interface DocumentEditorProps {
  directive: DirectiveWithSteps;
  onUpdateGoal: (goal: string) => Promise<void> | void;
  onCleanup: () => Promise<void> | void;
  onCreatePR: () => Promise<void> | void;
  onPickUpOrders: () => Promise<unknown> | unknown;
}

type SaveState = "idle" | "dirty" | "pending" | "saving" | "saved" | "error";

export function DocumentEditor({
  directive,
  onUpdateGoal,
  onCleanup,
  onCreatePR,
  onPickUpOrders,
}: DocumentEditorProps) {
  // ---- Lexical config ----------------------------------------------------
  const initialConfig = useMemo(
    () => ({
      // Re-key the composer when the directive id changes so we get a clean
      // editor state per document. We do this via the `key` prop on
      // <LexicalComposer> below as well.
      namespace: `makima-doc-${directive.id}`,
      onError: (err: Error) => {
        // eslint-disable-next-line no-console
        console.error("[DocumentEditor]", err);
      },
      nodes: [HeadingNode, ListNode, ListItemNode, StepsBlockNode],
      theme: editorTheme,
      editable: true,
    }),
    [directive.id],
  );

  // ---- Live-start setting (localStorage-backed) -------------------------
  const [liveStart, setLiveStartState] = useState<boolean>(isLiveStartEnabled);
  const toggleLiveStart = useCallback((next: boolean) => {
    setLiveStartEnabled(next);
    setLiveStartState(next);
  }, []);

  // ---- Goal auto-save state machine --------------------------------------
  const orchestratorRunning =
    !!directive.orchestratorTaskId || !!directive.completionTaskId;
  // Pick the right countdown based on whether we'd be restarting work.
  const countdownMs = orchestratorRunning ? COUNTDOWN_RUNNING_MS : COUNTDOWN_FRESH_MS;

  const [saveState, setSaveState] = useState<SaveState>("idle");
  const [remainingMs, setRemainingMs] = useState(countdownMs);
  const pendingGoalRef = useRef<string>(directive.goal);
  const persistedGoalRef = useRef<string>(directive.goal);
  const timerRef = useRef<number | null>(null);
  const tickRef = useRef<number | null>(null);
  const deadlineRef = useRef<number>(0);
  const editorRef = useRef<LexicalEditor | null>(null);
  // Tracks the most recent value the backend was asked to save. Once a poll
  // confirms `directive.goal === lastSavedValueRef.current` AND
  // `pendingGoalRef.current` still matches (i.e. user hasn't typed more),
  // the draft is safe to drop from localStorage. Until then we keep the
  // draft so an interrupted save doesn't lose user content.
  const lastSavedValueRef = useRef<string | null>(null);
  // Timestamp of the most recent localStorage draft write — drives the
  // "Draft saved Xs ago" indicator so users can SEE that drafts are working.
  const [draftSavedAt, setDraftSavedAt] = useState<number | null>(null);

  // Track the persisted goal in a ref so beforeunload handlers can do their
  // own freshness comparison without a stale closure.
  useEffect(() => {
    persistedGoalRef.current = directive.goal;
  }, [directive.goal]);

  function cancelTimers() {
    if (timerRef.current != null) {
      window.clearTimeout(timerRef.current);
      timerRef.current = null;
    }
    if (tickRef.current != null) {
      window.clearInterval(tickRef.current);
      tickRef.current = null;
    }
  }

  // Reset state when switching directives.
  useEffect(() => {
    pendingGoalRef.current = directive.goal;
    cancelTimers();
    setSaveState("idle");
    setRemainingMs(countdownMs);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [directive.id]);

  // If the persisted goal updated externally and matches the pending goal,
  // settle the bar.
  useEffect(() => {
    if (
      (saveState === "pending" || saveState === "dirty") &&
      pendingGoalRef.current === directive.goal
    ) {
      cancelTimers();
      setSaveState("idle");
      try {
        window.localStorage.removeItem(DRAFT_KEY(directive.id));
      } catch {
        /* localStorage may be unavailable; ignore */
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [directive.goal]);

  const fireSave = useCallback(async () => {
    // Read DIRECTLY from the editor so we don't trust pendingGoalRef alone.
    // If the OnChangePlugin missed an event for any reason, this still
    // captures the user's current document state.
    let next = pendingGoalRef.current;
    const editor = editorRef.current;
    if (editor) {
      editor.getEditorState().read(() => {
        next = serializeGoalFromRoot($getRoot());
      });
    }
    pendingGoalRef.current = next;

    // DEFENSE IN DEPTH: write the draft to localStorage BEFORE talking to
    // the backend. If the save errors, the page closes mid-flight, or the
    // network drops, the user's content survives in the draft.
    try {
      window.localStorage.setItem(DRAFT_KEY(directive.id), next);
      setDraftSavedAt(Date.now());
    } catch (err) {
      // eslint-disable-next-line no-console
      console.warn("[makima] pre-save draft flush failed", err);
    }

    cancelTimers();
    setSaveState("saving");
    try {
      await onUpdateGoal(next);
      lastSavedValueRef.current = next;
      setSaveState("saved");
      // NOTE: we deliberately do NOT clear localStorage here. The roundtrip
      // effect below clears it once the polled directive.goal confirms our
      // save persisted AND the user hasn't kept typing past it.
      window.setTimeout(() => {
        // Only fade if no new edit has reopened a pending state in the meantime.
        setSaveState((s) => (s === "saved" ? "idle" : s));
      }, SAVED_TOAST_MS);
    } catch (e) {
      // eslint-disable-next-line no-console
      console.error("Failed to save goal", e);
      setSaveState("error");
      window.setTimeout(() => {
        setSaveState((s) => (s === "error" ? "idle" : s));
      }, 4000);
    }
  }, [onUpdateGoal, directive.id]);

  // Roundtrip-confirmed draft cleanup. Only drops the localStorage draft
  // when the polled directive.goal matches what we just saved AND the
  // user hasn't typed anything new in the meantime. Keeps the draft alive
  // through every "we hit save but the page reloads before the poll lands"
  // edge case.
  useEffect(() => {
    if (
      lastSavedValueRef.current !== null &&
      directive.goal === lastSavedValueRef.current &&
      pendingGoalRef.current === lastSavedValueRef.current
    ) {
      try {
        window.localStorage.removeItem(DRAFT_KEY(directive.id));
      } catch {
        /* ignore */
      }
      lastSavedValueRef.current = null;
    }
  }, [directive.goal, directive.id]);

  const startOrExtendCountdown = useCallback(() => {
    cancelTimers();
    deadlineRef.current = Date.now() + countdownMs;
    setSaveState("pending");
    setRemainingMs(countdownMs);
    tickRef.current = window.setInterval(() => {
      const remaining = Math.max(0, deadlineRef.current - Date.now());
      setRemainingMs(remaining);
      if (remaining <= 0 && tickRef.current != null) {
        window.clearInterval(tickRef.current);
        tickRef.current = null;
      }
    }, 200);
    timerRef.current = window.setTimeout(() => {
      void fireSave();
    }, countdownMs);
  }, [fireSave, countdownMs]);

  const cancelCountdown = useCallback(() => {
    if (saveState !== "pending" && saveState !== "dirty") return;
    cancelTimers();
    pendingGoalRef.current = directive.goal; // reset pending edit
    setSaveState("idle");
    setRemainingMs(countdownMs);
    try {
      window.localStorage.removeItem(DRAFT_KEY(directive.id));
    } catch {
      /* ignore */
    }
    // Also revert the editor's goal paragraph back to the persisted value, so
    // the user sees the rollback. The persisted value may contain inline
    // markdown — re-parse it so formatting comes back styled, not as raw
    // asterisks.
    const editor = editorRef.current;
    if (editor) {
      editor.update(
        () => {
          const root = $getRoot();
          const goalNode = root.getChildren()[1];
          if (!goalNode || !$isElementNode(goalNode)) return;
          goalNode.getChildren().forEach((c) => c.remove());
          if (directive.goal.length > 0) {
            appendInlineMarkdownTo(goalNode, directive.goal);
          }
        },
        { tag: "history-merge" },
      );
    }
  }, [directive.goal, directive.id, saveState, countdownMs]);

  // Cleanup on unmount.
  useEffect(() => {
    return () => {
      cancelTimers();
    };
  }, []);

  // Belt-and-braces draft persistence: even though we write synchronously on
  // every keystroke, browsers can swallow the very last edit if the user hits
  // a hard close (tab close, browser quit, mobile background) before React
  // processes the keystroke. These handlers flush whatever is in pendingGoalRef
  // straight to localStorage on every "we're about to be paused" signal.
  useEffect(() => {
    const flush = () => {
      try {
        const value = pendingGoalRef.current;
        const persisted = persistedGoalRef.current;
        const key = DRAFT_KEY(directive.id);
        if (value === persisted) {
          window.localStorage.removeItem(key);
        } else {
          window.localStorage.setItem(key, value);
        }
      } catch (err) {
        // eslint-disable-next-line no-console
        console.warn("[makima] flush handler failed to persist draft", err);
      }
    };
    const onBeforeUnload = () => flush();
    const onPageHide = () => flush();
    const onVisibility = () => {
      if (document.visibilityState === "hidden") flush();
    };
    window.addEventListener("beforeunload", onBeforeUnload);
    window.addEventListener("pagehide", onPageHide);
    document.addEventListener("visibilitychange", onVisibility);
    return () => {
      window.removeEventListener("beforeunload", onBeforeUnload);
      window.removeEventListener("pagehide", onPageHide);
      document.removeEventListener("visibilitychange", onVisibility);
      // Final flush on React unmount (route navigation within the SPA).
      flush();
    };
  }, [directive.id]);

  const handleGoalChange = useCallback(
    (goal: string) => {
      pendingGoalRef.current = goal;

      // 1. Always persist work-in-progress to localStorage IMMEDIATELY so
      //    leaving the page does not lose typing. We previously debounced
      //    this write by 250ms, but unmount could clear the pending timer
      //    before it flushed — losing the most recent edits exactly when
      //    we needed them most.
      try {
        if (goal === directive.goal) {
          window.localStorage.removeItem(DRAFT_KEY(directive.id));
        } else {
          window.localStorage.setItem(DRAFT_KEY(directive.id), goal);
          setDraftSavedAt(Date.now());
        }
      } catch (err) {
        // eslint-disable-next-line no-console
        console.warn("[makima] failed to persist draft", err);
      }

      // 2. State-machine.
      if (goal === directive.goal) {
        // Edit reverted — cancel the countdown (if any).
        if (saveState === "pending" || saveState === "dirty") {
          cancelTimers();
          setSaveState("idle");
        }
        return;
      }

      if (liveStart) {
        startOrExtendCountdown();
      } else {
        // Manual mode: stay "dirty" until the user clicks Save now.
        cancelTimers();
        setSaveState("dirty");
      }
    },
    [directive.goal, directive.id, liveStart, saveState, startOrExtendCountdown],
  );

  // ---- Right-click context menu -----------------------------------------
  const [menu, setMenu] = useState<{ x: number; y: number } | null>(null);

  const handleContextMenu = useCallback((e: React.MouseEvent) => {
    e.preventDefault();
    setMenu({ x: e.clientX, y: e.clientY });
  }, []);

  // ---- Render ------------------------------------------------------------
  return (
    <div className="flex flex-col h-full overflow-hidden">
      <StepsBlockContextProvider value={{ directive }}>
        <LexicalComposer key={directive.id} initialConfig={initialConfig}>
          {/* Capture the editor ref via a tiny inline plugin */}
          <EditorRefCapture editorRef={editorRef} />
          <SeedContentPlugin
            directive={directive}
            onDraftRestored={(draft) => {
              pendingGoalRef.current = draft;
              if (liveStart) {
                startOrExtendCountdown();
              } else {
                setSaveState("dirty");
              }
            }}
          />
          <ReadOnlyTitlePlugin title={directive.title} />
          <HistoryPlugin />
          <GoalChangePlugin onGoalChange={handleGoalChange} />
          <CountdownKeyBridge onEsc={cancelCountdown} onUndo={cancelCountdown} />
          {/* Inline markdown shortcuts: typing **foo** auto-formats as bold,
              `foo` as code, etc. We pass only TEXT_FORMAT_TRANSFORMERS so
              block-level shortcuts (# heading, - list) don't fire and
              accidentally restructure the document. */}
          <MarkdownShortcutPlugin transformers={INLINE_TRANSFORMERS} />
          <FloatingFormatToolbar />

          <div
            className="flex-1 overflow-auto"
            onContextMenu={handleContextMenu}
          >
            <div className="max-w-3xl mx-auto px-8 py-10">
              <RichTextPlugin
                contentEditable={
                  <ContentEditable
                    aria-placeholder="Describe the contract's goal…"
                    placeholder={
                      <div className="pointer-events-none absolute text-[#445566] font-mono text-[13px] mt-2">
                        Describe the contract's goal…
                      </div>
                    }
                    className="outline-none font-mono text-[13px] leading-relaxed text-[#dbe7ff] [&_.makima-doc-h1]:text-[24px] [&_.makima-doc-h1]:font-medium [&_.makima-doc-h1]:text-white [&_.makima-doc-h1]:mb-3 [&_.makima-doc-h1]:tracking-tight [&_.makima-doc-paragraph]:my-2 [&_.makima-doc-paragraph]:text-[13px] [&_.makima-doc-paragraph]:text-[#c0d0e0] relative"
                  />
                }
                ErrorBoundary={LexicalErrorBoundary}
              />
            </div>
          </div>
        </LexicalComposer>
      </StepsBlockContextProvider>

      <SaveCountdownBar
        state={saveState}
        remainingMs={remainingMs}
        liveStart={liveStart}
        orchestratorRunning={orchestratorRunning}
        draftSavedAt={draftSavedAt}
        onSaveNow={() => void fireSave()}
        onCancel={cancelCountdown}
        onToggleLiveStart={toggleLiveStart}
      />

      {menu && (
        <EditorContextMenu
          x={menu.x}
          y={menu.y}
          onClose={() => setMenu(null)}
          onCleanup={() => {
            void onCleanup();
          }}
          onUpdatePR={() => {
            void onCreatePR();
          }}
          onPlanOrders={() => {
            void onPickUpOrders();
          }}
        />
      )}
    </div>
  );
}

/**
 * Tiny plugin that stashes the LexicalEditor instance on a ref so the parent
 * component can issue updates from outside (e.g. to revert the goal on cancel).
 */
function EditorRefCapture({
  editorRef,
}: {
  editorRef: React.MutableRefObject<LexicalEditor | null>;
}) {
  const [editor] = useLexicalComposerContext();
  useEffect(() => {
    editorRef.current = editor;
    return () => {
      if (editorRef.current === editor) {
        editorRef.current = null;
      }
    };
  }, [editor, editorRef]);
  return null;
}

// Re-export the steps-block helpers so consumers can include the node class
// in their own initial configs if needed.
export { $createStepsBlockNode, $isStepsBlockNode, StepsBlockNode };