import { useState } from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import StarRating from '../review/StarRating';

interface ProductOverviewGalleryProps {
  product: {
    name: string;
    price: number;
    images?: string[];
    colors?: { name: string; hex: string }[];
    rating?: number;
    reviews?: number;
    fullDescription?: string;
    data?: { title: string; content: string }[];
  };
}

export default function ProductOverviewGallery({ product }: ProductOverviewGalleryProps) {
  const [activeTab, setActiveTab] = useState(0);
  const [currentImageIndex, setCurrentImageIndex] = useState(0);

  const tabs = ['รูปภาพ', 'รายละเอียด', ...(product.data?.map(d => d.title) || [])];
  const images = product.images || ['/placeholder.jpg'];

  const nextImage = () => setCurrentImageIndex((prev) => (prev + 1) % images.length);
  const prevImage = () => setCurrentImageIndex((prev) => (prev - 1 + images.length) % images.length);

  return (
    <div>
      <div className="flex gap-4 border-b mb-6">
        {tabs.map((tab, i) => (
          <button
            key={tab}
            onClick={() => setActiveTab(i)}
            className={`pb-3 px-2 font-medium border-b-2 ${
              activeTab === i ? 'border-blue-600 text-blue-600' : 'border-transparent text-gray-500'
            }`}
          >
            {tab}
          </button>
        ))}
      </div>

      {activeTab === 0 && (
        <div className="relative">
          <div className="aspect-square rounded-xl overflow-hidden bg-gray-100">
            <img
              src={images[currentImageIndex]}
              alt={product.name}
              className="w-full h-full object-cover"
            />
          </div>
          {images.length > 1 && (
            <>
              <button
                onClick={prevImage}
                className="absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 bg-white rounded-full shadow-lg flex items-center justify-center"
              >
                <ChevronLeft className="w-6 h-6" />
              </button>
              <button
                onClick={nextImage}
                className="absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 bg-white rounded-full shadow-lg flex items-center justify-center"
              >
                <ChevronRight className="w-6 h-6" />
              </button>
            </>
          )}
          <div className="flex justify-center gap-2 mt-4">
            {images.map((_, i) => (
              <button
                key={i}
                onClick={() => setCurrentImageIndex(i)}
                className={`w-2 h-2 rounded-full ${
                  currentImageIndex === i ? 'bg-blue-600' : 'bg-gray-300'
                }`}
              />
            ))}
          </div>
        </div>
      )}

      {activeTab === 1 && (
        <div className="prose">
          <p>{product.fullDescription || 'ไม่มีรายละเอียด'}</p>
        </div>
      )}

      {activeTab >= 2 && product.data?.[activeTab - 2] && (
        <div>
          <h3 className="font-bold mb-2">{product.data[activeTab - 2].title}</h3>
          <p className="text-gray-600">{product.data[activeTab - 2].content}</p>
        </div>
      )}

      <div className="mt-8 p-6 bg-gray-50 rounded-xl">
        <div className="flex justify-between items-start mb-4">
          <div>
            <h3 className="text-2xl font-bold">{product.name}</h3>
            {product.rating && (
              <StarRating rating={product.rating} showCount count={product.reviews || 0} />
            )}
          </div>
          <p className="text-2xl font-bold text-blue-600">
            ฿{product.price.toLocaleString()}
          </p>
        </div>
        
        {product.colors?.length && (
          <div className="flex gap-2 mt-4">
            {product.colors.map(c => (
              <div
                key={c.name}
                className="w-8 h-8 rounded-full border-2 border-gray-200"
                style={{ backgroundColor: c.hex }}
                title={c.name}
              />
            ))}
          </div>
        )}
      </div>
    </div>
  );
}
