// HimLocal — Web v2.4 Adventure activities (list + detail)

const { useState: useStateWAct, useMemo: useMemoWAct } = React;

function WebActivitiesPage({ data, onBack, onOpen, tripContext }) {
  const [cat, setCat] = useStateWAct('all');
  const list = useMemoWAct(() => cat === 'all' ? data.activities : data.activities.filter(a => a.kind === cat), [cat]);
  return (
    <div className="w2-acts w2-route">
      <div className="w2-acts__inner">
        <div className="w2-acts__head">
          <div>
            <h1 className="w2-acts__title">Adventure <em>activities.</em></h1>
            <div className="w2-acts__sub">Paragliding, rafting, ziplining, biking, camping — book a slot with a vetted local operator.</div>
          </div>
          <button onClick={onBack} style={{padding:'10px 18px',background:'var(--bone-100)',border:'1px solid var(--border-1)',borderRadius:999,cursor:'pointer',font:'600 12px var(--font-body)',color:'var(--slate-700)'}}>← Back</button>
        </div>
        <div className="w2-acts__cats">
          <button className={`w2-acts__cat ${cat === 'all' ? 'is-on' : ''}`} onClick={() => setCat('all')}>All</button>
          {data.activityCategories.map(c => (
            <button key={c.id} className={`w2-acts__cat ${cat === c.id ? 'is-on' : ''}`} onClick={() => setCat(c.id)}>{c.name}</button>
          ))}
        </div>
        <div className="w2-acts__grid">
          {list.map(a => (
            <div key={a.id} className="w2-act-card" onClick={() => onOpen(a.id)}>
              <div className="w2-act-card__img" style={{ backgroundImage:`url(${a.img})` }}>
                <span className="w2-act-card__chip">{a.region} · {a.duration.split('·')[0].trim()}</span>
                <span className="w2-act-card__grade">GRADE {a.grade}</span>
                <div className="w2-act-card__head">
                  <div className="w2-act-card__name">{a.name}</div>
                  <div className="w2-act-card__loc">{a.location}</div>
                </div>
              </div>
              <div className="w2-act-card__body">
                <div className="w2-act-card__line">{a.tagline}</div>
                <div className="w2-act-card__foot">
                  <div className="w2-act-card__price">₹{a.priceFrom.toLocaleString()}<span> · from {a.vendors.length} {a.vendors.length === 1 ? 'operator' : 'operators'}</span></div>
                  <button className="w2-act-card__cta">View →</button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
window.WebActivitiesPage = WebActivitiesPage;

function WebActivityDetail({ activity, onBack, onBook }) {
  const a = activity;
  const [vendorId, setVendorId] = useStateWAct(a?.vendors[0]?.id);
  const [slotId, setSlotId]     = useStateWAct(a?.slots[0]?.id);
  const [adults, setAdults]     = useStateWAct(2);
  if (!a) return null;
  const vendor = a.vendors.find(v => v.id === vendorId) || a.vendors[0];
  const slot   = a.slots.find(s => s.id === slotId)   || a.slots[0];
  const total = (vendor?.price || a.priceFrom) * adults;
  return (
    <div className="w2-act-page w2-route">
      <div className="w2-act-hero" style={{ backgroundImage:`url(${a.img})` }}>
        <div className="w2-act-hero__scrim"/>
        <div className="w2-act-hero__inner">
          <button onClick={onBack} style={{alignSelf:'flex-start',padding:'8px 16px',background:'rgba(255,255,255,.18)',backdropFilter:'blur(10px)',border:'1px solid rgba(255,255,255,.22)',borderRadius:999,color:'white',font:'600 11.5px var(--font-body)',letterSpacing:'.04em',cursor:'pointer'}}>← Back to activities</button>
          <div>
            <div className="w2-act-hero__chips">
              <span className="w2-act-hero__chip">{a.region}</span>
              <span className="w2-act-hero__chip">GRADE {a.grade}</span>
              <span className="w2-act-hero__chip">{a.duration}</span>
            </div>
            <h1 className="w2-act-hero__title">{a.name.replace(' · ', ' ·\u00a0')}</h1>
            <div className="w2-act-hero__line">{a.tagline}</div>
          </div>
        </div>
      </div>
      <div className="w2-act-content">
        <div className="w2-act-content__body">
          <h3>Quick <em>facts</em></h3>
          <div className="w2-act-stats">
            <div><div className="w2-act-stat-l">Difficulty</div><div className="w2-act-stat-v" style={{fontSize:14}}>{a.difficulty}</div></div>
            <div><div className="w2-act-stat-l">Duration</div><div className="w2-act-stat-v" style={{fontSize:14}}>{a.duration}</div></div>
            <div><div className="w2-act-stat-l">Altitude</div><div className="w2-act-stat-v" style={{fontFamily:'var(--font-mono)',fontSize:15}}>{a.alt.toLocaleString()} m</div></div>
            <div><div className="w2-act-stat-l">Season</div><div className="w2-act-stat-v" style={{fontSize:14}}>{a.season}</div></div>
          </div>

          <h3>About this <em>experience</em></h3>
          <div style={{font:'400 14.5px var(--font-body)',color:'var(--fg-1)',lineHeight:1.65}}>{a.description}</div>

          <h3>Choose an <em>operator</em></h3>
          {a.vendors.map(v => (
            <div key={v.id} className={`w2-act-vendor ${vendorId === v.id ? 'is-on' : ''}`} onClick={() => setVendorId(v.id)}>
              <div>
                <div className="w2-act-vendor__head">
                  <span className="w2-act-vendor__name">{v.name}</span>
                  <span className="w2-act-vendor__rating">★ {v.rating} <span>({v.reviews})</span></span>
                </div>
                <div className="w2-act-vendor__inc">
                  {v.includes.map((i, idx) => <span key={idx}>{i}</span>)}
                </div>
              </div>
              <div className="w2-act-vendor__price">
                <strong>₹{v.price.toLocaleString()}</strong>
                <span>per person</span>
              </div>
            </div>
          ))}
        </div>

        <div className="w2-act-sidebar">
          <div className="w2-act-sidebar__price">₹{(vendor?.price || a.priceFrom).toLocaleString()}</div>
          <div className="w2-act-sidebar__pricel">per person · {vendor?.name}</div>

          <div className="w2-act-sidebar__l">Travellers</div>
          <div style={{display:'inline-flex',alignItems:'center',background:'var(--bone-100)',border:'1px solid var(--border-1)',borderRadius:999,padding:2,marginBottom:14}}>
            <button onClick={() => setAdults(n => Math.max(1, n - 1))} style={{width:32,height:32,background:0,border:0,cursor:'pointer',color:'var(--slate-700)',fontSize:14}}>−</button>
            <span style={{padding:'0 14px',font:'600 13px var(--font-mono)',color:'var(--slate-700)'}}>{adults} {adults === 1 ? 'person' : 'people'}</span>
            <button onClick={() => setAdults(n => n + 1)} style={{width:32,height:32,background:0,border:0,cursor:'pointer',color:'var(--slate-700)',fontSize:14}}>+</button>
          </div>

          <div className="w2-act-sidebar__l">Pick a slot</div>
          {a.slots.map(s => (
            <div key={s.id} className={`w2-act-slot ${slotId === s.id ? 'is-on' : ''}`} onClick={() => setSlotId(s.id)}>
              <span className="w2-act-slot-dt">{new Date(s.date + 'T00:00:00').toLocaleDateString('en-IN', { day:'numeric', month:'short' })} · {s.start}</span>
              <span className="w2-act-slot-st">{s.seatsLeft} seats</span>
            </div>
          ))}

          <div style={{display:'flex',justifyContent:'space-between',padding:'12px 0 6px',borderTop:'1px dashed var(--border-1)',marginTop:12,font:'500 13px var(--font-body)',color:'var(--fg-2)'}}>
            <span>{adults} × ₹{(vendor?.price || a.priceFrom).toLocaleString()}</span>
            <strong style={{color:'var(--slate-700)',fontFamily:'var(--font-mono)',fontSize:15}}>₹{total.toLocaleString()}</strong>
          </div>

          <button className="w2-act-cta" onClick={() => onBook(a, vendor, slot, { adults, total })}>Book · ₹{total.toLocaleString()}</button>
          <div style={{font:'400 11.5px var(--font-body)',color:'var(--fg-3)',marginTop:12,lineHeight:1.5}}>Free cancellation up to 24 hours before the slot. Insurance &amp; gear included.</div>
        </div>
      </div>
    </div>
  );
}
window.WebActivityDetail = WebActivityDetail;