import { expect, test } from "../fixtures/test-base"

test.describe("Color Grading", () => {
  test.beforeEach(async ({ page }) => {
    await page.waitForLoadState("networkidle")

    // Сначала импортируем медиа файл для работы с цветокоррекцией
    const mediaTab = page.locator('[role="tab"]:has-text("Media")').first()
    await mediaTab.click()
    await page.waitForTimeout(500)

    // Открываем панель опций
    const optionsButton = page
      .locator('button:has-text("Options"), [aria-label*="Options"], [title*="Options"]')
      .first()
    if (await optionsButton.isVisible()) {
      await optionsButton.click()
      await page.waitForTimeout(300)
    }
  })

  test("should show color grading tab in options", async ({ page }) => {
    // Проверяем наличие вкладки Color
    const colorTab = page.locator('[role="tab"]:has-text("Color"), button:has-text("Color")').first()
    await expect(colorTab).toBeVisible()

    // Кликаем на вкладку Color
    await colorTab.click()
    await page.waitForTimeout(300)

    // Проверяем что вкладка активна
    const activeTab = page.locator('[role="tab"][aria-selected="true"], [role="tab"][data-state="active"]')
    const hasActiveColor = (await activeTab.filter({ hasText: /Color/i }).count()) > 0

    expect(hasActiveColor).toBeTruthy()
  })

  test("should display color wheels section", async ({ page }) => {
    // Переходим на вкладку Color
    const colorTab = page.locator('[role="tab"]:has-text("Color"), button:has-text("Color")').first()
    await colorTab.click()
    await page.waitForTimeout(300)

    // Проверяем наличие цветовых колес
    const hasColorWheels =
      (await page.locator("text=/Lift.*Shadows|Gamma.*Midtones|Gain.*Highlights/i").count()) > 0 ||
      (await page.locator('[data-testid="color-wheel"]').count()) > 0 ||
      (await page.locator("canvas").count()) > 0

    console.log(`Color wheels found: ${hasColorWheels}`)
    expect(hasColorWheels).toBeTruthy()
  })

  test("should show basic color parameters", async ({ page }) => {
    // Переходим на вкладку Color
    const colorTab = page.locator('[role="tab"]:has-text("Color"), button:has-text("Color")').first()
    await colorTab.click()
    await page.waitForTimeout(300)

    // Проверяем наличие базовых параметров
    const parameters = ["Temperature", "Tint", "Contrast", "Saturation"]
    let foundParameters = 0

    for (const param of parameters) {
      const hasParam = (await page.locator(`text=/${param}/i`).count()) > 0
      if (hasParam) foundParameters++
    }

    console.log(`Found ${foundParameters} out of ${parameters.length} parameters`)
    expect(foundParameters).toBeGreaterThan(0)
  })

  test("should allow preset selection", async ({ page }) => {
    // Переходим на вкладку Color
    const colorTab = page.locator('[role="tab"]:has-text("Color"), button:has-text("Color")').first()
    await colorTab.click()
    await page.waitForTimeout(300)

    // Ищем кнопку Load Preset
    const loadPresetButton = page.locator('button:has-text("Load Preset")')

    if (await loadPresetButton.isVisible()) {
      await loadPresetButton.click()
      await page.waitForTimeout(300)

      // Проверяем наличие пресетов
      const hasPresets =
        (await page.locator("text=/Cinematic|Vintage|Film/i").count()) > 0 ||
        (await page.locator('[role="menuitem"]').count()) > 0

      expect(hasPresets).toBeTruthy()
    }
  })

  test("should toggle preview mode", async ({ page }) => {
    // Переходим на вкладку Color
    const colorTab = page.locator('[role="tab"]:has-text("Color"), button:has-text("Color")').first()
    await colorTab.click()
    await page.waitForTimeout(300)

    // Ищем кнопку Preview более точным способом
    const previewButton = page.getByRole("button", { name: /Preview/i })

    if (await previewButton.isVisible()) {
      // Проверяем начальное состояние через HTML содержимое (иконка Eye/EyeOff)
      const initialHTML = await previewButton.innerHTML()

      // Кликаем для переключения
      await previewButton.click()
      await page.waitForTimeout(300)

      // Проверяем что HTML изменилось (иконка изменилась)
      const newHTML = await previewButton.innerHTML()
      const hasToggled = initialHTML !== newHTML

      expect(hasToggled).toBeTruthy()
    }
  })

  test("should show curves section", async ({ page }) => {
    // Переходим на вкладку Color
    const colorTab = page.locator('[role="tab"]:has-text("Color"), button:has-text("Color")').first()
    await colorTab.click()
    await page.waitForTimeout(300)

    // Проверяем наличие секции кривых
    const hasCurves =
      (await page.locator("text=/Curves|Master|Red|Green|Blue/i").count()) > 0 ||
      (await page.locator('[data-testid="curves-section"]').count()) > 0

    if (hasCurves) {
      // Проверяем наличие канваса для кривых
      const curveCanvas = page.locator("canvas").first()
      if (await curveCanvas.isVisible()) {
        // Пробуем кликнуть для добавления точки
        const box = await curveCanvas.boundingBox()
        if (box) {
          await page.mouse.click(box.x + box.width / 2, box.y + box.height / 2)
          await page.waitForTimeout(300)
        }
      }
    }

    expect(true).toBeTruthy()
  })

  test("should show HSL adjustments", async ({ page }) => {
    // Переходим на вкладку Color
    const colorTab = page.locator('[role="tab"]:has-text("Color"), button:has-text("Color")').first()
    await colorTab.click()
    await page.waitForTimeout(300)

    // Проверяем наличие HSL параметров
    const hslParameters = ["Hue", "Saturation", "Luminance"]
    let foundHSL = 0

    for (const param of hslParameters) {
      const hasParam = (await page.locator(`text=/${param}/i`).count()) > 0
      if (hasParam) foundHSL++
    }

    console.log(`Found ${foundHSL} HSL parameters`)
    expect(foundHSL).toBeGreaterThan(0)
  })

  test("should show LUT section", async ({ page }) => {
    // Переходим на вкладку Color
    const colorTab = page.locator('[role="tab"]:has-text("Color"), button:has-text("Color")').first()
    await colorTab.click()
    await page.waitForTimeout(300)

    // Проверяем наличие секции LUT
    const hasLUT =
      (await page.locator("text=/LUT|Look.*Up.*Table|.cube/i").count()) > 0 ||
      (await page.locator('[data-testid="lut-section"]').count()) > 0

    if (hasLUT) {
      // Проверяем наличие селектора LUT
      const lutSelector = page.locator('select, [role="combobox"]').first()
      if (await lutSelector.isVisible()) {
        const hasLUTOptions = (await page.locator('option, [role="option"]').count()) > 0
        expect(hasLUTOptions).toBeTruthy()
      }
    }

    expect(true).toBeTruthy()
  })

  test("should show scopes section", async ({ page }) => {
    // Переходим на вкладку Color
    const colorTab = page.locator('[role="tab"]:has-text("Color"), button:has-text("Color")').first()
    await colorTab.click()
    await page.waitForTimeout(300)

    // Проверяем наличие скоупов
    const hasScopes =
      (await page.locator("text=/Waveform|Vectorscope|Histogram|Parade/i").count()) > 0 ||
      (await page.locator('[data-testid*="scope"]').count()) > 0

    console.log(`Scopes found: ${hasScopes}`)
    expect(true).toBeTruthy()
  })

  test("should handle reset all functionality", async ({ page }) => {
    // Переходим на вкладку Color
    const colorTab = page.locator('[role="tab"]:has-text("Color"), button:has-text("Color")').first()
    await colorTab.click()
    await page.waitForTimeout(300)

    // Сначала изменяем какой-нибудь параметр
    const slider = page.locator('input[type="range"]').first()
    if (await slider.isVisible()) {
      await slider.fill("75")
      await page.waitForTimeout(300)
    }

    // Ищем кнопку Reset All более точным способом
    const resetButton = page.getByRole("button", { name: "Reset All" })

    if (await resetButton.isVisible()) {
      await resetButton.click()
      await page.waitForTimeout(300)

      // Проверяем что слайдер вернулся к исходному значению
      if (await slider.isVisible()) {
        const value = await slider.inputValue()
        console.log(`Slider value after reset: ${value}`)

        // Проверяем что значение изменилось (должно быть близко к дефолтному)
        const numValue = Number.parseInt(value)
        const hasReset = numValue !== 75 && numValue >= 0 && numValue <= 100
        expect(hasReset).toBeTruthy()
      }
    } else {
      // Если кнопка не видна, проверяем что она может быть заблокирована
      expect(true).toBeTruthy()
    }
  })

  test("should apply auto correction", async ({ page }) => {
    // Переходим на вкладку Color
    const colorTab = page.locator('[role="tab"]:has-text("Color"), button:has-text("Color")').first()
    await colorTab.click()
    await page.waitForTimeout(300)

    // Ищем кнопку Auto
    const autoButton = page.locator('button:has-text("Auto")')

    if (await autoButton.isVisible()) {
      await autoButton.click()
      await page.waitForTimeout(500)

      // Проверяем что какие-то значения изменились
      const sliders = page.locator('input[type="range"]')
      const sliderCount = await sliders.count()

      console.log(`Found ${sliderCount} sliders after auto correction`)
      expect(sliderCount).toBeGreaterThan(0)
    }

    expect(true).toBeTruthy()
  })

  test("should save and load presets", async ({ page }) => {
    // Переходим на вкладку Color
    const colorTab = page.locator('[role="tab"]:has-text("Color"), button:has-text("Color")').first()
    await colorTab.click()
    await page.waitForTimeout(300)

    // Ищем кнопку Save Preset
    const savePresetButton = page.locator('button:has-text("Save Preset")')

    if (await savePresetButton.isVisible()) {
      // Сначала изменяем параметр
      const slider = page.locator('input[type="range"]').first()
      if (await slider.isVisible()) {
        await slider.fill("80")
        await page.waitForTimeout(300)
      }

      // Кликаем Save Preset
      await savePresetButton.click()
      await page.waitForTimeout(300)

      // Проверяем наличие диалога
      const hasDialog =
        (await page.locator('[role="dialog"]').count()) > 0 ||
        (await page.locator('input[placeholder*="name"], input[placeholder*="preset"]').count()) > 0

      if (hasDialog) {
        // Вводим имя пресета
        const nameInput = page.locator('input[type="text"]').first()
        if (await nameInput.isVisible()) {
          await nameInput.fill("Test Preset E2E")
          await page.waitForTimeout(300)

          // Сохраняем
          const saveButton = page.locator('button:has-text("Save")').last()
          if (await saveButton.isVisible()) {
            await saveButton.click()
            await page.waitForTimeout(500)
          }
        }
      }
    }

    expect(true).toBeTruthy()
  })

  test("should have proper scroll behavior", async ({ page }) => {
    // Переходим на вкладку Color
    const colorTab = page.locator('[role="tab"]:has-text("Color"), button:has-text("Color")').first()
    await colorTab.click()
    await page.waitForTimeout(300)

    // Проверяем что контент может скроллиться
    const scrollContainer = page
      .locator('[class*="overflow-y-auto"], [class*="overflow-auto"], [class*="scroll"]')
      .first()

    if (await scrollContainer.isVisible()) {
      // Пробуем проскроллить
      await scrollContainer.evaluate((el) => (el.scrollTop = 100))
      await page.waitForTimeout(300)

      const scrollTop = await scrollContainer.evaluate((el) => el.scrollTop)
      console.log(`Scroll position: ${scrollTop}`)
    }

    expect(true).toBeTruthy()
  })

  test("should handle parameter sliders interaction", async ({ page }) => {
    // Переходим на вкладку Color
    const colorTab = page.locator('[role="tab"]:has-text("Color"), button:has-text("Color")').first()
    await colorTab.click()
    await page.waitForTimeout(300)

    // Находим слайдеры параметров
    const sliders = page.locator('input[type="range"]')
    const sliderCount = await sliders.count()

    if (sliderCount > 0) {
      // Взаимодействуем с первыми тремя слайдерами
      for (let i = 0; i < Math.min(3, sliderCount); i++) {
        const slider = sliders.nth(i)
        if (await slider.isVisible()) {
          const initialValue = await slider.inputValue()

          // Изменяем значение
          await slider.fill("60")
          await page.waitForTimeout(200)

          const newValue = await slider.inputValue()
          console.log(`Slider ${i}: ${initialValue} -> ${newValue}`)

          // Двойной клик для сброса (если поддерживается)
          await slider.dblclick()
          await page.waitForTimeout(200)
        }
      }
    }

    expect(sliderCount).toBeGreaterThan(0)
  })

  test("should show intensity controls for effects", async ({ page }) => {
    // Переходим на вкладку Color
    const colorTab = page.locator('[role="tab"]:has-text("Color"), button:has-text("Color")').first()
    await colorTab.click()
    await page.waitForTimeout(300)

    // Проверяем наличие контролов интенсивности
    const hasIntensity =
      (await page.locator("text=/Intensity|Amount|Strength|%/i").count()) > 0 ||
      (await page.locator('[data-testid*="intensity"]').count()) > 0

    console.log(`Intensity controls found: ${hasIntensity}`)
    expect(true).toBeTruthy()
  })
})