import { Page, expect, test } from '@playwright/test';

async function testPricingPageFunctionality({
  page,
  url,
  testSubscribeButtons = true,
}: {
  page: Page;
  url: string;
  testSubscribeButtons?: boolean;
}) {
  await page.goto(url);
  await page.waitForLoadState('load');
  // Wait for pricing plans to be visible instead of arbitrary timeout
  await page.waitForSelector('h2:has-text("Free Plan")', {
    state: 'visible',
  });

  // Check that all three plans are visible
  await expect(
    page.getByRole('heading', { name: 'Free Plan' }).first()
  ).toBeVisible();
  await expect(
    page.getByRole('heading', { name: 'Pro Plan' }).first()
  ).toBeVisible();
  await expect(
    page.getByRole('heading', { name: 'Premier Plan' }).first()
  ).toBeVisible();

  // Verify toggle is present
  await expect(page.getByRole('radio', { name: 'Monthly' })).toBeVisible();
  await expect(page.getByRole('radio', { name: 'Yearly' })).toBeVisible();

  // Check feature comparison table
  await expect(
    page.getByText('50 credits renew daily (10 songs)').first()
  ).toBeVisible();
  await expect(
    page.getByText('2,500 credits (up to 500 songs), refreshes monthly').first()
  ).toBeVisible();

  // Test that the pricing toggle works
  // Click monthly to ensure it's selected
  await page.getByRole('radio', { name: 'Monthly' }).click();
  await expect(page.getByRole('radio', { name: 'Monthly' })).toBeChecked();

  // Switch to yearly and verify pricing changes
  await page.getByRole('radio', { name: 'Yearly' }).click();
  await expect(page.getByRole('radio', { name: 'Yearly' })).toBeChecked();

  // Switch back to monthly
  await page.getByRole('radio', { name: 'Monthly' }).click();
  await expect(page.getByRole('radio', { name: 'Monthly' })).toBeChecked();

  // Only test Subscribe buttons for authenticated users
  if (testSubscribeButtons) {
    // Check that subscribe buttons are present for paid plans
    const subscribeButtons = page.getByRole('button', { name: /Subscribe/i });
    await expect(subscribeButtons.first()).toBeVisible();

    // Test 'Subscribe' buttons
    // Test that subscribe buttons are clickable and present
    await expect(subscribeButtons).toHaveCount(2); // Pro and Premier have subscribe buttons

    // Ensure buttons are enabled and clickable
    for (const button of await subscribeButtons.all()) {
      await expect(button).toBeEnabled();
    }
  }
}

test.describe('Authenticated pricing tests', () => {
  // These tests will use the default auth state from global.setup.ts

  test('account page test', async ({ page }) => {
    await testPricingPageFunctionality({
      page,
      url: '/account',
      testSubscribeButtons: true,
    });
  });
});

test.describe('Unauthenticated pricing tests', () => {
  // Override storage state for these tests to run without authentication
  test.use({ storageState: { cookies: [], origins: [] } });

  test('pricing page test', async ({ page }) => {
    await testPricingPageFunctionality({
      page,
      url: '/pricing',
      testSubscribeButtons: false,
    });
  });
});