Table

"use client";

import { Search } from "lucide-react";
import { useMemo, useState } from "react";
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableEmpty,
  TableHead,
  TableHeader,
  TableLoading,
  TablePagination,
  TableRow,
  TableSortButton,
  TableToolbar,
} from "@/components/ui/table";

type Row = {
  id: string;
  name: string;
  role: string;
  status: "Active" | "Pending" | "Archived";
  amount: number;
};

type SortKey = keyof Pick<Row, "name" | "role" | "status" | "amount">;

const rows: Row[] = [
  { id: "1", name: "Ada Lovelace", role: "Engineer", status: "Active", amount: 4200 },
  { id: "2", name: "Alan Turing", role: "Researcher", status: "Active", amount: 5800 },
  { id: "3", name: "Grace Hopper", role: "Architect", status: "Pending", amount: 3100 },
];

const statusStyles: Record<Row["status"], string> = {
  Active: "bg-foreground text-background",
  Pending: "bg-muted text-foreground",
  Archived: "border border-border bg-transparent text-muted-foreground",
};

export function TablePreview() {
  const [query, setQuery] = useState("");
  const [sort, setSort] = useState<{ key: SortKey; dir: "asc" | "desc" }>({
    key: "name",
    dir: "asc",
  });
  const [loading, setLoading] = useState(false);

  const visible = useMemo(() => {
    const filtered = rows.filter((row) =>
      (row.name + row.role + row.status).toLowerCase().includes(query.toLowerCase())
    );

    return [...filtered].sort((a, b) => {
      const av = a[sort.key];
      const bv = b[sort.key];
      if (av < bv) return sort.dir === "asc" ? -1 : 1;
      if (av > bv) return sort.dir === "asc" ? 1 : -1;
      return 0;
    });
  }, [query, sort]);

  const toggleSort = (key: SortKey) =>
    setSort((current) => ({
      key,
      dir: current.key === key && current.dir === "asc" ? "desc" : "asc",
    }));

  return (
    <div className="w-full max-w-4xl">
      <TableToolbar tableId="team-table">
        <div className="relative max-w-sm flex-1">
          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
          <input
            className="h-10 w-full border-b border-border bg-transparent pl-9 pr-3 text-sm outline-none transition-colors focus:border-foreground"
            onChange={(event) => setQuery(event.target.value)}
            placeholder="Search…"
            value={query}
          />
        </div>
        <button
          className="text-muted-foreground text-sm transition-colors hover:text-foreground"
          onClick={() => setLoading((current) => !current)}
          type="button"
        >
          {loading ? "Show data" : "Simulate loading"}
        </button>
      </TableToolbar>

      <Table id="team-table">
        <TableHeader>
          <TableRow variant="header">
            <TableHead sortDirection={sort.key === "name" ? sort.dir : "none"}>
              <TableSortButton
                active={sort.key === "name"}
                direction={sort.dir}
                onClick={() => toggleSort("name")}
              >
                Name
              </TableSortButton>
            </TableHead>
            <TableHead sortDirection={sort.key === "role" ? sort.dir : "none"}>
              <TableSortButton
                active={sort.key === "role"}
                direction={sort.dir}
                onClick={() => toggleSort("role")}
              >
                Role
              </TableSortButton>
            </TableHead>
            <TableHead sortDirection={sort.key === "status" ? sort.dir : "none"}>
              <TableSortButton
                active={sort.key === "status"}
                direction={sort.dir}
                onClick={() => toggleSort("status")}
              >
                Status
              </TableSortButton>
            </TableHead>
            <TableHead align="right" sortDirection={sort.key === "amount" ? sort.dir : "none"}>
              <TableSortButton
                active={sort.key === "amount"}
                align="right"
                direction={sort.dir}
                onClick={() => toggleSort("amount")}
              >
                Amount
              </TableSortButton>
            </TableHead>
          </TableRow>
        </TableHeader>

        <TableBody className="min-h-[240px]">
          {loading ? (
            <TableLoading rows={3} />
          ) : (
            <>
              {visible.map((row, index) => (
                <TableRow hoverable index={index} key={row.id}>
                  <TableCell className="font-medium text-foreground">{row.name}</TableCell>
                  <TableCell className="text-muted-foreground">{row.role}</TableCell>
                  <TableCell>
                    <span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${statusStyles[row.status]}`}>
                      {row.status}
                    </span>
                  </TableCell>
                  <TableCell align="right" className="tabular-nums text-foreground">
                    ${row.amount.toLocaleString()}
                  </TableCell>
                </TableRow>
              ))}

              {visible.length === 0 ? <TableEmpty>No results.</TableEmpty> : null}
            </>
          )}
        </TableBody>
      </Table>

      <TablePagination
        onPageChange={() => {}}
        page={1}
        pageCount={1}
        pageSize={10}
        totalItems={visible.length}
      />
    </div>
  );
}