"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import CCPageBg from "@/app/components/coCreationJourney/pageBg";

const pathLinks = [
  {
    id: "journey_path_01",
    url: "/morni-guidance",
    title: "I'd like Guidance",
    subTitle: "Take me through a few questions to shape my design.",
  },
  {
    id: "journey_path_02",
    url: "/start-with-vision",
    title: "I have a Vision",
    subTitle: "I know what I want and I'm ready to share it.",
  },
  {
    id: "journey_path_03",
    url: "/inspired-by-morni",
    title: "Inspired by Morni",
    subTitle: "I love a Morni piece and want something in a similar spirit.",
  },
] as const;

const keysToRemove: string[] = [
  "DefineVibe",
  "genderExpression",
  "categoryName",
  "CategoryType",
  "categoryId",
  "CategorySingle",
  "subcategoryId",
  "silhouette",
  "categorySingleChild",
  "bottomSilhouetteId",
  "bottomCategoryId",
  "outwearCategoryId",
  "CategoryTwoPiece",
  "piece_imagine",
  "artworkPlacement",
  "CategoryTwoPiece",
  "CategoryThreePieceTop",
  "CategoryThreePieceBottom",
  "CategoryThreePieceVest",
  "preferredColor",
  "fabricFamily",
  "preferredFabric",
  "artworkMode",
  "MorniPickPiece",
  "technique_category",
  "ImageData_ArtworkHighlight",
  "preferredFabric",
  "artworkMode",
  "MorniArtCollection",
  "artworkProminent",
  "artworkPlacement",
  "piece_imagine",
  "categoryBasic",
  "ImageData_visionReferenceImages",
  "shareReferenceNote",
  "DesribeVision",
  "more_inspiration_links",
];

export default function StartCoCreation() {
  const router = useRouter();
  const [selectedPathId, setSelectedPathId] = useState<string | null>(null);

  useEffect(() => {
    const storedId = localStorage.getItem("selectedPathId");
    if (storedId) {
      setSelectedPathId(storedId);
    }
  }, []);

  const handleSelect = (id: string, url: string) => {
    Object.keys(localStorage).forEach((key) => {
      if (keysToRemove.includes(key)) {
        localStorage.removeItem(key);
      }
    });

    setSelectedPathId(id);
    localStorage.setItem("selectedPathId", id);
    router.push(url); // Immediate redirect
  };

  const handleGoBack = () => {
    Object.keys(localStorage).forEach((key) => {
      if (keysToRemove.includes(key)) {
        localStorage.removeItem(key);
      }
    });

    router.push("/start-co-creation");
  };
  return (
    <>
      <CCPageBg />
      <div className="fixed top-0 left-0 z-60 h-full w-full">
        <div className="wrapper relative z-20">
          <div className="mx-auto flex h-lvh w-full flex-col items-center justify-center gap-8 align-middle">
            <div className="mx-auto flex w-full flex-col items-center justify-center gap-1 text-center md:w-[50%]">
              <h2 className="font-light">
                Which <span className="font-medium">path</span> best suits your{" "}
                <span className="font-medium">design</span> journey?
              </h2>
            </div>
            <div className="mx-auto flex w-full flex-col items-center justify-between gap-1 text-center text-sm md:w-1/2">
              <div className="relative flex w-full flex-col gap-2">
                {pathLinks.map((item) => {
                  const isSelected = selectedPathId === item.id;
                  return (
                    <div className="relative" key={item.id}>
                      <div className="absolute -top-1 left-[10%] z-30 flex h-2 w-8 flex-row items-center justify-center align-middle">
                        <span className="hairline inline-flex h-1.5 w-1.5 bg-gray-950"></span>
                        <span className="hairline inline-flex h-1.5 w-1.5 bg-gray-950"></span>
                      </div>
                      <div className="absolute top-[88%] -left-4 z-30 flex h-2 w-8 flex-row items-center justify-center align-middle">
                        <span className="hairline inline-flex h-1.5 w-1.5 bg-gray-950"></span>
                      </div>
                      <div className="absolute top-[30%] -right-4 z-30 flex h-2 w-8 flex-row items-center justify-center align-middle">
                        <span className="hairline inline-flex h-1.5 w-1.5 bg-gray-950"></span>
                      </div>
                      <div className="absolute -bottom-1 left-[60%] z-30 flex h-2 w-8 flex-row items-center justify-center align-middle">
                        <span className="hairline inline-flex h-1.5 w-1.5 bg-gray-950"></span>
                      </div>
                      <button
                        onClick={() => handleSelect(item.id, item.url)}
                        className={`relative z-20 flex w-full flex-col items-center justify-center gap-1 border-1 border-gray-950/50 bg-white/25 from-blue-600/50 via-green-200/80 to-yellow-200 p-8 text-center duration-300 hover:border-gray-950 hover:bg-white/50 hover:bg-gradient-to-tl md:p-10 ${
                          isSelected
                            ? "bg-gradient-to-tl from-blue-600/50 via-green-200/80 to-yellow-200 duration-300"
                            : "border-gray-950 bg-white/25 hover:bg-white/40"
                        }`}
                      >
                        <p className="font-bogart text-xl/6 font-light">
                          {item.title}
                        </p>
                        <p className="text-xs/3">{item.subTitle}</p>
                      </button>
                    </div>
                  );
                })}
              </div>

              <div className="ccBottomBtnWrap mt-4">
                <button
                  id="btn_login_back"
                  type="button"
                  className="btn-link"
                  onClick={handleGoBack}
                >
                  Go back
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}