"use client";
import React, { useEffect, useState } from "react";
import { FormInput, FormButton } from "@/app/components/form/forms";
import ValidatedNumberInput from "@/app/components/form/ValidatedNumberInput";
import type { StepComponentProps } from "../wizardTypes";
import { useSearchParams } from "next/navigation";
import { getApiClient } from "@/utils/apiClient";
import { getUserSessionId } from "@/utils/helper";

export default function AddMeasurement({ jumpToNext }: StepComponentProps) {
  const [saveHeight, setSaveHeight] = useState<number | null>(48);
  const [saveWeight, setsaveWeight] = useState<number | null>(40);
  const [someoneName, setSomeoneName] = useState("");
  const [forWhom, setForWhom] = useState("myself");
  const [radioGender, setRadioGender] = useState<string>("gender_for_man");
  const [radioFitType, setRadioFitType] = useState<string>("regular");

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

  useEffect(() => {
    if (typeof window !== "undefined") {
      const storedForWhom = localStorage.getItem("forWhom");
      const storedGender = localStorage.getItem("radioGender");
      const storedsomeoneName = localStorage.getItem("someoneName");
      const storedHeight = localStorage.getItem("saveHeight");
      const storedWeight = localStorage.getItem("saveWeight");
      const storedFitType = localStorage.getItem("radioFitType");

      if (storedForWhom) setForWhom(storedForWhom);
      if (storedGender) setRadioGender(storedGender);
      if (storedsomeoneName) setSomeoneName(storedsomeoneName);
      if (storedHeight) setSaveHeight(Number(storedHeight));
      if (storedWeight) setsaveWeight(Number(storedWeight));
      if (storedFitType) setRadioFitType(storedFitType);
    }
  }, []);

  const handleBasicMeasurement = (e: React.FormEvent) => {
    e.preventDefault();

    if (typeof window !== "undefined") {
      localStorage.setItem("forWhom", forWhom);
      localStorage.setItem("radioGender", radioGender);
      localStorage.setItem("someoneName", someoneName);
      localStorage.setItem(
        "saveHeight",
        saveHeight !== null ? saveHeight.toString() : "",
      );
      localStorage.setItem(
        "saveWeight",
        saveWeight !== null ? saveWeight.toString() : "",
      );
      localStorage.setItem("radioFitType", radioFitType);
    }

    console.log("Form submitted and values saved to local storage");
    jumpToNext?.();
  };

  const handleGenderChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const selectedGender = e.target.value;
    setRadioGender(selectedGender);
  };
 useEffect(() => {
     
      if (externalId) {
         fetchExternalWizardData(externalId);
      }
    }, [externalId]);
    
    const fetchExternalWizardData = async (id: string) => {
      try {
  
        const apiData = await getApiClient(`co-creation/wizard/${id}?session_id=${getUserSessionId()}`);
  
        if (apiData) {
          const measurementData =JSON.parse(apiData.measurement || "{}");
          console.log("Measurement Data:", measurementData);

          setForWhom(measurementData.for_whom);
          setRadioGender(measurementData.radio_gender || "");
          setSomeoneName(measurementData.someone_name || "");
          setSaveHeight(Number(measurementData.save_height));
          setsaveWeight(Number(measurementData.save_weight));
          setRadioFitType(measurementData.radio_fit_type || "");
         
        }
    
        console.log("Loaded external wizard data");
      } catch (error) {
        console.error("Failed to fetch wizard data:", error);
      }
    };
  return (
    <div className="mx-auto flex w-full flex-col items-center justify-center gap-8 md:w-[50%]">
      <div className="flex flex-col items-center gap-2 text-center">
        <h2 className="font-light">
          Help us understand your <span className="font-medium">body type</span>
        </h2>
      </div>

      <div className="cc-vision-wrap">
        <div className="ccvision-scrollcontent">
          <form
            onSubmit={handleBasicMeasurement}
            method="post"
            className="mx-auto flex w-full flex-col gap-4 md:w-1/2"
          >
            <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
              <div className="flex flex-col">
                <div>
                  <label className="flex cursor-pointer flex-row items-center gap-2 py-1 align-middle">
                    <input
                      name="fit_use_for"
                      type="radio"
                      checked={forWhom === "myself"}
                      onChange={() => setForWhom("myself")}
                      className="relative top-0.5 size-4 appearance-none rounded-full border-2 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:bg-gray-950"
                    />
                    <span className="relative pt-1 text-sm capitalize">
                      For me
                    </span>
                  </label>
                  <label className="flex cursor-pointer flex-row items-center gap-2 py-1 align-middle">
                    <input
                      name="fit_use_for"
                      type="radio"
                      checked={forWhom === "forother"}
                      onChange={() => setForWhom("forother")}
                      className="relative top-0.5 size-4 appearance-none rounded-full border-2 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:bg-gray-950"
                    />
                    <span className="relative pt-1 text-sm capitalize">
                      For someone
                    </span>
                  </label>
                </div>
                {forWhom === "forother" && (
                  <div className="w-full">
                    <FormInput
                      id="full_name"
                      label="Full name"
                      placeholder="full name"
                      value={someoneName}
                      onChange={(e) => setSomeoneName(e.target.value)}
                    />
                  </div>
                )}
              </div>
              <div className="flex flex-col">
                <label className="flex cursor-pointer flex-row items-center gap-2 py-1 align-middle">
                  <input
                    name="gender"
                    type="radio"
                    value="gender_for_man"
                    checked={radioGender === "gender_for_man"}
                    onChange={handleGenderChange}
                    className="relative top-0.5 size-4 appearance-none rounded-full border-2 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:bg-gray-950"
                  />
                  <span className="relative pt-1 text-sm capitalize">Man</span>
                </label>
                <label className="flex cursor-pointer flex-row items-center gap-2 py-1 align-middle">
                  <input
                    name="gender"
                    type="radio"
                    value="gender_for_woman"
                    checked={radioGender === "gender_for_woman"}
                    onChange={handleGenderChange}
                    className="relative top-0.5 size-4 appearance-none rounded-full border-2 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:bg-gray-950"
                  />
                  <span className="relative pt-1 text-sm capitalize">
                    Woman
                  </span>
                </label>
              </div>
              <div>
                <ValidatedNumberInput
                  id="measurement_height"
                  label="Height (in cm)"
                  placeholder="0"
                  min={135}
                  max={240}
                  value={saveHeight}
                  onValidChange={setSaveHeight}
                />
              </div>
              <div>
                <ValidatedNumberInput
                  id="measurement_weight"
                  label="Weight (in kg)"
                  placeholder="0"
                  min={30}
                  max={250}
                  value={saveWeight}
                  onValidChange={setsaveWeight}
                />
              </div>
              <div className="col-span-2 flex flex-col gap-2">
                <label htmlFor="" className="text-xs font-medium">
                  Type of Fit
                </label>
                <div className="flex flex-wrap gap-10 gap-y-2">
                  <label className="flex cursor-pointer flex-row items-center gap-2 py-1 align-middle">
                    <input
                      name="fit_type"
                      type="radio"
                      checked={radioFitType === "slim"}
                      onChange={() => setRadioFitType("slim")}
                      className="relative top-0.5 size-4 appearance-none rounded-full border-2 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:bg-gray-950"
                    />
                    <span className="relative pt-1 text-sm capitalize">
                      slim
                    </span>
                  </label>
                  <label className="flex cursor-pointer flex-row items-center gap-2 py-1 align-middle">
                    <input
                      name="fit_type"
                      type="radio"
                      checked={radioFitType === "regular"}
                      onChange={() => setRadioFitType("regular")}
                      className="relative top-0.5 size-4 appearance-none rounded-full border-2 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:bg-gray-950"
                    />
                    <span className="relative pt-1 text-sm capitalize">
                      Regular
                    </span>
                  </label>
                  <label className="flex cursor-pointer flex-row items-center gap-2 py-1 align-middle">
                    <input
                      name="fit_type"
                      type="radio"
                      checked={radioFitType === "oversized"}
                      onChange={() => setRadioFitType("oversized")}
                      className="relative top-0.5 size-4 appearance-none rounded-full border-2 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:bg-gray-950"
                    />
                    <span className="relative pt-1 text-sm capitalize">
                      Oversized
                    </span>
                  </label>
                </div>
              </div>
            </div>
            <div className="mx-auto mt-8 flex w-full">
              <FormButton
                id="btn_save_new_address"
                label="Continue"
                type="submit"
                color="gray"
                hairline="blue"
              />
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}