'use client'

import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  Tooltip,
  Legend,
  ReferenceLine,
  ResponsiveContainer,
} from 'recharts'
import type { VelocityData } from '@/lib/insights/velocity'
import { SERIES_COLORS } from '@/lib/chart-colors'

interface Props {
  data: VelocityData
}

export function VelocityChart({ data }: Props) {
  const { sprints, productNames } = data

  if (sprints.length < 2) {
    return (
      <div className="rounded-lg border border-border p-4 space-y-2">
        <h2 className="text-sm font-medium">Velocity</h2>
        <p className="text-sm text-muted-foreground">
          Velocity wordt zichtbaar na 2+ voltooide sprints (nu: {sprints.length}).
        </p>
      </div>
    )
  }

  // Reshape: [{ sprintLabel, [productName1]: count, [productName2]: count, ... }]
  type Row = { sprintLabel: string } & Record<string, number | string>
  const grouped = new Map<string, Row>()
  for (const s of sprints) {
    const key = `${s.sprintId}`
    if (!grouped.has(key)) {
      grouped.set(key, { sprintLabel: s.sprintCode })
    }
    grouped.get(key)![s.productName] = s.doneCount
  }
  const rows = Array.from(grouped.values())

  // Average across all bars (used for ReferenceLine)
  const allCounts = sprints.map(s => s.doneCount)
  const avg = allCounts.length > 0 ? allCounts.reduce((a, b) => a + b, 0) / allCounts.length : 0

  return (
    <div className="rounded-lg border border-border p-4 space-y-2">
      <h2 className="text-sm font-medium">Velocity (laatste {sprints.length} sprints)</h2>
      <ResponsiveContainer width="100%" height={240}>
        <BarChart data={rows}>
          <XAxis
            dataKey="sprintLabel"
            tick={{ fontSize: 11 }}
            stroke="var(--muted-foreground)"
          />
          <YAxis tick={{ fontSize: 11 }} stroke="var(--muted-foreground)" />
          <Tooltip
            contentStyle={{
              background: 'var(--popover)',
              border: '1px solid var(--border)',
              borderRadius: 6,
              fontSize: 12,
            }}
          />
          <Legend wrapperStyle={{ fontSize: 12 }} />
          {productNames.map((p, i) => (
            <Bar
              key={p.id}
              dataKey={p.name}
              fill={SERIES_COLORS[i % SERIES_COLORS.length]}
              radius={[2, 2, 0, 0]}
            />
          ))}
          {avg > 0 && (
            <ReferenceLine
              y={avg}
              stroke="var(--muted-foreground)"
              strokeDasharray="3 3"
              label={{ value: `avg ${avg.toFixed(1)}`, fontSize: 10, fill: 'var(--muted-foreground)' }}
            />
          )}
        </BarChart>
      </ResponsiveContainer>
    </div>
  )
}