Scrum4Me/components/jobs/job-usage-pane.tsx

'use client'

import { debugProps } from '@/lib/debug'
import type { JobWithRelations } from '@/actions/jobs-page'

interface FieldRowProps {
  label: string
  children: React.ReactNode
}

function FieldRow({ label, children }: FieldRowProps) {
  return (
    <div className="flex gap-2 py-1.5 border-b border-border/50 text-sm">
      <span className="w-32 shrink-0 text-muted-foreground">{label}</span>
      <span className="flex-1 min-w-0 font-mono text-xs">{children}</span>
    </div>
  )
}

function formatNumber(n: number | null | undefined): string {
  return n != null ? n.toLocaleString('nl-NL') : '—'
}

function formatDuration(start: Date | null, end: Date | null): string {
  if (!start) return '—'
  const endTime = end ? new Date(end).getTime() : Date.now()
  const ms = endTime - new Date(start).getTime()
  if (ms < 0) return '—'
  const sec = Math.floor(ms / 1000)
  if (sec < 60) return `${sec}s`
  const min = Math.floor(sec / 60)
  const remSec = sec % 60
  if (min < 60) return `${min}m ${remSec}s`
  const hr = Math.floor(min / 60)
  const remMin = min % 60
  return `${hr}u ${remMin}m`
}

interface JobUsagePaneProps {
  job: JobWithRelations | null
}

export default function JobUsagePane({ job }: JobUsagePaneProps) {
  if (!job) {
    return (
      <div className="flex items-center justify-center h-full text-sm text-muted-foreground" {...debugProps('job-usage-pane', 'JobUsagePane', 'components/jobs/job-usage-pane.tsx')}>
        Selecteer een job om gebruik te zien
      </div>
    )
  }

  const totalTokens =
    (job.inputTokens ?? 0) +
    (job.outputTokens ?? 0) +
    (job.cacheReadTokens ?? 0) +
    (job.cacheWriteTokens ?? 0)

  const costLabel = job.costUsd != null ? `$${job.costUsd.toFixed(4)}` : '—'

  return (
    <div className="overflow-y-auto h-full p-4" {...debugProps('job-usage-pane', 'JobUsagePane', 'components/jobs/job-usage-pane.tsx')}>
      <div data-debug-id="job-usage-pane__header">
        <FieldRow label="Model">{job.modelId ?? '—'}</FieldRow>
      </div>
      <div data-debug-id="job-usage-pane__table">
        <FieldRow label="Tokens invoer">{formatNumber(job.inputTokens)}</FieldRow>
        <FieldRow label="Tokens uitvoer">{formatNumber(job.outputTokens)}</FieldRow>
        <FieldRow label="Cache read">{formatNumber(job.cacheReadTokens)}</FieldRow>
        <FieldRow label="Cache write">{formatNumber(job.cacheWriteTokens)}</FieldRow>
        <FieldRow label="Tokens totaal">{formatNumber(totalTokens || null)}</FieldRow>
        <FieldRow label="Kosten (USD)">{costLabel}</FieldRow>
        <FieldRow label="Duur">{formatDuration(job.startedAt, job.finishedAt)}</FieldRow>
      </div>
    </div>
  )
}