'use client'

/**
 * Speedometer + Color-Legende für eine MC-Auswertung.
 * Zeigt 5 Klassen: OK / n/a / HIGH / MEDIUM / LOW als horizontaler Balken.
 */

import React from 'react'

interface Props {
  total: number
  ok: number
  na: number
  high: number
  medium: number
  low: number
}

export function AgentSpeedometer({ total, ok, na, high, medium, low }: Props) {
  const safeTotal = Math.max(total, 1)
  return (
    <div className="space-y-1">
      <div className="text-xs text-gray-500">
        {total} Machine-Checks (MCs) durchlaufen
      </div>
      <div className="flex h-4 rounded overflow-hidden border">
        <Bar pct={(ok / safeTotal) * 100} color="#10b981" />
        <Bar pct={(na / safeTotal) * 100} color="#94a3b8" />
        <Bar pct={(high / safeTotal) * 100} color="#dc2626" />
        <Bar pct={(medium / safeTotal) * 100} color="#f59e0b" />
        <Bar pct={(low / safeTotal) * 100} color="#3b82f6" />
      </div>
      <div className="flex flex-wrap gap-3 text-xs">
        <Legend color="#10b981" label={`OK ${ok}`} title="Geprüft & erfüllt" />
        <Legend color="#94a3b8" label={`n/a ${na}`} title="Nicht anwendbar (Branche, B2C, …)" />
        <Legend color="#dc2626" label={`HIGH ${high}`} title="Pflichtangabe fehlt / hartes Risiko" />
        <Legend color="#f59e0b" label={`MEDIUM ${medium}`} title="Ergänzung empfohlen" />
        <Legend color="#3b82f6" label={`LOW ${low}`} title="Best-Practice-Hinweis" />
      </div>
    </div>
  )
}

function Bar({ pct, color }: { pct: number; color: string }) {
  return <div style={{ width: `${pct}%`, background: color }} />
}

function Legend({
  color, label, title,
}: { color: string; label: string; title?: string }) {
  return (
    <span className="inline-flex items-center gap-1" title={title}>
      <span style={{ background: color }} className="w-2 h-2 inline-block rounded" />
      <span>{label}</span>
    </span>
  )
}