/* ============================================================
   Lima Android — app root: router + frame composition
   ============================================================ */
function App(){
  const [page,setPage]=useState('home');
  const [crop,setCrop]=useState('');
  const [prov,setProv]=useState('Lusaka');
  const [water,setWater]=useState('Rainfed');
  const [rep,setRep]=useState({crop:'',prov:'Lusaka',water:'Rainfed'});
  const [mProv,setMProv]=useState('Lusaka');
  const [wProv,setWProv]=useState('Lusaka');
  const [rProv,setRProv]=useState('Lusaka');
  const [scrolled,setScrolled]=useState(false);
  const [provOpen,setProvOpen]=useState(false);
  const scrollRef=useRef(null);

  const go=(p, opts)=>{
    if(p==='report' && opts){
      setRep({crop:opts.crop, prov:opts.prov||prov, water:opts.water||water, from:opts.from||'home'});
    }
    if(p==='market' && opts && opts.prov) setMProv(opts.prov);
    setPage(p);
    if(scrollRef.current) scrollRef.current.scrollTop=0;
    setScrolled(false);
  };
  const runSearch=()=>{
    if(!crop||!prov) return;
    setRep({crop, prov, water}); setMProv(prov); setWProv(prov); setRProv(prov);
    go('report',{crop,prov,water});
  };
  const onScroll=e=>setScrolled(e.target.scrollTop>8);

  const title={home:'Ku-Lima',report:'Field report · '+rep.crop,market:'Market prices',weather:'Weather Forecast',rain:'Flood / Drought Risk',elnino:'El Niño Advisory',alerts:'SMS alerts',news:'Farming news'}[page];
  const backVariant = page==='report' || page==='alerts' || page==='news';

  return (
    <DeviceStage>
      <Frame>
        {!LIMA_NATIVE && <StatusBar/>}
        <AppBar
          variant={backVariant?'back':'home'}
          title={title}
          scrolled={scrolled}
          onBack={()=>go((page==='alerts'||page==='news')?'home':(rep.from||'home'))}
          onBell={page==='alerts'?undefined:()=>go('alerts')}
          prov={page==='home'?prov:undefined}
          onProv={()=>setProvOpen(true)}
        />
        {page!=='alerts' && page!=='news' && <NewsTickerM go={go}/>}
        {(page==='weather'||page==='rain'||page==='elnino') && <WxTabs page={page} go={go}/>}
        <div ref={scrollRef} onScroll={onScroll} style={{flex:1,overflowY:'auto',overflowX:'hidden',WebkitOverflowScrolling:'touch',position:'relative'}}>
          <div key={page+'|'+rep.crop+'|'+mProv+'|'+wProv}>
          {page==='home' && <HomeScreen crop={crop} setCrop={setCrop} prov={prov} setProv={setProv} water={water} setWater={setWater} onSearch={runSearch} go={go}/>}
          {page==='report' && <ReportScreen crop={rep.crop} prov={rep.prov} water={rep.water} go={go} onSms={()=>go('alerts')}/>}
          {page==='market' && <MarketScreen prov={mProv} setProv={setMProv} go={go}/>}
          {page==='weather' && <WeatherScreen prov={wProv} setProv={setWProv} go={go}/>}
          {page==='rain' && <RainScreen prov={rProv} setProv={setRProv} go={go}/>}
          {page==='news' && <NewsScreen go={go}/>}
          {page==='elnino' && <ElninoScreen/>}
          {page==='alerts' && <AlertsScreen prov={prov} defaultProvince={page==='weather'?wProv:page==='market'?mProv:prov}/>}
          </div>
        </div>
        <BottomNav page={page} go={go}/>
        {!LIMA_NATIVE && <AndroidNavBar/>}
        <ProvincePickerSheet open={provOpen} onClose={()=>setProvOpen(false)} value={prov} onChange={(v)=>{setProv(v);setMProv(v);setWProv(v);setRProv(v);}}/>
      </Frame>
    </DeviceStage>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);