"use client";

import { useState, useRef, useEffect } from "react";

const TOOLTIP_TEXT =
  "This is the number of extracted verse entries from Śrīla Prabhupāda's original translations and purports. Some consecutive verses are merged into a single entry (e.g. Texts 16–18), so the actual verse count in the original manuscript may differ.";

export function ExtractedVerseCount({
  count,
  label = "verses",
  className = "",
}: {
  count: number;
  label?: string;
  className?: string;
}) {
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLSpanElement>(null);

  useEffect(() => {
    if (!open) return;
    function handleClick(e: MouseEvent) {
      if (ref.current && !ref.current.contains(e.target as Node)) {
        setOpen(false);
      }
    }
    document.addEventListener("mousedown", handleClick);
    return () => document.removeEventListener("mousedown", handleClick);
  }, [open]);

  return (
    <span ref={ref} className={`inline-flex items-center gap-1 ${className}`}>
      <span>
        {count.toLocaleString()} {label}
      </span>
      <span className="relative inline-flex">
        <button
          type="button"
          onClick={(e) => {
            e.preventDefault();
            e.stopPropagation();
            setOpen((v) => !v);
          }}
          onMouseEnter={() => setOpen(true)}
          onMouseLeave={() => setOpen(false)}
          className="inline-flex items-center justify-center w-4 h-4 rounded-full border border-current opacity-50 hover:opacity-80 transition-opacity text-[10px] leading-none font-semibold"
          aria-label="About verse count"
        >
          i
        </button>
        {open && (
          <span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 px-3 py-2 rounded-lg bg-zinc-900 dark:bg-zinc-700 text-white text-xs leading-relaxed shadow-lg z-50 pointer-events-none">
            {TOOLTIP_TEXT}
            <span className="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-zinc-900 dark:border-t-zinc-700" />
          </span>
        )}
      </span>
    </span>
  );
}