EpicNext-Cms/src/components/admin/data-table.tsx

'use client'

import {
  ArrowDown,
  ArrowUp,
  ArrowUpDown,
  ChevronLeft,
  ChevronRight,
  Download,
  Filter,
  Search,
  SlidersHorizontal,
  X,
} from 'lucide-react'
import { useRouter, useSearchParams } from 'next/navigation'
import { useEffect, useRef, useState, useTransition } from 'react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'
import { Input } from '@/components/ui/input'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import { useDebounce } from '@/hooks/use-debounce'
import { PER_PAGE_OPTIONS } from '@/lib/admin-helpers'
import type { DataTableColumn, PaginatedResult } from '@/types'

/**
 * One-click filter preset. The chip applies/clears the listed query-string
 * keys at once; the preset is "active" when every key matches the URL state.
 */
export interface DataTablePreset {
  label: string
  params: Record<string, string>
}

interface DataTableProps<T extends { id: number | string }> {
  data: PaginatedResult<T>
  columns: DataTableColumn<T>[]
  searchPlaceholder?: string
  bulkActions?: { label: string; value: string; variant?: 'destructive' | 'default' }[]
  onBulkAction?: (action: string, ids: (number | string)[]) => Promise<void>
  exportUrl?: string
  presets?: DataTablePreset[]
}

export function DataTable<T extends { id: number | string }>({
  data,
  columns,
  searchPlaceholder = 'Search...',
  bulkActions,
  onBulkAction,
  exportUrl,
  presets,
}: DataTableProps<T>) {
  const router = useRouter()
  const searchParams = useSearchParams()
  const [isPending, startTransition] = useTransition()
  const [selectedIds, setSelectedIds] = useState<Set<number | string>>(new Set())
  const [searchValue, setSearchValue] = useState(searchParams.get('search') || '')
  const [hiddenColumns, setHiddenColumns] = useState<Set<string>>(new Set())

  const currentSort = searchParams.get('sort') || ''
  const currentOrder = searchParams.get('order') || 'desc'

  const debouncedSearch = useDebounce(searchValue, 300)
  const isFirstRender = useRef(true)

  // Collect active filters from URL
  const filterColumns = columns.filter((col) => col.filterOptions && col.filterOptions.length > 0)
  const activeFilters: Record<string, string> = {}
  for (const col of filterColumns) {
    const key = col.filterKey || `filter_${col.key}`
    const val = searchParams.get(key)
    if (val) activeFilters[key] = val
  }
  const activeFilterCount = Object.keys(activeFilters).length

  function updateParams(updates: Record<string, string>) {
    const params = new URLSearchParams(searchParams.toString())
    for (const [key, value] of Object.entries(updates)) {
      if (value) params.set(key, value)
      else params.delete(key)
    }
    startTransition(() => {
      router.push(`?${params.toString()}`)
    })
  }

  // biome-ignore lint/correctness/useExhaustiveDependencies: explicitly chosen here, see surrounding code
  useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false
      return
    }
    updateParams({ search: debouncedSearch, page: '1' })
  }, [debouncedSearch]) // eslint-disable-line react-hooks/exhaustive-deps

  function handleSearch(value: string) {
    setSearchValue(value)
  }

  function handleSort(key: string) {
    const newOrder = currentSort === key && currentOrder === 'asc' ? 'desc' : 'asc'
    updateParams({ sort: key, order: newOrder })
  }

  function handlePageChange(page: number) {
    updateParams({ page: String(page) })
  }

  function handlePerPageChange(perPage: string) {
    updateParams({ perPage, page: '1' })
  }

  function handleFilterChange(col: DataTableColumn<T>, value: string) {
    const key = col.filterKey || `filter_${col.key}`
    updateParams({ [key]: value === '__all__' ? '' : value, page: '1' })
  }

  function clearAllFilters() {
    const updates: Record<string, string> = { page: '1' }
    for (const col of filterColumns) {
      const key = col.filterKey || `filter_${col.key}`
      updates[key] = ''
    }
    updateParams(updates)
  }

  function toggleSelectAll() {
    if (selectedIds.size === data.rows.length) {
      setSelectedIds(new Set())
    } else {
      setSelectedIds(new Set(data.rows.map((r) => r.id)))
    }
  }

  function toggleSelect(id: number | string) {
    setSelectedIds((prev) => {
      const next = new Set(prev)
      if (next.has(id)) next.delete(id)
      else next.add(id)
      return next
    })
  }

  async function handleBulkAction(action: string) {
    if (selectedIds.size === 0 || !onBulkAction) return
    await onBulkAction(action, Array.from(selectedIds))
    setSelectedIds(new Set())
    router.refresh()
  }

  function getSortIcon(key: string) {
    if (currentSort !== key) return <ArrowUpDown className="h-3 w-3" />
    return currentOrder === 'asc' ? (
      <ArrowUp className="h-3 w-3" />
    ) : (
      <ArrowDown className="h-3 w-3" />
    )
  }

  function isPresetActive(preset: DataTablePreset): boolean {
    return Object.entries(preset.params).every(([k, v]) => (searchParams.get(k) ?? '') === v)
  }

  function applyPreset(preset: DataTablePreset) {
    // Apply (or toggle off) the preset by overwriting only its keys + reset page.
    const updates: Record<string, string> = { page: '1' }
    if (isPresetActive(preset)) {
      for (const k of Object.keys(preset.params)) updates[k] = ''
    } else {
      Object.assign(updates, preset.params)
    }
    updateParams(updates)
  }

  return (
    <div className="space-y-4">
      {/* Preset filter chips */}
      {presets && presets.length > 0 && (
        <div className="flex flex-wrap items-center gap-1.5">
          {presets.map((preset) => {
            const active = isPresetActive(preset)
            return (
              <button
                key={preset.label}
                type="button"
                onClick={() => applyPreset(preset)}
                className={`inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-xs transition-colors ${
                  active
                    ? 'border-primary bg-primary text-primary-foreground'
                    : 'border-border bg-background hover:bg-accent'
                }`}
              >
                {preset.label}
                {active && <X className="h-3 w-3" />}
              </button>
            )
          })}
        </div>
      )}

      {/* Toolbar */}
      <div className="flex flex-wrap items-center gap-3">
        <div className="relative flex-1 min-w-[200px] max-w-sm">
          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
          <Input
            placeholder={searchPlaceholder}
            value={searchValue}
            onChange={(e) => handleSearch(e.target.value)}
            className="pl-9"
          />
        </div>

        {/* Column Filters */}
        {filterColumns.length > 0 && (
          <Popover>
            <PopoverTrigger asChild>
              <Button variant="outline" size="sm" className="gap-2">
                <Filter className="h-4 w-4" />
                Filters
                {activeFilterCount > 0 && (
                  <Badge
                    variant="secondary"
                    className="ml-1 h-5 w-5 rounded-full p-0 text-xs flex items-center justify-center"
                  >
                    {activeFilterCount}
                  </Badge>
                )}
              </Button>
            </PopoverTrigger>
            <PopoverContent className="w-72" align="start">
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <h4 className="text-sm font-medium">Filters</h4>
                  {activeFilterCount > 0 && (
                    <Button
                      variant="ghost"
                      size="sm"
                      className="h-7 px-2 text-xs"
                      onClick={clearAllFilters}
                    >
                      Clear all
                    </Button>
                  )}
                </div>
                {filterColumns.map((col) => {
                  const key = col.filterKey || `filter_${col.key}`
                  const currentValue = searchParams.get(key) || '__all__'
                  return (
                    <div key={col.key} className="space-y-1.5">
                      <span className="text-xs font-medium text-muted-foreground">{col.label}</span>
                      <Select
                        value={currentValue}
                        onValueChange={(v) => handleFilterChange(col, v)}
                      >
                        <SelectTrigger className="h-8 text-xs">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="__all__">All</SelectItem>
                          {col.filterOptions!.map((opt) => (
                            <SelectItem key={opt.value} value={opt.value}>
                              {opt.label}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                  )
                })}
              </div>
            </PopoverContent>
          </Popover>
        )}

        {/* Active Filter Badges */}
        {activeFilterCount > 0 && (
          <div className="flex flex-wrap items-center gap-1.5">
            {filterColumns.map((col) => {
              const key = col.filterKey || `filter_${col.key}`
              const val = searchParams.get(key)
              if (!val) return null
              const opt = col.filterOptions!.find((o) => o.value === val)
              return (
                <Badge key={key} variant="secondary" className="gap-1 pr-1">
                  {col.label}: {opt?.label || val}
                  <button
                    type="button"
                    onClick={() => handleFilterChange(col, '__all__')}
                    className="ml-0.5 rounded-full p-0.5 hover:bg-accent"
                  >
                    <X className="h-3 w-3" />
                  </button>
                </Badge>
              )
            })}
          </div>
        )}

        {/* Column Visibility */}
        <Popover>
          <PopoverTrigger asChild>
            <Button variant="outline" size="sm" className="gap-2">
              <SlidersHorizontal className="h-4 w-4" />
              Columns
            </Button>
          </PopoverTrigger>
          <PopoverContent className="w-48" align="start">
            <div className="space-y-1">
              <h4 className="text-sm font-medium mb-2">Toggle columns</h4>
              {columns.map((col) => (
                <div
                  key={col.key}
                  className="flex items-center gap-2 py-1 text-sm hover:text-foreground"
                >
                  <Checkbox
                    checked={!hiddenColumns.has(col.key)}
                    onCheckedChange={(checked) => {
                      setHiddenColumns((prev) => {
                        const next = new Set(prev)
                        if (checked) next.delete(col.key)
                        else next.add(col.key)
                        return next
                      })
                    }}
                  />
                  {col.label}
                </div>
              ))}
            </div>
          </PopoverContent>
        </Popover>

        <Select value={String(data.perPage)} onValueChange={handlePerPageChange}>
          <SelectTrigger className="w-[100px]">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {PER_PAGE_OPTIONS.map((n) => (
              <SelectItem key={n} value={String(n)}>
                {n} / page
              </SelectItem>
            ))}
          </SelectContent>
        </Select>

        {exportUrl && (
          <Button variant="outline" size="sm" asChild>
            <a href={exportUrl}>
              <Download className="mr-2 h-4 w-4" />
              CSV
            </a>
          </Button>
        )}

        {bulkActions && selectedIds.size > 0 && (
          <div className="flex items-center gap-2">
            <span className="text-sm text-muted-foreground">{selectedIds.size} selected</span>
            {bulkActions.map((action) => (
              <Button
                key={action.value}
                variant={action.variant || 'default'}
                size="sm"
                onClick={() => handleBulkAction(action.value)}
              >
                {action.label}
              </Button>
            ))}
          </div>
        )}

        <div className="ml-auto text-sm text-muted-foreground">{data.total} results</div>
      </div>

      {/* Table */}
      <div className="rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              {bulkActions && (
                <TableHead className="w-[40px]">
                  <Checkbox
                    checked={selectedIds.size === data.rows.length && data.rows.length > 0}
                    onCheckedChange={toggleSelectAll}
                  />
                </TableHead>
              )}
              {columns
                .filter((col) => !hiddenColumns.has(col.key))
                .map((col) => (
                  <TableHead key={col.key}>
                    {col.sortable ? (
                      <button
                        type="button"
                        className="flex items-center gap-1 hover:text-foreground"
                        onClick={() => handleSort(col.key)}
                      >
                        {col.label}
                        {getSortIcon(col.key)}
                      </button>
                    ) : (
                      col.label
                    )}
                  </TableHead>
                ))}
            </TableRow>
          </TableHeader>
          <TableBody>
            {data.rows.length === 0 ? (
              <TableRow>
                <TableCell
                  colSpan={
                    columns.filter((c) => !hiddenColumns.has(c.key)).length + (bulkActions ? 1 : 0)
                  }
                  className="h-24 text-center text-muted-foreground"
                >
                  No results found.
                </TableCell>
              </TableRow>
            ) : (
              data.rows.map((row) => (
                <TableRow
                  key={row.id}
                  className={isPending ? 'opacity-50' : undefined}
                  data-selected={selectedIds.has(row.id) || undefined}
                >
                  {bulkActions && (
                    <TableCell>
                      <Checkbox
                        checked={selectedIds.has(row.id)}
                        onCheckedChange={() => toggleSelect(row.id)}
                      />
                    </TableCell>
                  )}
                  {columns
                    .filter((col) => !hiddenColumns.has(col.key))
                    .map((col) => (
                      <TableCell key={col.key}>
                        {col.render
                          ? col.render((row as Record<string, unknown>)[col.key] as T[keyof T], row)
                          : String((row as Record<string, unknown>)[col.key] ?? '')}
                      </TableCell>
                    ))}
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>

      {/* Pagination */}
      {data.lastPage > 1 && (
        <div className="flex items-center justify-between">
          <p className="text-sm text-muted-foreground">
            Page {data.page} of {data.lastPage}
          </p>
          <div className="flex items-center gap-1">
            <Button
              variant="outline"
              size="icon"
              disabled={data.page <= 1}
              onClick={() => handlePageChange(data.page - 1)}
            >
              <ChevronLeft className="h-4 w-4" />
            </Button>
            {Array.from({ length: Math.min(data.lastPage, 7) }, (_, i) => {
              let pageNum: number
              if (data.lastPage <= 7) {
                pageNum = i + 1
              } else if (data.page <= 4) {
                pageNum = i + 1
              } else if (data.page >= data.lastPage - 3) {
                pageNum = data.lastPage - 6 + i
              } else {
                pageNum = data.page - 3 + i
              }
              return (
                <Button
                  key={pageNum}
                  variant={pageNum === data.page ? 'default' : 'outline'}
                  size="icon"
                  onClick={() => handlePageChange(pageNum)}
                >
                  {pageNum}
                </Button>
              )
            })}
            <Button
              variant="outline"
              size="icon"
              disabled={data.page >= data.lastPage}
              onClick={() => handlePageChange(data.page + 1)}
            >
              <ChevronRight className="h-4 w-4" />
            </Button>
          </div>
        </div>
      )}
    </div>
  )
}