/* ============================================================
   Lima Android — Market Prices screen (national, dated)
   ============================================================ */
const fmtAsOf = iso => new Date(iso + 'T00:00:00').toLocaleDateString('en-ZM', { day: 'numeric', month: 'short', year: 'numeric' });
const prevMonthLabel = iso => { const d = new Date(iso + 'T00:00:00'); d.setMonth(d.getMonth() - 1); return d.toLocaleDateString('en-ZM', { month: 'short', year: 'numeric' }); };

function MarketScreen({prov, setProv, go}){
  const [provOpen,setProvOpen]=useState(false);
  const [sortKey,setSortKey]=useState('default');
  const lang=provLang(prov);
  const rows=D.market_prices.map(m=>({...m, c:cropByName(m.crop), ln:localName(cropByName(m.crop),prov)}));
  const official=rows.filter(r=>r.basis!=='sample'), sample=rows.filter(r=>r.basis==='sample');
  const sorted=[...official].sort((a,b)=>{
    if(sortKey==='price') return b.price_zmw_per_kg-a.price_zmw_per_kg;
    if(sortKey==='crop') return a.crop.localeCompare(b.crop);
    return b.change_pct-a.change_pct;
  });
  const top=[...official].sort((a,b)=>b.change_pct-a.change_pct)[0];
  const high=[...official].sort((a,b)=>b.price_zmw_per_kg-a.price_zmw_per_kg)[0];
  const sorts=[['default','Movers'],['price','Price'],['crop','A–Z']];
  const asOf=fmtAsOf(D.market_asOf), vs=prevMonthLabel(D.market_asOf);

  const Row=({r,last})=><button onClick={()=>go('report',{crop:r.crop, prov, from:'market'})} style={{width:'100%',display:'flex',alignItems:'center',gap:12,padding:'13px 15px',border:'none',borderBottom:last?'none':'1px solid var(--line)',background:'transparent',textAlign:'left'}}>
    <span style={{fontSize:26,flex:'0 0 auto'}}>{r.c.emoji}</span>
    <div style={{flex:1,minWidth:0}}>
      <div style={{fontWeight:700,fontSize:14}}>{r.crop}</div>
      {r.ln && <div className="mono" style={{fontSize:10.5,color:'var(--ink-faint)'}}>{r.ln.name} <span style={{opacity:.7}}>· {r.ln.lang}</span></div>}
      {r.retail && <div style={{fontSize:11,color:'var(--ink-soft)',marginTop:3}}>Retail Aug 2026: <strong>{ZMW(r.retail.price,2)}</strong>/{r.retail.unit}</div>}
    </div>
    <div style={{flex:'0 0 auto',textAlign:'right'}}>
      {r.basis==='sample'
        ? <div style={{fontSize:12,fontWeight:700,color:'var(--ink-faint)'}}>No official price</div>
        : <React.Fragment>
            <div className="serif" style={{fontWeight:800,fontSize:15.5}}>{ZMW(r.price_zmw_per_kg,2)}<span style={{fontSize:10.5,fontWeight:600,color:'var(--ink-faint)'}}>/kg</span></div>
            <div style={{display:'flex',justifyContent:'flex-end',alignItems:'center',gap:5,marginTop:2}}><Trend dir={r.trend} pct={r.change_pct} size={12}/><span style={{fontSize:10.5,color:'var(--ink-faint)'}}>vs {vs}</span></div>
          </React.Fragment>}
    </div>
  </button>;

  return <div className="screen-pad">
    <div style={{padding:'2px 2px 4px'}}>
      <div style={{display:'inline-flex',alignItems:'center',gap:7,color:'var(--green)',fontWeight:800,fontSize:11.5,letterSpacing:'.1em',textTransform:'uppercase',marginBottom:8,whiteSpace:'nowrap'}}>
        <span style={{width:16,height:2,background:'var(--gold)',borderRadius:2}}></span>Market prices
      </div>
      <h1 className="serif" style={{margin:0,fontSize:26,fontWeight:800,letterSpacing:'-.02em',lineHeight:1.05}}>National farm-gate prices</h1>
      <p style={{margin:'8px 0 0',fontSize:13.5,color:'var(--ink-soft)'}}>Kwacha per kg, national average. Tap a crop for its report.</p>
    </div>

    <div style={{marginTop:12,display:'flex',gap:8,flexWrap:'wrap',padding:'0 2px'}}>
      <Pill tone="gold"><Icon name="calendar" size={13}/> Prices as of {asOf} — may be out of date</Pill>
      <Pill tone="neutral">{D.market_source.split(' — ')[0]}</Pill>
    </div>

    <div style={{marginTop:14,display:'flex',alignItems:'center',gap:8}}>
      <button onClick={()=>setProvOpen(true)} aria-label="Change province for crop names" style={{display:'inline-flex',alignItems:'center',gap:7,padding:'9px 13px',borderRadius:999,border:'1.5px solid var(--green)',background:'rgba(46,125,79,.08)',color:'var(--green-d)',fontWeight:700,fontSize:13}}>
        <Icon name="pin" size={15}/>{lang?`Names in ${lang}`:prov}<Icon name="chev" size={15}/>
      </button>
      <div style={{marginLeft:'auto',display:'flex',gap:6}}>
        {sorts.map(([k,l])=><button key={k} onClick={()=>setSortKey(k)} style={{padding:'7px 11px',borderRadius:999,border:'1.5px solid '+(sortKey===k?'var(--green)':'var(--line-d)'),background:sortKey===k?'rgba(46,125,79,.1)':'var(--paper)',color:sortKey===k?'var(--green-d)':'var(--ink-soft)',fontWeight:700,fontSize:12.5}}>{l}</button>)}
      </div>
    </div>

    <div style={{marginTop:14,display:'grid',gridTemplateColumns:'1fr 1fr',gap:11}}>
      <MCard pad={14}>
        <div style={{display:'flex',alignItems:'center',gap:6,fontSize:11.5,fontWeight:700,color:'var(--ink-faint)',whiteSpace:'nowrap'}}><Icon name="arrowUp" size={14}/>Top gainer</div>
        <div className="serif" style={{fontSize:19,fontWeight:800,marginTop:6,color:'var(--green-d)'}}>{top.crop}</div>
        <div style={{fontSize:12,color:'var(--ink-faint)',marginTop:2}}>+{top.change_pct}% vs {vs}</div>
      </MCard>
      <MCard pad={14}>
        <div style={{display:'flex',alignItems:'center',gap:6,fontSize:11.5,fontWeight:700,color:'var(--ink-faint)'}}><Icon name="coins" size={14}/>Highest value</div>
        <div className="serif" style={{fontSize:19,fontWeight:800,marginTop:6,color:'var(--navy)'}}>{high.crop}</div>
        <div style={{fontSize:12,color:'var(--ink-faint)',marginTop:2}}>{ZMW(high.price_zmw_per_kg,2)}/kg</div>
      </MCard>
    </div>

    <div style={{marginTop:16,display:'flex',alignItems:'center',gap:9,padding:'0 2px 4px'}}>
      <h3 className="serif" style={{margin:0,fontSize:17,fontWeight:700}}>Prices</h3>
      <span style={{fontSize:11.5,color:'var(--ink-faint)',marginLeft:'auto'}}>vs {vs}</span>
    </div>
    <MCard pad={0}>{sorted.map((r,i)=><Row key={r.crop} r={r} last={i===sorted.length-1}/>)}</MCard>

    {sample.length>0 && <React.Fragment>
      <div style={{marginTop:16,padding:'0 2px 4px'}}><h3 className="serif" style={{margin:0,fontSize:17,fontWeight:700}}>No official price yet</h3></div>
      <MCard pad={0} style={{opacity:.9}}>{sample.map((r,i)=><Row key={r.crop} r={r} last={i===sample.length-1}/>)}</MCard>
    </React.Fragment>}

    <div style={{marginTop:14,borderRadius:20,padding:'18px',color:'#fff',background:'linear-gradient(135deg,var(--navy),var(--navy-d))',position:'relative',overflow:'hidden'}}>
      <div style={{position:'absolute',top:-30,right:-20,width:120,height:120,borderRadius:'50%',background:'radial-gradient(circle,rgba(201,151,43,.25),transparent 70%)'}}></div>
      <div style={{position:'relative'}}>
        <Icon name="chart" size={24} style={{color:'var(--gold-l)'}}/>
        <h3 className="serif" style={{margin:'10px 0 5px',fontSize:18,fontWeight:700}}>Sell at the right time</h3>
        <p style={{margin:0,fontSize:13,color:'#c3cee0',lineHeight:1.5}}>Maize and groundnut prices typically peak in August–September when reserve stocks are lowest.</p>
      </div>
    </div>
    <p style={{margin:'14px 2px 0',fontSize:11,color:'var(--ink-faint)',lineHeight:1.5}}>{D.market_context} Retail lines are current ZamStats monthly prices and are never used to estimate margins.</p>

    <ProvincePickerSheet open={provOpen} onClose={()=>setProvOpen(false)} value={prov} onChange={setProv} title="Crop names in the language of"/>
  </div>;
}

Object.assign(window, { MarketScreen });