// Wander — Map (discovery) screen

function MapScreen({ onOpenTour, onTab, dense, brand }) {
  const { TOURS, NEARBY } = window.WANDER_DATA;
  const [filter, setFilter] = React.useState('all');
  const [selected, setSelected] = React.useState(null);
  const sel = NEARBY.find(n => n.id === selected);
  const visible = filter==='all' ? NEARBY : NEARBY.filter(n => n.kind===filter);

  // ── Live location (real GPS, or a simulated marina stroll off-site) ──────────
  const geoApi = window.WanderGeo;
  const [geo, setGeo] = React.useState(() => (geoApi ? geoApi.get() : null));
  const marinaRoute = React.useMemo(
    () => NEARBY.filter(p => p.lat != null).map(p => ({ lat: p.lat, lng: p.lng })), []);
  React.useEffect(() => {
    if (!geoApi) return;
    geoApi.ensure({ route: marinaRoute, loop: true, speed: 16 });
    return geoApi.subscribe(setGeo);
  }, []);
  const project = geo ? geo.project : null;
  const userCoords = geo && geo.coords ? geo.coords : null;
  const userPos = userCoords && project ? project(userCoords.lat, userCoords.lng) : null;
  const located = !!userCoords;

  // ── Pan / zoom: the map follows the user's live position when zoomed in ──────
  const [zoom, setZoom] = React.useState(1);
  const ZMIN = 1, ZMAX = 3.5;
  const setZ = (z) => setZoom(Math.max(ZMIN, Math.min(ZMAX, +z.toFixed(2))));
  // Snap to a comfortable, user-centred zoom the first time we get a fix.
  const didCenter = React.useRef(false);
  React.useEffect(() => {
    if (located && !didCenter.current) { didCenter.current = true; setZoom(1.9); }
  }, [located]);
  const recenter = () => {
    if (geoApi) geoApi.ensure({ route: marinaRoute, loop: true, speed: 16 });
    setZ(Math.max(zoom, 1.9));
  };

  // ── Filtering: applies to BOTH the map pins and the tour list below ──────────
  const matchesTour = (t) => {
    if (filter === 'free') return t.tier === 'free';
    if (filter === 'pro')  return t.tier === 'pro';
    return true; // 'all' and 'current' (Active) show every tour
  };
  let shownTours = TOURS.filter(matchesTour);
  if (located) {
    shownTours = [...shownTours].sort((a, b) =>
      (tourDistance(geo, userCoords, a.id) ?? 1e9) - (tourDistance(geo, userCoords, b.id) ?? 1e9));
  }

  return (
    <div style={{ height:'100%', position:'relative', overflow:'hidden', background:'var(--map-water)' }}>
      <IllustratedMap points={visible} selected={selected} onSelect={setSelected} project={project} userPos={userPos} mode={geo&&geo.mode} zoom={zoom}/>

      <div style={{ position:'absolute', top:56, left:16, right:16, zIndex:50 }}>
        <div style={{ background:'rgba(255,253,246,0.85)', backdropFilter:'blur(20px) saturate(180%)', WebkitBackdropFilter:'blur(20px) saturate(180%)', borderRadius:22, padding:'12px 16px', display:'flex', alignItems:'center', gap:12, boxShadow:'var(--sh-card)' }}>
          <div style={{ flex:1 }}>
            <div style={{ fontSize:11, color:'var(--w-mute)', fontWeight:600, letterSpacing:0.4, textTransform:'uppercase' }}>Now exploring</div>
            <div style={{ fontWeight:700, fontSize:16, display:'flex', alignItems:'center', gap:6 }}>
              <Icon.pin size={16} color={brand}/> Marina Bay, Singapore
            </div>
          </div>
          <button style={{ width:40, height:40, borderRadius:20, border:'none', background:'var(--w-paper)', boxShadow:'inset 0 0 0 1px var(--w-line)', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer' }}>
            <Icon.search size={18}/>
          </button>
        </div>
        <div style={{ display:'flex', gap:8, marginTop:10, overflowX:'auto' }} className="no-scroll">
          {[{id:'all',label:'All'},{id:'free',label:'Free'},{id:'pro',label:'Pro'},{id:'current',label:'Active'}].map(f => (
            <button key={f.id} onClick={()=>setFilter(f.id)} style={{ padding:'8px 14px', borderRadius:999, border:'none', cursor:'pointer', background:filter===f.id?'var(--w-ink)':'rgba(255,253,246,0.85)', backdropFilter:'blur(12px)', color:filter===f.id?'var(--w-yellow)':'var(--w-ink)', fontWeight:700, fontSize:13, fontFamily:'inherit', boxShadow:filter===f.id?'none':'var(--sh-card)', flexShrink:0 }}>{f.label}</button>
          ))}
        </div>
      </div>

      {/* Zoom controls */}
      <div style={{ position:'absolute', right:16, bottom:sel?386:356, zIndex:40, display:'flex', flexDirection:'column', borderRadius:22, overflow:'hidden', background:'var(--w-paper)', boxShadow:'var(--sh-pop)', transition:'bottom .3s' }}>
        <button onClick={()=>setZ(zoom+0.5)} disabled={zoom>=ZMAX} title="Zoom in" style={{ width:48, height:44, border:'none', borderBottom:'1px solid var(--w-line)', background:'none', cursor:zoom>=ZMAX?'default':'pointer', fontSize:22, fontWeight:600, color:zoom>=ZMAX?'var(--w-line)':'var(--w-ink)', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'inherit' }}>+</button>
        <button onClick={()=>setZ(zoom-0.5)} disabled={zoom<=ZMIN} title="Zoom out" style={{ width:48, height:44, border:'none', background:'none', cursor:zoom<=ZMIN?'default':'pointer', fontSize:26, fontWeight:600, color:zoom<=ZMIN?'var(--w-line)':'var(--w-ink)', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'inherit', lineHeight:1 }}>−</button>
      </div>

      <button onClick={recenter} title={located?'Centred on you':'Find my location'} style={{ position:'absolute', right:16, bottom:sel?320:290, zIndex:40, width:48, height:48, borderRadius:24, border:'none', background:located?'var(--w-ink)':'var(--w-paper)', boxShadow:'var(--sh-pop)', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', transition:'bottom .3s, background .3s' }}>
        <Icon.loc size={22} color={located?brand:'var(--w-mute)'}/>
      </button>

      {geo && geo.mode==='sim' && (
        <div style={{ position:'absolute', left:16, bottom:sel?320:290, zIndex:40, background:'rgba(26,24,18,0.78)', backdropFilter:'blur(12px)', color:'#fff', padding:'7px 12px', borderRadius:999, fontSize:11.5, fontWeight:700, display:'flex', alignItems:'center', gap:6 }}>
          <span style={{ fontSize:13 }}>🧭</span> Demo location
        </div>
      )}

      {sel
        ? <SelectedCard point={sel} tours={TOURS} onClose={()=>setSelected(null)} onOpen={onOpenTour} geo={geo} userCoords={userCoords}/>
        : <NearbySheet tours={shownTours} onOpen={onOpenTour} dense={dense} geo={geo} userCoords={userCoords} filter={filter}/>
      }
      <TabBar active="map" onChange={onTab}/>
    </div>
  );
}

function IllustratedMap({ points, selected, onSelect, project, userPos, mode, zoom = 1 }) {
  const pinPos = (p) => (p.lat != null && project) ? project(p.lat, p.lng) : { x: p.x, y: p.y };
  // Pan so the user's position stays centred as you zoom in, clamped so the
  // map art always fills the viewport (no empty gaps at the edges).
  const cx = userPos ? userPos.x : 50;
  const cy = userPos ? userPos.y : 50;
  const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
  const span = (zoom - 1) * 100;
  const tx = clamp(50 - cx * zoom, -span, 0);
  const ty = clamp(50 - cy * zoom, -span, 0);
  return (
    <div style={{ position:'absolute', inset:0, transformOrigin:'0 0', transform:`translate(${tx}%, ${ty}%) scale(${zoom})`, transition:'transform .4s ease-out' }}>
      <div style={{ position:'absolute', inset:0, background:'linear-gradient(180deg,#C8E5EF 0%,#B8DDEA 100%)' }}/>
      <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{ position:'absolute', inset:0, width:'100%', height:'100%' }}>
        <defs><pattern id="dots" width="3" height="3" patternUnits="userSpaceOnUse"><circle cx="1.5" cy="1.5" r="0.3" fill="rgba(255,255,255,0.45)"/></pattern></defs>
        <rect width="100" height="100" fill="url(#dots)"/>
        <path d="M 0,0 L 0,75 Q 8,72 14,68 Q 22,64 28,55 Q 34,48 38,42 Q 42,38 40,30 Q 36,22 30,18 Q 22,12 18,8 L 18,0 Z" fill="var(--map-land)"/>
        <path d="M 0,100 L 100,100 L 100,82 Q 90,80 78,78 Q 65,75 55,78 Q 45,82 30,82 Q 18,84 8,88 Q 2,92 0,95 Z" fill="var(--map-land)"/>
        <path d="M 100,28 Q 90,30 80,38 Q 72,46 70,55 Q 72,62 80,65 Q 92,65 100,62 L 100,28 Z" fill="var(--map-land)"/>
        <path d="M 70,55 Q 80,55 88,60 Q 92,68 88,75 Q 80,72 72,68 Q 68,62 70,55 Z" fill="var(--map-park)"/>
        <path d="M 0,72 Q 20,70 35,55 Q 48,40 60,50 Q 75,60 85,55" stroke="var(--map-road)" strokeWidth="1.6" fill="none" strokeLinecap="round"/>
        <path d="M 18,0 Q 25,15 40,28 Q 55,40 65,55" stroke="var(--map-road)" strokeWidth="1.2" fill="none" strokeLinecap="round" strokeOpacity="0.85"/>
        <path d="M 100,40 Q 88,50 78,58 Q 68,65 60,80" stroke="var(--map-road)" strokeWidth="1.2" fill="none" strokeLinecap="round" strokeOpacity="0.85"/>
        <path d="M 38,58 Q 48,52 58,55" stroke="#fff" strokeWidth="0.8" fill="none" strokeDasharray="1.5 1"/>
        <path d="M 42,55 Q 46,52 52,46 Q 56,44 58,42 Q 62,46 68,55" stroke="#FFC93C" strokeWidth="1" fill="none" strokeDasharray="2 1.5" strokeLinecap="round"/>
      </svg>
      <div style={{ position:'absolute', left:'15%', top:'40%', fontFamily:'var(--w-display)', fontSize:11, color:'rgba(74,69,56,0.6)', fontWeight:600, fontStyle:'italic' }}>Downtown Core</div>
      <div style={{ position:'absolute', left:'70%', top:'85%', fontFamily:'var(--w-display)', fontSize:11, color:'rgba(74,69,56,0.6)', fontWeight:600, fontStyle:'italic' }}>Marina South</div>
      <div style={{ position:'absolute', left:'40%', top:'20%', fontFamily:'var(--w-display)', fontSize:10, color:'rgba(74,69,56,0.45)', fontWeight:500, fontStyle:'italic' }}>Singapore Strait</div>
      {/* Live "you are here" dot — projected from real or simulated coordinates */}
      {userPos && (
        <div style={{ position:'absolute', left:userPos.x+'%', top:userPos.y+'%', transform:`translate(-50%,-50%) scale(${1/zoom})`, zIndex:7, transition:'left .25s linear, top .25s linear' }}>
          <div style={{ position:'absolute', inset:-16, borderRadius:'50%', background:'rgba(79,183,232,0.3)', animation:'wPulse 2.4s ease-in-out infinite' }}/>
          <div style={{ width:18, height:18, borderRadius:'50%', background:mode==='sim'?'#FFC93C':'#4FB7E8', boxShadow:`0 0 0 3px #fff,0 4px 10px ${mode==='sim'?'rgba(255,201,60,0.55)':'rgba(79,183,232,0.5)'}` }}/>
        </div>
      )}
      {points.map(p => {
        const pos = pinPos(p);
        return (
          <button key={p.id} onClick={()=>onSelect(p.id)} style={{ position:'absolute', left:pos.x+'%', top:pos.y+'%', transform:`translate(-50%,-100%) scale(${(selected===p.id?1.15:1)/zoom})`, transformOrigin:'50% 100%', background:'none', border:'none', cursor:'pointer', padding:0, transition:'transform .2s', zIndex:6 }}>
            <PinShape kind={p.kind} emoji={p.emoji}/>
          </button>
        );
      })}
    </div>
  );
}

function PinShape({ kind, emoji }) {
  const bg   = kind==='free'?'var(--w-mint)':kind==='pro'?'var(--w-ink)':kind==='current'?'var(--w-coral)':'var(--w-paper)';
  const ring = kind==='current'?'0 0 0 3px rgba(255,107,90,0.3),0 6px 14px rgba(0,0,0,0.18)':'0 6px 14px rgba(0,0,0,0.18)';
  return (
    <div style={{ position:'relative' }}>
      <div style={{ width:42, height:42, borderRadius:'50% 50% 50% 4px', transform:'rotate(-45deg)', background:bg, boxShadow:ring, display:'flex', alignItems:'center', justifyContent:'center' }}>
        <span style={{ transform:'rotate(45deg)', fontSize:18 }}>{emoji}</span>
      </div>
      {kind==='current' && <div style={{ position:'absolute', top:-6, right:-8, width:14, height:14, borderRadius:'50%', background:'var(--w-yellow)', boxShadow:'0 0 0 2px #fff', animation:'wPulse 1.8s ease-in-out infinite' }}/>}
    </div>
  );
}

// Distance (m) from the user to a tour, measured to its first stop.
function tourDistance(geo, userCoords, tourId) {
  if (!geo || !userCoords) return null;
  const stops = window.WANDER_DATA.stopsForTour(tourId) || [];
  const first = stops.find(s => s.lat != null);
  if (!first) return null;
  return geo.distance(userCoords, { lat: first.lat, lng: first.lng });
}

function NearbySheet({ tours, onOpen, dense, geo, userCoords, filter }) {
  const located = !!userCoords;
  const heading = { all:'Nearby tours', free:'Free tours', pro:'Pro tours', current:'Active near you' }[filter] || 'Nearby tours';
  return (
    <div style={{ position:'absolute', bottom:100, left:0, right:0, zIndex:30, paddingBottom:8 }}>
      <div style={{ padding:'0 20px 10px', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
        <div style={{ background:'rgba(26,24,18,0.78)', backdropFilter:'blur(14px)', WebkitBackdropFilter:'blur(14px)', padding:'8px 14px', borderRadius:999, display:'flex', alignItems:'baseline', gap:8 }}>
          <span style={{ fontSize:10, color:'var(--w-yellow)', fontWeight:700, letterSpacing:0.5, textTransform:'uppercase' }}>{located?'From you':(filter&&filter!=='all'?filter:'Nearby')}</span>
          <span style={{ fontSize:13, color:'#fff', fontWeight:700 }}>{heading}</span>
        </div>
        <button style={{ background:'rgba(255,253,246,0.92)', border:'none', padding:'8px 14px', borderRadius:999, fontSize:12, fontWeight:700, color:'var(--w-ink)', fontFamily:'inherit', cursor:'pointer' }}>See all</button>
      </div>
      {tours.length === 0 && (
        <div style={{ margin:'0 20px', padding:'16px 18px', borderRadius:18, background:'rgba(255,253,246,0.92)', fontSize:13, color:'var(--w-slate)', fontWeight:600 }}>
          No {filter} tours in this area.
        </div>
      )}
      <div style={{ display:'flex', gap:12, overflowX:'auto', padding:'0 20px 4px' }} className="no-scroll">
        {tours.map(t => {
          const d = tourDistance(geo, userCoords, t.id);
          return (
          <button key={t.id} onClick={()=>onOpen(t.id)} style={{ width:dense?200:230, flexShrink:0, background:'var(--w-paper)', borderRadius:22, border:'none', padding:0, boxShadow:'var(--sh-pop)', cursor:'pointer', textAlign:'left', overflow:'hidden', fontFamily:'inherit' }}>
            <TourArt tour={t} h={dense?96:110} rounded={0}/>
            <div style={{ padding:dense?'10px 12px 12px':'12px 14px 14px' }}>
              <div style={{ fontWeight:700, fontSize:dense?14:15, lineHeight:1.2, color:'var(--w-ink)' }}>{t.title}</div>
              <div style={{ display:'flex', gap:10, marginTop:6, fontSize:12, color:'var(--w-mute)' }}>
                {d!=null
                  ? <span style={{ color:'var(--w-ink)', fontWeight:700 }}>📍 {geo.formatDistance(d)} · {geo.walkMins(d)} min</span>
                  : <span>📍 {t.stops} stops</span>}
                <span>⏱ {t.duration}</span>
              </div>
            </div>
          </button>
          );
        })}
      </div>
    </div>
  );
}

function SelectedCard({ point, tours, onClose, onOpen, geo, userCoords }) {
  const matchTour = tours[0];
  const d = (geo && userCoords && point.lat != null)
    ? geo.distance(userCoords, { lat: point.lat, lng: point.lng }) : null;
  const distLabel = d != null
    ? `${geo.formatDistance(d)} away · ${geo.walkMins(d)} min walk`
    : '180 m away · 3 min walk';
  return (
    <div style={{ position:'absolute', bottom:100, left:16, right:16, zIndex:40, background:'var(--w-paper)', borderRadius:24, boxShadow:'var(--sh-pop)', padding:16, animation:'wFadeUp .35s ease-out both' }}>
      <div style={{ display:'flex', gap:14 }}>
        <div style={{ width:64, height:64, borderRadius:18, background:'linear-gradient(135deg,#FFC93C,#FF8A4C)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:30, flexShrink:0 }}>{point.emoji}</div>
        <div style={{ flex:1 }}>
          <div style={{ display:'flex', justifyContent:'space-between' }}>
            <div className="t-display" style={{ fontSize:20, fontWeight:600 }}>{point.name}</div>
            <button onClick={onClose} style={{ background:'none', border:'none', cursor:'pointer', padding:4, marginRight:-4, marginTop:-4 }}><Icon.close size={18} color="var(--w-mute)"/></button>
          </div>
          <div style={{ fontSize:13, color:'var(--w-mute)', marginTop:2 }}>{distLabel}</div>
          <Rating value={4.8} reviews={284} size={11}/>
        </div>
      </div>
      <div style={{ display:'flex', gap:8, marginTop:14 }}>
        <button onClick={()=>onOpen(matchTour.id)} className="w-btn" style={{ flex:1, height:46 }}><Icon.play size={16}/> Start tour</button>
        <button className="w-btn w-btn--ghost" style={{ width:46, height:46, padding:0 }}><Icon.heart size={18}/></button>
      </div>
    </div>
  );
}

Object.assign(window, { MapScreen });