"use client";
import DynamicTable from "./DynamicTable";
import { useEffect, useState } from "react";
import { FormButton } from "@/app/components/form/forms";

export default function StandardMeasurement() {
  const [topCsvPath, setTopCsvPath] = useState<string>("");
  const [bottomCsvPath, setBottomCsvPath] = useState<string>("");

  useEffect(() => {
    const gender = localStorage.getItem("radioGender");

    if (gender === "gender_for_man") {
      setTopCsvPath("/data/sizechart/men_top.csv");
      setBottomCsvPath("/data/sizechart/men_bottom.csv");
    } else if (gender === "gender_for_woman") {
      setTopCsvPath("/data/sizechart/women_top.csv");
      setBottomCsvPath("/data/sizechart/women_bottom.csv");
    } else {
      // Default to men's charts as fallback
      setTopCsvPath("/data/sizechart/men_top.csv");
      setBottomCsvPath("/data/sizechart/men_bottom.csv");
    }
  }, []);

  return (
    <>
      <div className="mx-auto flex w-full flex-col items-center justify-center gap-4 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">Select your size</h2>
          <p className="text-sm font-light">
            All body measurements are in inches.
          </p>
        </div>

        <div className="cc-vision-wrap">
          <div className="ccvision-scrollcontent">
            <div className="mx-auto flex w-full flex-col md:w-[55%]">
              <div className="flex flex-row items-center justify-between">
                <h4>Tops</h4>
                <p className="text-xs font-medium md:hidden">Scroll L/R</p>
              </div>
              <div className="flex flex-col gap-8">
                {topCsvPath && <DynamicTable csvPath={topCsvPath} radioGroupName="top" />}
              </div>
            </div>

            {/* Bottoms Section */}
            <div className="mx-auto mt-8 flex w-full flex-col md:w-[55%]">
              <div className="flex flex-row items-center justify-between">
                <h4>Bottoms</h4>
                <p className="text-xs font-medium md:hidden">Scroll L/R</p>
              </div>
              <div className="flex flex-col gap-8">
                {bottomCsvPath && <DynamicTable csvPath={bottomCsvPath} radioGroupName="bottom" />}
              </div>
            </div>
            <div className="mx-auto mt-16 flex w-full flex-col text-center text-xs md:w-[50%]">
              <p>Don{"'"}t see your size</p>
              <p>Go back and choose custome fit</p>
            </div>
          </div>

          <div className="ccBottomBtnWrap">
            <FormButton
              id="btn_cc_options_standard_size"
              label="Save Size"
              type="submit"
              color="gray"
              hairline="blue"
              disabled={false}
            />
          </div>
        </div>
      </div>
    </>
  );
}