path: root/makima/frontend/src/components/directives/DirectiveContextMenu.tsx

import { useEffect, useRef } from "react";
import type { DirectiveSummary } from "../../lib/api";

interface DirectiveContextMenuProps {
  x: number;
  y: number;
  directive: DirectiveSummary;
  onClose: () => void;
  onStart: () => void;
  onPause: () => void;
  onArchive: () => void;
  onDelete: () => void;
  onGoToPR: () => void;
  /**
   * Reset the contract to a fresh empty draft (clears goal + pr_url, status
   * back to 'draft'). Past revisions stay as history. Optional so the legacy
   * tabular UI doesn't have to wire it up.
   */
  onNewDraft?: () => void;
}

export function DirectiveContextMenu({
  x,
  y,
  directive,
  onClose,
  onStart,
  onPause,
  onArchive,
  onDelete,
  onGoToPR,
  onNewDraft,
}: DirectiveContextMenuProps) {
  const menuRef = useRef<HTMLDivElement>(null);

  // Close on click outside
  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
        onClose();
      }
    };

    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        onClose();
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    document.addEventListener("keydown", handleKeyDown);

    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
      document.removeEventListener("keydown", handleKeyDown);
    };
  }, [onClose]);

  // Adjust position if menu would overflow viewport
  useEffect(() => {
    if (menuRef.current) {
      const rect = menuRef.current.getBoundingClientRect();
      const viewportWidth = window.innerWidth;
      const viewportHeight = window.innerHeight;

      if (rect.right > viewportWidth) {
        menuRef.current.style.left = `${x - rect.width}px`;
      }
      if (rect.bottom > viewportHeight) {
        menuRef.current.style.top = `${y - rect.height}px`;
      }
    }
  }, [x, y]);

  const menuItemClass =
    "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";
  const dividerClass = "border-t border-[rgba(117,170,252,0.2)] my-1";

  const showStart = directive.status === "draft" || directive.status === "paused" || directive.status === "idle";
  const showPause = directive.status === "active";
  const showArchive = directive.status !== "archived";
  const showGoToPR = !!directive.prUrl;
  // "New draft" appears once the contract is inactive (its iteration has
  // shipped) — that's the explicit affordance for starting the next cycle
  // on a clean slate while keeping prior revisions as history.
  const showNewDraft = !!onNewDraft && directive.status === "inactive";

  return (
    <div
      ref={menuRef}
      className="fixed z-50 bg-[#0a1628] border border-[rgba(117,170,252,0.3)] shadow-lg min-w-[180px]"
      style={{ left: x, top: y }}
    >
      {/* Header showing directive title */}
      <div className="px-3 py-1.5 text-[10px] font-mono text-[#555] uppercase border-b border-[rgba(117,170,252,0.2)] truncate max-w-[200px]">
        {directive.title}
      </div>

      {/* New draft — the canonical action on an inactive (shipped) contract. */}
      {showNewDraft && (
        <>
          <button
            className={menuItemClass}
            onClick={() => {
              onNewDraft?.();
              onClose();
            }}
          >
            <span className="text-emerald-300">＋</span>
            New draft
          </button>
          <div className={dividerClass} />
        </>
      )}

      {/* Status actions */}
      {showStart && (
        <button
          className={menuItemClass}
          onClick={() => {
            onStart();
            onClose();
          }}
        >
          <span className="text-[#75aafc]">▶</span>
          Start
        </button>
      )}

      {showPause && (
        <button
          className={menuItemClass}
          onClick={() => {
            onPause();
            onClose();
          }}
        >
          <span className="text-[#75aafc]">❚❚</span>
          Pause
        </button>
      )}

      {showArchive && (
        <button
          className={menuItemClass}
          onClick={() => {
            onArchive();
            onClose();
          }}
        >
          <span className="text-[#75aafc]">▣</span>
          Archive
        </button>
      )}

      {/* Go to PR link */}
      {showGoToPR && (
        <>
          <div className={dividerClass} />
          <button
            className={menuItemClass}
            onClick={() => {
              onGoToPR();
              onClose();
            }}
          >
            <span className="text-[#75aafc]">↗</span>
            Go to PR
          </button>
        </>
      )}

      <div className={dividerClass} />

      {/* Delete action */}
      <button
        className={`${menuItemClass} text-red-400 hover:bg-red-400/10`}
        onClick={() => {
          onDelete();
          onClose();
        }}
      >
        <span className="text-red-400">✕</span>
        Delete
      </button>
    </div>
  );
}