'use client';
/**
 * /fission/[id]/notes — N 套裂变笔记包独立展示页（F2，新架构）
 * 一次 LLM 出的 N 套完整笔记包：标题/正文/标签/封面钩子/imagePlan/生成图/分数。
 * 数据源 GET /api/v1/fission/{id}/notes（FissionNote 落库结果）。
 */
import { useEffect, useState, useCallback } from 'react';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import { api } from '@/lib/api';
import { FissionNoteCard } from '@/components/fission/FissionNoteCard';

export interface FissionImagePlan {
  role?: string;
  title?: string;
  overlayText?: string;
  text?: string;
}
export interface FissionNoteData {
  title?: string;
  content?: string;
  tags?: string[];
  coverTitle?: string;
  dimension?: string;
  audience?: string;
  scene?: string;
  painPoint?: string;
  keywords?: string[];
  imagePlan?: FissionImagePlan[];
}
export interface FissionImage {
  role: string;
  seq?: number;
  url?: string;
  error?: string;
}
export interface FissionNoteItem {
  seq: number;
  note: FissionNoteData;
  images: FissionImage[];
  score: number | null;
  passed: boolean;
  needs_optimization: boolean;
  dimension: string | null;
  status: string;
}
interface NotesResponse {
  fission_id: number;
  status: string;
  fanout_count: number;
  notes: FissionNoteItem[];
}

export default function FissionNotesPage() {
  const params = useParams();
  const fissionId = Number(params?.id);
  const [data, setData] = useState<NotesResponse | null>(null);
  const [error, setError] = useState<string | null>(null);

  const fetchNotes = useCallback(async () => {
    setError(null);
    try {
      const res = await api.get<NotesResponse>(`/api/v1/fission/${fissionId}/notes`);
      setData(res);
    } catch {
      setError('加载裂变笔记包失败');
    }
  }, [fissionId]);

  useEffect(() => { if (fissionId) fetchNotes(); }, [fissionId, fetchNotes]);

  return (
    <div className="flex flex-col gap-6 p-6 max-w-4xl">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-xl font-semibold text-text-primary">
            裂变 #{fissionId} · {data?.fanout_count ?? ''} 套笔记包
          </h1>
          <p className="text-sm text-text-secondary mt-1">
            一个爆款裂变出的多套差异化完整笔记，可分发给不同达人。
          </p>
        </div>
        <Link href="/fission" className="text-sm text-text-secondary underline">
          返回裂变
        </Link>
      </div>

      {error && (
        <div className="rounded-lg bg-red-50 border border-red-200 p-4 text-sm text-red-600">
          {error}
          <button className="ml-4 underline" onClick={fetchNotes}>重试</button>
        </div>
      )}

      {!data && !error && (
        <div className="py-12 text-center text-text-tertiary text-sm">加载笔记包…</div>
      )}

      {data && data.notes.length === 0 && (
        <div className="py-12 text-center text-text-tertiary text-sm">
          这批裂变还没有产出笔记，可能仍在生成或已失败。
        </div>
      )}

      <div className="flex flex-col gap-6">
        {data?.notes.map((item) => (
          <FissionNoteCard key={item.seq} item={item} />
        ))}
      </div>
    </div>
  );
}
