"use client";

import { useState } from "react";
import { DataTable } from "../../../components/table/DataTable";
import { RowSelectionState } from "@tanstack/react-table";
import { useAppPagination } from "../../../hooks/useAppPagination";
import { HeadingToolbar } from "../../../components/table/toolbars/HeadingToolbar";
import useContactRequestsFetch, {
  AdminContactRequest,
} from "../../../hooks/features/admin/contact/useContactRequestsFetch";
import { contactColumns } from "../../../components/table/features/contacts/columns/contactColumns";
import SomethingWentWrong from "../../../components/SomethingWentWrong";

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

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

  const fetchedContacts = data?.contacts ?? [];
  const paginationInfo = data?.pagination;

  return (
    <section className="w-full p-4 pt-6 2xl:pt-8 2xl:p-8">
      {isError ? (
        <SomethingWentWrong
          variant="section"
          title="Unable to load contact requests"
          description="The contact requests table failed to load. Please try again."
          onRetry={() => pagination.patch({})}
          buttonText=""
        />
      ) : (
        <DataTable<AdminContactRequest>
          data={fetchedContacts}
          loading={loading}
          columns={contactColumns}
          appearance="default"
          size="md"
          getRowId={(contact) => contact.uuid}
          rowSelection={rowSelection}
          sorting={pagination.sortingConfig}
          onRowSelectionChange={setRowSelection}
          onSelectedRowsChange={(rows) => {
            // console.log("Selected contacts:", rows);
          }}
          toolbar={
            <HeadingToolbar
              title="Contact Requests"
              subTitle={`${fetchedContacts.length} Contact Request(s) listed`}
              titleClassName=""
              subTitleClassName=""
            />
          }
          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: paginationInfo?.totalPages,
            totalItems: paginationInfo?.total,
          }}
        />
      )}
    </section>
  );
}