"use client";

import Image from "next/image";
import { motion } from "framer-motion";
import { GlassInfoCard } from "../ui/GlassInfoCard";
import { scaleIn, staggerContainer, viewport } from "@/lib/animations";
import type { Variants } from "framer-motion";

type GlassCardItem = {
  text: string;
  icon?: string;
};

type HeroVisualCollageProps = {
  centerImage: string;
  leftImage?: string;
  rightImage?: string;
  glassCards: GlassCardItem[];
  isPhoneCenter?: boolean;
  cardVariant?: Variants;
};

const leftPanelVariant: Variants = {
  hidden: { opacity: 0, x: -28 },
  visible: {
    opacity: 1,
    x: 0,
    transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] as [number, number, number, number] },
  },
};

const rightPanelVariant: Variants = {
  hidden: { opacity: 0, x: 28 },
  visible: {
    opacity: 1,
    x: 0,
    transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] as [number, number, number, number] },
  },
};

const glasscardVariant: Variants = {
  hidden: { opacity: 0, scale: 0.88, y: 8 },
  visible: {
    opacity: 1,
    scale: 1,
    y: 0,
    transition: { type: "spring", stiffness: 260, damping: 22 },
  },
};

const glassCardStagger: Variants = {
  hidden: {},
  visible: { transition: { staggerChildren: 0.1, delayChildren: 0.3 } },
};

export function HeroVisualCollage({
  centerImage,
  leftImage,
  rightImage,
  glassCards,
  isPhoneCenter = true,
  cardVariant,
}: HeroVisualCollageProps) {
  const activeCardVariant = cardVariant ?? glasscardVariant;
  return (
    <div className="relative w-full h-[380px] sm:h-[450px] lg:h-[500px] max-w-[540px] mx-auto flex items-center justify-center select-none">
      {/* Decorative backgrounds */}
      <div className="absolute w-[240px] h-[240px] rounded-full bg-[#7C3AED]/10 blur-[60px] -z-10" />

      <div className="absolute -top-4 -right-4 w-32 h-32 text-[#6330D6]/10 -z-10 opacity-20">
        <svg className="w-full h-full" fill="currentColor">
          <pattern id="collage-dots" x="0" y="0" width="16" height="16" patternUnits="userSpaceOnUse">
            <circle cx="2" cy="2" r="1.5" />
          </pattern>
          <rect width="100%" height="100%" fill="url(#collage-dots)" />
        </svg>
      </div>

      <div className="absolute top-12 left-6 text-[#6330D6]/15 font-display text-xl font-bold select-none pointer-events-none">✕</div>
      <div className="absolute bottom-16 right-8 text-[#6330D6]/15 font-display text-xl font-bold select-none pointer-events-none">✕</div>

      {/* LEFT IMAGE PANEL */}
      {leftImage && (
        <motion.div
          className="absolute left-2 sm:left-4 top-[15%] w-[100px] sm:w-[130px] h-[180px] sm:h-[220px] rounded-[18px] overflow-hidden border-2 border-white shadow-[0_8px_24px_rgba(0,0,0,0.06)] z-10"
          variants={leftPanelVariant}
          initial="hidden"
          whileInView="visible"
          viewport={viewport}
          whileHover={{ scale: 1.04, transition: { duration: 0.25, ease: [0.22, 1, 0.36, 1] } }}
        >
          <Image
            src={leftImage}
            alt="Collage left asset"
            fill
            className="object-cover"
            sizes="(max-width: 640px) 100px, 130px"
          />
        </motion.div>
      )}

      {/* RIGHT IMAGE PANEL */}
      {rightImage && (
        <motion.div
          className="absolute right-2 sm:right-4 bottom-[15%] w-[100px] sm:w-[130px] h-[180px] sm:h-[220px] rounded-[18px] overflow-hidden border-2 border-white shadow-[0_8px_24px_rgba(0,0,0,0.06)] z-10"
          variants={rightPanelVariant}
          initial="hidden"
          whileInView="visible"
          viewport={viewport}
          whileHover={{ scale: 1.04, transition: { duration: 0.25, ease: [0.22, 1, 0.36, 1] } }}
        >
          <Image
            src={rightImage}
            alt="Collage right asset"
            fill
            className="object-cover"
            sizes="(max-width: 640px) 100px, 130px"
          />
        </motion.div>
      )}

      {/* CENTER COMPONENT */}
      <motion.div
        className="relative z-20"
        variants={scaleIn}
        initial="hidden"
        whileInView="visible"
        viewport={viewport}
      >
        {isPhoneCenter ? (
          <div className="relative w-[180px] sm:w-[220px] h-[360px] sm:h-[440px] rounded-[36px] border-[5px] sm:border-[6px] border-white/95 shadow-[0_20px_50px_rgba(99,48,214,0.12)] bg-[#FAF8FC] overflow-hidden flex flex-col justify-center items-center">
            <Image
              src={centerImage}
              alt="Phone Mockup Screen"
              fill
              className="object-cover"
              sizes="(max-width: 640px) 180px, 220px"
              priority
            />
          </div>
        ) : (
          <div className="relative w-[180px] sm:w-[220px] h-[280px] sm:h-[340px] rounded-[24px] border-[5px] sm:border-[6px] border-white/95 shadow-[0_20px_40px_rgba(99,48,214,0.1)] bg-[#FAF8FC] overflow-hidden flex items-center justify-center p-6">
            <Image
              src={centerImage}
              alt="Central logo panel"
              width={160}
              height={160}
              className="object-contain max-h-[140px] w-auto motion-safe:animate-[pulse_6s_infinite]"
              priority
            />
          </div>
        )}
      </motion.div>

      {/* FLOATING GLASS CARDS — stagger in after center */}
      {glassCards.length > 0 && (
        <motion.div
          className="absolute inset-0 z-30 pointer-events-none"
          variants={glassCardStagger}
          initial="hidden"
          whileInView="visible"
          viewport={viewport}
        >
          {glassCards[0] && (
            <motion.div
              variants={activeCardVariant}
              className="absolute right-0 sm:right-[5%] top-[10%] pointer-events-auto"
              whileHover={{ y: -2, transition: { duration: 0.2, ease: [0.22, 1, 0.36, 1] } }}
            >
              <GlassInfoCard
                text={glassCards[0].text}
                icon={glassCards[0].icon}
                className="scale-90 sm:scale-100"
              />
            </motion.div>
          )}

          {glassCards[1] && (
            <motion.div
              variants={activeCardVariant}
              className="absolute left-0 sm:left-[5%] bottom-[10%] pointer-events-auto"
              whileHover={{ y: -2, transition: { duration: 0.2, ease: [0.22, 1, 0.36, 1] } }}
            >
              <GlassInfoCard
                text={glassCards[1].text}
                icon={glassCards[1].icon}
                className="scale-90 sm:scale-100"
              />
            </motion.div>
          )}

          {glassCards[2] && (
            <motion.div
              variants={activeCardVariant}
              className="absolute left-[5%] top-[45%] pointer-events-auto"
              whileHover={{ y: -2, transition: { duration: 0.2, ease: [0.22, 1, 0.36, 1] } }}
            >
              <GlassInfoCard
                text={glassCards[2].text}
                icon={glassCards[2].icon}
                className="scale-90 sm:scale-100"
              />
            </motion.div>
          )}
        </motion.div>
      )}
    </div>
  );
}
