import { render } from "@react-email/components";
import { describe, it, expect } from "vitest";
import { AnalyticsTemplate, PeriodData } from "./AnalyticsTemplate";
import * as React from "react";

describe("AnalyticsTemplate", () => {
  it("renders entry and exit pages correctly", async () => {
    const period: PeriodData = {
      label: "Test Period",
      visitors: 100,
      visits: 120,
      views: 500,
      bounceRate: 50,
      visitDuration: "2m",
      topPages: [{ url: "/home", views: 50 }],
      topReferrers: [{ url: "google.com", visitors: 30 }],
      // These fields will cause a TS error because they don't exist yet,
      // but we force it to see it fail.
      topEntryPages: [{ url: "/entry", visitors: 40 }],
      topExitPages: [{ url: "/exit", visitors: 20 }],
      chartData: [],
    } as any; // Cast as any to bypass TS compilation before we update the type

    const html = await render(
      <AnalyticsTemplate
        greeting="Hallo Kunde,"
        domain="example.com"
        periods={[period]}
      />
    );

    // Assert that the new sections for entry and exit pages exist.
    expect(html).toContain("Häufigste Einstiege");
    expect(html).toContain("Häufigste Ausstiege");
    expect(html).toContain("/entry");
    expect(html).toContain("/exit");
    
    // Assert that the badges have updated line heights
    expect(html).toContain('line-height:1.5');
  });
});