import { Check } from 'lucide-react';

interface VariantAttribute {
  name: string;
  values: string[];
}

interface ProductVariantsProps {
  variants: { id: string; name: string; price: number; attributes: Record<string, string> }[];
  onSelect: (variant: any) => void;
  selectedId?: string;
}

export default function ProductVariants({ variants, onSelect, selectedId }: ProductVariantsProps) {
  if (!variants?.length) return null;

  // Extract unique attribute types (size, color, etc.)
  const attributeTypes = ['size', 'color', 'style', 'material'].filter(attr => 
    variants.some(v => v.attributes?.[attr])
  );

  const handleAttributeSelect = (attrName: string, value: string) => {
    // Find a variant that matches all currently selected attributes plus this new one
    // For simplicity, just find any variant with this attribute value
    const variant = variants.find(v => v.attributes?.[attrName] === value);
    if (variant) {
      onSelect(variant);
    }
  };

  return (
    <div className="space-y-6">
      {attributeTypes.map(attrName => (
        <div key={attrName}>
          <label className="block text-sm font-medium text-gray-900 mb-3">
            {attrName === 'size' ? 'ขนาด' : 
             attrName === 'color' ? 'สี' : 
             attrName === 'style' ? 'สไตล์' : 
             attrName === 'material' ? 'วัสดุ' : attrName}
            <span className="text-gray-500 font-normal ml-1">
              ({variants.find(v => v.id === selectedId)?.attributes?.[attrName] || 'เลือก'})
            </span>
          </label>
          
          {attrName === 'color' ? (
            <div className="flex flex-wrap gap-2">
              {[...new Set(variants.map(v => v.attributes?.[attrName]))].map(value => {
                const isSelected = variants.find(v => v.id === selectedId)?.attributes?.[attrName] === value;
                return (
                  <button
                    key={value}
                    onClick={() => handleAttributeSelect(attrName, value)}
                    className={`px-4 py-2 border-2 rounded-lg flex items-center gap-2 transition-all ${
                      isSelected 
                        ? 'border-blue-600 bg-blue-50' 
                        : 'border-gray-200 hover:border-gray-300'
                    }`}
                  >
                    <span 
                      className="w-5 h-5 rounded-full border border-gray-300"
                      style={{ backgroundColor: value.toLowerCase() }}
                    />
                    <span className="text-sm">{value}</span>
                    {isSelected && <Check className="w-4 h-4 text-blue-600" />}
                  </button>
                );
              })}
            </div>
          ) : (
            <div className="flex flex-wrap gap-2">
              {[...new Set(variants.map(v => v.attributes?.[attrName]))].map(value => {
                const isSelected = variants.find(v => v.id === selectedId)?.attributes?.[attrName] === value;
                return (
                  <button
                    key={value}
                    onClick={() => handleAttributeSelect(attrName, value)}
                    className={`px-4 py-2 border-2 rounded-lg transition-all ${
                      isSelected 
                        ? 'border-blue-600 bg-blue-50 text-blue-600' 
                        : 'border-gray-200 hover:border-gray-300 text-gray-700'
                    }`}
                  >
                    {value}
                  </button>
                );
              })}
            </div>
          )}
        </div>
      ))}

      {/* Price display for selected variant */}
      {selectedId && (
        <div className="bg-gray-50 rounded-lg p-4">
          <p className="text-sm text-gray-600">ราคาสำหรับตัวเลือกนี้</p>
          <p className="text-2xl font-bold text-gray-900">
            ฿{variants.find(v => v.id === selectedId)?.price.toLocaleString() || 0}
          </p>
        </div>
      )}
    </div>
  );
}
