'use client';

import { Table } from '@tanstack/react-table';
import SearchableSelect from '@/components/SearchableSelect';

interface DataTablePaginationProps<TData> {
  table: Table<TData>;
  pageSizeOptions?: number[];
}

export function DataTablePagination<TData>({
  table,
  pageSizeOptions = [10, 25, 50, 100],
}: DataTablePaginationProps<TData>) {
  const pageIndex = table.getState().pagination.pageIndex;
  const pageSize = table.getState().pagination.pageSize;
  const pageCount = table.getPageCount();
  const totalRows = table.getFilteredRowModel().rows.length;

  return (
    <div className="flex flex-col sm:flex-row items-center justify-between gap-4 px-6 py-4 border-t border-slate-150 dark:border-slate-800/80 text-xs text-slate-500 dark:text-slate-400 font-semibold bg-slate-50/50 dark:bg-slate-950/20">
      <div className="flex-1 text-slate-400 dark:text-slate-500">
        {totalRows > 0 ? (
          <>
            Showing <span className="text-slate-700 dark:text-slate-300">{pageIndex * pageSize + 1}</span> to{' '}
            <span className="text-slate-700 dark:text-slate-300">
              {Math.min((pageIndex + 1) * pageSize, totalRows)}
            </span> of <span className="text-slate-700 dark:text-slate-300">{totalRows}</span> record
            {totalRows === 1 ? '' : 's'}
          </>
        ) : (
          'No records available'
        )}
      </div>
      <div className="flex flex-wrap items-center gap-4 sm:gap-6">
        <div className="flex items-center gap-2">
          <span>Rows per page</span>
          <SearchableSelect
            value={pageSize}
            onChange={(val) => {
              table.setPageSize(Number(val));
            }}
            className="w-20 font-extrabold"
            isClearable={false}
            menuPlacement="top"
            options={pageSizeOptions.map((size) => ({
              value: size,
              label: String(size),
            }))}
          />
        </div>
        <div className="flex items-center gap-1">
          <button
            onClick={() => table.setPageIndex(0)}
            disabled={!table.getCanPreviousPage()}
            className="w-8 h-8 flex items-center justify-center rounded-none border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 hover:bg-slate-50 dark:hover:bg-slate-800 disabled:opacity-40 disabled:hover:bg-white dark:disabled:hover:bg-slate-900 transition cursor-pointer text-slate-650 dark:text-slate-300"
            title="First Page"
          >
            <i className="fa-solid fa-angles-left"></i>
          </button>
          <button
            onClick={() => table.previousPage()}
            disabled={!table.getCanPreviousPage()}
            className="w-8 h-8 flex items-center justify-center rounded-none border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 hover:bg-slate-50 dark:hover:bg-slate-800 disabled:opacity-40 disabled:hover:bg-white dark:disabled:hover:bg-slate-900 transition cursor-pointer text-slate-650 dark:text-slate-300"
            title="Previous Page"
          >
            <i className="fa-solid fa-angle-left"></i>
          </button>
          <span className="px-2 select-none">
            Page <strong className="text-slate-800 dark:text-slate-200 font-extrabold">{pageIndex + 1}</strong> of{' '}
            <strong className="text-slate-800 dark:text-slate-200 font-extrabold">{pageCount || 1}</strong>
          </span>
          <button
            onClick={() => table.nextPage()}
            disabled={!table.getCanNextPage()}
            className="w-8 h-8 flex items-center justify-center rounded-none border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 hover:bg-slate-50 dark:hover:bg-slate-800 disabled:opacity-40 disabled:hover:bg-white dark:disabled:hover:bg-slate-900 transition cursor-pointer text-slate-650 dark:text-slate-300"
            title="Next Page"
          >
            <i className="fa-solid fa-angle-right"></i>
          </button>
          <button
            onClick={() => table.setPageIndex(pageCount - 1)}
            disabled={!table.getCanNextPage()}
            className="w-8 h-8 flex items-center justify-center rounded-none border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 hover:bg-slate-50 dark:hover:bg-slate-800 disabled:opacity-40 disabled:hover:bg-white dark:disabled:hover:bg-slate-900 transition cursor-pointer text-slate-650 dark:text-slate-300"
            title="Last Page"
          >
            <i className="fa-solid fa-angles-right"></i>
          </button>
        </div>
      </div>
    </div>
  );
}