'use client'

import { AuditStatistics } from './types'
import { Language } from '@/lib/compliance-i18n'

export default function AuditProgressBar({ statistics, lang }: { statistics: AuditStatistics; lang: Language }) {
  const segments = [
    { key: 'compliant', count: statistics.compliant, color: 'bg-green-500', label: 'Konform' },
    { key: 'compliant_with_notes', count: statistics.compliant_with_notes, color: 'bg-yellow-500', label: 'Mit Anm.' },
    { key: 'non_compliant', count: statistics.non_compliant, color: 'bg-red-500', label: 'Nicht konform' },
    { key: 'not_applicable', count: statistics.not_applicable, color: 'bg-slate-300', label: 'N/A' },
    { key: 'pending', count: statistics.pending, color: 'bg-slate-100', label: 'Offen' },
  ]

  return (
    <div className="bg-white rounded-lg border border-slate-200 p-4 mb-6">
      <div className="flex items-center justify-between mb-3">
        <h3 className="font-semibold text-slate-900">Fortschritt</h3>
        <span className="text-2xl font-bold text-primary-600">
          {Math.round(statistics.completion_percentage)}%
        </span>
      </div>

      {/* Stacked Progress Bar */}
      <div className="h-4 bg-slate-100 rounded-full overflow-hidden flex">
        {segments.map(seg => (
          seg.count > 0 && (
            <div
              key={seg.key}
              className={`${seg.color} transition-all`}
              style={{ width: `${(seg.count / statistics.total) * 100}%` }}
              title={`${seg.label}: ${seg.count}`}
            />
          )
        ))}
      </div>

      {/* Legend */}
      <div className="flex flex-wrap gap-4 mt-3">
        {segments.map(seg => (
          <div key={seg.key} className="flex items-center gap-1.5 text-sm">
            <span className={`w-3 h-3 rounded ${seg.color}`} />
            <span className="text-slate-600">{seg.label}:</span>
            <span className="font-medium text-slate-900">{seg.count}</span>
          </div>
        ))}
      </div>
    </div>
  )
}
