import { test, expect } from '@playwright/test';
import { createNewSheet, clickCell, typeInCell, getCellText, getFormulaBarValue } from './helpers';

test.describe('Sheets - Basic', () => {
  test.beforeEach(async ({ page }) => {
    await createNewSheet(page);
  });

  test('grid renders with row and column headers', async ({ page }) => {
    // Column headers (A, B, C...)
    await expect(page.locator('thead th[data-col="1"]')).toContainText('A');
    await expect(page.locator('thead th[data-col="2"]')).toContainText('B');
    await expect(page.locator('thead th[data-col="3"]')).toContainText('C');

    // Row headers (1, 2, 3...)
    await expect(page.locator('th.row-header[data-row="1"]')).toContainText('1');
    await expect(page.locator('th.row-header[data-row="2"]')).toContainText('2');
    await expect(page.locator('th.row-header[data-row="3"]')).toContainText('3');
  });

  test('click cell to select it', async ({ page }) => {
    await clickCell(page, 'B2');

    // Cell address input should show B2
    await expect(page.locator('#cell-address')).toHaveValue('B2');

    // Cell should have selected class
    await expect(page.locator('td[data-id="B2"]')).toHaveClass(/selected/);
  });

  test('type value and press Enter', async ({ page }) => {
    await typeInCell(page, 'A1', 'Hello');

    // Cell should display the value
    const text = await getCellText(page, 'A1');
    expect(text).toBe('Hello');
  });

  test('formula bar shows cell content when selected', async ({ page }) => {
    await typeInCell(page, 'A1', 'Test Value');

    // Click the cell to select it
    await clickCell(page, 'A1');

    // Formula bar should show the value
    const barValue = await getFormulaBarValue(page);
    expect(barValue).toBe('Test Value');
  });

  test('navigate with arrow keys', async ({ page }) => {
    // Start at A1
    await clickCell(page, 'A1');
    await expect(page.locator('#cell-address')).toHaveValue('A1');

    // Right arrow -> B1
    await page.keyboard.press('ArrowRight');
    await expect(page.locator('#cell-address')).toHaveValue('B1');

    // Down arrow -> B2
    await page.keyboard.press('ArrowDown');
    await expect(page.locator('#cell-address')).toHaveValue('B2');

    // Left arrow -> A2
    await page.keyboard.press('ArrowLeft');
    await expect(page.locator('#cell-address')).toHaveValue('A2');

    // Up arrow -> A1
    await page.keyboard.press('ArrowUp');
    await expect(page.locator('#cell-address')).toHaveValue('A1');
  });

  test('Tab moves right, Enter moves down', async ({ page }) => {
    await clickCell(page, 'A1');
    await page.keyboard.type('One');
    await page.keyboard.press('Tab');

    // Should be at B1 now
    await expect(page.locator('#cell-address')).toHaveValue('B1');

    await page.keyboard.type('Two');
    await page.keyboard.press('Enter');

    // Enter moves down from the last Tab column -> B2
    await expect(page.locator('#cell-address')).toHaveValue('B2');
  });

  test('double-click cell starts editing', async ({ page }) => {
    await typeInCell(page, 'A1', 'Existing');

    // Double-click to edit
    await page.dblclick('td[data-id="A1"]');

    // An input editor should appear inside the cell
    const cellEditor = page.locator('td[data-id="A1"] .cell-editor');
    await expect(cellEditor).toBeVisible({ timeout: 5000 });
    expect(await cellEditor.inputValue()).toBe('Existing');
  });

  test('cell address input shows correct address', async ({ page }) => {
    await clickCell(page, 'C5');
    await expect(page.locator('#cell-address')).toHaveValue('C5');

    await clickCell(page, 'Z1');
    await expect(page.locator('#cell-address')).toHaveValue('Z1');
  });

  test('type numeric value', async ({ page }) => {
    await typeInCell(page, 'A1', '42');
    const text = await getCellText(page, 'A1');
    expect(text).toBe('42');
  });

  test('multiple cells can hold different values', async ({ page }) => {
    await typeInCell(page, 'A1', 'First');
    await typeInCell(page, 'B1', 'Second');
    await typeInCell(page, 'A2', 'Third');

    expect(await getCellText(page, 'A1')).toBe('First');
    expect(await getCellText(page, 'B1')).toBe('Second');
    expect(await getCellText(page, 'A2')).toBe('Third');
  });
});