Review Stats Overview

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";
import { Badge } from "@/components/ui/badge";
import { Star, TrendingUp, Users, ThumbsUp, Award } from "lucide-react";

export default function ReviewStatsOverview() {
  const stats = {
    averageRating: 4.8,
    totalReviews: 2547,
    recommendationRate: 97,
    ratingDistribution: [
      { stars: 5, count: 1893, percentage: 74 },
      { stars: 4, count: 509, percentage: 20 },
      { stars: 3, count: 102, percentage: 4 },
      { stars: 2, count: 25, percentage: 1 },
      { stars: 1, count: 18, percentage: 1 },
    ],
  };

  const highlights = [
    {
      icon: ThumbsUp,
      title: "Customer Satisfaction",
      value: "97%",
      description: "Would recommend to friends",
      trend: "+2.3%",
    },
    {
      icon: Users,
      title: "Total Reviews",
      value: "2,547",
      description: "Verified customer reviews",
      trend: "+324 this month",
    },
    {
      icon: Award,
      title: "Quality Rating",
      value: "4.8/5",
      description: "Average product rating",
      trend: "+0.2 this quarter",
    },
    {
      icon: TrendingUp,
      title: "Growth Rate",
      value: "15%",
      description: "Monthly review increase",
      trend: "Consistent growth",
    },
  ];

  const recentReviews = [
    {
      name: "Maria Garcia",
      rating: 5,
      review:
        "Outstanding quality and fast delivery. Exceeded my expectations!",
      product: "Wireless Earbuds Pro",
      time: "2 hours ago",
    },
    {
      name: "Kevin Johnson",
      rating: 5,
      review:
        "Perfect product, works exactly as described. Great value for money.",
      product: "Smart Home Hub",
      time: "5 hours ago",
    },
    {
      name: "Lisa Chen",
      rating: 4,
      review:
        "Really good product overall. Minor shipping delay but worth the wait.",
      product: "Bluetooth Speaker",
      time: "1 day ago",
    },
  ];

  return (
    <div className="container mx-auto px-4 py-24 md:px-6 lg:py-32 2xl:max-w-[1400px]">
      <div className="mb-16 text-center">
        <h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">
          Customer Review Analytics
        </h2>
        <p className="text-muted-foreground mx-auto max-w-2xl text-lg">
          Comprehensive insights from our customer feedback and reviews
        </p>
      </div>

      {/* Stats Overview */}
      <div className="mb-12 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
        {highlights.map((highlight, index) => (
          <Card key={index} className="gap-3">
            <CardHeader className="flex flex-row items-center justify-between space-y-0">
              <CardTitle className="text-sm font-medium">
                {highlight.title}
              </CardTitle>
              <highlight.icon className="text-muted-foreground size-4" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{highlight.value}</div>
              <p className="text-muted-foreground mb-2 text-xs">
                {highlight.description}
              </p>
              <Badge variant="secondary" className="text-xs">
                {highlight.trend}
              </Badge>
            </CardContent>
          </Card>
        ))}
      </div>

      <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
        {/* Rating Distribution */}
        <Card className="gap-3">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Star className="size-5 fill-yellow-400 text-yellow-400" />
              Rating Distribution
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="mb-6 flex items-center justify-between">
                <div className="">
                  <div className="text-3xl font-bold">
                    {stats.averageRating}
                  </div>
                  <div className="mt-1 flex items-center justify-center gap-1">
                    {[...Array(5)].map((_, i) => (
                      <Star
                        key={i}
                        className={`size-4 ${
                          i < Math.floor(stats.averageRating)
                            ? "fill-yellow-400 text-yellow-400"
                            : "text-muted-foreground"
                        }`}
                      />
                    ))}
                  </div>
                  <div className="text-muted-foreground mt-1 text-sm">
                    {stats.totalReviews.toLocaleString()} reviews
                  </div>
                </div>
              </div>

              {stats.ratingDistribution.map((rating) => (
                <div key={rating.stars} className="flex items-center gap-4">
                  <div className="flex w-16 items-center gap-1">
                    <span className="text-sm">{rating.stars}</span>
                    <Star className="size-3 fill-yellow-400 text-yellow-400" />
                  </div>
                  <Progress value={rating.percentage} className="h-2 flex-1" />
                  <div className="text-muted-foreground w-12 text-right text-sm">
                    {rating.count}
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

        {/* Recent Reviews */}
        <Card className="gap-3">
          <CardHeader>
            <CardTitle>Recent Reviews</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-6">
              {recentReviews.map((review, index) => (
                <div
                  key={index}
                  className="border-border border-b pb-4 last:border-0 last:pb-0"
                >
                  <div className="mb-2 flex items-start justify-between">
                    <div>
                      <h4 className="text-sm font-semibold">{review.name}</h4>
                      <div className="mt-1 flex items-center gap-1">
                        {[...Array(5)].map((_, i) => (
                          <Star
                            key={i}
                            className={`size-3 ${
                              i < review.rating
                                ? "fill-yellow-400 text-yellow-400"
                                : "text-muted-foreground"
                            }`}
                          />
                        ))}
                      </div>
                    </div>
                    <span className="text-muted-foreground text-xs">
                      {review.time}
                    </span>
                  </div>
                  <p className="text-muted-foreground mb-2 text-sm">
                    {review.review}
                  </p>
                  <p className="text-xs font-medium">{review.product}</p>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Bottom Stats */}
      <div className="mt-12 text-center">
        <Card className="inline-block">
          <CardContent>
            <div className="flex items-center gap-8">
              <div className="text-center">
                <div className="text-2xl font-bold text-green-600">
                  {stats.recommendationRate}%
                </div>
                <div className="text-muted-foreground text-sm">
                  Customers recommend us
                </div>
              </div>
              <div className="bg-border h-12 w-px" />
              <div className="text-center">
                <div className="text-2xl font-bold">4.8/5</div>
                <div className="text-muted-foreground text-sm">
                  Overall satisfaction
                </div>
              </div>
              <div className="bg-border h-12 w-px" />
              <div className="text-center">
                <div className="text-2xl font-bold">99.2%</div>
                <div className="text-muted-foreground text-sm">
                  Verified purchases
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}