import * as React from "react";
import { Banknote } from "lucide-react";
import { EmptyState } from "@/components/shared/empty-state";
import { StatusBadge } from "@/components/shared/status-badge";
import { formatDateTime } from "@/lib/format";
import { affiliatesTexts } from "@/lib/i18n/affiliates";

export type PayoutRowDTO = {
  id: string;
  shortId: string;
  amount: string;
  status: string;
  note: string;
  createdAt: string;
  processedAt: string;
};

export function PayoutHistory({ rows }: { rows: PayoutRowDTO[] }) {
  return (
    <div className="rounded-2xl border bg-card shadow-sm">
      <div className="border-b px-5 py-4 sm:px-6">
        <h2 className="font-display text-base font-semibold tracking-tight">
          {affiliatesTexts.payoutHistoryTitle}
        </h2>
      </div>

      {rows.length === 0 ? (
        <div className="p-5 sm:p-6">
          <EmptyState
            icon={Banknote}
            title={affiliatesTexts.payoutEmptyTitle}
            hint={affiliatesTexts.payoutEmptyHint}
            className="border-0 bg-muted/25 py-10"
          />
        </div>
      ) : (
        <div className="overflow-x-auto">
          <table className="w-full min-w-[680px] text-sm">
            <thead>
              <tr className="border-b text-left">
                <th className="px-5 py-2.5 text-xs font-semibold tracking-wide text-muted-foreground uppercase sm:px-6">
                  {affiliatesTexts.payoutColumnId}
                </th>
                <th className="px-5 py-2.5 text-xs font-semibold tracking-wide text-muted-foreground uppercase sm:px-6">
                  {affiliatesTexts.payoutColumnDate}
                </th>
                <th className="px-5 py-2.5 text-xs font-semibold tracking-wide text-muted-foreground uppercase sm:px-6">
                  {affiliatesTexts.payoutColumnAmount}
                </th>
                <th className="px-5 py-2.5 text-xs font-semibold tracking-wide text-muted-foreground uppercase sm:px-6">
                  {affiliatesTexts.payoutColumnStatus}
                </th>
                <th className="px-5 py-2.5 text-xs font-semibold tracking-wide text-muted-foreground uppercase sm:px-6">
                  {affiliatesTexts.payoutColumnProcessed}
                </th>
                <th className="px-5 py-2.5 text-xs font-semibold tracking-wide text-muted-foreground uppercase sm:px-6">
                  {affiliatesTexts.payoutColumnNote}
                </th>
              </tr>
            </thead>
            <tbody>
              {rows.map((row) => (
                <tr key={row.id} className="border-b last:border-0">
                  <td className="px-5 py-3 font-mono text-xs text-muted-foreground sm:px-6">
                    {row.shortId}
                  </td>
                  <td className="px-5 py-3 whitespace-nowrap sm:px-6">
                    {formatDateTime(row.createdAt)}
                  </td>
                  <td className="px-5 py-3 font-mono font-medium whitespace-nowrap sm:px-6">
                    {row.amount}
                  </td>
                  <td className="px-5 py-3 sm:px-6">
                    <StatusBadge status={row.status} />
                  </td>
                  <td className="px-5 py-3 whitespace-nowrap text-muted-foreground sm:px-6">
                    {row.processedAt ? formatDateTime(row.processedAt) : "—"}
                  </td>
                  <td className="px-5 py-3 text-muted-foreground sm:px-6">
                    {row.note || "—"}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}

export default PayoutHistory;