import { describe, it, expect } from "vitest";
import { readFileSync } from "node:fs";
import { resolve } from "node:path";

describe("Referenzen Page (prototype port)", () => {
  const pagePath = resolve(__dirname, "../../pages/referenzen.vue");
  const content = readFileSync(pagePath, "utf-8");

  it("should have page title Referenzen", () => {
    expect(content).toContain("Referenzen");
  });

  it("should have hms-gallery grid", () => {
    expect(content).toContain("hms-gallery");
  });

  it("should have 9 reference images", () => {
    expect(content).toContain("ref1.jpg");
    expect(content).toContain("ref9.jpg");
  });

  it("should have category filter chips with hms-chip", () => {
    expect(content).toContain("hms-chip");
    expect(content).toContain("Alle");
    expect(content).toContain("Open-Air");
    expect(content).toContain("Indoor");
    expect(content).toContain("Rigging");
    expect(content).toContain("Event");
  });

  it("should have filter logic with computed filteredImages", () => {
    expect(content).toContain("filteredImages");
    expect(content).toContain("filter");
    expect(content).toContain("computed");
  });

  it("should have loading skeleton state", () => {
    expect(content).toContain("hms-skeleton");
    expect(content).toContain("loading");
  });

  it("should use ErrorState component", () => {
    expect(content).toContain("ErrorState");
  });

  it("should use EmptyState component", () => {
    expect(content).toContain("EmptyState");
  });

  it("should use TypeScript with lang=ts", () => {
    expect(content).toContain('<script setup lang="ts">');
  });
});