import type { InterpretationSignalLike, LayeredSectionLike } from "@/lib/tuvi-overview-visual-helpers";
import { buildPalaceFocusCellsV1 } from "@/lib/tuvi-overview-visual-helpers";
import { TUVI_VISUAL_PALACE_LEDE, TUVI_VISUAL_PALACE_TITLE } from "@/lib/tuvi-overview-visual-copy.v1";

type Props = {
  readonly palaceRing: readonly { readonly key: string; readonly name: string }[];
  readonly layeredSections: readonly LayeredSectionLike[] | undefined;
  readonly interpretationSignals: readonly InterpretationSignalLike[] | undefined;
  readonly className?: string;
};

/** Mức nhấn trong chữ — tránh từ “cao/thấp” kiểu chấm điểm. */
function focusNuanceVi(f: "low" | "medium" | "high"): string {
  if (f === "high") return "nổi bật";
  if (f === "low") return "nhẹ";
  return "vừa";
}

function focusStyles(f: "low" | "medium" | "high"): string {
  if (f === "high")
    return "border-[#9a7a4e]/50 bg-[rgba(180,140,88,0.14)] text-[#2d2418]/95 print:border-neutral-500 print:bg-neutral-200/90";
  if (f === "low") return "border-[#c4b49a]/60 bg-[rgba(255,252,245,0.5)] text-[#6a6156]/95 print:border-neutral-400 print:bg-neutral-100";
  return "border-[#b8a790]/55 bg-[rgba(245,237,220,0.5)] text-[#3a3328]/92 print:border-neutral-400 print:bg-neutral-50";
}

export function TuViPalaceFocusHeatmap({ palaceRing, layeredSections, interpretationSignals, className }: Props) {
  const cells = buildPalaceFocusCellsV1(palaceRing, layeredSections, interpretationSignals);
  if (!cells?.length) return null;

  return (
    <aside
      data-tuvi-visual="palace-focus"
      className={`ctkp-narrative-aside-panel ctkp-tuvi-visual-panel max-w-full min-w-0 overflow-hidden print:break-inside-avoid print:max-w-full px-3 py-3 sm:px-4 ${className ?? ""}`}
      aria-label="Trọng tâm luận giải theo cung"
    >
      <h4 className="font-ctkp-serif text-[11px] font-semibold tracking-[0.1em] text-[color:var(--ctkp-narrative-ink-strong)] sm:text-[12px]">
        {TUVI_VISUAL_PALACE_TITLE}
      </h4>
      <p className="mt-1.5 font-ctkp-serif text-[10px] leading-relaxed text-[color:var(--ctkp-narrative-caption)] sm:text-[11px]">
        {TUVI_VISUAL_PALACE_LEDE}
      </p>
      <div className="mt-3 grid w-full min-w-0 max-w-full grid-cols-2 gap-1.5 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 print:grid-cols-6">
        {cells.map((c) => (
          <div
            key={c.palaceKey}
            className={`min-w-0 rounded-sm border px-1 py-1.5 text-center ${focusStyles(c.focus)}`}
            title={`${c.displayName} — ${focusNuanceVi(c.focus)} trong trọng tâm luận giải (đếm tham chiếu chữ)`}
          >
            <div className="break-words font-ctkp-serif text-[9px] font-semibold leading-snug tracking-tight sm:text-[10px]">
              {c.displayName}
            </div>
            <div className="mt-0.5 font-ctkp-serif text-[8px] uppercase tracking-[0.1em] text-[color:var(--ctkp-narrative-caption)]">
              {c.tag}
            </div>
            <div className="mt-0.5 font-ctkp-serif text-[8px] text-[color:var(--ctkp-narrative-ink-soft)] print:text-neutral-800">
              {focusNuanceVi(c.focus)}
            </div>
          </div>
        ))}
      </div>
    </aside>
  );
}