import { IExpertise } from "@/types/types";
import { cn } from "@/lib/utils";

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[];
  onExpertiseSelect: (expertise: string) => void;
  onSubExpertiseToggle: (subExpertise: string) => void;
};

export default function ExpertisePicker({
  expertiseList,
  expertise,
  subExpertise,
  onExpertiseSelect,
  onSubExpertiseToggle,
}: ExpertisePickerProps) {
  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">
        در حال بارگذاری تخصص‌ها...
      </p>
    );
  }

  return (
    <div className="w-full flex flex-col items-center mt-4 px-2">
      <div
        className={cn("grid gap-2 w-full", gridColsClass(mainCount))}
        style={{ maxWidth: gridMaxWidth(mainCount) }}
      >
        {expertiseList?.map((item) => (
          <button
            key={item._id}
            type="button"
            className={cn(
              "p-2 min-h-10 rounded-3xl border-2 text-xs leading-tight transition-colors",
              expertise === item.expertise
                ? "bg-yellow-500 text-white border-yellow-500"
                : "bg-white text-black border-gray-400 dark:bg-white dark:text-black"
            )}
            onClick={() => onExpertiseSelect(item.expertise)}
          >
            {item.expertise}
          </button>
        ))}
      </div>

      {selectedExpertise && subCount > 0 && (
        <div className="w-full mt-6 flex flex-col items-center">
          <p className="text-xs text-gray-500 mb-2 text-center">
            زیرمجموعه {selectedExpertise.expertise}
          </p>
          <div
            className={cn("grid gap-2 w-full", gridColsClass(subCount))}
            style={{ maxWidth: gridMaxWidth(subCount) }}
          >
            {selectedExpertise.sub_expertise.map((item) => (
              <button
                key={item._id}
                type="button"
                className={cn(
                  "p-2 min-h-10 rounded-3xl border-2 text-xs leading-tight transition-colors",
                  subExpertise.includes(item.name)
                    ? "bg-pink-500 text-white border-pink-500"
                    : "bg-white text-black border-gray-400 dark:bg-white dark:text-black"
                )}
                onClick={() => onSubExpertiseToggle(item.name)}
              >
                {item.name}
              </button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}
