Scrum4Me/app/(app)/insights/components/token-usage.tsx

'use client'

import { useState, useMemo } from 'react'
import type { TokenKpi, TokenJobRow } from '@/lib/insights/token-stats'

export interface TokenUsageCardProps {
  kpi: TokenKpi
  jobs: TokenJobRow[]
}

type SortKey = 'cost' | 'duration'

function fmt(n: number | null, decimals = 0): string {
  if (n === null) return '—'
  return n.toLocaleString(undefined, { minimumFractionDigits: decimals, maximumFractionDigits: decimals })
}

function fmtCost(n: number | null): string {
  if (n === null) return '—'
  return '$' + n.toFixed(4)
}

function jobLabel(job: TokenJobRow): string {
  const label = job.taskTitle ?? job.ideaCode ?? job.jobId
  return label.length > 40 ? label.slice(0, 37) + '…' : label
}

export function TokenUsageCard({ kpi, jobs }: TokenUsageCardProps) {
  const [sortKey, setSortKey] = useState<SortKey>('cost')

  const sorted = useMemo(() => {
    return [...jobs].sort((a, b) => {
      if (sortKey === 'cost') return (b.costUsd ?? -Infinity) - (a.costUsd ?? -Infinity)
      return (b.durationSeconds ?? -Infinity) - (a.durationSeconds ?? -Infinity)
    })
  }, [jobs, sortKey])

  if (kpi.jobCount === 0) {
    return <p className="text-muted-foreground">Geen token-data</p>
  }

  return (
    <div className="space-y-4">
      {/* KPI strip */}
      <div className="flex gap-6">
        <div>
          <div className="text-2xl font-semibold text-foreground">
            {kpi.totalTokens.toLocaleString()}
          </div>
          <div className="text-xs text-muted-foreground">Totaal tokens</div>
        </div>
        <div>
          <div className="text-2xl font-semibold text-foreground">
            ${kpi.totalCostUsd.toFixed(4)}
          </div>
          <div className="text-xs text-muted-foreground">Kosten (USD)</div>
        </div>
        <div>
          <div className="text-2xl font-semibold text-foreground">
            {kpi.avgCostPerJob ? '$' + kpi.avgCostPerJob.toFixed(4) : '—'}
          </div>
          <div className="text-xs text-muted-foreground">Gem. per job</div>
        </div>
      </div>

      {/* Sortable table */}
      <div className="overflow-x-auto">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-border bg-muted text-muted-foreground text-xs uppercase tracking-wide">
              <th className="py-2 pr-3 text-left font-medium">Taak</th>
              <th className="py-2 pr-3 text-left font-medium">Model</th>
              <th className="py-2 pr-3 text-right font-medium">Input</th>
              <th className="py-2 pr-3 text-right font-medium">Output</th>
              <th className="py-2 pr-3 text-right font-medium">Cache-R</th>
              <th className="py-2 pr-3 text-right font-medium">Cache-W</th>
              <th
                className={`py-2 pr-3 text-right font-medium cursor-pointer select-none ${sortKey === 'cost' ? 'text-primary' : ''}`}
                onClick={() => setSortKey('cost')}
              >
                Kosten (USD) {sortKey === 'cost' ? '▾' : ''}
              </th>
              <th
                className={`py-2 text-right font-medium cursor-pointer select-none ${sortKey === 'duration' ? 'text-primary' : ''}`}
                onClick={() => setSortKey('duration')}
              >
                Duur (s) {sortKey === 'duration' ? '▾' : ''}
              </th>
            </tr>
          </thead>
          <tbody>
            {sorted.map(job => (
              <tr key={job.jobId} className="border-b border-border last:border-0">
                <td className="py-2 pr-3 text-foreground max-w-48 truncate">{jobLabel(job)}</td>
                <td className="py-2 pr-3 text-muted-foreground whitespace-nowrap">{job.modelId ?? '—'}</td>
                <td className="py-2 pr-3 text-right tabular-nums">{fmt(job.inputTokens)}</td>
                <td className="py-2 pr-3 text-right tabular-nums">{fmt(job.outputTokens)}</td>
                <td className="py-2 pr-3 text-right tabular-nums">{fmt(job.cacheReadTokens)}</td>
                <td className="py-2 pr-3 text-right tabular-nums">{fmt(job.cacheWriteTokens)}</td>
                <td className="py-2 pr-3 text-right tabular-nums">{fmtCost(job.costUsd)}</td>
                <td className="py-2 text-right tabular-nums">{fmt(job.durationSeconds, 1)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}