/**
 * Feature Documentation: Diff View Word Wrap
 *
 * Demonstrates that the Monaco diff editor wraps long lines, which is
 * especially useful for markdown files where paragraphs are often a single
 * long line.
 *
 * Run with: pnpm test:feature-docs
 */
import { test, expect, resetApp } from '../_shared/electron-fixture'
import type { Page } from '@playwright/test'
import path from 'path'
import fs from 'fs'
import { fileURLToPath } from 'url'
import { screenshotElement, waitForDiffEditor } from '../_shared/screenshot-helpers'
import { generateFeaturePage, generateIndex, FeatureStep } from '../_shared/template'

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)

const FEATURE_DIR = __dirname
const SCREENSHOTS = path.join(FEATURE_DIR, 'screenshots')
const FEATURES_ROOT = path.join(__dirname, '..')

let page: Page
const steps: FeatureStep[] = []


/** Navigate the explorer panel to the source-control tab */
async function openSourceControl(page: Page) {
  // Ensure explorer panel is open
  const explorerButton = page.locator('[data-panel-id="explorer-toggle"], [title*="Explorer"]').first()
  if (await explorerButton.isVisible()) {
    const cls = await explorerButton.getAttribute('class').catch(() => '')
    if (!cls?.includes('bg-accent')) {
      await explorerButton.click()
      await expect(page.locator('[data-panel-id="explorer"]')).toBeVisible()
    }
  }

  // Switch to source-control filter via store
  await page.evaluate(() => {
    const store = (window as Record<string, unknown>).__sessionStore as {
      getState: () => { activeSessionId: string; setExplorerFilter: (id: string, filter: string) => void }
    }
    if (!store) return
    const state = store.getState()
    state.setExplorerFilter(state.activeSessionId, 'source-control')
  })
  await expect(page.locator('[data-panel-id="explorer"]').getByText(/^Changes \(/)).toBeVisible()
}

test.beforeAll(async () => {
  await fs.promises.mkdir(SCREENSHOTS, { recursive: true })

  ;({ page } = await resetApp())
})

test.afterAll(async () => {
  await generateFeaturePage(
    {
      title: 'Diff View Word Wrap',
      description:
        'The Monaco diff editor now wraps long lines instead of requiring horizontal scrolling. ' +
        'This is especially useful for markdown files where paragraphs are often written as single long lines.',
      steps,
    },
    FEATURE_DIR,
  )
  await generateIndex(FEATURES_ROOT)

})

test.describe.serial('Feature: Diff View Word Wrap', () => {
  test('Step 1: Open source control and see modified README.md', async () => {
    await openSourceControl(page)

    // Verify the source control view shows the README.md as modified
    const readmeEntry = page.locator('text=README.md').first()
    await expect(readmeEntry).toBeVisible()

    const explorerPanel = page.locator('[data-panel-id="explorer"]')
    await screenshotElement(page, explorerPanel, path.join(SCREENSHOTS, '01-source-control.png'), {
      maxHeight: 400,
    })
    steps.push({
      screenshotPath: 'screenshots/01-source-control.png',
      caption: 'Source control shows README.md as modified',
      description:
        'The source control panel lists files with changes. README.md appears ' +
        'in the changes section, ready to be clicked to view its diff.',
    })
  })

  test('Step 2: Click README.md to open diff view with word wrap', async () => {
    // Click on README.md to open it in diff mode
    const readmeEntry = page.locator('text=README.md').first()
    await readmeEntry.click()

    // Wait for the diff editor to fully stabilize (both sides rendered, sash positioned)
    const fileViewerArea = page.locator('[data-panel-id="fileViewer"]').first()
    await waitForDiffEditor(fileViewerArea)

    // Screenshot the entire file viewer area (right side of the layout)
    await screenshotElement(page, fileViewerArea, path.join(SCREENSHOTS, '02-diff-word-wrap.png'))
    steps.push({
      screenshotPath: 'screenshots/02-diff-word-wrap.png',
      caption: 'Diff view with word-wrapped long lines',
      description:
        'The diff view shows the README.md changes with long paragraphs wrapping within the editor ' +
        'instead of extending off-screen. This makes it easy to read markdown diffs without horizontal scrolling.',
    })
  })

  test('Step 3: Switch to inline diff to show word wrap there too', async () => {
    // Click the side-by-side toggle to switch to inline mode
    const inlineButton = page.locator('button[title="Switch to inline view"]')
    if (await inlineButton.isVisible()) {
      await inlineButton.click()
    }

    const fileViewerArea = page.locator('[data-panel-id="fileViewer"]').first()
    await waitForDiffEditor(fileViewerArea)

    await screenshotElement(page, fileViewerArea, path.join(SCREENSHOTS, '03-inline-diff-wrap.png'))
    steps.push({
      screenshotPath: 'screenshots/03-inline-diff-wrap.png',
      caption: 'Inline diff view also wraps long lines',
      description:
        'The inline diff mode wraps long lines as well, showing additions and deletions ' +
        'in a single column with full word wrap support.',
    })
  })
})
