import { test, expect } from '@playwright/test';
import { login } from './helpers/auth';

test.describe('Plans', () => {
  test.beforeEach(async ({ page }) => {
    await login(page);
    await page.goto('/plans');
  });

  test('plans page renders with header and table', async ({ page }) => {
    await expect(page.locator('h1:has-text("Plans")')).toBeVisible({ timeout: 10000 });
    await expect(page.locator('table')).toBeVisible();
    await expect(page.locator('[data-testid="btn-add-plan"]')).toBeVisible();
  });

  test('plans list loads rows from API', async ({ page }) => {
    // Wait for rows to appear (demo tenant has seeded plans)
    await page.waitForSelector('[data-testid="plan-row"]', { timeout: 20000 });
    const rows = page.locator('[data-testid="plan-row"]');
    expect(await rows.count()).toBeGreaterThan(0);
  });

  test('add plan modal opens and submits', async ({ page }) => {
    // Wait for page to be ready
    await page.waitForSelector('h1:has-text("Plans")', { timeout: 10000 });

    await page.click('[data-testid="btn-add-plan"]');

    // Modal should appear
    await expect(page.locator('[data-testid="modal-create-plan"]')).toBeVisible({ timeout: 5000 });

    // Fill form with real API fields
    const planName = `E2E Plan ${Date.now()}`;
    await page.fill('[data-testid="input-plan-name"]', planName);
    await page.selectOption('[data-testid="select-plan-type"]', 'PREPAID');
    await page.fill('[data-testid="input-plan-speed-down"]', '50');
    await page.fill('[data-testid="input-plan-speed-up"]', '20');
    await page.fill('[data-testid="input-plan-price"]', '1499');
    await page.fill('[data-testid="input-plan-description"]', 'E2E test plan');

    // Submit
    await page.click('[data-testid="btn-submit-create"]');

    // Modal should close (API call + state update)
    await expect(page.locator('[data-testid="modal-create-plan"]')).not.toBeVisible({ timeout: 15000 });

    // New plan should appear in the table
    await expect(page.locator(`text=${planName}`)).toBeVisible({ timeout: 10000 });
  });

  test('edit plan modal opens and submits', async ({ page }) => {
    // Wait for rows
    await page.waitForSelector('[data-testid="plan-row"]', { timeout: 20000 });

    const editBtns = page.locator('[data-testid="btn-edit-plan"]');
    expect(await editBtns.count()).toBeGreaterThan(0);

    // Click first edit button
    await editBtns.first().click();

    // Edit modal should open
    await expect(page.locator('[data-testid="modal-edit-plan"]')).toBeVisible({ timeout: 5000 });
    await expect(page.locator('[data-testid="input-edit-name"]')).toBeVisible();

    // Change download speed
    await page.fill('[data-testid="input-edit-speed-down"]', '100');

    // Submit
    await page.click('[data-testid="btn-submit-edit"]');

    // Modal should close
    await expect(page.locator('[data-testid="modal-edit-plan"]')).not.toBeVisible({ timeout: 15000 });
  });

  test('delete plan shows confirmation and cancels', async ({ page }) => {
    // Wait for rows
    await page.waitForSelector('[data-testid="plan-row"]', { timeout: 20000 });

    const deleteBtns = page.locator('[data-testid="btn-delete-plan"]');
    expect(await deleteBtns.count()).toBeGreaterThan(0);

    // Click last delete button
    await deleteBtns.last().click();

    // Confirmation modal should appear
    await expect(page.locator('[data-testid="modal-delete-plan"]')).toBeVisible({ timeout: 5000 });
    await expect(page.locator('[data-testid="btn-confirm-delete"]')).toBeVisible();

    // Cancel the delete (don't actually delete seeded data)
    await page.click('[data-testid="btn-cancel-delete"]');

    // Modal should close
    await expect(page.locator('[data-testid="modal-delete-plan"]')).not.toBeVisible({ timeout: 5000 });
  });
});