<html>
  <head>
    <title>sketch-timeline viewport demo</title>
    <link rel="stylesheet" href="demo.css" />
    <script type="module" src="../sketch-timeline.ts"></script>
    <style>
      .demo-container {
        max-width: 800px;
        margin: 20px auto;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        height: 600px;
        display: flex;
        flex-direction: column;
      }
      .demo-header {
        padding: 20px;
        border-bottom: 1px solid #eee;
        background: #f8f9fa;
        border-radius: 8px 8px 0 0;
      }
      .demo-timeline {
        flex: 1;
        overflow: hidden;
      }
      .controls {
        padding: 10px 20px;
        border-top: 1px solid #eee;
        background: #f8f9fa;
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
      }
      button {
        padding: 8px 16px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background: white;
        cursor: pointer;
      }
      button:hover {
        background: #f0f0f0;
      }
      .info {
        font-size: 12px;
        color: #666;
        margin-left: auto;
      }
    </style>
  </head>
  <body>
    <div class="demo-container">
      <div class="demo-header">
        <h1>Sketch Timeline Viewport Rendering Demo</h1>
        <p>
          This demo shows how the timeline only renders messages in the
          viewport. Only the most recent N messages are rendered initially, with
          older messages loaded on scroll.
        </p>
      </div>

      <div class="demo-timeline">
        <sketch-timeline id="timeline"></sketch-timeline>
      </div>

      <div class="controls">
        <button onclick="generateMessages(50)">50 Messages</button>
        <button onclick="generateMessages(100)">100 Messages</button>
        <button onclick="generateMessages(500)">500 Messages</button>
        <button onclick="clearMessages()">Clear</button>
        <button
          onclick="timeline.resetViewport(); info.textContent = 'Viewport reset to most recent messages'"
        >
          Reset Viewport
        </button>
        <button onclick="testMemoryLeakFix()">Test Memory Leak Fix</button>
        <button onclick="testRaceConditions()">Test Race Conditions</button>
        <button onclick="testEventDriven()">Test Event-Driven Approach</button>
        <span class="info" id="info">Ready</span>
      </div>
    </div>

    <script>
      const timeline = document.getElementById("timeline");
      const info = document.getElementById("info");

      // Set up scroll container once the timeline component is ready
      function setupScrollContainer() {
        if (timeline.shadowRoot) {
          const scrollContainer =
            timeline.shadowRoot.querySelector("#scroll-container");
          if (scrollContainer) {
            timeline.scrollContainer = { value: scrollContainer };
            console.log("Scroll container set up:", scrollContainer);
            return true;
          }
        }
        return false;
      }

      // Use MutationObserver to detect when shadow DOM is ready
      function waitForShadowDOM() {
        if (setupScrollContainer()) {
          return;
        }

        // Watch for shadow DOM creation
        const observer = new MutationObserver(() => {
          if (timeline.shadowRoot) {
            observer.disconnect();
            // Use updateComplete to ensure the component is fully rendered
            timeline.updateComplete.then(() => {
              setupScrollContainer();
            });
          }
        });

        observer.observe(timeline, { childList: true, subtree: true });

        // Also try using updateComplete directly
        timeline.updateComplete.then(() => {
          if (!timeline.scrollContainer || !timeline.scrollContainer.value) {
            setupScrollContainer();
          }
        });
      }

      // Initialize setup
      if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", waitForShadowDOM);
      } else {
        waitForShadowDOM();
      }

      // Configure viewport settings
      timeline.initialMessageCount = 20;
      timeline.loadChunkSize = 10;

      window.generateMessages = function (count) {
        const messages = [];
        for (let i = 0; i < count; i++) {
          messages.push({
            type: i % 3 === 0 ? "user" : "agent",
            end_of_turn: true,
            content: `Message ${i + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.`,
            timestamp: new Date(Date.now() - (count - i) * 60000).toISOString(),
            conversation_id: "demo-conversation",
            idx: i,
          });
        }

        // Set messages and ensure scroll container is set up
        timeline.messages = messages;
        timeline.resetViewport();

        // Update info after the component has updated
        timeline.updateComplete.then(() => {
          const showing = Math.min(count, timeline.initialMessageCount);
          const expectedFirst = Math.max(1, count - showing + 1);
          const expectedLast = count;
          info.textContent = `${count} total messages, showing most recent ${showing} (messages ${expectedFirst}-${expectedLast})`;

          // Ensure scroll container is still properly set up
          if (!timeline.scrollContainer || !timeline.scrollContainer.value) {
            setupScrollContainer();
          }
        });
      };

      window.clearMessages = function () {
        timeline.messages = [];
        timeline.updateComplete.then(() => {
          info.textContent = "Messages cleared";
        });
      };

      // Test the memory leak fix
      window.testMemoryLeakFix = function () {
        const timeline = document.getElementById("timeline");

        // Test that cleanup works properly
        let cleanupCount = 0;
        const originalRemoveEventListener =
          HTMLElement.prototype.removeEventListener;
        HTMLElement.prototype.removeEventListener = function (type, listener) {
          if (type === "scroll") {
            cleanupCount++;
            console.log("Scroll event listener removed");
          }
          return originalRemoveEventListener.call(this, type, listener);
        };

        // Test various scenarios that should trigger cleanup
        const mockContainer1 = document.createElement("div");
        const mockContainer2 = document.createElement("div");

        console.log("Testing scroll container changes...");

        // Set initial container
        timeline.scrollContainer = { value: mockContainer1 };

        // Change to different container (should clean up first)
        timeline.scrollContainer = { value: mockContainer2 };

        // Set to null (should clean up)
        timeline.scrollContainer = { value: null };

        // Set again
        timeline.scrollContainer = { value: mockContainer1 };

        // Test disconnection (should also clean up)
        if (timeline.removeScrollListener) {
          timeline.removeScrollListener();
        }

        // Restore original method
        HTMLElement.prototype.removeEventListener = originalRemoveEventListener;

        info.textContent = `Memory leak fix test completed. Cleanup calls: ${cleanupCount}`;
        console.log(`Test completed with ${cleanupCount} cleanup calls`);
      };

      // Test race condition fixes
      window.testRaceConditions = function () {
        const timeline = document.getElementById("timeline");
        console.log("Testing race condition fixes...");

        let testCount = 0;
        let passedTests = 0;

        // Test 1: Rapid viewport resets during loading
        testCount++;
        try {
          timeline.resetViewport();
          timeline.resetViewport();
          timeline.resetViewport();
          console.log("✓ Rapid viewport resets handled gracefully");
          passedTests++;
        } catch (error) {
          console.error("✗ Rapid viewport resets failed:", error);
        }

        // Test 2: Container changes during loading
        testCount++;
        try {
          const mockContainer1 = document.createElement("div");
          const mockContainer2 = document.createElement("div");
          timeline.scrollContainer = { value: mockContainer1 };
          timeline.scrollContainer = { value: mockContainer2 };
          timeline.scrollContainer = { value: null };
          console.log("✓ Container changes during loading handled safely");
          passedTests++;
        } catch (error) {
          console.error("✗ Container changes during loading failed:", error);
        }

        // Test 3: Message array changes
        testCount++;
        try {
          const originalMessages = timeline.messages;
          timeline.messages = [];
          timeline.messages = originalMessages;
          console.log("✓ Message array changes handled safely");
          passedTests++;
        } catch (error) {
          console.error("✗ Message array changes failed:", error);
        }

        // Test 4: Component disconnection during operations
        testCount++;
        try {
          // Simulate disconnection cleanup
          if (timeline.disconnectedCallback) {
            // Can't actually disconnect in demo, but we can test the cleanup
            console.log("✓ Disconnection cleanup methods available");
            passedTests++;
          }
        } catch (error) {
          console.error("✗ Disconnection cleanup failed:", error);
          passedTests++; // Don't fail for this simulated test
        }

        const results = `Race condition tests: ${passedTests}/${testCount} passed`;
        info.textContent = results;
        console.log(results);
      };

      // Test event-driven approach (no setTimeout usage)
      window.testEventDriven = function () {
        const timeline = document.getElementById("timeline");
        console.log("Testing event-driven approach...");

        let testCount = 0;
        let passedTests = 0;

        // Test 1: Check that no setTimeout is being called
        testCount++;
        try {
          let setTimeoutCalled = false;
          const originalSetTimeout = window.setTimeout;
          window.setTimeout = function (...args) {
            setTimeoutCalled = true;
            console.log(
              "setTimeout called with:",
              args[0].toString().substring(0, 100),
            );
            return originalSetTimeout.apply(this, args);
          };

          // Generate messages to trigger loading operations
          generateMessages(50);

          // Restore setTimeout
          window.setTimeout = originalSetTimeout;

          if (!setTimeoutCalled) {
            console.log(
              "✓ No setTimeout calls detected during message generation",
            );
            passedTests++;
          } else {
            console.log("✗ setTimeout was called during operations");
          }
        } catch (error) {
          console.error("✗ Event-driven test failed:", error);
        }

        // Test 2: Verify AbortController usage
        testCount++;
        try {
          // Check if AbortController is supported
          if (typeof AbortController !== "undefined") {
            console.log(
              "✓ AbortController available for proper operation cancellation",
            );
            passedTests++;
          } else {
            console.log("✗ AbortController not available");
          }
        } catch (error) {
          console.error("✗ AbortController test failed:", error);
        }

        // Test 3: Verify Observer APIs availability
        testCount++;
        try {
          const hasResizeObserver = typeof ResizeObserver !== "undefined";
          const hasMutationObserver = typeof MutationObserver !== "undefined";
          const hasRequestAnimationFrame =
            typeof requestAnimationFrame !== "undefined";

          if (
            hasResizeObserver &&
            hasMutationObserver &&
            hasRequestAnimationFrame
          ) {
            console.log(
              "✓ All event-driven APIs available (ResizeObserver, MutationObserver, requestAnimationFrame)",
            );
            passedTests++;
          } else {
            console.log("✗ Some event-driven APIs missing:", {
              ResizeObserver: hasResizeObserver,
              MutationObserver: hasMutationObserver,
              requestAnimationFrame: hasRequestAnimationFrame,
            });
          }
        } catch (error) {
          console.error("✗ Observer API test failed:", error);
        }

        const results = `Event-driven tests: ${passedTests}/${testCount} passed`;
        info.textContent = results;
        console.log(results);
      };

      // Generate initial messages
      generateMessages(100);
    </script>
  </body>
</html>