import type { PaymentMethodReport } from "@/lib/api/reports-payment-methods";
import {
  formatLaporanDateLabel,
  formatLaporanRupiah,
} from "@/lib/laporan/metode-pembayaran";

type LaporanMetodePembayaranTableProps = {
  result: PaymentMethodReport | null;
  isLoading?: boolean;
};

export function LaporanMetodePembayaranTable({
  result,
  isLoading = false,
}: LaporanMetodePembayaranTableProps) {
  if (isLoading) {
    return (
      <p className="text-m-regular text-neutral-80">Memuat laporan...</p>
    );
  }

  if (!result) {
    return (
      <p className="text-m-regular rounded-lg border border-dashed border-neutral-40 bg-neutral-20 px-5 py-8 text-center text-neutral-80">
        Pilih filter lalu tekan Cari untuk menampilkan laporan.
      </p>
    );
  }

  if (result.rows.length === 0 && result.columns.length === 0) {
    return (
      <p className="text-m-regular rounded-lg border border-dashed border-neutral-40 bg-neutral-20 px-5 py-8 text-center text-neutral-80">
        Tidak ada data laporan untuk filter ini.
      </p>
    );
  }

  return (
    <div className="-mx-5 min-w-0 overflow-x-auto px-5">
      <table className="min-w-[720px] w-full border-collapse">
        <thead>
          <tr>
            <th className="text-m-medium w-12 bg-neutral-20 px-3 py-2 text-left text-neutral-100">
              #
            </th>
            <th className="text-m-medium bg-neutral-20 px-3 py-2 text-left text-neutral-100">
              Tanggal
            </th>
            {result.columns.map((column) => (
              <th
                key={column.paymentMethodId}
                className="text-m-medium bg-neutral-20 px-3 py-2 text-right text-neutral-100"
              >
                {column.label}
              </th>
            ))}
            <th className="text-m-medium bg-neutral-20 px-3 py-2 text-right text-neutral-100">
              Total
            </th>
          </tr>
        </thead>
        <tbody>
          {result.rows.length === 0 ? (
            <tr>
              <td
                colSpan={result.columns.length + 3}
                className="text-m-regular px-3 py-8 text-center text-neutral-80"
              >
                Tidak ada transaksi pada rentang tanggal ini.
              </td>
            </tr>
          ) : (
            result.rows.map((row) => (
              <tr
                key={`${row.rank}-${row.date}`}
                className="border-b border-neutral-20 last:border-0"
              >
                <td className="text-m-regular px-3 py-3 text-neutral-100">
                  {row.rank}
                </td>
                <td className="text-m-regular px-3 py-3 text-neutral-100">
                  {formatLaporanDateLabel(row.date)}
                </td>
                {result.columns.map((column, columnIndex) => (
                  <td
                    key={`${row.date}-${column.paymentMethodId}`}
                    className="text-m-regular px-3 py-3 text-right text-neutral-100"
                  >
                    {formatLaporanRupiah(row.amounts[columnIndex] ?? 0)}
                  </td>
                ))}
                <td className="text-m-regular px-3 py-3 text-right text-neutral-100">
                  {formatLaporanRupiah(row.total)}
                </td>
              </tr>
            ))
          )}
        </tbody>
        <tfoot>
          <tr>
            <td className="bg-neutral-20 px-3 py-3" colSpan={2}>
              <span className="text-m-medium text-neutral-100">Total</span>
            </td>
            {result.columns.map((column, columnIndex) => (
              <td
                key={`total-${column.paymentMethodId}`}
                className="text-m-medium bg-neutral-20 px-3 py-3 text-right text-neutral-100"
              >
                {formatLaporanRupiah(result.totals.amounts[columnIndex] ?? 0)}
              </td>
            ))}
            <td className="text-m-medium bg-neutral-20 px-3 py-3 text-right text-neutral-100">
              {formatLaporanRupiah(result.totals.grandTotal)}
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
  );
}