Scrum4Me/app/(app)/insights/components/backlog-health.tsx

'use client'

import { useRouter } from 'next/navigation'
import { CheckCircle, AlertTriangle, XCircle } from 'lucide-react'
import type { BacklogHealth, StuckTask } from '@/lib/insights/backlog-health'

interface Props {
  data: BacklogHealth
}

function Counter({ label, count }: { label: string; count: number }) {
  const healthy = count === 0
  return (
    <div className="flex flex-col items-center gap-1 rounded-lg border border-border bg-surface-container p-3">
      {healthy ? (
        <CheckCircle className="h-5 w-5 text-status-done" />
      ) : (
        <AlertTriangle className="h-5 w-5 text-priority-medium" />
      )}
      <span className="text-xl font-semibold text-foreground">{count}</span>
      <span className="text-xs text-muted-foreground text-center leading-tight">{label}</span>
    </div>
  )
}

function daysStuckClass(days: number): string {
  if (days >= 14) return 'bg-priority-critical/15 text-priority-critical font-semibold'
  if (days >= 7) return 'bg-priority-medium/15 text-priority-medium font-semibold'
  return ''
}

function StuckTable({ tasks }: { tasks: StuckTask[] }) {
  const router = useRouter()

  if (tasks.length === 0) {
    return (
      <p className="text-sm text-muted-foreground py-2">Geen stuck tasks 🎉</p>
    )
  }

  return (
    <table className="w-full text-sm">
      <thead>
        <tr className="border-b border-border text-left text-xs text-muted-foreground uppercase tracking-wide">
          <th className="pb-1 pr-3 font-medium">Taak</th>
          <th className="pb-1 pr-3 font-medium">Product</th>
          <th className="pb-1 pr-3 font-medium">Days</th>
          <th className="pb-1 font-medium">Sprint</th>
        </tr>
      </thead>
      <tbody>
        {tasks.map(t => (
          <tr
            key={t.taskId}
            className="border-b border-border last:border-0 cursor-pointer hover:bg-surface-container-high transition-colors"
            onClick={() => router.push(`/products/${t.productId}/solo?task=${t.taskId}`)}
          >
            <td className="py-1.5 pr-3 line-clamp-1 max-w-[200px]">{t.title}</td>
            <td className="py-1.5 pr-3 text-muted-foreground whitespace-nowrap">{t.productName}</td>
            <td className={`py-1.5 pr-3 whitespace-nowrap px-1 rounded ${daysStuckClass(t.daysStuck)}`}>
              {t.daysStuck}d
            </td>
            <td className="py-1.5 text-muted-foreground whitespace-nowrap line-clamp-1 max-w-[140px]">
              {t.sprintGoal ?? '—'}
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  )
}

export function BacklogHealthCard({ data }: Props) {
  return (
    <div className="space-y-4">
      <div className="grid grid-cols-3 gap-3">
        <Counter label="Stories zonder AC" count={data.storiesWithoutAc} />
        <Counter label="Tasks zonder plan" count={data.tasksWithoutPlan} />
        <Counter label="Stuck > 7 dagen" count={data.stuckTasks.length} />
      </div>

      <div>
        <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2">
          Stuck tasks
        </p>
        <StuckTable tasks={data.stuckTasks} />
      </div>
    </div>
  )
}