'use client'

import { useState } from 'react'
import { Star } from 'lucide-react'
import { useTranslations } from 'next-intl'
import ReviewForm from '@/components/frontend/product/ReviewForm'

interface Review {
  id: string
  userName: string
  userAvatar?: string
  rating: number
  date: string
  title: string | null
  comment: string
  verified: boolean
}

interface RatingBreakdownEntry {
  stars: number
  count: number
}

interface ProductReviewsProps {
  productId: string
  reviews: Review[]
  averageRating: number
  totalReviews: number
  ratingBreakdown: RatingBreakdownEntry[]
}

export default function ProductReviews({ productId, reviews, averageRating, totalReviews, ratingBreakdown }: ProductReviewsProps) {
  const [visibleReviews, setVisibleReviews] = useState(3)
  const t = useTranslations('ProductDetail')

  if (totalReviews === 0) {
    return (
      <div>
        <p className="text-gray-custom text-center py-8">{t('noReviews')}</p>
        <ReviewForm productId={productId} />
      </div>
    )
  }

  return (
    <div>
      {/* Rating Summary */}
      <div className="flex flex-col md:flex-row gap-8 mb-8 pb-8 border-b border-gray-200">
        <div className="text-center">
          <div className="text-5xl font-bold text-dark">{averageRating}</div>
          <div className="flex justify-center gap-0.5 my-2">
            {[...Array(5)].map((_, i) => (
              <Star
                key={i}
                size={18}
                className={i < Math.floor(averageRating) ? 'text-yellow-400 fill-yellow-400' : 'text-gray-300'}
              />
            ))}
          </div>
          <div className="text-sm text-gray-custom">{t('reviewsCount', { count: totalReviews })}</div>
        </div>

        <div className="flex-1 space-y-2">
          {ratingBreakdown.map((rating) => (
            <div key={rating.stars} className="flex items-center gap-3">
              <div className="flex items-center gap-1 w-16">
                <span className="text-sm text-dark">{rating.stars}</span>
                <Star size={14} className="text-yellow-400 fill-yellow-400" />
              </div>
              <div className="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
                <div
                  className="h-full bg-gradient-primary rounded-full"
                  style={{ width: `${totalReviews > 0 ? (rating.count / totalReviews) * 100 : 0}%` }}
                />
              </div>
              <div className="w-12 text-sm text-gray-custom">{rating.count}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Reviews List */}
      <div className="space-y-6">
        {reviews.slice(0, visibleReviews).map((review) => (
          <div key={review.id} className="border-b border-gray-100 pb-6">
            <div className="flex items-start gap-3">
              <div className="w-10 h-10 rounded-full bg-gradient-primary flex items-center justify-center text-white font-semibold">
                {review.userName.charAt(0)}
              </div>
              <div className="flex-1">
                <div className="flex flex-wrap justify-between items-start gap-2">
                  <div>
                    <h4 className="font-semibold text-dark">{review.userName}</h4>
                    <div className="flex items-center gap-2 mt-1">
                      <div className="flex gap-0.5">
                        {[...Array(5)].map((_, i) => (
                          <Star
                            key={i}
                            size={14}
                            className={i < review.rating ? 'text-yellow-400 fill-yellow-400' : 'text-gray-300'}
                          />
                        ))}
                      </div>
                      <span className="text-xs text-gray-custom">{review.date}</span>
                      {review.verified && (
                        <span className="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded-full">{t('verifiedPurchase')}</span>
                      )}
                    </div>
                  </div>
                </div>
                {review.title && <p className="text-dark font-medium mt-2">{review.title}</p>}
                <p className="text-gray-custom text-sm mt-1">{review.comment}</p>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Load More */}
      {visibleReviews < reviews.length && (
        <div className="text-center mt-6">
          <button
            onClick={() => setVisibleReviews(prev => prev + 5)}
            className="px-6 py-2 border border-primary text-primary rounded-lg hover:bg-primary hover:text-white transition-all"
          >
            {t('loadMoreReviews')}
          </button>
        </div>
      )}

      <ReviewForm productId={productId} />
    </div>
  )
}