"use client";
import { useEffect, useState } from "react";
import TechniqueCheckboxCard from "./../TechniqueCheckboxCard";
import { getUserSessionId } from "@/utils/helper";
import { useSearchParams } from "next/navigation";

export interface FabricProps {
  id: number;
  label: string;
  image: string;
  description?: string;
  gsm?: string;
  finish?: string;
  artist_name?: string;
}

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

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

export default function PreferredFabric({
  updateState = () => {},
  setIsStepValid,
  jumpToNext,
  state,
}: Props) {
  const [isMorniMode, setIsMorniMode] = useState(false);
  const [fabricData, setFabricData] = useState<FabricProps[]>([]);
  const [selectedIds, setSelectedIds] = useState<number[]>([]);
  const [selectedFamilyName, setSelectedFamilyName] = useState<string | null>(
    null,
  );

  const searchParams = useSearchParams();
  const externalId = searchParams.get("external");

  useEffect(() => {
    async function fetchFabricData() {
      const silhouette = localStorage.getItem("silhouette");
      try {
        const res = await fetch(
          `${process.env.NEXT_PUBLIC_API_BASE_URL}/co-creation/fabric?silhouette=${silhouette}&category=${localStorage.getItem(
            "categoryId",
          )}&external=${externalId}&session_id=${getUserSessionId()}`,
        );
        const data = await res.json();

        if (Array.isArray(data.data)) {
          setFabricData(data.data);
          setIsMorniMode(Boolean(data.is_morni_mode));
          setSelectedIds(
            Array.isArray(data.selected_fabric)
              ? data.selected_fabric.map((id: number) => id)
              : [],
          );
          setSelectedFamilyName(data.family_name || null);
        }
      } catch (error) {
        console.error("Error fetching fabric data", error);
      }
    }

    if (externalId) fetchFabricData();
  }, [externalId]);

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

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

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

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

  const fabricIds = fabricData.map((f) => f.id);
  const missingIds = selectedIds.filter((id) => !fabricIds.includes(id));
  const fallbackFabrics: FabricProps[] = missingIds.map((id) => ({
    id,
    label: `Fabric #${id} (unavailable)`,
    image: "",
    description: "This fabric is no longer available.",
  }));

  const combinedFabrics = [...fabricData, ...fallbackFabrics];

  const selectedItems = selectedIds.map((id) => {
    const found = combinedFabrics.find((f) => f.id === id);
    return found || { id, label: `Fabric #${id}`, image: "" };
  });

  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">
          Choose your {selectedFamilyName}{" "}
          <span className="font-medium">preferred fabric</span>
        </h2>
        <p className="text-xs/4 font-light md:text-sm">
          Select up to {limit} fabrics (
          <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">
            {combinedFabrics.length > 0 ? (
              combinedFabrics.map((item) => (
                <div
                  key={item.id}
                  className="technique-animbox relative overflow-hidden transition-all duration-100"
                >
                  <TechniqueCheckboxCard
                    lookDisplay="boxLook"
                    item={{
                      id: item.id,
                      label: item.label,
                      image: item.image,
                      price: 0,
                    }}
                    isChecked={selectedIds.includes(item.id)}
                    onToggle={toggleCheckbox}
                    onHover={() => {}}
                    disabled={
                      selectedIds.length >= limit &&
                      !selectedIds.includes(item.id)
                    }
                  />
                </div>
              ))
            ) : (
              <div className="flex w-full items-center justify-center p-4">
                <p className="text-sm font-light">
                  No fabric options available at the moment.
                </p>
              </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>
  );
}