"use client"

/**
 * DataTablePaginated<TData> — DataTable with a bottom pagination bar
 *
 * Adds:
 *   • "No. of Row" page-size selector
 *   • First / Previous / Next / Last page buttons
 *   • "{from}–{to} of {total}" status span (role="status" aria-live="polite")
 *   • Keyboard: Left/Right arrow keys on the pagination bar change page
 *
 * Everything else (columns, pinning, resize, DnD, sort, filters, group,
 * selection) is identical to DataTable — they share useTableState.
 *
 * Props: DataTableProps<TData> & { pagination?: PaginationConfig }
 */

import * as React from "react"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "../ui/dropdown-menu"
import { Tip } from "../ui/tip"
import { TooltipProvider } from "../ui/tooltip"
import { useSidebarReflowZoom } from "../../hooks/use-sidebar-reflow-zoom"
import { cn } from "../../lib/utils"
import { DataTable, type DataTableExtendedProps } from "./index"
import type { PaginationConfig } from "./types"
import type { useTableState } from "./use-table-state"

// ─────────────────────────────────────────────────────────────────────────────
// PaginationBar
// ─────────────────────────────────────────────────────────────────────────────

interface PaginationBarProps {
  page: number
  pageSize: number
  total: number
  pageSizeOptions: number[]
  onPageChange: (p: number) => void
  onPageSizeChange: (n: number) => void
}

export function PaginationBar({
  page,
  pageSize,
  total,
  pageSizeOptions,
  onPageChange,
  onPageSizeChange,
}: PaginationBarProps) {
  const reflowZoom = useSidebarReflowZoom()
  const totalPages = Math.max(1, Math.ceil(total / pageSize))
  const from = Math.min((page - 1) * pageSize + 1, total)
  const to   = Math.min(page * pageSize, total)
  const rangeLabel = total === 0 ? "0 results" : `${from}–${to} of ${total}`

  function handleKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
    if (e.key === "ArrowLeft" && page > 1) {
      e.preventDefault()
      onPageChange(page - 1)
    } else if (e.key === "ArrowRight" && page < totalPages) {
      e.preventDefault()
      onPageChange(page + 1)
    }
  }

  return (
    <div
      role="toolbar"
      aria-label="Table pagination"
      tabIndex={0}
      className={cn(
        "flex min-w-0 flex-nowrap items-center justify-between gap-2 border-t border-border bg-background py-2.5 text-sm select-none",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
        reflowZoom ? "px-2" : "px-3 sm:px-4",
      )}
      onKeyDown={handleKeyDown}
    >
      <div className="flex min-w-0 shrink items-center gap-2 text-muted-foreground">
        <span className="shrink-0 whitespace-nowrap">No. of Row</span>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <button
              type="button"
              aria-label="No. of Row"
              className="inline-flex shrink-0 items-center gap-1 rounded border border-input bg-background px-2 py-1 text-sm text-foreground hover:bg-interactive-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
            >
              {pageSize}
              <i className="fa-light fa-chevron-down text-xs" aria-hidden="true" />
            </button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="start" className="w-20">
            {pageSizeOptions.map(n => (
              <DropdownMenuItem key={n} onClick={() => onPageSizeChange(n)}>
                {n}
              </DropdownMenuItem>
            ))}
          </DropdownMenuContent>
        </DropdownMenu>
        <output
          aria-live="polite"
          className={cn(
            "shrink-0 whitespace-nowrap tabular-nums",
            reflowZoom && "sr-only",
          )}
        >
          {rangeLabel}
        </output>
      </div>

      <TooltipProvider>
        <div className="flex shrink-0 items-center gap-0.5 sm:gap-1">
          <Tip label="First page" side="top">
            <button
              type="button"
              aria-label="First page"
              disabled={page === 1}
              onClick={() => onPageChange(1)}
              data-compact-touch
              className={cn(
                "inline-flex aspect-square size-7 shrink-0 items-center justify-center rounded transition-colors hover:bg-interactive-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40",
                reflowZoom && "hidden",
              )}
            >
              <i className="fa-light fa-chevrons-left text-xs" aria-hidden="true" />
            </button>
          </Tip>
          <Tip label="Previous page" side="top">
            <button
              type="button"
              aria-label="Previous page"
              disabled={page === 1}
              onClick={() => onPageChange(page - 1)}
              data-compact-touch
              className="inline-flex aspect-square size-7 shrink-0 items-center justify-center rounded transition-colors hover:bg-interactive-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40"
            >
              <i className="fa-light fa-chevron-left text-xs" aria-hidden="true" />
            </button>
          </Tip>
          <span className="whitespace-nowrap px-1 tabular-nums text-muted-foreground sm:px-1.5">
            {page} / {totalPages}
          </span>
          <Tip label="Next page" side="top">
            <button
              type="button"
              aria-label="Next page"
              disabled={page >= totalPages}
              onClick={() => onPageChange(page + 1)}
              data-compact-touch
              className="inline-flex aspect-square size-7 shrink-0 items-center justify-center rounded transition-colors hover:bg-interactive-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40"
            >
              <i className="fa-light fa-chevron-right text-xs" aria-hidden="true" />
            </button>
          </Tip>
          <Tip label="Last page" side="top">
            <button
              type="button"
              aria-label="Last page"
              disabled={page >= totalPages}
              onClick={() => onPageChange(totalPages)}
              data-compact-touch
              className={cn(
                "inline-flex aspect-square size-7 shrink-0 items-center justify-center rounded transition-colors hover:bg-interactive-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40",
                reflowZoom && "hidden",
              )}
            >
              <i className="fa-light fa-chevrons-right text-xs" aria-hidden="true" />
            </button>
          </Tip>
        </div>
      </TooltipProvider>
    </div>
  )
}

// ─────────────────────────────────────────────────────────────────────────────
// DataTablePaginated<TData>
// ─────────────────────────────────────────────────────────────────────────────

export interface DataTablePaginatedProps<TData extends Record<string, unknown>>
  extends DataTableExtendedProps<TData> {
  pagination?: PaginationConfig
}

export function DataTablePaginated<TData extends Record<string, unknown>>({
  data,
  columns,
  pagination,
  defaultSort,
  ...rest
}: DataTablePaginatedProps<TData>) {
  const config = {
    pageSize: pagination?.pageSize ?? 10,
    pageSizeOptions: pagination?.pageSizeOptions ?? [10, 25, 50, 100],
  }

  const [page, setPage] = React.useState(1)
  const [pageSize, setPageSize] = React.useState(config.pageSize)

  // filteredCount: total rows after filters (driven by inner table state via CountSyncer)
  const [filteredCount, setFilteredCount] = React.useState(data.length)

  const totalPages = Math.max(1, Math.ceil(filteredCount / pageSize))
  const safePage   = Math.min(page, totalPages)

  function handlePageSizeChange(n: number) {
    setPageSize(n)
    setPage(1)
  }

  // Wrap toolbarSlot to intercept state.rows.length (a number — no circular ref)
  const originalToolbarSlot = rest.toolbarSlot
  const toolbarSlot = React.useCallback(
    (state: ReturnType<typeof useTableState<TData>>) => (
      <>
        <CountSyncer count={state.rows.length} onSync={setFilteredCount} onReset={() => setPage(1)} />
        {originalToolbarSlot ? originalToolbarSlot(state) : null}
      </>
    ),
    [originalToolbarSlot],
  )

  return (
    <div className="flex flex-col gap-0">
      <DataTable
        {...rest}
        data={data}
        columns={columns}
        defaultSort={defaultSort}
        toolbarSlot={toolbarSlot}
        paginationOverride={{ page: safePage, pageSize }}
        hasFooter
        stickyFooter={
          <PaginationBar
            page={safePage}
            pageSize={pageSize}
            total={filteredCount}
            pageSizeOptions={config.pageSizeOptions}
            onPageChange={setPage}
            onPageSizeChange={handlePageSizeChange}
          />
        }
      />
    </div>
  )
}

// ─────────────────────────────────────────────────────────────────────────────
// CountSyncer — syncs filtered row count (a number) to parent without loops.
// Syncing a primitive avoids the circular-reference issue of syncing an array.
// ─────────────────────────────────────────────────────────────────────────────

export function CountSyncer({
  count,
  onSync,
  onReset,
}: {
  count: number
  onSync: (n: number) => void
  onReset: () => void
}) {
  const prevCount = React.useRef(count)
  React.useLayoutEffect(() => {
    if (prevCount.current !== count) {
      prevCount.current = count
      onSync(count)
      onReset()
    }
  }, [count, onSync, onReset])
  return null
}

export { TableViewMoreFooter, type TableViewMoreFooterProps } from "./table-view-more-footer"