Scrum4Me/components/admin/jobs-table.tsx

'use client'

import { useState, useTransition } from 'react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import { cancelJobAction, deleteJobAction } from '@/actions/admin/jobs'
import { debugProps } from '@/lib/debug'

type Job = {
  id: string
  kind: string
  status: string
  created_at: Date
  user: { username: string }
  product: { name: string }
  branch: string | null
  pr_url: string | null
  error: string | null
  model_id: string | null
  actual_thinking_tokens: number | null
  requested_model: string | null
  requested_thinking_budget: number | null
  requested_permission_mode: string | null
  cost_usd: number | null
}

const STATUS_CLASS: Record<string, string> = {
  QUEUED: 'bg-secondary text-secondary-foreground',
  CLAIMED: 'bg-status-in-progress text-white border-transparent',
  RUNNING: 'bg-warning text-warning-foreground border-transparent',
  DONE: 'bg-status-done text-white border-transparent',
  FAILED: 'bg-priority-high text-white border-transparent',
  CANCELLED: 'bg-muted text-muted-foreground',
  SKIPPED: 'bg-muted/60 text-muted-foreground italic border-transparent',
}

const KIND_LABEL: Record<string, string> = {
  TASK_IMPLEMENTATION: 'Taak',
  IDEA_GRILL: 'Idee Grill',
  IDEA_MAKE_PLAN: 'Idee Plan',
}

const ACTIVE_STATUSES = new Set(['QUEUED', 'CLAIMED', 'RUNNING'])

function JobRow({ job }: { job: Job }) {
  const [pending, startTransition] = useTransition()

  function handleCancel() {
    startTransition(() => cancelJobAction(job.id))
  }

  function handleDelete() {
    startTransition(() => deleteJobAction(job.id))
  }

  return (
    <TableRow>
      <TableCell className="font-mono text-xs text-muted-foreground">{job.id.slice(0, 8)}</TableCell>
      <TableCell className="text-sm">{job.user.username}</TableCell>
      <TableCell className="text-sm">{job.product.name}</TableCell>
      <TableCell className="text-xs">{KIND_LABEL[job.kind] ?? job.kind}</TableCell>
      <TableCell>
        <Badge className={STATUS_CLASS[job.status] ?? 'bg-secondary'}>{job.status}</Badge>
      </TableCell>
      <TableCell className="text-xs text-muted-foreground">
        {job.branch ?? '—'}
      </TableCell>
      <TableCell className="text-xs text-muted-foreground">
        {new Date(job.created_at).toLocaleString('nl-NL', { dateStyle: 'short', timeStyle: 'short' })}
      </TableCell>
      <TableCell>
        {job.error && (
          <span className="text-xs text-priority-high line-clamp-1 max-w-[200px]" title={job.error}>
            {job.error}
          </span>
        )}
      </TableCell>
      <TableCell>
        <div className="flex gap-2 justify-end">
          {ACTIVE_STATUSES.has(job.status) && (
            <Button variant="outline" size="sm" onClick={handleCancel} disabled={pending}>
              Annuleer
            </Button>
          )}
          <Button variant="destructive" size="sm" onClick={handleDelete} disabled={pending}>
            Verwijder
          </Button>
        </div>
      </TableCell>
    </TableRow>
  )
}

function StatusTable({ jobs }: { jobs: Job[] }) {
  return (
    <Table data-debug-id="admin-jobs-table__table">
      <TableHeader>
        <TableRow>
          <TableHead>ID</TableHead>
          <TableHead>Gebruiker</TableHead>
          <TableHead>Product</TableHead>
          <TableHead>Type</TableHead>
          <TableHead>Status</TableHead>
          <TableHead>Branch</TableHead>
          <TableHead>Aangemaakt</TableHead>
          <TableHead>Fout</TableHead>
          <TableHead className="text-right">Acties</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {jobs.length === 0 && (
          <TableRow>
            <TableCell colSpan={9} className="text-center text-muted-foreground py-8">
              Geen jobs gevonden
            </TableCell>
          </TableRow>
        )}
        {jobs.map(job => (
          <JobRow key={job.id} job={job} />
        ))}
      </TableBody>
    </Table>
  )
}

function CostRow({ job }: { job: Job }) {
  const [pending, startTransition] = useTransition()
  function handleCancel() { startTransition(() => cancelJobAction(job.id)) }
  function handleDelete() { startTransition(() => deleteJobAction(job.id)) }
  const costLabel = job.cost_usd != null ? `$${job.cost_usd.toFixed(4)}` : '—'
  const thinkingLabel = job.actual_thinking_tokens != null ? job.actual_thinking_tokens.toLocaleString('nl-NL') : '—'
  const modelMismatch = job.requested_model != null && job.model_id != null && job.requested_model !== job.model_id
  const modelTitle = job.requested_model
    ? `Aangevraagd: ${job.requested_model}${modelMismatch ? ' (mismatch met actueel)' : ''}`
    : undefined
  return (
    <TableRow>
      <TableCell className="font-mono text-xs text-muted-foreground">{job.id.slice(0, 8)}</TableCell>
      <TableCell className="text-sm">{job.user.username}</TableCell>
      <TableCell className="text-sm">{job.product.name}</TableCell>
      <TableCell className="text-xs">{KIND_LABEL[job.kind] ?? job.kind}</TableCell>
      <TableCell
        className={`text-xs ${modelMismatch ? 'text-priority-high font-medium' : 'text-muted-foreground'}`}
        title={modelTitle}
      >
        {job.model_id ?? '—'}
      </TableCell>
      <TableCell className="text-xs font-mono text-muted-foreground">{thinkingLabel}</TableCell>
      <TableCell className="text-xs font-mono">{costLabel}</TableCell>
      <TableCell className="text-xs text-muted-foreground">
        {new Date(job.created_at).toLocaleString('nl-NL', { dateStyle: 'short', timeStyle: 'short' })}
      </TableCell>
      <TableCell>
        <div className="flex gap-2 justify-end">
          {ACTIVE_STATUSES.has(job.status) && (
            <Button variant="outline" size="sm" onClick={handleCancel} disabled={pending}>Annuleer</Button>
          )}
          <Button variant="destructive" size="sm" onClick={handleDelete} disabled={pending}>Verwijder</Button>
        </div>
      </TableCell>
    </TableRow>
  )
}

function CostsTable({ jobs }: { jobs: Job[] }) {
  return (
    <Table data-debug-id="admin-jobs-table__table">
      <TableHeader>
        <TableRow>
          <TableHead>ID</TableHead>
          <TableHead>Gebruiker</TableHead>
          <TableHead>Product</TableHead>
          <TableHead>Type</TableHead>
          <TableHead>Model</TableHead>
          <TableHead>Thinking</TableHead>
          <TableHead>Kosten (USD)</TableHead>
          <TableHead>Aangemaakt</TableHead>
          <TableHead className="text-right">Acties</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {jobs.length === 0 && (
          <TableRow>
            <TableCell colSpan={9} className="text-center text-muted-foreground py-8">
              Geen jobs gevonden
            </TableCell>
          </TableRow>
        )}
        {jobs.map((job) => <CostRow key={job.id} job={job} />)}
      </TableBody>
    </Table>
  )
}

export function JobsTable({ jobs }: { jobs: Job[] }) {
  const [view, setView] = useState<'status' | 'costs'>('status')

  return (
    <div className="space-y-3" {...debugProps('admin-jobs-table', 'JobsTable', 'components/admin/jobs-table.tsx')}>
      <div className="flex gap-1" data-debug-id="admin-jobs-table__header">
        <Button
          size="sm"
          variant={view === 'status' ? 'default' : 'outline'}
          onClick={() => setView('status')}
        >
          Status
        </Button>
        <Button
          size="sm"
          variant={view === 'costs' ? 'default' : 'outline'}
          onClick={() => setView('costs')}
        >
          Kosten
        </Button>
      </div>
      {view === 'status' ? <StatusTable jobs={jobs} /> : <CostsTable jobs={jobs} />}
    </div>
  )
}