import React, { useState } from 'react';

function App() {
  const [movieId] = useState('sample_movie_01'); // ID de prueba
  const [isPlaying, setIsPlaying] = useState(false);

  const handlePlay = async () => {
    try {
      const response = await fetch(`http://localhost:8000/movies/${movieId}/stream`);
      if (!response.ok) throw new Error('Error al cargar el video');
      
      // En una implementación real, usaríamos un proxy o Blob para manejar el stream
      // Aquí simulamos la carga del archivo
      const blob = await response.blob();
      const url = URL.createObjectURL(blob);
      
      document.getElementById('videoPlayer').src = url;
      setIsPlaying(true);
    } catch (error) {
      console.error(error);
      alert('Error al reproducir el video');
    }
  };

  return (
    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
      <h1>NetFlux - Tu Netflix Casero</h1>
      <button onClick={handlePlay} disabled={isPlaying}>Reproducir Película de Prueba</button>
      
      {isPlaying && (
        <div style={{ marginTop: '20px' }}>
          <video
            id="videoPlayer"
            controls
            width="800"
            height="450"
            style={{ borderRadius: '8px', boxShadow: '0 4px 6px rgba(0,0,0,0.1)' }}
          />
        </div>
      )}
    </div>
  );
}

export default App;