"use client";

import { useState } from "react";
import { RowSelectionState } from "@tanstack/react-table";
import { DataTable } from "../../../components/table/DataTable";
import { HeadingToolbar } from "../../../components/table/toolbars/HeadingToolbar";
import { transactionColumns } from "../../../components/table/features/transactions/columns/transactionColumns";
import { Transaction } from "../../../components/table/features/transactions/types/transaction";
import { FilterSearchBar } from "../../../components/table/FilterSearchBar";
import { useAppPagination } from "../../../hooks/useAppPagination";
import useAdminTransactionsFetch from "../../../hooks/features/admin/transactions/useTransactionsFetch";
import ClientWrapper from "../../../components/ClientWrapper";
import SomethingWentWrong from "../../../components/SomethingWentWrong";

export default function AdminTransactionsPage() {
  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
  const pagination = useAppPagination();

  const { response, error, loading, isError } =
    useAdminTransactionsFetch(pagination);

  const transactionsData = response?.data || [];
  const meta = response?.meta;

  return (
    <ClientWrapper fallback={null}>
      <section className="w-full p-4 pt-6 2xl:pt-8 2xl:p-8">
        {isError ? (
          <SomethingWentWrong
            variant="section"
            title="Unable to load transactions"
            description="This transaction list failed to load. Please try again."
            onRetry={() => pagination.patch({})}
            buttonText=""
          />
        ) : (
          <DataTable<Transaction>
            data={transactionsData}
            loading={loading}
            columns={transactionColumns}
            appearance="default"
            size="md"
            getRowId={(transaction) => String(transaction.id)}
            rowSelection={rowSelection}
            onRowSelectionChange={setRowSelection}
            onSelectedRowsChange={() => {}}
            sorting={pagination.sortingConfig}
            toolbar={
              <HeadingToolbar
                title="Transactions"
                subTitle={`${transactionsData.length} Transaction(s) listed`}
                titleClassName=""
                subTitleClassName=""
              />
            }
            filters={
              <FilterSearchBar
                value={pagination.params.searchQuery}
                onSearch={(value) => {
                  pagination.patch({
                    searchQuery: value,
                  });
                }}
              />
            }
            classNames={{
              root: "",
              toolbar: "flex items-center gap-3",
              filters: "flex items-center gap-2",
              table: "min-w-full",
              tableThead: "bg-slate-100 border-t-2 border-slate-400  relative",
              tableTheadRow: "whitespace-nowrap",
              tableTheadCell:
                "px-3 py-2 2xl:p-3 text-left font-body text-sm 2xl:text-base font-medium text-heading relative",
              tableTbody: "border-t border-slate-300/50 relative",
              tableTbodyRow: `
                hover:bg-link-1/10 transition-colors
                [&>td]:border-b [&>td]:border-gray-200
              `,
              tableTbodyCell:
                "py-2 px-3 font-body text-[13px] 2xl:text-sm text-table-text relative",
              pagination: "",
            }}
            pagination={{
              controller: pagination,
              pageCount: meta?.totalPages,
              totalItems: meta?.total,
            }}
          />
        )}
      </section>
    </ClientWrapper>
  );
}