"use client";

"use client"

import { memo, useState, useRef, useEffect } from "react";
import CardStack from "@/components/cardStack/CardStack";
import MediaContent from "@/components/shared/MediaContent";
import { cls } from "@/lib/utils";
import { Star } from "lucide-react";
import type { LucideIcon } from "lucide-react";
import type { ButtonConfig, ButtonAnimationType, CardAnimationTypeWith3D, TitleSegment, TextboxLayout, InvertedBackground } from "@/components/cardStack/types";

type Testimonial = {
    id: string;
    name: string;
    role: string;
    company: string;
    rating: number;
    imageSrc?: string;
    videoSrc?: string;
    imageAlt?: string;
    videoAriaLabel?: string;
};

type KpiItem = {
    value: string;
    label: string;
};

interface TestimonialCardSixteenProps {
    testimonials: Testimonial[];
    kpiItems: [KpiItem, KpiItem, KpiItem];
    carouselMode?: "auto" | "buttons";
    uniformGridCustomHeightClasses?: string;
    animationType: CardAnimationTypeWith3D;
    title: string;
    titleSegments?: TitleSegment[];
    description: string;
    tag?: string;
    tagIcon?: LucideIcon;
    tagAnimation?: ButtonAnimationType;
    buttons?: ButtonConfig[];
    buttonAnimation?: ButtonAnimationType;
    textboxLayout: TextboxLayout;
    useInvertedBackground: InvertedBackground;
    ariaLabel?: string;
    className?: string;
    containerClassName?: string;
    cardClassName?: string;
    textBoxTitleClassName?: string;
    textBoxTitleImageWrapperClassName?: string;
    textBoxTitleImageClassName?: string;
    textBoxDescriptionClassName?: string;
    imageClassName?: string;
    overlayClassName?: string;
    ratingClassName?: string;
    nameClassName?: string;
    roleClassName?: string;
    companyClassName?: string;
    gridClassName?: string;
    carouselClassName?: string;
    controlsClassName?: string;
    textBoxClassName?: string;
    textBoxTagClassName?: string;
    textBoxButtonContainerClassName?: string;
    textBoxButtonClassName?: string;
    textBoxButtonTextClassName?: string;
}

interface TestimonialCardProps {
    testimonial: Testimonial;
    cardClassName?: string;
    imageClassName?: string;
    overlayClassName?: string;
    ratingClassName?: string;
    nameClassName?: string;
    roleClassName?: string;
    companyClassName?: string;
}

const TestimonialCard = memo(({
    testimonial,
    cardClassName = "",
    imageClassName = "",
    overlayClassName = "",
    ratingClassName = "",
    nameClassName = "",
roleClassName = "",
    companyClassName = "",
}: TestimonialCardProps) => {
    const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
    const [scrollY, setScrollY] = useState(0);
    const cardRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        const handleScroll = () => setScrollY(window.scrollY);
        window.addEventListener("scroll", handleScroll);
        return () => window.removeEventListener("scroll", handleScroll);
    }, []);

    const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
        if (!cardRef.current) return;
        const rect = cardRef.current.getBoundingClientRect();
        setMousePosition({
            x: e.clientX - rect.left,
            y: e.clientY - rect.top,
        });
    };

    const parallaxOffset = scrollY * 0.05;

    return (
        <div 
            ref={cardRef}
            className={cls("relative h-full aspect-[8/10] rounded-theme-capped overflow-hidden group", cardClassName)} 
            style={{animation: "cardEntrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards"}}
            onMouseMove={handleMouseMove}
        >
            <style>{`
                @keyframes cardEntrance {
                    from {
                        opacity: 0;
                        transform: translateY(30px) scale(0.95);
                    }
                    to {
                        opacity: 1;
                        transform: translateY(0) scale(1);
                    }
                }
                @keyframes glowPulse {
                    0%, 100% {
                        box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.3), 0 20px 40px rgba(0, 0, 0, 0.15);
                    }
                    50% {
                        box-shadow: 0 0 40px rgba(var(--accent-rgb), 0.5), 0 25px 50px rgba(0, 0, 0, 0.2);
                    }
                }
                @keyframes rotateBorder {
                    from {
                        background-position: 0% 0%;
                    }
                    to {
                        background-position: 360% 360%;
                    }
                }
                @keyframes colorShift {
                    0%, 100% {
                        filter: hue-rotate(0deg);
                    }
                    50% {
                        filter: hue-rotate(15deg);
                    }
                }
                @keyframes sparkle {
                    0%, 100% {
                        opacity: 0;
                        transform: scale(0);
                    }
                    50% {
                        opacity: 1;
                        transform: scale(1);
                    }
                }
                @keyframes subtleBounce {
                    0%, 100% {
                        transform: translateY(0);
                    }
                    50% {
                        transform: translateY(-4px);
                    }
                }
                .group:hover .testimonial-inner {
                    animation: glowPulse 2s ease-in-out infinite, colorShift 3s ease-in-out infinite, subtleBounce 0.6s ease-in-out infinite;
                }
                .group:hover .rotating-border {
                    animation: rotateBorder 3s linear infinite;
                }
                .sparkle-particle {
                    position: absolute;
                    pointer-events: none;
                }
                .sparkle-particle.active {
                    animation: sparkle 0.8s ease-out forwards;
                }
            `}</style>
            <div 
                className="testimonial-inner relative w-full h-full transition-all duration-500 ease-out group-hover:shadow-2xl group-hover:-translate-y-12 group-hover:scale-105 group-hover:[transform:perspective(1000px)_rotateX(2deg)_rotateY(-3deg)_translateY(-48px)_scale(1.05)]" 
                style={{transform: `translateY(${parallaxOffset}px)`}}
            >
                {/* Rotating border effect */}
                <div 
                    className="rotating-border absolute inset-0 rounded-theme-capped pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-300"
                    style={{
                        background: "conic-gradient(from 0deg, rgba(var(--accent-rgb), 0.5), rgba(var(--accent-rgb), 0.1), rgba(var(--accent-rgb), 0.5))",
                        backgroundSize: "200% 200%",
                    }}
                />
                {/* Sparkle particles */}
                {[...Array(6)].map((_, i) => (
                    <div
                        key={i}
                        className="sparkle-particle active"
                        style={{
                            left: `${mousePosition.x}px`,
                            top: `${mousePosition.y}px`,
                            width: "8px",
                            height: "8px",
                            background: "radial-gradient(circle, rgba(var(--accent-rgb), 0.8), transparent)",
                            borderRadius: "50%",
                            transform: `translate(-50%, -50%) rotate(${(i / 6) * 360}deg) translateX(20px)`,
                        }}
                    />
                ))}
                {/* Front of card */}
                <div className="absolute w-full h-full">
                    <MediaContent
                        imageSrc={testimonial.imageSrc}
                        videoSrc={testimonial.videoSrc}
                        imageAlt={testimonial.imageAlt || testimonial.name}
                        videoAriaLabel={testimonial.videoAriaLabel || testimonial.name}
                        imageClassName={cls("relative z-1 w-full h-full object-cover!", imageClassName)}
                    />

                    <div className={cls("!absolute z-1 bottom-6 left-6 right-6 card backdrop-blur-xs p-6 flex flex-col gap-3 rounded-theme-capped", overlayClassName)}>
=======
                        <div className={cls("relative z-1 flex gap-1", ratingClassName)}>
                            {Array.from({ length: 5 }).map((_, index) => (
                                <Star
                                    key={index}
                                    className={cls(
                                        "h-5 w-auto text-accent",
                                        index < testimonial.rating ? "fill-accent" : "fill-transparent"
                                    )}
                                    strokeWidth={1.5}
                                />
                            ))}
                        </div>

                        <h3 className={cls("relative z-1 text-2xl font-medium text-foreground leading-[1.1] mt-1", nameClassName)}>
                            {testimonial.name}
                        </h3>

                        <div className="relative z-1 flex flex-col gap-1">
                            <p className={cls("text-base text-foreground leading-[1.1]", roleClassName)}>
                                {testimonial.role}
                            </p>
                            <p className={cls("text-base text-foreground leading-[1.1]", companyClassName)}>
                                {testimonial.company}
                            </p>
                        </div>
                    </div>
                </div>

                {/* Back of card */}
                <div style={{ backfaceVisibility: "hidden", transform: "rotateY(180deg)" }} className="absolute w-full h-full bg-gradient-to-br from-accent/10 to-accent/5 backdrop-blur-xs rounded-theme-capped p-6 flex flex-col justify-center items-center gap-4">
                    <div className="text-center">
                        <p className="text-sm text-foreground/80 mb-4">
                            {testimonial.testimonial || "Exceptional results and outstanding service delivery."}
                        </p>
                        <button className="px-6 py-2 bg-accent text-accent-foreground rounded-theme-capped font-medium text-sm hover:bg-accent/90 transition-colors duration-300">
                            Learn More
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
});

TestimonialCard.displayName = "TestimonialCard";

const TestimonialCardSixteen = ({
    testimonials,
    kpiItems,
    carouselMode = "buttons",
    uniformGridCustomHeightClasses = "min-h-85 2xl:min-h-105",
    animationType,
    title,
    titleSegments,
    description,
    tag,
    tagIcon,
    tagAnimation,
    buttons,
    buttonAnimation,
    textboxLayout,
    useInvertedBackground,
    ariaLabel = "Testimonials section",
    className = "",
    containerClassName = "",
    cardClassName = "",
    textBoxTitleClassName = "",
    textBoxTitleImageWrapperClassName = "",
    textBoxTitleImageClassName = "",
    textBoxDescriptionClassName = "",
    imageClassName = "",
    overlayClassName = "",
    ratingClassName = "",
    nameClassName = "",
    roleClassName = "",
    companyClassName = "",
    gridClassName = "",
    carouselClassName = "",
    controlsClassName = "",
    textBoxClassName = "",
    textBoxTagClassName = "",
    textBoxButtonContainerClassName = "",
    textBoxButtonClassName = "",
    textBoxButtonTextClassName = "",
}: TestimonialCardSixteenProps) => {
    const kpiSection = (
        <div className="card rounded-theme-capped p-8 md:py-16 flex flex-col md:flex-row items-center justify-between">
            {kpiItems.map((item, index) => (
                <div key={index} className="flex flex-col md:flex-row items-center w-full md:flex-1">
                    <div className="flex flex-col items-center text-center flex-1 py-4 md:py-0 gap-1">
                        <h3 className="text-5xl font-medium text-foreground">{item.value}</h3>
                        <p className="text-base text-foreground">{item.label}</p>
                    </div>
                    {index < 2 && (
                        <div className="w-full h-px md:h-[calc(var(--text-5xl)+var(--text-base))] md:w-px bg-foreground" />
                    )}
                </div>
            ))}
        </div>
    );

    return (
        <CardStack
            mode={carouselMode}
            gridVariant="uniform-all-items-equal"
            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
            animationType={animationType}
            supports3DAnimation={true}
            title={title}
            titleSegments={titleSegments}
            description={description}
            tag={tag}
            tagIcon={tagIcon}
            tagAnimation={tagAnimation}
            buttons={buttons}
            buttonAnimation={buttonAnimation}
            textboxLayout={textboxLayout}
            useInvertedBackground={useInvertedBackground}
            bottomContent={kpiSection}
            className={className}
            containerClassName={containerClassName}
            gridClassName={gridClassName}
            carouselClassName={carouselClassName}
            controlsClassName={controlsClassName}
            textBoxClassName={textBoxClassName}
            titleClassName={textBoxTitleClassName}
            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
            titleImageClassName={textBoxTitleImageClassName}
            descriptionClassName={textBoxDescriptionClassName}
            tagClassName={textBoxTagClassName}
            buttonContainerClassName={textBoxButtonContainerClassName}
            buttonClassName={textBoxButtonClassName}
            buttonTextClassName={textBoxButtonTextClassName}
            ariaLabel={ariaLabel}
        >
            {testimonials.map((testimonial, index) => (
                <TestimonialCard
                    key={`${testimonial.id}-${index}`}
                    testimonial={testimonial}
                    cardClassName={cardClassName}
                    imageClassName={imageClassName}
                    overlayClassName={overlayClassName}
                    ratingClassName={ratingClassName}
                    nameClassName={nameClassName}
                    roleClassName={roleClassName}
                    companyClassName={companyClassName}
                />
            ))}
        </CardStack>
    );
};

TestimonialCardSixteen.displayName = "TestimonialCardSixteen";

export default TestimonialCardSixteen;
