import { Fragment } from "react";
import type { OrderTypeReport } from "@/lib/api/reports-order-types";
import {
  formatLaporanDateLabel,
  formatLaporanRupiah,
} from "@/lib/laporan/metode-pembayaran";

type LaporanJenisOrderTableProps = {
  result: OrderTypeReport | null;
  isLoading?: boolean;
};

export function LaporanJenisOrderTable({
  result,
  isLoading = false,
}: LaporanJenisOrderTableProps) {
  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-[760px] 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) => (
              <Fragment key={column.type}>
                <th 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">
                  {column.label} (Rp)
                </th>
              </Fragment>
            ))}
          </tr>
        </thead>
        <tbody>
          {result.rows.length === 0 ? (
            <tr>
              <td
                colSpan={result.columns.length * 2 + 2}
                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>
                {row.metrics.map((metric, index) => {
                  const columnType = result.columns[index]?.type ?? index;

                  return (
                    <Fragment key={`${row.date}-${columnType}`}>
                      <td className="text-m-regular px-3 py-3 text-right text-neutral-100">
                        {metric.count}
                      </td>
                      <td className="text-m-regular px-3 py-3 text-right text-neutral-100">
                        {formatLaporanRupiah(metric.amount)}
                      </td>
                    </Fragment>
                  );
                })}
              </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.totals.metrics.map((metric, index) => {
              const columnType = result.columns[index]?.type ?? index;

              return (
                <Fragment key={`total-${columnType}`}>
                  <td className="text-m-medium bg-neutral-20 px-3 py-3 text-right text-neutral-100">
                    {metric.count}
                  </td>
                  <td className="text-m-medium bg-neutral-20 px-3 py-3 text-right text-neutral-100">
                    {formatLaporanRupiah(metric.amount)}
                  </td>
                </Fragment>
              );
            })}
          </tr>
        </tfoot>
      </table>
    </div>
  );
}