import { renderToStaticMarkup } from "react-dom/server";
import { describe, expect, it } from "vitest";
import type { KatalogItem, Placement, Room } from "./api";
import { loeseFlaechen2D } from "./flaechen2d";
import { Viewer2D } from "./Viewer2D.tsx";

// Minimaler 3.0×2.4-Raum mit einer Tür – nur die von Viewer2D gelesenen Felder.
const room = {
  shell: {
    walls: [
      { id: "w1", start: [0, 0], end: [3, 0], kind: "massiv", openings: ["d1"] },
      { id: "w2", start: [3, 0], end: [3, 2.4], kind: "massiv", openings: [] },
      { id: "w3", start: [3, 2.4], end: [0, 2.4], kind: "massiv", openings: [] },
      { id: "w4", start: [0, 2.4], end: [0, 0], kind: "massiv", openings: [] },
    ],
    floor: {
      polygon: [
        [0, 0],
        [3, 0],
        [3, 2.4],
        [0, 2.4],
      ],
    },
  },
  openings: [{ id: "d1", type: "door", hostWall: "w1", offset: 1.9, width: 0.8 }],
} as unknown as Room;

const catalog = [
  {
    id: "c1",
    funktionsTyp: "wc",
    masse: { w: 0.4, d: 0.6, h: 0.4 },
    mount: "boden",
    priorityClass: "P1",
  },
] as unknown as KatalogItem[];

const placements: Placement[] = [
  {
    id: "p1",
    catalogItemId: "c1",
    pose: { pos: [1.5, 1.2], yawDeg: 0 },
    gewerk: "sanitaer",
    locked: false,
    source: "solver",
  },
];

describe("Viewer2D (Render-Smoke)", () => {
  it("rendert Hülle, Wände, Footprint, Label und die Norm-Status-Farbe", () => {
    const html = renderToStaticMarkup(
      <Viewer2D
        room={room}
        placements={placements}
        catalog={catalog}
        gewaehltId={null}
        statusById={new Map([["p1", "verletzt"]])}
        onSelect={() => {}}
      />,
    );
    expect(html).toContain("<svg");
    expect(html).toContain("<line"); // Wände
    expect(html).toContain("<polygon"); // Boden + Footprint
    expect(html).toContain("wc"); // Label des Objekts
    expect(html).toContain("#c0392b"); // «verletzt»-Farbe angewendet
  });

  it("ohne Plan keine Footprints, aber die Hülle steht", () => {
    const html = renderToStaticMarkup(
      <Viewer2D
        room={room}
        placements={[]}
        catalog={catalog}
        gewaehltId={null}
        statusById={new Map()}
        onSelect={() => {}}
      />,
    );
    expect(html).toContain("<polygon"); // Bodenfläche
    expect(html).not.toContain("wc");
  });
});

describe("Viewer2D – Flächen-Layer + Einzelwand-Highlight (Welle C)", () => {
  const basis = {
    room,
    placements: [] as Placement[],
    catalog,
    gewaehltId: null,
    statusById: new Map<string, "verletzt" | "knapp">(),
    onSelect: () => {},
  };
  const flaechen2d = loeseFlaechen2D(
    "bad",
    null,
    null,
    {
      boden: { material: "fliesen-anthrazit" },
      waende: [{ wandIndex: 1, material: "fliesen-gruen", bereich: "voll", akzent: true }],
    },
    room.shell.walls.length,
  );

  it("ohne Flächen-Daten = exakt heutige Darstellung (null ≙ Prop weggelassen)", () => {
    const ohneProp = renderToStaticMarkup(<Viewer2D {...basis} />);
    const mitNull = renderToStaticMarkup(<Viewer2D {...basis} flaechen2d={null} />);
    expect(mitNull).toBe(ohneProp);
    expect(ohneProp).not.toContain("Boden:"); // keine Flächen-Legende
    expect(ohneProp).not.toContain("fp-boden-struktur");
  });

  it("Flächen-Layer (Default AN): Boden-Tönung/Struktur + Material-Legende", () => {
    const html = renderToStaticMarkup(<Viewer2D {...basis} flaechen2d={flaechen2d} />);
    expect(html).toContain("Boden: Fliesen anthrazit");
    expect(html).toContain("Wand: Fliesen grün (Akzent)");
    expect(html).toContain("fp-boden-struktur"); // Fugen-Struktur des Bodens
  });

  it("hervorgehobeneWand markiert die Wandbänder dezent CI-orange", () => {
    const ohne = renderToStaticMarkup(<Viewer2D {...basis} />);
    const mit = renderToStaticMarkup(<Viewer2D {...basis} hervorgehobeneWand={1} />);
    expect(ohne).not.toContain("#D6914F");
    expect(mit).toContain("#D6914F"); // THEME.orange als Highlight-Kante
  });
});