"use client";
import React, { useState } from "react";
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
import { RadioGroup, RadioGroupItem } from "@/modules/ui/radio-group";
import { Dropdown as SelectDropdown } from "@/modules/ui/select-dropdown";
import AttributeInfoModal from "@/modules/products-details/components/attribute-info-modal";

export interface VariantGroupItem {
  _id: string;
  displayName: string;
  extraPrice?: number;
  outOfStock?: boolean;
  isRecommended?: boolean;
  popularItem?: boolean;
}

export interface VariantGroup {
  id: string;
  name: string;
  attributeInfo?: string;
  type?: string;
  isAfterShow?: boolean;
  items: VariantGroupItem[];
}

export default function ProductOptions({
  variantGroups = [],
  selections = {},
  availableItemsMap = {},
  unlockedIndex = 0,
  onSelectionChange,
}: {
  variantGroups?: VariantGroup[];
  selections?: Record<string, string>;
  availableItemsMap?: Record<string, string[]>;
  unlockedIndex?: number;
  onSelectionChange?: (variantId: string, attributeItemId: string, variantIndex: number) => void;
}) {
  const [modalData, setModalData] = useState<{ title: string; data: string } | null>(null);

  const openInfoModal = (title: string, data: string) => setModalData({ title, data });

  return (
    <>
      {variantGroups.map((group, i) => {
        const isDisabled = i > unlockedIndex;
        const selectedId = selections[group.id] || "";
        const availableIds = availableItemsMap[group.id];
        const items = availableIds
          ? group.items.filter((it) => availableIds.includes(it._id))
          : group.items;

        if (items.length === 0) {
          return null;
        }

        const infoBtn = group.attributeInfo ? (
          <button
            type="button"
            onClick={() => openInfoModal(group.name, group.attributeInfo!)}
            className="border rounded-full w-4 h-4 bg-gray-200 flex items-center justify-center text-gray-500 text-xs cursor-pointer"
          >
            ?
          </button>
        ) : null;

        if (group.type === "color") {
          return (
            <div key={group.id} className={`flex flex-col gap-2 mb-4 ${isDisabled ? "opacity-50" : ""}`}>
              <label className="flex items-center gap-1.5 text-sm font-semibold text-neutral-black-87">
                {group.name} {infoBtn}
              </label>
              <RadioGroupPrimitive.Root
                value={selectedId}
                onValueChange={(val) => onSelectionChange?.(group.id, val, i)}
                disabled={isDisabled}
                className="grid grid-cols-1 md:grid-cols-3 gap-x-4 gap-y-3 min-h-11"
              >
                {items.map((it) => {
                  const parts = it.displayName?.split("-") || [];
                  const colorName = parts[0]?.trim() || it.displayName;
                  const colorHex = parts[1]?.trim() || it.displayName;
                  const isSelected = selectedId === it._id;
                  return (
                    <label key={it._id} className={`flex items-center gap-2 ${isDisabled || it.outOfStock ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`}>
                      <RadioGroupPrimitive.Item
                        value={it._id}
                        disabled={isDisabled || Boolean(it.outOfStock)}
                        style={{ backgroundColor: colorHex }}
                        className={`w-6 h-6 rounded-full border-2 transition-all ring-offset-2 ${isSelected ? "border-primary ring-2 ring-primary scale-110" : "border-gray-300 hover:border-gray-400"}`}
                        title={colorName}
                      />
                      <span className={`text-xs ${isSelected ? "font-semibold text-primary" : "text-gray-600"}`}>{colorName}</span>
                    </label>
                  );
                })}
              </RadioGroupPrimitive.Root>
            </div>
          );
        }

        if (group.type === "radio") {
          return (
            <RadioGroup
              key={group.id}
              name={group.name}
              value={selectedId}
              disabled={isDisabled}
              onValueChange={(val) => onSelectionChange?.(group.id, val, i)}
              className={`min-h-11 items-center ${isDisabled ? "opacity-50" : ""}`}
              attributeInfo={group.attributeInfo || ""}
              handleOpenModal={() => group.attributeInfo && openInfoModal(group.name, group.attributeInfo)}
            >
              {items.map((it) => (
                <RadioGroupItem
                  key={it._id}
                  value={it._id}
                  disabled={isDisabled || Boolean(it.outOfStock)}
                  className={isDisabled || it.outOfStock ? "bg-gray-100 cursor-not-allowed" : ""}
                >
                  <div>{it.displayName}</div>
                  {it.isRecommended && <div className="text-primary text-[12px] font-bold">Recommended</div>}
                  {it.popularItem && <div className="text-primary text-[12px] font-bold">Popular Item</div>}
                  {it.outOfStock && <div className="text-primary text-[12px] font-bold">Out Of Stock</div>}
                </RadioGroupItem>
              ))}
            </RadioGroup>
          );
        }

        return (
          <SelectDropdown
            key={group.id}
            isSearchable={false}
            options={items}
            labelText={group.name}
            label="displayName"
            value="_id"
            selected={selectedId}
            disabled={isDisabled}
            onChange={(e) => e && onSelectionChange?.(group.id, e._id, i)}
            attributeInfo={group.attributeInfo}
            handleOpenModal={() => group.attributeInfo && openInfoModal(group.name, group.attributeInfo)}
          />
        );
      })}

      <AttributeInfoModal
        title={modalData?.title || ""}
        data={modalData?.data || ""}
        isModalOpen={Boolean(modalData)}
        handleCloseModal={() => setModalData(null)}
      />
    </>
  );
}