Data table

"use client"

import * as React from "react"
import { DataTable } from "@/components/data-table"
import type { Column, FilterChip } from "@/lib/data"
import { Button } from "@/components/ui/button"

type Migration = { id: string; name: string; repo: string; env: "Production" | "Staging"; rows: number | null; author: string; applied: string }

const migrations: Migration[] = [
  { id: "m142", name: "0142_add_region_to_projects", repo: "acme/api", env: "Staging", rows: 18_240, author: "Dev agent", applied: "2026-11-04" },
  { id: "m141", name: "0141_index_deployments_sha", repo: "acme/api", env: "Production", rows: null, author: "Dana", applied: "2026-11-02" },
  { id: "m140", name: "0140_drop_legacy_score", repo: "acme/api", env: "Production", rows: 9_812, author: "Jonas", applied: "2026-10-29" },
  { id: "m139", name: "0139_backfill_owner_id", repo: "acme/workers", env: "Production", rows: 42_100, author: "Dev agent", applied: "2026-10-27" },
  { id: "m138", name: "0138_add_flags_table", repo: "acme/web", env: "Production", rows: 0, author: "Mei", applied: "2026-10-22" },
  { id: "m137", name: "0137_split_invoice_lines", repo: "acme/api", env: "Staging", rows: 133_480, author: "Dev agent", applied: "2026-10-20" },
  { id: "m136", name: "0136_rename_plan_tier", repo: "acme/api", env: "Production", rows: 6_031, author: "Dana", applied: "2026-10-15" },
]

const columns: Column<Migration>[] = [
  { id: "name", label: "Migration", value: (m) => m.name, render: (m) => <code className="font-mono text-xs">{m.name}</code> },
  { id: "repo", label: "Repository", value: (m) => m.repo },
  { id: "env", label: "Environment", value: (m) => m.env },
  { id: "rows", label: "Rows touched", value: (m) => m.rows, numeric: true },
  { id: "author", label: "Author", value: (m) => m.author, optional: true },
  { id: "applied", label: "Applied", value: (m) => m.applied },
]

export default function Example() {
  const [filters, setFilters] = React.useState<FilterChip[]>([{ id: "repo", label: "Repository", value: "Not acme/web" }])
  const rows = filters.some((f) => f.id === "repo") ? migrations.filter((m) => m.repo !== "acme/web") : migrations
  return (
    <DataTable<Migration>
      title="Migrations"
      columns={columns}
      rows={rows}
      rowId={(m) => m.id}
      selectable
      pageSize={5}
      filters={filters}
      onRemoveFilter={(id) => setFilters((all) => all.filter((f) => f.id !== id))}
      onClearFilters={() => setFilters([])}
      actions={(selected) => (
        <Button size="xs" variant="outline" onClick={() => {}}>
          Ask Keel about {selected.size}
        </Button>
      )}
    />
  )
}