// 爆款存储库 — 拆分 视频 / 图文 两大模块，命名对应收集标签 + 日期

const Library = () => {
  const [kind, setKind] = React.useState("video"); // video | image

  const videoDB = [
    { id:"V001", name:"娱乐型·直接相关__2026-04-19", topic:"智商税拆机", author:"@拆拆不累", p:"douyin", likes:"82w", views:"1284w", hot:98 },
    { id:"V002", name:"干货型·直接相关__2026-04-18", topic:"学区房TOP5", author:"@房叔老李", p:"douyin", likes:"12.8w", views:"186w", hot:92 },
    { id:"V003", name:"娱乐型·间接相关__2026-04-18", topic:"买房第1000天", author:"@浮游日记", p:"douyin", likes:"48w", views:"523w", hot:89 },
    { id:"V004", name:"干货型·间接相关__2026-04-17", topic:"装修避雷", author:"@装修那些事", p:"ks", likes:"6.2w", views:"68w", hot:84 },
    { id:"V005", name:"干货型·跨行业可迁移__2026-04-16", topic:"心理账户存钱", author:"@理财阿姐", p:"douyin", likes:"14w", views:"142w", hot:78 },
  ];
  const imageDB = [
    { id:"I001", name:"种草型·间接相关__2026-04-19", topic:"200块改造出租屋", author:"@小墨的家", p:"xhs", likes:"12.8w", views:"324w", hot:98 },
    { id:"I002", name:"干货型·间接相关__2026-04-19", topic:"租房5件好物", author:"@装修小林", p:"xhs", likes:"8.4w", views:"198w", hot:92 },
    { id:"I003", name:"种草型·直接相关__2026-04-18", topic:"户型避坑清单", author:"@置业笔记", p:"xhs", likes:"4.2w", views:"156w", hot:85 },
    { id:"I004", name:"干货型·直接相关__2026-04-17", topic:"首付攻略", author:"@小户型Lisa", p:"xhs", likes:"3.2w", views:"98w", hot:82 },
  ];

  const list = kind==="video" ? videoDB : imageDB;

  return (
    <>
      <Topbar crumbs={["爆款存储库", kind==="video"?"视频爆款数据库":"图文爆款数据库"]} right={<>
        <span className="pill"><Icon name="folder" size={10}/>{list.length} 条</span>
        <button className="btn primary"><Icon name="magic" size={12}/>批量拆解</button>
      </>}/>
      <div className="main-body">
        {/* 左：两大模块切换 */}
        <div className="col scroll" style={{width:240, flexShrink:0, padding:"14px 12px", gap:10, borderRight:"1px solid var(--line-soft)"}}>
          <span className="kpi-l">存储库模块</span>
          {[
            {k:"video", l:"视频爆款数据库", c:videoDB.length, col:"purple", ic:"play"},
            {k:"image", l:"图文爆款数据库", c:imageDB.length, col:"cyan",   ic:"layers"},
          ].map(m=>(
            <div key={m.k} onClick={()=>setKind(m.k)} className="col gap-4" style={{
              padding:12, borderRadius:6, cursor:"pointer",
              background: kind===m.k?`color-mix(in oklch, var(--${m.col}) 14%, var(--bg-1))`:"var(--bg-1)",
              border: `1px solid ${kind===m.k?`var(--${m.col})`:"var(--line-1)"}`,
            }}>
              <div className="row gap-8">
                <Icon name={m.ic} size={14}/>
                <span style={{fontSize:12.5, fontWeight:600, color:"var(--fg-0)"}}>{m.l}</span>
              </div>
              <span className="mono" style={{fontSize:20, fontWeight:700, color:`var(--${m.col})`}}>{m.c}</span>
              <span style={{fontSize:10, color:"var(--fg-3)"}}>{m.k==="video"?"T2V 可复刻":"T2I 可复刻"}</span>
            </div>
          ))}

          <div className="card" style={{padding:10, marginTop:10, background:"color-mix(in oklch, var(--green) 6%, var(--bg-1))"}}>
            <span className="kpi-l" style={{color:"var(--green)"}}>命名规则</span>
            <div className="mono" style={{fontSize:10.5, color:"var(--fg-1)", marginTop:6, lineHeight:1.5}}>
              &lt;维度一&gt;·&lt;维度二&gt;<br/>__YYYY-MM-DD
            </div>
            <hr className="hr" style={{margin:"8px 0"}}/>
            <div style={{fontSize:10, color:"var(--fg-3)", lineHeight:1.5}}>
              与 <span style={{color:"var(--cyan)"}}>1·收集爆款</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">{kind==="video"?"视频爆款":"图文爆款"} · 命名 = D1·D2__日期</span>
              <div className="grow"/>
              <button className="btn sm ghost"><Icon name="filter" size={10}/>筛选标签</button>
            </div>
            <div className="col">
              <div className="row" style={{padding:"8px 14px", borderBottom:"1px solid var(--line-1)", gap:12, fontSize:10, color:"var(--fg-3)", fontWeight:600, textTransform:"uppercase", letterSpacing:".5px"}}>
                <div style={{width:14}}/>
                <div style={{flex:3}}>命名 / 话题</div>
                <div style={{width:60, textAlign:"center"}}>平台</div>
                <div style={{flex:1}}>作者</div>
                <div style={{width:60, textAlign:"right"}}>点赞</div>
                <div style={{width:60, textAlign:"right"}}>播放</div>
                <div style={{width:50, textAlign:"center"}}>热度</div>
                <div style={{width:70, textAlign:"right"}}>操作</div>
              </div>
              {list.map((t,i)=>(
                <div key={t.id} className="row" style={{padding:"10px 14px", gap:12, borderBottom: i<list.length-1?"1px solid var(--line-1)":"none", alignItems:"center", background: i===0?"color-mix(in oklch, var(--orange) 5%, transparent)":"transparent"}}>
                  <Icon name="folder" size={14} style={{color: kind==="video"?"var(--purple)":"var(--cyan)"}}/>
                  <div className="col gap-3" style={{flex:3, minWidth:0}}>
                    <div className="mono" style={{fontSize:11, color:"var(--fg-0)", fontWeight:600}}>{t.name}</div>
                    <span style={{fontSize:10.5, color:"var(--fg-3)"}}>#{t.topic}</span>
                  </div>
                  <div style={{width:60, textAlign:"center"}}>
                    <PF type={t.p}/>
                  </div>
                  <div className="mono" style={{flex:1, fontSize:10.5, color:"var(--fg-2)", overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap"}}>{t.author}</div>
                  <div className="mono" style={{width:60, fontSize:11, color:"var(--fg-0)", textAlign:"right", fontWeight:600}}>{t.likes}</div>
                  <div className="mono" style={{width:60, fontSize:11, color:"var(--fg-2)", textAlign:"right"}}>{t.views}</div>
                  <div style={{width:50, textAlign:"center", fontSize:12, color:"var(--orange)", fontWeight:700, fontFamily:"var(--font-mono)"}}>{t.hot}</div>
                  <div className="row gap-4" style={{width:70, justifyContent:"flex-end"}}>
                    <button className="btn sm" style={{padding:"3px 8px"}}>复刻</button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

Object.assign(window, { Library });