/**
 * ScoreBreakdown — 판정 점수 산출 내역 시각화 컴포넌트
 *
 * 용도: dark_patterns, transship 점수 등 개별 패턴의 가점/감점을 시각적으로 표시
 * SSOT: shared/constants/darkVesselPatterns.ts (DARK_SCORING_PATTERNS)
 */
import { Badge } from '@shared/components/ui/badge';
import type { ScoringPatternMeta } from '@shared/constants/darkVesselPatterns';

interface ScoreBreakdownProps {
  items: (ScoringPatternMeta & { code: string })[];
  totalScore: number;
  maxScore?: number;
  className?: string;
}

export function ScoreBreakdown({
  items,
  totalScore,
  maxScore = 100,
  className = '',
}: ScoreBreakdownProps) {
  const addItems = items.filter(i => i.score > 0);
  const subItems = items.filter(i => i.score < 0);

  return (
    <div className={`space-y-2 ${className}`}>
      {/* 가점 항목 */}
      {addItems.map(item => (
        <div key={item.code} className="flex items-center gap-2 text-xs">
          <span className="w-14 text-right font-mono font-semibold text-emerald-400">
            {item.scoreLabel}
          </span>
          <Badge intent={item.intent} size="sm">
            {item.label}
          </Badge>
          <span className="text-hint truncate">{item.desc}</span>
        </div>
      ))}

      {/* 감점 항목 */}
      {subItems.length > 0 && (
        <>
          <div className="border-t border-white/5 my-1" />
          {subItems.map(item => (
            <div key={item.code} className="flex items-center gap-2 text-xs">
              <span className="w-14 text-right font-mono font-semibold text-blue-400">
                {item.scoreLabel}
              </span>
              <Badge intent={item.intent} size="sm">
                {item.label}
              </Badge>
              <span className="text-hint truncate">{item.desc}</span>
            </div>
          ))}
        </>
      )}

      {/* 합계 */}
      <div className="border-t border-white/10 pt-2 flex items-center gap-2 text-xs">
        <span className="w-14 text-right font-mono font-bold text-heading">
          {totalScore}
        </span>
        <span className="text-label">/ {maxScore}</span>
        <div className="flex-1 h-1.5 bg-surface-raised rounded-full overflow-hidden">
          <div
            className="h-full rounded-full transition-all"
            style={{
              width: `${Math.min(100, Math.max(0, totalScore))}%`,
              backgroundColor: totalScore >= 70 ? '#ef4444' : totalScore >= 50 ? '#f97316' : totalScore >= 30 ? '#eab308' : '#64748b',
            }}
          />
        </div>
      </div>
    </div>
  );
}
