const { useState, useEffect } = React;

/* Open-Meteo WMO weather code → icon + zh label */
const WX_MAP = {
  0:  { icon:'ri-sun-line',          label:'晴' },
  1:  { icon:'ri-sun-cloudy-line',   label:'晴時多雲' },
  2:  { icon:'ri-cloudy-line',       label:'多雲' },
  3:  { icon:'ri-cloudy-2-line',     label:'陰' },
  45: { icon:'ri-mist-line',         label:'霧' },
  48: { icon:'ri-mist-line',         label:'霧凇' },
  51: { icon:'ri-drizzle-line',      label:'毛毛雨' },
  53: { icon:'ri-drizzle-line',      label:'毛毛雨' },
  55: { icon:'ri-drizzle-line',      label:'毛毛雨' },
  61: { icon:'ri-rainy-line',        label:'小雨' },
  63: { icon:'ri-rainy-line',        label:'中雨' },
  65: { icon:'ri-heavy-showers-line',label:'大雨' },
  71: { icon:'ri-snowy-line',        label:'小雪' },
  73: { icon:'ri-snowy-line',        label:'中雪' },
  75: { icon:'ri-snowy-line',        label:'大雪' },
  80: { icon:'ri-showers-line',      label:'陣雨' },
  81: { icon:'ri-showers-line',      label:'陣雨' },
  82: { icon:'ri-heavy-showers-line',label:'豪雨' },
  95: { icon:'ri-thunderstorms-line',label:'雷雨' },
  96: { icon:'ri-thunderstorms-line',label:'雷雨夾冰雹' },
  99: { icon:'ri-thunderstorms-line',label:'雷雨夾冰雹' },
};
const wxInfo = code => WX_MAP[code] || { icon:'ri-question-line', label:'—' };

const WX_CACHE_KEY = 'hn_wx_v1';
const WX_CACHE_TTL = 30 * 60 * 1000;   // 30 min

function WeatherCard({ accent }) {
  // Hydrate from localStorage cache immediately
  const initial = (() => {
    try {
      const raw = localStorage.getItem(WX_CACHE_KEY);
      if (!raw) return { status:'loading', data:null };
      const c = JSON.parse(raw);
      return { status:'ok', data:c, stale: Date.now()-c.ts > WX_CACHE_TTL };
    } catch { return { status:'loading', data:null }; }
  })();
  const [state, setState] = useState(initial);

  useEffect(() => {
    let cancelled = false;

    async function fetchWeather(lat, lng) {
      const url = `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lng}&current=temperature_2m,weather_code,precipitation_probability,relative_humidity_2m&timezone=auto`;
      const r = await fetch(url);
      const j = await r.json();
      return {
        temp: Math.round(j.current.temperature_2m),
        code: j.current.weather_code,
        rain: j.current.precipitation_probability,
        humidity: j.current.relative_humidity_2m,
      };
    }

    async function reverseGeocode(lat, lng) {
      try {
        const r = await fetch(`https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${lat}&longitude=${lng}&localityLanguage=zh`);
        const j = await r.json();
        return j.city || j.locality || j.principalSubdivision || `${lat.toFixed(2)}, ${lng.toFixed(2)}`;
      } catch {
        return `${lat.toFixed(2)}, ${lng.toFixed(2)}`;
      }
    }

    async function loadFor(lat, lng, locFallback) {
      // Parallel: weather + location name
      try {
        const [wx, loc] = await Promise.all([
          fetchWeather(lat, lng),
          reverseGeocode(lat, lng).catch(() => locFallback),
        ]);
        if (cancelled) return;
        const data = { ...wx, loc, lat, lng, ts: Date.now() };
        setState({ status:'ok', data, stale:false });
        try { localStorage.setItem(WX_CACHE_KEY, JSON.stringify(data)); } catch {}
      } catch {
        if (!cancelled && !initial.data) setState({ status:'error', error:'天氣讀取失敗' });
      }
    }

    if (!navigator.geolocation) {
      loadFor(21.0285, 105.8542, '河內');
      return () => { cancelled = true; };
    }

    navigator.geolocation.getCurrentPosition(
      pos => loadFor(pos.coords.latitude, pos.coords.longitude, '當前位置'),
      () => { if (!initial.data) loadFor(21.0285, 105.8542, '河內（預設）'); },
      { enableHighAccuracy:false, timeout:4000, maximumAge:1800000 }  // 30 min cached position
    );

    return () => { cancelled = true; };
  }, []);

  if (state.status === 'loading') {
    return (
      <div style={{margin:'14px 16px 0',background:'#fff',borderRadius:20,padding:'16px 18px',boxShadow:'0 2px 12px rgba(0,0,0,0.06)',display:'flex',alignItems:'center',gap:12}}>
        <i className="ri-loader-4-line" style={{fontSize:22,color:'#9CA3AF',animation:'spin 1s linear infinite'}}></i>
        <span style={{fontSize:13,color:'#9CA3AF'}}>讀取天氣中...</span>
      </div>
    );
  }
  if (state.status === 'error') {
    return (
      <div style={{margin:'14px 16px 0',background:'#fff',borderRadius:20,padding:'14px 18px',boxShadow:'0 2px 12px rgba(0,0,0,0.06)',fontSize:12,color:'#9CA3AF'}}>
        <i className="ri-cloud-off-line"></i>　{state.error}
      </div>
    );
  }
  const wx = wxInfo(state.data.code);
  return (
    <div style={{margin:'14px 16px 0',background:'#fff',borderRadius:20,padding:'16px 18px',boxShadow:'0 2px 12px rgba(0,0,0,0.06)'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
        <div style={{display:'flex',alignItems:'center',gap:14}}>
          <i className={wx.icon} style={{fontSize:42,color:accent,lineHeight:1}}></i>
          <div>
            <div style={{fontSize:11,color:'#9CA3AF',marginBottom:2,display:'flex',alignItems:'center',gap:4}}>
              <i className="ri-map-pin-2-fill"></i>{state.data.loc}
            </div>
            <div style={{fontSize:28,fontWeight:700,color:'#1C1C1E',lineHeight:1}}>{state.data.temp}°<span style={{fontSize:16,fontWeight:500,color:'#6B7280'}}>C</span></div>
            <div style={{fontSize:12,color:'#6B7280',marginTop:2}}>{wx.label}</div>
          </div>
        </div>
        <div style={{textAlign:'right'}}>
          <div style={{fontSize:11,color:'#9CA3AF',marginBottom:2,display:'flex',alignItems:'center',justifyContent:'flex-end',gap:4}}><i className="ri-drop-line"></i>降雨</div>
          <div style={{fontSize:18,fontWeight:700,color:'#3B82F6'}}>{state.data.rain ?? 0}%</div>
          {state.data.humidity!=null && <div style={{fontSize:10,color:'#9CA3AF',marginTop:4}}>濕度 {Math.round(state.data.humidity)}%</div>}
        </div>
      </div>
    </div>
  );
}

function CurrencyConverter({ exchangeRate, accent, onGoFinance }) {
  // exchangeRate = TWD per VND  (1 VND ≈ 0.001282 TWD)
  const [twd, setTwd] = useState('1000');
  const [vnd, setVnd] = useState(Math.round(1000 / exchangeRate).toString());
  const [last, setLast] = useState('twd');

  const fmt = n => (Number.isFinite(n) ? Math.round(n).toLocaleString() : '');

  const onTwd = v => {
    setLast('twd'); setTwd(v);
    const n = parseFloat(v);
    setVnd(Number.isFinite(n) ? fmt(n / exchangeRate) : '');
  };
  const onVnd = v => {
    setLast('vnd'); setVnd(v);
    const n = parseFloat(v.replace(/,/g,''));
    setTwd(Number.isFinite(n) ? fmt(n * exchangeRate) : '');
  };

  const inputStyle = active => ({
    width:'100%',minWidth:0,padding:'10px 12px',
    border:`1.5px solid ${active?accent:'#E5E7EB'}`,borderRadius:12,
    fontSize:18,fontWeight:700,fontFamily:'Poppins',
    boxSizing:'border-box',outline:'none',textAlign:'right',
    color:'#1C1C1E',background:'#fff'
  });

  return (
    <div style={{margin:'14px 16px 0'}}>
      <div style={{background:'#fff',borderRadius:20,padding:'14px 16px',boxShadow:'0 2px 12px rgba(0,0,0,0.06)'}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:10}}>
          <span style={{fontSize:13,fontWeight:700,color:'#1C1C1E',display:'flex',alignItems:'center',gap:5}}>
            <i className="ri-exchange-line" style={{color:accent}}></i>匯率換算
          </span>
          <span style={{fontSize:11,color:'#9CA3AF'}}>1 TWD = {Math.round(1/exchangeRate).toLocaleString()} VND</span>
        </div>

        <div style={{display:'flex',flexDirection:'column',gap:8}}>
          <div style={{position:'relative'}}>
            <input type="text" inputMode="decimal" value={twd} onChange={e=>onTwd(e.target.value)} style={inputStyle(last==='twd')}/>
            <span style={{position:'absolute',left:14,top:'50%',transform:'translateY(-50%)',fontSize:13,fontWeight:600,color:last==='twd'?accent:'#6B7280',pointerEvents:'none'}}>TWD</span>
          </div>
          <div style={{textAlign:'center',color:'#9CA3AF',fontSize:14,lineHeight:0.8}}>
            <i className="ri-arrow-up-down-line"></i>
          </div>
          <div style={{position:'relative'}}>
            <input type="text" inputMode="decimal" value={vnd} onChange={e=>onVnd(e.target.value)} style={inputStyle(last==='vnd')}/>
            <span style={{position:'absolute',left:14,top:'50%',transform:'translateY(-50%)',fontSize:13,fontWeight:600,color:last==='vnd'?accent:'#6B7280',pointerEvents:'none'}}>VND</span>
          </div>
        </div>

        <button onClick={onGoFinance} style={{
          marginTop:10,width:'100%',background:'#F5F5F7',border:'none',
          borderRadius:12,padding:'8px',fontSize:12,color:'#6B7280',fontFamily:'Poppins',
          cursor:'pointer',display:'flex',alignItems:'center',justifyContent:'center',gap:4
        }}><i className="ri-wallet-3-line"></i>　前往記帳分帳</button>
      </div>
    </div>
  );
}

function HomeScreen({ days, activeDay, expenses, exchangeRate, travelers, setActiveTab, accent, tripInfo }) {
  const today = days[activeDay] || days[0];
  const now = new Date();
  const currentTime = `${String(now.getHours()).padStart(2,'0')}:${String(now.getMinutes()).padStart(2,'0')}`;
  const todayStr = `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2,'0')}-${String(now.getDate()).padStart(2,'0')}`;
  const dayDate = new Date(today.date + 'T12:00:00');
  const weekdays = ['日','一','二','三','四','五','六'];
  const dateStr = `${dayDate.getMonth()+1}月${dayDate.getDate()}日 週${weekdays[dayDate.getDay()]}`;

  const isTripDay  = today.date === todayStr;
  const tripStart  = days[0].date;
  const tripEnd    = days[days.length-1].date;
  const msPerDay   = 86400000;
  const dStart     = (new Date(tripStart+'T00:00:00') - new Date(todayStr+'T00:00:00')) / msPerDay;
  const dEnd       = (new Date(todayStr+'T00:00:00') - new Date(tripEnd+'T00:00:00')) / msPerDay;
  const tripStatus = dStart > 0 ? 'before' : (dEnd > 0 ? 'after' : 'during');

  const nextItem    = isTripDay ? today.items.find(it => it.time > currentTime) : null;
  const currentItem = isTripDay ? [...today.items].reverse().find(it => it.time <= currentTime) : null;
  const firstItem   = today.items[0];

  const TYPE_COLOR = { transport:'#3B82F6', hotel:'#8B5CF6', food:'#F5841E', attraction:'#10B981', shopping:'#EC4899', entertainment:'#F59E0B' };
  const TYPE_ICON  = { transport:'ri-flight-takeoff-line', hotel:'ri-hotel-line', food:'ri-restaurant-2-line', attraction:'ri-ancient-gate-line', shopping:'ri-shopping-bag-2-line', entertainment:'ri-film-line' };

  return (
    <div style={{height:'100%',overflowY:'auto',background:'#F5F5F7',paddingBottom:104,position:'relative'}}>
      {/* Dark header */}
      <div style={{margin:'14px 16px 0',background:'#1C1C1E',padding:'16px 18px 18px',borderRadius:22}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:14}}>
          <div>
            <div style={{color:'#6B7280',fontSize:12,marginBottom:2}}>Xin Chào</div>
            <div style={{color:'#fff',fontSize:21,fontWeight:700,lineHeight:1.2}}>{window.__tripName || '河內 × 下龍灣 × 寧平'}</div>
          </div>
          <div style={{background:accent,borderRadius:20,padding:'5px 14px',color:'#fff',fontWeight:700,fontSize:14,marginTop:4}}>
            Day {activeDay+1}
          </div>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8}}>
          <div style={{background:'rgba(255,255,255,0.08)',borderRadius:14,padding:'10px 12px'}}>
            <div style={{color:'#6B7280',fontSize:10,marginBottom:3}}>日期</div>
            <div style={{color:'#fff',fontWeight:700,fontSize:13,lineHeight:1.2}}>{dateStr}</div>
          </div>
          <div style={{background:'rgba(255,255,255,0.08)',borderRadius:14,padding:'10px 12px'}}>
            <div style={{color:'#6B7280',fontSize:10,marginBottom:3}}>今日行程</div>
            <div style={{color:'#fff',fontWeight:700,fontSize:13,lineHeight:1.2}}>{today.items.length} 項</div>
          </div>
        </div>
      </div>

      {/* Weather (moved above) */}
      <WeatherCard accent={accent}/>

      {/* Next activity / countdown banner */}
      {isTripDay && nextItem && (
        <div style={{margin:'14px 16px 0',background:`linear-gradient(135deg, ${accent}, #F59E0B)`,borderRadius:20,padding:'14px 18px'}}>
          <div style={{color:'rgba(255,255,255,0.75)',fontSize:11,marginBottom:5,display:'flex',alignItems:'center',gap:5}}><i className="ri-alarm-line"></i>即將到來</div>
          <div style={{color:'#fff',fontWeight:700,fontSize:16,marginBottom:6}}>{nextItem.title}</div>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
            <span style={{color:'rgba(255,255,255,0.85)',fontSize:12,display:'flex',alignItems:'center',gap:4}}><i className="ri-map-pin-2-fill"></i>{nextItem.location}</span>
            <span style={{color:'#fff',fontWeight:700,fontSize:15,background:'rgba(0,0,0,0.2)',borderRadius:10,padding:'3px 10px'}}>{nextItem.time}</span>
          </div>
        </div>
      )}
      {isTripDay && !nextItem && currentItem && (
        <div style={{margin:'14px 16px 0',background:'#1C1C1E',borderRadius:20,padding:'14px 18px'}}>
          <div style={{color:accent,fontSize:11,marginBottom:4,display:'flex',alignItems:'center',gap:5}}><i className="ri-focus-3-line"></i>今日最後行程</div>
          <div style={{color:'#fff',fontWeight:600,fontSize:15}}>{currentItem.title}</div>
        </div>
      )}
      {tripStatus==='before' && (
        <div style={{margin:'14px 16px 0',background:`linear-gradient(135deg, ${accent}, #F59E0B)`,borderRadius:20,padding:'14px 18px'}}>
          <div style={{color:'rgba(255,255,255,0.75)',fontSize:11,marginBottom:5,display:'flex',alignItems:'center',gap:5}}><i className="ri-plane-line"></i>距離出發</div>
          <div style={{color:'#fff',fontWeight:700,fontSize:28,lineHeight:1.1,marginBottom:8}}>還有 {Math.ceil(dStart)} 天</div>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',background:'rgba(0,0,0,0.18)',borderRadius:12,padding:'8px 12px'}}>
            <div style={{flex:1,minWidth:0}}>
              <div style={{fontSize:10,color:'rgba(255,255,255,0.6)',marginBottom:1}}>Day 1 首項</div>
              <div style={{fontSize:13,fontWeight:600,color:'#fff',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{firstItem.title}</div>
            </div>
            <span style={{flexShrink:0,color:'#fff',fontWeight:700,fontSize:13,marginLeft:10}}>{firstItem.time}</span>
          </div>
        </div>
      )}
      {tripStatus==='after' && (
        <div style={{margin:'14px 16px 0',background:'#1C1C1E',borderRadius:20,padding:'14px 18px'}}>
          <div style={{color:accent,fontSize:11,marginBottom:4,display:'flex',alignItems:'center',gap:5}}><i className="ri-checkbox-circle-line"></i>旅程結束</div>
          <div style={{color:'#fff',fontWeight:600,fontSize:15}}>再見河內、下次見 🇻🇳</div>
        </div>
      )}

      {/* Today's itinerary — 3 upcoming items only */}
      {(() => {
        const nextIdx = isTripDay && nextItem ? today.items.indexOf(nextItem) : 0;
        const slice   = today.items.slice(nextIdx, nextIdx + 3);
        const moreCnt = today.items.length - (nextIdx + slice.length);
        return (
          <div style={{margin:'14px 16px 0'}}>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:10}}>
              <span style={{fontSize:15,fontWeight:700,color:'#1C1C1E'}}>{isTripDay ? '接下來' : '今日行程'}</span>
              <button onClick={()=>setActiveTab('itinerary')} style={{background:'none',border:'none',color:accent,fontWeight:600,fontSize:13,cursor:'pointer',padding:0}}>查看全部 →</button>
            </div>
            <div style={{background:'#fff',borderRadius:20,padding:'16px 16px 4px',boxShadow:'0 2px 14px rgba(0,0,0,0.06)'}}>
              {slice.map((item,idx)=>{
                const isNext = item===nextItem;
                const isLast = idx===slice.length-1 && moreCnt<=0;
                const color = TYPE_COLOR[item.type]||'#888';
                return (
                  <div key={item.id} style={{display:'flex',gap:12}}>
                    <div style={{display:'flex',flexDirection:'column',alignItems:'center',paddingTop:2,width:12}}>
                      <div style={{width:isNext?12:8,height:isNext?12:8,borderRadius:'50%',background:isNext?accent:color,border:isNext?`2px solid ${accent}40`:'none',flexShrink:0,marginTop:3,transition:'all 0.3s'}}/>
                      {!isLast&&<div style={{width:2,flex:1,background:'#EBEBEB',marginTop:4,minHeight:24}}/>}
                    </div>
                    <div style={{flex:1,paddingBottom:14}}>
                      <div style={{fontSize:11,color:'#9CA3AF',marginBottom:2,display:'flex',alignItems:'center',gap:4}}><i className={TYPE_ICON[item.type]}></i>{item.time}</div>
                      <div style={{fontSize:14,fontWeight:isNext?700:500,color:'#1C1C1E'}}>{item.title}</div>
                      {item.location&&<div style={{fontSize:11,color:'#6B7280',marginTop:1,display:'flex',alignItems:'center',gap:3}}><i className="ri-map-pin-2-fill"></i>{item.location}</div>}
                    </div>
                  </div>
                );
              })}
              {moreCnt > 0 && (
                <button onClick={()=>setActiveTab('itinerary')} style={{
                  width:'100%',background:'none',border:'none',padding:'10px 0 14px',cursor:'pointer',
                  fontSize:12,color:'#9CA3AF',fontFamily:'Poppins',display:'flex',alignItems:'center',justifyContent:'center',gap:4
                }}>還有 {moreCnt} 項　<i className="ri-arrow-right-line"></i></button>
              )}
            </div>
          </div>
        );
      })()}

      {/* Currency converter */}
      <CurrencyConverter exchangeRate={exchangeRate} accent={accent} onGoFinance={()=>setActiveTab('finance')}/>
    </div>
  );
}

window.HomeScreen = HomeScreen;