"use client";

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { ArrowUpDown, ArrowUp, ChevronLeft, ChevronRight, Inbox, Search, X } from "lucide-react";

import { cn } from "@/lib/utils";

const dataTableVariants = cva("w-full caption-bottom text-sm", {
  variants: {
    variant: {
      default: "",
      compact: "[&_td]:p-2 [&_th]:p-2",
      striped: "[&_tbody_tr:nth-child(even)]:bg-muted/50",
      bordered: "[&_td]:border [&_th]:border",
    },
  },
  defaultVariants: {
    variant: "default",
  },
});

export interface Column<T> {
  key: keyof T | string;
  label: string;
  sortable?: boolean;
  render?: (row: T) => React.ReactNode;
}

export interface DataTableProps<T extends Record<string, unknown>>
  extends React.HTMLAttributes<HTMLTableElement>,
    VariantProps<typeof dataTableVariants> {
  columns: Column<T>[];
  data: T[];
  /** Shows a search box that filters rows across every column's raw value. */
  searchable?: boolean;
  searchPlaceholder?: string;
  /** Adds a checkbox column plus a bulk-selection toolbar. */
  selectable?: boolean;
  onSelectionChange?: (selectedRows: T[]) => void;
  /** Rendered inside the bulk-selection toolbar once at least one row is selected. */
  bulkActions?: (selectedRows: T[]) => React.ReactNode;
  /** Enables client-side pagination with this many rows per page. */
  pageSize?: number;
}

/**
 * DataTable — a sortable table with opt-in search, row selection, and paging.
 *
 * Every extra is off by default, so the bare version stays a plain table. Turn
 * on only what you need: `searchable`, `selectable`, `pageSize`.
 *
 * @example
 * <DataTable
 *   columns={[
 *     { key: "name", label: "Name", sortable: true },
 *     { key: "status", label: "Status", render: (row) => <Badge>{row.status}</Badge> },
 *   ]}
 *   data={users}
 *   searchable
 *   selectable
 *   pageSize={10}
 *   onSelectionChange={(rows) => setSelected(rows)}
 * />
 */
export function DataTable<T extends Record<string, unknown>>({
  className,
  variant,
  columns,
  data,
  searchable = false,
  searchPlaceholder = "Search...",
  selectable = false,
  onSelectionChange,
  bulkActions,
  pageSize,
  ...props
}: DataTableProps<T>) {
  const [sortConfig, setSortConfig] = React.useState<{
    key: keyof T | string;
    direction: "asc" | "desc";
  } | null>(null);
  const [query, setQuery] = React.useState("");
  const [page, setPage] = React.useState(1);
  const [selected, setSelected] = React.useState<Set<number>>(new Set());

  const handleSort = (key: keyof T | string) => {
    let direction: "asc" | "desc" = "asc";
    if (sortConfig && sortConfig.key === key && sortConfig.direction === "asc") {
      direction = "desc";
    }
    setSortConfig({ key, direction });
  };

  // Pair every row with its original index so identity survives filtering/sorting/paging.
  const indexed = React.useMemo(() => data.map((row, i) => ({ row, i })), [data]);

  const filtered = React.useMemo(() => {
    if (!searchable || !query.trim()) return indexed;
    const q = query.trim().toLowerCase();
    return indexed.filter(({ row }) =>
      columns.some((col) => String(row[col.key as keyof T] ?? "").toLowerCase().includes(q))
    );
  }, [indexed, columns, searchable, query]);

  const sorted = React.useMemo(() => {
    if (!sortConfig) return filtered;

    return [...filtered].sort((a, b) => {
      const aValue = a.row[sortConfig.key as keyof T];
      const bValue = b.row[sortConfig.key as keyof T];

      if (aValue === bValue) return 0;

      const aString = String(aValue).toLowerCase();
      const bString = String(bValue).toLowerCase();

      if (sortConfig.direction === "asc") {
        return aString > bString ? 1 : -1;
      } else {
        return aString < bString ? 1 : -1;
      }
    });
  }, [filtered, sortConfig]);

  const effectivePageSize = pageSize && pageSize > 0 ? pageSize : sorted.length || 1;
  const pageCount = Math.max(1, Math.ceil(sorted.length / effectivePageSize));
  const currentPage = Math.min(page, pageCount);

  React.useEffect(() => {
    setPage(1);
  }, [query, pageSize]);

  const visible = React.useMemo(() => {
    if (!pageSize) return sorted;
    const start = (currentPage - 1) * effectivePageSize;
    return sorted.slice(start, start + effectivePageSize);
  }, [sorted, pageSize, currentPage, effectivePageSize]);

  const emitSelection = React.useCallback(
    (next: Set<number>) => {
      setSelected(next);
      onSelectionChange?.(data.filter((_, i) => next.has(i)));
    },
    [data, onSelectionChange]
  );

  const toggleRow = (i: number) => {
    const next = new Set(selected);
    if (next.has(i)) next.delete(i);
    else next.add(i);
    emitSelection(next);
  };

  const visibleIndices = visible.map((v) => v.i);
  const allVisibleSelected = visibleIndices.length > 0 && visibleIndices.every((i) => selected.has(i));
  const someVisibleSelected = visibleIndices.some((i) => selected.has(i));

  const toggleAllVisible = () => {
    const next = new Set(selected);
    if (allVisibleSelected) {
      visibleIndices.forEach((i) => next.delete(i));
    } else {
      visibleIndices.forEach((i) => next.add(i));
    }
    emitSelection(next);
  };

  const clearSelection = () => emitSelection(new Set());
  const selectedRows = React.useMemo(() => data.filter((_, i) => selected.has(i)), [data, selected]);

  return (
    <div className="flex w-full flex-col gap-3">
      {(searchable || (selectable && selected.size > 0)) && (
        <div className="flex flex-col-reverse items-stretch gap-3 sm:flex-row sm:items-center sm:justify-between">
          {selectable && selected.size > 0 ? (
            <div className="flex items-center gap-3 rounded-md border bg-muted/50 px-3 py-2 text-sm">
              <span className="font-medium">{selected.size} selected</span>
              <button
                onClick={clearSelection}
                className="inline-flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors"
              >
                <X className="h-3.5 w-3.5" />
                Clear
              </button>
              {bulkActions && <div className="ml-2 flex items-center gap-2">{bulkActions(selectedRows)}</div>}
            </div>
          ) : (
            <div />
          )}
          {searchable && (
            <div className="relative w-full sm:w-64">
              <Search className="pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <input
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder={searchPlaceholder}
                className="w-full rounded-md border bg-background py-2 pl-8 pr-3 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
              />
            </div>
          )}
        </div>
      )}

      <div className="relative w-full overflow-auto rounded-md border">
        <table className={cn(dataTableVariants({ variant }), className)} {...props}>
          <thead className="[&_tr]:border-b bg-muted/95 sticky top-0 z-10 backdrop-blur">
            <tr className="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
              {selectable && (
                <th className="h-12 w-10 px-4 align-middle">
                  <input
                    type="checkbox"
                    aria-label="Select all rows on this page"
                    checked={allVisibleSelected}
                    ref={(el) => {
                      if (el) el.indeterminate = !allVisibleSelected && someVisibleSelected;
                    }}
                    onChange={toggleAllVisible}
                    className="h-4 w-4 rounded border-gray-300 accent-primary"
                  />
                </th>
              )}
              {columns.map((column, index) => (
                <th
                  key={String(column.key) || index}
                  className={cn(
                    "h-12 px-4 text-left align-middle font-medium text-muted-foreground",
                    column.sortable && "cursor-pointer select-none hover:text-foreground"
                  )}
                  onClick={() => column.sortable && handleSort(column.key)}
                >
                  <div className="flex items-center gap-1">
                    {column.label}
                    {column.sortable && (
                      <span className="ml-1 inline-flex h-4 w-4 items-center justify-center">
                        {sortConfig?.key === column.key ? (
                          <ArrowUp
                            className={cn(
                              "h-3 w-3 transition-transform duration-200",
                              sortConfig.direction === "desc" && "rotate-180"
                            )}
                          />
                        ) : (
                          <ArrowUpDown className="h-3 w-3 opacity-50" />
                        )}
                      </span>
                    )}
                  </div>
                </th>
              ))}
            </tr>
          </thead>
          <tbody className="[&_tr:last-child]:border-0">
            {visible.length > 0 ? (
              visible.map(({ row, i }) => (
                <tr
                  key={i}
                  data-state={selected.has(i) ? "selected" : undefined}
                  className="border-b border-l-2 border-l-transparent transition-colors hover:bg-muted/80 hover:border-l-primary data-[state=selected]:bg-primary/5 data-[state=selected]:border-l-primary"
                >
                  {selectable && (
                    <td className="w-10 p-4 align-middle">
                      <input
                        type="checkbox"
                        aria-label="Select row"
                        checked={selected.has(i)}
                        onChange={() => toggleRow(i)}
                        className="h-4 w-4 rounded border-gray-300 accent-primary"
                      />
                    </td>
                  )}
                  {columns.map((column, colIndex) => (
                    <td key={String(column.key) || colIndex} className="p-4 align-middle">
                      {column.render
                        ? column.render(row)
                        : (row[column.key as keyof T] as React.ReactNode)}
                    </td>
                  ))}
                </tr>
              ))
            ) : (
              <tr>
                <td
                  colSpan={columns.length + (selectable ? 1 : 0)}
                  className="h-32 text-center align-middle text-muted-foreground"
                >
                  <div className="flex flex-col items-center justify-center p-8">
                    <Inbox className="h-10 w-10 text-muted-foreground/40 mb-4" />
                    <p className="text-base font-medium">No results found</p>
                    <p className="text-sm">Try adjusting your search or filters.</p>
                  </div>
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>

      {pageSize && sorted.length > 0 && (
        <div className="flex flex-col items-center justify-between gap-3 sm:flex-row">
          <p className="text-sm text-muted-foreground">
            Showing {(currentPage - 1) * effectivePageSize + 1}–
            {Math.min(currentPage * effectivePageSize, sorted.length)} of {sorted.length}
          </p>
          <div className="flex items-center gap-1">
            <button
              onClick={() => setPage((p) => Math.max(1, p - 1))}
              disabled={currentPage <= 1}
              className="inline-flex h-8 w-8 items-center justify-center rounded-md border transition-colors hover:bg-muted disabled:opacity-40 disabled:hover:bg-transparent"
              aria-label="Previous page"
            >
              <ChevronLeft className="h-4 w-4" />
            </button>
            <span className="px-2 text-sm text-muted-foreground">
              Page {currentPage} of {pageCount}
            </span>
            <button
              onClick={() => setPage((p) => Math.min(pageCount, p + 1))}
              disabled={currentPage >= pageCount}
              className="inline-flex h-8 w-8 items-center justify-center rounded-md border transition-colors hover:bg-muted disabled:opacity-40 disabled:hover:bg-transparent"
              aria-label="Next page"
            >
              <ChevronRight className="h-4 w-4" />
            </button>
          </div>
        </div>
      )}
    </div>
  );
}
Name	Email	Role	Status
Alice Johnson	alice@example.com	Admin	Active
Bob Smith	bob@example.com	Editor	Active
Carol White	carol@example.com	Viewer	Inactive
David Brown	david@example.com	Editor	Active
Data Table
