"use client";

import { memo, useState } 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, GridVariant, TitleSegment, TextboxLayout, InvertedBackground } from "@/components/cardStack/types";

const TestimonialCardFlip = memo(({ testimonial, className }: { testimonial: Testimonial; className?: string }) => {
  const [isFlipped, setIsFlipped] = useState(false);

  return (
    <div
      className={cls(
        "h-full cursor-pointer perspective",
        className
      )}
      onClick={() => setIsFlipped(!isFlipped)}
      onMouseEnter={() => setIsFlipped(true)}
      onMouseLeave={() => setIsFlipped(false)}
      style={{
        perspective: "1000px",
      }}
    >
      <div
        style={{
          transformStyle: "preserve-3d",
          transform: isFlipped ? "rotateY(180deg)" : "rotateY(0deg)",
          transition: "transform 0.6s ease-in-out",
          width: "100%",
          height: "100%",
        }}
      >
        {/* Front side - Name and Photo */}
        <div
          style={{
            backfaceVisibility: "hidden",
            WebkitBackfaceVisibility: "hidden",
          }}
          className="w-full h-full flex flex-col items-center justify-center p-6 bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 rounded-lg border border-slate-200 dark:border-slate-700"
        >
          {testimonial.imageSrc && (
            <img
              src={testimonial.imageSrc}
              alt={testimonial.imageAlt || testimonial.name}
              className="w-24 h-24 rounded-full object-cover mb-4 border-4 border-white dark:border-slate-700 shadow-lg"
            />
          )}
          <h3 className="text-lg font-semibold text-slate-900 dark:text-white text-center">
            {testimonial.name}
          </h3>
          <p className="text-sm text-slate-600 dark:text-slate-400 text-center mt-1">
            {testimonial.role}
          </p>
          <p className="text-xs text-slate-500 dark:text-slate-500 text-center mt-1">
            {testimonial.company}
          </p>
          <div className="flex gap-1 mt-3">
            {Array.from({ length: testimonial.rating }).map((_, i) => (
              <Star key={i} size={16} className="fill-yellow-400 text-yellow-400" />
            ))}
          </div>
        </div>

        {/* Back side - Testimonial Text */}
        <div
          style={{
            backfaceVisibility: "hidden",
            WebkitBackfaceVisibility: "hidden",
            transform: "rotateY(180deg)",
          }}
          className="absolute inset-0 w-full h-full flex flex-col items-center justify-center p-6 bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900 dark:to-indigo-900 rounded-lg border border-blue-200 dark:border-indigo-700 shadow-lg"
        >
          <p className="text-sm text-slate-700 dark:text-slate-200 text-center leading-relaxed italic">
            "{testimonial.testimonialText || "No testimonial text provided"}"
          </p>
        </div>
      </div>
    </div>
  );
});

TestimonialCardFlip.displayName = "TestimonialCardFlip";

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

interface TestimonialCardOneProps {
    testimonials: Testimonial[];
    carouselMode?: "auto" | "buttons";
    uniformGridCustomHeightClasses?: string;
    gridVariant: GridVariant;
    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;
    testimonialTextClassName?: 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;
    testimonialTextClassName?: string;
}

const TestimonialCard = memo(({
    testimonial,
    cardClassName = "",
    imageClassName = "",
    overlayClassName = "",
    ratingClassName = "",
    nameClassName = "",
    roleClassName = "",
    companyClassName = "",
    testimonialTextClassName = "",
}: TestimonialCardProps) => {
    const [isFlipped, setIsFlipped] = useState(false);

    return (
        <div
            className={cls("relative h-full rounded-theme-capped overflow-hidden group cursor-pointer", cardClassName)}
            style={{
                perspective: "1000px",
            }}
            onMouseEnter={() => setIsFlipped(true)}
            onMouseLeave={() => setIsFlipped(false)}
            onClick={() => setIsFlipped(!isFlipped)}
        >
            <div
                style={{
                    transformStyle: "preserve-3d",
                    transform: isFlipped ? "rotateY(180deg)" : "rotateY(0deg)",
                    transition: "transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55)",
                    width: "100%",
                    height: "100%",
                }}
            >
                {/* Front of card */}
                <div
                    style={{
                        backfaceVisibility: "hidden",
                        WebkitBackfaceVisibility: "hidden",
                    }}
                    className="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",
                        WebkitBackfaceVisibility: "hidden",
                        transform: "rotateY(180deg)",
                    }}
                    className="absolute inset-0 w-full h-full card backdrop-blur-xs rounded-theme-capped p-6 flex flex-col justify-center items-center"
                >
                    <p className={cls("text-base text-foreground leading-relaxed text-center", testimonialTextClassName)}>
                        {testimonial.testimonialText || "No testimonial text provided"}
                    </p>
                </div>
            </div>
        </div>
    );
});

TestimonialCard.displayName = "TestimonialCard";

const TestimonialCardOne = ({
    testimonials,
    carouselMode = "buttons",
    uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
    gridVariant,
    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 = "",
    testimonialTextClassName = "",
    gridClassName = "",
    carouselClassName = "",
    controlsClassName = "",
    textBoxClassName = "",
    textBoxTagClassName = "",
    textBoxButtonContainerClassName = "",
    textBoxButtonClassName = "",
    textBoxButtonTextClassName = "",
}: TestimonialCardOneProps) => {
    return (
        <CardStack
            mode={carouselMode}
            gridVariant={gridVariant}
            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}
            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}
                    testimonialTextClassName={testimonialTextClassName}
                />
            ))}
        </CardStack>
    );
};

TestimonialCardOne.displayName = "TestimonialCardOne";

export default TestimonialCardOne;
