'use client';

import React from 'react';
import BlurHashImage from '@/components/ui/BlurHashImage';
import { Smartphone } from 'lucide-react';
import { HierarchyModelItem } from '@/services/api/catalogService';
import { getImageUrl } from '@/lib/utils';

interface ModelSelectorProps {
  models: HierarchyModelItem[];
  selectedModelId: string | null;
  onSelectModel: (modelId: string | null) => void;
}

export const ModelSelector: React.FC<ModelSelectorProps> = ({
  models,
  selectedModelId,
  onSelectModel,
}) => {
  if (!models || models.length === 0) return null;

  return (
    <div className="w-full mb-8">
      <h3 className="text-base font-bold text-gray-900 mb-4 tracking-tight">
        Select Model
      </h3>

      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
        {/* All Models Card */}
        <button
          onClick={() => onSelectModel(null)}
          className={`flex flex-col items-center justify-center p-4 rounded-2xl border transition-all duration-200 aspect-[4/5] ${
            selectedModelId === null
              ? 'bg-gray-900 text-white border-gray-900 shadow-md ring-2 ring-gray-900/20 scale-[1.02]'
              : 'bg-white text-gray-800 border-gray-200 hover:border-gray-400 hover:shadow-md'
          }`}
        >
          <div className="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mb-3 text-gray-600">
            <Smartphone className="w-6 h-6" />
          </div>
          <span className="text-xs font-bold text-center">All Models</span>
        </button>

        {/* Model Cards */}
        {models.map((model) => {
          const isSelected = selectedModelId === model.model_id;
          const imageUrl = getImageUrl(model.image_url);
          return (
            <button
              key={model.model_id}
              onClick={() => onSelectModel(model.model_id)}
              className={`flex flex-col items-center justify-center p-4 rounded-2xl border transition-all duration-200 aspect-[4/5] ${
                isSelected
                  ? 'bg-red-50 text-red-700 border-red-500 ring-2 ring-red-500/20 shadow-md font-bold scale-[1.02]'
                  : 'bg-white text-gray-900 border-gray-200 hover:border-gray-400 hover:shadow-md'
              }`}
            >
              {model.image_url ? (
                <div className="relative w-16 h-20 mb-3">
                  <BlurHashImage
                    src={imageUrl}
                    alt={model.name}
                    fill
                    className="object-contain"
                  />
                </div>
              ) : (
                <div className="w-14 h-16 mb-3 rounded-xl bg-gray-50 flex items-center justify-center text-gray-400 border border-gray-100">
                  <Smartphone className="w-7 h-7" />
                </div>
              )}
              <span className="text-xs font-medium text-center line-clamp-2 leading-tight">
                {model.name}
              </span>
            </button>
          );
        })}
      </div>
    </div>
  );
};