// Section 3 neighbor page: Announcements inbox

const NeighborAnnouncementsPage = () => {
  const c = useTokens();
  const D = window.HAOLIN_DATA;
  const [filter, setFilter] = useState('all');
  const [selected, setSelected] = useState(null);

  // 模擬：從好鄰居視角看到的公告（只看「已發送」的）
  const inbox = D.announcements.filter(a => a.status === '已發送').map(a => ({
    ...a,
    read: a.id !== 'ann-001' && a.id !== 'ann-004',  // 前兩則未讀
    body: `${a.summary}\n\n這是公告的完整內文區域，在真實情境會放更詳細的資訊，例如報名連結、日期時間、注意事項等。協會會盡量把重要的事說清楚。\n\n—好好生活協進會`,
  }));

  const filtered = inbox.filter(a => filter === 'all' ? true : filter === 'unread' ? !a.read : a.pushedTrainee);
  const unreadCount = inbox.filter(a => !a.read).length;

  return (
    <div style={{background:c.bg, minHeight:'100vh'}}>
      <div style={{maxWidth:1120, margin:'0 auto', padding:'32px 32px 48px'}}>
        <div style={{marginBottom:24}}>
          <div style={{fontSize:13, color:c.primary, fontWeight:600, letterSpacing:'0.08em'}}>協會訊息</div>
          <h1 style={{fontFamily:'var(--hl-font-heading)', fontSize:30, color:c.ink, margin:'6px 0 4px', fontWeight:500}}>
            小好捎來的話{unreadCount > 0 && <span style={{fontSize:14, color:c.primary, marginLeft:10, fontWeight:600}}>· {unreadCount} 則未讀</span>}
          </h1>
          <p style={{color:c.inkSoft, fontSize:14, margin:0}}>協會給你的所有通知、月報與活動資訊，都在這裡。</p>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'300px 1fr', gap:24, alignItems:'start'}}>
          {/* Sidebar: filters + list */}
          <Card padding={false}>
            <div style={{padding:'14px 16px', borderBottom:`1px solid ${c.lineSoft}`, display:'flex', gap:4}}>
              {[['all','全部'],['unread','未讀'],['pushed','給我的']].map(([k,l]) => (
                <button key={k} onClick={()=>setFilter(k)} style={{
                  flex:1, padding:'7px 10px', fontSize:12, border:'none',
                  background: filter===k ? c.primary : 'transparent',
                  color: filter===k ? '#fff' : c.inkSoft,
                  borderRadius:'var(--hl-radius-md)', fontWeight: filter===k ? 600 : 500,
                  cursor:'pointer', fontFamily:'var(--hl-font-body)',
                }}>{l}</button>
              ))}
            </div>
            <div>
              {filtered.length === 0 ? (
                <div style={{padding:'40px 20px', textAlign:'center', fontSize:13, color:c.inkMuted}}>沒有符合的訊息。</div>
              ) : filtered.map((a, i) => {
                const active = selected?.id === a.id;
                return (
                  <div key={a.id} onClick={()=>setSelected(a)} style={{
                    padding:'14px 16px',
                    borderBottom: i<filtered.length-1 ? `1px solid ${c.lineSoft}` : 'none',
                    background: active ? c.primarySoft+'40' : !a.read ? c.bgAlt+'80' : 'transparent',
                    borderLeft: active ? `3px solid ${c.primary}` : '3px solid transparent',
                    cursor:'pointer',
                  }}>
                    <div style={{display:'flex', alignItems:'flex-start', gap:10, marginBottom:6}}>
                      {!a.read && <span style={{width:7, height:7, borderRadius:'50%', background:c.primary, marginTop:6, flexShrink:0}}/>}
                      <div style={{flex:1, minWidth:0}}>
                        <div style={{fontSize:13, fontWeight: a.read ? 500 : 600, color:c.ink, marginBottom:3, lineHeight:1.4}}>{a.title}</div>
                        <div style={{fontSize:11, color:c.inkMuted, fontFamily:'var(--hl-font-mono, monospace)'}}>{a.publishAt}</div>
                      </div>
                    </div>
                    <div style={{fontSize:12, color:c.inkSoft, lineHeight:1.6, marginLeft: a.read ? 0 : 17, overflow:'hidden', textOverflow:'ellipsis', display:'-webkit-box', WebkitLineClamp:2, WebkitBoxOrient:'vertical'}}>{a.summary}</div>
                    {a.pushedTrainee && <div style={{marginTop:6, marginLeft: a.read ? 0 : 17}}>
                      <span style={{fontSize:10, padding:'1px 7px', background:c.accentSoft, color:'#4D6D41', borderRadius:4, fontWeight:600}}>給我的</span>
                    </div>}
                  </div>
                );
              })}
            </div>
          </Card>

          {/* Detail */}
          <div>
            {selected ? (
              <Card style={{padding:'36px 44px'}}>
                <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:10}}>
                  <div style={{fontSize:12, color:c.inkMuted, fontFamily:'var(--hl-font-mono, monospace)'}}>{selected.publishAt}</div>
                  <div style={{display:'flex', gap:6}}>
                    {selected.pushedTrainee && <span style={{fontSize:11, padding:'2px 9px', background:c.accentSoft, color:'#4D6D41', borderRadius:999, fontWeight:600}}>給我的</span>}
                    <span style={{fontSize:11, padding:'2px 9px', background:c.bgAlt, color:c.inkSoft, borderRadius:999}}>{selected.audience}</span>
                  </div>
                </div>
                <h2 style={{fontFamily:'var(--hl-font-heading)', fontSize:26, color:c.ink, margin:'0 0 28px', fontWeight:500, lineHeight:1.4}}>{selected.title}</h2>

                <div style={{fontSize:15, color:c.inkSoft, lineHeight:2, whiteSpace:'pre-wrap', textWrap:'pretty'}}>{selected.body}</div>

                <div style={{marginTop:40, paddingTop:24, borderTop:`1px dashed ${c.lineSoft}`, display:'flex', gap:10}}>
                  <Button variant="primary" size="sm" icon={<IconChat size={13}/>}>回覆小好</Button>
                  <Button variant="secondary" size="sm">標記為未讀</Button>
                </div>
              </Card>
            ) : (
              <Card style={{padding:'80px 40px', textAlign:'center'}}>
                <div style={{display:'flex', justifyContent:'center', marginBottom:20}}><SketchMailbox/></div>
                <h3 style={{fontFamily:'var(--hl-font-heading)', fontSize:20, color:c.ink, margin:'0 0 8px', fontWeight:500}}>左邊選一則來看</h3>
                <p style={{fontSize:14, color:c.inkSoft, margin:0, lineHeight:1.8}}>協會的每則訊息，都會想著你寫。</p>
              </Card>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { NeighborAnnouncementsPage });