import React, { useEffect, useRef, useMemo } from 'react';

const Demos = () => {
  const videoContainersRef = useRef([]);
  const videos = useMemo(() => [
    { url: 'm4_website_1.mp4', duration: '2:33 min' },
    { url: 'm4_website_2.mp4', duration: '1:18 min' },
    { url: 'm4_website_3.mp4', duration: '1:25 min' },
    { url: 'm4_website_4.mp4', duration: '5:49 min' },
  ], []);

  useEffect(() => {
    const loadVideo = (container, videoInfo) => {
      if (!container) return;

      const videoUrl = videoInfo.url;
      const videoPath = `/m4/videos/${videoUrl}`;
      const video = document.createElement('video');
      video.controls = true;
      video.autoplay = true;
      video.muted = true;
      video.loop = true;
      video.style.width = '100%';
      video.style.height = '100%';
      video.style.objectFit = 'cover';
      video.src = videoPath;

      video.onloadeddata = () => {
        container.innerHTML = '';
        container.appendChild(video);
        video.play().catch(error => console.error("Autoplay was prevented: ", error));
      };

      video.onerror = () => {
        container.innerHTML = `
          <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #000; display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; flex-direction: column; gap: 16px;">
              <div style="font-size: 48px;">🎥</div>
              <div>Video not found: ${videoUrl}</div>
              <div style="font-size: 14px; opacity: 0.7;">Place videos in <code>public/videos</code></div>
          </div>
        `;
      };
    };

    videoContainersRef.current.forEach((container, index) => {
      loadVideo(container, videos[index]);
    });
  }, [videos]);

  return (
    <section className="demo-section" id="demos">
      <div className="container">
        <div className="section-header fade-in">
          <h2>See m4 in action</h2>
          <p>Watch step-by-step tutorials to get started with m4 and MIMIC-IV medical data</p>
        </div>

        <div className="demo-grid">
          <div className="demo-card fade-in">
            <div className="video-container" ref={el => videoContainersRef.current[0] = el}>
              <div className="video-overlay">2:33 min</div>
              <div className="play-button"></div>
            </div>
            <div className="demo-content">
              <h3>1. Prerequisites Setup</h3>
              <p>Get PhysioNet credentials, set up Google Cloud Platform BigQuery, and create a new project. Learn where to find your project ID for MCP configuration.</p>
            </div>
          </div>

          <div className="demo-card fade-in">
            <div className="video-container" ref={el => videoContainersRef.current[1] = el}>
              <div className="video-overlay">1:18 min</div>
              <div className="play-button"></div>
            </div>
            <div className="demo-content">
              <h3>2. Installation Guide</h3>
              <p>Two ways to install m4: pip install m4-mcp from PyPI or clone from GitHub. Choose the method that works best for your setup.</p>
            </div>
          </div>

          <div className="demo-card fade-in">
            <div className="video-container" ref={el => videoContainersRef.current[2] = el}>
              <div className="video-overlay">1:25 min</div>
              <div className="play-button"></div>
            </div>
            <div className="demo-content">
              <h3>3a. Quick Start: Demo Dataset</h3>
              <p>Download the MIMIC-IV demo dataset, configure Claude Desktop for MCP, verify it's running, and run your first natural language queries.</p>
            </div>
          </div>

          <div className="demo-card fade-in">
            <div className="video-container" ref={el => videoContainersRef.current[3] = el}>
              <div className="video-overlay">5:49 min</div>
              <div className="play-button"></div>
            </div>
            <div className="demo-content">
              <h3>3b. Full Power: BigQuery Dataset</h3>
              <p>Configure with Google BigQuery project ID for full MIMIC-IV dataset. Explore other MCP clients for local privacy-focused setups with local models.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Demos;
