"use client";
import { useState, Suspense, lazy } from "react";
import Image from "next/image";
import { FormButton } from "@/app/components/form/forms";
import nestedData from "@/public/data/customize/tabsData.json";

const TabPanel = lazy(() => import("@/app/components/customization/TabPanel"));

export default function Customizations() {
  const [selectedOptions, setSelectedOptions] = useState<
    Record<string, string>
  >({});

  const handleSelection = (path: string, value: string) => {
    setSelectedOptions((prev) => ({
      ...prev,
      [path]: value,
    }));
  };

  return (
    <div className="fixed top-0 left-0 z-100 h-screen w-screen bg-gray-100 overflow-hidden overflow-y-auto">
      <div className="relative z-110">
        <div className="grid grid-cols-1 md:grid-cols-8">
          <div className="col-span-5">
            <div className="mob-noise mx-auto flex md:min-h-svh w-full flex-col gap-5 py-10">
              <div className="mx-auto flex w-[90%] flex-col items-center justify-center">
                <Suspense fallback={<p>Loading Project content...</p>}>
                  <TabPanel
                    data={nestedData}
                    level={1}
                    path="root"
                    onSelect={handleSelection}
                  />
                </Suspense>
              </div>
            </div>
          </div>
          <div className="col-span-3">
            <div className="mx-auto flex h-full w-[80%] pt-10">
              <div className="flex w-full flex-col gap-10">
                <div className="flex flex-row items-center gap-10 align-middle">
                  <div className="w-[80px]">
                    <Image
                      src="/products/lotus-harmony-1.jpg"
                      alt=""
                      width={120}
                      height={180}
                      className="img-responsive"
                    />
                  </div>
                  <div>
                    <div className="font-bogart text-lg">Lotus Harmony Set</div>
                    <div>$333</div>
                  </div>
                </div>
                <div className="">
                  <div className="font-macropolo mb-2 text-xl uppercase">
                    Design Options
                  </div>
                  <div className="font-bogart mb-2 text-sm">
                    You have customized design for Shrit and pant
                  </div>
                  <pre>{JSON.stringify(selectedOptions, null, 2)}</pre>
                </div>
                <div className="flex w-full flex-col items-center justify-center gap-2 border-t-1 border-gray-950/25 py-5">
                  <div className="flex w-full flex-row justify-between">
                    <button className="btn-link">Add your Measurement</button>
                    <button className="btn-link">Save Changes</button>
                  </div>
                  <div className="flex w-full">
                    <FormButton
                      id="btn_design_buy"
                      label="Buy Now"
                      type="button"
                      color="gray"
                      hairline="amber"
                      disabled={false}
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}