"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 "../../../features/transactions/columns/transactionColumns";
import { Transaction } from "../../../features/transactions/types/transaction";
import { FilterSearchBar } from "../../../components/table/FilterSearchBar";
import { useAppPagination } from "../../../hooks/useAppPagination";

const transactionsData: Transaction[] = [
  {
    id: 1,
    name: "Alex",
    date: "12 Jun 2026",
    email: "alex@gmail.com",
    title: "Starter",
    amount: 10,
    credits: 100,
    status: "Success",
  },
  {
    id: 2,
    name: "Steve",
    date: "11 Jun 2026",
    email: "steve@gmail.com",
    title: "Standard",
    amount: 25,
    credits: 300,
    status: "Failed",
  },
  {
    id: 3,
    name: "Monica",
    date: "11 Jun 2026",
    email: "monica@gmail.com",
    title: "Pro",
    amount: 50,
    credits: 700,
    status: "Success",
  },
  {
    id: 4,
    name: "Rachel",
    date: "9 Jun 2026",
    email: "rachel@gmail.com",
    title: "Elite",
    amount: 75,
    credits: 1000,
    status: "Success",
  },
  {
    id: 5,
    name: "Mia",
    date: "10 Jun 2026",
    email: "mia@gmail.com",
    title: "Elite",
    amount: 75,
    credits: 1000,
    status: "Success",
  },
  {
    id: 6,
    name: "Chloe",
    date: "10 Jun 2026",
    email: "chloe@gmail.com",
    title: "Standard",
    amount: 25,
    credits: 0,
    status: "Failed",
  },
  {
    id: 7,
    name: "Max",
    date: "4 Jun 2026",
    email: "max@gmail.com",
    title: "Pro",
    amount: 50,
    credits: 700,
    status: "Success",
  },
  {
    id: 8,
    name: "Lucas",
    date: "2 Jun 2026",
    email: "lucas@gmail.com",
    title: "Elite",
    amount: 50,
    credits: 700,
    status: "Success",
  },
  {
    id: 9,
    name: "Jack",
    date: "1 Jun 2026",
    email: "jack@gmail.com",
    title: "Standard",
    amount: 25,
    credits: 300,
    status: "Success",
  },
  {
    id: 10,
    name: "Harvey",
    date: "1 Jun 2026",
    email: "harvey@gmail.com",
    title: "Standard",
    amount: 10,
    credits: 0,
    status: "Failed",
  },
];

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

  return (
    <section className="w-full p-4 md:p-8">
      <DataTable<Transaction>
        data={transactionsData}
        loading={false}
        columns={transactionColumns}
        appearance="default"
        size="md"
        getRowId={(transaction) => String(transaction.id)}
        rowSelection={rowSelection}
        onRowSelectionChange={setRowSelection}
        onSelectedRowsChange={() => {}}
        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: "admin-table relative",
          tableTheadRow: "whitespace-nowrap",
          tableTheadCell:
            "py-3 px-3 xl:px-6 xl:py-4 text-left font-body text-base font-medium text-heading relative",
          tableTbody: "admin-table relative",
          tableTbodyRow: `
            hover:bg-link-1/10 transition-colors
            [&>td]:border-b [&>td]:border-white
            first:[&>td:first-child]:rounded-tl-xl
            first:[&>td:last-child]:rounded-tr-xl
            last:[&>td:first-child]:rounded-bl-xl
            last:[&>td:last-child]:rounded-br-xl
          `,
          tableTbodyCell:
            "py-2 px-3 xl:px-6 xl:py-5 font-body font-medium text-sm xl:text-base text-table-text relative",
          pagination: "",
        }}
      />
    </section>
  );
}