'use client'

import React from 'react'
import type { CategoryScore } from '../_hooks/useBenchmark'

interface Props { breakdown: CategoryScore[] }

const CATEGORY_LABELS: Record<string, string> = {
  'mechanische gefaehrdungen': 'Mechanisch',
  'elektrische gefaehrdungen': 'Elektrisch',
  'thermische gefaehrdungen': 'Thermisch',
  'laerm': 'Laerm',
  'vibration': 'Vibration',
  'strahlung': 'Strahlung',
  'materialien und substanzen': 'Materialien/Substanzen',
  'ergonomische gefaehrdungen': 'Ergonomie',
  'einsatzumgebung': 'Einsatzumgebung',
}

export function CategoryBreakdown({ breakdown }: Props) {
  if (!breakdown || breakdown.length === 0) return null

  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
      <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">Coverage nach Gefaehrdungsgruppe</h3>
      <div className="space-y-2">
        {breakdown.map((cat) => {
          const label = CATEGORY_LABELS[cat.category] || cat.category
          const pct = Math.round(cat.coverage * 100)
          const barColor = pct >= 80 ? 'bg-green-500' : pct >= 50 ? 'bg-yellow-500' : 'bg-red-500'
          return (
            <div key={cat.category}>
              <div className="flex justify-between text-xs text-gray-600 dark:text-gray-400 mb-0.5">
                <span>{label}</span>
                <span>{cat.match_count}/{cat.gt_count} ({pct}%)</span>
              </div>
              <div className="h-2 bg-gray-100 dark:bg-gray-700 rounded-full overflow-hidden">
                <div className={`h-full ${barColor} rounded-full transition-all`} style={{ width: `${pct}%` }} />
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}
