import { expect, test } from "@playwright/test"

import { ApiClient } from "../api-client"
import { SEED } from "../seed-constants"

const apiClient = new ApiClient()

test.describe("Compliance Dashboard @full", () => {
  test.beforeEach(async () => {
    await apiClient.login(SEED.admin.email, SEED.admin.password)
    await apiClient.resetDb()
  })

  test("compliance dashboard loads", async ({ page }) => {
    await page.goto("/compliance")
    // Page should load without error
    await expect(
      page
        .getByText(/compliance|konformität/i)
        .first()
        .or(page.getByRole("heading").first())
    ).toBeVisible()
  })

  test("shows area status cards", async ({ page }) => {
    await page.goto("/compliance")
    // Should display compliance areas: KCANG, FINANCE, DSGVO, VEREIN
    await expect(page.getByText(/kcang/i)).toBeVisible()
    await expect(page.getByText(/finan/i).first()).toBeVisible()
    await expect(page.getByText(/dsgvo|datenschutz/i).first()).toBeVisible()
    await expect(page.getByText(/verein/i).first()).toBeVisible()
  })

  test("overdue deadlines highlighted", async ({ page }) => {
    await page.goto("/compliance")
    // EÜR Abgabe should be overdue and highlighted
    await expect(
      page.getByText(/EÜR/i).or(page.getByText(/überfällig|overdue/i).first())
    ).toBeVisible()

    // Overdue items should have visual distinction (red text, warning badge, etc.)
    const overdueIndicator = page
      .locator("[data-testid*='overdue']")
      .or(page.locator(".text-destructive, .text-red, [class*='overdue']"))
      .first()

    if (await overdueIndicator.isVisible()) {
      await expect(overdueIndicator).toBeVisible()
    }
  })

  test("upcoming deadlines show days remaining", async ({ page }) => {
    await page.goto("/compliance")
    // Should display upcoming deadlines with days remaining
    await expect(
      page
        .getByText(/tag|day/i)
        .first()
        .or(page.locator("[data-testid*='deadline']").first())
    ).toBeVisible()
  })
})