"use client"

import { useState, useEffect } from "react";
import { Star, X } from "lucide-react";
import Image from "next/image";
import { Review } from "./types";

interface ReviewsProps {
    reviews: Review[];
    rating: number;
    reviewCount: number;
}

export function Reviews({ reviews, rating, reviewCount }: ReviewsProps) {
    const [showReviews, setShowReviews] = useState(false);

    useEffect(() => {
        if (showReviews) {
            document.body.style.overflow = 'hidden';
        } else {
            document.body.style.overflow = 'unset';
        }
        return () => {
            document.body.style.overflow = 'unset';
        };
    }, [showReviews]);

    return (
        <div className="max-w-[95%] mx-auto pb-20 border-t-2 border-gray-100 pt-12">
            <div className="flex items-center gap-2 mb-8">
                <Star className="w-6 h-6 fill-[#E7FE78] text-black" />
                <h2 className="text-2xl font-medium">{rating} · {reviewCount} reviews</h2>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                {reviews.slice(0, 4).map((review) => (
                    <div key={review.id} className="p-6 border-2 border-black hover:bg-gray-50 transition-colors">
                        <div className="flex items-center gap-4 mb-4">
                            <Image
                                src={review.avatar}
                                alt={review.user}
                                width={48}
                                height={48}
                                className="rounded-full border border-black"
                            />
                            <div>
                                <h4 className="font-medium">{review.user}</h4>
                                <p className="text-sm text-gray-500">{review.date}</p>
                            </div>
                        </div>
                        <p className="text-gray-700 font-light leading-relaxed">
                            "{review.comment}"
                        </p>
                    </div>
                ))}
            </div>
            <button
                onClick={() => setShowReviews(true)}
                className="mt-8 px-8 py-3 border-2 border-black font-medium hover:bg-[#E7FE78] transition-colors"
            >
                Show all {reviewCount} reviews
            </button>

            {/* Reviews Modal */}
            {showReviews && (
                <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
                    <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={() => setShowReviews(false)} />
                    <div className="relative bg-white w-full max-w-4xl max-h-[85vh] rounded-xl shadow-2xl flex flex-col animate-in fade-in zoom-in duration-200">
                        <div className="flex items-center justify-between p-6 border-b">
                            <div className="flex items-center gap-2">
                                <Star className="w-5 h-5 fill-black" />
                                <h2 className="text-2xl font-medium">{rating} · {reviewCount} reviews</h2>
                            </div>
                            <button
                                onClick={() => setShowReviews(false)}
                                className="p-2 hover:bg-gray-100 rounded-full transition-colors"
                            >
                                <X className="w-5 h-5" />
                            </button>
                        </div>
                        <div className="p-8 overflow-y-auto flex-1">
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                                {reviews.map((review) => (
                                    <div key={review.id} className="space-y-4">
                                        <div className="flex items-center gap-3">
                                            <Image
                                                src={review.avatar}
                                                alt={review.user}
                                                width={48}
                                                height={48}
                                                className="rounded-full border border-gray-200"
                                            />
                                            <div>
                                                <h4 className="font-medium">{review.user}</h4>
                                                <p className="text-sm text-gray-500">{review.date}</p>
                                            </div>
                                        </div>
                                        <div className="flex gap-1">
                                            {[...Array(5)].map((_, i) => (
                                                <Star
                                                    key={i}
                                                    className={`w-4 h-4 ${i < Math.floor(review.rating) ? 'fill-black text-black' : 'text-gray-300'}`}
                                                />
                                            ))}
                                        </div>
                                        <p className="text-gray-700 leading-relaxed">
                                            {review.comment}
                                        </p>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
}
