import { describe, it, expect } from "vitest";
import { renderToStaticMarkup } from "react-dom/server";
import { isValidElement, type ReactElement } from "react";
import { menuSections, type MenuItem } from "../admin/ui/navData";

/**
 * Pins the sidebar icon-refresh contract (2026-06-12 design): every menu
 * item has a glyph, and no two items share one — duplicated glyphs were the
 * whole problem the refresh fixed (3× "people", 3× "sliders", …). Odin's
 * rawIcon (OdinMark, MUI-styled + animated) is exempt from rendering here
 * but still must exist and stay the ONLY rawIcon.
 */

const allItems: Array<MenuItem & { section: string }> = menuSections.flatMap(
  (s) => s.items.map((item) => ({ section: s.label, ...item })),
);

describe("sidebar nav icons", () => {
  it("every item has an icon and a section hue", () => {
    for (const section of menuSections) {
      expect(section.hue, `section ${section.label}`).toBeTruthy();
    }
    for (const item of allItems) {
      expect(isValidElement(item.icon), `${item.section}/${item.label}`).toBe(
        true,
      );
    }
  });

  it("Odin is the only rawIcon (its own tile + animation stay unique)", () => {
    const raw = allItems.filter((i) => i.rawIcon);
    expect(raw.map((i) => i.label)).toEqual(["Odin"]);
  });

  it("no two items share a glyph", () => {
    const rendered = allItems
      .filter((i) => !i.rawIcon)
      .map((item) => ({
        key: `${item.section}/${item.label}`,
        markup: renderToStaticMarkup(item.icon as ReactElement),
      }));

    const seen = new Map<string, string>();
    for (const { key, markup } of rendered) {
      const dupe = seen.get(markup);
      expect(dupe, `${key} shares its glyph with ${dupe}`).toBeUndefined();
      seen.set(markup, key);
    }
    expect(seen.size).toBe(rendered.length);
  });
});