"use client";

import { useState, useEffect } from "react";
import { createPortal } from "react-dom";
import Image from "next/image";
import { ArrowRight, Phone, Video, Rocket, Layers, Crown, X, ZoomIn } from "lucide-react";
import { ROUTES } from "@/config/routes";
import Link from "next/link";

type PricingPackage = {
    id: string;
    title: string;
    description: string;
    icon: React.ReactNode;
    src: string;
    alt: string;
    price: string;
    tag: string;
};

export default function PricingTables() {
    const shortVideoPricings: PricingPackage[] = [
        {
            id: "starter",
            title: "Gói Starter",
            description: "Tối ưu số lượng video (12 videos/tháng). Thời lượng dưới 60s. Phù hợp bắt trend TikTok/Reels nhanh.",
            icon: <Rocket className="w-5 h-5" />,
            src: "/images/bang-gia-starter.jpg",
            alt: "Bảng giá gói Starter Short Video",
            price: "7.990.000đ",
            tag: "12 Video / Tháng"
        },
        {
            id: "basic",
            title: "Gói Basic",
            description: "Tối ưu thời lượng (dưới 1p20s). 10 videos/tháng. Phù hợp chuyên gia chia sẻ kiến thức sâu.",
            icon: <Layers className="w-5 h-5" />,
            src: "/images/bang-gia-basic.jpg",
            alt: "Bảng giá gói Basic Short Video",
            price: "7.990.000đ",
            tag: "Thời lượng dài"
        },
        {
            id: "standard",
            title: "Gói Standard",
            description: "Gói toàn diện nhất: Số lượng nhiều (12 videos) & Thời lượng dài (1p20s). Edit chuyên sâu.",
            icon: <Crown className="w-5 h-5" />,
            src: "/images/bang-gia-standard.jpg",
            alt: "Bảng giá gói Standard Short Video",
            price: "10.990.000đ",
            tag: "Cao cấp nhất"
        },
    ];

    const [selectedPkg, setSelectedPkg] = useState<PricingPackage>(shortVideoPricings[0]);
    const [isZoomed, setIsZoomed] = useState(false);
    const [mounted, setMounted] = useState(false);

    useEffect(() => {
        setMounted(true);
    }, []);

    useEffect(() => {
        if (isZoomed) {
            document.body.style.overflow = 'hidden';
        } else {
            document.body.style.overflow = 'unset';
        }
        return () => { document.body.style.overflow = 'unset'; };
    }, [isZoomed]);

    const InteractivePricingSection = ({
        title,
        icon,
        pricings,
        selectedPkg,
        setSelectedPkg,
        setIsZoomed
    }: {
        title: string,
        icon: React.ReactNode,
        pricings: PricingPackage[],
        selectedPkg: PricingPackage,
        setSelectedPkg: (pkg: PricingPackage) => void,
        setIsZoomed: (value: boolean) => void
    }) => {

        return (
            <div className="relative rounded-3xl overflow-hidden">
                {/* Content */}
                <div className="relative z-10 p-4">
                    <div className="text-center max-w-4xl mx-auto mb-12 md:mb-16">
                        <div className="inline-flex items-center gap-3 px-6 py-3 bg-gradient-to-r from-red-500 to-orange-500 rounded-full mb-6 shadow-lg">
                            <span className="text-white">{icon}</span>
                            <span className="text-sm font-bold text-white uppercase tracking-wider">
                                Bảng Giá
                            </span>
                        </div>
                        <h3 className="text-3xl md:text-5xl font-extrabold mb-6 bg-gradient-to-r from-neutral-900 via-red-600 to-orange-600 bg-clip-text text-transparent">
                            {title}
                        </h3>
                        <p className="text-lg md:text-xl text-neutral-600 font-medium">
                            Chọn gói phù hợp để xem chi tiết quyền lợi và báo giá.
                        </p>
                    </div>

                    <div className="grid lg:grid-cols-12 gap-8 lg:gap-12 items-start">
                        <div className="lg:col-span-7 flex flex-col gap-4">
                            {pricings.map((pkg) => {
                                const isSelected = selectedPkg.id === pkg.id;
                                return (
                                    <button
                                        key={pkg.id}
                                        onClick={() => setSelectedPkg(pkg)}
                                        className={`group relative p-4 sm:p-6 text-left rounded-2xl transition-all duration-300 border-2 w-full overflow-hidden
                                    ${isSelected
                                                ? "border-orange-500 bg-white shadow-xl shadow-orange-100 scale-[1.02]"
                                                : "border-neutral-100 bg-neutral-50 hover:border-orange-200 hover:bg-white"
                                            }`}
                                    >
                                        <div className={`absolute left-0 top-0 bottom-0 w-1.5 bg-gradient-to-b from-red-500 to-orange-500 transition-all duration-300 
                                        ${isSelected ? "opacity-100" : "opacity-0"}`}
                                        />
                                        <div className="flex items-start justify-between gap-4 pl-2">
                                            <div className="flex-1">
                                                <div className="flex items-center gap-3 mb-2">
                                                    <div className={`p-2 rounded-lg ${isSelected ? "bg-orange-100 text-orange-600" : "bg-neutral-200 text-neutral-500"}`}>
                                                        {pkg.icon}
                                                    </div>
                                                    <h4 className={`text-lg font-bold ${isSelected ? "text-neutral-900" : "text-neutral-600"}`}>
                                                        {pkg.title}
                                                    </h4>
                                                </div>
                                                <p className="text-sm text-neutral-500 leading-relaxed mb-4 line-clamp-2">
                                                    {pkg.description}
                                                </p>

                                                <div className="flex items-center gap-4 pt-2 border-t border-dashed border-neutral-200">
                                                    <div className="flex flex-col">
                                                        <span className="text-xs text-neutral-400 font-medium uppercase tracking-wider">Trọn gói</span>
                                                        <span className={`text-xl sm:text-2xl font-extrabold ${isSelected ? "text-orange-600" : "text-neutral-700"}`}>
                                                            {pkg.price}
                                                        </span>
                                                    </div>

                                                    <div className={`ml-auto px-3 py-1.5 rounded-full text-xs font-bold tracking-wide uppercase whitespace-nowrap
                                                    ${isSelected
                                                            ? "bg-gradient-to-r from-orange-500 to-red-500 text-white shadow-md"
                                                            : "bg-neutral-100 text-neutral-500"
                                                        }`}>
                                                        {pkg.tag}
                                                    </div>
                                                </div>
                                            </div>

                                            <div className={`hidden sm:flex items-center justify-center w-8 h-8 rounded-full border transition-all mt-2 flex-shrink-0
                                            ${isSelected ? "border-orange-500 bg-orange-500 text-white" : "border-neutral-200 text-neutral-300 group-hover:border-orange-300 group-hover:text-orange-300"}`}>
                                                <ArrowRight className="w-4 h-4" />
                                            </div>
                                        </div>
                                    </button>
                                );
                            })}
                        </div>

                        <div className="lg:col-span-5">
                            <div className="sticky top-24">
                                <div
                                    className="relative rounded-3xl overflow-visible shadow-2xl bg-white border border-neutral-100 p-2 max-w-md mx-auto group cursor-zoom-in transition-all duration-300 hover:shadow-orange-100/50 hover:shadow-[0_20px_50px_-12px_rgba(0,0,0,0.15)]"
                                    onClick={() => setIsZoomed(true)}
                                >
                                    {/* Title Badge - Top Center */}
                                    <div className="absolute -top-3 left-1/2 -translate-x-1/2 z-30 bg-gradient-to-r from-red-500 to-orange-500 text-white px-4 py-1 rounded-full text-sm font-bold border-2 border-white shadow-lg transition-all duration-300">
                                        {selectedPkg.title}
                                    </div>

                                    <div className="absolute inset-0 z-20 bg-black/0 group-hover:bg-black/5 transition-all duration-300 flex items-center justify-center rounded-3xl overflow-hidden">
                                        <div className="bg-white/90 text-neutral-900 px-4 py-2 rounded-full opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 shadow-lg flex items-center gap-2 text-sm font-bold pointer-events-none">
                                            <ZoomIn className="w-4 h-4" />
                                            <span>Phóng to</span>
                                        </div>
                                    </div>

                                    <div
                                        key={selectedPkg.id}
                                        className="relative w-full aspect-[2/3] transition-all duration-500 ease-in-out overflow-hidden rounded-2xl"
                                        style={{
                                            animation: 'fadeInScale 0.5s ease-in-out'
                                        }}
                                    >
                                        <Image
                                            src={selectedPkg.src}
                                            alt={selectedPkg.alt}
                                            fill
                                            className="object-contain rounded-2xl transition-opacity duration-500"
                                            priority
                                        />
                                    </div>

                                    <style jsx>{`
                                    @keyframes fadeInScale {
                                        0% {
                                            opacity: 0;
                                            transform: scale(0.95) translateY(10px);
                                        }
                                        100% {
                                            opacity: 1;
                                            transform: scale(1) translateY(0);
                                        }
                                    }
                                `}</style>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    };

    return (
        <>
            <section className="relative py-8 overflow-hidden bg-white">
                {/* Background Image */}
                <div className="absolute top-0 left-0 right-0 z-0">
                    <Image
                        src="/images/banner/Bundle-BG.png"
                        alt="Pricing Background"
                        width={1920}
                        height={1080}
                        className="w-full h-auto"
                        quality={100}
                        priority
                    />
                </div>

                <div className="container relative z-10">
                    <InteractivePricingSection
                        title="Bảng Giá Dịch Vụ Short Video"
                        icon={<Video className="w-4 h-4" />}
                        pricings={shortVideoPricings}
                        selectedPkg={selectedPkg}
                        setSelectedPkg={setSelectedPkg}
                        setIsZoomed={setIsZoomed}
                    />

                    <div className="relative rounded-3xl overflow-hidden shadow-2xl">
                        <div className="relative w-full min-h-[400px] xs:min-h-[550px] sm:min-h-[600px] md:min-h-[650px] lg:min-h-[700px] xl:min-h-[850px]">
                            <Image
                                src="/images/about/BTS_web_2.jpg"
                                alt="Behind The Scenes"
                                fill
                                className="object-cover object-center"
                                quality={90}
                            />
                        </div>
                        <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/95 via-black/80 to-transparent p-4 xs:p-5 sm:p-6 md:p-8 lg:p-10">
                            <div className="max-w-6xl mx-auto">
                                <div className="flex flex-col lg:flex-row items-center justify-between gap-4 sm:gap-5 lg:gap-8">
                                    <div className="text-white text-center lg:text-left flex-1">
                                        <h2 className="text-xl xs:text-2xl sm:text-3xl md:text-4xl lg:text-4xl font-extrabold mb-1.5 sm:mb-2 leading-tight">
                                            Liên Hệ Báo Giá Chụp Ảnh
                                        </h2>
                                        <p className="text-xs xs:text-sm sm:text-base text-white/90 leading-relaxed">
                                            Dịch vụ chụp ảnh chuyên nghiệp - Tư vấn chi tiết theo nhu cầu
                                        </p>
                                    </div>
                                    <div className="flex flex-col xs:flex-row gap-2.5 sm:gap-3 flex-shrink-0 w-full xs:w-auto">
                                        <Link href={ROUTES.CONTACT} className="w-full xs:w-auto">
                                            <button className="w-full xs:w-auto inline-flex items-center justify-center gap-2 px-5 sm:px-6 md:px-8 py-2.5 sm:py-3 bg-gradient-to-r from-red-500 to-orange-500 text-white font-bold rounded-full shadow-lg hover:shadow-2xl transition-all text-sm sm:text-base">
                                                <span>Liên Hệ Ngay</span>
                                                <ArrowRight className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
                                            </button>
                                        </Link>
                                        <a href="tel:0983913913" className="w-full xs:w-auto">
                                            <button className="w-full xs:w-auto inline-flex items-center justify-center gap-2 px-5 sm:px-6 md:px-8 py-2.5 sm:py-3 bg-white text-neutral-900 font-bold rounded-full shadow-lg hover:shadow-2xl hover:bg-neutral-50 transition-all text-sm sm:text-base">
                                                <Phone className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
                                                <span className="tabular-nums">0983 913 913</span>
                                            </button>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {mounted && isZoomed && createPortal(
                <div
                    className="fixed inset-0 z-[99999] bg-black/95 backdrop-blur-sm flex items-center justify-center p-4 sm:p-8 animate-in fade-in duration-200"
                    onClick={() => setIsZoomed(false)}
                >
                    <button
                        className="absolute top-4 right-4 md:top-8 md:right-8 text-white/90 hover:text-white bg-white/20 hover:bg-white/30 p-3 md:p-2 rounded-full transition-all z-[100000] touch-manipulation"
                        onClick={(e) => {
                            e.preventDefault();
                            e.stopPropagation();
                            setIsZoomed(false);
                        }}
                    >
                        <X className="w-6 h-6 md:w-8 md:h-8" />
                    </button>

                    <div
                        className="relative w-full h-full max-w-5xl max-h-screen flex items-center justify-center"
                        onClick={(e) => e.stopPropagation()}
                    >
                        <Image
                            src={selectedPkg.src}
                            alt={selectedPkg.alt}
                            width={1200}
                            height={1600}
                            className="max-w-full max-h-[90vh] object-contain rounded-lg shadow-2xl animate-in zoom-in-90 duration-300"
                            quality={100}
                        />
                    </div>

                    <div className="absolute bottom-8 text-white/50 text-sm font-medium">
                        Nhấn ra ngoài để đóng
                    </div>
                </div>,
                document.body
            )}
        </>
    );
}