import { useState } from 'react';
import StarRating from '../review/StarRating';
import AddToCart from '../cart/AddToCart';

interface ProductOverviewGridProps {
  product: {
    id: string;
    name: string;
    price: number;
    images?: string[];
    colors?: { name: string; hex: string }[];
    sizes?: { name: string; available: boolean }[];
    rating?: number;
    reviews?: number;
    fullDescription?: string;
    highlights?: string[];
    details?: string;
  };
}

export default function ProductOverviewGrid({ product }: ProductOverviewGridProps) {
  const [selectedImage, setSelectedImage] = useState(0);
  const [selectedColor, setSelectedColor] = useState<string>();
  const [selectedSize, setSelectedSize] = useState<string>();

  return (
    <div className="grid lg:grid-cols-2 gap-12">
      <div className="space-y-4">
        <div className="aspect-square rounded-xl overflow-hidden bg-gray-100">
          <img
            src={product.images?.[selectedImage] || '/placeholder.jpg'}
            alt={product.name}
            className="w-full h-full object-cover"
          />
        </div>
        <div className="flex gap-2 overflow-x-auto pb-2">
          {product.images?.map((img, i) => (
            <button
              key={i}
              onClick={() => setSelectedImage(i)}
              className={`flex-shrink-0 w-20 h-20 rounded-lg overflow-hidden border-2 ${
                selectedImage === i ? 'border-blue-600' : 'border-transparent'
              }`}
            >
              <img src={img} alt="" className="w-full h-full object-cover" />
            </button>
          ))}
        </div>
      </div>
      
      <div className="space-y-6">
        <div>
          <h1 className="text-3xl font-bold">{product.name}</h1>
          {product.rating && (
            <StarRating rating={product.rating} showCount count={product.reviews || 0} size="lg" />
          )}
        </div>
        
        <div className="text-3xl font-bold text-blue-600">
          ฿{product.price.toLocaleString()}
        </div>
        
        {product.fullDescription && (
          <p className="text-gray-600">{product.fullDescription}</p>
        )}
        
        {product.colors?.length && (
          <div>
            <p className="font-medium mb-2">สี: {selectedColor}</p>
            <div className="flex gap-2">
              {product.colors.map(c => (
                <button
                  key={c.name}
                  onClick={() => setSelectedColor(c.name)}
                  className={`w-12 h-12 rounded-full border-2 ${
                    selectedColor === c.name ? 'border-blue-600' : 'border-gray-200'
                  }`}
                  style={{ backgroundColor: c.hex }}
                  title={c.name}
                />
              ))}
            </div>
          </div>
        )}
        
        {product.sizes?.length && (
          <div>
            <p className="font-medium mb-2">ไซส์: {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-4 py-2 border rounded-lg ${
                    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>
        )}
        
        <AddToCart client:idle product={{
          id: product.id,
          name: product.name,
          price: product.price,
          images: product.images
        }} />
        
        {product.highlights?.length && (
          <div className="mt-6">
            <h3 className="font-bold mb-3">จุดเด่น</h3>
            <ul className="space-y-2">
              {product.highlights.map((h, i) => (
                <li key={i} className="flex items-center gap-2">
                  <span className="w-2 h-2 bg-green-500 rounded-full" />
                  {h}
                </li>
              ))}
            </ul>
          </div>
        )}
      </div>
    </div>
  );
}
