Scrum4Me/app/(app)/insights/components/agent-throughput.tsx

'use client'

import { useRouter, usePathname, useSearchParams } from 'next/navigation'
import { useTransition } from 'react'
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  Tooltip,
  ResponsiveContainer,
} from 'recharts'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import type { JobsPerDayResult } from '@/lib/insights/agent-throughput'
import { JOB_STATUS_COLORS } from '@/lib/chart-colors'

interface Props {
  data: JobsPerDayResult
  productList: { id: string; name: string }[]
  currentProductId?: string
}

function formatDuration(seconds: number | null): string {
  if (seconds === null) return '—'
  const m = Math.floor(seconds / 60)
  const s = seconds % 60
  return m > 0 ? `${m}m ${s}s` : `${s}s`
}

const STACKED_STATUSES = ['queued', 'claimed', 'running', 'done', 'failed', 'cancelled', 'skipped'] as const

export function AgentThroughputCard({ data, productList, currentProductId }: Props) {
  const router = useRouter()
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const [isPending, startTransition] = useTransition()

  const { perDay, kpi } = data

  const isEmpty = perDay.every(
    d => d.done + d.failed + d.queued + d.claimed + d.running + d.cancelled + d.skipped === 0,
  )

  function handleProductChange(value: string | null) {
    if (value === null) return
    startTransition(() => {
      const params = new URLSearchParams(searchParams.toString())
      if (value === '__all__') {
        params.delete('product')
      } else {
        params.set('product', value)
      }
      router.replace(`${pathname}?${params.toString()}`)
    })
  }

  return (
    <div className="space-y-4">
      {/* KPI strip + product filter */}
      <div className="flex items-start justify-between gap-4 flex-wrap">
        <div className="flex gap-6">
          <div>
            <div className="text-2xl font-semibold text-foreground">{kpi.todayCount}</div>
            <div className="text-xs text-muted-foreground">Jobs vandaag</div>
          </div>
          <div>
            <div className="text-2xl font-semibold text-foreground">
              {kpi.successRate7d === 0 ? '—' : `${Math.round(kpi.successRate7d * 100)}%`}
            </div>
            <div className="text-xs text-muted-foreground">Success-rate (7d)</div>
          </div>
          <div>
            <div className="text-2xl font-semibold text-foreground">
              {formatDuration(kpi.avgDurationSeconds7d)}
            </div>
            <div className="text-xs text-muted-foreground">Avg duration (7d)</div>
          </div>
        </div>

        {productList.length > 0 && (
          <Select
            value={currentProductId ?? '__all__'}
            onValueChange={handleProductChange}
          >
            <SelectTrigger className="w-44" disabled={isPending}>
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="__all__">Alle producten</SelectItem>
              {productList.map(p => (
                <SelectItem key={p.id} value={p.id}>{p.name}</SelectItem>
              ))}
            </SelectContent>
          </Select>
        )}
      </div>

      {/* Chart */}
      {isEmpty ? (
        <p className="text-sm text-muted-foreground py-4 text-center">
          Geen agent-activiteit in de laatste 2 weken
        </p>
      ) : (
        <ResponsiveContainer width="100%" height={240}>
          <BarChart data={perDay}>
            <XAxis
              dataKey="day"
              tick={{ fontSize: 11 }}
              tickFormatter={v => (v as string).slice(5)}
            />
            <YAxis allowDecimals={false} tick={{ fontSize: 11 }} />
            <Tooltip />
            {STACKED_STATUSES.map(status => (
              <Bar
                key={status}
                dataKey={status}
                stackId="status"
                fill={JOB_STATUS_COLORS[status]}
                name={status}
              />
            ))}
          </BarChart>
        </ResponsiveContainer>
      )}
    </div>
  )
}