import React, { useEffect, useRef } from 'react'
import type { Movie } from '../types/api'

interface VideoPlayerProps {
  movie: Movie
}

const VideoPlayer: React.FC<VideoPlayerProps> = ({ movie }) => {
  const videoRef = useRef<HTMLVideoElement>(null)
  const hlsRef = useRef<any>(null)

  useEffect(() => {
    // Detectar soporte de HLS.js
    if (typeof Hls !== 'undefined') {
      const hls = new Hls()
      
      hls.loadSource(movie.path)
      hls.attachMedia(videoRef.current!)
      hls.on(Hls.Events.MANIFEST_PARSED, () => {
        videoRef.current!.play().catch(console.error)
      })
      
      hlsRef.current = hls
    } else if (videoRef.current) {
      // Fallback nativo para navegadores que soportan HLS natively
      const video = videoRef.current
      video.src = movie.path
      video.play().catch(console.error)
    }

    return () => {
      if (hlsRef.current) {
        hlsRef.current.destroy()
      }
    }
  }, [movie])

  return (
    <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%' }}>
      <video
        ref={videoRef}
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          objectFit: 'contain'
        }}
        controls
      />
    </div>
  )
}

export default VideoPlayer