const { useState, useEffect, useRef } = React;

const DAY_VIEW = [
  { lat:21.035, lng:105.848, zoom:13, theme:'河內市區',     icon:'ri-map-2-line' },     // Day 1
  { lat:20.850, lng:107.100, zoom:11, theme:'下龍灣',       icon:'ri-ship-line' },      // Day 2
  { lat:20.550, lng:106.500, zoom:9,  theme:'下龍灣 → 寧平', icon:'ri-route-line' },     // Day 3
  { lat:20.250, lng:105.920, zoom:12, theme:'寧平景點',     icon:'ri-mountain-line' },  // Day 4
  { lat:21.030, lng:105.850, zoom:14, theme:'河內收尾',     icon:'ri-map-2-line' },     // Day 5
];

const TC = { transport:'#3B82F6', hotel:'#8B5CF6', food:'#F5841E', attraction:'#10B981', shopping:'#EC4899', entertainment:'#F59E0B' };
const hasCoords = (lat, lng) => Number.isFinite(Number(lat)) && Number.isFinite(Number(lng));

// Offset duplicate coordinates so overlapping markers stay visible
function offsetDuplicates(items) {
  const seen = new Map();
  return items.map(it => {
    const lat = Number(it.lat);
    const lng = Number(it.lng);
    const key = `${lat.toFixed(4)},${lng.toFixed(4)}`;
    const n = seen.get(key) || 0;
    seen.set(key, n + 1);
    if (n === 0) return { ...it, _lat: lat, _lng: lng };
    const angle = n * 1.2;
    const r = 0.00022 * Math.ceil(n / 6) * (1 + (n % 6) * 0.15);
    return { ...it, _lat: lat + Math.cos(angle) * r, _lng: lng + Math.sin(angle) * r };
  });
}

function MapScreen({ days, activeDay, setActiveDay, accent }) {
  const mapRef  = useRef(null);
  const mapInst = useRef(null);
  const [selected, setSelected] = useState(null);

  const today = days[activeDay];

  // Stable memo: only recompute when today.items reference changes
  const offsetItems = React.useMemo(
    () => offsetDuplicates(today.items.filter(it => hasCoords(it.lat, it.lng))),
    [today.items]
  );

  useEffect(() => {
    if (!mapRef.current) return;
    const cfg = DAY_VIEW[activeDay] || DAY_VIEW[0];

    const map = L.map(mapRef.current, { center:[cfg.lat,cfg.lng], zoom:cfg.zoom, zoomControl:false });
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom:19 }).addTo(map);
    L.control.zoom({ position:'bottomright' }).addTo(map);

    if (offsetItems.length > 1) {
      L.polyline(offsetItems.map(it=>[it._lat,it._lng]), {
        color: accent||'#F5841E', weight:2.5, opacity:0.65, dashArray:'10,8'
      }).addTo(map);
    }

    offsetItems.forEach((item, idx) => {
      const color = TC[item.type]||'#888';
      const icon = L.divIcon({
        html: `<div style="background:${color};color:#fff;width:30px;height:30px;border-radius:50%;border:3px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;font-family:Poppins;">${idx+1}</div>`,
        iconSize:[30,30], iconAnchor:[15,30], className:''
      });
      const marker = L.marker([item._lat,item._lng],{icon}).addTo(map);
      marker.on('click', () => { setSelected(item); map.flyTo([item._lat,item._lng],16,{duration:0.8}); });
    });

    // Invalidate size once layout settles (avoids blank tile area)
    requestAnimationFrame(() => map.invalidateSize());
    const t = setTimeout(() => map.invalidateSize(), 250);

    mapInst.current = map;
    return () => { clearTimeout(t); map.remove(); mapInst.current=null; };
  }, [activeDay, offsetItems]);

  const flyTo = item => {
    setSelected(item);
    mapInst.current?.flyTo([item._lat||item.lat,item._lng||item.lng],16,{duration:0.8});
  };

  const openNav = item => {
    const lat = item._lat || item.lat;
    const lng = item._lng || item.lng;
    const url = `https://www.google.com/maps/dir/?api=1&destination=${lat},${lng}&travelmode=driving`;
    window.open(url, '_blank', 'noopener');
  };

  return (
    <div style={{height:'100%',position:'relative',display:'flex',flexDirection:'column'}}>
      {/* Header (natural height in flex flow) */}
      <div style={{flexShrink:0,background:'#fff',padding:'12px 16px 0',borderBottom:'1px solid rgba(0,0,0,0.06)',zIndex:5}}>
        <div style={{marginBottom:10}}>
          <div style={{fontSize:11,color:'#9CA3AF'}}>{today.label} 路線</div>
          <div style={{fontSize:16,fontWeight:700,color:'#1C1C1E',display:'flex',alignItems:'center',gap:6}}><i className={(DAY_VIEW[activeDay]||DAY_VIEW[0]).icon}></i>{' '+(DAY_VIEW[activeDay]||DAY_VIEW[0]).theme}</div>
        </div>
        {/* Day tabs */}
        <div style={{display:'flex',gap:6,overflowX:'auto',paddingBottom:10}}>
          {days.map((d,idx)=>(
            <button key={d.id} onClick={()=>{setActiveDay(idx);setSelected(null);}} style={{
              flexShrink:0,background:idx===activeDay?'#1C1C1E':'#F3F4F6',
              color:idx===activeDay?'#fff':'#6B7280',border:'none',borderRadius:12,
              padding:'4px 12px',cursor:'pointer',fontSize:12,fontWeight:600,fontFamily:'Poppins'
            }}>Day {idx+1}</button>
          ))}
        </div>
      </div>

      {/* Map fills remaining space */}
      <div ref={mapRef} style={{flex:1,minHeight:0}}/>

      {/* Bottom info card */}
      {selected ? (
        <div style={{position:'absolute',bottom:'calc(max(10px, env(safe-area-inset-bottom)) + 80px)',left:12,right:12,zIndex:400,background:'#fff',borderRadius:22,padding:'16px 18px',boxShadow:'0 8px 32px rgba(0,0,0,0.15)'}}>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:8}}>
            <div style={{flex:1}}>
              <div style={{fontSize:11,color:TC[selected.type]||accent,fontWeight:600,marginBottom:3}}>{selected.time}</div>
              <div style={{fontSize:16,fontWeight:700,color:'#1C1C1E'}}>{selected.title}</div>
              <div style={{fontSize:13,color:'#6B7280',marginTop:4,display:'flex',alignItems:'center',gap:4}}><i className="ri-map-pin-2-fill"></i>{selected.location}</div>
              {selected.note&&<div style={{fontSize:12,color:'#9CA3AF',marginTop:4}}>{selected.note}</div>}
            </div>
            <button onClick={()=>setSelected(null)} style={{background:'#F3F4F6',border:'none',borderRadius:10,width:32,height:32,cursor:'pointer',fontSize:14,flexShrink:0,display:'flex',alignItems:'center',justifyContent:'center'}}><i className="ri-close-line"></i></button>
          </div>
          <button onClick={()=>openNav(selected)} style={{
            width:'100%',background:accent,color:'#fff',border:'none',borderRadius:14,
            padding:'12px',fontSize:14,fontWeight:700,cursor:'pointer',marginTop:6,fontFamily:'Poppins',
            display:'flex',alignItems:'center',justifyContent:'center',gap:6
          }}>
            <i className="ri-navigation-fill"></i> 開始導航
          </button>
        </div>
      ) : (
        <div style={{position:'absolute',bottom:'calc(max(10px, env(safe-area-inset-bottom)) + 80px)',left:12,right:12,zIndex:400,background:'rgba(255,255,255,0.96)',backdropFilter:'blur(10px)',borderRadius:20,padding:'12px 14px',boxShadow:'0 4px 16px rgba(0,0,0,0.1)'}}>
          <div style={{fontSize:12,color:'#6B7280',marginBottom:8}}>今日 {offsetItems.length} 個地點 · 點擊標記查看</div>
          <div style={{display:'flex',gap:8,overflowX:'auto',paddingBottom:2}}>
            {offsetItems.map((item,idx)=>{
              const color = TC[item.type]||'#888';
              return (
                <button key={item.id} onClick={()=>flyTo(item)} style={{
                  flexShrink:0,background:color+'12',border:`1.5px solid ${color}25`,
                  borderRadius:12,padding:'6px 12px',cursor:'pointer',textAlign:'left'
                }}>
                  <div style={{fontSize:10,color,fontWeight:700}}>{idx+1} · {item.time}</div>
                  <div style={{fontSize:12,color:'#1C1C1E',fontWeight:500,maxWidth:90,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{item.title}</div>
                </button>
              );
            })}
            {offsetItems.length===0&&<div style={{fontSize:12,color:'#9CA3AF'}}>此行程無地圖座標</div>}
          </div>
        </div>
      )}
    </div>
  );
}

window.MapScreen = MapScreen;