'use client';
/**
 * FissionNoteCard — 单套裂变笔记包卡片（F2 子组件）
 * 展示：维度/分数徽章 + 标题 + 正文 + 标签 + 生成图 + imagePlan 排版说明。
 */
import type { FissionNoteItem } from '@/app/fission/[id]/notes/page';

interface Props {
  item: FissionNoteItem;
}

// 图片 url 后端给 /uploads/... 相对路径，前端同源直接用
function imgSrc(url?: string): string | null {
  if (!url) return null;
  return url.startsWith('/uploads/') ? url : `/uploads/${url.replace(/^.*\/uploads\//, '')}`;
}

export function FissionNoteCard({ item }: Props) {
  const { note, images, score, passed, needs_optimization, dimension, seq } = item;
  const okImages = images.filter((im) => im.url && !im.error);
  const failedImages = images.filter((im) => im.error);

  return (
    <div className="rounded-xl border border-border-default bg-surface-primary p-5 flex flex-col gap-4">
      {/* 头部：序号 + 维度 + 分数 */}
      <div className="flex items-center justify-between gap-3">
        <div className="flex items-center gap-2">
          <span className="text-sm font-semibold text-text-primary">第 {seq} 套</span>
          {(dimension || note.dimension) && (
            <span className="text-xs px-2 py-0.5 rounded-full bg-surface-tertiary text-text-secondary">
              {dimension || note.dimension}
            </span>
          )}
        </div>
        <div className="flex items-center gap-2">
          {score != null && (
            <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${
              passed ? 'bg-green-50 text-green-600' : 'bg-amber-50 text-amber-600'
            }`}>
              {score} 分
            </span>
          )}
          {needs_optimization && (
            <span className="text-xs px-2 py-0.5 rounded-full bg-amber-50 text-amber-600">
              建议优化
            </span>
          )}
        </div>
      </div>

      {/* 标题 + 封面钩子 */}
      {note.coverTitle && (
        <p className="text-sm font-medium text-brand-orange">钩子：{note.coverTitle}</p>
      )}
      {note.title && (
        <h3 className="text-base font-semibold text-text-primary">{note.title}</h3>
      )}

      {/* 正文 */}
      {note.content && (
        <p className="text-sm text-text-secondary whitespace-pre-wrap leading-relaxed">
          {note.content}
        </p>
      )}

      {/* 标签 */}
      {note.tags && note.tags.length > 0 && (
        <div className="flex flex-wrap gap-1.5">
          {note.tags.map((t, i) => (
            <span key={i} className="text-xs text-brand-orange">#{t}</span>
          ))}
        </div>
      )}

      {/* 生成图 */}
      {okImages.length > 0 && (
        <div className="grid grid-cols-3 gap-2">
          {okImages.map((im) => (
            <div key={im.seq} className="flex flex-col gap-1">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={imgSrc(im.url) || ''}
                alt={im.role}
                className="w-full aspect-[3/4] object-cover rounded-lg border border-border-default"
              />
              <span className="text-[11px] text-text-tertiary text-center">{im.role}</span>
            </div>
          ))}
        </div>
      )}
      {failedImages.length > 0 && (
        <p className="text-xs text-amber-600">
          {failedImages.length} 张配图生成失败，可在交付前重试生图。
        </p>
      )}

      {/* imagePlan 排版说明（运营按此排版/叠字） */}
      {note.imagePlan && note.imagePlan.length > 0 && (
        <details className="text-sm">
          <summary className="cursor-pointer text-text-secondary">
            图片排版说明（{note.imagePlan.length} 张）
          </summary>
          <ol className="mt-2 flex flex-col gap-2 list-decimal list-inside">
            {note.imagePlan.map((p, i) => (
              <li key={i} className="text-xs text-text-tertiary">
                <span className="text-text-secondary">{p.role || `图${i + 1}`}</span>
                {p.title && <> · 标题：{p.title}</>}
                {p.overlayText && <> · 叠字：{p.overlayText}</>}
                {p.text && <> · 画面：{p.text}</>}
              </li>
            ))}
          </ol>
        </details>
      )}
    </div>
  );
}
