'use client'

import type { BrandAlignmentScoreResult } from '@actuate-media/cms-core/brand-voice'
import { brandAlignmentLabel, brandAlignmentTone } from '../lib/brand-voice-client.js'

export function BrandVoiceAlignmentBadge({
  alignment,
  compact = false,
}: {
  alignment: BrandAlignmentScoreResult
  compact?: boolean
}) {
  const tone = brandAlignmentTone(alignment.score)
  const label = brandAlignmentLabel(alignment.score)
  const errorCount = alignment.issues.filter((i) => i.severity === 'error').length
  const warningCount = alignment.issues.filter((i) => i.severity === 'warning').length

  return (
    <div
      className="border-border bg-muted/40 inline-flex flex-wrap items-center gap-2 rounded-md border px-2.5 py-1.5 text-sm"
      aria-label={`Brand voice score ${alignment.score} out of 100`}
    >
      <span className={`font-medium ${tone}`}>{alignment.score}/100</span>
      <span className="text-muted-foreground">{label}</span>
      {!compact && alignment.channel && (
        <span className="text-muted-foreground text-xs">
          · {alignment.channel.replace(/_/g, ' ')}
        </span>
      )}
      {(errorCount > 0 || warningCount > 0) && (
        <span className="text-muted-foreground text-xs">
          · {errorCount > 0 ? `${errorCount} issue${errorCount === 1 ? '' : 's'}` : ''}
          {errorCount > 0 && warningCount > 0 ? ', ' : ''}
          {warningCount > 0 ? `${warningCount} warning${warningCount === 1 ? '' : 's'}` : ''}
        </span>
      )}
    </div>
  )
}
