import * as React from "react";
import {
  Coins,
  MousePointerClick,
  TrendingUp,
  UserPlus,
  Users,
  Wallet,
  type LucideIcon,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { affiliatesTexts } from "@/lib/i18n/affiliates";

export type AffiliateStatsDTO = {
  visits: string;
  registrations: string;
  referrals: string;
  conversionRate: string;
  totalEarnings: string;
  availableEarnings: string;
};

type Tile = {
  key: keyof AffiliateStatsDTO;
  label: string;
  hint: string;
  icon: LucideIcon;
  tint: string;
  mono?: boolean;
  highlight?: boolean;
};

const TILES: Tile[] = [
  {
    key: "visits",
    label: affiliatesTexts.statVisits,
    hint: affiliatesTexts.statVisitsHint,
    icon: MousePointerClick,
    tint: "bg-blue-500/10 text-blue-600 dark:text-blue-400",
    mono: true,
  },
  {
    key: "registrations",
    label: affiliatesTexts.statRegistrations,
    hint: affiliatesTexts.statRegistrationsHint,
    icon: UserPlus,
    tint: "bg-indigo-500/10 text-indigo-600 dark:text-indigo-400",
    mono: true,
  },
  {
    key: "referrals",
    label: affiliatesTexts.statReferrals,
    hint: affiliatesTexts.statReferralsHint,
    icon: Users,
    tint: "bg-violet-500/10 text-violet-600 dark:text-violet-400",
    mono: true,
  },
  {
    key: "conversionRate",
    label: affiliatesTexts.statConversion,
    hint: affiliatesTexts.statConversionHint,
    icon: TrendingUp,
    tint: "bg-cyan-500/10 text-cyan-600 dark:text-cyan-400",
    mono: true,
  },
  {
    key: "totalEarnings",
    label: affiliatesTexts.statTotalEarnings,
    hint: affiliatesTexts.statTotalEarningsHint,
    icon: Coins,
    tint: "bg-amber-500/10 text-amber-600 dark:text-amber-400",
    mono: true,
  },
  {
    key: "availableEarnings",
    label: affiliatesTexts.statAvailableEarnings,
    hint: affiliatesTexts.statAvailableEarningsHint,
    icon: Wallet,
    tint: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
    mono: true,
    highlight: true,
  },
];

export function AffiliateStats({ stats }: { stats: AffiliateStatsDTO }) {
  return (
    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
      {TILES.map((tile) => {
        const Icon = tile.icon;
        return (
          <div
            key={tile.key}
            className={cn(
              "rounded-2xl border bg-card p-5 shadow-sm",
              tile.highlight && "border-emerald-500/30",
            )}
          >
            <div className="flex items-start justify-between gap-3">
              <div className="min-w-0 space-y-1">
                <p className="text-[11px] font-semibold tracking-wider text-muted-foreground uppercase">
                  {tile.label}
                </p>
                <p
                  className={cn(
                    "text-2xl font-semibold tracking-tight",
                    tile.mono ? "font-mono" : "font-display",
                  )}
                >
                  {stats[tile.key]}
                </p>
                <p className="text-xs text-muted-foreground">{tile.hint}</p>
              </div>
              <div
                className={cn(
                  "flex size-9 shrink-0 items-center justify-center rounded-xl",
                  tile.tint,
                )}
              >
                <Icon className="size-[18px]" />
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

export default AffiliateStats;