"use client";

import { Star, TrendingUp, MessageSquare, Clock } from "lucide-react";

const t = {
  en: {
    avgRating: "Average Rating",
    totalReviews: "Total Reviews",
    responseRate: "Response Rate",
    last30Days: "Last 30 Days",
    distribution: "Rating Distribution",
    noReviews: "No reviews yet",
  },
  ar: {
    avgRating: "متوسط التقييم",
    totalReviews: "إجمالي التقييمات",
    responseRate: "معدل الرد",
    last30Days: "آخر 30 يوم",
    distribution: "توزيع التقييمات",
    noReviews: "لا توجد تقييمات بعد",
  },
};

interface ReviewStatsData {
  total: number;
  averageRating: number;
  distribution: Record<number, number>;
  responseRate: number;
  recentCount: number;
}

export default function ReviewStats({
  lang,
  stats,
}: {
  lang: string;
  stats: ReviewStatsData | null;
}) {
  const isAr = lang === "ar";
  const labels = t[isAr ? "ar" : "en"];

  if (!stats || stats.total === 0) {
    return (
      <div className="text-center py-8 text-slate-500">{labels.noReviews}</div>
    );
  }

  const maxDistribution = Math.max(...Object.values(stats.distribution), 1);

  return (
    <div dir={isAr ? "rtl" : "ltr"}>
      {/* KPI Cards */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
        <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
          <div className="flex items-center gap-2 text-yellow-400 mb-1">
            <Star className="w-4 h-4 fill-current" />
            <span className="text-xs text-slate-500">{labels.avgRating}</span>
          </div>
          <div className="text-3xl font-bold text-slate-900">
            {stats.averageRating}
          </div>
        </div>
        <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
          <div className="flex items-center gap-2 text-blue-400 mb-1">
            <TrendingUp className="w-4 h-4" />
            <span className="text-xs text-slate-500">
              {labels.totalReviews}
            </span>
          </div>
          <div className="text-3xl font-bold text-slate-900">{stats.total}</div>
        </div>
        <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
          <div className="flex items-center gap-2 text-green-400 mb-1">
            <MessageSquare className="w-4 h-4" />
            <span className="text-xs text-slate-500">
              {labels.responseRate}
            </span>
          </div>
          <div className="text-3xl font-bold text-slate-900">
            {stats.responseRate}%
          </div>
        </div>
        <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
          <div className="flex items-center gap-2 text-purple-400 mb-1">
            <Clock className="w-4 h-4" />
            <span className="text-xs text-slate-500">{labels.last30Days}</span>
          </div>
          <div className="text-3xl font-bold text-slate-900">
            {stats.recentCount}
          </div>
        </div>
      </div>

      {/* Rating Distribution */}
      <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
        <h4 className="text-sm font-medium text-slate-700 mb-3">
          {labels.distribution}
        </h4>
        <div className="space-y-2">
          {[5, 4, 3, 2, 1].map((rating) => {
            const count = stats.distribution[rating] ?? 0;
            const pct = (count / maxDistribution) * 100;
            return (
              <div key={rating} className="flex items-center gap-3">
                <span className="text-sm text-slate-500 w-6">{rating}</span>
                <Star className="w-3.5 h-3.5 text-yellow-400 fill-current" />
                <div className="flex-1 h-2 bg-slate-200 rounded-full overflow-hidden">
                  <div
                    className="h-full bg-yellow-400 rounded-full transition-all"
                    style={{ width: `${pct}%` }}
                  />
                </div>
                <span className="text-sm text-slate-500 w-8 text-right">
                  {count}
                </span>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}