Movie Purchases

const PurchaseButton = ({ pelicula, onPurchase }) => {
  const [isPurchasing, setIsPurchasing] = useState(false);

  const handlePurchase = () => {
    setIsPurchasing(true);
    
    // Simulate purchase processing
    setTimeout(() => {
      onPurchase(pelicula);
      setIsPurchasing(false);
      alert(`¡Has comprado ${pelicula.title} por ${pelicula.price}€!`);
    }, 500);
  };

  return (
    <button 
      className="compra-button"
      onClick={handlePurchase}
      disabled={isPurchasing}
    >
      {isPurchasing ? 'Procesando...' : `Comprar por ${pelicula.price}€`}
    </button>
  );
};

const handlePurchase = (compradPelicula) => {
  const newCompras = [
    ...compras, 
    { 
      ...compradPelicula, 
      compraDate: new Date().toISOString() 
    }
  ];
  setCompras(newCompras);
  localStorage.setItem('compras', JSON.stringify(newCompras));
};

useEffect(() => {
  const savedCompras = JSON.parse(localStorage.getItem('compras') || '[]');
  setCompras(savedCompras);
  setLoading(false);
}, []);

const MyComprasPage = () => {
  const [compras, setCompras] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const savedCompras = JSON.parse(localStorage.getItem('compras') || '[]');
    setCompras(savedCompras);
    setLoading(false);
  }, []);

  return (
    <div className="gestion-compras-page">
      <h1 className="gestion-compras-page__title">Mis Compras</h1>
      
      {compras.length === 0 ? (
        <div className="gestion-compras-page__empty">
          <p>No tienes películas compradas</p>
        </div>
      ) : (
        <PeliculaGrid peliculas={compras} loading={loading} />
      )}
    </div>
  );
};

{compras.length === 0 ? (
  <div className="gestion-compras-page__empty">
    <p>No tienes películas compradas</p>
  </div>
) : (
  <PeliculaGrid peliculas={compras} loading={loading} />
)}

{
  // Complete movie data
  id: 1,
  title: "Inception",
  director: "Christopher Nolan",
  year: 2010,
  genre: "Ciencia Ficción",
  duration: 148,
  synopsis: "Un ladrón que roba secretos corporativos...",
  image: "https://...",
  trailerUrl: "https://www.youtube.com/embed/...",
  price: 12.99,
  alquilerPrecio: 3.99,
  rating: 8.8,
  language: "Inglés",
  cast: ["Leonardo DiCaprio", "Joseph Gordon-Levitt", "Elliot Page"],
  // Purchase-specific data
  compraDate: "2026-03-06T14:30:00.000Z"
}

const PeliculaDetailPage = () => {
  const [compras, setCompras] = useState([]);

  useEffect(() => {
    const savedCompras = JSON.parse(localStorage.getItem('compras') || '[]');
    setCompras(savedCompras);
  }, []);

  const handlePurchase = (compradPelicula) => {
    const newCompras = [
      ...compras, 
      { ...compradPelicula, compraDate: new Date().toISOString() }
    ];
    setCompras(newCompras);
    localStorage.setItem('compras', JSON.stringify(newCompras));
  };

  return (
    <div className="pelicula-detail__actions">
      <button className="pelicula-detail__trailer-btn">Ver Tráiler</button>
      <RentalButton pelicula={pelicula} onRent={handleRent} />
      <PurchaseButton pelicula={pelicula} onPurchase={handlePurchase} />
    </div>
  );
};

ComprasPage (Page)
└── PeliculaGrid (Display library)
    └── PeliculaCard (Individual purchase)
        ├── Movie Poster
        ├── Metadata
        └── TrailerModal (Watch trailers)

// Check localStorage availability
if (typeof(Storage) !== "undefined") {
  // localStorage supported
  localStorage.setItem('compras', JSON.stringify(newCompras));
} else {
  // Fallback to in-memory storage or show error
  console.error("localStorage not supported");
}

const handlePurchase = (compradPelicula) => {
  // Check if already purchased
  const alreadyOwned = compras.some(c => c.id === compradPelicula.id);
  
  if (alreadyOwned) {
    alert('Ya has comprado esta película');
    return;
  }
  
  // Proceed with purchase
  const newCompras = [
    ...compras, 
    { ...compradPelicula, compraDate: new Date().toISOString() }
  ];
  setCompras(newCompras);
  localStorage.setItem('compras', JSON.stringify(newCompras));
};