"use client";

import { useState } from "react";
import { DataTable } from "../../../components/table/DataTable";
import { userColumns } from "../../../features/users/columns/userColumns";
import { UsersFilters } from "../../../features/users/components/UsersFilters";
import { RowSelectionState } from "@tanstack/react-table";
import { useAppPagination } from "../../../hooks/useAppPagination";
import { HeadingToolbar } from "../../../components/table/toolbars/HeadingToolbar";
import useUsersFetch, {
  AdminUser,
} from "../../../hooks/features/admin/users/useUsersFetch";

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

  const { data, loading, error, isError } = useUsersFetch(pagination);

  if (isError) return <div>Error {error?.message}</div>;

  const fetchedUsers = data?.users ?? [];
  const paginationInfo = data?.pagination;

  return (
    <section className="w-full p-4 md:p-8">
      <DataTable<AdminUser>
        data={fetchedUsers}
        loading={loading}
        columns={userColumns}
        appearance="default"
        size="md"
        getRowId={(user) => user.email}
        rowSelection={rowSelection}
        onRowSelectionChange={setRowSelection}
        onSelectedRowsChange={(rows) => {
          // console.log("Selected users:", rows);
        }}
        toolbar={
          <HeadingToolbar
            title="Users"
            subTitle={`${fetchedUsers.length} User(s) listed`}
            titleClassName=""
            subTitleClassName=""
          />
        }
        filters={
          <UsersFilters
            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:
            "px-6 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:
            "px-6 py-4 font-body font-medium text-base text-table-text relative",
          pagination: "",
        }}
        pagination={{
          controller: pagination,
          pageCount: paginationInfo?.totalPages,
          totalItems: paginationInfo?.total,
        }}
      />
    </section>
  );
}