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


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

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

export default function ArtworkTechniqueChild({
  updateState,
  jumpToNext,
  state,
}: Props) {
  const [isMorniMode, setIsMorniMode] = useState(false);
  const [hoveredItem, setHoveredItem] = useState<TechniqueProps | null>(null);
  const [techniqueData, setTechniqueData] = useState<TechniqueProps[]>([]);
  const [selectedIds, setSelectedIds] = useState<number[]>(() => {
    if (typeof window === "undefined") return [];
    try {
      const saved = localStorage.getItem(STORAGE_KEY);
      if (saved === MORNI_VALUE) return [];
      const parsed = JSON.parse(saved || "");
      return Array.isArray(parsed) ? parsed.map(Number) : [];
    } catch {
      return [];
    }
  });


  useEffect(() => {
    if (typeof window !== "undefined") {
      const saved = localStorage.getItem(STORAGE_KEY);
      if (saved === MORNI_VALUE) {
        setIsMorniMode(true);
        setSelectedIds([]);
      }
    }
  }, []);

  // Keep localStorage synced
  useEffect(() => {
    if (isMorniMode) {
      localStorage.setItem(STORAGE_KEY, MORNI_VALUE);
    } else {
      localStorage.setItem(STORAGE_KEY, JSON.stringify(selectedIds));
    }
  }, [selectedIds, isMorniMode]);


  const toggleCheckbox = (id: number) => {
    setIsMorniMode(false);
    setSelectedIds((prev) =>
      prev.includes(id)
        ? prev.filter((item) => item !== id)
        : prev.length < limit
        ? [...prev, id]
        : prev
    );
    localStorage.setItem(STORAGE_KEY, JSON.stringify([id]));
  };


  useEffect(() => {
    async function fetchTechniques() {
      try {
        const techniqueCategory = localStorage.getItem("technique_category");
        if (!techniqueCategory) return;

        const res = await fetch(
          `${process.env.API_BASE_URL}/co-creation/technique?t_category_id=${techniqueCategory}`
        );
        const data = await res.json();

        if (Array.isArray(data.data)) {
          setTechniqueData(
            data.data.map((d: any) => ({
              ...d,
              id: Number(d.id),
            }))
          );
        }
      } catch (error) {
        console.error("Technique fetch failed:", error);
      }
    }

    fetchTechniques();
  }, []);

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

  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-2 text-center md:w-[50%]">
          <h2 className="vision">
            What <span className="font-medium">technique(s)</span> should we use
            to create your artwork?
          </h2>
          <p className="text-sm font-light">
            You can select up to {limit} options
          </p>
        </div>

        <div className="cc-vision-wrap">
          <div className="ccvision-scrollcontent mt-4">
            <div className="gridItems col4">
              {techniqueData.map((item) => (
                <div
                  key={`${item.id}-${item.label}`}
                  className="technique-animbox relative overflow-hidden transition-all duration-100"
                >
                  <TechniqueCheckboxCard
                    lookDisplay="boxLook"
                    item={{ ...item, id: Number(item.id) }}
                    isChecked={selectedIds.includes(Number(item.id))}
                    onToggle={toggleCheckbox}
                    onHover={setHoveredItem}
                    disabled={
                      selectedIds.length >= limit &&
                      !selectedIds.includes(Number(item.id))
                    }
                  />

                  <div className="description-box 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">
                      <p className="text-center text-sm capitalize font-medium">
                        {item.label}
                      </p>
                      <p className="text-xs/3 line-clamp-4 md:line-clamp-8">
                        {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>
    </>
  );
}