"use client";

import { Copy, Gift, Loader2 } from "lucide-react";
import { useState } from "react";

const t = {
  en: {
    noReferrals: "No referral codes yet",
    code: "Code",
    name: "Name",
    uses: "Uses",
    conversions: "Conv.",
    rewards: "Rewards",
    status: "Status",
    actions: "Actions",
    copied: "Copied!",
    copy: "Copy",
    active: "Active",
    expired: "Expired",
    paused: "Paused",
    loadMore: "Load More",
  },
  ar: {
    noReferrals: "لا توجد رموز إحالة بعد",
    code: "الرمز",
    name: "الاسم",
    uses: "الاستخدامات",
    conversions: "التحويلات",
    rewards: "المكافآت",
    status: "الحالة",
    actions: "الإجراءات",
    copied: "تم النسخ!",
    copy: "نسخ",
    active: "نشط",
    expired: "منتهي",
    paused: "متوقف",
    loadMore: "تحميل المزيد",
  },
};

interface Referral {
  id: string;
  code: string;
  name: string;
  rewardType: string;
  rewardValue: number;
  rewardCurrency: string;
  uses: number;
  conversions: number;
  rewardsIssued: number;
  maxUses: number | null;
  status: string;
  expiresAt: string | null;
  createdAt: string;
}

export default function ReferralsList({
  lang,
  referrals,
  loading,
  hasMore,
  onLoadMore,
}: {
  lang: string;
  referrals: Referral[];
  loading: boolean;
  hasMore: boolean;
  onLoadMore: () => void;
}) {
  const isAr = lang === "ar";
  const labels = t[isAr ? "ar" : "en"];
  const [copiedId, setCopiedId] = useState<string | null>(null);

  function copyCode(code: string, id: string) {
    navigator.clipboard.writeText(code);
    setCopiedId(id);
    setTimeout(() => setCopiedId(null), 2000);
  }

  const statusColors: Record<string, string> = {
    active: "bg-green-500/20 text-green-400",
    expired: "bg-red-500/20 text-red-400",
    paused: "bg-yellow-500/20 text-yellow-400",
  };

  if (!loading && referrals.length === 0) {
    return (
      <div className="text-center py-8 text-slate-500">
        {labels.noReferrals}
      </div>
    );
  }

  return (
    <div dir={isAr ? "rtl" : "ltr"}>
      <div className="overflow-x-auto">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-slate-200 text-slate-500">
              <th className="text-start py-2 px-3">{labels.code}</th>
              <th className="text-start py-2 px-3">{labels.name}</th>
              <th className="text-center py-2 px-3">{labels.uses}</th>
              <th className="text-center py-2 px-3">{labels.conversions}</th>
              <th className="text-center py-2 px-3">{labels.rewards}</th>
              <th className="text-center py-2 px-3">{labels.status}</th>
              <th className="text-center py-2 px-3">{labels.actions}</th>
            </tr>
          </thead>
          <tbody>
            {referrals.map((ref) => (
              <tr
                key={ref.id}
                className="border-b border-slate-100 hover:bg-slate-50"
              >
                <td className="py-3 px-3">
                  <code className="text-brand-green font-mono text-xs bg-slate-100 px-2 py-1 rounded">
                    {ref.code}
                  </code>
                </td>
                <td className="py-3 px-3 text-slate-900">{ref.name}</td>
                <td className="py-3 px-3 text-center text-slate-600">
                  {ref.uses}
                  {ref.maxUses ? `/${ref.maxUses}` : ""}
                </td>
                <td className="py-3 px-3 text-center text-slate-600">
                  {ref.conversions}
                </td>
                <td className="py-3 px-3 text-center">
                  <span className="inline-flex items-center gap-1 text-slate-600">
                    <Gift className="w-3 h-3" />
                    {ref.rewardsIssued}
                  </span>
                </td>
                <td className="py-3 px-3 text-center">
                  <span
                    className={`px-2 py-0.5 rounded text-xs ${statusColors[ref.status] ?? "bg-slate-100 text-slate-500"}`}
                  >
                    {labels[ref.status as keyof typeof labels] ?? ref.status}
                  </span>
                </td>
                <td className="py-3 px-3 text-center">
                  <button
                    onClick={() => copyCode(ref.code, ref.id)}
                    className="text-slate-500 hover:text-slate-700"
                    title={labels.copy}
                  >
                    {copiedId === ref.id ? (
                      <span className="text-xs text-green-400">
                        {labels.copied}
                      </span>
                    ) : (
                      <Copy className="w-4 h-4" />
                    )}
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {hasMore && (
        <div className="text-center mt-4">
          <button
            onClick={onLoadMore}
            disabled={loading}
            className="text-sm text-brand-green hover:text-brand-green/80 disabled:opacity-50"
          >
            {loading ? (
              <Loader2 className="w-4 h-4 animate-spin inline" />
            ) : (
              labels.loadMore
            )}
          </button>
        </div>
      )}
    </div>
  );
}