"use client";
import { InputNumberOnly, FormButton } from "@/app/components/form/forms";
import ValidatedNumberInput from "../form/ValidatedNumberInput";
import { useState, Suspense, lazy, useEffect } from "react";
import { FormInput } from "@/app/components/form/forms";
import Cookies from "js-cookie";
import { saveMeasurement, updateMeasurement } from "@/app/actions/measurement";
import { toast } from "react-toastify";

interface MeasurementPayload {
  for_whom: string;
  name: string;
  measurement_type: "men" | "women";
  measurement_data: Record<string, number | null>;
}

const VideoPlayer = lazy(() => import("./VideoPlayer"));

export default function AddMeasurement({
  onClose,
  initialData = null,
}: {
  onClose: () => void;
  initialData?: {
    measurement_id: string;
    for_whom: string;
    name: string;
    measurement_type: "men" | "women";
    measurement_data: Record<string, number | null>;
  } | null;
}) {
  const [saveHeight, setSaveHeight] = useState<number | null>(120);
  const [saveWeight, setsaveWeight] = useState<number | null>(40);
  const [fullName, setFullName] = useState("");
  const [forWhom, setForWhom] = useState("myself");
  const [radioGender, setRadioGender] = useState<string>("gender_for_men");
  const [measurementData, setMeasurementData] = useState<
    Record<string, number>
  >({});
  const isEditing = !!initialData;

  const handleMeasurementChange = (label: string, value: number) => {
    const key = label
      .toLowerCase()
      .replace(/\s+/g, "_")
      .replace(/[^\w_]/g, "");
    setMeasurementData((prev) => ({ ...prev, [key]: value }));
  };

  useEffect(() => {
  const userCookie = Cookies.get("getUser");

  if (userCookie && !initialData) {
    try {
      const user = JSON.parse(userCookie);

      if (user.name) {
        setFullName(sanitizeFullName(user.name));
      }

      if (user.gender) {
        const g = user.gender.toLowerCase();

        if (g === "male" || g === "men") {
          setRadioGender("gender_for_men");
        } else if (g === "female" || g === "women") {
          setRadioGender("gender_for_women");
        } else {
          setRadioGender("gender_for_men");
        }
      } else {
        setRadioGender("gender_for_men");
      }

    } catch (err) {
      console.error("Error parsing getUser cookie:", err);
    }
  }
}, [initialData]);


  useEffect(() => {
    if (initialData) {
      setFullName(initialData.name || "");
      setForWhom(initialData.for_whom || "myself");
      setRadioGender(
        initialData.measurement_type === "men"
          ? "gender_for_men"
          : "gender_for_women",
      );

      const data = initialData.measurement_data || {};

      setSaveHeight(data.height ?? 48);
      setsaveWeight(data.weight ?? 40);

      const { height, weight, ...rest } = data;
      const filteredData: Record<string, number> = Object.fromEntries(
        Object.entries(rest).filter(([_, value]) => value !== null) as [
          string,
          number,
        ][],
      );

      setMeasurementData(filteredData);
    }
  }, [initialData]);

  const handleSubmit = async () => {
    const trimmedName = fullName.trim();

    if (!trimmedName) {
      toast.error("Please enter a full name");
      return;
    }
    const payload = {
      for_whom: forWhom,
      name: fullName,
      measurement_type: radioGender === "gender_for_men" ? "men" : "women",
      measurement_data: {
        height: saveHeight,
        weight: saveWeight,
        ...measurementData,
      },
    };

    console.log("Payload:", payload);

    try {
      const id = initialData?.measurement_id;
      const isEdit = Boolean(id);

      const result = isEdit
        ? await updateMeasurement(id!, payload)
        : await saveMeasurement(payload);

      if (result.success) {
        toast.success(result.message || (isEdit ? "Measurement updated" : "Measurement added"));
        console.log("Measurement saved successfully!");
        onClose();
      } else {
        toast.error(result.message || "Failed to save measurement");
        console.log("Failed to save measurement:", result.message);
      }
    } catch (err) {
      console.error("Error saving measurement:", err);
      toast.error("An error occurred while saving the measurement.");
    }
  };

  function sanitizeFullName(name: string): string {
    let cleaned = name.replace(/[^a-zA-Z\s]/g, "");
    cleaned = cleaned.replace(/\s+/g, " ").trim();
    return cleaned
      .split(" ")
      .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
      .join(" ");
  }

  return (
    <div className="flex w-full flex-col gap-5">
      <div className="flex flex-col">
        <div className="flex flex-col">
          <div className="mob-noise bg-teal-100 px-5 py-8">
            <div>
              <div className="flex w-full flex-col justify-between gap-6 md:w-[80%] md:flex-row">
                <div className="flex flex-col md:flex-row">
                  <label
                    htmlFor="for_use_me"
                    className="font-bogart flex cursor-pointer flex-row items-center gap-2 py-2 align-middle text-xl/2 font-medium text-gray-900"
                  >
                    <input
                      id="for_use_me"
                      name="fit_use_for"
                      type="radio"
                      checked={forWhom === "myself"}
                      onChange={() => setForWhom("myself")}
                      className="relative size-6 appearance-none rounded-full border border-gray-950 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:border-gray-950 checked:bg-gray-950"
                    />
                    <span className="relative pt-1 capitalize">For me</span>
                  </label>
                  <label
                    htmlFor="for_use_someone"
                    className="font-bogart flex cursor-pointer flex-row items-center gap-2 py-2 align-middle text-xl/2 font-medium text-gray-900"
                  >
                    <input
                      id="for_use_someone"
                      name="fit_use_for"
                      type="radio"
                      checked={forWhom === "someone"}
                      onChange={() => setForWhom("someone")}
                      className="relative size-6 appearance-none rounded-full border border-gray-950 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:border-gray-950 checked:bg-gray-950"
                    />
                    <span className="relative pt-1 capitalize">
                      For Someone Else
                    </span>
                  </label>
                </div>
                <div className="flex flex-col md:flex-row">
                  <label
                    htmlFor="for_gender_men"
                    className="font-bogart flex cursor-pointer flex-row items-center gap-2 py-2 align-middle text-xl/2 font-medium text-gray-900"
                  >
                    <input
                      id="for_gender_men"
                      name="fit_for_gender"
                      type="radio"
                      value="gender_for_men"
                      checked={radioGender === "gender_for_men"}
                      onChange={(e) => setRadioGender(e.target.value)}
                      className="relative size-6 appearance-none rounded-full border border-gray-950 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:border-gray-950 checked:bg-gray-950"
                    />
                    <span className="relative pt-1 capitalize">For Men</span>
                  </label>
                  <label
                    htmlFor="for_gender_women"
                    className="font-bogart flex cursor-pointer flex-row items-center gap-2 py-2 align-middle text-xl/2 font-medium text-gray-900"
                  >
                    <input
                      id="for_gender_women"
                      name="fit_for_gender"
                      type="radio"
                      value="gender_for_women"
                      checked={radioGender === "gender_for_women"}
                      onChange={(e) => setRadioGender(e.target.value)}
                      className="relative size-6 appearance-none rounded-full border border-gray-950 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:border-gray-950 checked:bg-gray-950"
                    />
                    <span className="relative pt-1 capitalize">For Women</span>
                  </label>
                </div>
              </div>
            </div>
            <div className="flex w-full md:w-[80%] mt-4">
              <FormInput
                type="text"
                id="full_name"
                label="Full name"
                require={true}
                value={fullName}
                onChange={(e: any) =>
                  setFullName(sanitizeFullName(e.target.value))
                }
              />
            </div>
            <div className="mt-5 flex w-full flex-col gap-2 md:w-[80%] md:flex-row">
              <ValidatedNumberInput
                id="measurement_height"
                label="Height (in cms)"
                placeholder="0"
                min={120}
                max={240}
                value={saveHeight}
                onValidChange={setSaveHeight}
              />

              <ValidatedNumberInput
                id="measurement_weight"
                label="Weight (in kg)"
                placeholder="0"
                min={40}
                max={250}
                value={saveWeight}
                onValidChange={setsaveWeight}
              />
            </div>
          </div>
        </div>
        <div className="flex w-full flex-col gap-5 pt-10">
          <div className="flex w-full text-xs">
            Measurement videos will guide you how to take the correct
            measurements.
          </div>
          {radioGender === "gender_for_men" && (
            <div className="flex flex-col gap-10">
              <Suspense fallback={<p>Loading men top measurement...</p>}>
                <VideoPlayer
                  title="Men Tops"
                  dataFileName="men-top.json"
                  onMeasurementChange={handleMeasurementChange}
                  measurementData={measurementData}
                />
              </Suspense>
              <Suspense fallback={<p>Loading men bottom measurement...</p>}>
                <VideoPlayer
                  title="Men Bottoms"
                  dataFileName="men-bottom.json"
                  onMeasurementChange={handleMeasurementChange}
                  measurementData={measurementData}
                />
              </Suspense>
            </div>
          )}
          {radioGender === "gender_for_women" && (
            <div className="flex flex-col">
              <Suspense fallback={<p>Loading women top measurement...</p>}>
                <VideoPlayer
                  title="Women Tops"
                  dataFileName="women-top.json"
                  onMeasurementChange={handleMeasurementChange}
                  measurementData={measurementData}
                />
              </Suspense>
              <Suspense fallback={<p>Loading women bottom measurement...</p>}>
                <VideoPlayer
                  title="Women Bottoms"
                  dataFileName="women-bottom.json"
                  onMeasurementChange={handleMeasurementChange}
                  measurementData={measurementData}
                />
              </Suspense>
            </div>
          )}
          <div className="flex items-center justify-center">
            <div className="w-full md:w-60">
              <FormButton
                id="btn_save_measurement"
                label="Save & Continue"
                type="submit"
                color="gray"
                hairline="amber"
                disabled={false}
                onClick={handleSubmit}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}