"use client";
import { useEffect, useState } from "react";
import TechniqueCheckboxCard from "./../TechniqueCheckboxCard";
import { TechniqueProps } from "./../data/techniqueTypes";
import { FormButton } from "@/app/components/form/forms";
import { getVibeData } from "./../data/vibeData";
import { useSearchParams } from "next/navigation";
import { getApiClient } from "@/utils/apiClient";
import { getUserSessionId } from "@/utils/helper";

interface Props {
  updateState: (key: string, value: any) => void;
  jumpToNext: () => void;
  state: { ItemList?: string };
  setIsStepValid: (valid: boolean) => void;
}

const STORAGE_KEY = "DefineVibe";
const limit = 3;

// Safe JSON parsing helper
const safeParseJSON = <T = any,>(raw: string | null, fallback: T): T => {
  try {
    return raw ? JSON.parse(raw) : fallback;
  } catch {
    console.warn("Invalid JSON data found, using fallback.");
    return fallback;
  }
};

export default function DefineVibe({
  updateState,
  jumpToNext,
  state,
  setIsStepValid,
}: Props) {
  const [selectedLabels, setSelectedLabels] = useState<string[]>(() => {
    if (typeof window === "undefined") return [];
    const stored = localStorage.getItem(STORAGE_KEY);
    return safeParseJSON<string[]>(stored, []);
  });

  const [vibeData, setVibeData] = useState<TechniqueProps[]>([]);
  const [loading, setLoading] = useState(true);
  const [hoveredItem, setHoveredItem] = useState<TechniqueProps | null>(null);
  const searchParams = useSearchParams();
  const externalId = searchParams.get("external");

  useEffect(() => {
    fetchVibeData();
  }, []);

  useEffect(() => {}, [externalId]);

  const fetchExternalWizardData = async (id: string) => {
    try {
      const apiData = await getApiClient(
        `co-creation/wizard/${id}?session_id=${getUserSessionId()}`,
      );

      if (apiData) {
        const vibeString = apiData.vibes || "";
        const vibeArray = vibeString
          .split(",")
          .map((v: string) => v.trim())
          .filter((v: string) => v !== "");
        localStorage.setItem(STORAGE_KEY, JSON.stringify(vibeArray));
        setSelectedLabels(vibeArray);
      }
    } catch (error) {
      console.error("Failed to fetch wizard data:", error);
    }
  };

  const fetchVibeData = async () => {
    try {
      const apiData = await getApiClient(
        `vibe2?session_id=${getUserSessionId()}`,
      );
      console.log("apiData", apiData);
      if (apiData) {
        setVibeData(apiData.vibe || []);
        setSelectedLabels(apiData.selected_vibes || []);
      }
    } catch (error) {
      console.error("Failed to fetch wizard data:", error);
    }
  };

  useEffect(() => {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(selectedLabels));
  }, [selectedLabels]);

  useEffect(() => {
    const isValid = selectedLabels.filter((v) => v.trim() !== "").length > 0;
    setIsStepValid(isValid);
  }, [selectedLabels, setIsStepValid]);

  const toggleSelection = (label: string) => {
    const trimmedLabel = label.trim();
    if (!trimmedLabel) return;

    setSelectedLabels((prev: string[]) => {
      const cleanPrev = prev.filter((l) => l.trim() !== "");
      return cleanPrev.includes(trimmedLabel)
        ? cleanPrev.filter((l) => l !== trimmedLabel)
        : cleanPrev.length < limit
          ? [...cleanPrev, trimmedLabel]
          : cleanPrev;
    });
  };

  const isDisabled = (label: string) =>
    selectedLabels.length >= limit && !selectedLabels.includes(label);

  const selectedItems = vibeData.filter((item) =>
    selectedLabels.includes(item.label),
  );

  const handleRemoveChip = (label: string) => {
    setSelectedLabels((prev: string[]) =>
      prev.filter((item) => item !== label),
    );
  };

  return (
    <>
      <div className="mx-auto flex w-full flex-col items-center justify-center text-center md:w-3/4">
        <h2 className="vision">
          Define the <span className="font-medium">vibe</span> of piece
        </h2>
        <p className="text-xs/4 font-light md:text-sm">
          <span className="hidden md:inline-flex">Describe the overall style or intention behind your piece? </span>Select upto{" "}
          {limit} vibes (
          <span className="font-medium">
            {selectedLabels.length}/{limit} selected
          </span>
          ).
        </p>
        <div
          className="h-10 w-full overflow-x-auto overflow-y-hidden py-1"
          style={{
            WebkitOverflowScrolling: "touch",
          }}
        >
          <div className="flex min-w-max flex-nowrap items-center justify-center gap-1">
            {selectedItems.map((item) => (
              <div key={item.id} className="closeable-chip">
                <span className="chip-label">{item.label}</span>
                <button
                  onClick={() => handleRemoveChip(item.label)}
                  className="close-icon"
                >
                  <i className="icon-[iconamoon--close]" />
                </button>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div className="cc-vision-wrap">
        <div className="ccvision-scrollcontent">
          <div className="bottomAlign grid grid-cols-3 gap-2 md:grid-cols-6 md:gap-12">
            {vibeData.length > 0 &&
              vibeData.map((item) => (
                <div
                  key={item.id}
                  className="technique-animbox relative overflow-hidden transition-all duration-100"
                >
                  <TechniqueCheckboxCard
                    hasBorder={false}
                    item={item}
                    isChecked={selectedLabels.includes(item.label)}
                    onToggle={() => toggleSelection(item.label)}
                    onHover={setHoveredItem}
                    disabled={isDisabled(item.label)}
                  />
                </div>
              ))}
          </div>
        </div>

        <div className="ccBottomBtnWrap">
          <FormButton
            id="btn_cc_save-preferred_color"
            label="Continue"
            type="submit"
            color="gray"
            hairline="blue"
            onClick={jumpToNext}
            disabled={
              !Array.isArray(selectedLabels) ||
              selectedLabels.filter((v) => v.trim() !== "").length === 0
            }
          />
        </div>
      </div>
    </>
  );
}