"use client";

import { IShopCategory } from "@/types/types";
import { cn } from "@/lib/utils";
import { toggleBtnClass } from "@/lib/ui/buttonStyles";
import BoldIcon from "@/components/ui/BoldIcon";
import { useTranslation } from "react-i18next";

const FIXED_GRID_MAX_WIDTH = 440;

type ShopCategoryPickerProps = {
  categoryList: IShopCategory[] | null;
  category: string;
  subCategory: string[];
  displaySubCategory: string | null;
  onCategorySelect: (category: string) => void;
  onSubCategoryToggle: (subCategory: string) => void;
  onDisplaySubCategoryChange: (subCategory: string | null) => void;
};

export default function ShopCategoryPicker({
  categoryList,
  category,
  subCategory,
  displaySubCategory,
  onCategorySelect,
  onSubCategoryToggle,
  onDisplaySubCategoryChange,
}: ShopCategoryPickerProps) {
  const { t } = useTranslation("common");
  const mainCount = categoryList?.length ?? 0;
  const selectedCategory = categoryList?.find(
    (item) => item.category === category
  );
  const subCount = selectedCategory?.sub_categories.length ?? 0;

  if (!mainCount) {
    return (
      <p className="mt-4 text-center text-sm text-gray-500">
        {t("shops.loadingCategories")}
      </p>
    );
  }

  return (
    <div className="mt-4 flex w-full flex-col items-center px-2">
      <div
        className="grid w-full grid-cols-4 gap-2"
        style={{ maxWidth: FIXED_GRID_MAX_WIDTH }}
      >
        {categoryList?.map((item) => (
          <button
            key={item._id}
            type="button"
            className={cn(
              toggleBtnClass(category === item.category),
              "min-h-10 p-2 text-xs leading-tight"
            )}
            onClick={() => onCategorySelect(item.category)}
          >
            {item.category}
          </button>
        ))}
      </div>

      {selectedCategory && subCount > 0 && (
        <div className="mt-6 flex w-full flex-col items-center">
          <p className="mb-1 text-center text-xs text-gray-500">
            {t("shops.selectSubCategory")}
          </p>
          <p className="mb-2 text-center text-xs text-gray-400">
            {t("shops.subCategoryDisplayHint")}
          </p>
          <p className="mb-2 text-center text-xs text-gray-400">
            {t("shops.subCategoryMaxHint")}
          </p>
          <div
            className="grid w-full grid-cols-4 gap-2"
            style={{ maxWidth: FIXED_GRID_MAX_WIDTH }}
          >
            {selectedCategory.sub_categories.map((item) => {
              const isSelected = subCategory.includes(item.name);
              const isDisplay =
                !!displaySubCategory &&
                displaySubCategory.trim() === item.name.trim();

              return (
                <div key={item._id} className="flex items-stretch gap-1.5">
                  <button
                    type="button"
                    aria-label={t("shops.displaySubCategoryAria", {
                      name: item.name,
                    })}
                    disabled={!isSelected}
                    className={cn(
                      "flex h-10 w-8 shrink-0 items-center justify-center rounded-lg border transition-colors",
                      !isSelected && "cursor-not-allowed opacity-40",
                      isDisplay && isSelected
                        ? "border-pink-500 bg-pink-500 text-white"
                        : "border-neutral-300 bg-white dark:bg-neutral-900"
                    )}
                    onClick={() => {
                      if (!isSelected) return;
                      onDisplaySubCategoryChange(item.name);
                    }}
                  >
                    {isDisplay && isSelected ? (
                      <BoldIcon
                        name="tick-circle"
                        size={14}
                        tinted
                        className="text-white"
                      />
                    ) : (
                      <span className="h-3.5 w-3.5 rounded-sm border border-neutral-300 dark:border-neutral-600" />
                    )}
                  </button>
                  <button
                    type="button"
                    className={cn(
                      toggleBtnClass(isSelected),
                      "min-h-10 flex-1 p-2 text-xs leading-tight"
                    )}
                    onClick={() => onSubCategoryToggle(item.name)}
                  >
                    {item.name}
                  </button>
                </div>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
}
