// HimLocal — v2 Explore experience (Map / List / Itinerary)
// Single-tap pin or card opens FULL detail drawer immediately (no peek/deep duality).

const { useState: useStateEx } = React;

const POI_COLORS = { trail:'#70B52F', stay:'#305CDE', temple:'#C76A3A', cafe:'#E5A93B' };

// ─── Map canvas ─────────────────────────────────────────────────
function V2MapCanvas({ pois, pickedId, onSelect, onClear }) {
  return (
    <div style={{position:'absolute',inset:0,overflow:'hidden',background:'#E8EFE0',cursor:'pointer'}} onClick={onClear}>
      <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none" style={{display:'block'}}>
        <defs>
          <linearGradient id="v2terr" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%"  stopColor="#D2ECF9"/>
            <stop offset="45%" stopColor="#EBE8D5"/>
            <stop offset="100%" stopColor="#D4E8C4"/>
          </linearGradient>
          <radialGradient id="v2blur" cx="50%" cy="50%" r="60%">
            <stop offset="0%" stopColor="rgba(255,255,255,.3)"/>
            <stop offset="100%" stopColor="rgba(255,255,255,0)"/>
          </radialGradient>
        </defs>
        <rect width="100" height="100" fill="url(#v2terr)"/>
        {[14,27,40,53,66,79].map((y,i) => (
          <path key={i} d={`M 0 ${y} Q ${18 + i*4} ${y - 2} 50 ${y + 1} T 100 ${y - 1}`}
            stroke="rgba(31,59,87,.07)" strokeWidth=".22" 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=".8" fill="none" strokeLinecap="round"
          strokeDasharray=".5 .65" opacity=".85"/>
        <ellipse cx="50" cy="50" rx="30" ry="20" fill="url(#v2blur)"/>
      </svg>
      {pois.map(p => {
        const isStay = p.kind === 'stay' && p.price;
        const lbl = isStay ? `₹${p.price.toLocaleString()}/n` : p.name;
        return (
        <button key={p.id}
          style={{
            position:'absolute',
            left:`${p.x}%`, top:`${p.y}%`,
            transform:'translate(-50%, -100%)',
            background:'transparent', border:0, padding:0,
            cursor:'pointer',
            display:'flex', flexDirection:'column', alignItems:'center', gap:2,
          }}
          onClick={e => { e.stopPropagation(); onSelect(p.id); }}>
          <div style={{
            padding: isStay ? '4px 8px' : '4px 9px',
            background: pickedId === p.id && isStay ? POI_COLORS[p.kind] : 'white',
            borderRadius:999,
            border:`1.5px solid ${POI_COLORS[p.kind]}`,
            font: isStay ? '700 11px var(--font-mono)' : '600 10.5px var(--font-body)',
            color: pickedId === p.id && isStay ? 'white' : 'var(--slate-700)',
            letterSpacing: isStay ? '0' : '-.005em',
            boxShadow:'0 2px 8px rgba(14,26,36,.18)',
            whiteSpace:'nowrap',
            transition:'transform 200ms, background 200ms',
            transform: pickedId === p.id ? 'scale(1.1)' : 'scale(1)',
          }}>{lbl}</div>
          <div style={{
            width:10, height:10, borderRadius:'50%',
            background: POI_COLORS[p.kind],
            border:'2px solid white',
            boxShadow:'0 2px 6px rgba(14,26,36,.25)',
          }}/>
        </button>
        );
      })}
      <div style={{position:'absolute',bottom:80,right:14,display:'flex',flexDirection:'column',gap:6}}>
        <button style={{width:36,height:36,borderRadius:8,background:'rgba(255,255,255,.94)',backdropFilter:'blur(10px)',border:'1px solid rgba(31,59,87,.10)',font:'500 18px var(--font-body)',color:'var(--slate-700)',cursor:'pointer',boxShadow:'0 2px 8px rgba(14,26,36,.10)'}}>+</button>
        <button style={{width:36,height:36,borderRadius:8,background:'rgba(255,255,255,.94)',backdropFilter:'blur(10px)',border:'1px solid rgba(31,59,87,.10)',font:'500 18px var(--font-body)',color:'var(--slate-700)',cursor:'pointer',boxShadow:'0 2px 8px rgba(14,26,36,.10)'}}>−</button>
        <button style={{width:36,height:36,borderRadius:8,background:'rgba(255,255,255,.94)',backdropFilter:'blur(10px)',border:'1px solid rgba(31,59,87,.10)',font:'600 10px var(--font-body)',color:'var(--slate-700)',cursor:'pointer',boxShadow:'0 2px 8px rgba(14,26,36,.10)',letterSpacing:'.04em'}}>3D</button>
      </div>
      <div style={{position:'absolute',bottom:80,left:14,padding:'4px 8px',background:'rgba(255,255,255,.8)',borderRadius:4,font:'400 9px var(--font-body)',color:'var(--fg-3)',letterSpacing:'.04em'}}>© HimLocal · OSM</div>
    </div>
  );
}
window.V2MapCanvas = V2MapCanvas;

// ─── Unified detail drawer (single action opens full) ───────────
function V2DetailDrawer({ poi, bookings, onClose, onAdd, onBook, onCafeMenu }) {
  if (!poi) return null;
  const isCafe  = poi.kind === 'cafe';
  const isTrail = poi.kind === 'trail';

  return (
    <>
      <div className="v2-detail-backdrop" onClick={onClose}/>
      <div className="v2-detail">
        <div className="v2-detail__handle" onClick={onClose}>
          <div className="v2-detail__handle-bar"/>
        </div>
        <button className="v2-detail__close" onClick={onClose}>×</button>

        <div className="v2-detail__hero" style={{ backgroundImage:`url(${poi.img})` }}>
          <div className="v2-detail__hero-scrim"/>
          <div className="v2-detail__hero-copy">
            <div className="v2-detail__hero-kind">{poi.kind} · {poi.region}</div>
            <div className="v2-detail__hero-name">{poi.name}</div>
          </div>
        </div>

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

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

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

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

        <div className="app-actionbar">
          {!isCafe && bookings && (
            <div className="app-actionbar__priceline">
              <div>
                <div className="app-actionbar__price-l">From · per night</div>
                <div className="app-actionbar__price-v">
                  ₹{Math.min(...bookings.map(b => b.price)).toLocaleString()}
                  <small>· {bookings.length} sources</small>
                </div>
              </div>
              <div style={{textAlign:'right'}}>
                <div className="app-actionbar__price-l">Direct</div>
                <div className="app-actionbar__nights">{(bookings.find(b => b.best) || bookings[0])?.src}</div>
              </div>
            </div>
          )}
          {isTrail && !bookings && (
            <div style={{font:'500 11.5px var(--font-body)',color:'var(--fg-3)',display:'flex',alignItems:'center',gap:6}}>
              <span style={{width:6,height:6,background:'var(--leaf-500)',borderRadius:'50%'}}/>
              Free to add. Permits checked at trailhead.
            </div>
          )}
          <div className="app-actionbar__row">
            <button className="app-btn app-btn--itinerary" onClick={onAdd}>
              <span style={{display:'inline-flex',width:14,height:14,borderRadius:'50%',border:'1.5px solid currentColor',alignItems:'center',justifyContent:'center',fontSize:10,fontWeight:700}}>+</span>
              Itinerary
            </button>
            {!isCafe && bookings && (
              <button className="app-btn app-btn--book" onClick={onBook}>
                <span style={{fontSize:12}}>⏵</span>
                Book direct
              </button>
            )}
            {isCafe && (
              <button className="app-btn app-btn--menu" onClick={onCafeMenu}>Menu ↗</button>
            )}
          </div>
        </div>
      </div>
    </>
  );
}
window.V2DetailDrawer = V2DetailDrawer;

// ─── List view of POIs ──────────────────────────────────────────
function V2ExploreList({ pois, onOpen, onBack, query, onQuery }) {
  const [filter, setFilter] = useStateEx('all');
  const filters = [
    { id:'all',    label:'All' },
    { id:'trail',  label:'Trails',  dot:POI_COLORS.trail },
    { id:'stay',   label:'Stays',   dot:POI_COLORS.stay },
    { id:'temple', label:'Temples', dot:POI_COLORS.temple },
    { id:'cafe',   label:'Cafés',   dot:POI_COLORS.cafe },
  ];
  const list = filter === 'all' ? pois : pois.filter(p => p.kind === filter);
  return (
    <div className="v2-ex-list">
      <div className="v2-ex-list__filters">
        {filters.map(f => (
          <button key={f.id}
            className={`v2-ex-list__chip ${filter === f.id ? 'is-on' : ''}`}
            onClick={() => setFilter(f.id)}>
            {f.dot && <span className="v2-ex-list__chip-dot" style={{ background:f.dot }}/>}
            {f.label}
          </button>
        ))}
      </div>
      {list.map(p => (
        <button key={p.id} className="v2-poi-card" onClick={() => onOpen(p.id)}>
          <div className="v2-poi-card__img" style={{ backgroundImage:`url(${p.img})` }}/>
          <div className="v2-poi-card__body">
            <div className="v2-poi-card__kind">{p.kind} · {p.region}</div>
            <div className="v2-poi-card__name">{p.name}</div>
            <div className="v2-poi-card__short">{p.short}</div>
            <div className="v2-poi-card__meta">{p.alt.toLocaleString()} m · {p.lat.toFixed(2)}° N</div>
          </div>
        </button>
      ))}
    </div>
  );
}
window.V2ExploreList = V2ExploreList;