import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { ArrowLeft, ChevronDown, ChevronUp } from 'lucide-react';
import { useWatchMovie } from '../../hooks/useWatchMovie';
import MovieRow from '../../components/MovieRow';

export const WatchPage = ({ slug, episode }: { slug: string, episode: string }) => {
    const navigate = useNavigate();
    const { movie, loading, currentEpisode, setCurrentEpisode, videoRef } = useWatchMovie(slug, episode);
    const [expanded, setExpanded] = useState(false);

    if (!movie) return (
        <div className="h-screen w-full flex items-center justify-center bg-[#141414] text-white">
            <div className="flex flex-col items-center gap-4">
                <div className="w-10 h-10 border-4 border-cyan-500 border-t-transparent rounded-full animate-spin"></div>
                <p className="text-gray-400 animate-pulse">Loading StreamFlow...</p>
            </div>
        </div>
    );

    // Helper for URL safety (same as Hero)
    const getImageUrl = (url: string | undefined, width: number) => {
        if (!url) return '';
        const cleanUrl = url.replace('img.ophim1.com', 'ssl:img.ophim1.com');
        return `https://wsrv.nl/?url=${encodeURIComponent(cleanUrl)}&w=${width}&output=webp`;
    };

    const episodes = movie.episodes || [];
    const visibleEpisodes = expanded ? episodes : episodes.slice(0, 20);

    return (

        <div className="min-h-screen bg-[#0a0a0a] text-white font-sans selection:bg-cyan-500/30 pb-20">
            {/* Back Navigation */}
            <div className="fixed top-0 left-0 right-0 z-50 p-4 bg-gradient-to-b from-black/80 to-transparent pointer-events-none">
                <button
                    onClick={() => navigate('/')}
                    className="pointer-events-auto flex items-center gap-2 px-4 py-2 bg-black/50 hover:bg-white/20 backdrop-blur-md rounded-full transition-all group border border-white/5"
                >
                    <ArrowLeft className="w-5 h-5 text-gray-200 group-hover:-translate-x-1 transition-transform" />
                    <span className="font-medium text-sm">Back to Home</span>
                </button>
            </div>

            {/* 1. Cinema Player Section */}
            <div className="w-full h-[50vh] md:h-[80vh] bg-black relative shadow-2xl z-40">
                {loading && (
                    <div className="absolute inset-0 flex items-center justify-center z-20">
                        <div className="animate-spin rounded-full h-16 w-16 border-4 border-cyan-500 border-t-transparent shadow-[0_0_20px_rgba(6,182,212,0.5)]"></div>
                    </div>
                )}
                {(() => {
                    const activeEpisode = movie.episodes?.find(e => e.number === currentEpisode);
                    if (!activeEpisode?.url) {
                        return (
                            <div className="absolute inset-0 z-10 flex flex-col items-center justify-center bg-black/90">
                                <div className="text-center px-6 max-w-lg">
                                    <h2 className="text-3xl font-bold text-white mb-4">Coming Soon</h2>
                                    <p className="text-gray-400 text-lg mb-6">
                                        We're busy uploading the best quality version of this movie.
                                    </p>
                                </div>
                                <div
                                    className="absolute inset-0 -z-10 opacity-30 bg-cover bg-center blur-2xl grayscale"
                                    style={{ backgroundImage: `url(${getImageUrl(movie.backdrop || movie.thumbnail, 400)})` }}
                                />
                            </div>
                        );
                    }

                    return (
                        <video
                            ref={videoRef}
                            controls
                            className="w-full h-full max-h-screen object-contain"
                            poster={getImageUrl(movie.backdrop || movie.thumbnail, 1280)}
                        />
                    );
                })()}
            </div>

            {/* 2. Content Info & Rows */}
            {/* 2. Content Info & Rows */}
            <div className="max-w-[1600px] mx-auto px-4 md:px-12 py-8 md:py-12 space-y-12">
                {/* Glass Info Card */}
                <div className="bg-[#141414]/90 backdrop-blur-xl rounded-2xl p-6 md:p-10 shadow-2xl border border-white/5 mx-2 md:mx-0">
                    <h1 className="text-3xl md:text-5xl font-bold mb-4 tracking-tight">{movie.title}</h1>

                    {/* Meta Tags */}
                    <div className="flex items-center gap-4 text-sm md:text-base mb-6">
                        <span className="bg-cyan-500/10 text-cyan-400 border border-cyan-500/20 px-2 py-0.5 rounded text-xs font-bold uppercase tracking-wider">
                            {movie.quality || 'HD'}
                        </span>
                        <span className="text-gray-400">{movie.year || '2024'}</span>
                        <span className="text-green-400 font-medium">98% Match</span>
                        <span className="text-gray-400">{movie.original_title}</span>
                    </div>

                    <div
                        className="text-gray-300 leading-relaxed max-w-4xl text-base md:text-lg font-light"
                        dangerouslySetInnerHTML={{ __html: movie.description }}
                    />
                </div>

                {/* Episodes Section - Compact Grid */}
                {episodes.length > 0 && (
                    <div className="space-y-6">
                        <div className="flex items-center justify-between">
                            <h3 className="text-2xl font-bold border-l-4 border-cyan-500 pl-4">Episodes</h3>
                            <div className="text-gray-400 text-sm font-medium bg-white/5 px-3 py-1 rounded-full">{episodes.length} Items</div>
                        </div>

                        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3">
                            {visibleEpisodes.map((ep) => (
                                <button
                                    key={ep.number}
                                    onClick={() => {
                                        setCurrentEpisode(ep.number);
                                        navigate(`/watch/${slug}/${ep.number}`);
                                    }}
                                    className={`group relative aspect-video rounded-xl overflow-hidden border transition-all duration-300 ${currentEpisode === ep.number
                                        ? 'border-cyan-500 bg-cyan-950/30'
                                        : 'border-transparent bg-[#1a1a1a] hover:bg-[#222] hover:border-white/10'
                                        }`}
                                >
                                    <div className="absolute inset-0 flex items-center justify-center">
                                        <span className={`font-bold text-lg ${currentEpisode === ep.number ? 'text-cyan-400' : 'text-gray-500 group-hover:text-white'
                                            }`}>
                                            {ep.number}
                                        </span>
                                    </div>
                                    {currentEpisode === ep.number && (
                                        <div className="absolute bottom-2 right-2 w-2 h-2 rounded-full bg-cyan-400 animate-pulse shadow-[0_0_10px_rgba(34,211,238,0.8)]" />
                                    )}
                                </button>
                            ))}
                        </div>

                        {episodes.length > 20 && (
                            <button
                                onClick={() => setExpanded(!expanded)}
                                className="flex items-center gap-2 text-sm font-medium text-gray-400 hover:text-white transition-colors mt-4 mx-auto"
                            >
                                {expanded ? (
                                    <>Show Less <ChevronUp className="w-4 h-4" /></>
                                ) : (
                                    <>Show All Episodes <ChevronDown className="w-4 h-4" /></>
                                )}
                            </button>
                        )}
                    </div>
                )}

                {/* Related Content Section */}
                <div className="space-y-12 pt-8 border-t border-white/5">
                    <MovieRow title="Có thể bạn sẽ thích" category={movie.category || 'phim-le'} limit={10} key={`related-${movie.slug}`} />
                    <MovieRow title="Phim Mới Cập Nhật" category="home" limit={10} key="trending" />
                    <MovieRow title="Top Phim Lẻ" category="phim-le" limit={10} key="top-movies" />
                    <MovieRow title="Top Phim Bộ" category="phim-bo" limit={10} key="top-series" />
                </div>
            </div>
        </div>
    );
};