"use client"
import { forwardRef, useEffect, useImperativeHandle, useRef, useState, type ReactNode } from "react"
import { createPortal } from "react-dom"
import {
  Link2, Upload, Download, Scissors, Image as ImageIcon,
  Mic, Languages, FileEdit, Sparkles, Film, FileVideo, Loader2, Plus, Check,
  ChevronDown, X, LayoutGrid,
} from "lucide-react"
import { type Job, type KeyFrame, frameUrl, effectiveFrameUrl, videoUrl, generateImage, selectGenerated, generatedImageUrl, apiAssetUrl } from "@/lib/api"
import { type NodeData } from "@/components/nodes"
import { FrameLightbox } from "@/components/lightbox"
import { toast } from "sonner"

type ColType = "input" | "process" | "ai" | "output"
const TYPE_GRAD: Record<ColType, string> = {
  input: "linear-gradient(135deg, #6366f1, #a855f7)",
  process: "linear-gradient(135deg, #f59e0b, #ef4444)",
  ai: "linear-gradient(135deg, #d946ef, #ec4899)",
  output: "linear-gradient(135deg, #10b981, #06b6d4)",
}

type ColState = "pending" | "running" | "done" | "failed"
const STATE_DOT: Record<ColState, string> = {
  pending: "bg-white/25",
  running: "bg-violet-300 shadow-[0_0_8px_rgba(167,139,250,0.8)] animate-pulse",
  done: "bg-emerald-300 shadow-[0_0_8px_rgba(110,231,183,0.7)]",
  failed: "bg-red-400 shadow-[0_0_8px_rgba(248,113,113,0.7)]",
}

function MiniCard({ children, className = "", onClick }: { children: ReactNode; className?: string; onClick?: (e: React.MouseEvent) => void }) {
  return (
    <div
      className={`rounded-lg bg-white/[0.04] dark:bg-white/[0.04] border border-white/10 backdrop-blur-md p-2.5 text-[var(--text-strong)] ${onClick ? "cursor-pointer hover:bg-white/[0.07] hover:border-white/20 transition" : ""} ${className}`}
      onClick={onClick}
    >
      {children}
    </div>
  )
}

type KanbanTone = "violet" | "pink" | "orange" | "blue" | "green" | "cyan" | "rose" | "amber"

function KanbanCard({
  tone = "violet",
  tags,
  title,
  className = "",
  onClick,
  meta,
  children,
}: {
  tone?: KanbanTone
  tags?: string[]
  title?: ReactNode
  className?: string
  onClick?: (e: React.MouseEvent) => void
  meta?: ReactNode
  children?: ReactNode
}) {
  return (
    <div className={`kanban-card kanban-${tone} ${onClick ? "cursor-pointer" : ""} ${className}`} onClick={onClick}>
      {tags && tags.length > 0 && (
        <div className="flex items-center gap-1.5 mb-2 flex-wrap">
          {tags.map((t) => (
            <span key={t} className="kanban-tag">#{t}</span>
          ))}
        </div>
      )}
      {title && <h3 className="text-[13.5px] font-semibold text-[var(--text-strong)] leading-snug mb-1.5">{title}</h3>}
      {children}
      {meta && <div className="kanban-meta">{meta}</div>}
    </div>
  )
}

interface Props {
  data: NodeData
}

export interface DashboardHandle {
  openPanel: (key: string) => void
}

export const Dashboard = forwardRef<DashboardHandle, Props>(function Dashboard({ data }, ref) {
  const { job } = data
  const [url, setUrl] = useState("")
  const [videoT, setVideoT] = useState(0)
  const [addingFrame, setAddingFrame] = useState(false)
  const [expanded, setExpanded] = useState<Set<string>>(new Set())
  const [mounted, setMounted] = useState(false)
  useEffect(() => setMounted(true), [])
  useImperativeHandle(ref, () => ({
    openPanel: (key: string) => setExpanded(new Set([key])),
  }), [])

  // drawer 宽度 per panel · 持久化到 localStorage
  const drawerKey = (() => {
    const keys = Array.from(expanded)
    if (keys.length === 0) return ""
    const base = keys[0]
    if (base === "keyframe" && data.expandedFrame !== null) return "keyframe:lightbox"
    return base
  })()
  const isLightboxMode = drawerKey === "keyframe:lightbox"
  const defaultWidth = isLightboxMode ? 760 : 400
  const minDrawerWidth = isLightboxMode ? 480 : 280
  const [drawerWidths, setDrawerWidths] = useState<Record<string, number>>({})
  useEffect(() => {
    if (typeof window === "undefined") return
    try {
      const stored = JSON.parse(localStorage.getItem("skg.drawer.widths") || "{}")
      if (stored && typeof stored === "object") setDrawerWidths(stored)
    } catch { /* ignore */ }
  }, [])
  const drawerWidth = drawerKey ? (drawerWidths[drawerKey] ?? defaultWidth) : defaultWidth
  const setDrawerWidth = (w: number) => {
    if (!drawerKey) return
    const clamped = Math.max(minDrawerWidth, Math.min(1400, w))
    setDrawerWidths((prev) => {
      const next = { ...prev, [drawerKey]: clamped }
      try { localStorage.setItem("skg.drawer.widths", JSON.stringify(next)) } catch { /* ignore */ }
      return next
    })
  }

  // 拖拽
  const dragRef = useRef<{ startX: number; startW: number } | null>(null)
  const onResizeMouseDown = (e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
    dragRef.current = { startX: e.clientX, startW: drawerWidth }
    const onMove = (ev: MouseEvent) => {
      if (!dragRef.current) return
      const delta = ev.clientX - dragRef.current.startX
      setDrawerWidth(dragRef.current.startW + delta)
    }
    const onUp = () => {
      dragRef.current = null
      window.removeEventListener("mousemove", onMove)
      window.removeEventListener("mouseup", onUp)
    }
    window.addEventListener("mousemove", onMove)
    window.addEventListener("mouseup", onUp)
  }
  const tileRefs = useRef<Record<string, HTMLButtonElement | null>>({})
  const fileRef = useRef<HTMLInputElement>(null)
  const videoRef = useRef<HTMLVideoElement>(null)

  /* 状态推导 */
  const hasVideo = !!job?.video_url
  const isDownloading = job?.status === "downloading" || job?.status === "created"
  const isSplitting = job?.status === "splitting"
  const isAnalyzing = !!job && ["splitting", "frames_extracted", "transcribing"].includes(job.status)
  const hasFrames = (job?.frames.length ?? 0) > 0
  const hasTranscript = (job?.transcript.length ?? 0) > 0
  const hasZh = job?.transcript.some((s) => s.zh) ?? false
  const hasAudioRewrite = !!job?.audio_script?.rewritten_text?.trim()
  const isAudioRewriting = job?.audio_script?.status === "rewriting"
  const audioCompareRows = job?.transcript.slice(0, 8) ?? []
  const isFailed = job?.status === "failed"

  const colState: Record<string, ColState> = {
    // input 状态合并：覆盖原 input + download + split
    input: !job ? "pending"
      : isDownloading ? "running"
      : isSplitting ? "running"
      : hasFrames || hasTranscript ? "done"
      : hasVideo ? "done"
      : isFailed && job.progress < 50 ? "failed"
      : "pending",
    keyframe: !job ? "pending" : (isSplitting && !hasFrames) ? "running" : hasFrames ? "done" : isFailed && job.progress >= 50 && job.progress < 70 ? "failed" : "pending",
    asr: !job ? "pending" : job.status === "transcribing" ? "running" : hasTranscript ? "done" : isFailed && job.progress >= 70 ? "failed" : "pending",
    translate: !job ? "pending" : job.status === "transcribing" ? "running" : hasZh ? "done" : "pending",
    rewrite: !job ? "pending" : isAudioRewriting ? "running" : hasAudioRewrite ? "done" : "pending",
    imagegen: "pending",
    videogen: "pending",
    compose: "pending",
  }

  /* 每列摘要 = tile 副标题 */
  const colSummary: Record<string, string> = {
    input: !job ? "等待" : isDownloading ? "下载中…" : hasVideo ? `${job.width}×${job.height} · ${job.duration.toFixed(1)}s` : "—",
    keyframe: hasFrames ? `${data.selectedFrames.size}/${job!.frames.length} 选用` : "—",
    asr: hasTranscript ? `${job!.transcript.length} 段` : "—",
    translate: hasZh ? `${job!.transcript.filter((s) => s.zh).length} 段` : "—",
    rewrite: hasAudioRewrite ? "已生成" : isAudioRewriting ? "生成中…" : "待文案",
    imagegen: data.selectedFrames.size > 0 ? `${data.selectedFrames.size} 帧待编排` : "占位",
    videogen: "占位",
    compose: "占位",
  }

  const TILES: Array<{ key: string; title: string; type: ColType; icon: ReactNode; step: number }> = [
    { key: "input", title: "输入", type: "input", icon: <Link2 className="h-3.5 w-3.5" />, step: 1 },
    { key: "keyframe", title: "关键帧", type: "ai", icon: <ImageIcon className="h-3.5 w-3.5" />, step: 2 },
    { key: "asr", title: "转录", type: "ai", icon: <Mic className="h-3.5 w-3.5" />, step: 3 },
    { key: "translate", title: "翻译", type: "ai", icon: <Languages className="h-3.5 w-3.5" />, step: 4 },
    { key: "rewrite", title: "改写", type: "ai", icon: <FileEdit className="h-3.5 w-3.5" />, step: 5 },
    // imagegen（分镜头编排）已移到顶部 StoryboardBar，不在 sidebar 里
    { key: "videogen", title: "生视频", type: "ai", icon: <Film className="h-3.5 w-3.5" />, step: 7 },
    { key: "compose", title: "合成", type: "output", icon: <FileVideo className="h-3.5 w-3.5" />, step: 8 },
  ]

  // 单选展开：toggle 同一 key = 收起；点其他 key = 切换
  const toggleTile = (key: string) => {
    setExpanded((prev) => (prev.has(key) ? new Set() : new Set([key])))
  }
  const closeTile = (_key: string) => {
    setExpanded(new Set())
    data.onCloseExpandedFrame()
  }

  // 点关键帧缩略图时（onExpandFrame 触发），自动打开 keyframe drawer
  useEffect(() => {
    if (data.expandedFrame !== null && !expanded.has("keyframe")) {
      setExpanded(new Set(["keyframe"]))
    }
  }, [data.expandedFrame])

  const Tile = ({ tkey }: { tkey: string }) => {
    const t = TILES.find((x) => x.key === tkey)!
    const state = colState[t.key]
    const isOpen = expanded.has(t.key)
    return (
      <button
        ref={(el) => { tileRefs.current[t.key] = el }}
        type="button"
        onClick={() => toggleTile(t.key)}
        title={`${t.title} · ${colSummary[t.key]}`}
        className={`group w-full rounded-md overflow-hidden border flex items-center transition relative ${
          isOpen
            ? "bg-white/[0.09] border-white/25 shadow-[0_0_0_1px_rgba(255,255,255,0.08),0_4px_16px_-4px_rgba(0,0,0,0.5)]"
            : "bg-white/[0.035] border-white/8 hover:bg-white/[0.06] hover:border-white/15"
        }`}
        style={{ height: 26 }}
      >
        <span
          className="absolute left-0 top-1/2 -translate-y-1/2 w-[3px] rounded-r-full transition-all"
          style={{
            height: isOpen ? "72%" : "44%",
            background: TYPE_GRAD[t.type],
            opacity: isOpen ? 1 : 0.78,
          }}
        />
        <div className="pl-2.5 pr-1.5 flex items-center gap-1.5 flex-1 min-w-0">
          <span className={`shrink-0 transition ${isOpen ? "text-white" : "text-white/70 group-hover:text-white/90"}`}>{t.icon}</span>
          <span className={`text-[10.5px] font-medium truncate transition ${isOpen ? "text-white" : "text-white/85"}`}>{t.title}</span>
        </div>
        <span className={`absolute right-1.5 h-1.5 w-1.5 rounded-full ${STATE_DOT[state]}`} />
      </button>
    )
  }

  return (
    <div className="h-full flex flex-col gap-1 px-1.5 py-2">
      {/* 起点：输入（含下载+拆分） */}
      <Tile tkey="input" />
      {/* 分叉：上路 关键帧 / 生视频（分镜头编排在顶部 bar） */}
      <div className="border-l border-violet-400/25 pl-1 ml-[3px] space-y-1">
        <Tile tkey="keyframe" />
        <Tile tkey="videogen" />
      </div>
      {/* 分叉：下路 转录/翻译/改写 */}
      <div className="border-l border-pink-400/25 pl-1 ml-[3px] space-y-1">
        <Tile tkey="asr" />
        <Tile tkey="translate" />
        <Tile tkey="rewrite" />
      </div>
      {/* 合流 */}
      <Tile tkey="compose" />

      {/* 展开面板 — keyframe 有选中帧时变宽容纳 lightbox · 可拖拽改宽 */}
      {expanded.size > 0 && mounted && createPortal(
        <div
          className="fixed z-[100]"
          style={{
            left: 24,
            top: 16,
            bottom: 16,
            width: drawerWidth,
          }}
        >
          {TILES.filter((t) => expanded.has(t.key)).map((t) => {
            const isKeyframeWithExpand = t.key === "keyframe" && data.expandedFrame !== null
            return (
            <section
              key={t.key}
              className="rounded-2xl border border-white/15 bg-black/60 backdrop-blur-2xl overflow-hidden flex flex-col h-full relative"
              style={{
                animation: "drawer-in 0.24s cubic-bezier(0.32, 0.72, 0, 1)",
                boxShadow: "0 30px 80px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.05)",
              }}
            >
              {/* 右边拖拽手柄 — hover 时显示 */}
              <div
                onMouseDown={onResizeMouseDown}
                title="拖动改变宽度（双击重置）"
                onDoubleClick={() => setDrawerWidth(defaultWidth)}
                className="group/rs absolute top-0 bottom-0 right-0 w-1.5 cursor-col-resize hover:bg-violet-400/30 transition z-[110]"
              >
                <div className="absolute top-1/2 -translate-y-1/2 right-0 w-1 h-12 bg-white/0 group-hover/rs:bg-violet-400/70 rounded-l transition" />
              </div>
              <div className="flex items-center justify-between px-3 py-2" style={{ background: TYPE_GRAD[t.type] }}>
                <div className="flex items-center gap-1.5">
                  <span className="text-white/70 text-[9px] font-mono">{String(t.step).padStart(2, "0")}</span>
                  <span className="text-white">{t.icon}</span>
                  <span className="text-[12.5px] font-semibold text-white">{t.title}</span>
                  <span className="text-[10px] text-white/70 ml-2">{colSummary[t.key]}</span>
                </div>
                <button
                  onClick={() => closeTile(t.key)}
                  className="text-white/70 hover:text-white"
                  title="收起"
                >
                  <X className="h-3.5 w-3.5" />
                </button>
              </div>
              <div className="overflow-y-auto p-3 bg-black/20 flex-1">
                {isKeyframeWithExpand && data.job ? (
                  <FrameLightbox
                    embedded
                    jobId={data.job.id}
                    frames={data.job.frames}
                    generatedVideos={data.job.generated_videos ?? []}
                    activeIndex={data.expandedFrame}
                    selected={data.selectedFrames}
                    onClose={data.onCloseExpandedFrame}
                    onChange={data.onExpandFrame}
                    onToggleSelect={data.onToggleFrame}
                    onJobUpdate={data.onJobUpdate}
                    onSwitchPanel={(key) => {
                      data.onCloseExpandedFrame()
                      setExpanded(new Set([key]))
                    }}
                    clipboard={data.clipboard}
                    onCopyImage={data.onCopyImage}
                    onGenerateProductFusionVideo={data.onGenerateProductFusionVideo}
                    onDeleteVideo={data.onDeleteVideo}
                  />
                ) : (
                  renderSection(t.key)
                )}
              </div>
            </section>
            )
          })}
        </div>,
        document.body
      )}
    </div>
  )

  function renderSection(key: string): ReactNode {
    return (
      <div className="space-y-3">

            {/* ---- Input — Kanban ---- */}
            {key === "input" && (
              <>
                <KanbanCard tone="violet" tags={["链接", "上传"]} title="输入源">
                  <input
                    value={url}
                    onChange={(e) => setUrl(e.target.value)}
                    placeholder="粘贴 TikTok 链接"
                    disabled={isDownloading || data.submitting}
                    className="w-full text-[12px] px-2.5 py-1.5 rounded-md bg-black/30 border border-white/15 outline-none text-[var(--text-strong)] placeholder:text-[var(--text-faint)] focus:ring-2 focus:ring-[var(--ring)] disabled:opacity-40 mt-1"
                  />
                  <div className="mt-2 flex gap-1.5">
                    <button
                      type="button"
                      disabled={isDownloading || data.submitting || !url.trim()}
                      onClick={() => data.onSubmitUrl(url.trim())}
                      className="flex-1 text-[11.5px] py-1.5 rounded-md bg-white text-black hover:bg-white/90 disabled:opacity-30 inline-flex items-center justify-center gap-1"
                    >
                      {(data.submitting || isDownloading) && <Loader2 className="h-3 w-3 animate-spin" />}
                      {isDownloading ? "下载中" : "提交"}
                    </button>
                    <button
                      type="button"
                      disabled={isDownloading || data.submitting}
                      onClick={() => fileRef.current?.click()}
                      className="text-[11.5px] px-2.5 py-1.5 rounded-md bg-white/[0.06] border border-white/15 hover:bg-white/[0.12] inline-flex items-center gap-1 disabled:opacity-30"
                    >
                      <Upload className="h-3 w-3" /> 上传
                    </button>
                    <input
                      ref={fileRef}
                      type="file"
                      accept="video/mp4,video/quicktime,video/webm,.mp4,.mov,.webm,.mkv,.m4v"
                      className="hidden"
                      onChange={(e) => {
                        const f = e.target.files?.[0]
                        if (f) data.onUploadFile(f)
                        e.target.value = ""
                      }}
                    />
                  </div>
                </KanbanCard>
                {hasVideo && job && (
                  <>
                    {/* 元数据 */}
                    <KanbanCard tone="orange" tags={["视频源", job.url.startsWith("upload://") ? "上传" : "yt-dlp"]} title={`${job.width}×${job.height} · ${job.duration.toFixed(1)}s`}>
                      <div className="text-[10.5px] text-[var(--text-soft)] truncate font-mono">
                        {job.url.startsWith("upload://") ? `📎 ${job.url.slice(9)}` : `🔗 ${job.url}`}
                      </div>
                    </KanbanCard>
                    {/* 拆分流 */}
                    <KanbanCard tone="amber" tags={["ffmpeg"]} title="拆分音视频流">
                      <div className="grid grid-cols-2 gap-2 text-[11px]">
                        <div className="rounded-md bg-violet-500/10 border border-violet-400/20 px-2 py-1.5">
                          <div className="text-[9.5px] uppercase tracking-widest text-violet-300">视频流</div>
                          <div className="text-[var(--text-strong)]">→ 关键帧</div>
                        </div>
                        <div className="rounded-md bg-pink-500/10 border border-pink-400/20 px-2 py-1.5">
                          <div className="text-[9.5px] uppercase tracking-widest text-pink-300">音频流</div>
                          <div className="text-[var(--text-strong)]">→ ASR (wav)</div>
                        </div>
                      </div>
                    </KanbanCard>
                    {/* 解析按钮 */}
                    <KanbanCard tone="green" tags={["下一步"]} title={hasFrames ? "重新解析" : "启动全流程"}>
                      <button
                        type="button"
                        disabled={isAnalyzing || data.analyzing}
                        onClick={data.onAnalyze}
                        className={`w-full text-[12.5px] py-2 rounded-md bg-gradient-to-r from-indigo-500 to-violet-500 text-white hover:opacity-95 disabled:opacity-40 inline-flex items-center justify-center gap-1.5 font-semibold shadow-lg shadow-violet-500/30 mt-1 ${!isAnalyzing && !data.analyzing && !hasFrames ? "animate-pulse" : ""}`}
                      >
                        {(isAnalyzing || data.analyzing) ? <><Loader2 className="h-3.5 w-3.5 animate-spin" /> 解析中…</> : hasFrames ? "↻ 重新解析" : "▶ 开始解析（全流程）"}
                      </button>
                      <div className="kanban-meta">
                        全流程 = 拆分 → 抽帧 → ASR → 翻译
                      </div>
                    </KanbanCard>
                  </>
                )}
              </>
            )}

            {/* ---- Download — 只显示元数据，视频播放器移到 Keyframe section ---- */}
            {key === "download" && (
              !hasVideo ? (
                <KanbanCard tone="orange" tags={["yt-dlp"]} title={isDownloading ? "下载中…" : "等待提交"}>
                  <div className="text-[11.5px] text-[var(--text-soft)]">TikTok / yt-dlp 兼容站点</div>
                </KanbanCard>
              ) : (
                <>
                  <KanbanCard tone="orange" tags={["视频源", job!.url.startsWith("upload://") ? "上传" : "yt-dlp"]} title={job!.url.startsWith("upload://") ? "本地上传" : "TK 下载"}>
                    <div className="text-[11px] text-[var(--text-soft)] truncate font-mono mt-1">
                      {job!.url.startsWith("upload://") ? `📎 ${job!.url.slice(9)}` : `🔗 ${job!.url}`}
                    </div>
                  </KanbanCard>
                  <KanbanCard tone="amber" tags={["元数据"]} title="视频信息">
                    <div className="grid grid-cols-3 gap-3 text-[11px] font-mono">
                      <div><div className="text-[var(--text-faint)] text-[9.5px]">分辨率</div><div className="text-[var(--text-strong)] text-[12.5px] mt-0.5">{job!.width}×{job!.height}</div></div>
                      <div><div className="text-[var(--text-faint)] text-[9.5px]">时长</div><div className="text-[var(--text-strong)] text-[12.5px] mt-0.5">{job!.duration.toFixed(1)}s</div></div>
                      <div><div className="text-[var(--text-faint)] text-[9.5px]">大小</div><div className="text-[var(--text-strong)] text-[12.5px] mt-0.5">~9MB</div></div>
                    </div>
                    <div className="kanban-meta">
                      要看视频 / 选帧请打开「关键帧」
                    </div>
                  </KanbanCard>
                </>
              )
            )}

            {/* ---- Split — Kanban ---- */}
            {key === "split" && (
              <>
                <KanbanCard tone="amber" tags={["ffmpeg", "视频流"]} title="→ 关键帧抽取">
                  <div className="text-[11px] text-[var(--text-soft)]">fast seek + Laplacian 方差评分</div>
                </KanbanCard>
                <KanbanCard tone="amber" tags={["ffmpeg", "音频流"]} title="→ ASR 输入">
                  <div className="text-[11px] text-[var(--text-soft)]">16kHz mono · pcm_s16le wav</div>
                  <div className="kanban-meta">
                    <code className="text-[10px]">-vn -ac 1 -ar 16000</code>
                  </div>
                </KanbanCard>
              </>
            )}

            {/* ---- Keyframe — Kanban 卡片（视频播放器 + 加帧 + 缩略图都在这里） ---- */}
            {key === "keyframe" && (
              <div className="space-y-3">
                {hasVideo && job && (
                  <>
                    <KanbanCard tone="violet" tags={["视频"]} title="拖时间轴选帧">
                      <video
                        ref={videoRef}
                        src={videoUrl(job.id)}
                        controls
                        onTimeUpdate={(e) => setVideoT((e.target as HTMLVideoElement).currentTime)}
                        className="block w-full bg-black rounded-md mt-1"
                      />
                      <div className="kanban-meta">
                        <span className="font-mono">当前 {videoT.toFixed(2)}s</span>
                        <span className="ml-auto">{job.width}×{job.height} · {job.duration.toFixed(1)}s</span>
                      </div>
                    </KanbanCard>
                    <KanbanCard tone="green" tags={["手动加帧"]} title="把当前时间点抽为关键帧">
                      <button
                        type="button"
                        disabled={addingFrame}
                        onClick={async () => {
                          const t = videoRef.current?.currentTime ?? videoT
                          setAddingFrame(true)
                          try { await data.onAddManualFrame(t) } finally { setAddingFrame(false) }
                        }}
                        className="mt-1 w-full text-[12.5px] py-2 rounded-md bg-emerald-500 hover:bg-emerald-400 text-white disabled:opacity-50 inline-flex items-center justify-center gap-1.5 font-medium"
                      >
                        {addingFrame ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Plus className="h-3.5 w-3.5" />}
                        {addingFrame ? "抽帧中…" : `+ 把 ${videoT.toFixed(1)}s 加为关键帧`}
                      </button>
                    </KanbanCard>
                  </>
                )}
                {!hasFrames ? (
                  <KanbanCard tone="pink" tags={["分镜"]} title="等待解析后抽取">
                    <div className="text-[11.5px] text-[var(--text-soft)]">候选帧 → pHash 去重 + 清晰度排序 + 时序分桶 → 按当前设置产出参考帧</div>
                  </KanbanCard>
                ) : (
                  job!.frames.map((f) => {
                    const isSel = data.selectedFrames.has(f.index)
                    const cleaned = !!f.cleaned_url
                    const elCount = f.elements?.length ?? 0
                    const cutCount = f.elements?.filter((e) => e.cutout_id).length ?? 0
                    const tags = [`分镜 ${f.index + 1}`, `${f.timestamp.toFixed(1)}s`]
                    if (cleaned) tags.push("已清洗")
                    if (cutCount > 0) tags.push(`${cutCount}/${elCount} 抠图`)
                    return (
                      <KanbanCard
                        key={f.index}
                        tone={isSel ? "green" : "pink"}
                        tags={tags}
                        className={isSel ? "ring-2 ring-emerald-400/60" : ""}
                        meta={
                          <button
                            type="button"
                            onClick={(e) => { e.stopPropagation(); data.onToggleFrame(f.index) }}
                            className={`ml-auto text-[10.5px] px-2 py-0.5 rounded-full inline-flex items-center gap-1 ${
                              isSel
                                ? "bg-emerald-500 text-white"
                                : "bg-white/10 text-[var(--text-soft)] border border-white/15 hover:bg-white/20"
                            }`}
                          >
                            <Check className="h-2.5 w-2.5" />
                            {isSel ? "已选用" : "选用此帧"}
                          </button>
                        }
                      >
                        <button
                          type="button"
                          onClick={(e) => { e.stopPropagation(); data.onExpandFrame(f.index) }}
                          className="block w-full rounded-md overflow-hidden bg-black"
                          title="点击放大 · 清洗 / 提取元素"
                        >
                          <img
                            src={effectiveFrameUrl(job!.id, f)}
                            alt={`frame ${f.index}`}
                            className="block w-full h-auto"
                            style={{ objectFit: "contain" }}
                          />
                        </button>
                      </KanbanCard>
                    )
                  })
                )}
              </div>
            )}

            {/* ---- ASR / Translate — Kanban 段落卡 ---- */}
            {(key === "asr" || key === "translate") && (
              !hasTranscript ? (
                <KanbanCard tone={key === "asr" ? "blue" : "cyan"} tags={[key === "asr" ? "ASR" : "Translate"]} title="等待数据">
                  <div className="text-[11.5px] text-[var(--text-soft)]">
                    {colState.asr === "running" ? "音频转写中…" : "需要先完成关键帧抽取"}
                  </div>
                </KanbanCard>
              ) : (
                job!.transcript.map((s) => (
                  <KanbanCard
                    key={s.index}
                    tone={key === "asr" ? "blue" : "cyan"}
                    tags={[`段落 ${s.index + 1}`, `${s.start.toFixed(1)}s → ${s.end.toFixed(1)}s`]}
                  >
                    <div className="text-[12.5px] text-[var(--text-strong)] leading-snug mb-1.5">
                      <span className="kanban-tag mr-1.5" style={{ padding: "1px 6px", fontSize: 9.5 }}>EN</span>
                      {s.en}
                    </div>
                    <div className="text-[12.5px] text-[var(--text-strong)] leading-snug">
                      <span className="kanban-tag mr-1.5" style={{ padding: "1px 6px", fontSize: 9.5 }}>ZH</span>
                      {s.zh || <span className="text-[var(--text-faint)] italic">翻译中…</span>}
                    </div>
                  </KanbanCard>
                ))
              )
            )}

            {/* ---- Rewrite — Kanban ---- */}
            {key === "rewrite" && (
              <>
                <KanbanCard tone="green" tags={["对照", "改前"]} title="原音频识别">
                  {audioCompareRows.length > 0 ? (
                    <div className="space-y-2">
                      {audioCompareRows.map((s) => (
                        <div key={s.index} className="rounded-md border border-white/10 bg-black/20 px-2.5 py-2">
                          <div className="mb-1 text-[10px] font-mono text-[var(--text-faint)]">
                            {s.start.toFixed(1)}s → {s.end.toFixed(1)}s
                          </div>
                          <div className="text-[12px] leading-relaxed text-[var(--text-strong)]">
                            {s.zh || <span className="text-[var(--text-faint)] italic">中文翻译中…</span>}
                          </div>
                          {s.en && (
                            <div className="mt-1.5 text-[11px] leading-relaxed text-[var(--text-soft)]">
                              {s.en}
                            </div>
                          )}
                        </div>
                      ))}
                    </div>
                  ) : (
                    <div className="text-[11px] text-[var(--text-soft)]">音频识别完成后，这里显示原始 ASR 和中文翻译。</div>
                  )}
                  <div className="kanban-meta">参考视频原话，不直接用于成片</div>
                </KanbanCard>

                <KanbanCard tone="green" tags={["对照", "改后"]} title={job?.audio_script?.rewrite_model || "SKG 英文产品口播"}>
                  {job?.audio_script?.rewritten_text ? (
                    <div className="rounded-md border border-emerald-400/25 bg-emerald-400/10 px-3 py-2.5 text-[13px] text-[var(--text-strong)] leading-relaxed">
                      {job.audio_script.rewritten_text}
                    </div>
                  ) : (
                    <div className="text-[11px] text-[var(--text-soft)]">
                      {isAudioRewriting ? "正在按原音频时长生成 SKG 英文产品口播…" : "转录完成后自动生成 SKG 英文产品口播"}
                    </div>
                  )}
                  <div className="kanban-meta">用于后续 TTS、字幕和视频生成 prompt</div>
                </KanbanCard>

                <KanbanCard tone="green" tags={["产品依据"]} title="SKG 产品卖点">
                  <div className="text-[12px] text-[var(--text-soft)] leading-relaxed">
                    {job?.audio_script?.product_brief || "等待音频转写完成后，按默认 SKG 放松产品卖点生成口播。"}
                  </div>
                </KanbanCard>

                <KanbanCard tone="green" tags={["配音"]} title={job?.audio_script?.voice_model || "Azure OpenAI TTS"}>
                  {job?.audio_script?.voice_url ? (
                    <audio controls className="h-8 w-full" src={apiAssetUrl(job.audio_script.voice_url)} />
                  ) : (
                    <div className="text-[11px] text-[var(--text-soft)]">
                      {job?.audio_script?.error || "当前第一步不默认生成配音文件；后续新配音阶段走 Azure OpenAI TTS"}
                    </div>
                  )}
                  <div className="kanban-meta">{job?.audio_script?.voice_id || "Azure voice"}</div>
                </KanbanCard>
              </>
            )}

            {/* ---- 分镜头编排 — 基于关键帧 + 元素 + 场景图编排（Phase 2 重写） ---- */}
            {key === "imagegen" && (
              data.selectedFrames.size === 0 ? (
                <KanbanCard tone="pink" tags={["待启动"]} title="未选关键帧">
                  <div className="text-[11px] text-[var(--text-soft)]">在「关键帧」节点勾选 1+ 张后，每张关键帧 → 1 张生成图</div>
                </KanbanCard>
              ) : (
                Array.from(data.selectedFrames).sort((a, b) => a - b).map((frameIdx) => {
                  const f = data.job?.frames.find((x) => x.index === frameIdx)
                  if (!f || !data.job) return null
                  return <ImageGenCard key={frameIdx} job={data.job} frame={f} onJobUpdate={data.onJobUpdate} />
                })
              )
            )}

            {/* ---- VideoGen — Kanban ---- */}
            {key === "videogen" && (
              <>
                <KanbanCard tone="violet" tags={["SKG 网关"]} title="Seedance / Kling / Veo 3">
                  <div className="text-[11px] text-[var(--text-soft)]">按后端 VIDEO_CREATE_PATHS 提交，模型 ID 走环境变量映射</div>
                </KanbanCard>
                <KanbanCard tone="violet" tags={["外部"]} title="Seedance">
                  <div className="text-[11px] text-[var(--text-soft)]">字节跳动 · 需独立 API key</div>
                </KanbanCard>
                <KanbanCard tone="violet" tags={["外部"]} title="Kling">
                  <div className="text-[11px] text-[var(--text-soft)]">快手 · 需独立 API key</div>
                </KanbanCard>
                <KanbanCard tone="rose" tags={["占位"]} title="生成视频列表">
                  <div className="text-[11px] text-[var(--text-soft)]">每张生成图 → 1 段 5-10s 视频，按改写文案合成 prompt</div>
                </KanbanCard>
              </>
            )}

            {/* ---- Compose — Kanban ---- */}
            {key === "compose" && (
              <>
                <KanbanCard tone="cyan" tags={["成品"]} title="最终视频">
                  <div className="aspect-video bg-black/40 rounded-md flex items-center justify-center text-[11.5px] text-[var(--text-faint)] mt-1">
                    待合成
                  </div>
                </KanbanCard>
                <KanbanCard tone="cyan" tags={["ffmpeg"]} title="字幕 + TTS 合成">
                  <div className="text-[11px] text-[var(--text-soft)]">视频片段 + 字幕（改写中文）+ TTS 配音 → 最终 mp4</div>
                  <div className="kanban-meta">完全本地 · 零 API 调用</div>
                </KanbanCard>
              </>
            )}
      </div>
    )
  }
})

/* ============================================================
   ImageGenCard — 单张关键帧的生图卡
   ============================================================ */
function ImageGenCard({ job, frame, onJobUpdate }: {
  job: Job
  frame: KeyFrame
  onJobUpdate: (j: Job) => void
}) {
  const [extra, setExtra] = useState("")
  const [negative, setNegative] = useState("水印, @用户名, TikTok logo, 平台文字, 浮水印")
  const model = "gpt-image-2"
  const [mode, setMode] = useState<"edit" | "text">("edit")
  const [generating, setGenerating] = useState(false)
  const basePrompt = frame.description?.suggested_prompt ?? "(尚未识别 · 点关键帧打开 lightbox 先识别)"
  const [editablePrompt, setEditablePrompt] = useState(basePrompt)
  const [showPrompt, setShowPrompt] = useState(false)
  const [previewGenId, setPreviewGenId] = useState<string | null>(null)
  const [previewMounted, setPreviewMounted] = useState(false)
  useEffect(() => setPreviewMounted(true), [])

  // 当 vision 识别完成后更新默认 prompt
  useEffect(() => {
    if (frame.description?.suggested_prompt) {
      setEditablePrompt(frame.description.suggested_prompt)
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [frame.description?.suggested_prompt])

  const handleGenerate = async () => {
    if (!editablePrompt.trim()) {
      toast.error("请先填写 prompt（点上方关键帧识别会自动生成）")
      return
    }
    setGenerating(true)
    try {
      const updated = await generateImage(job.id, frame.index, {
        prompt: editablePrompt,
        extra_prompt: extra,
        negative_prompt: negative,
        model,
        mode,
      })
      onJobUpdate(updated)
      toast.success(`分镜 ${frame.index + 1} 生成完成`)
    } catch (e) {
      toast.error("生图失败：" + (e instanceof Error ? e.message : String(e)))
    } finally {
      setGenerating(false)
    }
  }

  const handleSelectGen = async (genId: string, currentlySelected: boolean) => {
    try {
      const updated = await selectGenerated(job.id, frame.index, genId, !currentlySelected)
      onJobUpdate(updated)
    } catch (e) {
      toast.error("选用失败：" + (e instanceof Error ? e.message : String(e)))
    }
  }

  const gens = frame.generated_images ?? []
  const objects = frame.description?.objects ?? []

  return (
    <KanbanCard tone="rose" tags={[`分镜 ${frame.index + 1}`, `${frame.timestamp.toFixed(1)}s`, "占位 · Phase 2 重写"]} title="单帧编排（旧生图）">
      {/* 参考图 + 识别物体 chips */}
      <div className="flex gap-2 items-start mt-1">
        <img
          src={effectiveFrameUrl(job.id, frame)}
          alt={`frame ${frame.index}`}
          className="rounded-md object-cover flex-shrink-0"
          style={{ width: 96, aspectRatio: `${job.width}/${job.height}` }}
        />
        <div className="flex-1 min-w-0">
          <div className="text-[10px] text-[var(--text-faint)] uppercase tracking-widest mb-1">识别元素</div>
          {objects.length > 0 ? (
            <div className="flex flex-wrap gap-1">
              {objects.slice(0, 6).map((o, i) => (
                <button
                  key={i}
                  onClick={() => setExtra((p) => p ? `${p}, ${o.name}` : o.name)}
                  className="text-[10px] px-1.5 py-0.5 rounded-full bg-white/[0.06] hover:bg-white/[0.12] border border-white/15 text-[var(--text-strong)]"
                  title="点击加入需求"
                >
                  + {o.name}
                </button>
              ))}
            </div>
          ) : (
            <div className="text-[10px] text-[var(--text-faint)] italic">未识别（点上方缩略图打开识别）</div>
          )}
        </div>
      </div>

      {/* 画面描述（AI 自动 · 可展开编辑） */}
      <div className="mt-2.5">
        <button
          type="button"
          onClick={() => setShowPrompt((v) => !v)}
          className="w-full text-[10px] text-[var(--text-faint)] hover:text-[var(--text-strong)] inline-flex items-center justify-between"
        >
          <span>画面描述（AI 自动 · 看图给的英文 prompt） {showPrompt ? "▼" : "▶"}</span>
          <span className="font-mono">{editablePrompt.length} 字符</span>
        </button>
        {showPrompt && (
          <textarea
            value={editablePrompt}
            onChange={(e) => setEditablePrompt(e.target.value)}
            rows={3}
            className="mt-1 w-full text-[11px] px-2 py-1.5 rounded-md bg-black/30 border border-white/10 text-[var(--text-strong)] resize-none focus:ring-1 focus:ring-rose-400/40 outline-none font-mono"
          />
        )}
      </div>

      {/* 正向：我要保留 / 加入 */}
      <div className="mt-2">
        <div className="flex items-center justify-between mb-1">
          <span className="text-[10px] uppercase tracking-widest text-emerald-300">✓ 需要保留 / 加入</span>
        </div>
        <textarea
          value={extra}
          onChange={(e) => setExtra(e.target.value)}
          rows={2}
          placeholder="例：加 SKG logo、保留瓶子、换实验室背景"
          className="w-full text-[11.5px] px-2 py-1.5 rounded-md bg-emerald-500/5 border border-emerald-400/30 text-[var(--text-strong)] placeholder:text-[var(--text-faint)] resize-none focus:ring-2 focus:ring-emerald-400/40 outline-none"
        />
      </div>

      {/* 负向：不需要 / 删除 */}
      <div className="mt-2">
        <div className="flex items-center justify-between mb-1">
          <span className="text-[10px] uppercase tracking-widest text-rose-300">✗ 不要 / 删除</span>
          <button
            onClick={() => setNegative("")}
            className="text-[9px] text-[var(--text-faint)] hover:text-[var(--text-strong)]"
          >
            清空
          </button>
        </div>
        <textarea
          value={negative}
          onChange={(e) => setNegative(e.target.value)}
          rows={2}
          placeholder="例：水印、@用户名、TikTok logo、文字遮罩"
          className="w-full text-[11.5px] px-2 py-1.5 rounded-md bg-rose-500/5 border border-rose-400/30 text-[var(--text-strong)] placeholder:text-[var(--text-faint)] resize-none focus:ring-2 focus:ring-rose-400/40 outline-none"
        />
        <div className="text-[9.5px] text-[var(--text-faint)] mt-0.5">默认已清除水印 / 平台元素 → 生成"纯净图"</div>
      </div>

      {/* 模型 + 模式 + 生成 */}
      <div className="mt-2 flex gap-1.5 items-center">
        <div className="flex-1 rounded-md border border-white/15 bg-black/40 px-2 py-1.5 text-[10.5px] font-semibold text-[var(--text-strong)]">
          gpt-image-2
        </div>
        <select
          value={mode}
          onChange={(e) => setMode(e.target.value as "edit" | "text")}
          className="text-[10.5px] px-2 py-1.5 rounded-md bg-black/40 border border-white/15 text-[var(--text-strong)]"
        >
          <option value="edit">image-to-image</option>
          <option value="text">text-only</option>
        </select>
      </div>
      <button
        onClick={handleGenerate}
        disabled={generating || !editablePrompt.trim()}
        className="mt-2 w-full text-[12px] py-2 rounded-md bg-gradient-to-r from-rose-500 to-pink-500 text-white hover:opacity-95 disabled:opacity-40 inline-flex items-center justify-center gap-1.5 font-semibold"
      >
        {generating ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Sparkles className="h-3.5 w-3.5" />}
        {generating ? "生成中…（约 5-15 秒）" : `⚡ 生成 1 张${gens.length > 0 ? "（再来一张）" : ""}`}
      </button>

      {/* 生成结果网格 — 按视频原比例 + 点击放大 */}
      {gens.length > 0 && (
        <div className="mt-2.5">
          <div className="text-[10px] text-[var(--text-faint)] uppercase tracking-widest mb-1.5">
            生成结果 ({gens.length})
          </div>
          <div className="grid grid-cols-3 gap-1.5">
            {gens.map((g) => (
              <div
                key={g.id}
                className={`relative rounded-md overflow-hidden border-2 transition ${
                  g.selected
                    ? "border-emerald-400 ring-2 ring-emerald-400/40"
                    : "border-white/15 hover:border-white/40"
                }`}
                style={{ aspectRatio: job.height > 0 ? `${job.width}/${job.height}` : "1/1" }}
              >
                <button
                  onClick={() => setPreviewGenId(g.id)}
                  title={`${g.mode} · ${g.model}\n${g.prompt}`}
                  className="absolute inset-0 w-full h-full cursor-zoom-in"
                >
                  <img
                    src={generatedImageUrl(job.id, frame.index, g.id)}
                    alt={`gen ${g.id}`}
                    className="absolute inset-0 w-full h-full object-cover"
                  />
                </button>
                {/* 右上角独立选用按钮（总显示，selected=绿） */}
                <button
                  onClick={(e) => { e.stopPropagation(); handleSelectGen(g.id, g.selected) }}
                  title={g.selected ? "已选用 · 点取消" : "点击选用"}
                  className={`absolute top-1 right-1 h-5 w-5 rounded-full inline-flex items-center justify-center transition shadow-md ${
                    g.selected
                      ? "bg-emerald-500 text-white hover:bg-emerald-400"
                      : "bg-black/60 backdrop-blur text-white/60 hover:bg-emerald-500 hover:text-white"
                  }`}
                >
                  <Check className="h-3 w-3" />
                </button>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* 大图预览 modal */}
      {previewGenId && previewMounted && createPortal(
        (() => {
          const g = gens.find((x) => x.id === previewGenId)
          if (!g) return null
          return (
            <div
              onClick={() => setPreviewGenId(null)}
              className="fixed inset-0 z-[200] bg-black/85 backdrop-blur-xl flex items-center justify-center p-6 cursor-zoom-out"
              style={{ animation: "drawer-in 0.18s cubic-bezier(0.32, 0.72, 0, 1)" }}
            >
              <div
                onClick={(e) => e.stopPropagation()}
                className="relative max-w-full max-h-full flex flex-col gap-2 cursor-default"
              >
                <img
                  src={generatedImageUrl(job.id, frame.index, g.id)}
                  alt={`gen ${g.id}`}
                  className="block rounded-lg object-contain"
                  style={{ maxHeight: "calc(100vh - 140px)", maxWidth: "calc(100vw - 80px)" }}
                />
                <div className="flex items-center justify-between gap-3 px-1">
                  <div className="text-white/70 text-[11px] font-mono truncate">
                    分镜 {frame.index + 1} · {g.mode === "edit" ? "i2i" : "text"} · {g.model}
                  </div>
                  <div className="flex items-center gap-1.5 shrink-0">
                    <button
                      onClick={() => handleSelectGen(g.id, g.selected)}
                      className={`text-[11.5px] px-3 py-1.5 rounded-md inline-flex items-center gap-1.5 transition ${
                        g.selected
                          ? "bg-emerald-500 text-white hover:bg-emerald-400"
                          : "bg-white/10 text-white hover:bg-white/20"
                      }`}
                    >
                      <Check className="h-3.5 w-3.5" />
                      {g.selected ? "已选用" : "选用此图"}
                    </button>
                    <button
                      onClick={() => setPreviewGenId(null)}
                      className="text-[11.5px] px-2.5 py-1.5 rounded-md bg-white/10 text-white hover:bg-white/20 inline-flex items-center gap-1"
                    >
                      <X className="h-3.5 w-3.5" />
                    </button>
                  </div>
                </div>
              </div>
            </div>
          )
        })(),
        document.body
      )}
    </KanbanCard>
  )
}