'use client'

import { PieChart, Pie, Cell, Tooltip, Legend, ResponsiveContainer } from 'recharts'
import type { StatusCount } from '@/lib/insights/sprint-status'

interface Props {
  data: StatusCount[]
}

const STATUS_COLORS: Record<string, string> = {
  TO_DO: 'var(--status-todo)',
  IN_PROGRESS: 'var(--status-in-progress)',
  DONE: 'var(--status-done)',
}

const STATUS_LABELS: Record<string, string> = {
  TO_DO: 'To do',
  IN_PROGRESS: 'In progress',
  DONE: 'Done',
}

export function SprintStatusDonut({ data }: Props) {
  if (data.length === 0) {
    return <p className="text-muted-foreground text-sm">Geen actieve sprint-taken</p>
  }

  const labeled = data.map(d => ({ ...d, name: STATUS_LABELS[d.status] ?? d.status }))

  return (
    <ResponsiveContainer width="100%" height={240}>
      <PieChart>
        <Pie
          data={labeled}
          dataKey="count"
          nameKey="name"
          innerRadius={50}
          outerRadius={80}
        >
          {labeled.map(entry => (
            <Cell key={entry.status} fill={STATUS_COLORS[entry.status]} />
          ))}
        </Pie>
        <Tooltip />
        <Legend />
      </PieChart>
    </ResponsiveContainer>
  )
}
