/* ============================================================
   Lima Android — Farming news (sample feed)
   ============================================================ */
const NEWS_TONE={Markets:'gold',Weather:'navy',Pests:'clay',Inputs:'green'};
function NewsRow({n, last, go}){
  return <button onClick={()=>go('news')} style={{width:'100%',display:'flex',alignItems:'flex-start',gap:12,padding:'13px 15px',border:'none',borderBottom:last?'none':'1px solid var(--line)',background:'transparent',textAlign:'left'}}>
    <div style={{flex:1,minWidth:0}}>
      <div style={{display:'flex',alignItems:'center',gap:8}}><Pill tone={NEWS_TONE[n.tag]||'neutral'}>{n.tag}</Pill><span style={{fontSize:11.5,color:'var(--ink-faint)'}}>{n.when}</span></div>
      <div style={{fontWeight:700,fontSize:14,lineHeight:1.35,marginTop:6,color:'var(--ink)'}}>{n.title}</div>
    </div>
    <Icon name="chev" size={17} style={{color:'var(--ink-faint)',transform:'rotate(-90deg)',flex:'0 0 auto',marginTop:14}}/>
  </button>;
}
function FeedList(){
  const f=useNewsFeeds();
  const st=f.status||{};
  const note=(window.LIMA_FEEDS||[]).map(x=>x.tag+(st[x.id]==='cached'?' (saved copy)':st[x.id]==='unavailable'?' (unavailable)':'')).join(' · ');
  return <React.Fragment>
    <div style={{marginTop:16,padding:'0 2px 8px',display:'flex',alignItems:'baseline',gap:8}}><h3 className="serif" style={{margin:0,fontSize:17,fontWeight:700}}>Food security news</h3><span style={{fontSize:11.5,color:'var(--ink-faint)'}}>{note}</span></div>
    {f.items.length ? <MCard pad={0}>
      {f.items.map((n,i)=><a key={i} href={n.url||undefined} target="_blank" rel="noopener noreferrer" style={{display:'block',padding:'13px 15px',borderBottom:i<f.items.length-1?'1px solid var(--line)':'none',color:'var(--ink)',textDecoration:'none'}}>
        <div style={{display:'flex',alignItems:'center',gap:8}}><span className="mono" style={{fontSize:11,fontWeight:800,color:n.tag==='FAO'?'var(--navy)':'var(--gold-d)'}}>[{n.tag}]</span>{n.date&&<span style={{fontSize:11.5,color:'var(--ink-faint)'}}>{new Date(n.date).toLocaleDateString('en-ZM',{day:'numeric',month:'short'})}</span>}</div>
        <div style={{fontWeight:700,fontSize:14.5,lineHeight:1.35,marginTop:5}}>{n.title}</div>
      </a>)}
    </MCard> : <MCard><div style={{fontSize:13.5,color:'var(--ink-soft)'}}>FAO and FEWS NET headlines aren't available right now.</div></MCard>}
  </React.Fragment>;
}
function NewsScreen({go}){
  const [tag,setTag]=useState('All');
  const tags=['All',...Array.from(new Set(D.news.map(n=>n.tag)))];
  const list=D.news.filter(n=>tag==='All'||n.tag===tag);
  return <div className="screen-pad">
    <div style={{padding:'2px 2px 0'}}>
      <div style={{display:'inline-flex',alignItems:'center',gap:7,color:'var(--green)',fontWeight:800,fontSize:11.5,letterSpacing:'.1em',textTransform:'uppercase',marginBottom:8}}><span style={{width:16,height:2,background:'var(--gold)',borderRadius:2}}></span>Farming news</div>
      <h1 className="serif" style={{margin:0,fontSize:26,fontWeight:800,letterSpacing:'-.02em',lineHeight:1.05}}>What farmers are talking about</h1>
      <div style={{marginTop:8}}><Pill tone="gold">Sample headlines</Pill></div>
    </div>
    <div style={{display:'flex',gap:7,overflowX:'auto',padding:'14px 2px 4px',margin:'0 -2px'}} className="noscroll">
      {tags.map(t=><button key={t} onClick={()=>setTag(t)} style={{flex:'0 0 auto',padding:'7px 13px',borderRadius:999,border:'1.5px solid '+(tag===t?'var(--green)':'var(--line-d)'),background:tag===t?'rgba(46,125,79,.1)':'var(--paper)',color:tag===t?'var(--green-d)':'var(--ink-soft)',fontWeight:700,fontSize:12.5}}>{t}</button>)}
    </div>
    <MCard pad={0} style={{marginTop:8}}>
      {list.map((n,i)=><div key={n.id} style={{padding:'14px 15px',borderBottom:i<list.length-1?'1px solid var(--line)':'none'}}>
        <div style={{display:'flex',alignItems:'center',gap:8}}><Pill tone={NEWS_TONE[n.tag]||'neutral'}>{n.tag}</Pill><span style={{fontSize:11.5,color:'var(--ink-faint)'}}>{n.when} · {n.source}</span></div>
        <div className="serif" style={{fontWeight:700,fontSize:16,lineHeight:1.3,marginTop:7}}>{n.title}</div>
      </div>)}
    </MCard>
    <FeedList/>
    <p style={{margin:'16px 2px 0',fontSize:11.5,color:'var(--ink-faint)',lineHeight:1.5}}><strong style={{color:'var(--ink-soft)'}}>Sample data.</strong> Ku-Lima headlines are placeholders. FAO and FEWS NET headlines come from their public RSS feeds and are cached for offline reading.</p>
  </div>;
}
Object.assign(window, { NewsScreen, NewsRow });