'use client';
/**
 * ReviewCard — 单条待审笔记卡
 * 通过(+5) / 打回(-3，必填原因)
 */
import { ReviewQueueItem } from '@/types/index';

interface ReviewCardProps {
  item: ReviewQueueItem;
  onApprove: () => void;
  onReject: () => void;
}

export function ReviewCard({ item, onApprove, onReject }: ReviewCardProps) {
  return (
    <article
      className="border border-border-default rounded-xl bg-surface-primary p-4"
      aria-label={`待审笔记：${item.theme}`}
    >
      <div className="flex items-start justify-between gap-4">
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 mb-1">
            <span className="text-xs text-text-secondary">{item.product_name}</span>
            <span className="text-xs text-text-tertiary">·</span>
            <span className="text-xs text-text-secondary">{item.operator_name}</span>
          </div>
          <h3 className="font-medium text-text-primary text-sm line-clamp-1">{item.theme}</h3>
          {item.selected_text && (
            <p className="text-xs text-text-secondary mt-1 line-clamp-2">
              {item.selected_text.content}
            </p>
          )}
        </div>
        {item.selected_image && (
          <img src={item.selected_image.url} alt="已选图预览"
            className="w-16 h-16 rounded-lg object-cover flex-shrink-0" />
        )}
      </div>

      {/* 操作栏 — 飞轮最强信号 */}
      <div className="flex gap-3 mt-4 pt-4 border-t border-border-default">
        <button onClick={onApprove}
          aria-label={`通过笔记：${item.theme}`}
          className="flex-1 bg-brand-green text-white rounded-lg py-2 text-sm font-medium hover:bg-green-600">
          ✓ 通过
        </button>
        <button onClick={onReject}
          aria-label={`打回笔记：${item.theme}`}
          className="flex-1 bg-surface-tertiary text-status-error border border-status-error rounded-lg py-2 text-sm font-medium hover:bg-red-50">
          ✗ 打回 + 原因
        </button>
      </div>
    </article>
  );
}

/** 审核列表骨架屏 */
export function ReviewSkeleton() {
  return (
    <div className="space-y-4" aria-busy="true" aria-label="加载待审队列中">
      {[1, 2, 3].map((i) => (
        <div key={i} className="border border-border-default rounded-xl p-4 animate-pulse space-y-3">
          <div className="flex gap-4">
            <div className="flex-1 space-y-2">
              <div className="h-3 bg-surface-tertiary rounded w-1/3" />
              <div className="h-4 bg-surface-tertiary rounded w-1/2" />
              <div className="h-3 bg-surface-tertiary rounded w-3/4" />
            </div>
            <div className="w-16 h-16 bg-surface-tertiary rounded-lg flex-shrink-0" />
          </div>
          <div className="flex gap-3 pt-3 border-t border-border-default">
            <div className="flex-1 h-8 bg-surface-tertiary rounded-lg" />
            <div className="flex-1 h-8 bg-surface-tertiary rounded-lg" />
          </div>
        </div>
      ))}
    </div>
  );
}
