/* ============================================================
   Lima Android — Weather screen
   ============================================================ */
const condIconMap={['Sunny']:'sun','Partly cloudy':'cloud','Cloudy':'cloud','Overcast':'cloud','Light showers':'rain','Heavy showers':'rain'};

function wforecast(prov, w){
  const rnd=seedRand('fc'+prov);
  const days=['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
  const t0=new Date().getDay();
  const order=[]; for(let i=0;i<7;i++) order.push(days[(t0+i)%7]);
  const conds = w.rain_7day_mm>25 ? ['Heavy showers','Light showers','Overcast','Light showers','Cloudy','Partly cloudy','Light showers']
    : w.rain_7day_mm>12 ? ['Partly cloudy','Light showers','Cloudy','Partly cloudy','Light showers','Sunny','Partly cloudy']
    : ['Sunny','Sunny','Partly cloudy','Sunny','Partly cloudy','Sunny','Sunny'];
  return order.map((d,i)=>{
    const hi=w.temp_max - Math.round(rnd()*4);
    const lo=w.temp_min - Math.round(rnd()*3);
    const cond=conds[i];
    const rain= cond.includes('Heavy')?Math.round(8+rnd()*14):cond.includes('Light')?Math.round(2+rnd()*7):cond==='Sunny'?0:Math.round(rnd()*3);
    return {day:d, today:i===0, hi:i===0?null:hi, lo:i===0?null:lo, cond, rain};
  });
}

function WeatherScreen({prov, setProv, go}){
  const [provOpen,setProvOpen]=useState(false);
  const w=D.weather_by_province[prov];
  const provObj=D.provinces.find(p=>p.name===prov);
  const fc=wforecast(prov,w);
  const cIcon=condIconMap[w.condition]||'cloud';
  const WxStat=({icon,label,val})=>(<div style={{background:'rgba(255,255,255,.09)',borderRadius:12,padding:'11px 13px'}}>
    <div style={{display:'flex',alignItems:'center',gap:5,fontSize:11,color:'#aab6cc',fontWeight:700}}><Icon name={icon} size={13}/>{label}</div>
    <div className="serif" style={{fontSize:18,fontWeight:700,marginTop:4,color:'#fff'}}>{val}</div></div>);

  return <div className="screen-pad">
    <div style={{display:'flex',alignItems:'flex-start',justifyContent:'space-between',gap:10,padding:'2px 2px 0'}}>
      <div>
        <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>Weather & Rain Forecast
        </div>
        <h1 className="serif" style={{margin:0,fontSize:26,fontWeight:800,letterSpacing:'-.02em',lineHeight:1.05}}>Weather for {prov}</h1>
        <div style={{marginTop:8}}><Pill tone="gold">Sample data</Pill></div>
      </div>
      <button onClick={()=>setProvOpen(true)} aria-label="Change province" style={{flex:'0 0 auto',marginTop:4,display:'inline-flex',alignItems:'center',gap:6,padding:'8px 12px',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={14}/><Icon name="chev" size={14}/>
      </button>
    </div>

    {/* current conditions */}
    <div style={{marginTop:16,position:'relative',overflow:'hidden',borderRadius:22,padding:'22px',color:'#fff',background:'linear-gradient(150deg,var(--navy),var(--navy-d))'}}>
      <div style={{position:'absolute',top:-40,right:-30,width:180,height:180,borderRadius:'50%',background:'radial-gradient(circle,rgba(201,151,43,.22),transparent 70%)'}}></div>
      <div style={{position:'relative'}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start'}}>
          <div>
            <div style={{fontSize:12.5,color:'#aab6cc',fontWeight:700,whiteSpace:'nowrap'}}>Right now in {prov}</div>
            <div style={{display:'flex',alignItems:'flex-start',gap:5,marginTop:6}}>
              <span className="serif" style={{fontSize:62,fontWeight:800,lineHeight:.9}}>{w.temp_c}</span>
              <span style={{fontSize:22,marginTop:5}}>°C</span>
            </div>
            <div style={{fontSize:15,marginTop:5,color:'#dbe7e0'}}>{w.condition}</div>
          </div>
          <span style={{width:58,height:58,borderRadius:16,background:'rgba(255,255,255,.12)',color:'var(--gold-l)',display:'grid',placeItems:'center'}}><Icon name={cIcon} size={32}/></span>
        </div>
        <div style={{marginTop:20,display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
          <WxStat icon="sun" label="Today" val={`${w.temp_c}° now`}/>
          <WxStat icon="droplets" label="Humidity" val={`${w.humidity}%`}/>
          <WxStat icon="rain" label="Rain next 7 days" val={`${w.rain_7day_mm} mm`}/>
          <WxStat icon="map" label="Agro-zone" val={`Zone ${provObj.agro_zone}`}/>
        </div>
      </div>
    </div>

    {/* advisory */}
    <MCard style={{marginTop:14}}>
      <div style={{display:'flex',alignItems:'center',gap:10}}>
        <span style={{width:40,height:40,borderRadius:12,background:'rgba(46,125,79,.1)',color:'var(--green)',display:'grid',placeItems:'center',flex:'0 0 auto'}}><Icon name="leaf" size={21}/></span>
        <div><h3 className="serif" style={{margin:0,fontSize:17,fontWeight:700}}>Field advisory</h3><div style={{fontSize:11.5,color:'var(--ink-faint)'}}>Sample advisory · illustrative</div></div>
      </div>
      <p style={{margin:'14px 0 0',fontSize:14.5,color:'var(--ink)',lineHeight:1.6}}>{w.advisory}</p>
      <div style={{marginTop:14,display:'flex',gap:9,flexWrap:'wrap'}}>
        <Pill tone="green"><Icon name="check" size={13}/> {provObj.avg_rainfall_mm}mm/yr avg</Pill>
        <Pill tone="navy"><Icon name="pin" size={13}/> {prov}</Pill>
      </div>
    </MCard>

    {/* 7-day forecast */}
    <div style={{marginTop:16,padding:'0 2px 4px',display:'flex',alignItems:'center',gap:8}}>
      <Icon name="cloud" size={18} style={{color:'var(--navy)'}}/>
      <h3 className="serif" style={{margin:0,fontSize:17,fontWeight:700}}>7-day forecast</h3>
      <span style={{marginLeft:'auto',fontSize:11.5,color:'var(--ink-faint)'}}>From {new Date().toLocaleDateString('en-ZM',{day:'numeric',month:'short'})}</span>
    </div>
    <div style={{display:'flex',gap:9,overflowX:'auto',padding:'0 2px 4px',margin:'0 -2px'}} className="noscroll">
      {fc.map((d,i)=>(
        <div key={i} style={{flex:'0 0 auto',width:64,textAlign:'center',padding:'14px 6px',borderRadius:16,border:'1px solid var(--line)',
          background:d.today?'rgba(46,125,79,.07)':'var(--paper)',borderColor:d.today?'var(--green)':'var(--line)'}}>
          <div style={{fontSize:12,fontWeight:700,color:d.today?'var(--green-d)':'var(--ink-soft)'}}>{d.today?'Today':d.day}</div>
          <div style={{margin:'10px auto',width:38,height:38,borderRadius:11,background:'var(--cream-2)',color:d.cond.includes('show')?'var(--navy)':d.cond==='Sunny'?'var(--gold-d)':'var(--ink-soft)',display:'grid',placeItems:'center'}}><Icon name={condIconMap[d.cond]||'cloud'} size={21}/></div>
          <div className="serif" style={{fontWeight:800,fontSize:16}}>{d.today?w.temp_c:d.hi}°</div>
          <div style={{fontSize:12,color:'var(--ink-faint)'}}>{d.today?'now':d.lo+'°'}</div>
          <div style={{marginTop:7,fontSize:10.5,color:'var(--navy)',display:'flex',alignItems:'center',justifyContent:'center',gap:2}}><Icon name="rain" size={11}/>{d.rain} mm</div>
        </div>
      ))}
    </div>

    {/* across Zambia */}
    <div style={{marginTop:18,padding:'0 2px 10px'}}><h3 className="serif" style={{margin:0,fontSize:17,fontWeight:700}}>Across Zambia</h3></div>
    <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
      {D.provinces.map(p=>{
        const pw=D.weather_by_province[p.name];
        const active=p.name===prov;
        return <button key={p.id} onClick={()=>setProv(p.name)} style={{textAlign:'left',padding:'13px 14px',borderRadius:15,
          border:'1.5px solid '+(active?'var(--green)':'var(--line)'),background:active?'rgba(46,125,79,.06)':'var(--paper)'}}>
          <div style={{display:'flex',alignItems:'center',justifyContent:'space-between'}}>
            <span style={{fontWeight:700,fontSize:13.5}}>{p.name}</span>
            <Icon name={condIconMap[pw.condition]||'cloud'} size={17} style={{color:'var(--ink-soft)'}}/>
          </div>
          <div style={{display:'flex',alignItems:'baseline',gap:6,marginTop:5}}>
            <span className="serif" style={{fontSize:22,fontWeight:800}}>{pw.temp_c}°</span>
            <span style={{fontSize:11.5,color:'var(--ink-faint)',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{pw.condition}</span>
          </div>
        </button>;
      })}
    </div>
    <p style={{margin:'16px 2px 0',fontSize:11,color:'var(--ink-faint)',lineHeight:1.5}}><strong style={{color:'var(--ink-soft)'}}>Sample data.</strong> Conditions and advisory are illustrative, not a live forecast. For official forecasts see the Zambia Meteorological Department.</p>

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

Object.assign(window, { WeatherScreen });