"use client";
import React, { useEffect, useState } from "react";
import Image from "next/image";

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

const STORAGE_KEY = "preferredDesignHouse";

const pick_design_houseOptions = [
  {
    label: "Color coded crime",
    image: "/custom_product/design-house-thumb-ccc.png",
  },
  {
    label: "october",
    image: "/custom_product/design-house-thumb-october.png",
  },
  {
    label: "asaii",
    image: "/custom_product/design-house-thumb-asaii.png",
  },
];

export default function PreferredDesignHouses({
  updateState,
  jumpToNext,
  state,
}: Props) {
  const [selectedPDH, setSelectedPDH] = useState<string>(
    state?.pick_design_house || "",
  );
  const [isMorniMode, setIsMorniMode] = useState(false);

  useEffect(() => {
    const saved = localStorage.getItem(STORAGE_KEY);
    if (saved) {
      if (saved === "Let Decide Morni") {
        setIsMorniMode(true);
        setSelectedPDH("");
        updateState("pick_design_house", "");
      } else {
        setSelectedPDH(saved);
        setIsMorniMode(false);
        updateState("pick_design_house", saved);
      }
    }
  }, [updateState]);

  useEffect(() => {
    if (isMorniMode) {
      localStorage.setItem(STORAGE_KEY, "Let Decide Morni");
    } else if (selectedPDH) {
      localStorage.setItem(STORAGE_KEY, selectedPDH);
    } else {
      localStorage.removeItem(STORAGE_KEY);
    }
  }, [selectedPDH, isMorniMode]);

  const handleChange = (pick_design_house: string) => {
    setIsMorniMode(false);
    setSelectedPDH(pick_design_house);
    updateState("pick_design_house", pick_design_house);
  };

  const resetAndSetMorni = () => {
    setIsMorniMode(true);
    setSelectedPDH("");
    updateState("pick_design_house", "");
  };

  return (
    <div className="relative z-20">
      <div className="mx-auto flex w-full flex-col items-center justify-center gap-10 align-middle">
        <div className="mx-auto flex w-full flex-col items-center justify-center gap-2 text-center md:w-[50%]">
          <h2 className="font-light">
            We{"'"}ve selected a few{" "}
            <span className="font-medium">design houses</span> that resonate
            with your vision.
          </h2>
          <p className="text-sm font-light">
            Please pick the one you{"'"}d like to collaborate with for your
            custom piece.
          </p>
        </div>

        <div className="mx-auto mb-8 grid w-full grid-cols-2 items-center justify-center gap-4 align-bottom md:w-[75%] md:grid-cols-3">
          {pick_design_houseOptions.map(({ label, image }, index) => {
            const isSelected = selectedPDH === label;

            return (
              <label
                key={index}
                className={`cursor-pointer overflow-hidden border-1 bg-gray-100 text-center transition-all duration-300 ${
                  isSelected
                    ? "border-2 border-green-500 bg-white"
                    : "border-gray-950 hover:bg-white"
                }`}
              >
                <input
                  type="radio"
                  name="pick_design_house"
                  value={label}
                  checked={isSelected}
                  onChange={() => handleChange(label)}
                  className="sr-only"
                />
                <Image
                  src={image}
                  alt={label}
                  width={400}
                  height={400}
                  className="img-responsive"
                />
                <div className="flex w-full flex-col items-start justify-start border-t-1 p-4 text-xs/3 font-medium capitalize">
                  {label}
                </div>
              </label>
            );
          })}
        </div>

        <div className="flex w-full flex-col items-center justify-between md:w-[50%]">
          <button
            onClick={resetAndSetMorni}
            aria-label="Let MORNI decide"
            className={`flex w-full flex-col items-center justify-between border-1 border-dashed p-4 text-center transition-all duration-300 ${
              isMorniMode
                ? "border-2 border-green-500 bg-white"
                : "hover:bg-gray-100"
            }`}
          >
            <p className="text-xs font-light">Can{"'"}t pick an option?</p>
            <p className="font-medium uppercase">Let MORNI Decide</p>
          </button>
        </div>
      </div>
    </div>
  );
}