"use client";

import React, { useEffect, useState } from "react";
import { useWizardContext } from "../wizardContext";
import type { StepComponentProps } from "../wizardTypes";

const options = [
  {
    id: 1,
    type: "artwork_highlight",
    title: "Upload your own",
    description: "Share your artwork, design or any idea",
  },
  {
    id: 2,
    type: "morni_art_collection",
    title: "Browse Morni's collection",
    description: "Choose from Morni library",
  },
] as const;

type ArtworkMode = (typeof options)[number]["type"];

export default function ChooseArtworkMode({
  onJump,
  jumpToStepId,
  setIsStepValid,
  activeGroupIdx,
  wizardDataGroupSteps,
}: StepComponentProps) {
  const { updateState } = useWizardContext();
  const [selectedType, setSelectedType] = useState<ArtworkMode | null>(null);

  useEffect(() => {
    if (!selectedType) return;

    const targetStepId =
      selectedType === "artwork_highlight"
        ? "artwork_highlight"
        : "morni_art_collection";

    const stepIdx = wizardDataGroupSteps.findIndex(
      (step) => step.id === targetStepId,
    );

    if (stepIdx !== -1 && typeof onJump === "function") {
      onJump(activeGroupIdx, stepIdx);
    } else {
      console.warn(`Could not find step: ${targetStepId}`);
    }
  }, [selectedType, onJump, activeGroupIdx, wizardDataGroupSteps]);

  useEffect(() => {
    setIsStepValid(!!selectedType);
  }, [selectedType, setIsStepValid]);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value as ArtworkMode;
    setSelectedType(value);
    updateState("artworkMode", value);
    if (typeof window !== "undefined") {
      localStorage.setItem("artworkMode", value);
    }
  };

  return (
    <div className="mx-auto flex w-full flex-col items-center justify-center gap-2 md:w-2/3">
      <div className="text-center">
        <h2 className="vision">
          How would you like to <span className="font-medium">share</span> your artwork?
        </h2>
      </div>

      <div className="mx-auto mt-8 flex w-full flex-col gap-4 md:w-[80%]">
        {options.map((option) => {
          const isSelected = selectedType === option.type;

          return (
            <label
              key={option.type}
              htmlFor={option.type}
              className="flex cursor-pointer flex-col items-center justify-center gap-2 border-1 border-gray-950/25 bg-gray-100/50 px-6 py-6 text-center transition-all duration-300 ease-in-out hover:border-gray-950 hover:bg-gray-100"
            >
              <div className="flex items-start gap-4">
                <input
                  id={option.type}
                  type="radio"
                  name="artworkMode"
                  value={option.type}
                  checked={isSelected}
                  onChange={handleChange}
                  className="sr-only"
                />
                <div>
                  <p className="font-bogart text-2xl font-light">
                    {option.title}
                  </p>
                  <p className="text-sm text-gray-600">{option.description}</p>
                </div>
              </div>
            </label>
          );
        })}
      </div>
    </div>
  );
}