// CIL[BEGIN chunk_id="WorkBacklogPage_module_header_1784761401" type="module_header" identity="module_header" parent="none"]
// CIL[DOC-MACRO purpose="Render a list view of backlog work items"]
// CIL[DOC-RESPONSIBILITY responsibility="Fetch workbench_work_item records and show those not assigned to an epic"]
// CIL[DOC-CONTEXT module="workbench.pages.work.WorkBacklogPage" layer="frontend-page" related_files="[\"custom/apps/workbench/pages/work/WorkItemDetailPage.tsx\",\"custom/apps/workbench/components/work/badges.tsx\"]"]
// CIL[DOC-CONTRACT inputs="none" outputs="JSX list page" errors="fetch errors rendered inline" side_effects="calls /api/admin-data, navigates on row click"]
// CIL[DOC-MICRO logic_summary="Loads work items, filters to items without an epic, and renders a sortable table" 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 { useAppPath } from '@core/hooks/useAppPath'
import { apiFetch } from '@core/lib/api'
import { Input } from '@core/components/ui/input'
import { Card, CardContent } from '@core/components/ui/card'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@core/components/ui/table'
import { Search } from 'lucide-react'
import { StatusBadge, PriorityBadge, SeverityBadge, WorkTypeBadge } from '../../components/work/badges'
import { useWorkbenchRole } from '../../hooks/useWorkbenchRole'
// CIL[END chunk_id="WorkBacklogPage_module_header_1784761401"]

// CIL[BEGIN chunk_id="WorkBacklogPage_workBacklogPage_1784761401" type="function" identity="WorkBacklogPage" parent="none"]
// CIL[DOC-MACRO description="Implementation of WorkBacklogPage" macro="Renders and manages WorkBacklogPage UI state"]
// CIL[DOC-CONTRACT input_spec="none" output_spec="JSX" side_effects="none"]
// CIL[DOC-STABILITY stability="experimental"]
function matchesTeam(team: any, role: string) {
  const t = team || 'unassigned'
  return t === role || t === '*' || t === 'unassigned'
}

export default function WorkBacklogPage() {
  const navigate = useNavigate()
  const appPath = useAppPath()
  const { role } = useWorkbenchRole()
  const [items, setItems] = 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: 'updated_at', direction: 'desc' })

  useEffect(() => {
    const load = async () => {
      setLoading(true)
      setError(null)
      try {
        const res = await apiFetch('/api/admin-data?entity=items&type_slug=workbench_work_item&limit=500')
        const json = await res.json()
        const data = Array.isArray(json?.data) ? json.data : []
        setItems(data)
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Failed to load backlog')
      } finally {
        setLoading(false)
      }
    }
    load()
  }, [])

  const backlogItems = useMemo(() => items.filter(i => i.data?.work_type !== 'idea' && i.status !== 'parking' && !i.data?.sprint_id && matchesTeam(i.data?.team, role)), [items, role])

  const filtered = useMemo(() => {
    const term = filter.trim().toLowerCase()
    let rows = backlogItems
    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
  }, [backlogItems, 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">Backlog</h1>
        <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 backlog…"
            className="pl-9 w-64"
          />
        </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 backlog…</div>
          ) : error ? (
            <div className="p-6 text-destructive text-sm">{error}</div>
          ) : filtered.length === 0 ? (
            <div className="p-6 text-sm text-muted-foreground">No backlog items.</div>
          ) : (
            <Table>
              <TableHeader className="sticky top-0 bg-background z-10">
                <TableRow>
                  <TableHead className="cursor-pointer" onClick={() => handleSort('title')}>Title</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead>Type</TableHead>
                  <TableHead>Priority</TableHead>
                  <TableHead>Severity</TableHead>
                  <TableHead className="cursor-pointer" onClick={() => handleSort('updated_at')}>Updated</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {filtered.map(item => (
                  <TableRow
                    key={item.id}
                    className="cursor-pointer hover:bg-muted/50"
                    onClick={() => navigate(appPath(`/work/${role}/items/${item.id}`))}
                  >
                    <TableCell>{item.title || 'Untitled'}</TableCell>
                    <TableCell><StatusBadge status={item.status} /></TableCell>
                    <TableCell><WorkTypeBadge workType={item.data?.work_type} /></TableCell>
                    <TableCell><PriorityBadge priority={item.data?.priority} /></TableCell>
                    <TableCell><SeverityBadge severity={item.data?.severity} /></TableCell>
                    <TableCell>{item.updated_at}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
// CIL[END chunk_id="WorkBacklogPage_workBacklogPage_1784761401"]