// Example: three data-table variants from the same widget.
// This file is consumer-side code - copy it into a screen and adapt.
import { useState } from "react"
import type { ColumnDef, RowSelectionState } from "@tanstack/react-table"

import { DataTable } from "@/components/widgets/data-table/DataTable"
import { StatusBadge } from "@/components/widgets/status-badge/StatusBadge"
import type { Severity } from "@/components/widgets/status-badge/StatusBadge.types"

interface Signal {
  id: string
  title: string
  owner: string
  severity: Severity
}

const columns: ColumnDef<Signal, string>[] = [
  { accessorKey: "id", header: "ID" },
  { accessorKey: "title", header: "Title" },
  { accessorKey: "owner", header: "Owner" },
  {
    accessorKey: "severity",
    header: "Severity",
    // Screens map domain values → widget props right in the column def:
    cell: ({ row }) => (
      <StatusBadge severity={row.original.severity} appearance="chip" />
    ),
  },
]

const signals: Signal[] = [
  {
    id: "SIG-1042",
    title: "Latency spike on ingest queue",
    owner: "M. Chen",
    severity: "critical",
  },
  {
    id: "SIG-1041",
    title: "Duplicate decision records",
    owner: "A. Okafor",
    severity: "high",
  },
  {
    id: "SIG-1038",
    title: "Stale cache on summary tiles",
    owner: "R. Patel",
    severity: "medium",
  },
]

/** Variant 1 - server-paginated table with column toggle. */
export function PaginatedSignalsTable() {
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(10)

  return (
    <DataTable
      columns={columns}
      data={signals}
      showColumnToggle
      pagination={{
        page,
        pageSize,
        total: 128,
        totalPages: Math.ceil(128 / pageSize),
        onPageChange: setPage,
        onRowsPerPageChange: setPageSize,
      }}
      onRowClick={(signal) => console.info("open", signal.id)}
    />
  )
}

/** Variant 2 - selectable rows (bulk actions). */
export function SelectableSignalsTable() {
  const [selection, setSelection] = useState<RowSelectionState>({})

  return (
    <DataTable
      columns={columns}
      data={signals}
      rowSelection={selection}
      onRowSelectionChange={setSelection}
      maxHeight="320px"
    />
  )
}

/** Variant 3 - compact embedded list (no pagination, capped height). */
export function CompactSignalsTable() {
  return (
    <DataTable
      columns={columns}
      data={signals}
      maxHeight="240px"
      emptyMessage="Nothing routed to you."
    />
  )
}

export default function Example() {
  return (
    <div className="flex flex-col gap-8">
      <PaginatedSignalsTable />
      <CompactSignalsTable />
    </div>
  )
}