"use client";

/**
 * TASK-0123 — the floating selection toolbar (the writing tools' entry point).
 *
 * Appears above a multi-block selection (⌘/Ctrl+click or Shift+click range in
 * the page view) with the **AI** menu (the four writing actions + translate
 * language picker — the shared `WritingActionsList`) and a Clear button. The
 * block context menu and the block hover toolbar reach the same actions via
 * their "Writing tools" submenus (single-block selections).
 *
 * a11y: role="toolbar"; the AI menu is role="menu" (the shared list), Escape
 * closes, focus returns to the trigger.
 *
 * Pinned testids (tests/e2e/specs/ai-writing.spec.ts — do not rename):
 *   selection-toolbar   the toolbar (visible when a selection exists)
 *   selection-ai-menu   the "AI" trigger button
 *   selection-clear     the Clear button
 */
import { useCallback, useEffect, useRef, useState } from "react";
import { Minus, Sparkles, X } from "lucide-react";
import { cn } from "@/lib/utils";
import { WritingActionsList } from "@/components/ai/writing-actions-menu";
import type { WritingAction } from "@/lib/ai";
import type { Block } from "@/lib/types";

export interface SelectionToolbarProps {
  pageId: string;
  /** The selected blocks (empty = the toolbar is not rendered by the caller). */
  blocks: Block[];
  onClear: () => void;
  /** The chosen writing action (+ target language for translate). */
  onAction: (action: WritingAction, language?: string) => void;
}

export function SelectionToolbar({ pageId, blocks, onClear, onAction }: SelectionToolbarProps) {
  const [menuOpen, setMenuOpen] = useState(false);
  const [anchor, setAnchor] = useState<{ top: number; left: number } | null>(null);
  const rootRef = useRef<HTMLDivElement>(null);
  const triggerRef = useRef<HTMLButtonElement>(null);

  // Position the toolbar above the topmost selected block (the page view
  // scopes the lookup to its own block list via [data-page-view]).
  useEffect(() => {
    const scope = rootRef.current?.closest("[data-page-view]");
    if (!scope || blocks.length === 0) return;
    const els = blocks
      .map((b) => scope.querySelector<HTMLElement>(`[data-block-id="${b.id}"]`))
      .filter((el): el is HTMLElement => !!el);
    if (els.length === 0) return;
    const top = Math.min(...els.map((el) => el.getBoundingClientRect().top));
    const left = Math.max(8, Math.min(els[0]!.getBoundingClientRect().left, window.innerWidth - 280));
    setAnchor({ top: top - 6, left });
  }, [blocks]);

  // Close on outside click / Escape.
  useEffect(() => {
    if (!menuOpen) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        e.stopPropagation();
        setMenuOpen(false);
        triggerRef.current?.focus();
      }
    };
    const onClick = (e: MouseEvent) => {
      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setMenuOpen(false);
    };
    window.addEventListener("keydown", onKey);
    window.addEventListener("mousedown", onClick);
    return () => {
      window.removeEventListener("keydown", onKey);
      window.removeEventListener("mousedown", onClick);
    };
  }, [menuOpen]);

  const handlePick = useCallback(
    (action: WritingAction, language?: string) => {
      setMenuOpen(false);
      onAction(action, language);
    },
    [onAction]
  );

  if (blocks.length === 0) return null;

  return (
    <div
      ref={rootRef}
      data-testid="selection-toolbar"
      className="fixed z-[70] flex -translate-y-full items-center gap-0.5 rounded-md border border-border bg-popover p-1 shadow-lg"
      style={anchor ? { top: anchor.top, left: anchor.left } : { top: 0, left: 0, visibility: "hidden" }}
      role="toolbar"
      aria-label={`Actions for ${blocks.length} selected block${blocks.length === 1 ? "" : "s"}`}
    >
      <span className="px-2 py-1 text-[11px] font-medium text-muted-foreground">
        {blocks.length} selected
      </span>

      <div className="relative">
        <button
          ref={triggerRef}
          type="button"
          data-testid="selection-ai-menu"
          onClick={() => setMenuOpen((v) => !v)}
          className={cn("flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-accent", menuOpen && "bg-accent")}
          aria-haspopup="menu"
          aria-expanded={menuOpen}
          aria-label="AI writing tools"
        >
          <Sparkles className="size-3.5" aria-hidden />
          AI
        </button>
        {menuOpen ? (
          <div className="absolute left-0 top-full z-50 mt-0.5 w-44 rounded-md border border-border bg-popover p-1 shadow-lg" role="menu" aria-label="AI writing tools">
            <WritingActionsList onPick={handlePick} />
          </div>
        ) : null}
      </div>

      <div className="mx-0.5 h-4 w-px bg-border" aria-hidden />

      <button
        type="button"
        data-testid="selection-clear"
        onClick={onClear}
        className="flex items-center gap-1 rounded px-2 py-1 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
        aria-label="Clear selection"
      >
        <Minus className="size-3.5" aria-hidden />
        Clear
      </button>
      <button
        type="button"
        onClick={onClear}
        className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
        aria-label="Close toolbar"
      >
        <X className="size-3.5" aria-hidden />
      </button>
    </div>
  );
}