"use client";

import { Users, ArrowRight, Gift, TrendingUp } from "lucide-react";

const t = {
  en: {
    totalCodes: "Total Codes",
    totalUses: "Total Uses",
    totalConversions: "Conversions",
    totalRewards: "Rewards Issued",
    conversionRate: "Conversion Rate",
    noData: "No referral data yet",
    funnel: "Conversion Funnel",
  },
  ar: {
    totalCodes: "إجمالي الرموز",
    totalUses: "إجمالي الاستخدامات",
    totalConversions: "التحويلات",
    totalRewards: "المكافآت الصادرة",
    conversionRate: "معدل التحويل",
    noData: "لا توجد بيانات إحالة بعد",
    funnel: "قمع التحويل",
  },
};

interface ReferralStatsData {
  totalCodes: number;
  totalUses: number;
  totalConversions: number;
  totalRewards: number;
  conversionRate: number;
}

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

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

  const funnelSteps = [
    { label: labels.totalUses, value: stats.totalUses, color: "bg-blue-500" },
    {
      label: labels.totalConversions,
      value: stats.totalConversions,
      color: "bg-green-500",
    },
    {
      label: labels.totalRewards,
      value: stats.totalRewards,
      color: "bg-purple-500",
    },
  ];
  const maxFunnel = Math.max(...funnelSteps.map((s) => s.value), 1);

  return (
    <div dir={isAr ? "rtl" : "ltr"}>
      <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-blue-400 mb-1">
            <Users className="w-4 h-4" />
            <span className="text-xs text-slate-500">{labels.totalCodes}</span>
          </div>
          <div className="text-3xl font-bold text-slate-900">
            {stats.totalCodes}
          </div>
        </div>
        <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
          <div className="flex items-center gap-2 text-cyan-400 mb-1">
            <ArrowRight className="w-4 h-4" />
            <span className="text-xs text-slate-500">{labels.totalUses}</span>
          </div>
          <div className="text-3xl font-bold text-slate-900">
            {stats.totalUses}
          </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">
            <TrendingUp className="w-4 h-4" />
            <span className="text-xs text-slate-500">
              {labels.conversionRate}
            </span>
          </div>
          <div className="text-3xl font-bold text-slate-900">
            {stats.conversionRate}%
          </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">
            <Gift className="w-4 h-4" />
            <span className="text-xs text-slate-500">
              {labels.totalRewards}
            </span>
          </div>
          <div className="text-3xl font-bold text-slate-900">
            {stats.totalRewards}
          </div>
        </div>
      </div>

      <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.funnel}
        </h4>
        <div className="space-y-3">
          {funnelSteps.map((step) => (
            <div key={step.label} className="flex items-center gap-3">
              <span className="text-sm text-slate-500 w-28">{step.label}</span>
              <div className="flex-1 h-6 bg-slate-200 rounded-full overflow-hidden">
                <div
                  className={`h-full ${step.color} rounded-full transition-all flex items-center justify-end px-2`}
                  style={{
                    width: `${Math.max((step.value / maxFunnel) * 100, 5)}%`,
                  }}
                >
                  <span className="text-xs font-medium text-white">
                    {step.value}
                  </span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}