'use client';

import { VideoItem } from '@/types/section';
import { ArrowRight } from 'lucide-react';
import ShortVideo from './ShortVideo';
import VideoPopup from './VideoPopup';
import { useState } from 'react';
import AdVideo from "./AdVideo";
import FloatingParticles from './FloatingParticles';
import { motion } from 'framer-motion';

interface VideoSectionProps {
    shortVideoList: VideoItem[];
    adVideoList: VideoItem[];
    loading: boolean;
}

export default function VideoSection({ shortVideoList, adVideoList, loading }: VideoSectionProps) {
    const [selectedVideo, setSelectedVideo] = useState<{ url: string, type: string } | null>(null);

    return (
        <section className="relative bg-white py-12 overflow-hidden">
            {/* Mesh Gradient Background - Modern Style */}
            <div className="absolute inset-0 pointer-events-none">
                {/* Large Mesh Blobs */}
                <div className="absolute -top-40 -right-40 w-[600px] h-[600px] bg-gradient-to-br from-red-200/60 via-orange-200/50 to-transparent rounded-full blur-[120px] opacity-70" />

                <div className="absolute top-1/3 -left-20 w-[500px] h-[500px] bg-gradient-to-tr from-yellow-200/50 via-orange-300/40 to-transparent rounded-full blur-[100px] opacity-60" />

                <div className="absolute -bottom-40 right-1/4 w-[550px] h-[550px] bg-gradient-to-tl from-red-300/50 via-red-200/40 to-transparent rounded-full blur-[110px] opacity-65" />

                {/* Accent Highlights */}
                <div className="absolute top-20 left-1/3 w-[300px] h-[300px] bg-gradient-to-br from-orange-400/30 to-transparent rounded-full blur-[80px]" />

                <div className="absolute bottom-32 left-1/2 w-[400px] h-[400px] bg-gradient-to-tr from-yellow-300/25 via-orange-200/20 to-transparent rounded-full blur-[90px]" />
            </div>

            {/* Gradient Overlay for Depth */}
            <div className="absolute inset-0 bg-gradient-to-b from-white/50 via-transparent to-white/50 pointer-events-none" />

            <div className="container relative z-10">
                <div className="text-center mx-auto mb-12">
                    <div className="inline-flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-red-600 to-red-500 rounded-full mb-8 shadow-lg shadow-red-500/20 hover:shadow-red-500/30 transition-all duration-300 group cursor-default transform hover:-translate-y-0.5">
                        <div className="relative flex h-3 w-3">
                            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-white opacity-75"></span>
                            <span className="relative inline-flex rounded-full h-3 w-3 bg-white"></span>
                        </div>
                        <span className="text-sm font-bold text-white tracking-wide uppercase">Dự Án Tiêu Biểu</span>
                    </div>

                    <h2 className="text-4xl md:text-6xl lg:text-7xl font-black mb-8 leading-[1.1] tracking-tight text-gray-900">
                        Kiến Tạo{" "}
                        <span className="relative inline-block whitespace-nowrap">
                            <span className="relative z-10 text-transparent bg-clip-text bg-gradient-to-r from-red-700 to-red-500">
                                Thương Hiệu
                            </span>
                            <svg className="absolute -bottom-2 left-0 w-full h-3 text-red-200/60 -z-10" viewBox="0 0 100 10" preserveAspectRatio="none">
                                <path d="M0 5 Q 50 10 100 5" stroke="currentColor" strokeWidth="8" fill="none" />
                            </svg>
                        </span>
                        <br className="hidden md:block" />
                        <span className="block mt-2 text-transparent bg-clip-text bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900">Đột Phá & Khác Biệt</span>
                    </h2>
                    <p className="text-gray-600 text-lg md:text-xl leading-relaxed max-w-2xl mx-auto font-medium">
                        Hơn 500+ khách hàng đã tin tưởng lựa chọn chúng tôi để kể câu chuyện thương hiệu của họ qua những thước phim ấn tượng.
                    </p>
                </div>

                {loading ? (
                    <div className="flex flex-col justify-center items-center py-32 animate-fade-in">
                        <div className="animate-spin rounded-full h-16 w-16 border-4 border-red-100 border-t-red-600 mb-6"></div>
                        <span className="text-gray-500 font-medium animate-pulse">Đang tải dữ liệu...</span>
                    </div>
                ) : (
                    <div className="">
                        {/* Section 1: Short Videos (Slider) */}
                        <div className="animate-fade-in-up">
                            <ShortVideo
                                title="Video Ngắn / TikTok"
                                videoList={shortVideoList}
                                onSelectVideo={(url: string, type: string) => setSelectedVideo({ url, type })}
                                aspect="portrait"
                                itemsPerView={5}
                            />
                        </div>

                        {/* Section 2: Ad Videos (Grid) */}
                        <div className="animate-fade-in-up delay-200">
                            <AdVideo
                                title="TVC / Quảng Cáo"
                                videoList={adVideoList}
                                onSelectVideo={(url: string, type: string) => setSelectedVideo({ url, type })}
                                aspect="portrait"
                                itemsPerView={3}
                            />
                        </div>

                        <div className="flex justify-center">
                            <motion.button
                                onClick={() => window.open('https://docs.google.com/presentation/d/1uCDl6WMYnqKEdi8215mHvSpMrGAgeeKlIB-YU43B1s0/mobilepresent?slide=id.p', '_blank')}
                                initial={{ opacity: 0, y: 20 }}
                                whileInView={{ opacity: 1, y: 0 }}
                                viewport={{ once: true }}
                                transition={{ duration: 0.6, delay: 0.3 }}
                                whileHover={{ scale: 1.02, y: -2 }}
                                whileTap={{ scale: 0.98 }}
                                className="group relative inline-flex items-center gap-3 px-8 py-4 bg-gradient-to-r from-red-500 to-red-600 text-white font-semibold rounded-full shadow-lg hover:shadow-xl transition-all duration-300"
                            >
                                <span>Xem Hồ Sơ Năng Lực</span>
                                <ArrowRight className="w-5 h-5 transition-transform group-hover:translate-x-1" />
                            </motion.button>
                        </div>
                    </div>
                )}
            </div>

            {selectedVideo && (
                <VideoPopup url={selectedVideo.url} type={selectedVideo.type} onClose={() => setSelectedVideo(null)} />
            )}
        </section>
    );
}
