'use client';
// ScoreDimBars — 评分条。优先用 AI 评委明细 dims(7维带理由)，无则回退旧5维。
import { TextScore } from '@/types/index';
import { clsx } from 'clsx';

const LEGACY_DIMS = [
  { key: 'title' as const, label: '标题', max: 25 },
  { key: 'emotion' as const, label: '情绪', max: 25 },
  { key: 'selling' as const, label: '买点', max: 25 },
  { key: 'keyword' as const, label: '关键词', max: 20 },
  { key: 'compliance' as const, label: '合规', max: 5 },
];

interface ScoreDimBarsProps {
  score: TextScore;
  passLine?: number;
}

interface Bar { label: string; val: number; max: number; note?: string; }

export function ScoreDimBars({ score, passLine = 85 }: ScoreDimBarsProps) {
  const bars: Bar[] = score.dims && score.dims.length
    ? score.dims.map((d) => ({ label: d.item, val: d.score, max: d.max || 1, note: d.note }))
    : LEGACY_DIMS.map((d) => ({ label: d.label, val: score[d.key], max: d.max }));

  return (
    <div className="mt-3 space-y-1">
      {bars.map((dim) => {
        const pct = Math.round((dim.val / dim.max) * 100);
        return (
          <div key={dim.label} className="flex items-center gap-2" title={dim.note || undefined}>
            <span className="text-xs text-text-secondary w-20 text-right truncate">{dim.label}</span>
            <div className="flex-1 h-1.5 bg-surface-tertiary rounded-full overflow-hidden"
              role="progressbar" aria-label={`${dim.label}得分 ${dim.val}/${dim.max}`}
              aria-valuenow={dim.val} aria-valuemin={0} aria-valuemax={dim.max}>
              <div className="h-full bg-brand-orange rounded-full" style={{ width: `${pct}%` }} />
            </div>
            <span className="text-xs text-text-secondary w-6 text-right">{dim.val}</span>
          </div>
        );
      })}
      <div className="flex items-center justify-between mt-2 pt-2 border-t border-border-default">
        <span className="text-xs text-text-secondary">总分</span>
        <span className={clsx(
          'text-sm font-bold',
          score.total >= passLine ? 'text-status-success' : 'text-text-secondary'
        )}>
          {score.total}
        </span>
      </div>
    </div>
  );
}
