import type { OrderItem } from "@/lib/api/orders";
import { formatRupiah } from "@/lib/orders/format";

type DetailPesananItemsTableProps = {
  items: OrderItem[];
};

export function DetailPesananItemsTable({
  items,
}: DetailPesananItemsTableProps) {
  const totalQty = items.reduce((sum, item) => sum + item.qty, 0);
  const totalPaidQty = items.reduce((sum, item) => sum + item.paidQty, 0);
  const totalSubtotal = items.reduce((sum, item) => sum + item.subtotal, 0);

  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-10 bg-neutral-20 px-3 py-2 text-center text-neutral-100">
              #
            </th>
            <th className="text-m-medium bg-neutral-20 px-3 py-2 text-left text-neutral-100">
              Menu
            </th>
            <th className="text-m-medium bg-neutral-20 px-3 py-2 text-left text-neutral-100">
              Stand
            </th>
            <th className="text-m-medium bg-neutral-20 px-3 py-2 text-left text-neutral-100">
              Harga Jual
            </th>
            <th className="text-m-medium bg-neutral-20 px-3 py-2 text-left text-neutral-100">
              Qty
            </th>
            <th className="text-m-medium bg-neutral-20 px-3 py-2 text-left text-neutral-100">
              Subtotal
            </th>
            <th className="text-m-medium bg-neutral-20 px-3 py-2 text-left text-neutral-100">
              Catatan
            </th>
          </tr>
        </thead>
        <tbody>
          {items.length === 0 ? (
            <tr>
              <td
                colSpan={7}
                className="text-m-regular px-3 py-8 text-center text-neutral-80"
              >
                Belum ada item pesanan.
              </td>
            </tr>
          ) : (
            items.map((item, index) => (
              <tr
                key={item.id}
                className="border-b border-neutral-20 last:border-0"
              >
                <td className="text-m-regular px-3 py-3 text-center align-top text-neutral-100">
                  {index + 1}
                </td>
                <td className="px-3 py-3 align-top">
                  <div className="flex flex-col gap-0.5">
                    <span className="text-m-regular text-neutral-100">
                      {item.menuName}
                    </span>
                    <span className="text-s-regular text-neutral-80">
                      Kode: {item.menuCode}
                    </span>
                  </div>
                </td>
                <td className="text-m-regular px-3 py-3 align-top text-neutral-100">
                  {item.standName}
                </td>
                <td className="text-m-regular px-3 py-3 align-top text-neutral-100">
                  {formatRupiah(item.unitPrice)}
                </td>
                <td className="px-3 py-3 align-top">
                  <div className="flex flex-col gap-0.5">
                    <span className="text-m-regular text-neutral-100">
                      {item.qty}
                    </span>
                    <span className="text-s-regular text-neutral-80">
                      Terbayar: {item.paidQty}
                    </span>
                  </div>
                </td>
                <td className="text-m-regular px-3 py-3 align-top text-neutral-100">
                  {formatRupiah(item.subtotal)}
                </td>
                <td className="text-m-regular px-3 py-3 align-top text-neutral-100">
                  {item.note}
                </td>
              </tr>
            ))
          )}
        </tbody>
        {items.length > 0 ? (
          <tfoot>
            <tr className="border-t border-neutral-40">
              <td
                colSpan={4}
                className="text-m-medium px-3 py-3 text-neutral-100"
              >
                Total
              </td>
              <td className="text-m-medium px-3 py-3 text-neutral-100">
                {totalQty} ({totalPaidQty})
              </td>
              <td className="text-m-medium px-3 py-3 text-neutral-100">
                {formatRupiah(totalSubtotal)}
              </td>
              <td />
            </tr>
          </tfoot>
        ) : null}
      </table>
    </div>
  );
}