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

/**
 * E2E tests for combat system:
 * - Entering spire mode (climbing)
 * - Casting spells and seeing progress
 */

test.describe('Combat System', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/');
    // Clear game state to ensure a fresh start
    await page.evaluate(() => {
      Object.keys(localStorage)
        .filter((k) => k.startsWith('mana-loop-'))
        .forEach((k) => localStorage.removeItem(k));
    });
    await page.reload();
    await page.waitForLoadState('networkidle');
  });

  test('can see the Spire tab and "Climb the Spire" button', async ({ page }) => {
    // Verify Spire tab exists (uses ⚔️ icon)
    const spireTab = page.getByRole('tab').filter({ hasText: '⚔️' });
    await expect(spireTab).toBeVisible();

    // Main page should show "Climb the Spire" button
    const climbBtn = page.getByRole('button', { name: 'Climb the Spire' });
    await expect(climbBtn).toBeVisible();
  });

  test('can enter Spire mode by clicking Climb button', async ({ page }) => {
    // Click "Climb the Spire" button on the main page
    await page.getByRole('button', { name: 'Climb the Spire' }).click();

    // After clicking, spire mode activates and tab auto-switches to Spire tab.
    // Since spireMode is now true, the Spire tab shows "Exit Spire Mode"
    const exitBtn = page.getByRole('button', { name: 'Exit Spire Mode' });
    await expect(exitBtn).toBeVisible({ timeout: 10000 });
  });

  test('can navigate to Spire tab and enter spire mode', async ({ page }) => {
    // Click the Spire tab
    await page.getByRole('tab').filter({ hasText: '⚔️' }).click();

    // Should see the "Enter Spire Mode" button
    const enterBtn = page.getByRole('button', { name: 'Enter Spire Mode' });
    await expect(enterBtn).toBeVisible({ timeout: 5000 });
  });

  test('shows floor information after entering spire mode', async ({ page }) => {
    // Navigate to spire mode first
    await page.getByRole('button', { name: 'Climb the Spire' }).click();

    // Now on spire tab with spire mode active
    // The SpireHeader in simpleMode shows "Current Floor" section
    // with the floor number, room badge, and stats
    
    // Check that we're on the spire tab
    const spireTab = page.getByRole('tab', { name: /⚔️ Spire/ });
    await expect(spireTab).toBeVisible({ timeout: 5000 });

    // The SpireHeader shows "Current Floor" in spire mode
    const currentFloorLabel = page.getByText('Current Floor');
    await expect(currentFloorLabel).toBeVisible({ timeout: 5000 });

    // The floor number should be displayed (it's a text element)
    // And "Best:" label is rendered alongside the floor count
    const bestLabel = page.locator('text=Best:').first();
    await expect(bestLabel).toBeVisible({ timeout: 5000 });
  });

  test('can navigate to Spire tab and see stats', async ({ page }) => {
    await page.getByRole('tab').filter({ hasText: '⚔️' }).click();

    // Spire stats section shows key info
    expect(await page.getByText('Best Floor').count()).toBeGreaterThan(0);
    expect(await page.getByText('Pacts Signed').count()).toBeGreaterThan(0);
  });
});