import { css } from "lit";
import { customElement } from "lit/decorators.js";
import type { VideoSample } from "mediabunny";
import { afterEach, beforeEach, describe, vi } from "vitest";
import { test as baseTest } from "../../test/useMSW.js";

import type { EFConfiguration } from "../gui/EFConfiguration.js";
import "../gui/EFPreview.js";
import "../gui/EFWorkbench.js";
import { JitMediaEngine } from "./EFMedia/JitMediaEngine.js";
import { EFMedia } from "./EFMedia.js";
import "./EFTimegroup.js";
import type { EFTimegroup } from "./EFTimegroup.js";
import "./EFVideo.js";
import { UrlGenerator } from "../transcoding/utils/UrlGenerator.js";
import type { EFVideo } from "./EFVideo.js";

@customElement("test-media")
class TestMedia extends EFMedia {
  static styles = [
    ...EFMedia.styles,
    css`
      :host {
        display: block;
        width: 100%;
        height: 100%;
      }
      video {
        width: 100%;
        height: 100%;
      }
  `,
  ];
}

declare global {
  interface HTMLElementTagNameMap {
    "test-media": TestMedia;
  }
}

const test = baseTest.extend<{
  timegroup: EFTimegroup;
  jitVideo: EFVideo;
  configuration: EFConfiguration;
  urlGenerator: UrlGenerator;
  host: EFVideo;
}>({
  timegroup: async ({}, use) => {
    const timegroup = document.createElement("ef-timegroup");
    timegroup.setAttribute("mode", "contain");
    await use(timegroup);
  },
  configuration: async ({ expect }, use) => {
    const configuration = document.createElement("ef-configuration");
    configuration.innerHTML = `<h1 style="font: 10px monospace">${expect.getState().currentTestName}</h1>`;
    // Use integrated proxy server (same host/port as test runner)
    const apiHost = `${window.location.protocol}//${window.location.host}`;
    configuration.setAttribute("api-host", apiHost);
    configuration.apiHost = apiHost;
    document.body.appendChild(configuration);
    await use(configuration);
  },
  urlGenerator: async ({}, use) => {
    // UrlGenerator points to integrated proxy server (same host/port as test runner)
    const apiHost = `${window.location.protocol}//${window.location.host}`;
    const generator = new UrlGenerator(() => apiHost);
    await use(generator);
  },
  host: async ({ configuration }, use) => {
    const host = document.createElement("ef-video");
    configuration.appendChild(host);
    host.src = "http://web:3000/head-moov-480p.mp4";
    await use(host);
  },
  jitVideo: async ({ configuration, timegroup, host }, use) => {
    timegroup.append(host);
    configuration.append(timegroup);
    await host.mediaEngineTask.run();
    await use(host);
  },
});

describe("JIT Media Engine", () => {
  test("initializes JitMediaEngine", async ({ jitVideo, expect }) => {
    const mediaEngine = jitVideo.mediaEngineTask.value;
    expect(mediaEngine).toBeInstanceOf(JitMediaEngine);
  });

  test("loads media duration", async ({ jitVideo, expect }) => {
    expect(jitVideo.intrinsicDurationMs).toBe(10_000);
  });

  describe("video seek on load", () => {
    test("seeks to time specified on element", async ({
      timegroup,
      jitVideo,
      expect,
    }) => {
      await timegroup.waitForMediaDurations();
      timegroup.currentTimeMs = 2200;
      await timegroup.seekTask.taskComplete;
      const sample = await jitVideo.videoSeekTask.taskComplete;
      expect(sample?.timestamp).toBeCloseTo(2.2, 1);
    });
  });

  describe("video seeking", () => {
    test("seeks to 0 seconds and loads first frame", async ({
      timegroup,
      jitVideo,
      expect,
    }) => {
      // Debug: Check what segment should be loaded for 0ms
      const mediaEngine = await (jitVideo as any).mediaEngineTask.taskComplete;
      const videoRendition = mediaEngine?.getVideoRendition();
      const expectedSegmentId = mediaEngine?.computeSegmentId(
        0,
        videoRendition,
      );
      console.log(`MediaEngine.computeSegmentId(0ms) = ${expectedSegmentId}`);

      timegroup.currentTimeMs = 0;
      await timegroup.seekTask.taskComplete;

      // Check what segment actually got loaded
      const actualSegmentId = (jitVideo as any).videoSegmentIdTask.value;
      console.log(`videoSegmentIdTask.value = ${actualSegmentId}`);

      const frame = await (jitVideo as any).videoSeekTask.taskComplete;
      console.log(`Frame timestamp when seeking to 0ms: ${frame?.timestamp}`);

      expect(frame).toBeDefined();
      expect(frame?.timestamp).toEqual(0);
    });

    test("seeks to 3 seconds and loads frame", async ({
      timegroup,
      jitVideo,
      expect,
    }) => {
      await timegroup.waitForMediaDurations();
      timegroup.currentTimeMs = 3_000;
      await timegroup.seekTask.taskComplete;
      const frame = await jitVideo.videoSeekTask.taskComplete;
      expect(frame?.timestamp).toBeCloseTo(3, 1);
    });

    test("seeks to 5 seconds and loads frame", async ({
      timegroup,
      jitVideo,
      expect,
    }) => {
      await timegroup.waitForMediaDurations();
      timegroup.currentTimeMs = 5_000;
      await timegroup.seekTask.taskComplete;
      const frame = await jitVideo.videoSeekTask.taskComplete;
      expect(frame?.timestamp).toBeCloseTo(5, 1);
    });

    test("seeks ahead in 50ms increments", async ({
      timegroup,
      jitVideo,
      expect,
    }) => {
      await timegroup.waitForMediaDurations();
      timegroup.currentTimeMs = 0;
      let frame: VideoSample | undefined;
      for (let i = 0; i <= 3000; i += 50) {
        timegroup.currentTimeMs = i;
        await timegroup.seekTask.taskComplete;
        frame = await jitVideo.videoSeekTask.taskComplete;
        expect(frame).toBeDefined();
      }
      expect(frame?.timestamp).toBeCloseTo(3, 1);
    });
  });

  describe("boundary seeking", () => {
    test.skip("segment 2 track range and segment 3 track range have no gap between them", async ({
      expect,
      jitVideo,
      timegroup,
    }) => {
      // SKIP: audioSeekTask is not part of the audio rendering pipeline
      await timegroup.waitForMediaDurations();
      timegroup.currentTimeMs = 1000;
      await timegroup.frameTask.taskComplete;

      timegroup.currentTimeMs = 2026.6666666666663;
      await timegroup.frameTask.taskComplete;
      const sample = await jitVideo.videoSeekTask.taskComplete;
      expect(sample?.timestamp).toBeCloseTo(2, 1);
    });

    test("Can seek audio to 4025.0000000000005ms in head-moov-480p.mp4", async ({
      expect,
      jitVideo,
      timegroup,
    }) => {
      await timegroup.waitForMediaDurations();
      timegroup.currentTimeMs = 2026.6666666666663;
      await expect(
        jitVideo.audioSeekTask.taskComplete,
      ).resolves.to.not.toThrowError();
    });

    test("can seek audio to 4050ms in head-moov-480p.mp4", async ({
      expect,
      jitVideo,
      timegroup,
    }) => {
      timegroup.currentTimeMs = 4050;
      jitVideo.desiredSeekTimeMs = 4050;
      await expect(
        jitVideo.audioSeekTask.taskComplete,
      ).resolves.to.not.toThrowError();
    });

    // test.only("computes correct audio segment id for 4025.0000000000005ms", async ({ expect, jitVideo, timegroup }) => {
    //   timegroup.currentTimeMs = 4025.0000000000005;
    //   await expect(jitVideo.audioSegmentIdTask.taskComplete).resolves.toBe(2);
    // });
  });
});

describe("EFMedia", () => {
  beforeEach(() => {
    // Clean up DOM
    while (document.body.children.length) {
      document.body.children[0]?.remove();
    }
  });

  afterEach(() => {
    // Clean up any remaining elements
    const elements = document.querySelectorAll("test-media");
    for (const element of elements) {
      element.remove();
    }
  });

  const test = baseTest.extend<{
    element: TestMedia;
  }>({
    element: async ({}, use) => {
      const element = document.createElement("test-media");
      document.body.appendChild(element);
      await use(element);
      element.remove();
    },
  });

  test("should be defined", ({ element, expect }) => {
    expect(element.tagName).toBe("TEST-MEDIA");
  });

  describe("mute", () => {
    test("defaults to false", ({ element, expect }) => {
      expect(element.mute).toBe(false);
    });

    test("reads from js property", ({ element, expect }) => {
      element.mute = true;
      expect(element.mute).toBe(true);
    });

    test("reads from dom attribute", ({ element, expect }) => {
      element.setAttribute("mute", "true");
      expect(element.mute).toBe(true);
    });

    test("handles any attribute value as true (standard boolean behavior)", ({
      element,
      expect,
    }) => {
      element.setAttribute("mute", "false");
      expect(element.mute).toBe(true); // Standard boolean attributes: any value = true
    });

    test("reflects property changes to attribute", async ({
      element,
      expect,
    }) => {
      element.mute = true;
      await element.updateComplete; // Wait for Lit to update
      expect(element.hasAttribute("mute")).toBe(true);
      expect(element.getAttribute("mute")).toBe(""); // Standard boolean reflection

      element.mute = false;
      await element.updateComplete; // Wait for Lit to update
      expect(element.hasAttribute("mute")).toBe(false); // Standard boolean reflection removes attribute
    });

    describe("audio rendering", () => {
      // Create a separate test context for audio rendering tests that need configuration
      const audioTest = baseTest.extend<{
        timegroup: EFTimegroup;
        configuration: EFConfiguration;
      }>({
        timegroup: async ({}, use) => {
          const timegroup = document.createElement("ef-timegroup");
          timegroup.setAttribute("mode", "contain");
          await use(timegroup);
        },
        configuration: async ({ expect }, use) => {
          const configuration = document.createElement("ef-configuration");
          configuration.innerHTML = `<h1 style="font: 10px monospace">${expect.getState().currentTestName}</h1>`;
          // Use integrated proxy server (same host/port as test runner)
          const apiHost = `${window.location.protocol}//${window.location.host}`;
          configuration.setAttribute("api-host", apiHost);
          configuration.apiHost = apiHost;
          document.body.appendChild(configuration);
          await use(configuration);
          // configuration.remove();
        },
      });

      audioTest(
        "skips muted elements during audio rendering",
        async ({ configuration, timegroup, expect }) => {
          // Create a muted media element
          const mutedElement = document.createElement("test-media");
          mutedElement.src = "http://web:3000/head-moov-480p.mp4";
          mutedElement.mute = true;
          timegroup.append(mutedElement);

          // Create an unmuted media element
          const unmutedElement = document.createElement("test-media");
          unmutedElement.src = "http://web:3000/head-moov-480p.mp4";
          unmutedElement.mute = false;
          timegroup.append(unmutedElement);

          configuration.append(timegroup);

          // Wait for media engines to initialize
          await mutedElement.mediaEngineTask.run();
          await unmutedElement.mediaEngineTask.run();

          // Spy on fetchAudioSpanningTime to verify muted element is skipped
          const mutedFetchSpy = vi.spyOn(
            mutedElement,
            "fetchAudioSpanningTime",
          );
          const unmutedFetchSpy = vi.spyOn(
            unmutedElement,
            "fetchAudioSpanningTime",
          );

          // Render a short audio segment
          try {
            await timegroup.renderAudio(0, 1000); // 1 second
          } catch (error) {
            // Audio rendering might fail in test environment, but we're testing the mute logic
            console.log("Audio rendering failed (expected in test):", error);
          }

          // Verify muted element was skipped (no fetch calls)
          expect(mutedFetchSpy).not.toHaveBeenCalled();

          // Verify unmuted element was processed (would have fetch calls if audio succeeds)
          // Note: In test environment, this might still be 0 due to audio context limitations
          // but the important thing is that muted element definitely wasn't called
          const mutedCalls = mutedFetchSpy.mock.calls.length;
          const unmutedCalls = unmutedFetchSpy.mock.calls.length;

          expect(mutedCalls).toBe(0);
          // Unmuted element should either be called (audio works) or both fail equally
          // The key test is that muted=0 and muted < unmuted (if audio works)
          expect(mutedCalls).toBeLessThanOrEqual(unmutedCalls);

          mutedFetchSpy.mockRestore();
          unmutedFetchSpy.mockRestore();
        },
      );

      audioTest(
        "processes unmuted elements normally",
        async ({ configuration, timegroup, expect }) => {
          // Create an unmuted media element
          const element = document.createElement("test-media");
          element.src = "http://web:3000/head-moov-480p.mp4";
          element.mute = false;
          timegroup.append(element);

          configuration.append(timegroup);

          await element.mediaEngineTask.run();

          const fetchSpy = vi.spyOn(element, "fetchAudioSpanningTime");

          try {
            await timegroup.renderAudio(0, 1000);
          } catch (error) {
            // Audio rendering might fail in test environment
            console.log("Audio rendering failed (expected in test):", error);
          }

          // The element should not have been skipped due to mute
          // (whether it actually gets called depends on test environment audio support)
          expect(element.mute).toBe(false);

          fetchSpy.mockRestore();
        },
      );

      audioTest(
        "handles dynamic mute changes",
        async ({ configuration, timegroup, expect }) => {
          const element = document.createElement("test-media");
          element.src = "http://web:3000/head-moov-480p.mp4";
          element.mute = false; // Start unmuted
          timegroup.append(element);

          configuration.append(timegroup);

          await element.mediaEngineTask.run();

          const fetchSpy = vi.spyOn(element, "fetchAudioSpanningTime");

          // First render - unmuted
          try {
            await timegroup.renderAudio(0, 500);
          } catch (error) {
            console.log("Audio rendering failed (expected in test):", error);
          }

          const firstCallCount = fetchSpy.mock.calls.length;

          // Mute the element
          element.mute = true;
          await element.updateComplete;

          // Second render - muted (should be skipped)
          try {
            await timegroup.renderAudio(500, 1000);
          } catch (error) {
            console.log("Audio rendering failed (expected in test):", error);
          }

          const secondCallCount = fetchSpy.mock.calls.length;

          // Verify no additional calls were made when muted
          expect(secondCallCount).toBe(firstCallCount);

          fetchSpy.mockRestore();
        },
      );
    });
  });

  describe("audio analysis", () => {
    const audioAnalysisTest = baseTest.extend<{
      timegroup: EFTimegroup;
      configuration: EFConfiguration;
    }>({
      timegroup: async ({}, use) => {
        const timegroup = document.createElement("ef-timegroup");
        timegroup.setAttribute("mode", "contain");
        await use(timegroup);
      },
      configuration: async ({ expect }, use) => {
        const configuration = document.createElement("ef-configuration");
        configuration.innerHTML = `<h1 style="font: 10px monospace">${expect.getState().currentTestName}</h1>`;
        // Use integrated proxy server (same host/port as test runner)
        const apiHost = `${window.location.protocol}//${window.location.host}`;
        configuration.setAttribute("api-host", apiHost);
        configuration.apiHost = apiHost;
        document.body.appendChild(configuration);
        await use(configuration);
      },
    });

    audioAnalysisTest(
      "has time domain analysis task",
      async ({ configuration, timegroup, expect }) => {
        const element = document.createElement("test-media");
        element.src = "http://web:3000/head-moov-480p.mp4";
        timegroup.append(element);
        configuration.append(timegroup);

        await element.mediaEngineTask.run();

        expect(element.byteTimeDomainTask).toBeDefined();
        expect(typeof element.byteTimeDomainTask.taskComplete).toBe("object");
      },
    );

    audioAnalysisTest(
      "has frequency analysis task",
      async ({ configuration, timegroup, expect }) => {
        const element = document.createElement("test-media");
        element.src = "http://web:3000/head-moov-480p.mp4";
        timegroup.append(element);
        configuration.append(timegroup);

        await element.mediaEngineTask.run();

        expect(element.frequencyDataTask).toBeDefined();
        expect(typeof element.frequencyDataTask.taskComplete).toBe("object");
      },
    );

    audioAnalysisTest(
      "respects FFT configuration properties",
      async ({ configuration, timegroup, expect }) => {
        const element = document.createElement("test-media");
        element.src = "http://web:3000/head-moov-480p.mp4";
        element.fftSize = 256;
        element.fftDecay = 4;
        element.fftGain = 2.0;
        element.interpolateFrequencies = true;
        timegroup.append(element);
        configuration.append(timegroup);

        await element.mediaEngineTask.run();

        expect(element.fftSize).toBe(256);
        expect(element.fftDecay).toBe(4);
        expect(element.fftGain).toBe(2.0);
        expect(element.interpolateFrequencies).toBe(true);
        expect(element.shouldInterpolateFrequencies).toBe(true);
      },
    );

    audioAnalysisTest(
      "generates FREQ_WEIGHTS based on fftSize",
      async ({ configuration, timegroup, expect }) => {
        const element = document.createElement("test-media");
        element.src = "http://web:3000/head-moov-480p.mp4";
        element.fftSize = 128;
        timegroup.append(element);
        configuration.append(timegroup);

        await element.mediaEngineTask.run();

        const weights = element.FREQ_WEIGHTS;
        expect(weights).toBeInstanceOf(Float32Array);
        expect(weights.length).toBe(element.fftSize / 2); // 64 for fftSize 128

        // Test frequency weighting - lower frequencies should have lower weights
        expect(weights.length).toBeGreaterThan(0);
        const firstWeight = weights[0];
        const lastWeight = weights[weights.length - 1];
        expect(firstWeight).toBeDefined();
        expect(lastWeight).toBeDefined();
        expect(firstWeight!).toBeLessThan(lastWeight!);
      },
    );
  });

  describe("assetId", () => {
    test("reads from js property", ({ element, expect }) => {
      element.assetId = "test-asset-123";
      expect(element.assetId).toBe("test-asset-123");
    });

    test("reads from dom attribute", ({ element, expect }) => {
      element.setAttribute("asset-id", "test-asset-123");
      expect(element.assetId).toBe("test-asset-123");
    });

    test("defaults to null", ({ element, expect }) => {
      expect(element.assetId).toBe(null);
    });

    test("reflects property changes to attribute", async ({
      element,
      expect,
    }) => {
      element.assetId = "test-asset-456";
      await element.updateComplete;
      expect(element.getAttribute("asset-id")).toBe("test-asset-456");

      element.assetId = null;
      await element.updateComplete;
      expect(element.hasAttribute("asset-id")).toBe(false);
    });

    test("reads assetId from html source", async ({ expect }) => {
      const container = document.createElement("div");
      container.innerHTML = `<test-media asset-id="test-asset-789"></test-media>`;
      const media = container.querySelector("test-media") as TestMedia;
      expect(media).toBeDefined();
      expect(media.assetId).toBe("test-asset-789");
    });
  });

  describe("fftSize", () => {
    test("defaults to 128", ({ element, expect }) => {
      expect(element.fftSize).toBe(128);
    });

    test("reads from js property", ({ element, expect }) => {
      element.fftSize = 1024;
      expect(element.fftSize).toBe(1024);
    });

    test("reads from dom attribute", ({ element, expect }) => {
      element.setAttribute("fft-size", "1024");
      expect(element.fftSize).toBe(1024);
    });

    test("reflects property changes to attribute", async ({
      element,
      expect,
    }) => {
      element.fftSize = 512;
      await element.updateComplete;
      expect(element.getAttribute("fft-size")).toBe("512");
    });
  });

  describe("fftDecay", () => {
    test("defaults to 8", ({ element, expect }) => {
      expect(element.fftDecay).toBe(8);
    });

    test("reads from js property", ({ element, expect }) => {
      element.fftDecay = 16;
      expect(element.fftDecay).toBe(16);
    });

    test("reads from dom attribute", ({ element, expect }) => {
      element.setAttribute("fft-decay", "16");
      expect(element.fftDecay).toBe(16);
    });

    test("reflects property changes to attribute", async ({
      element,
      expect,
    }) => {
      element.fftDecay = 32;
      await element.updateComplete;
      expect(element.getAttribute("fft-decay")).toBe("32");
    });
  });

  describe("fftGain", () => {
    test("defaults to 3.0", ({ element, expect }) => {
      expect(element.fftGain).toBe(3.0);
    });

    test("reads from js property", ({ element, expect }) => {
      element.fftGain = 0.5;
      expect(element.fftGain).toBe(0.5);
    });

    test("reads from dom attribute", ({ element, expect }) => {
      element.setAttribute("fft-gain", "0.5");
      expect(element.fftGain).toBe(0.5);
    });

    test("reflects property changes to attribute", async ({
      element,
      expect,
    }) => {
      element.fftGain = 2.5;
      await element.updateComplete;
      expect(element.getAttribute("fft-gain")).toBe("2.5");
    });
  });

  describe("interpolateFrequencies", () => {
    test("defaults to false", ({ element, expect }) => {
      expect(element.interpolateFrequencies).toBe(false);
    });

    test("reads from js property", ({ element, expect }) => {
      element.interpolateFrequencies = true;
      expect(element.interpolateFrequencies).toBe(true);
    });

    test("reads from dom attribute", ({ element, expect }) => {
      element.setAttribute("interpolate-frequencies", "true");
      expect(element.interpolateFrequencies).toBe(true);
    });

    test("handles any attribute value as true (standard boolean behavior)", ({
      element,
      expect,
    }) => {
      element.setAttribute("interpolate-frequencies", "false");
      expect(element.interpolateFrequencies).toBe(true); // Standard boolean attributes: any value = true
    });

    test("reflects property changes to attribute", async ({
      element,
      expect,
    }) => {
      element.interpolateFrequencies = true;
      await element.updateComplete;
      expect(element.hasAttribute("interpolate-frequencies")).toBe(true);
      expect(element.getAttribute("interpolate-frequencies")).toBe(""); // Standard boolean reflection

      element.interpolateFrequencies = false;
      await element.updateComplete;
      expect(element.hasAttribute("interpolate-frequencies")).toBe(false); // Standard boolean reflection removes attribute
    });
  });

  //   describe("mediaEngineTask", () => {
  //     test("is defined", ({ element, expect }) => {
  //       expect(element.mediaEngineTask).toBeDefined();
  //     });

  //     test("is a task", ({ element, expect }) => {
  //       expect(element.mediaEngineTask).toBeInstanceOf(Task);
  //     });

  //     test("throws if assetId is set", async ({ element, expect }) => {
  //       element.assetId = "test-asset-123";
  //       await element.mediaEngineTask.run();
  //       expect(element.mediaEngineTask.error).toBeInstanceOf(Error);
  //     });

  //     test("creates JitMediaEngine for http sources", async ({
  //       elementWithJitManifest,
  //       expect,
  //       worker,
  //     }) => {
  //       await elementWithJitManifest.mediaEngineTask.run();
  //       expect(elementWithJitManifest.mediaEngineTask.value).toBeInstanceOf(
  //         JitMediaEngine,
  //       );
  //     });

  //     test("creates AssetMediaEngine for local sources", async ({
  //       elementWithAsset,
  //       expect,
  //     }) => {
  //       await elementWithAsset.mediaEngineTask.run();
  //       expect(elementWithAsset.mediaEngineTask.value).toBeInstanceOf(
  //         AssetMediaEngine,
  //       );
  //     });
  //   });

  //   describe("Video Buffering Integration", () => {
  //     test("videoBufferTask is available and configured", ({
  //       element,
  //       expect,
  //     }) => {
  //       expect(element.videoBufferTask).toBeDefined();
  //       expect(element.videoBufferDurationMs).toBe(60000); // 60 seconds default
  //       expect(element.maxVideoBufferFetches).toBe(2); // 2 parallel fetches default
  //       expect(element.enableVideoBuffering).toBe(true); // enabled by default
  //     });

  //     test("buffer configuration can be customized", ({ element, expect }) => {
  //       element.videoBufferDurationMs = 45000;
  //       element.maxVideoBufferFetches = 3;
  //       element.enableVideoBuffering = false;

  //       expect(element.videoBufferDurationMs).toBe(45000);
  //       expect(element.maxVideoBufferFetches).toBe(3);
  //       expect(element.enableVideoBuffering).toBe(false);
  //     });

  //     test("buffer task starts automatically with JIT asset", async ({
  //       elementWithJitManifest,
  //       expect,
  //     }) => {
  //       const element = elementWithJitManifest;

  //       // Wait for media engine to initialize
  //       await element.mediaEngineTask.taskComplete;

  //       // Buffer task should be available and have started
  //       expect(element.videoBufferTask).toBeDefined();
  //       // Task status should be INITIAL (0) or higher, indicating it's been created
  //       expect(element.videoBufferTask.status).toBeGreaterThanOrEqual(0);
  //     });
  //   });
  // });

  // // Test to verify buffer tasks use EFMedia properties directly (no hardcoded config duplication)
  // describe("Buffer Task Property Integration", () => {
  //   test("audio and video buffer tasks use EFMedia properties directly", async ({
  //     element,
  //     expect,
  //   }) => {
  //     // Set custom buffer configuration on the element
  //     element.audioBufferDurationMs = 15000;
  //     element.maxAudioBufferFetches = 3;
  //     element.enableAudioBuffering = false;

  //     element.videoBufferDurationMs = 45000;
  //     element.maxVideoBufferFetches = 5;
  //     element.enableVideoBuffering = false;

  //     // Verify the tasks are created without requiring hardcoded config
  //     expect(element.audioBufferTask).toBeDefined();
  //     expect(element.videoBufferTask).toBeDefined();

  //     // The task configuration should now come directly from element properties
  //     // This test ensures no hardcoded config duplication exists
  //     expect(element.audioBufferDurationMs).toBe(15000);
  //     expect(element.maxAudioBufferFetches).toBe(3);
  //     expect(element.enableAudioBuffering).toBe(false);

  //     expect(element.videoBufferDurationMs).toBe(45000);
  //     expect(element.maxVideoBufferFetches).toBe(5);
  //     expect(element.enableVideoBuffering).toBe(false);
  //   });
  // });
});
