"use client";

/**
 * components/save-for-later/link-chooser.tsx
 *
 * The small menu that pops up at the cursor on a left-click of a page link:
 * Open · Open in new tab · Save for later. Positioned near the click and
 * clamped to the viewport. (Right-click, middle-click, and modifier-clicks are
 * never intercepted — see the provider — so the native browser menu / new-tab
 * gestures still work.)
 */

import { useEffect, useLayoutEffect, useRef, useState } from "react";
import { ArrowRight, Bookmark, ExternalLink } from "lucide-react";

const line = "border-[color:var(--color-paper-line)] dark:border-[color:var(--color-ink-line)]";

const MENU_W = 208;
const MENU_H = 132;

export function LinkChooser({
  x,
  y,
  href,
  onOpen,
  onOpenNewTab,
  onSave,
}: {
  x: number;
  y: number;
  href: string;
  onOpen: () => void;
  onOpenNewTab: () => void;
  onSave: () => void;
}) {
  const ref = useRef<HTMLDivElement>(null);
  const [pos, setPos] = useState({ left: x, top: y });

  useLayoutEffect(() => {
    const pad = 8;
    const vw = window.innerWidth;
    const vh = window.innerHeight;
    const left = Math.min(Math.max(pad, x), vw - MENU_W - pad);
    const top = Math.min(Math.max(pad, y), vh - MENU_H - pad);
    setPos({ left, top });
  }, [x, y]);

  // Move keyboard focus into the menu so it's keyboard-operable + Escape-able.
  useEffect(() => {
    ref.current?.querySelector<HTMLButtonElement>("button")?.focus();
  }, []);

  const host = (() => {
    try {
      return new URL(href, window.location.href).hostname;
    } catch {
      return href;
    }
  })();

  return (
    <div
      data-sfl-ui
      ref={ref}
      role="menu"
      aria-label="Link actions"
      style={{ left: pos.left, top: pos.top, width: MENU_W }}
      className={`fixed z-[2147483000] rounded-lg border ${line} bg-[color:var(--color-paper)] dark:bg-[color:var(--color-ink-elev-1)] shadow-2xl overflow-hidden`}
    >
      <p className={`px-3 pt-2 pb-1.5 font-mono text-[10px] uppercase tracking-wider text-[color:var(--color-paper-mute)] dark:text-[color:var(--color-ink-mute)] truncate border-b ${line}`} title={href}>
        {host}
      </p>
      <button type="button" role="menuitem" onClick={onOpen} className="flex w-full items-center gap-2 px-3 py-2.5 text-left text-sm hover:bg-[color:var(--color-paper-2)] dark:hover:bg-[color:var(--color-ink-elev-2)]">
        <ArrowRight size={15} aria-hidden className="text-[color:var(--color-entpoind)]" /> Open
      </button>
      <button type="button" role="menuitem" onClick={onOpenNewTab} className="flex w-full items-center gap-2 px-3 py-2.5 text-left text-sm hover:bg-[color:var(--color-paper-2)] dark:hover:bg-[color:var(--color-ink-elev-2)]">
        <ExternalLink size={15} aria-hidden /> Open in new tab
      </button>
      <button type="button" role="menuitem" onClick={onSave} className={`flex w-full items-center gap-2 px-3 py-2.5 text-left text-sm border-t ${line} hover:bg-[color:var(--color-paper-2)] dark:hover:bg-[color:var(--color-ink-elev-2)]`}>
        <Bookmark size={15} aria-hidden className="text-[color:var(--color-entpoind)]" /> Save for later
      </button>
    </div>
  );
}