"use client";

/**
 * DiscipleBadge — the small circular Śrīla Prabhupāda portrait that marks a
 * profile as belonging to one of his own initiated disciples.
 *
 * Positioned by the caller (the profile header overlaps it on the avatar's
 * lower-right, like a verification tick). Tapping it toggles a tooltip reading
 * "Śrīla Prabhupāda's Direct Disciple" — click rather than hover, so it works
 * identically on touch, where there is no hover state.
 *
 * The tooltip closes on a second tap, on Escape, or on any outside click.
 */

import { useEffect, useRef, useState } from "react";
import Image from "next/image";
import { cn } from "@/lib/utils";

const LABEL = "Śrīla Prabhupāda's Direct Disciple";

export function DiscipleBadge({ className }: { className?: string }) {
  const [open, setOpen] = useState(false);
  const wrapRef = useRef<HTMLSpanElement>(null);

  // Dismiss on outside click / Escape. Bound only while open so we don't keep
  // document-level listeners around for every profile view.
  useEffect(() => {
    if (!open) return;
    function onPointerDown(e: PointerEvent) {
      if (!wrapRef.current?.contains(e.target as Node)) setOpen(false);
    }
    function onKey(e: KeyboardEvent) {
      if (e.key === "Escape") setOpen(false);
    }
    document.addEventListener("pointerdown", onPointerDown);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("pointerdown", onPointerDown);
      document.removeEventListener("keydown", onKey);
    };
  }, [open]);

  return (
    <span ref={wrapRef} className={cn("relative inline-flex", className)}>
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        aria-label={LABEL}
        aria-expanded={open}
        // Native tooltip as a desktop-hover bonus; the popover below is the
        // real (touch-friendly) affordance.
        title={LABEL}
        className={cn(
          "size-8 sm:size-9 overflow-hidden rounded-full",
          "bg-card ring-2 ring-card shadow-md",
          "transition-transform hover:scale-105 active:scale-95",
          "outline-none focus-visible:ring-2 focus-visible:ring-ring",
        )}
      >
        <Image
          src="/images/prabhupada-disciple-badge.png"
          alt=""
          width={72}
          height={72}
          className="size-full object-cover"
        />
      </button>

      {open ? (
        <span
          role="tooltip"
          className={cn(
            "absolute left-1/2 top-full z-50 mt-2 -translate-x-1/2",
            "w-max max-w-[70vw] rounded-lg px-2.5 py-1.5",
            "bg-foreground text-background text-xs font-medium text-center",
            "shadow-lg animate-in fade-in-0 zoom-in-95",
          )}
        >
          {/* Caret pointing back at the badge. */}
          <span
            aria-hidden
            className="absolute -top-1 left-1/2 size-2 -translate-x-1/2 rotate-45 bg-foreground"
          />
          {LABEL}
        </span>
      ) : null}
    </span>
  );
}