'use client'

import * as React from 'react'
import type { User } from '@admin/types/auth'
import type { ColumnDef } from '@tanstack/react-table'
import { authClient } from '@admin/auth/client'
import {
  DataGrid,
  DataGridBody,
  DataGridCell,
  DataGridHead,
  DataGridHeader,
  DataGridRow
} from '@admin/components/shared/data-table/data-grid'
import { DataTablePagination } from '@admin/components/shared/data-table/data-table-pagination'
import { useTableUtils } from '@admin/hooks/use-table-utils'
import { useUsers } from '@admin/hooks/use-users'
import { cn } from '@admin/utils/shared/cn'
import { getUsersPage } from '@admin/utils/user/get-users-page'
import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
import { GripVertical } from 'lucide-react'
import { parseAsInteger, parseAsString, useQueryStates } from 'nuqs'

interface UsersTableProps<TValue> extends React.HTMLAttributes<HTMLDivElement> {
  columns: ColumnDef<User, TValue>[]
  role?: string
  search?: string
  status?: string
}

export function UsersTable<TValue>({
  columns,
  role,
  search,
  status,
  className
}: UsersTableProps<TValue>) {
  const defaultPageSize = 20
  const { data: session } = authClient.useSession()
  const { data, error, isPending } = useUsers()
  const [{ dir: sortDir, page: pageIndex, size: pageSize, sort: sortField }, setTableQuery] =
    useQueryStates({
      dir: parseAsString.withDefault(''),
      page: parseAsInteger.withDefault(0),
      size: parseAsInteger.withDefault(defaultPageSize),
      sort: parseAsString.withDefault('')
    })
  const safePageIndex = Number.isFinite(pageIndex) && pageIndex > 0 ? pageIndex : 0
  const safePageSize =
    pageSize === -1 || (Number.isFinite(pageSize) && pageSize > 0) ? pageSize : defaultPageSize
  const tablePage = React.useMemo(
    () =>
      getUsersPage(data?.users ?? [], {
        pageIndex: safePageIndex,
        pageSize: safePageSize,
        role,
        search,
        sortDir: sortDir === 'desc' ? 'desc' : sortDir === 'asc' ? 'asc' : undefined,
        sortField: sortField || undefined,
        status
      }),
    [data?.users, role, safePageIndex, safePageSize, search, sortDir, sortField, status]
  )
  const tableData = tablePage.users
  const totalRows = tablePage.total
  const effectivePageSize = safePageSize === -1 ? totalRows : safePageSize
  const pageCount = effectivePageSize > 0 ? Math.ceil(totalRows / effectivePageSize) : 1
  const shouldShowPagination = totalRows > defaultPageSize
  const {
    columnSizing,
    handleColumnSizingChange,
    handlePaginationChange,
    handleSortingChange,
    hoveredColumnId,
    registerTable,
    resetColumnSizingToContainer,
    sorting,
    setHoveredColumnId,
    tableContainerRef
  } = useTableUtils<User>({
    pageIndex: safePageIndex,
    pageSize: effectivePageSize,
    setPageIndex: (nextPageIndex) => setTableQuery({ page: nextPageIndex }),
    setSortingParams: ({
      pageIndex: nextPageIndex,
      sortDir: nextSortDir,
      sortField: nextSortField
    }) =>
      setTableQuery({
        dir: nextSortDir,
        page: nextPageIndex,
        sort: nextSortField
      }),
    sortDir,
    sortField
  })

  const table = useReactTable({
    data: tableData,
    columns,
    columnResizeMode: 'onChange',
    defaultColumn: {
      minSize: 48,
      size: 220
    },
    getCoreRowModel: getCoreRowModel(),
    manualPagination: true,
    manualSorting: true,
    pageCount,
    rowCount: totalRows,
    onSortingChange: handleSortingChange,
    onColumnSizingChange: handleColumnSizingChange,
    onPaginationChange: handlePaginationChange,
    meta: {
      currentUser: session?.user
        ? {
            id: session.user.id,
            email: session.user.email,
            name: session.user.name,
            image: session.user.image,
            role: (session.user as { role?: string }).role || 'member'
          }
        : null
    },
    state: {
      sorting,
      columnSizing,
      pagination: {
        pageIndex: safePageIndex,
        pageSize: effectivePageSize
      }
    }
  })
  registerTable(table)
  const gridTemplateColumns = table
    .getVisibleLeafColumns()
    .map((column) => `${column.getSize()}px`)
    .join(' ')

  return (
    <div className={cn('flex h-full flex-col gap-6 pt-px pb-2', className)}>
      <DataGrid
        containerClassName="min-h-0 flex-1"
        containerRef={tableContainerRef}
        gridTemplateColumns={gridTemplateColumns}
        style={{ width: table.getTotalSize() }}
      >
        <DataGridHeader>
          {table.getHeaderGroups().map((headerGroup) => (
            <DataGridRow key={headerGroup.id}>
              {headerGroup.headers.map((header, headerIndex) => {
                const resizeLabel =
                  typeof header.column.columnDef.header === 'string'
                    ? header.column.columnDef.header
                    : header.column.id
                const nextHeader = headerGroup.headers[headerIndex + 1]
                const canResizeColumn =
                  header.column.getCanResize() && nextHeader?.column.getCanResize() === true
                return (
                  <DataGridHead
                    key={header.id}
                    className="group/resize-header relative overflow-hidden px-4"
                    data-column-id={header.column.id}
                    onMouseEnter={() => setHoveredColumnId(header.column.id)}
                    onMouseLeave={() =>
                      setHoveredColumnId((current) =>
                        current === header.column.id ? null : current
                      )
                    }
                  >
                    {header.isPlaceholder
                      ? null
                      : flexRender(header.column.columnDef.header, header.getContext())}
                    {canResizeColumn ? (
                      <button
                        type="button"
                        aria-label={`Resize ${resizeLabel} column`}
                        className="group/resize-handle absolute top-0 right-0 z-10 flex h-full w-5 cursor-col-resize touch-none items-center justify-center text-muted-foreground opacity-0 transition-opacity select-none group-focus-within/resize-header:opacity-100 hover:text-foreground focus-visible:text-foreground focus-visible:opacity-100 focus-visible:outline-none data-[column-hovered=true]:opacity-100 data-[resizing=true]:opacity-100"
                        data-resize-handle
                        data-column-hovered={
                          hoveredColumnId === header.column.id ? 'true' : 'false'
                        }
                        data-resizing={header.column.getIsResizing() ? 'true' : 'false'}
                        onDoubleClick={resetColumnSizingToContainer}
                        onMouseDown={header.getResizeHandler()}
                        onTouchStart={header.getResizeHandler()}
                      >
                        <GripVertical
                          aria-hidden="true"
                          className={cn('size-3.5', {
                            'text-ring': header.column.getIsResizing()
                          })}
                        />
                      </button>
                    ) : null}
                  </DataGridHead>
                )
              })}
            </DataGridRow>
          ))}
        </DataGridHeader>
        <DataGridBody>
          {isPending ? (
            <DataGridRow>
              <DataGridCell
                className="flex h-24 items-center justify-center px-4 text-center"
                style={{ gridColumn: '1 / -1' }}
              >
                <div className="text-muted-foreground">Loading users…</div>
              </DataGridCell>
            </DataGridRow>
          ) : error ? (
            <DataGridRow>
              <DataGridCell
                className="flex h-24 items-center justify-center px-4 text-center"
                style={{ gridColumn: '1 / -1' }}
              >
                <div className="text-destructive">Failed to load users. Refresh to try again.</div>
              </DataGridCell>
            </DataGridRow>
          ) : table.getRowModel().rows?.length ? (
            table.getRowModel().rows.map((row) => (
              <DataGridRow key={row.id} className="hover:bg-muted/50">
                {row.getVisibleCells().map((cell) => (
                  <DataGridCell
                    key={cell.id}
                    data-column-id={cell.column.id}
                    onMouseEnter={() => setHoveredColumnId(cell.column.id)}
                    onMouseLeave={() =>
                      setHoveredColumnId((current) => (current === cell.column.id ? null : current))
                    }
                    className="px-4"
                  >
                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                  </DataGridCell>
                ))}
              </DataGridRow>
            ))
          ) : (
            <DataGridRow>
              <DataGridCell
                className="flex h-24 items-center justify-center px-4 text-center"
                style={{ gridColumn: '1 / -1' }}
              >
                No users found.
              </DataGridCell>
            </DataGridRow>
          )}
        </DataGridBody>
      </DataGrid>

      {shouldShowPagination ? (
        <DataTablePagination
          table={table}
          paginationMode="controlled"
          pageSize={safePageSize}
          pageIndex={safePageIndex}
          pageCount={pageCount}
          setPageIndex={(nextPageIndex) => setTableQuery({ page: nextPageIndex })}
          setPageSize={(nextPageSize) => setTableQuery({ page: 0, size: nextPageSize })}
        />
      ) : null}
    </div>
  )
}