src/components/FocusPage.jsx

import React, { useState, useEffect } from 'react';

function FocusPage({ videoManager, sessionResult, setSessionResult, isActive, displayVideoRef }) {
  const [currentFrame, setCurrentFrame] = useState(30);
  const [timelineEvents, setTimelineEvents] = useState([]);

  const videoRef = displayVideoRef;

  // Helper for formatting a duration in seconds.
  const formatDuration = (seconds) => {
    // Show a compact zero state instead of "0m 0s".
    if (seconds === 0) return "0s";

    const mins = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${mins}m ${secs}s`;
  };

  useEffect(() => {
    if (!videoManager) return;

    // Override the status callback so the timeline updates live.
    const originalOnStatusUpdate = videoManager.callbacks.onStatusUpdate;
    videoManager.callbacks.onStatusUpdate = (isFocused) => {
      setTimelineEvents(prev => {
        const newEvents = [...prev, { isFocused, timestamp: Date.now() }];
        if (newEvents.length > 60) newEvents.shift();
        return newEvents;
      });
      // Preserve the original callback if one was already registered.
      if (originalOnStatusUpdate) originalOnStatusUpdate(isFocused);
    };

    // Cleanup only restores callbacks and does not force-stop the session.
    return () => {
      if (videoManager) {
        videoManager.callbacks.onStatusUpdate = originalOnStatusUpdate;
      }
    };
  }, [videoManager]);

  const handleStart = async () => {
    try {
      if (videoManager) {
        setSessionResult(null); // Clear any previous summary overlay before starting.
        setTimelineEvents([]);

        console.log('🎬 Initializing camera...');
        await videoManager.initCamera(videoRef.current);
        console.log('✅ Camera initialized');

        console.log('🚀 Starting streaming...');
        await videoManager.startStreaming();
        console.log('✅ Streaming started successfully');
      }
    } catch (err) {
      console.error('❌ Start error:', err);
      let errorMessage = "Failed to start: ";

      if (err.name === 'NotAllowedError') {
        errorMessage += "Camera permission denied. Please allow camera access.";
      } else if (err.name === 'NotFoundError') {
        errorMessage += "No camera found. Please connect a camera.";
      } else if (err.name === 'NotReadableError') {
        errorMessage += "Camera is already in use by another application.";
      } else if (err.message && err.message.includes('HTTPS')) {
        errorMessage += "Camera requires HTTPS. Please use a secure connection.";
      } else {
        errorMessage += err.message || "Unknown error occurred.";
      }

      alert(errorMessage + "\n\nCheck browser console for details.");
    }
  };

  const handleStop = () => {
    if (videoManager) {
      videoManager.stopStreaming();
    }
  };

  const handlePiP = async () => {
    try {
      const sourceVideoEl = videoRef.current;
      if (!sourceVideoEl) {
        alert('Video not ready. Please click Start first.');
        return;
      }

      if (document.pictureInPictureElement) {
        await document.exitPictureInPicture();
        return;
      }

      sourceVideoEl.disablePictureInPicture = false;

      if (typeof sourceVideoEl.webkitSetPresentationMode === 'function') {
        sourceVideoEl.play().catch(() => {});
        sourceVideoEl.webkitSetPresentationMode('picture-in-picture');
        return;
      }

      if (!document.pictureInPictureEnabled || typeof sourceVideoEl.requestPictureInPicture !== 'function') {
        alert('Picture-in-Picture is not supported in this browser.');
        return;
      }

      const pipPromise = sourceVideoEl.requestPictureInPicture();
      sourceVideoEl.play().catch(() => {});
      await pipPromise;
    } catch (err) {
      console.error('PiP error:', err);
      alert('Failed to enter Picture-in-Picture.');
    }
  };

  // Floating window helper.
  const handleFloatingWindow = () => {
    handlePiP();
  };

  // ==========================================
  // Preview button handler
  // ==========================================
  const handlePreview = () => {
    // Inject placeholder data so the overlay can be previewed on demand.
    setSessionResult({
        duration_seconds: 0,
        focus_score: 0
    });
  };

  const handleCloseOverlay = () => {
    setSessionResult(null);
  };
  // ==========================================

  const handleFrameChange = (val) => {
    setCurrentFrame(val);
    if (videoManager) {
      videoManager.setFrameRate(val);
    }
  };

  const pageStyle = isActive
    ? undefined
    : {
        position: 'absolute',
        width: '1px',
        height: '1px',
        overflow: 'hidden',
        opacity: 0,
        pointerEvents: 'none'
      };

  return (
    <main id="page-b" className="page" style={pageStyle}>

      {/* 1. Camera / display area */}

      <section id="display-area" style={{ position: 'relative', overflow: 'hidden' }}>

        <video

          ref={videoRef}

          muted

          playsInline

          autoPlay

          style={{ width: '100%', height: '100%', objectFit: 'contain' }}

        />



        {/* Session result overlay */}

        {sessionResult && (

          <div className="session-result-overlay">

            <h3>Session Complete!</h3>

            <div className="result-item">

              <span className="label">Duration:</span>

              <span className="value">{formatDuration(sessionResult.duration_seconds)}</span>

            </div>

            <div className="result-item">

              <span className="label">Focus Score:</span>

              <span className="value">{(sessionResult.focus_score * 100).toFixed(1)}%</span>

            </div>

            

            {/* Add a lightweight close button for preview mode. */}

            <button 

                onClick={handleCloseOverlay}

                style={{

                    marginTop: '20px',

                    padding: '8px 20px',

                    background: 'transparent',

                    border: '1px solid white',

                    color: 'white',

                    borderRadius: '20px',

                    cursor: 'pointer'

                }}

            >

                Close

            </button>

          </div>

        )}



      </section>



      {/* 2. Timeline area */}

      <section id="timeline-area">

        <div className="timeline-label">Timeline</div>

        <div id="timeline-visuals">

          {timelineEvents.map((event, index) => (

            <div 

              key={index}

              className="timeline-block"

              style={{

                backgroundColor: event.isFocused ? '#00FF00' : '#FF0000',

                width: '10px',

                height: '20px',

                display: 'inline-block',

                marginRight: '2px',

                borderRadius: '2px'

              }}

              title={event.isFocused ? 'Focused' : 'Distracted'}

            />

          ))}

        </div>

        <div id="timeline-line"></div>

      </section>



      {/* 3. Control buttons */}

      <section id="control-panel">

        <button id="btn-cam-start" className="action-btn green" onClick={handleStart}>Start</button>

        <button id="btn-floating" className="action-btn yellow" onClick={handleFloatingWindow}>Floating Window</button>

        

        {/* Temporarily repurpose the Models button as a preview action. */}

        <button 

            id="btn-preview" 

            className="action-btn" 

            style={{ backgroundColor: '#6c5ce7' }} // Use purple so the preview action stands out.

            onClick={handlePreview}

        >

            Preview Result

        </button>

        

        <button id="btn-cam-stop" className="action-btn red" onClick={handleStop}>Stop</button>

      </section>



      {/* 4. Frame control */}

      <section id="frame-control">

        <label htmlFor="frame-slider">Frame</label>

        <input 

          type="range" 

          id="frame-slider" 

          min="1" 

          max="60" 

          value={currentFrame}

          onChange={(e) => handleFrameChange(e.target.value)}

        />

        <input 

          type="number" 

          id="frame-input" 

          value={currentFrame}

          onChange={(e) => handleFrameChange(e.target.value)}

        />

      </section>

    </main>
  );
}

export default FocusPage;