import React, { useState } from 'react';
import { Card, CardContent } from "@/Components/ui/card";
import { Button } from "@/Components/ui/button";
import { MessageSquarePlus } from "lucide-react";
import ReviewSummary from './ReviewSummary';
import ReviewForm from './ReviewForm';
import ReviewList from './ReviewList';
import { useTranslation } from '@/hooks/useTranslation';

export default function ProductReviews({ product, reviewsData, ratingCounts, isOwner, canReview, hasReviewed }) {
    const { t } = useTranslation();
    const [showForm, setShowForm] = useState(false);
    
    const avgRating = parseFloat(product.reviews_avg_rating) || 0;
    const totalReviews = product.reviews_count || 0;

    return (
        <Card className="shadow-sm border-border/50 overflow-hidden mt-8" id="reviews">
            <div className="border-b bg-muted/20 px-6 py-4 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                <span className="text-primary font-bold text-lg">
                    {t('Customer Reviews (:count)', { count: totalReviews })}
                </span>
                
                {!isOwner && canReview && (
                    <Button variant="outline" size="sm" onClick={() => setShowForm(!showForm)} className="gap-2">
                        <MessageSquarePlus className="w-4 h-4" /> 
                        {showForm ? t('Cancel Review') : t('Write a Review')}
                    </Button>
                )}

                {!isOwner && hasReviewed && (
                    <span className="text-xs font-bold text-green-600 bg-green-500/10 border border-green-500/20 px-3 py-1.5 rounded-full">
                        ✓ {t('You reviewed this product')}
                    </span>
                )}
            </div>
            
            <CardContent className="p-6 space-y-8">
                <ReviewSummary avgRating={avgRating} totalReviews={totalReviews} ratingCounts={ratingCounts} />

                {showForm && canReview && (
                    <div className="animate-in fade-in slide-in-from-top-4 duration-300">
                        <ReviewForm productId={product.id} onSuccess={() => setShowForm(false)} />
                    </div>
                )}

                <div className="pt-4">
                    <ReviewList reviews={reviewsData.data} />
                    
                    {reviewsData.last_page > 1 && (
                        <div className="mt-6 flex justify-center">
                            <span className="text-xs text-muted-foreground">
                                {t('Showing page :current of :last', { 
                                    current: reviewsData.current_page, 
                                    last: reviewsData.last_page 
                                })}
                            </span>
                        </div>
                    )}
                </div>
            </CardContent>
        </Card>
    );
}