// HimLocal — Web v2.1 Explore (inline detail + map co-existing, add-to-itin popover, price chips)

const { useState: useStateWEx, useMemo: useMemoWEx, useRef: useRefWEx, useEffect: useEffectWEx } = React;
const W_POI_COLORS = { trail:'#70B52F', stay:'#305CDE', temple:'#C76A3A', cafe:'#E5A93B' };

function WebMapCanvas({ pois, pickedId, onSelect, tripContext, currentStopId, polylineStops, kinds, showPrices = true }) {
  const nights = useMemoWEx(() => {
    try {
      const s = new Date(tripContext.checkIn + 'T00:00:00');
      const e = new Date(tripContext.checkOut + 'T00:00:00');
      return Math.max(1, Math.round((e - s) / 86400000));
    } catch { return 2; }
  }, [tripContext.checkIn, tripContext.checkOut]);

  const poiById = useMemoWEx(() => Object.fromEntries(pois.map(p => [p.id, p])), [pois]);
  const polyPoints = (polylineStops || []).map(id => poiById[id]).filter(Boolean);
  const visiblePois = useMemoWEx(() => kinds ? pois.filter(p => kinds.includes(p.kind)) : pois, [pois, kinds]);

  return (
    <div className="w2-map">
      <svg className="w2-map__svg" viewBox="0 0 100 100" preserveAspectRatio="none">
        <defs>
          <linearGradient id="wterr" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%"  stopColor="#D2ECF9"/>
            <stop offset="45%" stopColor="#EBE8D5"/>
            <stop offset="100%" stopColor="#D4E8C4"/>
          </linearGradient>
        </defs>
        <rect width="100" height="100" fill="url(#wterr)"/>
        {[10,20,32,44,55,67,79,89].map((y, i) => (
          <path key={i} d={`M 0 ${y} Q ${15 + i*4} ${y - 2} 50 ${y + 1} T 100 ${y - 1}`}
            stroke="rgba(31,59,87,.08)" strokeWidth=".18" fill="none"/>
        ))}
        <path d="M 14 48 C 20 41 26 37 28 38 S 38 28 44 26 S 54 25 58 30 S 68 50 73 52"
          stroke="#70B52F" strokeWidth=".6" fill="none" strokeLinecap="round"
          strokeDasharray=".5 .65" opacity=".82"/>
        {polyPoints.length > 1 && (
          <path d={polyPoints.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' ')}
            stroke="#2C7C04" strokeWidth=".55" fill="none" strokeLinecap="round" strokeLinejoin="round" opacity=".85"/>
        )}
      </svg>
      {visiblePois.map(p => {
        const isStay = p.kind === 'stay' && p.price;
        const lbl = (isStay && showPrices) ? `₹${p.price.toLocaleString()}/n` : p.name;
        const isCurrent = currentStopId === p.id;
        return (
          <button key={p.id}
            className={`w2-map__pin ${pickedId === p.id ? 'is-on' : ''} ${isCurrent ? 'is-current' : ''} ${(isStay && showPrices) ? 'w2-map__pin--stay' : ''}`}
            style={{ left:`${p.x}%`, top:`${p.y}%` }}
            onClick={() => onSelect(p.id)}>
            <div className={`w2-map__pin-lbl ${(isStay && showPrices) ? 'w2-map__pin-lbl--price' : ''}`} style={{ borderColor:W_POI_COLORS[p.kind] }}>
              {lbl}
            </div>
            <div className="w2-map__pin-dot" style={{ background:W_POI_COLORS[p.kind] }}/>
          </button>
        );
      })}
      <div className="w2-map__tools">
        <button className="w2-map__tool">+</button>
        <button className="w2-map__tool">−</button>
        <button className="w2-map__tool" style={{fontSize:11,fontWeight:600}}>3D</button>
      </div>
      <div className="w2-map__attr">© HimLocal · OSM contributors · Showing rates for {nights} {nights === 1 ? 'night' : 'nights'}</div>
    </div>
  );
}
window.WebMapCanvas = WebMapCanvas;

// ─── Explore list (when detail is closed) ────────────────
function WebExploreList({ pois, pickedId, onSelect }) {
  const [filter, setFilter] = useStateWEx('all');
  const [query, setQuery] = useStateWEx('');
  const filters = [
    { id:'all', label:'All' },
    { id:'trail', label:'Trails', dot:W_POI_COLORS.trail },
    { id:'stay', label:'Stays', dot:W_POI_COLORS.stay },
    { id:'temple', label:'Temples', dot:W_POI_COLORS.temple },
    { id:'cafe', label:'Cafés', dot:W_POI_COLORS.cafe },
  ];
  const list = useMemoWEx(() => {
    let l = pois;
    if (filter !== 'all') l = l.filter(p => p.kind === filter);
    if (query.trim()) {
      const q = query.toLowerCase();
      l = l.filter(p => p.name.toLowerCase().includes(q) || p.region.toLowerCase().includes(q));
    }
    return l;
  }, [pois, filter, query]);
  return (
    <>
      <div className="w2-ex-search">
        <window.WIcon name="search" size={15}/>
        <input placeholder="Search Triund, Tabo, Hampta…" value={query} onChange={e => setQuery(e.target.value)}/>
      </div>
      <div className="w2-ex-filters">
        {filters.map(f => (
          <button key={f.id} className={`w2-ex-filter ${filter === f.id ? 'is-on' : ''}`} onClick={() => setFilter(f.id)}>
            {f.dot && <span className="w2-ex-filter__dot" style={{ background:f.dot }}/>}
            {f.label}
          </button>
        ))}
      </div>
      <div className="w2-ex-list">
        {list.map(p => (
          <button key={p.id} className={`w2-poi-card ${pickedId === p.id ? 'is-on' : ''}`} onClick={() => onSelect(p.id)}>
            <div className="w2-poi-card__img" style={{ backgroundImage:`url(${p.img})` }}/>
            <div className="w2-poi-card__body">
              <div className="w2-poi-card__kind">{p.kind} · {p.region}</div>
              <div className="w2-poi-card__name">{p.name}</div>
              <div className="w2-poi-card__short">{p.short}</div>
              <div className="w2-poi-card__meta">{p.alt.toLocaleString()} m{p.price ? ` · ₹${p.price.toLocaleString()}/n` : ''}</div>
            </div>
          </button>
        ))}
      </div>
    </>
  );
}
window.WebExploreList = WebExploreList;

// ─── Itinerary panel (when itinerary tab active) ────────
// Reorder is full-itinerary aware: ▲/▼ traverse day boundaries, and a
// "Move →" menu lets the user jump a stop to any day.
function WebItineraryPanel({ data, days, byId, onOpenStop, onBook, onReorder, onRemove, onMoveToDay, title, dateRange }) {
  const [moveMenu, setMoveMenu] = useStateWEx(null);  // { di, si }
  return (
    <div className="w2-itin">
      <div className="hla-creator-banner" style={{marginBottom:18}}>
        <div className="hla-creator-banner__avatar">ST</div>
        <div className="hla-creator-banner__body">
          <div className="hla-creator-banner__lbl">Hosted by · Top creator</div>
          <div className="hla-creator-banner__name">Sourabh Thakur</div>
        </div>
        <button className="hla-creator-banner__cta">Message →</button>
      </div>
      <div style={{marginBottom:14}}>
        <div className="hla-eyebrow">Editing itinerary</div>
        <div className="w2-itin__title">{title}</div>
        <div className="w2-itin__meta">{dateRange} · {days.reduce((s, d) => s + d.stops.length, 0)} stops</div>
      </div>
      <div style={{marginBottom:14,padding:'10px 12px',background:'var(--grad-soft-lavender)',border:'1px solid rgba(123,111,203,.18)',borderRadius:8,font:'500 12px var(--font-body)',color:'var(--ink-on-soft-lavender)',display:'flex',alignItems:'center',gap:8}}>
          <span style={{color:'var(--lavender-700)',fontSize:14}}>⌃</span>
          Click any stop for details. <strong>▲ ▼</strong> reorder &amp; cross day-boundaries, <strong>Move →</strong> jumps a stop to any day. Fixed stays stay locked.
      </div>
      {days.map((d, di) => {
        const hasPrev = di > 0;
        const hasNext = di < days.length - 1;
        return (
          <div key={di} style={{position:'relative',paddingLeft:22,marginBottom:18}}>
            {di < days.length - 1 && <div style={{position:'absolute',left:5,top:14,bottom:-14,borderLeft:'1.5px dashed var(--border-2)',pointerEvents:'none'}}/>}
            <div style={{display:'flex',alignItems:'baseline',gap:8,marginBottom:10,marginLeft:-22,paddingLeft:22,position:'relative'}}>
              <div style={{position:'absolute',left:0,top:4,width:12,height:12,borderRadius:'50%',background:'var(--bg-paper)',border:'2px solid var(--slate-700)'}}/>
              <div style={{font:'600 10px var(--font-mono)',letterSpacing:'.14em',textTransform:'uppercase',color:'var(--fg-3)'}}>{d.date}</div>
              <div style={{fontFamily:'var(--font-display)',fontSize:17,fontWeight:500,fontStyle:'italic',color:'var(--slate-700)'}}>{d.label}</div>
            </div>
            {d.stops.length === 0 && (
              <div style={{padding:'14px 16px',background:'var(--bone-100)',border:'1px dashed var(--border-2)',borderRadius:8,font:'500 12.5px var(--font-body)',color:'var(--fg-3)',textAlign:'center',marginBottom:8}}>
                No stops yet. Add from the map.
              </div>
            )}
            {d.stops.map((s, si) => {
              const poi = byId[s.id];
              if (!poi) return null;
              const isFixed = s.state === 'fixed';
              const isCafe = poi.kind === 'cafe';
              const lastIdx = d.stops.length - 1;
              // ▲ allowed when not at top, OR if there's a previous day
              const canUp = !isFixed && (si > 0 || hasPrev);
              const canDown = !isFixed && (si < lastIdx || hasNext);
              return (
                <div key={`${di}-${si}-${s.id}`}
                  className={`w2-stop ${isFixed ? 'w2-stop--fixed' : isCafe ? 'w2-stop--cafe' : 'w2-stop--fluid'}`}
                  onClick={() => onOpenStop(s.id)}>
                  <div className="w2-stop__handle" onClick={e => e.stopPropagation()} aria-label="Reorder">
                    <button className="w2-stop__hbtn" disabled={!canUp} aria-label="Move up / previous day"
                      onClick={e => { e.stopPropagation(); onReorder && onReorder(di, si, -1); }}>▲</button>
                    <button className="w2-stop__hbtn" disabled={!canDown} aria-label="Move down / next day"
                      onClick={e => { e.stopPropagation(); onReorder && onReorder(di, si, +1); }}>▼</button>
                  </div>
                  <div className="w2-stop__img" style={{ backgroundImage:`url(${poi.img})` }}/>
                  <div className="w2-stop__body">
                    <div className="w2-stop__name">{poi.name}</div>
                    <div className="w2-stop__meta">{poi.kind.toUpperCase()} · {poi.alt.toLocaleString()} m{s.ref ? ` · ${s.ref}` : ''}</div>
                    {isFixed && <span className="w2-stop__badge">Confirmed · {s.source || 'Direct'}</span>}
                    {isCafe && (
                      <button className="hla-cafelink" onClick={e => { e.stopPropagation(); onOpenStop(s.id); }}>
                        View menu &amp; info ↗<span className="hla-cafelink__ext"> · External</span>
                      </button>
                    )}
                    {s.conflict && (
                      <div className="hla-conflict" style={{marginTop:7}}>
                        <span className="hla-conflict__i">i</span>
                        <div style={{flex:1,fontSize:11.5,lineHeight:1.4}}>Stay starts 11 May — itinerary opens 10 May.</div>
                      </div>
                    )}
                  </div>
                  <div className="w2-stop__tools" onClick={e => e.stopPropagation()}>
                    {!isFixed && !isCafe && (
                      <button className="w2-stop__cta" onClick={e => { e.stopPropagation(); onBook(s.id); }}>Book</button>
                    )}
                    {!isFixed && days.length > 1 && (
                      <button className="w2-stop__move" title="Move to a different day" aria-label="Move to another day"
                        onClick={e => { e.stopPropagation(); setMoveMenu({ di, si }); }}>Move →</button>
                    )}
                    {!isFixed && (
                      <button className="w2-stop__remove" title="Remove from itinerary" aria-label="Remove from itinerary"
                        onClick={e => { e.stopPropagation(); onRemove && onRemove(di, si); }}>×</button>
                    )}
                  </div>
                  {moveMenu && moveMenu.di === di && moveMenu.si === si && (
                    <div className="w2-stop__movemenu" onClick={e => e.stopPropagation()}>
                      <div className="w2-stop__movemenu-h">Move to which day?</div>
                      {days.map((dd, ddi) => (
                        <button key={ddi} disabled={ddi === di}
                          className="w2-stop__movemenu-row"
                          onClick={() => { onMoveToDay && onMoveToDay(di, si, ddi); setMoveMenu(null); }}>
                          <span className="w2-stop__movemenu-d">{dd.date}</span>
                          <span className="w2-stop__movemenu-l">{dd.label}</span>
                          <span className="w2-stop__movemenu-c">{dd.stops.length} stops</span>
                        </button>
                      ))}
                      <button className="w2-stop__movemenu-cancel" onClick={() => setMoveMenu(null)}>Cancel</button>
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        );
      })}
    </div>
  );
}
window.WebItineraryPanel = WebItineraryPanel;

// ─── Inline detail panel (replaces side-sheet, lives in left column) ──
function WebInlineDetail({ poi, bookings, myItineraries, defaultItinId, onClose, onAdded, onBook, onCafeMenu, onCreateItinerary }) {
  const [popOpen, setPopOpen] = useStateWEx(false);
  const [pickItin, setPickItin] = useStateWEx(defaultItinId || null);

  if (!poi) return null;
  const isCafe = poi.kind === 'cafe';
  const isTrail = poi.kind === 'trail';

  const closePop = () => { setPopOpen(false); setPickItin(defaultItinId || null); };

  const onAddToItin = (itinId, dayIndex) => {
    onAdded(itinId, dayIndex, poi.id);
    closePop();
  };

  return (
    <div className="w2-inline-detail">
      <div className="w2-inline-detail__top">
        <button className="w2-inline-detail__back" onClick={onClose} aria-label="Back to list">←</button>
        <div className="w2-inline-detail__crumb">Explore / <strong>{poi.region}</strong> / {poi.name}</div>
        <button onClick={onClose} style={{background:'transparent',border:0,color:'var(--fg-3)',font:'600 10px var(--font-body)',letterSpacing:'.16em',textTransform:'uppercase',cursor:'pointer'}}>Close ×</button>
      </div>
      <div className="w2-inline-detail__hero" style={{ backgroundImage:`url(${poi.img})` }}>
        <div className="w2-inline-detail__hero-scrim"/>
        <div className="w2-inline-detail__hero-copy">
          <div className="w2-inline-detail__hero-kind">{poi.kind} · {poi.region}</div>
          <div className="w2-inline-detail__hero-name">{poi.name}</div>
        </div>
      </div>

      <div className="w2-inline-detail__body">
        <div className="w2-detail__lede">{poi.short}</div>
        <div className="w2-detail__long">{poi.long}</div>

        <div className="w2-detail__stats">
          <div>
            <div className="w2-detail__stat-l">Altitude</div>
            <div className="w2-detail__stat-v" style={{fontFamily:'var(--font-mono)',fontSize:15}}>{poi.alt.toLocaleString()} m</div>
          </div>
          {isTrail ? (
            <>
              <div><div className="w2-detail__stat-l">Distance</div><div className="w2-detail__stat-v" style={{fontFamily:'var(--font-mono)',fontSize:15}}>26 km</div></div>
              <div><div className="w2-detail__stat-l">Grade</div><div className="w2-detail__stat-v">III</div></div>
              <div><div className="w2-detail__stat-l">Best season</div><div className="w2-detail__stat-v" style={{fontSize:15}}>Jun — Oct</div></div>
            </>
          ) : (
            <>
              <div><div className="w2-detail__stat-l">Season</div><div className="w2-detail__stat-v" style={{fontSize:15}}>May — Oct</div></div>
              <div><div className="w2-detail__stat-l">Coords</div><div className="w2-detail__stat-v" style={{fontFamily:'var(--font-mono)',fontSize:13,letterSpacing:'.02em'}}>{poi.lat.toFixed(2)}° N</div></div>
              <div><div className="w2-detail__stat-l">Region</div><div className="w2-detail__stat-v" style={{fontSize:15}}>{poi.region}</div></div>
            </>
          )}
        </div>

        {bookings && (
          <>
            <div className="w2-detail__eyebrow">Booking options · per night</div>
            <div style={{marginBottom:22}}>
              {bookings.map((r, i) => (
                <div key={i} className={`w2-detail__book-row ${r.best ? 'is-best' : ''}`}>
                  <span className="w2-detail__book-src">{r.src}</span>
                  <span className="w2-detail__book-price">₹{r.price.toLocaleString()}<span>/n</span></span>
                  <button className="w2-detail__book-cta" onClick={r.best ? onBook : undefined}>{r.best ? 'Book' : 'Open ↗'}</button>
                </div>
              ))}
            </div>
          </>
        )}

        {isCafe && (
          <div className="w2-detail__cafe">
            <div className="w2-detail__cafe-lbl">Cafés are not bookable inside HimLocal.</div>
            <button className="w2-btn w2-btn--menu w2-btn--block w2-btn--lg" onClick={onCafeMenu}>
              View menu &amp; info ↗
            </button>
          </div>
        )}
      </div>

      <div className="w2-actionbar">
        {!isCafe && bookings && (
          <div className="w2-actionbar__priceline">
            <div>
              <div className="w2-actionbar__price-l">From · per night</div>
              <div className="w2-actionbar__price-v">
                ₹{Math.min(...bookings.map(b => b.price)).toLocaleString()}
                <small>· {bookings.length} sources</small>
              </div>
            </div>
            <div style={{textAlign:'right'}}>
              <div className="w2-actionbar__price-l">Direct rate</div>
              <div className="w2-actionbar__price-nights">{(bookings.find(b => b.best) || bookings[0])?.src} · best</div>
            </div>
          </div>
        )}
        {isTrail && !bookings && (
          <div className="w2-actionbar__note">
            <span className="w2-actionbar__note-dot"/> Trail — free to add. Permits checked at trailhead.
          </div>
        )}
        <div className={`w2-actionbar__row ${isCafe ? 'w2-actionbar__row--single' : ''}`}>
          <button className="w2-btn w2-btn--itinerary w2-btn--lg" onClick={() => setPopOpen(!popOpen)}>
            <span className="w2-btn__icon" aria-hidden style={{display:'inline-flex',width:16,height:16,borderRadius:'50%',border:'1.5px solid currentColor',alignItems:'center',justifyContent:'center',fontSize:11,fontWeight:700}}>+</span>
            Add to itinerary
          </button>
          {!isCafe && bookings && (
            <button className="w2-btn w2-btn--book w2-btn--lg" onClick={onBook}>
              <span className="w2-btn__icon" aria-hidden style={{fontSize:14}}>⏵</span>
              Book direct
              <span className="w2-btn__sub">₹{(bookings.find(b => b.best) || bookings[0]).price.toLocaleString()}/n</span>
            </button>
          )}
          {isCafe && (
            <button className="w2-btn w2-btn--menu w2-btn--lg" onClick={onCafeMenu}>Menu ↗</button>
          )}
        </div>

        {popOpen && (
          <div className="w2-aip" onClick={e => e.stopPropagation()}>
            <div className="w2-aip__head">
              <div className="w2-aip__head-t">
                {pickItin ? 'Which day?' : 'Add to itinerary'}
              </div>
              <div className="w2-aip__head-sub">
                {pickItin
                  ? myItineraries.find(it => it.id === pickItin)?.title
                  : `${poi.name} · pick one to add`}
              </div>
            </div>

            {!pickItin && (
              <>
                {myItineraries.map(it => {
                  const stops = it.days.reduce((s, d) => s + d.stops.length, 0);
                  return (
                    <button key={it.id} className="w2-aip__row" onClick={() => setPickItin(it.id)}>
                      <div className="w2-aip__row-img" style={{ backgroundImage:`url(${it.img})` }}/>
                      <div className="w2-aip__row-body">
                        <div className="w2-aip__row-t">{it.title}</div>
                        <div className="w2-aip__row-m">{it.region} · {it.days.length} days · {stops} stops</div>
                      </div>
                      <span className="w2-aip__row-r">Pick →</span>
                    </button>
                  );
                })}
                <div className="w2-aip__divider"/>
                <button className="w2-aip__newbtn" onClick={() => { closePop(); onCreateItinerary(poi.id); }}>
                  <span>+</span> Create new itinerary
                </button>
                <div style={{padding:'4px 10px 8px',textAlign:'right'}}>
                  <button onClick={closePop} style={{background:0,border:0,color:'var(--fg-3)',font:'500 11px var(--font-body)',letterSpacing:'.04em',cursor:'pointer',padding:4}}>Cancel</button>
                </div>
              </>
            )}

            {pickItin && (
              <>
                <div className="w2-aip__days">
                  {myItineraries.find(it => it.id === pickItin).days.map((d, di) => (
                    <button key={di} className="w2-aip__day" onClick={() => onAddToItin(pickItin, di)}>
                      <span className="w2-aip__day-date">{d.date}</span>
                      Day {di + 1}
                    </button>
                  ))}
                </div>
                <div style={{padding:'4px 10px 8px',display:'flex',justifyContent:'space-between'}}>
                  <button onClick={() => setPickItin(null)} style={{background:0,border:0,color:'var(--fg-3)',font:'500 11px var(--font-body)',letterSpacing:'.04em',cursor:'pointer',padding:4}}>← Back</button>
                  <button onClick={closePop} style={{background:0,border:0,color:'var(--fg-3)',font:'500 11px var(--font-body)',letterSpacing:'.04em',cursor:'pointer',padding:4}}>Cancel</button>
                </div>
              </>
            )}
          </div>
        )}
      </div>
    </div>
  );
}
window.WebInlineDetail = WebInlineDetail;


// ─── Play-route bar (animated itinerary walkthrough) ────
function WebPlayBar({ stops, currentIdx, playing, onPlay, onPause, onPrev, onNext, onClose }) {
  if (!stops || stops.length === 0) return null;
  const cur = stops[currentIdx];
  return (
    <div className="w2-play-bar">
      <button className="w2-play-bar__nav" onClick={onPrev} disabled={currentIdx === 0}>‹</button>
      <button className="w2-play-bar__btn" onClick={playing ? onPause : onPlay} aria-label={playing ? 'Pause' : 'Play'}>
        {playing ? '❚❚' : '▶'}
      </button>
      <button className="w2-play-bar__nav" onClick={onNext} disabled={currentIdx >= stops.length - 1}>›</button>
      <div className="w2-play-bar__step"><strong>{currentIdx + 1} / {stops.length}</strong> · {cur?.name}</div>
      <button className="w2-play-bar__close" onClick={onClose} aria-label="Stop">×</button>
    </div>
  );
}
window.WebPlayBar = WebPlayBar;