"use client";
import { useEffect, useState } from "react";
import { TechniqueProps } from "./../data/techniqueTypes";
import FabricFamilyCheckboxCard from "../FabricFamilyCheckboxCard";
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 = 2;
const STORAGE_KEY = "fabricFamily";
const MORNI_VALUE = "Let Decide Morni";

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


  useEffect(() => {
    const isValid = isMorniMode || selectedIds.length > 0;
    setIsStepValid(isValid);

    if (isMorniMode) {
      localStorage.setItem(STORAGE_KEY, MORNI_VALUE);
      updateState("fabricFamily", MORNI_VALUE);
    } else {
      localStorage.setItem(STORAGE_KEY, JSON.stringify(selectedIds));
      updateState("fabricFamily", selectedIds);
    }
  }, [selectedIds, isMorniMode, setIsStepValid, updateState]);


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

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

  useEffect(() => {
    const fetchOptions = async () => {
      try {
        const response = await fetch(
          `${process.env.NEXT_PUBLIC_API_BASE_URL}/co-creation/fabric/family?session_id=${getUserSessionId()}`,
          {
            cache: "no-store",
          },
        );
        const data = await response.json();
        setFabricFamilyList(data.data.fabric || []);
        setIsMorniMode(data.data.is_morni_mode);
        setSelectedIds(data.data.selected_fabric || []);
      } catch (error) {
        console.error("Failed to fetch fabric families:", error);
      }
    };
    fetchOptions();
  }, []);

  const selectedItems = fabricFamilyList.filter((item) =>
    selectedIds.includes(item.id),
  );

  const handleRemoveChip = (id: number) => {
    setSelectedIds((prev) => prev.filter((item) => item !== id));
  };

  return (
    <div className="mx-auto flex w-full flex-col items-center justify-center gap-2 align-middle">
      <div className="mx-auto flex w-full flex-col items-center justify-center gap-1 text-center md:w-3/4 md:gap-2">
        <h2 className="vision">
          <span className="font-medium">Fabric</span> families of you{"'re"} drawn
          to?
        </h2>
        <p className="text-xs md:text-sm">
          Select up to {limit} (
          <span className="font-medium">
            {selectedIds.length}/{limit} selected
          </span>
          ).
        </p>

        <div
          className="h-9 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>{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">
          <div className="gridItems col4">
            {fabricFamilyList.length > 0 &&
              fabricFamilyList.map((item) => (
                <div
                  key={item.id}
                  className="technique-animbox relative overflow-hidden transition-all duration-100"
                >
                  <FabricFamilyCheckboxCard
                    lookDisplay="boxLook"
                    item={item}
                    isChecked={selectedIds.includes(item.id)}
                    onToggle={toggleCheckbox}
                    onHover={setHoveredItem}
                    disabled={
                      selectedIds.length >= limit &&
                      !selectedIds.includes(item.id)
                    }
                  />

                  <div className="description-box absolute hidden md:flex -bottom-[100%] w-full border-1 border-gray-950/50 bg-gray-100">
                    <div className="flex flex-col gap-2 p-4 font-light">
                      <p className="text-sm font-medium capitalize">
                        {item.label}
                      </p>
                      <p className="line-clamp-3 text-xs/4">
                        {item.description}
                      </p>
                    </div>
                  </div>
                </div>
              ))}
          </div>
        </div>

        <div className="ccBottomBtnWrap">
          <button
            type="button"
            onClick={resetSelection}
            className={`mt-2 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>
  );
}