import { Receipt, Sparkles, Wallet, type LucideIcon } from "lucide-react";
import { EmptyState } from "@/components/shared/empty-state";
import { StatusBadge } from "@/components/shared/status-badge";
import { formatDateTime } from "@/lib/format";
import { cn } from "@/lib/utils";
import { fundsTexts } from "@/lib/i18n/funds";
import type { HistoryKind, PaymentHistoryRow } from "./types";

const KIND_META: Record<
  HistoryKind,
  { label: string; badge: string; icon: LucideIcon; row: string }
> = {
  PAYMENT: {
    label: fundsTexts.typePayment,
    badge: "bg-blue-100 text-blue-700 dark:bg-blue-500/15 dark:text-blue-400",
    icon: Wallet,
    row: "",
  },
  BONUS: {
    label: fundsTexts.typeBonus,
    badge: "bg-cyan-100 text-cyan-700 dark:bg-cyan-500/15 dark:text-cyan-400",
    icon: Sparkles,
    row: "bg-cyan-500/[0.04] dark:bg-cyan-500/[0.06]",
  },
  FEE: {
    label: fundsTexts.typeFee,
    badge: "bg-slate-100 text-slate-700 dark:bg-slate-500/15 dark:text-slate-300",
    icon: Receipt,
    row: "bg-slate-500/[0.04] dark:bg-slate-500/[0.06]",
  },
};

export function PaymentHistory({ rows }: { rows: PaymentHistoryRow[] }) {
  if (!rows.length) {
    return (
      <EmptyState
        icon={Receipt}
        title={fundsTexts.emptyHistory}
        hint={fundsTexts.emptyHistoryHint}
        className="border-none py-10"
      />
    );
  }

  return (
    <div className="overflow-x-auto">
      <table className="w-full min-w-[640px] text-sm">
        <thead>
          <tr className="border-b text-left text-[11px] uppercase tracking-wider text-muted-foreground">
            <th className="py-2.5 pr-4 font-medium">{fundsTexts.colId}</th>
            <th className="py-2.5 pr-4 font-medium">{fundsTexts.colDate}</th>
            <th className="py-2.5 pr-4 font-medium">{fundsTexts.colType}</th>
            <th className="py-2.5 pr-4 font-medium">{fundsTexts.colMethod}</th>
            <th className="py-2.5 pr-4 text-right font-medium">{fundsTexts.colAmount}</th>
            <th className="py-2.5 text-right font-medium">{fundsTexts.colStatus}</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((row) => {
            const meta = KIND_META[row.kind];
            const Icon = meta.icon;
            return (
              <tr
                key={`${row.kind}-${row.id}`}
                className={cn("border-b last:border-0 transition-colors hover:bg-muted/40", meta.row)}
              >
                <td className="py-3 pr-4">
                  <span
                    className="font-mono text-xs text-muted-foreground"
                    title={row.id}
                  >
                    {row.shortId}
                  </span>
                </td>
                <td className="whitespace-nowrap py-3 pr-4 text-muted-foreground">
                  {formatDateTime(row.createdAt)}
                </td>
                <td className="py-3 pr-4">
                  <span
                    className={cn(
                      "inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium",
                      meta.badge,
                    )}
                  >
                    <Icon className="size-3" />
                    {meta.label}
                  </span>
                </td>
                <td className="py-3 pr-4">
                  <div className="max-w-[220px] truncate">{row.method}</div>
                  {row.note ? (
                    <div className="max-w-[220px] truncate text-xs text-muted-foreground">
                      {row.note}
                    </div>
                  ) : null}
                </td>
                <td
                  className={cn(
                    "whitespace-nowrap py-3 pr-4 text-right font-mono tabular-nums",
                    row.positive
                      ? "text-emerald-600 dark:text-emerald-400"
                      : "text-muted-foreground",
                  )}
                >
                  {row.amount}
                </td>
                <td className="py-3 text-right">
                  <StatusBadge status={row.status} />
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

export default PaymentHistory;