import { useLayoutEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { ChevronLeft, ChevronRight } from "lucide-react";

// The floating module-name pill in the top header. The label area is sized to the WIDEST
// reachable module title (measured live, in the current language only — so dropping a locale or
// gaining/losing a module just changes the input, nothing is hard-coded), which keeps the label
// column a constant width: the name never shifts and the arrows stay put when paging between
// modules. Carries the back/forward arrows that step cyclically through the active modules, plus
// the accent dot (the former PageTitle "eyebrow" look, folded in here).
export default function ModuleName({
  label,
  labels,
  onPrev,
  onNext,
  canPrev,
  canNext,
}: {
  label: string;
  // Every reachable module's title in the current language — drives the fixed label width.
  labels: string[];
  onPrev: () => void;
  onNext: () => void;
  canPrev: boolean;
  canNext: boolean;
}) {
  const { t } = useTranslation();
  const labelRef = useRef<HTMLSpanElement>(null);
  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  const [labelW, setLabelW] = useState<number>();

  // Measure the widest label using the label span's own rendered font (respects font-scale,
  // tracking and the uppercase transform). Re-runs whenever the label set changes — i.e. on a
  // language switch or an account switch that changes which modules are reachable.
  useLayoutEffect(() => {
    const el = labelRef.current;
    if (!el || labels.length === 0) return;
    const cs = getComputedStyle(el);
    const canvas = canvasRef.current ?? (canvasRef.current = document.createElement("canvas"));
    const ctx = canvas.getContext("2d");
    if (!ctx) return;
    ctx.font = `${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`;
    const ls = parseFloat(cs.letterSpacing) || 0;
    const upper = cs.textTransform === "uppercase";
    let max = 0;
    for (const s of labels) {
      const txt = upper ? s.toUpperCase() : s;
      const w = ctx.measureText(txt).width + ls * txt.length;
      if (w > max) max = w;
    }
    setLabelW(Math.ceil(max) + 2);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [labels.join("
")]);

  const arrow =
    "p-1 rounded-lg text-muted transition hover:text-fg hover:bg-card disabled:opacity-25 disabled:pointer-events-none";
  return (
    <div className="pointer-events-auto shrink-0 max-w-[55vw] h-11 px-2.5 rounded-2xl glass-menu flex items-center gap-1.5">
      <button
        onClick={onPrev}
        disabled={!canPrev}
        title={t("header.prevModule")}
        aria-label={t("header.prevModule")}
        className={arrow}
      >
        <ChevronLeft className="w-4 h-4" />
      </button>
      <button
        onClick={onNext}
        disabled={!canNext}
        title={t("header.nextModule")}
        aria-label={t("header.nextModule")}
        className={arrow}
      >
        <ChevronRight className="w-4 h-4" />
      </button>
      <span className="w-px h-5 bg-border/70 mx-1 shrink-0" />
      <span className="min-w-0 inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.16em] text-fg">
        <span className="w-1.5 h-1.5 rounded-full bg-accent shrink-0" />
        <span
          ref={labelRef}
          className="min-w-0 truncate"
          style={labelW ? { width: labelW } : undefined}
        >
          {label}
        </span>
      </span>
    </div>
  );
}