import type { SalesByCategoryReport } from "@/lib/api/reports-sales-by-category";
import { formatLaporanRupiah } from "@/lib/laporan/metode-pembayaran";

type LaporanPenjualanKategoriTableProps = {
  result: SalesByCategoryReport | null;
  isLoading?: boolean;
};

export function LaporanPenjualanKategoriTable({
  result,
  isLoading = false,
}: LaporanPenjualanKategoriTableProps) {
  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) {
    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-[640px] 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">
              Kategori
            </th>
            <th className="text-m-medium bg-neutral-20 px-3 py-2 text-right text-neutral-100">
              Qty
            </th>
            <th className="text-m-medium bg-neutral-20 px-3 py-2 text-right text-neutral-100">
              Nominal
            </th>
          </tr>
        </thead>
        <tbody>
          {result.rows.map((row) => (
            <tr
              key={`${row.rank}-${row.categoryId}`}
              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">
                {row.categoryName}
              </td>
              <td className="text-m-regular px-3 py-3 text-right text-neutral-100">
                {row.qty}
              </td>
              <td className="text-m-regular px-3 py-3 text-right text-neutral-100">
                {formatLaporanRupiah(row.amount)}
              </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>
            <td className="text-m-medium bg-neutral-20 px-3 py-3 text-right text-neutral-100">
              {result.totals.qty}
            </td>
            <td className="text-m-medium bg-neutral-20 px-3 py-3 text-right text-neutral-100">
              {formatLaporanRupiah(result.totals.amount)}
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
  );
}