"use client";
import React, { useState } from "react";
import { FormButton } from "@/app/components/form/forms";
import type { StepComponentProps } from "../wizardTypes";

type Measurements = {
  [key: string]: string[];
};

const measurementsData: Measurements = {
  chest: [
    "32-34",
    "35-37",
    "38-40",
    "41-43",
    "44-46",
    "47-49",
    "48-50",
    "51-53",
  ],
  waist: [
    "32-34",
    "35-37",
    "38-40",
    "41-43",
    "44-46",
    "47-49",
    "48-50",
    "51-53",
  ],
  hip: ["26-28", "29-31", "32-34", "35-37", "38-40", "41-43", "44-46", "47-49"],
};

export default function SelectSize() {
  const [selected, setSelected] = useState<Record<string, string | null>>(
    Object.fromEntries(Object.keys(measurementsData).map((key) => [key, null])),
  );

  const [error, setError] = useState(false);

  const handleChange = (key: string, value: string) => {
    setSelected((prev) => ({ ...prev, [key]: value }));
    setError(false);
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const isValid = Object.values(selected).every((val) => val !== null);
    if (!isValid) {
      setError(true);
      return;
    }

  };

  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">
            Select your desired size. Mix and match if your proportions don{"'"}
            t align with a single standard size.
          </p>
        </div>
        <div className="cc-vision-wrap">
          <div className="ccvision-scrollcontent">
            <div className="mx-auto mt-10 flex w-full flex-col md:w-[50%]">
              <div className="flex flex-col gap-8">
                {Object.entries(measurementsData).map(([key, options]) => (
                  <div
                    key={key}
                    className={`items-center justify-center border-1 border-gray-950/50 bg-gray-300 ${
                      error && selected[key] === null
                        ? "border-red-500"
                        : "border-gray-950/50"
                    }`}
                  >
                    <div className="flex flex-row items-center justify-between bg-gray-100 px-4 py-1 uppercase">
                      <span className="font-macropolo text-xl tracking-widest">
                        {key}
                      </span>
                      <span className="text-xs font-medium text-gray-950/75">
                        in inch
                      </span>
                    </div>
                    <div className="grid grid-cols-4 gap-0.25 p-0.25 md:grid-cols-8">
                      {options.map((option) => {
                        const isSelected = selected[key] === option;
                        return (
                          <label
                            key={option}
                            className={`relative flex cursor-pointer items-center justify-center overflow-hidden border-1 border-transparent px-4 py-4 align-middle text-xs/4 transition-all duration-300 ${
                              isSelected
                                ? "font-medium text-gray-950"
                                : "bg-gray-100 hover:border-gray-950/50"
                            }`}
                          >
                            <input
                              type="radio"
                              name={key}
                              value={option}
                              checked={isSelected}
                              onChange={() => handleChange(key, option)}
                              className="hidden"
                            />
                            <span
                              className={`absolute top-0 left-0 z-1 h-full w-full blur-[8px] ${
                                isSelected ? "bg-green-400/75" : "bg-gray-100"
                              } }`}
                            ></span>
                            <span className="relative z-2">{option}</span>
                          </label>
                        );
                      })}
                    </div>
                    {error && selected[key] === null && (
                      <p className="flex items-center justify-center p-2 text-xs text-red-600">
                        Please select a {key} size.
                      </p>
                    )}
                  </div>
                ))}
              </div>
            </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>
    </>
  );
}