import React, { useState } from 'react'
import VideoPlayer from './components/VideoPlayer'
import type { Movie } from './types/api'

const App: React.FC = () => {
  const [selectedMovie, setSelectedMovie] = useState<Movie | null>(null)
  const [movies, setMovies] = useState<Movie[]>([])

  // Simulación de carga inicial de películas (en producción vendría del backend)
  React.useEffect(() => {
    fetch('http://localhost:8000/movies')
      .then(res => res.json())
      .then(data => setMovies(data))
      .catch(console.error)
  }, [])

  const handleMovieSelect = (movie: Movie) => {
    setSelectedMovie(movie)
  }

  return (
    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
      <h1>NetFlux - Tu propio Netflix Casero</h1>
      
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: '16px' }}>
        {movies.map(movie => (
          <div
            key={movie.id}
            onClick={() => handleMovieSelect(movie)}
            style={{
              cursor: 'pointer',
              padding: '12px',
              border: '1px solid #ddd',
              borderRadius: '8px',
              textAlign: 'center'
            }}
          >
            <img
              src={movie.poster_path || '/placeholder.jpg'}
              alt={movie.title}
              style={{ width: '100%', height: '300px', objectFit: 'cover', borderRadius: '4px' }}
            />
            <h3 style={{ margin: '8px 0 4px' }}>{movie.title}</h3>
          </div>
        ))}
      </div>

      {selectedMovie && (
        <div style={{ marginTop: '24px' }}>
          <VideoPlayer movie={selectedMovie} />
        </div>
      )}
    </div>
  )
}

export default App