import { X } from 'lucide-react';
import { useState } from 'react';
import StarRating from '../review/StarRating';

interface ProductQuickview2Props {
  isOpen: boolean;
  onClose: () => void;
  product: {
    name: string;
    price: number;
    images?: string[];
    colors?: { name: string; hex: string }[];
    rating?: number;
    reviews?: number;
    sizes?: { name: string; available: boolean }[];
  };
}

export default function ProductQuickview2({ isOpen, onClose, product }: ProductQuickview2Props) {
  const [selectedColor, setSelectedColor] = useState(product.colors?.[0]?.name);
  const [selectedSize, setSelectedSize] = useState<string>();

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      <div className="absolute inset-0 bg-black/50" onClick={onClose} />
      <div className="relative bg-white rounded-2xl max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
        <button
          onClick={onClose}
          className="absolute top-4 right-4 p-2 hover:bg-gray-100 rounded-full"
        >
          <X className="w-5 h-5" />
        </button>
        
        <div className="grid md:grid-cols-2 gap-6 p-6">
          <div>
            <img
              src={product.images?.[0] || '/placeholder.jpg'}
              alt={product.name}
              className="w-full rounded-lg"
            />
          </div>
          
          <div>
            <h3 className="text-xl font-bold mb-2">{product.name}</h3>
            {product.rating && (
              <StarRating rating={product.rating} showCount count={product.reviews || 0} />
            )}
            <p className="text-2xl font-bold text-blue-600 mt-4">
              ฿{product.price.toLocaleString()}
            </p>
            
            {product.colors?.length && (
              <div className="mt-4 space-y-2">
                <p className="text-sm font-medium">สี: {selectedColor}</p>
                <div className="flex gap-2">
                  {product.colors.map(c => (
                    <button
                      key={c.name}
                      onClick={() => setSelectedColor(c.name)}
                      className={`w-8 h-8 rounded-full border-2 ${
                        selectedColor === c.name ? 'border-blue-600' : 'border-gray-200'
                      }`}
                      style={{ backgroundColor: c.hex }}
                    />
                  ))}
                </div>
              </div>
            )}
            
            {product.sizes?.length && (
              <div className="mt-4 space-y-2">
                <p className="text-sm font-medium">ไซส์: {selectedSize || 'เลือกไซส์'}</p>
                <div className="flex flex-wrap gap-2">
                  {product.sizes.map(s => (
                    <button
                      key={s.name}
                      onClick={() => s.available && setSelectedSize(s.name)}
                      disabled={!s.available}
                      className={`px-3 py-1 border rounded ${
                        selectedSize === s.name
                          ? 'border-blue-600 bg-blue-50'
                          : s.available
                          ? 'border-gray-200 hover:border-gray-300'
                          : 'border-gray-200 text-gray-300 line-through'
                      }`}
                    >
                      {s.name}
                    </button>
                  ))}
                </div>
              </div>
            )}
            
            <button className="w-full mt-6 bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700">
              เพิ่มลงตะกร้า
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}
