/**
 * FEAT-6: Schlichtes, responsives SVG-Liniendiagramm (eine Serie) —
 * bewusst OHNE Chart-Bibliothek (god-Entscheidung für v1).
 * X-Achse: Datum (TT.MM.JJ), Y-Achse: Wert mit Einheiten-Suffix.
 */

export interface ChartPoint {
  /** ISO-Datum "YYYY-MM-DD". */
  date: string
  value: number
}

interface Props {
  points: ChartPoint[]
  /** Einheiten-Suffix der Y-Achse, z. B. "g". */
  unit: string
  /** Zugänglicher Titel des Diagramms. */
  title: string
}

const W = 600
const H = 260
const PAD = { top: 16, right: 16, bottom: 36, left: 48 }

function shortDate(iso: string): string {
  const [y, m, d] = iso.split('-')
  return y && m && d ? `${d}.${m}.${y.slice(2)}` : iso
}

export default function LineChart({ points, unit, title }: Props) {
  // Aufsteigend nach Datum; mindestens 2 Punkte werden vom Aufrufer garantiert.
  const sorted = [...points].sort((a, b) => a.date.localeCompare(b.date))
  const xs = sorted.map((p) => Date.parse(p.date))
  const ys = sorted.map((p) => p.value)

  const xMin = Math.min(...xs)
  const xMax = Math.max(...xs)
  const yLo = Math.min(...ys)
  const yHi = Math.max(...ys)
  // Y-Skala mit Luft nach oben/unten, auf ganze Werte gerundet.
  const yPad = Math.max(1, Math.round((yHi - yLo) * 0.15))
  const yMin = Math.max(0, yLo - yPad)
  const yMax = yHi + yPad

  const x = (t: number) =>
    xMax === xMin
      ? (PAD.left + (W - PAD.right)) / 2
      : PAD.left + ((t - xMin) / (xMax - xMin)) * (W - PAD.left - PAD.right)
  const y = (v: number) => H - PAD.bottom - ((v - yMin) / (yMax - yMin)) * (H - PAD.top - PAD.bottom)

  const path = sorted
    .map((p, i) => `${i === 0 ? 'M' : 'L'}${x(Date.parse(p.date)).toFixed(1)},${y(p.value).toFixed(1)}`)
    .join(' ')

  const yTicks = [yMin, Math.round((yMin + yMax) / 2), yMax]
  // X-Ticks: erstes, mittleres und letztes Datum (dedupliziert).
  const xTickPoints = [...new Set([0, Math.floor((sorted.length - 1) / 2), sorted.length - 1])].map(
    (i) => sorted[i],
  )

  return (
    <svg
      className="line-chart"
      viewBox={`0 0 ${W} ${H}`}
      role="img"
      aria-label={title}
      preserveAspectRatio="xMidYMid meet"
    >
      {/* Achsen */}
      <line x1={PAD.left} y1={PAD.top} x2={PAD.left} y2={H - PAD.bottom} className="line-chart__axis" />
      <line
        x1={PAD.left}
        y1={H - PAD.bottom}
        x2={W - PAD.right}
        y2={H - PAD.bottom}
        className="line-chart__axis"
      />

      {/* Y-Beschriftung + Hilfslinien */}
      {yTicks.map((v) => (
        <g key={v}>
          <line
            x1={PAD.left}
            y1={y(v)}
            x2={W - PAD.right}
            y2={y(v)}
            className="line-chart__grid"
          />
          <text x={PAD.left - 6} y={y(v) + 4} textAnchor="end" className="line-chart__label">
            {v} {unit}
          </text>
        </g>
      ))}

      {/* X-Beschriftung */}
      {xTickPoints.map((p) => (
        <text
          key={p.date}
          x={x(Date.parse(p.date))}
          y={H - PAD.bottom + 18}
          textAnchor="middle"
          className="line-chart__label"
        >
          {shortDate(p.date)}
        </text>
      ))}

      {/* Serie */}
      <path d={path} className="line-chart__line" fill="none" />
      {sorted.map((p) => (
        <circle
          key={`${p.date}-${p.value}`}
          cx={x(Date.parse(p.date))}
          cy={y(p.value)}
          r={3.5}
          className="line-chart__dot"
        />
      ))}
    </svg>
  )
}