yingqing/app/projects/new/page.tsx

"use client";

import { useMemo, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import Topbar from "@/components/Topbar";
import Icon from "@/components/Icon";

/* ============================================================
   Data
   ============================================================ */

interface Product {
  id: string;
  name: string;
  cat: string;
  price: number;
  imgs: number;
  points: string[];
  tags: string[];
  thumb: string;
}

const PRODUCTS: Product[] = [
  { id: "mask",    name: "透真玻尿酸补水面膜",       cat: "美妆个护", price: 39.9,  imgs: 3, points: ["透明质酸 + B5", "30g 大容量精华", "0 香精 0 酒精"], tags: ["熬夜党", "敏感肌"],   thumb: "补水面膜" },
  { id: "earphone",name: "南卡 Lite Pro 蓝牙耳机",   cat: "数码 3C", price: 199,   imgs: 5, points: ["主动降噪", "32 小时续航", "IP55 防水"],         tags: ["通勤", "运动"],       thumb: "蓝牙耳机" },
  { id: "noodle",  name: "滋啦速食牛肉面 · 6 桶装",  cat: "食品饮料", price: 49.9,  imgs: 4, points: ["3 分钟出餐", "真材实料牛肉", "0 防腐剂"],       tags: ["加班", "独居"],       thumb: "速食牛肉面" },
  { id: "sun",     name: "透真清透物理防晒霜",       cat: "美妆个护", price: 69,    imgs: 4, points: ["SPF50 PA+++", "纯物理防晒", "不泛白不假面"],     tags: ["SPF50", "通勤"],      thumb: "防晒霜" },
  { id: "coffee",  name: "三顿半同款冻干咖啡粉",     cat: "食品饮料", price: 89,    imgs: 6, points: ["冷热水秒溶", "意式深烘", "24 颗轻便装"],         tags: ["提神", "早八"],       thumb: "咖啡冻干粉" },
  { id: "fryer",   name: "小熊 4L 可视空气炸锅",     cat: "家电",     price: 159,   imgs: 5, points: ["可视化窗口", "4L 大容量", "低脂少油"],           tags: ["小户型", "健康"],     thumb: "空气炸锅" },
  { id: "yoga",    name: "露露同款裸感瑜伽裤",       cat: "服饰",     price: 119,   imgs: 8, points: ["裸感面料", "高弹回弹", "随心动随心穿"],           tags: ["健身房", "通勤"],     thumb: "瑜伽裤" },
];

const RECENT_IDS = ["mask", "sun", "coffee", "earphone"];
const CATS = ["全部", "美妆个护", "数码 3C", "食品饮料", "服饰", "家电"];

type SourceId = "ai" | "theme" | "manual";
const SOURCES: Array<{ id: SourceId; name: string; icon: "sparkles" | "lightbulb" | "doc"; tag: string; desc: string }> = [
  { id: "ai",     name: "AI 全生",     icon: "sparkles",  tag: "最常用",  desc: "LLM 全权决定脚本走向，最省事。后续仍可在故事板阶段微调。" },
  { id: "theme",  name: "一句话主题",   icon: "lightbulb", tag: "轻引导",  desc: "你给一句切入主题，AI 按此扩写。推荐 5–30 字。" },
  { id: "manual", name: "自带脚本",     icon: "doc",       tag: "我已有稿", desc: "粘贴或上传完整脚本，系统按镜头自动切分并适配商品。" },
];

type DurationId = "0-10" | "0-15" | "0-30" | "0-60";
const DURATIONS: Array<{ id: DurationId; label: string; shotsRange: [number, number]; tag: string; completion: number; conversion: number; }> = [
  { id: "0-10", label: "0-10 秒", shotsRange: [3, 4],   tag: "黄金完播",   completion: 52, conversion: 1.6 },
  { id: "0-15", label: "0-15 秒", shotsRange: [4, 5],   tag: "完播率最佳", completion: 42, conversion: 1.8 },
  { id: "0-30", label: "0-30 秒", shotsRange: [6, 8],   tag: "卖点详解",   completion: 32, conversion: 2.1 },
  { id: "0-60", label: "0-60 秒", shotsRange: [10, 12], tag: "故事化",     completion: 26, conversion: 2.4 },
];

type StyleId = "pain" | "review" | "compare";
const STYLES: Array<{ id: StyleId; name: string; note: string; tag?: string; flow: string[] }> = [
  { id: "pain",    name: "痛点种草", note: "用户痛点切入，以「我懂你」的口吻引出产品。", tag: "最常用", flow: ["痛点", "共鸣", "产品", "效果", "引导"] },
  { id: "review",  name: "开箱测评", note: "朋友式分享，从开箱到使用感受娓娓道来。",                  flow: ["开箱", "首印象", "试用", "对比", "结论"] },
  { id: "compare", name: "对比展示", note: "「用前 vs 用后 / 同类 vs 本品」直观呈现。",               flow: ["对照", "差距", "本品", "数据", "购买"] },
];

type PersonaId = "urban" | "bestie" | "ceo" | "reviewer" | "mom" | "genz";
const PERSONAS: Array<{ id: PersonaId; name: string; sub: string; metric: string; defaults: { duration: DurationId; style: StyleId } }> = [
  { id: "urban",    name: "都市白领女性", sub: "25-30 岁",     metric: "大盘消费力",     defaults: { duration: "0-15", style: "pain" } },
  { id: "bestie",   name: "闺蜜种草",     sub: "邻家女孩",     metric: "复购最高",       defaults: { duration: "0-15", style: "pain" } },
  { id: "ceo",      name: "总裁亲选",     sub: "创始人 IP",    metric: "30 万销额案例",  defaults: { duration: "0-30", style: "pain" } },
  { id: "reviewer", name: "专业测评师",   sub: "垂类达人",     metric: "互动 +30%",      defaults: { duration: "0-30", style: "review" } },
  { id: "mom",      name: "实用宝妈",     sub: "家庭决策者",   metric: "母婴/家清稳",    defaults: { duration: "0-30", style: "pain" } },
  { id: "genz",     name: "学生党",       sub: "Z 世代 18-24", metric: "平价快消",       defaults: { duration: "0-10", style: "compare" } },
];

/* ============================================================
   Helpers
   ============================================================ */

const USER_EMAIL = "airlabsv001@gmail.com";
const ACCOUNT_BALANCE = 327.4;

function avg([a, b]: [number, number]) { return (a + b) / 2; }

/* ============================================================
   Component
   ============================================================ */

type StepNum = 1 | 2 | 3 | 4;

export default function NewProjectPage() {
  const router = useRouter();
  const [step, setStep] = useState<StepNum>(1);

  // Step 1
  const [productId, setProductId] = useState<string | null>(null);
  const [pickSearch, setPickSearch] = useState("");
  const [pickCat, setPickCat] = useState("全部");

  // Step 2
  const [sourceId, setSourceId] = useState<SourceId | null>(null);
  const [themeText, setThemeText] = useState("");
  const [manualScript, setManualScript] = useState("");

  // Step 3
  const [projectName, setProjectName] = useState("");
  const [duration, setDuration] = useState<DurationId>("0-15");
  const [scriptStyle, setScriptStyle] = useState<StyleId>("pain");
  const [persona, setPersona] = useState<PersonaId>("urban");
  const [recoDismissed, setRecoDismissed] = useState(false);
  const [points, setPoints] = useState<Record<string, boolean>>({});

  // Step 4
  const [notifyEmail, setNotifyEmail] = useState(true);
  const [notifyWeChat, setNotifyWeChat] = useState(false);
  const [agreed, setAgreed] = useState(false);

  /* ---- derived ---- */
  const product   = useMemo(() => PRODUCTS.find((p) => p.id === productId) ?? null, [productId]);
  const source    = useMemo(() => SOURCES.find((s) => s.id === sourceId)   ?? null, [sourceId]);
  const personaObj  = useMemo(() => PERSONAS.find((p) => p.id === persona)!, [persona]);
  const durationObj = useMemo(() => DURATIONS.find((d) => d.id === duration)!, [duration]);
  const styleObj    = useMemo(() => STYLES.find((s) => s.id === scriptStyle)!, [scriptStyle]);

  const shots = avg(durationObj.shotsRange);
  const completion = durationObj.completion;
  const conversion = durationObj.conversion;

  // Live cost: roughly 4 line items
  const cost = useMemo(() => {
    const script = 0.20;
    const storyboard = 0.40;
    const assets = product ? product.imgs * 0.30 : 0;
    const render = shots * 0.30;
    const subtotal = script + storyboard + assets + render;
    const fee = +(subtotal * 0.05).toFixed(2);
    return { script, storyboard, assets, render, subtotal: +subtotal.toFixed(2), fee, total: +(subtotal + fee).toFixed(2) };
  }, [product, shots]);

  const balanceAfter = +(ACCOUNT_BALANCE - cost.total).toFixed(2);
  const lowBalance = balanceAfter < 5;

  const etaMinutes = Math.max(3, Math.round(2 + shots * 0.4 + (product?.imgs ?? 0) * 0.2));

  // Reco bubble (Step 3)
  const recoMismatch =
    personaObj.defaults.duration !== duration || personaObj.defaults.style !== scriptStyle;
  const showReco = step === 3 && recoMismatch && !recoDismissed;
  const recoDuration = DURATIONS.find((d) => d.id === personaObj.defaults.duration)!;
  const recoStyle = STYLES.find((s) => s.id === personaObj.defaults.style)!;

  /* ---- validation gates ---- */
  const canPass1 = !!product;
  const canPass2 =
    !!source &&
    (source.id !== "theme"  || themeText.trim().length >= 4) &&
    (source.id !== "manual" || manualScript.trim().length >= 20);
  const canPass3 = projectName.trim().length >= 2;
  const canFinish = agreed && !lowBalance;

  /* ---- actions ---- */
  function selectProduct(p: Product) {
    setProductId(p.id);
    // seed defaults derived from product
    if (!projectName) setProjectName(`${p.name.split(" ")[0]} · 痛点种草 · v1`);
    const seeded: Record<string, boolean> = {};
    p.points.forEach((pt, i) => { seeded[pt] = i < 2; });
    setPoints(seeded);
  }

  function applyPreset() {
    setDuration(personaObj.defaults.duration);
    setScriptStyle(personaObj.defaults.style);
    setRecoDismissed(false);
  }
  function pickPersona(id: PersonaId) {
    setPersona(id);
    setRecoDismissed(false);
  }
  function togglePoint(k: string) { setPoints((p) => ({ ...p, [k]: !p[k] })); }

  function goPrev() { setStep((s) => (s > 1 ? ((s - 1) as StepNum) : s)); }
  function goNext() {
    if (step === 1 && !canPass1) return;
    if (step === 2 && !canPass2) return;
    if (step === 3 && !canPass3) return;
    setStep((s) => (s < 4 ? ((s + 1) as StepNum) : s));
  }
  function startGenerate() {
    if (!canFinish) return;
    router.push("/pipeline?stage=1");
  }
  function jumpTo(target: StepNum) {
    // only allow going to a completed step or current
    if (target < step) setStep(target);
  }

  /* ---- step rail config ---- */
  const stepConfig: Array<{ n: StepNum; label: string; desc: string }> = [
    { n: 1, label: "选择商品",   desc: product ? product.name : "未选择" },
    { n: 2, label: "脚本来源",   desc: source ? source.name + (source.id === "theme" && themeText ? " · 有主题" : "") : "未选择" },
    { n: 3, label: "项目配置",   desc: step >= 3 ? `${durationObj.label} · ${styleObj.name}` : "时长 · 风格 · 人设" },
    { n: 4, label: "确认与计费", desc: `预估 ¥${cost.total.toFixed(2)}` },
  ];

  /* ---- filtered products for Step 1 ---- */
  const filteredProducts = useMemo(() => {
    return PRODUCTS.filter((p) => {
      if (pickCat !== "全部" && p.cat !== pickCat) return false;
      if (pickSearch && !p.name.includes(pickSearch)) return false;
      return true;
    });
  }, [pickCat, pickSearch]);

  const recentProducts = useMemo(
    () => RECENT_IDS.map((id) => PRODUCTS.find((p) => p.id === id)!).filter(Boolean),
    []
  );

  return (
    <>
      <Topbar
        crumbs={[
          { label: "工作台", href: "/" },
          { label: "视频项目", href: "/projects" },
          { label: "新建项目" },
        ]}
      />
      <section className="content wizard-content">
        <div className="page-head">
          <div>
            <h1>新建项目</h1>
            <div className="sub">
              <span className="mono-sub">// 商品 → 脚本来源 → 配置 → 确认 · 4 步开始生成</span>
            </div>
          </div>
          <div className="actions">
            <Link className="btn btn-ghost" href="/projects">退出</Link>
          </div>
        </div>

        <div className="wizard-shell">
          {/* ── Steps rail ─────────────────────────── */}
          <nav className="steps">
            {stepConfig.map((s, i) => {
              const state: "done" | "active" | "pending" =
                s.n < step ? "done" : s.n === step ? "active" : "pending";
              const clickable = s.n < step;
              return (
                <div
                  key={s.n}
                  className={`step ${state}${clickable ? " clickable" : ""}${i === stepConfig.length - 1 ? " last" : ""}`}
                  onClick={() => clickable && jumpTo(s.n)}
                >
                  <div className="num">
                    {state === "done"
                      ? <Icon name="check" size={12} strokeWidth={3} />
                      : s.n}
                  </div>
                  <div>
                    <div className="step-label">{s.label}</div>
                    <div className="step-desc">{s.desc}</div>
                  </div>
                </div>
              );
            })}
          </nav>

          {/* ── Wiz main ───────────────────────────── */}
          <div className="wiz-main">
            {/* Step 1 · 选择商品 ───────────────── */}
            {step === 1 && (
              <section className="card active-step">
                <div className="step-h">
                  <h2>第 1 步 · 选择商品</h2>
                  <p>从商品库选一个 SKU。它的主图与卖点会被 LLM 作为脚本/资产生成的素材。</p>
                </div>

                <div className="pick-toolbar">
                  <div className="toolbar-search">
                    <Icon name="search" />
                    <input
                      className="input"
                      placeholder="搜索商品名称、品牌"
                      value={pickSearch}
                      onChange={(e) => setPickSearch(e.target.value)}
                    />
                  </div>
                  {CATS.map((c) => (
                    <button
                      key={c}
                      className={`filter-chip${pickCat === c ? " active" : ""}`}
                      onClick={() => setPickCat(c)}
                    >
                      {c}
                    </button>
                  ))}
                </div>

                {pickCat === "全部" && !pickSearch && (
                  <>
                    <div className="pick-section-h">
                      <span>最近使用</span>
                      <span className="count">{recentProducts.length}</span>
                    </div>
                    <div className="product-pick-grid">
                      {recentProducts.map((p) => (
                        <ProductPickCard key={p.id} p={p} selected={productId === p.id} onSelect={() => selectProduct(p)} />
                      ))}
                    </div>
                  </>
                )}

                <div className="pick-section-h">
                  <span>{pickCat === "全部" && !pickSearch ? "全部商品" : "搜索结果"}</span>
                  <span className="count">{filteredProducts.length}</span>
                </div>
                <div className="product-pick-grid">
                  {filteredProducts.map((p) => (
                    <ProductPickCard key={p.id} p={p} selected={productId === p.id} onSelect={() => selectProduct(p)} />
                  ))}
                  <div className="product-pick add">
                    <div className="pc"><Icon name="plus" size={16} /></div>
                    <div>新建商品</div>
                  </div>
                </div>
              </section>
            )}

            {/* Step 2 · 脚本来源 ───────────────── */}
            {step === 2 && (
              <>
                <CollapsedStep
                  title="第 1 步 · 选择商品"
                  onEdit={() => setStep(1)}
                  body={product && <ProductSummary p={product} />}
                />
                <section className="card active-step">
                  <div className="step-h">
                    <h2>第 2 步 · 脚本来源</h2>
                    <p>决定 LLM 如何获得初稿脚本。三种方式由「最省事」到「最保真原意」。</p>
                  </div>

                  <div className="source-row">
                    {SOURCES.map((s) => (
                      <div
                        key={s.id}
                        className={`source-card${sourceId === s.id ? " selected" : ""}`}
                        onClick={() => setSourceId(s.id)}
                      >
                        <span className="src-ic"><Icon name={s.icon} size={16} /></span>
                        <h4>{s.name}</h4>
                        <span className="src-tag">[ {s.tag} ]</span>
                        <p className="src-desc">{s.desc}</p>
                      </div>
                    ))}
                  </div>

                  {source && (
                    <div className="source-detail">
                      <div className="sd-h">
                        // 已选 · <b>{source.name}</b>
                      </div>
                      {source.id === "ai" && (
                        <div className="field-hint" style={{ fontSize: 12.5, color: "var(--ink-2)" }}>
                          AI 全生模式无需额外输入。下一步选定时长 / 风格 / 人设后，LLM 会自动决定切入点和卖点权重。
                        </div>
                      )}
                      {source.id === "theme" && (
                        <div className="field" style={{ marginBottom: 0 }}>
                          <label className="field-label">一句话主题<span className="req">*</span></label>
                          <input
                            className="input"
                            placeholder="例：熬夜党的急救面膜 / 加班吃啥不内疚"
                            value={themeText}
                            onChange={(e) => setThemeText(e.target.value)}
                          />
                          <div className="field-hint">推荐 5–30 字。这句话会作为 LLM 扩写的锚点，越具体越聚焦。</div>
                        </div>
                      )}
                      {source.id === "manual" && (
                        <div className="field" style={{ marginBottom: 0 }}>
                          <label className="field-label">粘贴脚本内容<span className="req">*</span></label>
                          <textarea
                            className="input textarea"
                            style={{ minHeight: 140 }}
                            placeholder="粘贴你的脚本内容（旁白 / 镜头描述均可，系统会自动切分镜头）"
                            value={manualScript}
                            onChange={(e) => setManualScript(e.target.value)}
                          />
                          <div className="field-hint">
                            最少 20 字。镜头数由你的脚本自然段落决定，时长 / 风格仍会影响后期渲染节奏。
                          </div>
                        </div>
                      )}
                    </div>
                  )}
                </section>
              </>
            )}

            {/* Step 3 · 项目配置 ───────────────── */}
            {step === 3 && (
              <>
                <CollapsedStep
                  title="第 1 步 · 选择商品"
                  onEdit={() => setStep(1)}
                  body={product && <ProductSummary p={product} />}
                />
                <CollapsedStep
                  title="第 2 步 · 脚本来源"
                  onEdit={() => setStep(2)}
                  body={source && <SourceSummary source={source} themeText={themeText} manualScript={manualScript} />}
                />

                <section className="card active-step">
                  <div className="step-h">
                    <h2>第 3 步 · 项目配置</h2>
                    <p>这些设置会影响 LLM 生成脚本的方向，确认后会进入流水线第 1 步（脚本生成）。</p>
                  </div>

                  <div className="field">
                    <label className="field-label">项目名称<span className="req">*</span></label>
                    <input className="input" value={projectName} onChange={(e) => setProjectName(e.target.value)} />
                  </div>

                  <div className="field">
                    <label className="field-label">视频时长<span className="req">*</span></label>
                    <div className="option-row cols-4">
                      {DURATIONS.map((d) => (
                        <div
                          key={d.id}
                          className={`option-card${duration === d.id ? " selected" : ""}`}
                          onClick={() => setDuration(d.id)}
                        >
                          <h4>{d.label}</h4>
                          <div className="sub">{d.shotsRange[0]}-{d.shotsRange[1]} 镜</div>
                          <div className="note">{d.tag}</div>
                          <div className="metric">完播 <span className="val">{d.completion}%</span></div>
                        </div>
                      ))}
                    </div>
                    <div className="field-hint">数据来源：抖音同品类 TOP 视频均值 · 实际镜头数由 LLM 决定</div>
                  </div>

                  <div className="field">
                    <label className="field-label">脚本风格</label>
                    <div className="option-row">
                      {STYLES.map((s) => (
                        <div
                          key={s.id}
                          className={`option-card${scriptStyle === s.id ? " selected" : ""}`}
                          onClick={() => setScriptStyle(s.id)}
                        >
                          <h4>{s.name}</h4>
                          <div className="note">{s.note}</div>
                          {s.tag && <span className="tag-mono">[ {s.tag} ]</span>}
                        </div>
                      ))}
                    </div>
                  </div>

                  <div className="field">
                    <label className="field-label">人物设定</label>
                    <div className="option-row cols-6">
                      {PERSONAS.map((p) => (
                        <div
                          key={p.id}
                          className={`option-card${persona === p.id ? " selected" : ""}`}
                          onClick={() => pickPersona(p.id)}
                        >
                          <h4>{p.name}</h4>
                          <div className="sub">{p.sub}</div>
                          <div className="metric"><span className="val">{p.metric}</span></div>
                        </div>
                      ))}
                    </div>

                    {showReco && (
                      <div className="reco-bubble">
                        <span className="ic"><Icon name="lightbulb" size={14} /></span>
                        <div className="txt">
                          <span>
                            抖音同人设 TOP 视频更常用 <strong>{recoDuration.label}</strong> + <strong>{recoStyle.name}</strong>
                          </span>
                          <span className="meta">
                            当前 {durationObj.label} · {styleObj.name} → 推荐换为同人设最优组合
                          </span>
                        </div>
                        <button onClick={applyPreset}>一键套用</button>
                        <button className="dismiss" onClick={() => setRecoDismissed(true)} aria-label="忽略">
                          <Icon name="x" size={14} />
                        </button>
                      </div>
                    )}
                  </div>

                  {Object.keys(points).length > 0 && (
                    <div className="field" style={{ marginBottom: 0 }}>
                      <label className="field-label">关键卖点（可勾选要重点突出的）</label>
                      <div className="hstack" style={{ gap: 6, flexWrap: "wrap" }}>
                        {Object.entries(points).map(([k, v]) => (
                          <span key={k} className={`theme-pill${v ? " on" : ""}`} onClick={() => togglePoint(k)}>
                            {v ? "✓" : "+"} {k}
                          </span>
                        ))}
                      </div>
                    </div>
                  )}
                </section>
              </>
            )}

            {/* Step 4 · 确认与计费 ───────────── */}
            {step === 4 && (
              <section className="card active-step">
                <div className="step-h">
                  <h2>第 4 步 · 确认与计费</h2>
                  <p>核对前 3 步的选择 + 计费明细。点击「开始生成」会立刻扣款并进入流水线。</p>
                </div>

                <div className="confirm-grid">
                  <div className="confirm-card">
                    <div className="cc-h">
                      <span>// 商品</span>
                      <button className="cc-edit" onClick={() => setStep(1)}>修改</button>
                    </div>
                    {product && (
                      <div className="hstack" style={{ gap: 12, alignItems: "flex-start" }}>
                        <div className="placeholder" style={{ width: 44, height: 56, flexShrink: 0 }}>
                          <span className="ph-frame">9:16</span>
                        </div>
                        <div className="cc-body" style={{ minWidth: 0 }}>
                          <div style={{ fontWeight: 600, fontSize: 13 }}>{product.name}</div>
                          <div className="ln">
                            <span>{product.cat}</span>
                            <span style={{ color: "var(--ink-4)" }}>·</span>
                            <b>¥{product.price}</b>
                            <span style={{ color: "var(--ink-4)" }}>·</span>
                            <span>{product.imgs} 张图</span>
                          </div>
                        </div>
                      </div>
                    )}
                  </div>

                  <div className="confirm-card">
                    <div className="cc-h">
                      <span>// 脚本来源</span>
                      <button className="cc-edit" onClick={() => setStep(2)}>修改</button>
                    </div>
                    {source && (
                      <div className="cc-body">
                        <div style={{ fontWeight: 600, fontSize: 13 }}>{source.name}</div>
                        <div className="ln">
                          {source.id === "ai"     && <span>LLM 全权 · 走向由 Step 3 决定</span>}
                          {source.id === "theme"  && <span>主题：<b>{themeText || "（未填）"}</b></span>}
                          {source.id === "manual" && <span><b>{manualScript.length}</b> 字 · 自动切镜</span>}
                        </div>
                      </div>
                    )}
                  </div>

                  <div className="confirm-card">
                    <div className="cc-h">
                      <span>// 项目配置</span>
                      <button className="cc-edit" onClick={() => setStep(3)}>修改</button>
                    </div>
                    <div className="cc-body">
                      <div style={{ fontWeight: 600, fontSize: 13 }}>{projectName}</div>
                      <div className="ln"><b>{styleObj.name}</b> · {personaObj.name} · {personaObj.sub}</div>
                      <div className="ln" style={{ fontFamily: "var(--mono)", fontSize: 11.5, color: "var(--ink-3)" }}>
                        卖点：{Object.entries(points).filter(([, v]) => v).map(([k]) => k).join(" / ") || "未选"}
                      </div>
                    </div>
                  </div>

                  <div className="confirm-card">
                    <div className="cc-h">
                      <span>// 输出参数</span>
                    </div>
                    <div className="cc-body">
                      <div className="ln"><b>{durationObj.label}</b> · <b>{durationObj.shotsRange[0]}-{durationObj.shotsRange[1]} 镜</b> · 9:16</div>
                      <div className="ln">预估完播 <b>{completion}%</b> · 预估转化 <b>{conversion}%</b></div>
                      <div className="ln" style={{ fontFamily: "var(--mono)", fontSize: 11.5, color: "var(--ink-3)" }}>
                        // 数据来源：抖音同品类 TOP 均值
                      </div>
                    </div>
                  </div>
                </div>

                <div className="section-sub">计费明细 · 按量计费</div>
                <div className="bill-list">
                  <div className="bill-row">
                    <div className="l">脚本生成 <span className="l-sub">LLM · 1 稿</span></div>
                    <div className="qty">× 1</div>
                    <div className="amt">¥{cost.script.toFixed(2)}</div>
                  </div>
                  <div className="bill-row">
                    <div className="l">故事板生成 <span className="l-sub">含分镜画面描述</span></div>
                    <div className="qty">× 1</div>
                    <div className="amt">¥{cost.storyboard.toFixed(2)}</div>
                  </div>
                  <div className="bill-row">
                    <div className="l">资产生成 <span className="l-sub">主图 → 镜头素材</span></div>
                    <div className="qty">× {product?.imgs ?? 0} 张</div>
                    <div className="amt">¥{cost.assets.toFixed(2)}</div>
                  </div>
                  <div className="bill-row">
                    <div className="l">视频渲染 <span className="l-sub">合成 · 配乐 · 字幕</span></div>
                    <div className="qty">× {shots} 镜</div>
                    <div className="amt">¥{cost.render.toFixed(2)}</div>
                  </div>
                  <div className="bill-row subtotal">
                    <div className="l">小计</div>
                    <div className="qty" />
                    <div className="amt">¥{cost.subtotal.toFixed(2)}</div>
                  </div>
                  <div className="bill-row subtotal">
                    <div className="l">平台服务费 <span className="l-sub">5%</span></div>
                    <div className="qty" />
                    <div className="amt">¥{cost.fee.toFixed(2)}</div>
                  </div>
                  <div className="bill-row total">
                    <div className="l">合计</div>
                    <div className="qty" />
                    <div className="amt">¥{Math.floor(cost.total)}<small>.{cost.total.toFixed(2).split(".")[1]}</small></div>
                  </div>
                </div>

                <div className={`balance-row${lowBalance ? " low" : ""}`}>
                  <div className="bl">
                    <Icon name="wallet" size={14} />
                    <span className="lbl">账户余额</span>
                    <span className="val">¥{ACCOUNT_BALANCE.toFixed(2)}</span>
                    <span className="arrow">→</span>
                    <span className="lbl">扣款后</span>
                    <span className="val after">¥{balanceAfter.toFixed(2)}</span>
                  </div>
                  {lowBalance ? (
                    <span className="pill pill-err"><span className="dot" />余额不足 · <a style={{ marginLeft: 4, textDecoration: "underline" }}>去充值</a></span>
                  ) : (
                    <span className="pill pill-ok"><span className="dot" />余额充足</span>
                  )}
                </div>

                <div className="section-sub">预估耗时 · 通知</div>
                <div className="eta-block">
                  <div className="eta-tile">
                    <div className="lbl">预估出片</div>
                    <div className="v">~ {etaMinutes}<small>分钟</small></div>
                    <div className="desc">// pipeline 5 阶段累计 · 不含人工审核</div>
                  </div>
                  <div className="eta-tile">
                    <div className="lbl">完成后通知</div>
                    <div
                      className={`check-row${notifyEmail ? " on" : ""}`}
                      style={{ padding: "4px 0" }}
                      onClick={() => setNotifyEmail((v) => !v)}
                    >
                      <span className="check-box" />
                      <span className="lab">邮件 <span className="mono">{USER_EMAIL}</span></span>
                    </div>
                    <div
                      className={`check-row${notifyWeChat ? " on" : ""}`}
                      style={{ padding: "4px 0" }}
                      onClick={() => setNotifyWeChat((v) => !v)}
                    >
                      <span className="check-box" />
                      <span className="lab">微信 <span className="mono">未绑定 · 去绑定</span></span>
                    </div>
                  </div>
                </div>

                <div className={`tos-row${agreed ? " on" : ""}`} onClick={() => setAgreed((v) => !v)}>
                  <span className="check-box" />
                  <span className="lab">
                    我已阅读并同意 <a>《按量计费协议》</a> 与 <a>《商品素材使用授权》</a>
                  </span>
                </div>
              </section>
            )}

            {/* ── Wiz foot ──────────────────────── */}
            <div className="wiz-foot">
              <button className="btn btn-ghost" onClick={goPrev} disabled={step === 1}>
                ← 上一步
              </button>
              <div className="hstack" style={{ gap: 12 }}>
                {step < 4 ? (
                  <>
                    <span className="muted-2" style={{ fontSize: 12.5, fontFamily: "var(--mono)", letterSpacing: ".02em" }}>
                      // 下一步：{stepConfig[step].label}
                    </span>
                    <button
                      className="btn btn-primary btn-lg"
                      disabled={
                        (step === 1 && !canPass1) ||
                        (step === 2 && !canPass2) ||
                        (step === 3 && !canPass3)
                      }
                      onClick={goNext}
                    >
                      下一步 →
                    </button>
                  </>
                ) : (
                  <>
                    <span className="muted-2" style={{ fontSize: 12.5, fontFamily: "var(--mono)", letterSpacing: ".02em" }}>
                      // 扣款 ¥{cost.total.toFixed(2)} · 进入 pipeline
                    </span>
                    <button className="btn btn-primary btn-lg" disabled={!canFinish} onClick={startGenerate}>
                      开始生成 →
                    </button>
                  </>
                )}
              </div>
            </div>
          </div>

          {/* ── Live preview panel ─────────────────── */}
          <aside className="wiz-preview">
            <div className="pv-h">
              <span>实时预估</span>
              <span className="live-dot">LIVE</span>
            </div>

            <div className="pv-title">
              {projectName || (product ? `${product.name} · 待命名` : "未命名项目")}
            </div>

            <div className="pv-metrics">
              <div className="pv-metric">
                <div className="l">镜头</div>
                <div className="v">{shots}<small>镜</small></div>
              </div>
              <div className="pv-metric accent">
                <div className="l">预估完播</div>
                <div className="v">{completion}<small>%</small></div>
              </div>
              <div className="pv-metric">
                <div className="l">预估转化</div>
                <div className="v">{conversion}<small>%</small></div>
              </div>
              <div className="pv-metric">
                <div className="l">预估成本</div>
                <div className="v">¥{cost.total.toFixed(2)}</div>
              </div>
            </div>

            {product ? (
              <>
                <div className="pv-section">
                  <div className="lbl">// 商品</div>
                  <ul className="pv-list">
                    <li>{product.name}</li>
                    <li>{product.cat} · ¥{product.price}</li>
                  </ul>
                </div>
                <div className="pv-section">
                  <div className="lbl">// 人设 · 风格</div>
                  <ul className="pv-list">
                    <li>{personaObj.name} · {personaObj.sub}</li>
                    <li>{styleObj.name} · {durationObj.tag}</li>
                  </ul>
                </div>
                <div className="pv-section">
                  <div className="lbl">// 脚本走向</div>
                  <div className="pv-flow">
                    {styleObj.flow.map((n, i) => (
                      <span key={i} style={{ display: "inline-flex", alignItems: "center" }}>
                        <span className="node">{n}</span>
                        {i < styleObj.flow.length - 1 && <span className="arrow">→</span>}
                      </span>
                    ))}
                  </div>
                </div>
                <div className="pv-section">
                  <div className="lbl">// 突出卖点</div>
                  <ul className="pv-list">
                    {Object.entries(points).filter(([, v]) => v).map(([k]) => <li key={k}>{k}</li>)}
                    {Object.values(points).every((v) => !v) && (
                      <li style={{ color: "var(--ink-3)" }}>未选 · 由 LLM 自动权衡</li>
                    )}
                  </ul>
                </div>
              </>
            ) : (
              <div className="pv-section">
                <div className="lbl">// 待选择</div>
                <ul className="pv-list" style={{ opacity: 0.6 }}>
                  <li style={{ color: "var(--ink-3)" }}>先选一个商品</li>
                  <li style={{ color: "var(--ink-3)" }}>预估指标会自动填充</li>
                </ul>
              </div>
            )}

            <div className="pv-foot">
              <span>Step {step} / 4 · Restraint</span>
              <strong>
                {step < 4 ? "进行中" : canFinish ? "就绪" : (lowBalance ? "余额不足" : "待确认")}
              </strong>
            </div>
          </aside>
        </div>
      </section>
    </>
  );
}

/* ============================================================
   Sub-components
   ============================================================ */

function ProductPickCard({ p, selected, onSelect }: { p: Product; selected: boolean; onSelect: () => void }) {
  return (
    <div className={`product-pick${selected ? " selected" : ""}`} onClick={onSelect}>
      <div className="placeholder thumb"><span className="ph-frame">9:16</span></div>
      <div className="body">
        <div className="name">{p.name}</div>
        <div className="meta">
          {p.cat} · <b>¥{p.price}</b> · {p.imgs} 张图
        </div>
        <div className="tags">
          {p.tags.map((t) => <span key={t} className="tag-s">{t}</span>)}
        </div>
      </div>
    </div>
  );
}

function CollapsedStep({ title, onEdit, body }: { title: string; onEdit: () => void; body: React.ReactNode }) {
  return (
    <section className="card collapsed-step">
      <div className="hstack">
        <h3>{title}</h3>
        <span className="spacer" />
        <button className="btn btn-ghost btn-sm" onClick={onEdit}>修改</button>
      </div>
      <div style={{ marginTop: 10 }}>{body}</div>
    </section>
  );
}

function ProductSummary({ p }: { p: Product }) {
  return (
    <div className="hstack" style={{ gap: 12, alignItems: "flex-start" }}>
      <div className="placeholder" style={{ width: 44, height: 56, flexShrink: 0 }}>
        <span className="ph-frame">9:16</span>
      </div>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontWeight: 600, fontSize: 13.5 }}>{p.name}</div>
        <div className="muted-2 mono" style={{ fontSize: 11.5, marginTop: 3, letterSpacing: ".02em" }}>
          {p.cat} · ¥{p.price} · {p.imgs} 张图 · {p.points.length} 个卖点
        </div>
      </div>
    </div>
  );
}

function SourceSummary({ source, themeText, manualScript }: { source: { id: SourceId; name: string }; themeText: string; manualScript: string }) {
  return (
    <div className="hstack" style={{ gap: 8, flexWrap: "wrap" }}>
      <span className="pill pill-info"><span className="dot" />{source.name}</span>
      {source.id === "theme" && themeText && (
        <>
          <span className="muted">主题：</span>
          <span style={{ fontSize: 13 }}>{themeText}</span>
        </>
      )}
      {source.id === "manual" && (
        <>
          <span className="muted">脚本：</span>
          <span style={{ fontSize: 13 }}>{manualScript.length} 字</span>
        </>
      )}
      {source.id === "ai" && (
        <span className="muted-2 mono" style={{ fontSize: 11.5, letterSpacing: ".02em" }}>
          // 走向由 Step 3 决定
        </span>
      )}
    </div>
  );
}