/* ============================================================
   Lima Android — Home / Crop Search screen
   ============================================================ */

function FarmingTipCard(){
  const [i,setI]=useState(0);
  useEffect(()=>{ const t=setInterval(()=>setI(v=>(v+1)%D.farming_tips.length),5000); return ()=>clearInterval(t); },[]);
  const tip=D.farming_tips[i];
  return <div style={{position:'relative',overflow:'hidden',borderRadius:20,padding:'16px 18px',
    background:'linear-gradient(135deg,var(--green) 0%,var(--green-d) 100%)',color:'#fff'}}>
    <div style={{position:'absolute',top:-30,right:-20,width:120,height:120,borderRadius:'50%',background:'radial-gradient(circle,rgba(201,151,43,.3),transparent 70%)'}}></div>
    <div style={{position:'relative',display:'flex',alignItems:'center',gap:7,fontSize:11,fontWeight:800,letterSpacing:'.12em',textTransform:'uppercase',color:'var(--gold-l)'}}>
      <Icon name="spark" size={15}/> Farming tip
    </div>
    <div style={{position:'relative',marginTop:8,minHeight:42,fontSize:14.5,lineHeight:1.45,fontWeight:500}}>{tip}</div>
    <div style={{position:'relative',marginTop:10,display:'flex',gap:5}}>
      {D.farming_tips.map((_,idx)=><span key={idx} style={{width:idx===i?16:5,height:5,borderRadius:9,background:idx===i?'var(--gold-l)':'rgba(255,255,255,.32)',transition:'.3s'}}></span>)}
    </div>
  </div>;
}

function WaterScroller({value, onChange}){
  return <div style={{display:'flex',gap:10,overflowX:'auto',padding:'2px 0 4px',margin:'0 -2px',WebkitOverflowScrolling:'touch'}} className="noscroll">
    {WATER_SOURCES.map(w=>{
      const on=value===w.id, tona=w.tona;
      return <button key={w.id} onClick={()=>onChange(w.id)} style={{flex:'0 0 auto',width:104,display:'flex',flexDirection:'column',alignItems:'flex-start',gap:6,padding:'13px 14px',borderRadius:16,position:'relative',
        border:'1.5px solid '+(on?(tona?'var(--gold)':'var(--green)'):'var(--line-d)'),
        background:on?(tona?'rgba(201,151,43,.1)':'rgba(46,125,79,.08)'):(tona?'rgba(201,151,43,.05)':'var(--paper)'),
        color:on?(tona?'var(--gold-d)':'var(--green-d)'):'var(--ink-soft)',transition:'.16s',textAlign:'left',
        boxShadow:on?(tona?'0 4px 14px rgba(201,151,43,.2)':'0 4px 14px rgba(46,125,79,.14)'):'none'}}>
        {tona && <span className="mono" style={{position:'absolute',top:8,right:8,fontSize:7.5,fontWeight:800,letterSpacing:'.04em',background:'var(--gold)',color:'#fff',padding:'2px 5px',borderRadius:5}}>FLAGSHIP</span>}
        <Icon name={w.icon} size={24} sw={1.8}/>
        <span style={{fontWeight:800,fontSize:13.5,lineHeight:1.1}}>{w.id}</span>
        <span style={{fontSize:10.5,opacity:.8,lineHeight:1.2}}>{w.sub}</span>
      </button>;
    })}
  </div>;
}

function SearchField({icon, label, value, placeholder, emoji, onClick, accent}){
  return <button onClick={onClick} style={{width:'100%',display:'flex',alignItems:'center',gap:12,padding:'14px 15px',borderRadius:15,
    border:'1.5px solid '+(value?'var(--green)':'var(--line-d)'),background:value?'rgba(46,125,79,.04)':'var(--cream)',textAlign:'left',transition:'.16s'}}>
    <span style={{width:40,height:40,borderRadius:11,background:value?'rgba(46,125,79,.12)':'var(--cream-2)',color:value?'var(--green)':'var(--ink-faint)',display:'grid',placeItems:'center',flex:'0 0 auto'}}>
      {emoji ? <span style={{fontSize:22}}>{emoji}</span> : <Icon name={icon} size={20}/>}
    </span>
    <span style={{flex:1,minWidth:0,display:'flex',flexDirection:'column'}}>
      <span style={{fontSize:11.5,fontWeight:700,color:'var(--ink-faint)',textTransform:'uppercase',letterSpacing:'.05em'}}>{label}</span>
      <span style={{fontSize:16,fontWeight:value?700:500,color:value?'var(--ink)':'var(--ink-faint)',marginTop:2,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{value||placeholder}</span>
    </span>
    <Icon name="chev" size={18} style={{color:'var(--ink-faint)',flex:'0 0 auto'}}/>
  </button>;
}

function HomeScreen({crop, setCrop, prov, setProv, water, setWater, onSearch, go}){
  const [cropOpen,setCropOpen]=useState(false);
  const [provOpen,setProvOpen]=useState(false);
  const sel=crop?cropByName(crop):null;
  const ready=crop&&prov;
  const popular=['Maize','Soybean','Tomatoes','Groundnuts','Onions','Sunflower'];
  const w = prov ? D.weather_by_province[prov] : D.weather_by_province['Lusaka'];
  const topMover=D.market_prices.filter(m=>m.price_zmw_per_kg!=null).sort((a,b)=>Math.abs(b.change_pct)-Math.abs(a.change_pct))[0];
  const moverCrop=cropByName(topMover.crop);
  const condIcon={['Sunny']:'sun','Partly cloudy':'cloud','Cloudy':'cloud','Overcast':'cloud','Light showers':'rain','Heavy showers':'rain'}[w.condition]||'cloud';

  return (
    <div className="screen-pad">
      {/* greeting */}
      <div style={{padding:'4px 2px 14px'}}>
        <div className="serif" style={{fontSize:27,fontWeight:800,letterSpacing:'-.02em',lineHeight:1.1}}>Grow smarter.<br/><span style={{color:'var(--green)'}}>Harvest more.</span></div>
        <p style={{margin:'8px 0 0',fontSize:14,color:'var(--ink-soft)'}}>A trusted crop report for your farm — free, no account.</p>
      </div>

      {/* search card */}
      <MCard pad={16} style={{borderColor:'rgba(46,125,79,.25)',boxShadow:'0 0 0 4px rgba(46,125,79,.05), 0 6px 20px rgba(35,33,28,.06)'}}>
        <div style={{display:'flex',flexDirection:'column',gap:10}}>
          <SearchField icon="leaf" label="I want to grow" value={sel?sel.name:''} emoji={sel?sel.emoji:null} placeholder="Choose a crop" onClick={()=>setCropOpen(true)}/>
          <SearchField icon="pin" label="In province" value={prov} placeholder="Choose your province" onClick={()=>setProvOpen(true)}/>
        </div>
        <div style={{margin:'16px 0 10px',display:'flex',alignItems:'center',gap:8}}>
          <Icon name="drop" size={15} style={{color:'var(--ink-faint)'}}/>
          <span style={{fontSize:11.5,fontWeight:800,letterSpacing:'.08em',textTransform:'uppercase',color:'var(--ink-faint)',whiteSpace:'nowrap'}}>My water source</span>
        </div>
        <WaterScroller value={water} onChange={setWater}/>
        <div style={{marginTop:14}}>
          <MButton onClick={ready?onSearch:undefined} disabled={!ready} tone="green" full size="lg">
            <Icon name="leaf" size={19}/> Get field report
          </MButton>
        </div>
        {ready && <div style={{marginTop:12,display:'flex',justifyContent:'center',alignItems:'center',gap:8,fontSize:13,color:'var(--ink-soft)'}}>
          <SuitBadge level={sel.suitability[prov]}/> for {sel.name} in {prov}
        </div>}
      </MCard>
      {prov && <RainBanner prov={prov} go={go} style={{marginTop:12}}/>}

      {/* live services */}
      <div style={{marginTop:22}}>
        <div style={{display:'flex',alignItems:'center',gap:8,padding:'0 2px 10px'}}>
          <span style={{fontSize:11.5,fontWeight:800,color:'var(--ink-faint)',letterSpacing:'.1em',textTransform:'uppercase'}}>Live on Ku-Lima</span>
          <LiveDot label="4 services"/>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
          {[['cloud','Weather Forecast','7-day, by province','var(--navy)','rgba(27,58,107,.1)',()=>go('weather')],
            ['chart','Market Prices','Ministry averages, dated','var(--gold-d)','rgba(201,151,43,.16)',()=>go('market')],
            ['sun','El Niño Advisory','2026/27 season risk','var(--clay)','rgba(178,58,46,.1)',()=>go('elnino')],
            ['leaf','Field Report','Crop-by-crop guidance','var(--green-d)','rgba(46,125,79,.12)',()=>{ if(ready) onSearch(); else setCropOpen(true); }]
          ].map(([ic,t,d,c,bg,fn])=><button key={t} onClick={fn} style={{display:'flex',flexDirection:'column',alignItems:'flex-start',gap:8,padding:'14px',borderRadius:18,border:'1px solid var(--line)',background:'var(--paper)',textAlign:'left',boxShadow:'0 1px 2px rgba(35,33,28,.05), 0 4px 14px rgba(35,33,28,.05)'}}>
            <span style={{width:40,height:40,borderRadius:11,background:bg,color:c,display:'grid',placeItems:'center'}}><Icon name={ic} size={21}/></span>
            <span style={{fontWeight:800,fontSize:14.5,color:'var(--ink)',lineHeight:1.15}}>{t}</span>
            <span style={{fontSize:12,color:'var(--ink-soft)',lineHeight:1.3}}>{d}</span>
          </button>)}
        </div>
      </div>

      {/* USSD + SMS channel card */}
      <div style={{marginTop:14,position:'relative',overflow:'hidden',borderRadius:20,padding:'18px',color:'#fff',background:'linear-gradient(150deg,var(--green-l),var(--green-d))'}}>
        <div style={{position:'absolute',top:-30,right:-20,width:140,height:140,borderRadius:'50%',background:'radial-gradient(circle,rgba(201,151,43,.32),transparent 70%)'}}></div>
        <div style={{position:'relative'}}>
          <div style={{display:'flex',alignItems:'center',gap:8}}><span style={{fontSize:11,fontWeight:800,letterSpacing:'.12em',textTransform:'uppercase',color:'var(--gold-l)'}}>No internet? No problem</span></div>
          <div style={{marginTop:10,display:'flex',alignItems:'center',gap:8}}><span style={{fontSize:13.5,fontWeight:700}}>SMS alerts from “{SMS_SENDER}”</span><LiveDot light/></div>
          <div style={{marginTop:12,display:'flex',alignItems:'center',gap:8}}><span style={{fontSize:13.5,opacity:.92}}>USSD on any phone</span><LiveDot light soon label="Launching soon"/></div>
          <div style={{fontSize:12.5,marginTop:4,opacity:.8}}>Short code announced at launch.</div>
          <div style={{marginTop:12,display:'flex',gap:6,flexWrap:'wrap'}}>
            {['Airtel','MTN'].map(n=><span key={n} style={{padding:'5px 11px',borderRadius:999,background:'rgba(255,255,255,.16)',fontSize:12.5,fontWeight:700}}>{n}</span>)}
            <span style={{padding:'5px 11px',borderRadius:999,background:'rgba(255,255,255,.16)',fontSize:12.5,fontWeight:700}}>SMS from “{SMS_SENDER}”</span>
          </div>
          <div style={{marginTop:14}}><MButton tone="gold" size="sm" onClick={()=>go('alerts')}><Icon name="bell" size={16}/> Get SMS alerts</MButton></div>
        </div>
      </div>

      {/* popular crops */}
      <div style={{marginTop:22}}>
        <div style={{fontSize:11.5,fontWeight:800,color:'var(--ink-faint)',letterSpacing:'.1em',textTransform:'uppercase',padding:'0 2px 10px'}}>Popular in Zambia</div>
        <div style={{display:'flex',gap:9,overflowX:'auto',padding:'0 2px 4px',margin:'0 -2px'}} className="noscroll">
          {popular.map(name=>{
            const c=cropByName(name);
            return <button key={name} onClick={()=>{setCrop(name); if(prov){go('report',{crop:name,prov,water});}}} style={{flex:'0 0 auto',display:'inline-flex',alignItems:'center',gap:7,padding:'9px 15px',borderRadius:999,border:'1.5px solid var(--line-d)',background:'var(--paper)',fontSize:14,fontWeight:700,color:'var(--ink)'}}>
              <span style={{fontSize:17}}>{c.emoji}</span>{name}
            </button>;
          })}
        </div>
      </div>

      {/* today glance: weather + market */}
      <div style={{marginTop:22,display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
        <MCard pad={15} onClick={()=>go('weather')} style={{cursor:'pointer'}}>
          <div style={{display:'flex',alignItems:'center',justifyContent:'space-between'}}>
            <span style={{fontSize:11,fontWeight:800,letterSpacing:'.06em',textTransform:'uppercase',color:'var(--ink-faint)'}}>Weather</span>
            <Icon name={condIcon} size={20} style={{color:'var(--navy)'}}/>
          </div>
          <div className="serif" style={{fontSize:30,fontWeight:800,marginTop:8,lineHeight:1}}>{w.temp_c}°</div>
          <div style={{fontSize:12.5,color:'var(--ink-soft)',marginTop:4}}>{prov||'Lusaka'} · {w.condition}</div>
        </MCard>
        <MCard pad={15} onClick={()=>go('market')} style={{cursor:'pointer'}}>
          <div style={{display:'flex',alignItems:'center',justifyContent:'space-between'}}>
            <span style={{fontSize:11,fontWeight:800,letterSpacing:'.06em',textTransform:'uppercase',color:'var(--ink-faint)'}}>Top mover · Feb 2025</span>
            <span style={{fontSize:18}}>{moverCrop.emoji}</span>
          </div>
          <div className="serif" style={{fontSize:22,fontWeight:800,marginTop:8,lineHeight:1}}>{ZMW(topMover.price_zmw_per_kg,2)}<span style={{fontSize:12,fontWeight:600,color:'var(--ink-faint)'}}>/kg</span></div>
          <div style={{marginTop:5,display:'flex',alignItems:'center',gap:7}}><span style={{fontSize:12.5,fontWeight:700}}>{topMover.crop}</span><Trend dir={topMover.trend} pct={topMover.change_pct} size={12.5}/></div>
        </MCard>
      </div>

      {/* farming tip */}
      <div style={{marginTop:14}}><FarmingTipCard/></div>

      {/* farming news */}
      <div style={{marginTop:22}}>
        <div style={{display:'flex',alignItems:'center',padding:'0 2px 10px'}}>
          <span style={{fontSize:11.5,fontWeight:800,color:'var(--ink-faint)',letterSpacing:'.1em',textTransform:'uppercase'}}>Farming news</span>
          <button onClick={()=>go('news')} style={{marginLeft:'auto',border:'none',background:'transparent',color:'var(--green-d)',fontWeight:700,fontSize:13,padding:'4px 2px'}}>See all</button>
        </div>
        <MCard pad={0}>
          {D.news.slice(0,3).map((n,i)=><NewsRow key={n.id} n={n} last={i===2} go={go}/>)}
        </MCard>
      </div>

      <p style={{margin:'22px 2px 0',textAlign:'center',fontSize:11.5,color:'var(--ink-faint)',lineHeight:1.5}}>Ku-Lima is a free public service<br/>operated by <strong style={{color:'var(--ink-soft)'}}>Akili Ventures Limited</strong></p>

      <CropPickerSheet open={cropOpen} onClose={()=>setCropOpen(false)} value={crop} onChange={setCrop}/>
      <ProvincePickerSheet open={provOpen} onClose={()=>setProvOpen(false)} value={prov} onChange={setProv}/>
    </div>
  );
}

Object.assign(window, { HomeScreen });