"use client";

import Link from "next/link";
import {DataTable, DataTableColumn, DataTableFilter} from "@/components/data-table/data-table";

type PaymentRow = {
  id: string;
  transactionNumber: string;
  bookingNumber: string | null;
  customerName: string;
  amount: number;
  method: string;
  status: string;
  paidAt: string;
};

const statusColors: Record<string, string> = {
  PAID: "bg-green-100 text-green-700",
  PENDING: "bg-yellow-100 text-yellow-700",
  FAILED: "bg-red-100 text-red-700",
  REFUNDED: "bg-slate-100 text-slate-600"
};

const methodLabels: Record<string, string> = {
  CASH: "Cash",
  CARD: "Card",
  BANK_TRANSFER: "Bank Transfer",
  ONLINE_GATEWAY: "Online",
  WALLET: "Wallet"
};

export function PaymentsTable({
  rows,
  tenantSlug,
  locale,
  currency
}: {
  rows: PaymentRow[];
  tenantSlug: string;
  locale: string;
  currency: string;
}) {
  const columns: DataTableColumn<PaymentRow>[] = [
    {
      key: "transactionNumber",
      header: "Transaction #",
      accessor: (r) => r.transactionNumber,
      sortable: true,
      cell: (r) => <span className="font-mono text-xs">{r.transactionNumber}</span>
    },
    {key: "bookingNumber", header: "Booking #", accessor: (r) => r.bookingNumber || "—", sortable: true},
    {key: "customerName", header: "Customer", accessor: (r) => r.customerName},
    {
      key: "amount",
      header: "Amount",
      accessor: (r) => r.amount,
      sortable: true,
      cell: (r) => <span className="font-semibold">{currency} {r.amount}</span>
    },
    {
      key: "method",
      header: "Method",
      accessor: (r) => r.method,
      cell: (r) => methodLabels[r.method] || r.method
    },
    {
      key: "status",
      header: "Status",
      accessor: (r) => r.status,
      cell: (r) => (
        <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${statusColors[r.status] || "bg-slate-100"}`}>
          {r.status}
        </span>
      )
    },
    {key: "paidAt", header: "Date", accessor: (r) => r.paidAt, sortable: true}
  ];

  const filters: DataTableFilter<PaymentRow>[] = [
    {
      key: "status",
      label: "Status",
      options: ["PAID", "PENDING", "FAILED", "REFUNDED"].map((s) => ({label: s, value: s})),
      getValue: (r) => r.status
    },
    {
      key: "method",
      label: "Method",
      options: ["CASH", "CARD", "BANK_TRANSFER", "ONLINE_GATEWAY"].map((m) => ({label: methodLabels[m] || m, value: m})),
      getValue: (r) => r.method
    }
  ];

  return (
    <DataTable
      data={rows}
      columns={columns}
      filters={filters}
      searchPlaceholder="Search payments..."
      emptyMessage="No payments found"
    />
  );
}