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

test.describe("Authentication", () => {
	test("login page renders at /login", async ({ page }) => {
		await page.goto("/login");
		await page.waitForLoadState("networkidle");

		// Should show the Sign In heading
		await expect(page.getByRole("heading", { name: "Sign In" })).toBeVisible({
			timeout: 5000,
		});

		// Should have username and password inputs
		await expect(page.locator("#username")).toBeVisible({ timeout: 5000 });
		await expect(page.locator("#password")).toBeVisible({ timeout: 5000 });
	});

	test("login with valid credentials succeeds and redirects away from /login", async ({
		page,
	}) => {
		await page.goto("/login");
		await page.waitForLoadState("networkidle");

		await page.locator("#username").fill("admin");
		await page.locator("#password").fill("password123");
		await page.getByRole("button", { name: "Sign In" }).click();

		// After successful login, should redirect to / (dashboard)
		await page.waitForURL("/", { timeout: 5000 });
		await expect(page).not.toHaveURL(/\/login/);
		await expect(page.getByText("GearBox")).toBeVisible({ timeout: 5000 });
	});

	test("login with wrong password shows error", async ({ page }) => {
		await page.goto("/login");
		await page.waitForLoadState("networkidle");

		await page.locator("#username").fill("admin");
		await page.locator("#password").fill("wrongpassword");
		await page.getByRole("button", { name: "Sign In" }).click();

		// Should stay on the login page and show an error message
		await expect(page).toHaveURL(/\/login/, { timeout: 5000 });
		// The error paragraph should be visible (login.tsx renders <p className="text-sm text-red-600">{error}</p>)
		await expect(page.locator(".text-red-600")).toBeVisible({ timeout: 5000 });
	});
});