"use client";
import Image from "next/image";
import { motion, useInView, Variants } from "framer-motion";
import { useRef, useMemo } from "react";
import { AWS_CDN_URL } from "@/utils/staticValues";

interface Silhouette {
  silhouette_id: string | number;
  silhouette_name: string;
  silhouette_image: string;
}

interface VisionBoardSilhouetteItem {
  silhouette: Silhouette | null;
}

interface VisionBoard {
  fabric: { image: string; fabric_name: string }[];
  art_data: { id: string | number; preview?: string }[];
  vibe: { name: string }[];
  technique_family: {
    id: string | number;
    image?: string;
    category_name: string;
  }[];
  silhouette: VisionBoardSilhouetteItem[];
  color?: string;
  piece_imagine?: string;
}

export default function StoryVisionBoard({
  visionBoard,
}: {
  visionBoard: VisionBoard;
}) {
  // Initialize all hooks first (React rules)
  const fabricRef = useRef<HTMLDivElement>(null);
  const fabricInView = useInView(fabricRef, { once: false });

  const highlightRef = useRef<HTMLDivElement>(null);
  const highlightInView = useInView(highlightRef, { once: false });

  const vibeRef = useRef<HTMLDivElement>(null);
  const vibeInView = useInView(vibeRef, { once: false });

  const silhouetteRef = useRef<HTMLDivElement>(null);
  const silhouetteView = useInView(silhouetteRef, { once: false });

  const techniqueRef = useRef<HTMLDivElement>(null);
  const techniqueInView = useInView(techniqueRef, { once: false });

  const artworkRef = useRef<HTMLDivElement>(null);
  const artworkInView = useInView(artworkRef, { once: false });

  const colorRef = useRef<HTMLDivElement>(null);
  const colorInView = useInView(colorRef, { once: false });

  const noteRef = useRef<HTMLDivElement>(null);
  const noteInView = useInView(noteRef, { once: false });

  // Check if visionBoard has required data AFTER all hooks are initialized
  if (
    !visionBoard ||
    !visionBoard.fabric ||
    !Array.isArray(visionBoard.fabric) ||
    visionBoard.fabric.length === 0 ||
    !visionBoard.art_data ||
    !visionBoard.vibe ||
    !visionBoard.technique_family ||
    !visionBoard.silhouette ||
    !Array.isArray(visionBoard.silhouette) ||
    visionBoard.silhouette.length === 0
  ) {
    return null;
  }

  /* ================= SILHOUETTE LOGIC ================= */

  const displaySilhouettes = useMemo(() => {
    const raw = visionBoard.silhouette ?? [];

    const unique = Array.from(
      new Map(
        raw
          .filter((s) => s?.silhouette?.silhouette_id)
          .map((s) => [s.silhouette!.silhouette_id, s]),
      ).values(),
    );

    return unique.slice(0, 2);
  }, [visionBoard.silhouette]);

  const fadeInUp: Variants = {
    hidden: { opacity: 0, y: "-400%" },
    visible: {
      opacity: 1,
      y: 0,
      transition: { duration: 1.5, ease: "linear" as const },
    },
  };

  const fadeInLeftTop: Variants = {
    hidden: { opacity: 0, x: "-40%", y: "-40%" },
    visible: {
      opacity: 1,
      x: 0,
      y: 0,
      transition: { duration: 0.8, ease: "easeOut" as const },
    },
  };
  const fadeInLeft: Variants = {
    hidden: { opacity: 0, x: "-40%" },
    visible: {
      opacity: 1,
      x: 0,
      transition: { duration: 0.8, ease: "easeOut" as const },
    },
  };

  const fadeInRightTop: Variants = {
    hidden: { opacity: 0, x: "100%", y: "-100%" },
    visible: {
      opacity: 1,
      x: 0,
      y: 0,
      transition: { duration: 1, ease: "easeOut" as const },
    },
  };
  const fadeInRight: Variants = {
    hidden: { opacity: 0, x: "100%" },
    visible: {
      opacity: 1,
      x: 0,
      transition: { duration: 1, ease: "linear" as const },
    },
  };
  const visionInRightTop: Variants = {
    hidden: { opacity: 0, x: "50%", y: "0" },
    visible: {
      opacity: 1,
      x: 0,
      y: 0,
      transition: { duration: 1, ease: "easeOut" as const },
    },
  };
  const fadeInScale: Variants = {
    hidden: { opacity: 0, scale: 0.5 },
    visible: {
      opacity: 1,
      scale: 1,
      transition: { duration: 1, ease: "linear" as const },
    },
  };

  return (
    <div className="relative top-8 z-2 h-[92%] w-full">
      {/* Fabric Section */}
      <motion.div
        ref={fabricRef}
        variants={fadeInLeft}
        initial="hidden"
        animate={fabricInView ? "visible" : "hidden"}
        className="absolute left-[6%] mx-auto flex w-[25%] flex-col gap-1"
      >
        <div className="font-macropolo absolute -top-4.5 -left-0.5 text-sm/3 font-light -tracking-wide capitalize md:text-base/3">
          Fabric
        </div>
        <div className="relative border border-dashed p-2 md:p-3">
          <div className="rotate-6 bg-gray-100">
            <div className="border border-gray-950/50">
              <Image
                src={`${AWS_CDN_URL}/${visionBoard.fabric[0].image}`}
                alt="Fabric hemp white"
                crossOrigin="anonymous"
                className="img-reponsive"
                width={400}
                height={400}
              />
            </div>
          </div>
        </div>
        <div className="line-clamp-2 flex items-center justify-center text-center align-middle text-[10px]/2 capitalize">
          <span className="line-clamp-2">
            {visionBoard && visionBoard.fabric[0]?.fabric_name}
          </span>
        </div>
      </motion.div>
      <motion.div
        ref={highlightRef}
        variants={fadeInRight}
        initial="hidden"
        animate={highlightInView ? "visible" : "hidden"}
        className="absolute top-[6%] right-[16%] flex w-[44%] flex-col"
      >
        <div className="font-macropolo absolute -top-5 left-0 w-[20vh] text-sm/3 font-light -tracking-wide capitalize md:text-base/3">
          Highlight Artwork
        </div>
        <div className="relative flex w-full flex-row gap-1 border border-dashed p-2">
          {visionBoard?.art_data?.length > 0 ? (
            visionBoard.art_data.map((art_data: any) => (
              <div key={art_data.id}>
                <div className="flex max-h-20 overflow-hidden">
                  {art_data?.preview && (
                    <Image
                      src={`${AWS_CDN_URL}/${art_data.preview}`}
                      alt="artwork"
                      width={400}
                      height={400}
                      crossOrigin="anonymous"
                      className="object-contain"
                    />
                  )}
                </div>
              </div>
            ))
          ) : (
            <div className="flex h-20 w-full items-center justify-center text-center text-[10px]/2">
              Not specified
            </div>
          )}
        </div>
      </motion.div>

      <motion.div
        ref={vibeRef}
        variants={fadeInLeft}
        initial="hidden"
        animate={vibeInView ? "visible" : "hidden"}
        className="absolute top-[44%] left-[1%] w-[25%] border border-dashed p-1"
      >
        <div className="font-macropolo absolute -top-4.5 -left-0.5 text-sm/3 font-light -tracking-wide capitalize md:text-base/3">
          Vibe
        </div>
        <div className="flex flex-col items-center justify-center p-1 text-center align-middle text-[10px]/2">
          {visionBoard.vibe.map((v: any) => v.name).join(", ")}
        </div>
      </motion.div>

      <motion.div
        ref={silhouetteRef}
        variants={fadeInScale}
        initial="hidden"
        animate={silhouetteView ? "visible" : "hidden"}
        style={{ transformOrigin: "center center" }}
        className="absolute top-[36%] left-[28%] grid w-[90%] grid-cols-9 items-center justify-between gap-1 align-middle"
      >
        <div className="relative -top-[12%] col-span-1">
          <div className="relative flex h-full w-full items-center justify-center overflow-visible">
            <div className="absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 rotate-[-90deg]">
              <div className="font-bogart line-clamp-2 max-h-[5vh] w-[25vh] overflow-hidden px-6 text-center text-xs leading-tight font-light capitalize md:px-3 md:text-sm/4">
                {displaySilhouettes
                  .map((v) => v.silhouette?.silhouette_name)
                  .filter(Boolean)
                  .join(", ")}
              </div>
            </div>
          </div>
        </div>
        <div className="col-span-4">
          <div className="vBSilhouetteWrapper relative -left-2 flex h-[20vh] w-full flex-col items-center justify-center align-middle md:h-[30vh]">
            {displaySilhouettes.length > 0 ? (
              displaySilhouettes.map((s, index) => {
                const sil = s.silhouette!;
                const imageUrl = `${AWS_CDN_URL}/${sil.silhouette_image}`;

                // 🎯 Position logic
                let positionClass = "";

                if (displaySilhouettes.length === 2) {
                  positionClass =
                    index === 0 ? "left-0 top-4 -rotate-6" : "right-0 bottom-4 rotate-6";
                } else {
                  // single item center/full
                  positionClass =
                    "left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[90%]";
                }

                return (
                  <div
                    key={`silhouette-${sil.silhouette_id}-${index}`}
                    className={`absolute ${positionClass} ${
                      displaySilhouettes.length === 2 ? "w-1/2 md:w-[48%]" : ""
                    }`}
                  >
                    <Image
                      src={imageUrl}
                      alt={sil.silhouette_name}
                      width={600}
                      height={1000}
                      className="img-responsive"
                    />
                  </div>
                );
              })
            ) : (
              <span className="font-hasiant flex min-h-40 w-full items-center justify-center text-center align-middle text-6xl/4">
                Silhouette
              </span>
            )}
          </div>
        </div>
      </motion.div>

      <motion.div
        ref={techniqueRef}
        variants={fadeInRight}
        initial="hidden"
        animate={techniqueInView ? "visible" : "hidden"}
        className="absolute top-[44%] right-[2%] flex w-[20%] flex-col gap-1 md:top-[40%]"
      >
        <div className="font-macropolo absolute -top-[6vh] w-[20vh] text-sm/3 font-light -tracking-wide capitalize md:-bottom-[2.5vh] md:-left-1 md:inline-flex md:text-base/3">
          Technique
        </div>
        <div className="relative -mt-8 flex flex-col gap-1 border border-dashed p-0 md:p-2">
          {visionBoard?.technique_family?.length > 0 ? (
            visionBoard.technique_family
              .slice(0, 2)
              .map((technique: any) => (
                <div key={technique.id}>
                  {technique?.image && (
                    <Image
                      src={`${AWS_CDN_URL}/${technique.image}`}
                      alt="technique"
                      width={400}
                      height={400}
                      crossOrigin="anonymous"
                      className="img-reponsive"
                    />
                  )}
                </div>
              ))
          ) : (
            <div className="py-2 text-center text-[10px]/2">Not specified</div>
          )}
        </div>
        <div className="flex w-full items-center justify-center text-center align-middle text-[10px]/2">
          {visionBoard?.technique_family?.length > 0
            ? visionBoard.technique_family
                .map((t: any) => t.category_name)
                .join(", ")
            : ""}
        </div>
      </motion.div>

      <motion.div
        ref={colorRef}
        variants={fadeInLeft}
        initial="hidden"
        animate={colorInView ? "visible" : "hidden"}
        className="absolute bottom-[12%] left-[5%]"
      >
        {visionBoard?.color ? (
          <div className="relative h-20 w-20 border-1 border-dashed p-1 md:h-24 md:w-24">
            <div className="relative h-full w-full overflow-hidden">
              <div>
                <Image
                  src="/custom_product/bg-fabric-flower.png"
                  alt="Fabric Color"
                  width={200}
                  height={200}
                  crossOrigin="anonymous"
                  className="img-responsive"
                />
              </div>
              <div className="absolute top-[8.5%] left-[7.5%] isolate z-10 h-[94%] w-[95%]">
                <div
                  className="icon-cc-fabric-flower h-[100%] w-[100%]"
                  style={{
                    backgroundColor: visionBoard.color,
                    mixBlendMode: "multiply",
                    opacity: 0.88,
                  }}
                />
              </div>
            </div>
          </div>
        ) : (
          <div className="flex h-20 w-20 items-center justify-center border border-dashed text-center text-[10px]/2 md:h-24 md:w-24">
            Not specified
          </div>
        )}

        <div className="font-macropolo absolute -bottom-4 left-0 w-[20vw] text-sm/3 font-light -tracking-wide capitalize md:left-0 md:text-base/3">
          Color
        </div>
      </motion.div>
      <motion.div
        ref={noteRef}
        variants={visionInRightTop}
        initial="hidden"
        animate={noteInView ? "visible" : "hidden"}
        className="absolute right-[10%] bottom-[5%] w-[52%] md:right-[16%] md:w-[48%]"
      >
        <div className="font-macropolo relative -top-1 -left-1 hidden text-sm/3 font-light -tracking-wide capitalize md:flex md:text-base/3">
          where do you want to wear this ?
        </div>
        <div className="flex w-full flex-col items-center justify-center border-1 border-dashed p-2 text-center align-middle text-[10px]/2.5 font-light -tracking-wider">
          <span className="line-clamp-3">
            {visionBoard?.piece_imagine?.trim()
              ? visionBoard.piece_imagine
              : "Not specified"}
          </span>
        </div>
      </motion.div>
    </div>
  );
}