// CIL[BEGIN chunk_id="RecordListPage_module_header_1784761401" type="module_header" identity="module_header" parent="none"]
// CIL[DOC-MACRO purpose="Render a sortable/filterable table of records for a Workbench type"]
// CIL[DOC-RESPONSIBILITY responsibility="Fetch records via admin-data and display them in a table with row navigation"]
// CIL[DOC-CONTEXT module="workbench.components.records.RecordListPage" layer="frontend-component" related_files="[\"custom/apps/workbench/components/records/RecordDetailPage.tsx\",\"custom/apps/workbench/hooks/useWorkbenchList.ts\"]"]
// CIL[DOC-CONTRACT inputs="typeSlug:string, title:string, columns:Column[], getDetailRoute:(record)=>string, createRoute?:string" outputs="JSX list page" errors="fetch errors rendered inline" side_effects="calls /api/admin-data, navigates on row click"]
// CIL[DOC-MICRO logic_summary="Fetches up to 500 records, offers a text filter, and renders a shadcn table with clickable rows" notable_decisions="[]"]
// CIL[DOC-CONFIDENCE pass="first" score="0.9" flags="none"]
// CIL[DOC-STABILITY stability="experimental"]
// CIL[DOC-AUDIENCE audience="developer"]
import { useEffect, useMemo, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { apiFetch } from '@core/lib/api'
import { Button } from '@core/components/ui/button'
import { Input } from '@core/components/ui/input'
import { Card, CardContent, CardHeader, CardTitle } from '@core/components/ui/card'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@core/components/ui/table'
import { Plus, Search } from 'lucide-react'
// CIL[END chunk_id="RecordListPage_module_header_1784761401"]

// CIL[BEGIN chunk_id="RecordListPage_types_1784761401" type="type" identity="Column" parent="none"]
// CIL[DOC-MACRO description="Implementation of Column" macro="Renders and manages Column UI state" input_spec="record object" output_spec="React node"]
// CIL[DOC-CONTRACT input_spec="See module header or type signature" output_spec="JSX or value" side_effects="none"]
// CIL[DOC-STABILITY stability="experimental"]
export interface Column {
  key: string
  label: string
  render?: (record: any) => React.ReactNode
}
// CIL[END chunk_id="RecordListPage_types_1784761401"]

// CIL[BEGIN chunk_id="RecordListPage_recordListPage_1784761401" type="function" identity="RecordListPage" parent="none"]
// CIL[DOC-MACRO description="Implementation of RecordListPage" macro="Renders and manages RecordListPage UI state"]
// CIL[DOC-CONTRACT input_spec="See module header or type signature" output_spec="JSX or value" side_effects="none"]
// CIL[DOC-STABILITY stability="experimental"]
export interface RecordListPageProps {
  typeSlug: string
  title: string
  columns: Column[]
  getDetailRoute: (record: any) => string
  createRoute?: string
  emptyMessage?: string
  extraParams?: Record<string, string>
  filterFn?: (record: any) => boolean
}

export function RecordListPage({
  typeSlug,
  title,
  columns,
  getDetailRoute,
  createRoute,
  emptyMessage = 'No records found.',
  extraParams = {},
  filterFn,
}: RecordListPageProps) {
  const navigate = useNavigate()
  const [records, setRecords] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [filter, setFilter] = useState('')
  const [sort, setSort] = useState<{ key: string; direction: 'asc' | 'desc' }>({ key: 'created_at', direction: 'desc' })

  const load = async () => {
    setLoading(true)
    setError(null)
    try {
      const params = new URLSearchParams({ entity: 'items', type_slug: typeSlug, limit: '500', ...extraParams })
      const res = await apiFetch(`/api/admin-data?${params.toString()}`)
      const json = await res.json()
      const data = Array.isArray(json?.data) ? json.data : Array.isArray(json) ? json : []
      setRecords(data)
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to load records')
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    load()
  }, [typeSlug])

  const filtered = useMemo(() => {
    const term = filter.trim().toLowerCase()
    let rows = records
    if (filterFn) {
      rows = rows.filter(filterFn)
    }
    if (term) {
      rows = rows.filter(r =>
        [r.title, r.description, r.status, r.id]
          .concat(Object.values(r.data || {}))
          .some(v => String(v || '').toLowerCase().includes(term))
      )
    }
    rows = [...rows].sort((a, b) => {
      const av = a[sort.key] ?? a.data?.[sort.key] ?? ''
      const bv = b[sort.key] ?? b.data?.[sort.key] ?? ''
      if (av < bv) return sort.direction === 'asc' ? -1 : 1
      if (av > bv) return sort.direction === 'asc' ? 1 : -1
      return 0
    })
    return rows
  }, [records, filter, sort])

  const handleSort = (key: string) => {
    setSort(prev => ({
      key,
      direction: prev.key === key && prev.direction === 'asc' ? 'desc' : 'asc',
    }))
  }

  return (
    <div className="p-4 lg:p-6 h-[calc(100vh-4rem)] flex flex-col">
      <div className="flex items-center justify-between shrink-0 mb-4 gap-4">
        <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
        <div className="flex items-center gap-2">
          <div className="relative">
            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
            <Input
              value={filter}
              onChange={e => setFilter(e.target.value)}
              placeholder="Filter records…"
              className="pl-9 w-64"
            />
          </div>
          {createRoute && (
            <Button size="sm" className="gap-2" onClick={() => navigate(createRoute)}>
              <Plus className="h-4 w-4" /> New
            </Button>
          )}
        </div>
      </div>

      <Card className="flex-1 min-h-0 flex flex-col">
        <CardContent className="flex-1 min-h-0 overflow-auto p-0">
          {loading ? (
            <div className="p-6 text-sm text-muted-foreground">Loading {title.toLowerCase()}…</div>
          ) : error ? (
            <div className="p-6 text-destructive text-sm">{error}</div>
          ) : filtered.length === 0 ? (
            <div className="p-6 text-sm text-muted-foreground">{emptyMessage}</div>
          ) : (
            <Table>
              <TableHeader className="sticky top-0 bg-background z-10">
                <TableRow>
                  {columns.map(col => (
                    <TableHead key={col.key} className="cursor-pointer" onClick={() => handleSort(col.key)}>
                      {col.label}
                    </TableHead>
                  ))}
                </TableRow>
              </TableHeader>
              <TableBody>
                {filtered.map(record => (
                  <TableRow
                    key={record.id}
                    className="cursor-pointer hover:bg-muted/50"
                    onClick={() => navigate(getDetailRoute(record))}
                  >
                    {columns.map(col => (
                      <TableCell key={col.key}>
                        {col.render ? col.render(record) : String(record[col.key] ?? record.data?.[col.key] ?? '—')}
                      </TableCell>
                    ))}
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
// CIL[END chunk_id="RecordListPage_recordListPage_1784761401"]