'use client';
// ImageProgressCard — 单批图进度卡：pending灰/done亮/failed红+重试
// BatchState 定义在此处（契约 image_candidate 无 batch 字段，暂按本地类型保留）
import { clsx } from 'clsx';
import { ImageCandidate } from '@/types/index';

export interface BatchState {
  index: number;
  status: 'pending' | 'done' | 'failed';
  candidates: ImageCandidate[];
  failReason?: string;
  retryable?: boolean;
}

interface ImageProgressCardProps {
  batch: BatchState;
  selected: boolean;
  onToggle: (batchIndex: number) => void;
  onRetry: (batchIndex: number) => void;
}

export function ImageProgressCard({ batch, selected, onToggle, onRetry }: ImageProgressCardProps) {
  const isDone = batch.status === 'done';
  const isFailed = batch.status === 'failed';
  const isPending = batch.status === 'pending';
  const firstImg = batch.candidates[0];

  return (
    <div
      onClick={() => isDone && onToggle(batch.index)}
      aria-selected={isDone ? selected : undefined}
      aria-label={`批次 ${batch.index + 1}：${
        isPending ? '生成中' : isFailed ? '生成失败' : '已完成'
      }${selected ? '，已选中' : ''}`}
      className={clsx(
        'relative border rounded-xl overflow-hidden transition-all',
        isDone && 'cursor-pointer',
        isDone && selected && 'border-brand-orange ring-2 ring-brand-orange/30',
        isDone && !selected && 'border-border-default hover:border-brand-orange/50',
        isFailed && 'border-status-error bg-red-50',
        isPending && 'border-border-default bg-surface-tertiary'
      )}
    >
      {/* 图片或占位 */}
      <div className="aspect-square">
        {isDone && firstImg ? (
          <img src={firstImg.url} alt={`批次 ${batch.index + 1} 生成图`}
            className="w-full h-full object-cover" />
        ) : (
          <div className="w-full h-full flex items-center justify-center">
            {isPending && (
              <div className="flex flex-col items-center gap-2 text-text-tertiary">
                <div className="w-6 h-6 border-2 border-t-transparent border-text-tertiary rounded-full animate-spin" aria-hidden="true" />
                <span className="text-xs">生成中</span>
              </div>
            )}
            {isFailed && (
              <div className="flex flex-col items-center gap-2 text-status-error px-4 text-center">
                <span className="text-xl" aria-hidden="true">⚠</span>
                <span className="text-xs">生成失败</span>
                {batch.failReason && (
                  <span className="text-xs text-text-secondary line-clamp-2">{batch.failReason}</span>
                )}
              </div>
            )}
          </div>
        )}
      </div>

      {/* 底部 badge */}
      <div className="absolute bottom-0 left-0 right-0 px-2 py-1 flex items-center justify-between bg-black/30">
        <span className="text-white text-xs">批 {batch.index + 1}</span>
        {isDone && selected && (
          <span className="text-white text-xs" aria-hidden="true">✓</span>
        )}
      </div>

      {/* 失败重试按钮 */}
      {isFailed && batch.retryable && (
        <button
          onClick={(e) => { e.stopPropagation(); onRetry(batch.index); }}
          aria-label={`重试批次 ${batch.index + 1}`}
          className="absolute top-2 right-2 bg-white text-status-error text-xs rounded-full px-2 py-0.5 border border-status-error hover:bg-red-50"
        >
          ⟳ 重试
        </button>
      )}
    </div>
  );
}

/** 骨架屏占位 */
export function ImageProgressCardSkeleton() {
  return (
    <div className="border border-border-default rounded-xl overflow-hidden animate-pulse" aria-hidden="true">
      <div className="aspect-square bg-surface-tertiary" />
    </div>
  );
}
