"use client";
import React, { useState, useEffect } from "react";
import AddMeasurement from "@/app/components/measurement/addMeasurement";
import DialogModal from "@/app/components/common/DialogModal";
import withAuth from "@/app/hook/withAuth";
import { getMeasurements, deleteMeasurement } from "@/app/actions/measurement";
import { toast } from "react-toastify";

type ModalKey = string | null;

interface MeasurementItem {
  id: string;
  label: string;
  size: string | number;
}

interface MeasurementEntry {
  measurement_id: string;
  name: string;
  for_whom: string;
  measurement_type: "men" | "women";
  measurement_data: Record<string, any>;
}

function UserMeasurement() {
  const [openModal, setOpenModal] = useState<ModalKey>(null);
  const [resultData, setResultData] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const [editData, setEditData] = useState<MeasurementEntry | null>(null);

  const closeAllModals = () => {
    setOpenModal(null);
  };

  const openSpecificModal = (modalKey: ModalKey) => {
    closeAllModals();
    setTimeout(() => {
      setOpenModal(modalKey);
    }, 50);
  };

  // Men's measurement order
  const MEN_TOP_ORDER = [
    "neck_around",
    "neck_depth",
    "shoulder_across",
    "cross_back",
    "mid_back",
    "armhole",
    "bicep",
    "chest_full",
    "chest_upper",
    "mid_top_waist",
    "lower_top_waist",
    "shirt_regular_length",
    "shirt_crop",
    "shirt_long",
    "jacket_length",
    "full_sleeve",
    "34_sleeve",
    "short_sleeve",
    "wrist",
  ];

  const MEN_BOTTOM_KEYS = [
    "waist",
    "thigh",
    "bottom_length",
    "short_length",
    "crotch_length",
    "knee",
    "ankel",
  ];

  // Women's measurement order
  const WOMEN_TOP_ORDER = [
    "neck_round",
    "neck_depth",
    "shoulder_accross",
    "back_depth",
    "cross_back",
    "bust",
    "under_bust",
    "upper_bust",
    "34_sleeve",
    "short_sleeve",
    "sleeve_length",
    "armhole",
    "biceps",
    "elbow",
    "waist",
    "hip",
    "shirt_full_length",
    "shirt_crop_length",
    "shirt_medium_length",
    "full_body_length",
  ];

  const WOMEN_BOTTOM_KEYS = [
    "high_waist",
    "mid_waist",
    "low_waist",
    "hips",
    "thigh",
    "crotch_length",
    "knee",
    "ankel",
    "pants_full_length",
  ];

  // Helper function to get ordered measurements
  const getOrderedMeasurements = (
    measurementData: any,
    measurementType: string,
    type: "top" | "bottom",
  ) => {
    const isMen = measurementType === "men";

    let keys: string[];
    if (type === "top") {
      keys = isMen ? MEN_TOP_ORDER : WOMEN_TOP_ORDER;
    } else {
      keys = isMen ? MEN_BOTTOM_KEYS : WOMEN_BOTTOM_KEYS;
    }

    // Filter out bottom keys from top measurements (like PHP array_diff_assoc)
    if (type === "top") {
      const bottomKeys = isMen ? MEN_BOTTOM_KEYS : WOMEN_BOTTOM_KEYS;
      keys = keys.filter((key) => !bottomKeys.includes(key));
    }

    return keys
      .filter(
        (key) =>
          measurementData[key] !== undefined &&
          measurementData[key] !== null &&
          measurementData[key] !== "",
      )
      .map((key) => ({
        id: key,
        label: formatLabel(key),
        size: measurementData[key],
      }));
  };

  const formatLabel = (key: string) => {
    return key.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
  };

  const fetchMeasurements = async () => {
    setLoading(true);
    try {
      const result = await getMeasurements();

      if (result.success && result.data && result.data.length > 0) {
        setResultData(result.data);
      } else {
        setResultData([]);
      }
    } catch (error) {
      console.error("Failed to fetch measurements", error);
      toast.error("Failed to fetch measurements");
      setResultData([]);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchMeasurements();
  }, []);

  const handleMeasurementsAdded = () => {
    setTimeout(() => {
      closeAllModals();
      setEditData(null);
      fetchMeasurements();
    }, 1000);
  };
  const handleRemove = async (id: string) => {
    alert(id);
    const confirmDelete = window.confirm(
      "Are you sure you want to remove this measurement?",
    );
    if (!confirmDelete) return;

    try {
      const result = await deleteMeasurement(id);

      if (result.success) {
        toast.success(result.message || "Measurement deleted successfully!");
        setResultData((prev) =>
          prev.filter((item) => item.measurement_id !== id),
        );
        // Clear editData if the deleted item is currently being edited
        if (editData?.measurement_id === id) {
          setEditData(null);
          closeAllModals();
        }
      } else {
        toast.error(result.message || "Failed to delete the measurement.");
      }
    } catch (error) {
      console.error("Delete failed:", error);
      toast.error("An error occurred while deleting the measurement.");
    }
  };

  return (
    <div className="flex w-full flex-1 flex-col gap-4">
      <div className="flex w-full flex-col">
        <div className="flex flex-col justify-between gap-2 align-middle md:grid-cols-2 md:flex-row md:justify-between">
          <div className="flex flex-col">
            <h1 className="med">Measurement</h1>
            <p className="text-xs">
              You can add up to 10 measurements for yourself and your favorite
              person.
            </p>
          </div>
          <div className="flex justify-start md:justify-end">
            <button
              onClick={() => openSpecificModal("measurementModal")}
              className="btn-outline font-medium"
            >
              Add new Measurement
            </button>
          </div>
        </div>

        <div className="mt-10 flex w-full flex-col justify-between gap-10 align-top">
          <div className="flex flex-col gap-5">
            <h4 className="font-medium">Saved {resultData.length} items</h4>
            {loading ? (
              <p className="py-10 text-center">Loading measurements...</p>
            ) : (
              <div className="grid grid-cols-1 gap-10">
                {resultData.map((entry) => {
                  // Use the new ordering function based on measurement type
                  const topData = getOrderedMeasurements(
                    entry.measurement_data,
                    entry.measurement_type,
                    "top",
                  );

                  const bottomData = getOrderedMeasurements(
                    entry.measurement_data,
                    entry.measurement_type,
                    "bottom",
                  );

                  return (
                    <div
                      key={entry.measurement_id}
                      className="border-1 border-gray-950/25 bg-white p-5 md:p-10"
                    >
                      <div>
                        <p className="font-bogart text-xl">
                          {entry.name.charAt(0).toUpperCase() +
                            entry.name.slice(1)}{" "}
                          <span className="font-mono text-sm font-semibold">
                            (
                            {entry.for_whom.charAt(0).toUpperCase() +
                              entry.for_whom.slice(1)}
                            /
                            {entry.measurement_type.charAt(0).toUpperCase() +
                              entry.measurement_type.slice(1)}
                            )
                          </span>
                        </p>
                      </div>

                      <div>
                        Height {entry.measurement_data.height} / Weight{" "}
                        {entry.measurement_data.weight}
                      </div>

                      <div className="py-2">
                        <h5 className="font-bogart">Top (in inches)</h5>
                        <ul className="no-list flex flex-wrap gap-2">
                          {topData.map((item) => (
                            <li
                              key={item.id}
                              className="flex items-center gap-1 border-1 border-gray-200 bg-gray-100/50 px-2.5 py-1.25 align-middle text-xs capitalize"
                            >
                              <span>{item.label}</span> -{" "}
                              <span className="text-sm font-semibold">
                                {item.size}
                              </span>
                            </li>
                          ))}
                        </ul>
                      </div>

                      <div className="py-2">
                        <h5 className="font-bogart">Bottom (in inches)</h5>
                        <ul className="no-list flex flex-wrap gap-2">
                          {bottomData.map((item) => (
                            <li
                              key={item.id}
                              className="flex items-center gap-1 border-1 border-gray-200 bg-gray-100/50 px-2.5 py-1.25 align-middle text-xs capitalize"
                            >
                              <span>{item.label}</span> -{" "}
                              <span className="text-sm font-semibold">
                                {item.size}
                              </span>
                            </li>
                          ))}
                        </ul>
                      </div>

                      <div className="flex w-full items-center gap-5 align-middle">
                        <button
                          className="btn-link"
                          onClick={() => {
                            setEditData(null);
                            setTimeout(() => {
                              setEditData(entry);
                              openSpecificModal("measurementModal");
                            }, 0);
                          }}
                        >
                          Edit
                        </button>

                        <button
                          className="btn-link"
                          onClick={() => handleRemove(entry.measurement_id)}
                        >
                          Remove
                        </button>
                      </div>
                    </div>
                  );
                })}
              </div>
            )}
          </div>

          <div className="flex w-full flex-col">
            <DialogModal
              name="measurementModal"
              isOpen={openModal === "measurementModal"}
              onClose={() => {
                closeAllModals();
                setEditData(null);
              }}
              size="xl"
              title={editData ? "Edit Measurement" : "Add Measurement"}
              subtitle="Save your personalized body fit for current or next orders."
              showFooter={false}
            >
              <AddMeasurement
                onClose={handleMeasurementsAdded}
                initialData={editData}
              />
            </DialogModal>
          </div>
        </div>
      </div>
    </div>
  );
}
export default withAuth(UserMeasurement);