'use client';
// ImageStrategyGroup — 按"套"(A/B/C)分组展示挑图，组内按 seq 固定6图序，点图放大
import { ImageCandidate } from '@/types/index';

// 套别中文标签（三套正交叙事：痛点先行/场景先行/成分背书先行）
export const STRATEGY_LABEL: Record<string, string> = {
  A: '套1 · 痛点先行',
  B: '套2 · 场景先行',
  C: '套3 · 成分背书先行',
};

// 角色中文名（北哥固定6图序，让"重试批次hook"变可读）
export const ROLE_LABEL: Record<string, string> = {
  hook: '封面·痛点大字',
  product_closeup: '产品特写',
  ingredient: '成分背书',
  texture: '质地展示',
  applied_proof: '使用实证',
  closer: '收尾导购',
  pain: '痛点场景',
  proof: '效果实证',
  quality: '品质细节',
  credit: '资质背书',
  convert: '转化引导',
  main: '主图',
};

interface ImageStrategyGroupProps {
  strategy: string;
  candidates: ImageCandidate[];
  selectedImageIds: number[];
  onToggle: (id: number) => void;
  onZoom: (c: ImageCandidate) => void;
  onRegen?: (strategy: string, role: string | undefined, label: string) => void;
}

export function ImageStrategyGroup({
  strategy, candidates, selectedImageIds, onToggle, onZoom, onRegen,
}: ImageStrategyGroupProps) {
  // 组内按 seq 升序（北哥固定序）；seq 缺失的排末尾
  const ordered = [...candidates].sort(
    (a, b) => (a.seq ?? 999) - (b.seq ?? 999)
  );

  return (
    <section className="mb-6">
      <h3 className="mb-2 flex items-center text-sm font-semibold text-text-primary">
        {STRATEGY_LABEL[strategy] || `套${strategy}`}
        <span className="ml-2 text-xs font-normal text-text-tertiary">
          共 {ordered.length} 张
        </span>
        {onRegen && (
          <button
            onClick={() => onRegen(strategy, undefined, STRATEGY_LABEL[strategy] || `套${strategy}`)}
            className="ml-auto rounded-md border border-border-default px-2 py-0.5 text-xs font-normal text-text-secondary hover:border-brand-orange hover:text-brand-orange"
          >
            ⟳ 重生整套
          </button>
        )}
      </h3>
      <div className="grid grid-cols-3 gap-3 xl:grid-cols-6">
        {ordered.map((c) => {
          const selected = selectedImageIds.includes(c.candidate_id);
          return (
            <div
              key={c.candidate_id}
              className={`relative overflow-hidden rounded-xl border transition-all
                ${selected ? 'border-brand-orange ring-2 ring-brand-orange' : 'border-border-default'}`}
            >
              {/* 序号角标：组内第几张 */}
              <span className="absolute left-1.5 top-1.5 z-10 rounded-md bg-black/60 px-1.5 py-0.5 text-[11px] font-semibold text-white">
                {c.seq ?? '?'}
              </span>
              {onRegen && (
                <button
                  onClick={() => onRegen(strategy, c.role, ROLE_LABEL[c.role] || c.role)}
                  aria-label={`重生 ${ROLE_LABEL[c.role] || c.role}`}
                  className="absolute bottom-9 right-1.5 z-10 rounded-md bg-black/55 px-1.5 py-0.5 text-[11px] text-white hover:bg-brand-orange"
                >
                  ⟳ 重生
                </button>
              )}
              <img
                src={c.url}
                alt={ROLE_LABEL[c.role] || c.role}
                onClick={() => onZoom(c)}
                className="aspect-[3/4] w-full cursor-zoom-in object-cover"
              />
              {c.ai_visual_score != null && (
                <span
                  title={c.ai_visual_note || undefined}
                  className={`absolute right-1.5 top-1.5 rounded-md px-1.5 py-0.5 text-[11px] font-semibold text-white
                    ${c.ai_visual_score >= 80 ? 'bg-emerald-500' : c.ai_visual_score >= 60 ? 'bg-amber-500' : 'bg-gray-500'}`}
                >
                  AI {Math.round(c.ai_visual_score)}
                </span>
              )}
              <button
                onClick={() => onToggle(c.candidate_id)}
                aria-label={`${selected ? '取消选择' : '选择'} ${ROLE_LABEL[c.role] || c.role}`}
                className={`w-full py-1.5 text-xs font-medium transition-colors
                  ${selected ? 'bg-brand-orange text-white' : 'bg-surface-secondary text-text-secondary hover:bg-brand-orange/10'}`}
              >
                {ROLE_LABEL[c.role] || c.role}{selected ? ' ✓' : ''}
              </button>
            </div>
          );
        })}
      </div>
    </section>
  );
}
