"use client";
import { getImageUrl } from "@/utils/imageHelper";
import Image from "next/image";
import { useEffect, useState } from "react";
import Cookies from "js-cookie";

export default function OrderVisionBoard({ vision_board_summary }: any) {
  const [userName, setUserName] = useState<string>("");
  const silhouetteItem = vision_board_summary.silhouette.length - 1;

  useEffect(() => {
    try {
      const userCookie = Cookies.get("getUser");
      if (userCookie) {
        const user = JSON.parse(userCookie);
        if (user.name) {
          // Take only the first part split by space, "-" or "_"
          const firstWord = user.name.split(/[\s-_]/)[0];
          setUserName(firstWord);
        }
      }
    } catch (err) {
      console.error("Failed to parse user cookie", err);
    }
  }, []);

  return (
    <div className="mob-noise flex aspect-9/16 flex-col bg-gray-100 p-2">
      <div className="relative flex h-full w-full flex-col items-center justify-center gap-0 border border-dashed p-4 align-middle">
        <div className="relative -top-[2vh] flex w-full flex-row items-end justify-end pr-2 md:-top-[2.5vh] md:pr-2">
          <div className="flex flex-row gap-1 border-b-1 pb-0 md:pb-1">
            <div className="font-bogart relative top-0.5 text-right capitalize md:top-2 md:text-lg/2">
              {userName ? `${userName}'s` : ""}
            </div>
            <div className="w-20 md:w-24">
              <Image
                src="/images/morni-logo-black.svg"
                alt="Morni Logo"
                width={90}
                height={18}
                className="img-reponsive"
              />
            </div>
          </div>
        </div>
        <div className="relative mx-auto grid w-3/4 grid-cols-2 gap-2 pt-8 md:pt-20">
          <div className="relative top-4 -left-8 mx-auto flex w-3/4 flex-col gap-1 md:-left-[30%]">
            <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">
              <Image
                src={
                  getImageUrl(vision_board_summary?.fabric?.[0]?.image) ||
                  "/custom_product/fabric-pref-banana.png"
                }
                alt={vision_board_summary?.fabric?.[0]?.fabric_name || "Fabric"}
                crossOrigin="anonymous"
                className="img-reponsive -rotate-6"
                width={400}
                height={400}
              />
              {Array.isArray(vision_board_summary?.fabric) &&
                vision_board_summary.fabric.length > 1 && (
                  <div className="absolute -top-2.5 -right-3 z-60 flex h-5 w-5 flex-col items-center justify-center rounded-full border-1 border-dashed bg-white align-middle text-gray-950">
                    <span className="text-[10px]/3 font-medium">
                      +{vision_board_summary.fabric.length}
                    </span>
                  </div>
                )}
            </div>
            <div className="flex items-center justify-center align-middle text-[10px]/2">
              {vision_board_summary?.fabric?.[0]?.fabric_name || "Fabric"}
            </div>
          </div>
          <div className="relative -top-4 -left-8 mx-auto flex w-3/4 flex-col gap-1 md:-top-8">
            <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 border border-dashed p-2">
              <Image
                src={
                  getImageUrl(vision_board_summary?.art_data?.[0]?.preview) ||
                  "/custom_product/fabric-pref-banana.png"
                }
                alt={vision_board_summary?.art_data?.[0]?.name || "Fabric"}
                width={400}
                height={400}
                crossOrigin="anonymous"
                className="img-reponsive -rotate-6"
              />
              {Array.isArray(vision_board_summary?.art_data) &&
                vision_board_summary.art_data.length > 1 && (
                  <div className="absolute -top-2.5 -right-3 z-60 flex h-5 w-5 flex-col items-center justify-center rounded-full border-1 border-dashed bg-white align-middle text-gray-950">
                    <span className="text-[10px]/3 font-medium">
                      +{vision_board_summary.art_data.length}
                    </span>
                  </div>
                )}
            </div>
            <div className="flex w-full items-center justify-center text-center align-middle text-[10px]/2">
              {vision_board_summary?.art_data?.[0]?.name || "ARTWORK"}
            </div>
          </div>
        </div>
        <div className="mx-auto grid w-full grid-cols-9 items-center justify-between gap-4 pt-0 align-middle md:pt-8">
          <div className="relative -top-4 left-2 col-span-2 w-full border border-dashed p-0 md:top-0 md: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">
              {Array.isArray(vision_board_summary.vibe)
                ? vision_board_summary.vibe.map((v: any) => v.name).join(", ")
                : "N/A"}
            </div>
          </div>
          <div className="col-span-5">
            <div className="grid grid-cols-5">
              <div className="relative 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-[4vh] text-center text-xs leading-tight font-light capitalize md:px-3 md:text-sm/4">
                      {Array.isArray(vision_board_summary.silhouette) &&
                      vision_board_summary.silhouette.length > 0
                        ? vision_board_summary.silhouette
                            .slice(1)
                            .map((s: any) => s?.silhouette.silhouette_name)
                            .filter(Boolean)
                            .join(", ")
                        : "N/A"}
                    </div>
                  </div>
                </div>
              </div>
              <div className="relative col-span-4 flex h-[24vh] w-full flex-row items-center justify-center align-middle md:h-[24vh]">
                <div
                  className={`grid h-full items-center justify-center align-middle ${
                    silhouetteItem === 1 ? "grid-cols-1" : "grid-cols-2"
                  }`}
                >
                  {Array.isArray(vision_board_summary.silhouette) &&
                    vision_board_summary.silhouette
                      .slice(1)
                      .map((sih: any, index: number) => (
                        <div
                          key={index}
                          className="items-top relative flex h-full w-full justify-center align-middle not-first:rotate-4 last:items-end"
                        >
                          {silhouetteItem === 1 ? (
                            <div className="flex h-full items-center justify-center px-4 align-middle">
                              <Image
                                src={
                                  getImageUrl(
                                    sih?.silhouette?.silhouette_image,
                                  ) ||
                                  "/custom_product/icon-category-dresses.png"
                                }
                                alt="silhouette"
                                width={400}
                                height={400}
                                crossOrigin="anonymous"
                                className="img-responsive"
                              />
                            </div>
                          ) : (
                            <div className="">
                              <Image
                                src={
                                  getImageUrl(
                                    sih?.silhouette?.silhouette_image,
                                  ) ||
                                  "/custom_product/icon-category-dresses.png"
                                }
                                alt="silhouette"
                                width={400}
                                height={400}
                                crossOrigin="anonymous"
                                className="img-responsive"
                              />
                            </div>
                          )}
                        </div>
                      ))}
                </div>
              </div>
            </div>
          </div>
          <div className="col-span-2">
            <div className="relative -top-[5vh] flex flex-col gap-4 md:gap-8">
              <div className="relative flex flex-col gap-1">
                <div className="font-macropolo text-sm/3 font-light -tracking-wide capitalize md:text-base/3">
                  Technique
                </div>
                <div className="flex flex-col gap-1 border border-dashed p-0 md:p-1">
                  <div>
                    <Image
                      src={
                        getImageUrl(
                          vision_board_summary?.technique_family?.[0]?.image,
                        ) || "/custom_product/fabric-pref-banana.png"
                      }
                      alt={
                        vision_board_summary?.technique_family?.[0]?.name ||
                        "N/A"
                      }
                      width={400}
                      height={400}
                      crossOrigin="anonymous"
                      className="img-reponsive -rotate-6"
                    />
                  </div>
                  {Array.isArray(vision_board_summary?.technique_family) &&
                    vision_board_summary.technique_family.length > 1 && (
                      <div className="absolute -top-2.5 -right-3 z-60 flex h-5 w-5 flex-col items-center justify-center rounded-full border-1 border-dashed bg-white align-middle text-gray-950">
                        <span className="text-[10px]/3 font-medium">
                          +{vision_board_summary.technique_family.length}
                        </span>
                      </div>
                    )}
                </div>
                <div className="flex w-full items-center justify-center text-center align-middle text-[10px]/2">
                  {vision_board_summary?.technique_family?.[0]?.category_name ||
                    "N/A"}
                </div>
              </div>
              <div className="relative flex flex-col gap-1">
                <div className="relative flex flex-col gap-1 border border-dashed p-0 md:p-1">
                  <div>
                    <Image
                      src={
                        getImageUrl(vision_board_summary?.prominence?.image) ||
                        "/custom_product/fabric-pref-banana.png"
                      }
                      alt={vision_board_summary?.prominence?.name || "Fabric"}
                      width={400}
                      height={400}
                      crossOrigin="anonymous"
                      className="img-reponsive -rotate-6"
                    />
                  </div>
                </div>
                <div className="flex w-full items-center justify-center text-center align-middle text-[10px]/2">
                  {vision_board_summary?.prominence?.name || "N/A"}
                </div>
                <div className="font-macropolo text-sm/3 font-light -tracking-wide capitalize md:text-base/3">
                  Artwork
                  <br />
                  Prominence
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="mx-auto grid w-full grid-cols-6 gap-10 pt-0 md:w-4/5 md:pt-4">
          <div className="relative col-span-2">
            <div className="ml-[4%] 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: vision_board_summary?.color || "#ffaa00",
                      mixBlendMode: "multiply",
                      opacity: 0.88,
                    }}
                  ></div>
                </div>
              </div>
            </div>
            <div className="font-macropolo absolute bottom-4 -left-[4.5vw] w-[20vw] text-sm/3 font-light -tracking-wide capitalize md:left-0 md:text-base/3">
              Fabric Color
            </div>
          </div>
          <div className="col-span-4 pt-2 md:pt-20">
            <div className="font-macropolo relative -top-1 -left-1 text-sm/3 font-light -tracking-wide capitalize 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">
               {vision_board_summary?.piece_imagine || "None"}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}