"use client";
import { useEffect, useState } from "react";
import TechniqueCheckboxCard from "./../TechniqueCheckboxCard";
import { TechniqueProps } from "./../data/techniqueTypes";
import { getUserSessionId } from "@/utils/helper";

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

const limit = 3;
const STORAGE_KEY = "technique_category";
const MORNI_VALUE = "Let Decide Morni";

export default function ArtworkTechnique({
  updateState = () => {},
  setIsStepValid,
  jumpToNext,
  state,
}: Props) {
  const [isMorniMode, setIsMorniMode] = useState(false);
  const [hoveredItem, setHoveredItem] = useState<TechniqueProps | null>(null);
  const [techniqueFamilyData, setTechniqueFamilyData] = useState<
    TechniqueProps[]
  >([]);
  const [selectedIds, setSelectedIds] = useState<number[]>([]);


  const toggleCheckbox = (id: number) => {
    setIsMorniMode(false);
    setSelectedIds((prev) => {
      const newSelectedIds = prev.includes(id)
        ? prev.filter((item) => item !== id)
        : prev.length < limit
          ? [...prev, id]
          : prev;

      localStorage.setItem(STORAGE_KEY, JSON.stringify(newSelectedIds));
      console.log("Selected IDs:", newSelectedIds);
      return newSelectedIds;
    });
  };


  useEffect(() => {
    async function fetchTechniques() {
      try {
        const res = await fetch(
          `${process.env.NEXT_PUBLIC_API_BASE_URL}/co-creation/technique-category?session_id=${getUserSessionId()}`,
        );
        const data = await res.json();

        if (Array.isArray(data.data)) {
          const normalized: TechniqueProps[] = data.data.map((t: any) => ({
            ...t,
            id: Number(t.id),
          }));

          setTechniqueFamilyData(normalized);

          if (Array.isArray(data.selected_tq)) {
            setSelectedIds(data.selected_tq.map((id: any) => Number(id)));
          }
        }
      } catch (error) {
        console.error("Fetch error:", error);
      }
    }

    fetchTechniques();
  }, []);

  const resetSelection = () => {
    setSelectedIds([]);
    setIsMorniMode(true);
    localStorage.setItem(STORAGE_KEY, MORNI_VALUE);
    jumpToNext();
  };

  console.log("selectedIds", selectedIds);


  const selectedItems = techniqueFamilyData.filter((item) =>
    selectedIds.includes(item.id),
  );
  const handleRemoveChip = (id: number) => {
    setSelectedIds((prev) => prev.filter((item) => item !== id));
  };

  return (
    <div className="gap:2 mx-auto flex w-full flex-col items-center justify-center align-middle">
      <div className="mx-auto flex w-full flex-col items-center justify-center gap-1 text-center md:gap-2">
        <h2 className="vision">
          What <span className="font-medium">craft families</span> should we use
          to create your artwork?
        </h2>
        <p className="text-xs/4 font-light md:text-sm">
          Select up to {limit} families (
          <span className="font-medium">
            {selectedIds.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.id)}
                  className="close-icon"
                >
                  <i className="icon-[iconamoon--close]" />
                </button>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="cc-vision-wrap">
        <div className="ccvision-scrollcontent mt-4">
          <div className="gridItems col4">
            {techniqueFamilyData.map((item) => (
              <div
                key={`${item.id}-${item.label}`}
                className="technique-animbox relative overflow-hidden transition-all duration-100"
              >
                <TechniqueCheckboxCard
                  lookDisplay="boxLook"
                  item={item}
                  isChecked={selectedIds.includes(item.id)}
                  onToggle={(id) => toggleCheckbox(id)}
                  onHover={(hovered) => setHoveredItem(hovered)}
                  disabled={
                    selectedIds.length >= limit &&
                    !selectedIds.includes(item.id)
                  }
                />
                <div className="description-box hidden md:flex absolute -bottom-[100%] w-full border-1 border-gray-950/50 bg-gray-100">
                  <div className="flex flex-col gap-2 p-4 font-light">
                    <div>
                      <p className="text-sm font-medium capitalize">
                      {item.label}
                    </p>
                    <p className="text-xs md:text-sm">+ ${item.price}</p>
                    </div>
                    <p className="line-clamp-3 text-xs/3">{item.description}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="ccBottomBtnWrap">
          <button
            type="button"
            onClick={resetSelection}
            className={`mt-4 flex w-full flex-col items-center justify-between border-1 border-dashed p-2 text-center transition-all duration-300 ${
              isMorniMode
                ? "border-2 border-green-500 bg-gray-100"
                : "hover:bg-gray-100"
            }`}
          >
            <p className="text-xs/4 font-light">Can{"'"}t pick an option?</p>
            <p className="text-base/4 font-medium uppercase">
              Let MORNI Decide
            </p>
          </button>
        </div>
      </div>
    </div>
  );
}