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

test.describe("Providers page", () => {
  test.beforeEach(async ({ page }) => {
    await page.goto("/providers");
    await page.waitForSelector(".providers-page", { timeout: 15_000 });
  });

  test("providers page loads with header", async ({ page }) => {
    await expect(page.locator(".page-header")).toContainText("Providers");
  });

  test("provider dropdown has Ollama selected by default", async ({
    page,
  }) => {
    const providerSelect = page
      .locator(".form-group")
      .filter({ hasText: "Provider" })
      .locator("select");

    await expect(providerSelect).toHaveValue(/ollama/i);
  });

  test("changing provider updates the model dropdown", async ({ page }) => {
    const providerSelect = page
      .locator(".form-group")
      .filter({ hasText: "Provider" })
      .locator("select");

    // Get current model options
    const modelSelect = page
      .locator(".form-group")
      .filter({ hasText: /^Model/ })
      .locator("select");
    const initialOptions = await modelSelect.locator("option").allTextContents();

    // Change to a different provider
    await providerSelect.selectOption({ label: "OpenAI" });

    // Wait for model list to update
    await page.waitForTimeout(500);
    const updatedOptions = await modelSelect.locator("option").allTextContents();

    // Model options should differ between providers
    expect(updatedOptions).not.toEqual(initialOptions);
  });

  test("save button shows confirmation feedback", async ({ page }) => {
    const saveBtn = page.locator("button", { hasText: "Save Configuration" });
    await saveBtn.click();

    await expect(page.locator(".form-success")).toBeVisible({ timeout: 5_000 });
    await expect(page.locator(".form-success")).toContainText("saved");
  });
});