"use client";

import { IExpertise } 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";

function gridColsClass(count: number): string {
  if (count <= 1) return "grid-cols-1";
  if (count === 2) return "grid-cols-2";
  if (count === 3) return "grid-cols-3";
  if (count === 4) return "grid-cols-4";
  if (count === 5) return "grid-cols-5";
  return "grid-cols-3 sm:grid-cols-4 md:grid-cols-5";
}

function gridMaxWidth(count: number): number {
  const cols = Math.min(Math.max(count, 1), 5);
  return cols * 108;
}

type ExpertisePickerProps = {
  expertiseList: IExpertise[] | null;
  expertise: string;
  subExpertise: string[];
  displaySubExpertise: string | null;
  onExpertiseSelect: (expertise: string) => void;
  onSubExpertiseToggle: (subExpertise: string) => void;
  onDisplaySubExpertiseChange: (subExpertise: string | null) => void;
};

export default function ExpertisePicker({
  expertiseList,
  expertise,
  subExpertise,
  displaySubExpertise,
  onExpertiseSelect,
  onSubExpertiseToggle,
  onDisplaySubExpertiseChange,
}: ExpertisePickerProps) {
  const { t } = useTranslation("common");
  const mainCount = expertiseList?.length ?? 0;
  const selectedExpertise = expertiseList?.find(
    (item) => item.expertise === expertise
  );
  const subCount = selectedExpertise?.sub_expertise.length ?? 0;

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

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

      {selectedExpertise && 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("auth.selectSubExpertise")}
          </p>
          <p className="mb-2 text-center text-xs text-gray-400">
            {t("auth.subExpertisePostHint")}
          </p>
          <div
            className={cn("grid w-full gap-2", gridColsClass(subCount))}
            style={{ maxWidth: gridMaxWidth(subCount) }}
          >
            {selectedExpertise.sub_expertise.map((item) => {
              const isSelected = subExpertise.includes(item.name);
              const isDisplay =
                Boolean(displaySubExpertise) &&
                displaySubExpertise.trim() === item.name.trim();

              return (
                <div key={item._id} className="flex items-stretch gap-1.5">
                  <button
                    type="button"
                    aria-label={t("auth.displayInPostsAria", {
                      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;
                      onDisplaySubExpertiseChange(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={() => onSubExpertiseToggle(item.name)}
                  >
                    {item.name}
                  </button>
                </div>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
}
