src/pages/Watch.jsx

import { useParams, useNavigate } from 'react-router-dom';
import { useEffect, useState, useRef } from 'react';
import { fetchAnichinData } from '../config/firebase';
import Plyr from 'plyr';
import 'plyr/dist/plyr.css';

export default function Watch() {
  const { id } = useParams();
  const navigate = useNavigate();
  const videoRef = useRef(null);
  const [anime, setAnime] = useState(null);

  useEffect(() => {
    fetchAnichinData().then((data) => {
      if (data && data[id]) setAnime(data[id]);
    });
  }, [id]);

  useEffect(() => {
    if (anime && videoRef.current) {
      const player = new Plyr(videoRef.current, {
        controls: ['play-large', 'play', 'progress', 'current-time', 'volume', 'fullscreen'],
        theme: '#dc2626'
      });
      return () => player.destroy();
    }
  }, [anime]);

  if (!anime) return <div className="p-10 text-white">Loading Player...</div>;

  return (
    <div className="min-h-screen bg-black px-4 py-8">
      <button onClick={() => navigate('/')} className="mb-6 text-red-500 font-bold hover:text-white">&larr; Back to Home</button>
      <div className="max-w-5xl mx-auto">
        <video ref={videoRef} className="plyr-react plyr" data-poster={anime.poster_url}>
          {/* Asumsi format data URL video di database: anime.video_url */}
          <source src={anime.video_url} type="video/mp4" />
        </video>
        <h2 className="text-3xl font-black mt-6">{anime.title}</h2>
        <p className="text-gray-400 mt-2">{anime.synopsis}</p>
      </div>
    </div>
  );
}