/**
 * FEAT-7: Schlichtes, responsives SVG-Balkendiagramm (eine Serie) —
 * Geschwister von LineChart (FEAT-6), gleiche Konventionen: kein
 * Chart-Paket, viewBox-skaliert, __axis/__grid/__label-Klassen.
 * Eigene CSS-Datei (Standing-Rule-2-Muster: seitennahe Stile kapseln).
 */
import './BarChart.css'

export interface Bar {
  label: string
  value: number
}

interface Props {
  bars: Bar[]
  /** Zugänglicher Titel des Diagramms. */
  title: string
  /** Nachkommastellen der Wertbeschriftung (Standard 0). */
  decimals?: number
}

const W = 600
const H = 240
const PAD = { top: 24, right: 12, bottom: 28, left: 12 }

export default function BarChart({ bars, title, decimals = 0 }: Props) {
  const innerW = W - PAD.left - PAD.right
  const innerH = H - PAD.top - PAD.bottom
  const max = Math.max(...bars.map((b) => b.value), 1)
  const slot = innerW / bars.length
  const barW = Math.min(56, slot * 0.6)

  const format = (v: number) =>
    v.toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: decimals })

  return (
    <svg
      className="bar-chart"
      viewBox={`0 0 ${W} ${H}`}
      role="img"
      aria-label={title}
      preserveAspectRatio="xMidYMid meet"
    >
      <line
        x1={PAD.left}
        y1={H - PAD.bottom}
        x2={W - PAD.right}
        y2={H - PAD.bottom}
        className="bar-chart__axis"
      />
      {bars.map((bar, i) => {
        const h = (bar.value / max) * innerH
        const x = PAD.left + i * slot + (slot - barW) / 2
        const y = H - PAD.bottom - h
        return (
          <g key={bar.label}>
            <rect x={x} y={y} width={barW} height={h} rx={3} className="bar-chart__bar" />
            <text
              x={x + barW / 2}
              y={y - 6}
              textAnchor="middle"
              className="bar-chart__value"
            >
              {format(bar.value)}
            </text>
            <text
              x={x + barW / 2}
              y={H - PAD.bottom + 18}
              textAnchor="middle"
              className="bar-chart__label"
            >
              {bar.label}
            </text>
          </g>
        )
      })}
    </svg>
  )
}
