"use client"

import * as React from "react"
import type { Column, Row } from "@tanstack/react-table"
import { AddCircleIcon, CheckIcon } from "@solar-icons/react/linear"
import { cn } from "cn"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "@/components/ui/command"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Separator } from "@/components/ui/separator"

export type FacetOption = { value: string; label: string; icon?: React.ReactNode }

/** filterFn for faceted columns: no selection = everything, else the row's value must be selected */
export function facetFilterFn<TData>(row: Row<TData>, id: string, value: string[] | undefined) {
  return !value?.length || value.includes(String(row.getValue(id)))
}

/**
 * Multi-select filter for one column, with live counts. Counts come from
 * TanStack's faceted row model, so they reflect every *other* active filter.
 * The table needs `getFacetedRowModel()` + `getFacetedUniqueValues()` and
 * the column `filterFn: facetFilterFn`.
 */
export function DataTableFacetedFilter<TData, TValue>({
  column,
  title,
  options,
}: {
  column?: Column<TData, TValue>
  title: string
  options: FacetOption[]
}) {
  const counts = column?.getFacetedUniqueValues()
  const selected = new Set((column?.getFilterValue() as string[] | undefined) ?? [])

  const toggle = (value: string) => {
    const next = new Set(selected)
    if (next.has(value)) next.delete(value)
    else next.add(value)
    column?.setFilterValue(next.size ? [...next] : undefined)
  }

  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline" className="border-dashed">
          <AddCircleIcon className="text-muted-foreground" />
          {title}
          {selected.size > 0 && (
            <>
              <Separator orientation="vertical" className="mx-0.5 h-4" />
              {selected.size > 2 ? (
                <Badge variant="secondary" className="rounded-sm px-1.5 font-normal tabular-nums">
                  {selected.size} selected
                </Badge>
              ) : (
                options
                  .filter((o) => selected.has(o.value))
                  .map((o) => (
                    <Badge key={o.value} variant="secondary" className="rounded-sm px-1.5 font-normal">
                      {o.label}
                    </Badge>
                  ))
              )}
            </>
          )}
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-56 p-0" align="start">
        <Command>
          {options.length > 6 && <CommandInput placeholder={`Search ${title.toLowerCase()}…`} />}
          <CommandList>
            <CommandEmpty>No options found</CommandEmpty>
            <CommandGroup>
              {options.map((o) => {
                const isSelected = selected.has(o.value)
                return (
                  <CommandItem
                    key={o.value}
                    value={o.label}
                    aria-checked={isSelected}
                    onSelect={() => toggle(o.value)}
                  >
                    {/* checkbox look (not data-checked: CommandItem would add its own trailing check) */}
                    <span
                      aria-hidden
                      className={cn(
                        "grid size-4 place-items-center rounded-[4px] border border-input transition-colors",
                        isSelected && "border-primary bg-primary text-primary-foreground"
                      )}
                    >
                      {isSelected && <CheckIcon className="size-3" />}
                    </span>
                    {o.icon}
                    <span className="flex-1 truncate">{o.label}</span>
                    <span className="text-xs text-muted-foreground tabular-nums">{counts?.get(o.value) ?? 0}</span>
                  </CommandItem>
                )
              })}
            </CommandGroup>
            {selected.size > 0 && (
              <>
                <CommandSeparator />
                <CommandGroup>
                  <CommandItem onSelect={() => column?.setFilterValue(undefined)} className="justify-center">
                    Clear filters
                  </CommandItem>
                </CommandGroup>
              </>
            )}
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  )
}

25:["$","div",null,{"className":"max-h-[32rem] overflow-auto p-4 font-mono text-[0.8125rem] leading-relaxed [&_pre]:bg-transparent!","dangerouslySetInnerHTML":{"__html":"$2f"}}] 30:T936f,

"use client"

import type { Table } from "@tanstack/react-table"
import {
  AltArrowLeftIcon,
  AltArrowRightIcon,
  DoubleAltArrowLeftIcon,
  DoubleAltArrowRightIcon,
} from "@solar-icons/react/linear"

import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

const nf = new Intl.NumberFormat("en-US")

/**
 * Footer: "Showing 9–16 of 60" (or the selection count), rows-per-page
 * select and first/prev/next/last. First/last hide on small screens.
 */
export function DataTablePagination<TData>({
  table,
  pageSizes = [8, 20, 50],
}: {
  table: Table<TData>
  pageSizes?: number[]
}) {
  const { pageIndex, pageSize } = table.getState().pagination
  const total = table.getFilteredRowModel().rows.length
  const from = total === 0 ? 0 : pageIndex * pageSize + 1
  const to = Math.min(total, (pageIndex + 1) * pageSize)
  const pages = Math.max(table.getPageCount(), 1)
  const selected = table.getFilteredSelectedRowModel().rows.length
  const sizes = pageSizes.includes(pageSize) ? pageSizes : [...pageSizes, pageSize].sort((a, b) => a - b)

  return (
    <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2 border-t p-3 text-sm text-muted-foreground">
      <span className="tabular-nums" aria-live="polite">
        {selected > 0
          ? `${nf.format(selected)} of ${nf.format(total)} selected`
          : `Showing ${nf.format(from)}–${nf.format(to)} of ${nf.format(total)}`}
      </span>
      <div className="flex items-center gap-4">
        <div className="hidden items-center gap-2 sm:flex">
          <span>Rows per page</span>
          <Select value={String(pageSize)} onValueChange={(v) => table.setPageSize(Number(v))}>
            <SelectTrigger size="sm" className="w-18 tabular-nums" aria-label="Rows per page">
              <SelectValue />
            </SelectTrigger>
            <SelectContent align="end">
              {sizes.map((s) => (
                <SelectItem key={s} value={String(s)}>
                  {s}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
        <span className="tabular-nums">
          Page {nf.format(pageIndex + 1)} of {nf.format(pages)}
        </span>
        <div className="flex gap-1">
          <Button
            variant="outline"
            size="icon-sm"
            className="hidden sm:inline-flex"
            onClick={() => table.firstPage()}
            disabled={!table.getCanPreviousPage()}
            aria-label="First page"
          >
            <DoubleAltArrowLeftIcon />
          </Button>
          <Button
            variant="outline"
            size="icon-sm"
            onClick={() => table.previousPage()}
            disabled={!table.getCanPreviousPage()}
            aria-label="Previous page"
          >
            <AltArrowLeftIcon />
          </Button>
          <Button
            variant="outline"
            size="icon-sm"
            onClick={() => table.nextPage()}
            disabled={!table.getCanNextPage()}
            aria-label="Next page"
          >
            <AltArrowRightIcon />
          </Button>
          <Button
            variant="outline"
            size="icon-sm"
            className="hidden sm:inline-flex"
            onClick={() => table.lastPage()}
            disabled={!table.getCanNextPage()}
            aria-label="Last page"
          >
            <DoubleAltArrowRightIcon />
          </Button>
        </div>
      </div>
    </div>
  )
}

Installation