"use client";

import { getA4StarTooltipMeta } from "@/lib/tuvi-a4-overview-interpretation";

type Props = {
  starKey: string;
  label: string;
  /** `manuscript`: nền sổ / mực nâu — dùng trong Luận giải khái quát. */
  tone?: "night" | "manuscript";
};

export function StarNameTooltip({ starKey, label, tone = "night" }: Props) {
  const meta = getA4StarTooltipMeta(starKey);
  const displayLabel = meta?.label ?? label;
  const meaning = meta?.meaning?.trim();
  const category = meta?.category;
  const keywords = meta?.keywords?.filter(Boolean).slice(0, 3) ?? [];

  const trigger =
    tone === "manuscript" ?
      "group relative inline-flex cursor-help items-baseline whitespace-nowrap border-b border-dotted border-[color:rgba(61,48,32,0.42)] text-[color:var(--ctkp-narrative-ink-strong)] underline-offset-[3px] decoration-[color:rgba(61,48,32,0.28)]"
    : "group relative inline-flex cursor-help items-baseline whitespace-nowrap border-b border-dotted border-[#d4af37]/65 text-[#f0d78c] decoration-[#d4af37]/50 underline-offset-2";

  const panel =
    tone === "manuscript" ?
      "pointer-events-none invisible absolute bottom-full left-1/2 z-50 mb-2 w-[min(18rem,calc(100vw-2rem))] -translate-x-1/2 rounded-sm border border-[color:rgba(74,58,40,0.35)] bg-[#f4ecdf] px-3 py-2.5 text-left text-[12px] leading-snug text-[color:var(--ctkp-narrative-ink)] shadow-[0_10px_28px_-8px_rgba(45,36,24,0.35)] opacity-0 transition-[opacity,visibility] duration-150 group-hover:visible group-hover:opacity-100 sm:text-[13px]"
    : "pointer-events-none invisible absolute bottom-full left-1/2 z-50 mb-2 w-[min(18rem,calc(100vw-2rem))] -translate-x-1/2 rounded-lg border border-[#d4af37]/35 bg-[rgba(12,10,8,0.97)] px-3 py-2.5 text-left text-[12px] leading-snug text-slate-100 shadow-[0_8px_28px_-6px_rgba(0,0,0,0.65)] opacity-0 transition-[opacity,visibility] duration-150 group-hover:visible group-hover:opacity-100 sm:text-[13px]";

  const titleCls =
    tone === "manuscript" ?
      "block font-semibold text-[color:var(--ctkp-narrative-ink-strong)]"
    : "block font-semibold text-[#f5e6bc]";

  const catCls =
    tone === "manuscript" ?
      "mt-1 block text-[11px] uppercase tracking-[0.12em] text-[color:var(--ctkp-narrative-caption)]"
    : "mt-1 block text-[11px] uppercase tracking-[0.12em] text-[#c9b87c]/90";

  const meaningCls =
    tone === "manuscript" ? "mt-2 block text-[color:var(--ctkp-narrative-ink-soft)]" : "mt-2 block text-slate-200/95";

  const kwCls =
    tone === "manuscript" ? "mt-2 block text-[11px] text-[color:var(--ctkp-narrative-caption)]" : "mt-2 block text-[11px] text-slate-400/95";

  return (
    <span className={trigger}>
      <span className="font-semibold">{displayLabel}</span>
      <span className={panel} role="tooltip">
        <span className={titleCls}>{displayLabel}</span>
        {category ? <span className={catCls}>{category}</span> : null}
        {meaning ? <span className={meaningCls}>{meaning}</span> : null}
        {keywords.length ? <span className={kwCls}>{keywords.join(" · ")}</span> : null}
      </span>
    </span>
  );
}