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

describe("Referenzen Page", () => {
  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 9 gallery images", () => {
    expect(content).toContain('data-testid="gallery-grid"');
    const matches = content.match(/picsum\.photos/g);
    expect(matches).not.toBeNull();
    expect(matches!.length).toBe(9);
  });

  it("should have 4 category filter chips", () => {
    expect(content).toContain('data-testid="filter-chips"');
    expect(content).toContain("Alle");
    expect(content).toContain("Open-Air");
    expect(content).toContain("Indoor");
    expect(content).toContain("Rigging");
  });

  it("should have Lightbox component", () => {
    expect(content).toContain("Lightbox");
    expect(content).toContain(':is-open="lightboxOpen"');
    expect(content).toContain('@close="closeLightbox"');
    expect(content).toContain('@prev="prevImage"');
    expect(content).toContain('@next="nextImage"');
  });

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

  it("should have openLightbox function", () => {
    expect(content).toContain("openLightbox");
    expect(content).toContain("currentIndex");
  });

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

  it("should use Tailwind classes, no inline styles", () => {
    expect(content).not.toContain('style="');
  });

  it("should use useHead for page title", () => {
    expect(content).toContain("useHead");
  });
});

describe("Lightbox Component", () => {
  const componentPath = resolve(__dirname, "../../components/Lightbox.vue");
  const content = readFileSync(componentPath, "utf-8");

  it("should have close button with data-testid", () => {
    expect(content).toContain('data-testid="lightbox-close"');
  });

  it("should have prev button with data-testid", () => {
    expect(content).toContain('data-testid="lightbox-prev"');
  });

  it("should have next button with data-testid", () => {
    expect(content).toContain('data-testid="lightbox-next"');
  });

  it("should have data-testid lightbox", () => {
    expect(content).toContain('data-testid="lightbox"');
  });

  it("should emit close, prev, next events", () => {
    expect(content).toContain("close");
    expect(content).toContain("prev");
    expect(content).toContain("next");
  });

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