// 4·质检合成 + 5·分发爆款 + 6·回收数据

// 这三个页面目前是 WIP 演示骨架，未接入真实数据 / 后端。
// 顶部贴一个统一 banner 让用户明确知道在看的是占位 UI。
const WipBanner = ({ name }) => (
  <div className="rr-warn" style={{
    margin: "8px 0 16px", padding: "10px 14px", borderRadius: 8,
    background: "rgba(251,191,36,.08)", border: "1px solid rgba(251,191,36,.35)",
    color: "#92400e", fontSize: 13,
  }}>
    ⚠️ <b>{name}</b>：当前为前端 WIP 演示骨架，<b>尚未接入真实数据 / 后端逻辑</b>。
    展示用的样例数字与卡片均为静态占位，仅用于讨论流程。
  </div>
);

// ========== 6·分发爆款（含回收数据 tab） ==========
const DistributePage = () => {
  const [tab, setTab] = React.useState("platform"); // platform | content | recycle
  const [selPlat, setSelPlat] = React.useState("douyin");
  const [selTag, setSelTag] = React.useState("娱乐型·直接相关");
  const curveIF = React.useMemo(
    () => Array.from({length:30}, (_,i)=> 30+ 25*Math.sin(i/3)+ i*1.5 + Math.random()*8),
    [],
  );

  const platforms = [
    { k:"xhs", n:"小红书", col:"pink", accounts:[
      {n:"@小红在看房", f:"82.4w", st:"online"},
      {n:"@学区那些事", f:"46.2w", st:"online"},
      {n:"@城市置业指南", f:"32.1w", st:"online"},
      {n:"@小墨的家", f:"28.4w", st:"offline"},
    ]},
    { k:"douyin", n:"抖音", col:"fg-1", accounts:[
      {n:"@房叔老李", f:"432w", st:"online"},
      {n:"@置业小课堂", f:"128w", st:"online"},
      {n:"@看房vlog", f:"74.8w", st:"online"},
      {n:"@拆拆不累", f:"68w", st:"online"},
    ]},
    { k:"juliang", n:"巨量", col:"orange", accounts:[
      {n:"巨量-房产账户01", f:"投流", st:"online"},
      {n:"巨量-房产账户02", f:"投流", st:"online"},
    ]},
    { k:"juguang", n:"聚光", col:"purple", accounts:[
      {n:"聚光-小红书账户01", f:"投流", st:"online"},
      {n:"聚光-小红书账户02", f:"投流", st:"offline"},
    ]},
  ];

  const contentTags = [
    {kind:"video", tag:"娱乐型·直接相关", cnt:8, col:"purple"},
    {kind:"video", tag:"干货型·直接相关", cnt:12, col:"purple"},
    {kind:"video", tag:"娱乐型·间接相关", cnt:6, col:"purple"},
    {kind:"image", tag:"种草型·间接相关", cnt:14, col:"cyan"},
    {kind:"image", tag:"干货型·间接相关", cnt:9, col:"cyan"},
    {kind:"image", tag:"种草型·直接相关", cnt:4, col:"cyan"},
  ];

  const curPlat = platforms.find(p=>p.k===selPlat);

  return (
    <>
      <Topbar crumbs={["6 · 分发爆款","平台 × 内容 × 回收"]} right={<>
        <span className="pill live">矩阵运行中</span>
        <button className="btn primary"><Icon name="send" size={12}/>立即分发</button>
      </>}/>

      <div style={{padding:"4px 14px 0"}}><WipBanner name="6 · 分发爆款" /></div>

      {/* Tab 切换 */}
      <div className="row gap-0" style={{padding:"0 16px", borderBottom:"1px solid var(--line-1)", background:"var(--bg-1)"}}>
        {[
          {k:"platform",l:"模块一 · 平台"},
          {k:"content",l:"模块二 · 内容"},
          {k:"recycle",l:"模块三 · 回收数据"},
        ].map(t=>(
          <div key={t.k} onClick={()=>setTab(t.k)} style={{
            padding:"10px 18px", fontSize:12, cursor:"pointer",
            color: tab===t.k?"var(--fg-0)":"var(--fg-3)", fontWeight: tab===t.k?600:400,
            borderBottom: tab===t.k?"2px solid var(--cyan)":"2px solid transparent",
          }}>{t.l}</div>
        ))}
      </div>

      <div className="main-body">
        {tab==="platform" ? (
          <>
            <div className="col scroll" style={{width:220, flexShrink:0, padding:"14px 10px", gap:8, borderRight:"1px solid var(--line-soft)"}}>
              <span className="kpi-l" style={{padding:"0 4px"}}>平台列表</span>
              {platforms.map(p=>(
                <div key={p.k} onClick={()=>setSelPlat(p.k)} className="row gap-8" style={{
                  padding:10, borderRadius:5, cursor:"pointer",
                  background: selPlat===p.k?`color-mix(in oklch, var(--${p.col}) 14%, var(--bg-1))`:"var(--bg-1)",
                  border: `1px solid ${selPlat===p.k?`var(--${p.col})`:"var(--line-1)"}`,
                }}>
                  <span style={{width:28, height:28, borderRadius:6, background:`var(--${p.col}-soft, var(--bg-2))`, display:"flex", alignItems:"center", justifyContent:"center", fontSize:12, fontWeight:700, color:`var(--${p.col})`}}>{p.n[0]}</span>
                  <div className="col grow gap-2">
                    <span style={{fontSize:12, color:"var(--fg-0)", fontWeight:600}}>{p.n}</span>
                    <span className="mono" style={{fontSize:9.5, color:"var(--fg-3)"}}>{p.accounts.length} 账号</span>
                  </div>
                </div>
              ))}
            </div>
            <div className="col grow scroll" style={{padding:"14px 14px 20px", gap:12, background:"var(--bg-0)"}}>
              <div className="card">
                <div className="card-hd"><span className="card-title">{curPlat.n} · 账号列表</span>
                  <div className="grow"/><span className="tag green">{curPlat.accounts.filter(a=>a.st==="online").length} 在线</span>
                </div>
                <div style={{padding:12, display:"grid", gridTemplateColumns:"repeat(2,1fr)", gap:10}}>
                  {curPlat.accounts.map((a,i)=>(
                    <div key={i} className="row gap-10" style={{padding:10, background:"var(--bg-0)", border:"1px solid var(--line-1)", borderRadius:6}}>
                      <div className="sb-avatar" style={{width:32, height:32, fontSize:12}}>{a.n[1]||a.n[0]}</div>
                      <div className="col grow gap-2">
                        <span style={{fontSize:12, color:"var(--fg-0)", fontWeight:500}}>{a.n}</span>
                        <span className="mono" style={{fontSize:10, color:"var(--fg-3)"}}>{a.f}</span>
                      </div>
                      <span className={`tag ${a.st==="online"?"green":""}`}>{a.st==="online"?"在线":"离线"}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </>
        ) : tab==="content" ? (
          <>
            <div className="col scroll" style={{width:260, flexShrink:0, padding:"14px 10px", gap:8, borderRight:"1px solid var(--line-soft)"}}>
              <span className="kpi-l" style={{padding:"0 4px"}}>图文爆款内容</span>
              {contentTags.filter(c=>c.kind==="image").map(c=>(
                <TagRow key={c.tag} c={c} sel={selTag===c.tag} onClick={()=>setSelTag(c.tag)}/>
              ))}
              <span className="kpi-l" style={{padding:"6px 4px 0"}}>视频爆款内容</span>
              {contentTags.filter(c=>c.kind==="video").map(c=>(
                <TagRow key={c.tag} c={c} sel={selTag===c.tag} onClick={()=>setSelTag(c.tag)}/>
              ))}
            </div>
            <div className="col grow scroll" style={{padding:"14px 14px 20px", gap:12, background:"var(--bg-0)"}}>
              <div className="card">
                <div className="card-hd"><span className="card-title">标签 · {selTag}</span>
                  <div className="grow"/><span className="tag cyan">可分发到 3 平台</span>
                </div>
                <div style={{padding:12, display:"grid", gridTemplateColumns:"repeat(2,1fr)", gap:10}}>
                  {[1,2,3,4].map(i=>(
                    <div key={i} className="row gap-10" style={{padding:10, background:"var(--bg-0)", border:"1px solid var(--line-1)", borderRadius:6}}>
                      <div className="thumb" style={{width:48,height:64}}/>
                      <div className="col grow gap-3">
                        <span style={{fontSize:11.5, color:"var(--fg-0)", fontWeight:500}}>复刻版本 #{i}</span>
                        <span className="mono" style={{fontSize:10, color:"var(--fg-3)"}}>{selTag}__2026-04-21</span>
                        <div className="row gap-4">
                          <span className="tag">小红书</span>
                          <span className="tag">抖音</span>
                        </div>
                      </div>
                      <button className="btn sm primary">分发</button>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </>
        ) : (
          <div className="col grow scroll" style={{padding:"14px 14px 20px", gap:12}}>
            {/* 数据分析 */}
            <div style={{display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:12}}>
              {[
                {l:"信息流 · 巨量", c:"cyan", v:"4.82%", d:"+1.2pt", k:"转化率"},
                {l:"自然流 · 小红书", c:"pink", v:"42.8w", d:"+28%", k:"播放"},
                {l:"付费流 · 聚光", c:"orange", v:"¥28.4", d:"-18%", k:"转化成本"},
              ].map((s,i)=>(
                <div key={i} className="card" style={{padding:12}}>
                  <div className="row gap-6"><span className="dot" style={{background:`var(--${s.c})`}}/><span className="kpi-l">{s.l}</span></div>
                  <div className="row between" style={{marginTop:8, alignItems:"baseline"}}>
                    <div className="col gap-2">
                      <span className="mono" style={{fontSize:20, fontWeight:700, color:`var(--${s.c})`}}>{s.v}</span>
                      <span className="kpi-l">{s.k}</span>
                    </div>
                    <span className="delta up">{s.d}</span>
                  </div>
                </div>
              ))}
            </div>

            <div style={{display:"grid", gridTemplateColumns:"1.4fr 1fr", gap:12}}>
              <div className="card">
                <div className="card-hd"><span className="card-title">3 流趋势 · 36h</span></div>
                <div style={{padding:14}}><CurveChart data={curveIF} width={520} height={150}/></div>
              </div>

              {/* AI Skill 卡 */}
              <div className="card" style={{overflow:"hidden"}}>
                <div style={{padding:"10px 12px", background:"linear-gradient(135deg, var(--cyan-soft), transparent 70%)", borderBottom:"1px solid var(--line-1)"}}>
                  <div className="row between">
                    <span className="card-sub" style={{color:"var(--cyan)"}}>SKILL · OptimizeV1.2</span>
                    <span className="tag cyan">置信 88%</span>
                  </div>
                  <div style={{fontSize:13, fontWeight:600, color:"var(--fg-0)", marginTop:6}}>推流/审核机制优化建议</div>
                </div>
                <div className="col" style={{padding:12, gap:8}}>
                  {[
                    {k:"画面", t:"黄金3秒添加强动态转场，完播+28%"},
                    {k:"画面", t:"B3 镜头缩短 0.6s，规避限流同质化"},
                    {k:"文案", t:"开头去「姐妹们」避开小红书限流词"},
                    {k:"文案", t:"CTA 改为「评论扣房」规避推流降权"},
                    {k:"审核", t:"封面右下水印遮罩，防版权审核"},
                  ].map((s,i)=>(
                    <div key={i} className="row gap-6" style={{padding:"5px 0"}}>
                      <span className={`tag ${s.k==="画面"?"cyan":s.k==="文案"?"orange":"pink"}`} style={{minWidth:40, justifyContent:"center"}}>{s.k}</span>
                      <span style={{fontSize:11, color:"var(--fg-1)", lineHeight:1.5, flex:1}}>{s.t}</span>
                    </div>
                  ))}
                  <hr className="hr"/>
                  <div className="row gap-8" style={{padding:"6px 8px", background:"var(--cyan-soft)", borderRadius:4}}>
                    <Icon name="zap" size={11} style={{color:"var(--cyan)"}}/>
                    <span style={{fontSize:10.5, color:"var(--cyan)", lineHeight:1.5, flex:1}}>Skill 已推送至 <b>3 · 复刻爆款 · 规则审核</b>，拆解 &amp; 复刻时自动规避并采纳建议，形成闭环迭代。</span>
                  </div>
                </div>
              </div>
            </div>

            {/* 闭环可视化 */}
            <div className="card">
              <div className="card-hd"><span className="card-title">自动迭代闭环</span></div>
              <div className="row" style={{padding:14, gap:0, justifyContent:"space-between"}}>
                {["回收数据","AI 分析 Skill","复刻·规则审核","拆解/复刻采纳","重新分发"].map((s,i,a)=>(
                  <React.Fragment key={i}>
                    <div className="col gap-4 center" style={{flex:1, padding:"8px 6px", background: i===1||i===2?"color-mix(in oklch, var(--cyan) 10%, var(--bg-0))":"var(--bg-0)", border:`1px solid ${i===1||i===2?"var(--cyan)":"var(--line-1)"}`, borderRadius:5, textAlign:"center"}}>
                      <span className="mono" style={{fontSize:10, color:"var(--fg-3)"}}>STEP {i+1}</span>
                      <span style={{fontSize:11.5, color:"var(--fg-0)", fontWeight:500}}>{s}</span>
                    </div>
                    {i<a.length-1 && <Icon name="right" size={14} style={{color:"var(--cyan)", margin:"0 6px"}}/>}
                  </React.Fragment>
                ))}
              </div>
            </div>
          </div>
        )}
      </div>
    </>
  );
};

const TagRow = ({c, sel, onClick}) => (
  <div onClick={onClick} className="row between" style={{
    padding:"8px 10px", borderRadius:5, cursor:"pointer",
    background: sel?`color-mix(in oklch, var(--${c.col}) 14%, var(--bg-1))`:"var(--bg-1)",
    border: `1px solid ${sel?`var(--${c.col})`:"var(--line-1)"}`,
  }}>
    <span className="mono" style={{fontSize:10.5, color:"var(--fg-0)"}}>{c.tag}</span>
    <span className={`tag ${c.col}`} style={{fontSize:9}}>{c.cnt}</span>
  </div>
);

Object.assign(window, { CollectPage: window.CollectPage, QCPage, DistributePage });