import { cn } from '@/lib/utils';
import type { ReviewResult } from '../../types/ai-writing';
import { ScoreBar } from './ScoreBar';
import { IssueList } from './IssueList';

interface ReviewCardProps {
  review: ReviewResult;
  revisionCount?: number;
  selectedIndices?: Set<number>;
  onToggleIssue?: (index: number) => void;
}

export function ReviewCard({ review, revisionCount, selectedIndices, onToggleIssue }: ReviewCardProps) {
  const isPassed = review.verdict === 'pass';

  return (
    <div className="rounded-md border bg-muted/20 overflow-hidden text-xs">
      {/* 头部：综合评分 + 轮次 */}
      <div className="flex items-center justify-between px-3 py-2 border-b">
        <div className="flex items-center gap-2">
          <span className="font-medium">编辑审核结果</span>
          {revisionCount !== undefined && revisionCount > 0 && (
            <span className="text-muted-foreground">（第 {revisionCount} 次修改）</span>
          )}
        </div>
        <div className="flex items-center gap-2">
          <span
            className={cn(
              'rounded-full px-2 py-0.5 text-[10px] font-semibold',
              isPassed
                ? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-400'
                : 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-400',
            )}
          >
            {isPassed ? '通过' : '打回'}
          </span>
          <span className="font-semibold tabular-nums">
            {review.overallScore}
            <span className="text-muted-foreground font-normal"> / 100</span>
          </span>
        </div>
      </div>

      {/* 分项评分 */}
      <div className="px-3 py-2.5 space-y-2 border-b">
        <ScoreBar label="事实准确性" score={review.factScore} />
        <ScoreBar label="逻辑结构" score={review.logicScore} />
        <ScoreBar label="语言文字" score={review.languageScore} />
        <p className="text-muted-foreground/60 text-[10px]">
          通过线：{review.passThreshold} 分
        </p>
      </div>

      {/* 修改意见（支持勾选） */}
      {review.revisionNotes.length > 0 && (
        <div className="px-3 py-2.5">
          <div className="flex items-center justify-between mb-2">
            <p className="text-muted-foreground font-medium">修改意见</p>
            {selectedIndices !== undefined && onToggleIssue && (
              <p className="text-[10px] text-muted-foreground">
                已选 {selectedIndices.size} / {review.revisionNotes.length}
              </p>
            )}
          </div>
          <IssueList
            issues={review.revisionNotes}
            selectedIndices={selectedIndices}
            onToggle={onToggleIssue}
          />
        </div>
      )}
    </div>
  );
}