{game ? : }

{label||'PHOTO'} DEMAN

); } /* ---------- one post ---------- */ function PostCard({ p, en, onLike, onComment }){ const tp = dcTopic(p.topic); return (

{p.author} {p.game && p.rank && } {en?tp.en:tp.cn} {dcAgo(p.ts,en)}

{p.text}

{p.image && }

); } /* ---------- composer ---------- */ function Composer({ en, onPost }){ const [text, setText] = useState(''); const [topic, setTopic] = useState('moments'); const [withImage, setWithImage] = useState(false); const [open, setOpen] = useState(false); function submit(){ if(!text.trim()) return; onPost({ text:text.trim(), topic, image:withImage, imageLabel: en?'YOUR PHOTO':'你的照片' }); setText(''); setWithImage(false); setOpen(false); } return (

setText(e.target.value)} onFocus={()=>setOpen(true)}
            placeholder={en?"Share something with the squad…":'和大伙儿分享点什么…'} rows={open?3:1}
            style={{ width:'100%', resize:'none', fontFamily:'var(--cn)', fontSize:14.5, lineHeight:1.6, color:'var(--text)',
              background:'var(--surface-2)', border:'1.5px solid var(--line)', borderRadius:'var(--r-sm)', padding:'11px 13px', outline:'none', transition:'.18s' }}
            onBlur={e=>{ if(!text) setOpen(false); }} />
          {(open || text) && (
            <div style={{ marginTop:11, display:'flex', flexDirection:'column', gap:11 }}>
              {withImage && <MediaCover topic={topic} label={en?'YOUR PHOTO':'你的照片'} />}
              <div style={{ display:'flex', alignItems:'center', gap:8, flexWrap:'wrap' }}>
                <span style={{ fontFamily:'var(--mono)', fontSize:10.5, color:'var(--text-mute)' }}>{en?'TOPIC':'话题'}</span>
                <div style={{ display:'flex', gap:6, flexWrap:'wrap' }}>
                  {DC.TOPICS.filter(t=>t.key!=='lfg').map(t=>(
                    <button key={t.key} onClick={()=>setTopic(t.key)} className={'chip'+(topic===t.key?' on':'')} style={{ cursor:'pointer', fontSize:11.5, padding:'5px 10px' }}>{en?t.en:t.cn}</button>
                  ))}
                </div>
              </div>
              <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                <button onClick={()=>setWithImage(v=>!v)} className={'chip'+(withImage?' on':'')} style={{ cursor:'pointer', gap:7 }}><Ic k="cards" w={14}/> {en?'Photo':'照片'}</button>
                <button onClick={()=>window.dmToast && window.dmToast(en?'Attach your match result — coming soon':'附带战绩 — 即将上线')} className="chip" style={{ cursor:'pointer', gap:7 }}><Ic k="trophy" w={14}/> {en?'Match result':'游戏战绩'}</button>
                <button onClick={submit} disabled={!text.trim()} className="btn btn-go btn-sm" style={{ marginLeft:'auto' }}><Ic k="bolt" w={14}/> {en?'Post':'发布'}</button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

/* ---------- sidebar widgets ---------- */
function TrendingTopics({ en, active, setActive }){
  const sorted = DC.TOPICS.slice().sort((a,b)=>b.posts-a.posts);
  return (
    <div className="card" style={{ padding:18 }}>
      <div style={{ fontFamily:'var(--mono)', fontSize:11, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--text-mute)', marginBottom:14 }}>{en?'Trending topics':'热门话题'}</div>
      <div style={{ display:'flex', flexDirection:'column' }}>
        {sorted.map((t,i)=>(
          <button key={t.key} onClick={()=>setActive(t.key)} style={{ display:'flex', alignItems:'center', gap:11, padding:'10px 0', border:'none', background:'none', cursor:'pointer', textAlign:'left',
            borderBottom: i<sorted.length-1?'1px solid var(--line-soft)':'none' }}>
            <span style={{ fontFamily:'var(--display)', fontStyle:'italic', fontWeight:800, fontSize:15, color:'var(--text-mute)', width:18 }}>{i+1}</span>
            <div style={{ flex:1 }}>
              <div style={{ fontFamily:'var(--cn)', fontWeight:700, fontSize:13.5, color: active===t.key?t.color:'var(--text)' }}>{en?t.en:t.cn}{t.hot && <Ic k="fire" w={12} style={{ marginLeft:5, color:'var(--q-coral)' }}/>}</div>
              <div style={{ fontFamily:'var(--mono)', fontSize:10.5, color:'var(--text-mute)', marginTop:1 }}>{t.posts.toLocaleString()} {en?'posts':'帖'}</div>
            </div>
            <span style={{ width:8, height:8, borderRadius:2, background:t.color, transform:'rotate(45deg)', opacity:.8 }} />
          </button>
        ))}
      </div>
    </div>
  );
}

function OnlineFriends({ en, onOpen }){
  const friends = [
    { name:'阿White', game:'lol', rank:'chal', pres:'online' },
    { name:'Kira', game:'valorant', rank:'chal', pres:'online' },
    { name:'momo', game:'ow', rank:'gm', pres:'online' },
    { name:'柚子', game:'lol', rank:'master', pres:'queue' },
    { name:'果冻', game:'valorant', rank:'diamond', pres:'online' }
  ];
  return (
    <div className="card" style={{ padding:18 }}>
      <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:14 }}>
        <span style={{ fontFamily:'var(--mono)', fontSize:11, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--text-mute)' }}>{en?'Online now':'在线好友'}</span>
        <span className="status online" style={{ marginLeft:'auto', fontSize:10 }}><span className="dot"/>{friends.filter(f=>f.pres==='online').length}</span>
      </div>
      <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
        {friends.map(f=>(
          <div key={f.name} style={{ display:'flex', alignItems:'center', gap:11 }}>
            <Av name={f.name} size={36} round dot={f.pres} />
            <div style={{ flex:1, minWidth:0 }}>
              <div style={{ fontFamily:'var(--cn)', fontWeight:700, fontSize:13 }}>{f.name}</div>
              <div style={{ fontFamily:'var(--mono)', fontSize:10, color:'var(--text-mute)' }}>{f.pres==='queue'?(en?'in queue':'排队中'):DC.gName(f.game)}</div>
            </div>
            <button className="btn btn-ghost btn-sm" style={{ padding:'6px 11px' }} onClick={()=>onOpen && onOpen()}>{en?'Invite':'邀请'}</button>
          </div>
        ))}
      </div>
    </div>
  );
}

function DiscordMini({ en }){
  return (
    <div className="card" style={{ padding:16, display:'flex', alignItems:'center', gap:12 }}>
      <span style={{ width:40, height:40, borderRadius:'var(--r-sm)', background:'#5865F2', display:'grid', placeItems:'center', color:'#fff', flex:'none' }}><Discord w={22}/></span>
      <div style={{ flex:1 }}>
        <div style={{ fontFamily:'var(--cn)', fontWeight:700, fontSize:13 }}>{en?'Synced with Discord':'与 Discord 同步'}</div>
        <div style={{ fontFamily:'var(--mono)', fontSize:10.5, color:'var(--text-mute)', marginTop:2 }}>{en?'Posts mirror to your channels':'动态同步到你的频道'}</div>
      </div>
      <span className="status online"><span className="dot"/>LIVE</span>
    </div>
  );
}

/* ---------- the page ---------- */
function CommunityFull({ en }){
  const [posts, setPosts] = useState([]);
  const [active, setActive] = useState('all');
  const [loading, setLoading] = useState(true);

useEffect(()=>{
    let live = true;
    (async ()=>{
      const feed = window.DMApi ? await window.DMApi.loadFeed() : [];
      if(!live) return;
      // enrich seed posts with interaction state + a few comments counts
      const enriched = (feed.length?feed:DC_SEED_FALLBACK).map((p,i)=>({
        ...p, liked:false, comments: p.comments!=null?p.comments : [12,5,8,23,3,14,7,9][i%8],
        online: i%2===0
      }));
      setPosts(enriched); setLoading(false);
    })();
    return ()=>{ live=false; };
  },[]);

const shown = active==='all' ? posts : posts.filter(p=>p.topic===active);

return (
    <div className="wrap" style={{ padding:'30px 26px 70px' }}>
      <div style={{ marginBottom:22 }}>
        <span className="eyebrow">{en?'COMMUNITY':'社区'}</span>
        <h2 className="h2" style={{ marginTop:10 }}>{en?'The squad, off the rift':'下了峡谷,还是这帮人'}</h2>
        <p className="lede" style={{ fontSize:14, marginTop:6 }}>{en?'Cars, music, fitness, moments — the same people you grind ranked with, synced with your Discord.':'车子、音乐、健身、朋友圈 —— 和你一起上分的人,和 Discord 实时同步。'}</p>
      </div>

{/* topic rail */}
      <div style={{ display:'flex', gap:8, flexWrap:'wrap', marginBottom:22 }}>
        <button onClick={()=>setActive('all')} className={'chip'+(active==='all'?' on':'')} style={{ cursor:'pointer', fontSize:13, padding:'8px 14px' }}>{en?'All':'全部'}</button>
        {DC.TOPICS.map(t=>(
          <button key={t.key} onClick={()=>setActive(t.key)} className={'chip'+(active===t.key?' on':'')} style={{ cursor:'pointer', fontSize:13, padding:'8px 14px',
            color: active===t.key?t.color:undefined, borderColor: active===t.key?`color-mix(in oklab,${t.color} 45%,transparent)`:undefined }}>
            {en?t.en:t.cn}{t.hot && <Ic k="fire" w={12} style={{ color:'var(--q-coral)' }}/>}
          </button>
        ))}
      </div>

<div style={{ display:'grid', gridTemplateColumns:'minmax(0,1fr) 300px', gap:22, alignItems:'start' }} className="comm-cols">
        {/* main column */}
        <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
          <Composer en={en} onPost={addPost} />
          {loading && <div style={{ padding:40, textAlign:'center', fontFamily:'var(--mono)', fontSize:12, color:'var(--text-mute)' }}>{en?'Loading feed…':'加载动态中…'}</div>}
          {!loading && shown.map(p=> <PostCard key={p.id} p={p} en={en} onLike={like} onComment={comment} />)}
          {!loading && !shown.length && <div style={{ padding:40, textAlign:'center', fontFamily:'var(--mono)', fontSize:12, color:'var(--text-mute)' }}>{en?'No posts in this topic yet — be the first.':'这个话题还没人发 —— 来当第一个。'}</div>}
        </div>

{/* sidebar */}
        <div style={{ display:'flex', flexDirection:'column', gap:16, position:'sticky', top:90 }} className="comm-side">
          <TrendingTopics en={en} active={active} setActive={setActive} />
          <OnlineFriends en={en} />
          <DiscordMini en={en} />
        </div>
      </div>
    </div>
  );
}

/* fallback if adapter missing entirely */
const DC_SEED_FALLBACK = [
  { id:'f1', author:'阿White', game:'lol', rank:'chal', topic:'lfg', text:'小号上王者了,今晚谁来上分车 🔥', image:false, likes:42, ts:Date.now()-1800000 },
  { id:'f2', author:'momo', game:null, rank:null, topic:'rides', text:'新桌搭好了,RGB 税交满 💸', image:true, imageLabel:'SETUP', likes:88, ts:Date.now()-7200000 }
];

window.CommunityView = CommunityFull;