import { Check, X } from "lucide-react";
import { useColorAttributes } from "~/requestHandler/use-product-hooks";

interface ColorSelectorProps {
  selectedColors: string[];
  onToggleColor: (colorValue: string) => void;
  onRemoveColor: (colorValue: string) => void;
  unselectedMode: boolean;
  onToggleUnselectedMode: (enabled: boolean) => void;
}

export const ColorSelector = ({
  selectedColors,
  onToggleColor,
  onRemoveColor,
  unselectedMode,
  onToggleUnselectedMode,
}: ColorSelectorProps) => {
  const { data: colors, isLoading } = useColorAttributes();
  if (isLoading) {
    return (
      <div className="space-y-4">
        <h4 className="font-medium text-right">انتخاب رنگ های موجود:</h4>
        <div className="grid grid-cols-7 gap-3">
          {[...Array(20)].map((_, i) => (
            <div
              key={i}
              className="w-12 h-12 rounded-lg border-2 border-WHITE2 bg-WHITE3 animate-pulse"
            />
          ))}
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <h4 className="font-medium text-right">انتخاب رنگ های موجود:</h4>

      {/* Unselected Mode Switch */}
      <div className="flex items-center justify-between p-3 bg-GRAY3 rounded-lg">
        <span className="text-sm font-medium text-BLACK2">
          بدون مشخص کردن رنگ
        </span>
        <label className="relative inline-flex items-center cursor-pointer">
          <input
            type="checkbox"
            checked={unselectedMode}
            onChange={(e) => onToggleUnselectedMode(e.target.checked)}
            className="sr-only peer"
            aria-label="حالت بدون رنگ"
          />
          <div className="w-11 h-6 bg-WHITE2 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-WHITE after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-WHITE after:border-GRAY3 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-VITROWN_BLUE border"></div>
        </label>
      </div>

      {/* Color Selection Grid - Disabled when unselected mode is on */}
      <div
        className={`${unselectedMode ? "opacity-50 pointer-events-none" : ""}`}
      >
        <div className="grid grid-cols-7 gap-1 flex-wrap">
          {colors.map((color) => (
            <>
              {color.value !== "UNSELECTED" && (
                <div
                  key={color.id}
                  className="flex flex-col items-center gap-1"
                >
                  <button
                    onClick={() =>
                      !unselectedMode && onToggleColor(color.value)
                    }
                    disabled={unselectedMode}
                    className={`relative w-12 h-12 rounded-lg border-2 transition-all ${
                      selectedColors.includes(color.value)
                        ? "border-blue-500"
                        : "border-WHITE2 hover:border-GRAY3"
                    }`}
                    style={{ backgroundColor: color.info.detail }}
                    title={color.info?.persian}
                  >
                    {selectedColors.includes(color.value) && (
                      <div className="absolute inset-0 flex items-center justify-center">
                        <Check
                          className={`w-4 h-4 ${
                            color.info.detail === "#FFFFFF" ||
                            color.info.detail === "#F5F5DC" ||
                            color.info.detail === "#FAFAFA" ||
                            color.info.detail === "#F0F0F0"
                              ? "text-BLACK"
                              : "text-WHITE"
                          }`}
                        />
                      </div>
                    )}
                  </button>
                  <span
                    className={`text-xs text-center truncate w-12 ${
                      selectedColors.includes(color.value)
                        ? "font-semibold text-blue-700"
                        : "text-BLACK2"
                    }`}
                  >
                    {color.info?.persian || color.value}
                  </span>
                </div>
              )}
            </>
          ))}
        </div>
      </div>

      {/* Selected Colors Display */}
      {selectedColors.length > 0 && !unselectedMode && (
        <div className="flex flex-wrap gap-2 mt-3">
          {selectedColors.map((colorValue) => {
            const colorInfo = colors.find((c) => c.value === colorValue);
            return (
              <div
                key={colorValue}
                className="flex items-center gap-1 bg-WHITE3 px-3 py-1 rounded-full text-sm"
              >
                <div
                  className="w-3 h-3 rounded-full border border-GRAY3"
                  style={{ backgroundColor: colorValue }}
                />
                <span>{colorInfo?.info?.persian || colorValue}</span>
                <X
                  className="w-4 h-4 cursor-pointer text-red-400"
                  onClick={() => onRemoveColor(colorValue)}
                />
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
};
