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

test.describe("Kontakt Page", () => {
  test.beforeEach(async ({ page }) => {
    await page.goto("/kontakt");
  });

  test("should display contact page heading", async ({ page }) => {
    await expect(page.locator('[data-testid="kontakt-headline"]')).toContainText("Kontakt");
  });

  test("should show office address card", async ({ page }) => {
    const card = page.locator('[data-testid="office-card"]');
    await expect(card).toBeVisible();
    await expect(card).toContainText("Grockelhofen 10");
    await expect(card).toContainText("89340 Leipheim");
  });

  test("should show warehouse address card", async ({ page }) => {
    const card = page.locator('[data-testid="warehouse-card"]');
    await expect(card).toBeVisible();
    await expect(card).toContainText("Ellzee");
  });

  test("should show opening hours card", async ({ page }) => {
    const card = page.locator('[data-testid="hours-card"]');
    await expect(card).toBeVisible();
    await expect(card).toContainText("Öffnungszeiten");
  });

  test("should show 2 contact persons", async ({ page }) => {
    await expect(page.locator('[data-testid="contact-person-markus"]')).toBeVisible();
    await expect(page.locator('[data-testid="contact-person-thomas"]')).toBeVisible();
  });

  test("should have form with all required fields", async ({ page }) => {
    await expect(page.locator('[data-testid="form-name"]')).toBeVisible();
    await expect(page.locator('[data-testid="form-email"]')).toBeVisible();
    await expect(page.locator('[data-testid="form-phone"]')).toBeVisible();
    await expect(page.locator('[data-testid="form-message"]')).toBeVisible();
    await expect(page.locator('[data-testid="form-privacy"]')).toBeVisible();
    await expect(page.locator('[data-testid="form-submit"]')).toBeVisible();
  });

  test("should block submit when email is empty", async ({ page }) => {
    await page.locator('[data-testid="form-name"]').fill("Test User");
    await page.locator('[data-testid="form-message"]').fill("Test message");
    await page.locator('[data-testid="form-privacy"]').check();
    await page.locator('[data-testid="form-submit"]').click();
    await expect(page.locator('[data-testid="error-email"]')).toBeVisible();
  });

  test("should block submit when privacy consent unchecked", async ({ page }) => {
    await page.locator('[data-testid="form-name"]').fill("Test User");
    await page.locator('[data-testid="form-email"]').fill("test@example.com");
    await page.locator('[data-testid="form-message"]').fill("Test message");
    await page.locator('[data-testid="form-submit"]').click();
    await expect(page.locator('[data-testid="error-privacy"]')).toBeVisible();
  });

  test("should block submit when name is empty", async ({ page }) => {
    await page.locator('[data-testid="form-email"]').fill("test@example.com");
    await page.locator('[data-testid="form-message"]').fill("Test message");
    await page.locator('[data-testid="form-privacy"]').check();
    await page.locator('[data-testid="form-submit"]').click();
    await expect(page.locator('[data-testid="error-name"]')).toBeVisible();
  });

  test("should be mobile-responsive at 375px width", async ({ page }) => {
    await page.setViewportSize({ width: 375, height: 667 });
    await expect(page.locator('[data-testid="contact-form"]')).toBeVisible();
    await expect(page.locator('[data-testid="office-card"]')).toBeVisible();
  });
});