// HimLocal — Mobile v2.1 Trip Context + Itineraries + Curated + Create + Booking gate

const { useState: useStateMIt, useEffect: useEffectMIt, useMemo: useMemoMIt } = React;
const MIcon = window.HomeIcon;

function fmtDate(s) {
  try {
    const d = new Date(s + 'T00:00:00');
    return d.toLocaleDateString('en-IN', { day:'numeric', month:'short' });
  } catch { return s; }
}
function daysBtw(a, b) {
  try {
    const s = new Date(a + 'T00:00:00');
    const e = new Date(b + 'T00:00:00');
    return Math.max(1, Math.round((e - s) / 86400000));
  } catch { return 1; }
}

// ─── Trip Context bar + sheet ─────────────────────────────
function MobileTripBar({ ctx, onOpen }) {
  const guests = `${ctx.adults}${ctx.children ? `+${ctx.children}` : ''} · ${ctx.rooms} room${ctx.rooms > 1 ? 's' : ''}`;
  return (
    <button className="app-trip" onClick={onOpen}>
      <span className="app-trip__icon"><MIcon name="route" size={14}/></span>
      <div className="app-trip__body">
        <div className="app-trip__l1">Trip · {daysBtw(ctx.checkIn, ctx.checkOut)} {daysBtw(ctx.checkIn, ctx.checkOut) === 1 ? 'night' : 'nights'}</div>
        <div className="app-trip__l2">{fmtDate(ctx.checkIn)} → {fmtDate(ctx.checkOut)} · {guests}</div>
      </div>
      <span className="app-trip__edit">Edit</span>
    </button>
  );
}
window.MobileTripBar = MobileTripBar;

function MobileTripSheet({ ctx, onClose, onApply }) {
  const [draft, setDraft] = useStateMIt(ctx);
  const set = (k, v) => setDraft(d => ({ ...d, [k]:v }));
  const step = (k, dlt) => setDraft(d => ({ ...d, [k]:Math.max(k === 'adults' || k === 'rooms' ? 1 : 0, d[k] + dlt) }));
  return (
    <div style={{position:'absolute',inset:0,background:'rgba(14,26,36,.55)',zIndex:69}} onClick={onClose}>
      <div className="app-tcsheet" onClick={e => e.stopPropagation()}>
        <div className="app-tcsheet__handle"/>
        <h2 className="app-tcsheet__t">Trip dates &amp; <em style={{fontStyle:'italic'}}>guests</em></h2>
        <div className="app-tcsheet__row">
          <div className="app-tcsheet__field">
            <div className="app-tcsheet__field-l">Check-in</div>
            <input type="date" value={draft.checkIn} onChange={e => set('checkIn', e.target.value)}/>
          </div>
          <div className="app-tcsheet__field">
            <div className="app-tcsheet__field-l">Check-out</div>
            <input type="date" value={draft.checkOut} onChange={e => set('checkOut', e.target.value)}/>
          </div>
        </div>
        {[
          { k:'adults', name:'Adults', sub:'13+ years' },
          { k:'children', name:'Children', sub:'2 — 12 years' },
          { k:'rooms', name:'Rooms', sub:'How many rooms' },
        ].map(r => (
          <div key={r.k} className="app-tcsheet__step">
            <div>
              <div className="app-tcsheet__step-l">{r.name}</div>
              <div className="app-tcsheet__step-s">{r.sub}</div>
            </div>
            <div className="app-tcsheet__step-ct">
              <button onClick={() => step(r.k, -1)}>−</button>
              <span>{draft[r.k]}</span>
              <button onClick={() => step(r.k, 1)}>+</button>
            </div>
          </div>
        ))}
        <button className="app-tcsheet__cta" onClick={() => onApply(draft)}>Apply</button>
      </div>
    </div>
  );
}
window.MobileTripSheet = MobileTripSheet;

// ─── My Itineraries screen ───────────────────────────────
function MobileItinerariesScreen({ data, myItineraries, plan, onOpen, onCreate, onOpenCurated, onUpgrade }) {
  const D = data;
  const used = myItineraries.length;
  const canCreate = used < plan.itineraryLimit;
  return (
    <div className="v2-home" style={{paddingBottom:80}}>
      <div className="app-itins-head">
        <div className="app-itins__head">
          <div style={{font:'600 9.5px var(--font-body)',letterSpacing:'.18em',textTransform:'uppercase',color:'var(--fg-3)'}}>My Trips</div>
          <h1 className="app-itins__t">Your <em>itineraries.</em></h1>
          <div className="app-itins__plan">{plan.tier === 'free' ? 'Free' : 'Pro'} · <strong style={{margin:'0 4px'}}>{used}/{plan.itineraryLimit}</strong> used</div>
          <button className="app-itins__newcta" onClick={canCreate ? onCreate : onUpgrade}>
            <MIcon name="plus" size={14}/>{canCreate ? 'Create new itinerary' : 'Upgrade to Pro'}
          </button>
        </div>
      </div>

      <div className="app-itins">
        {myItineraries.map(it => {
          const stops = it.days.reduce((s, d) => s + d.stops.length, 0);
          const fixed = it.days.reduce((s, d) => s + d.stops.filter(x => x.state === 'fixed').length, 0);
          return (
            <div key={it.id} className="app-itin-card" onClick={() => onOpen(it.id)}>
              <div className="app-itin-card__img" style={{ backgroundImage:`url(${it.img})` }}>
                <div className="app-itin-card__region">{it.region}</div>
              </div>
              <div className="app-itin-card__body">
                <div className="app-itin-card__t">{it.title}</div>
                <div className="app-itin-card__meta">{fmtDate(it.dates.start)} → {fmtDate(it.dates.end)} · {it.days.length} days</div>
                <div className="app-itin-card__stats">
                  <span><strong>{stops}</strong> stops</span>
                  <span><strong>{fixed}</strong> confirmed</span>
                </div>
                <span className={`app-itin-card__status app-itin-card__status--${it.status}`}>{it.status}</span>
              </div>
            </div>
          );
        })}

        {!canCreate && (
          <div style={{padding:'18px',background:'var(--lavender-100)',border:'1px solid rgba(123,111,203,.18)',borderRadius:12,marginTop:14,textAlign:'center'}}>
            <div style={{font:'600 10px var(--font-body)',letterSpacing:'.16em',textTransform:'uppercase',color:'var(--lavender-700)'}}>Limit reached</div>
            <div style={{fontFamily:'var(--font-display)',fontStyle:'italic',fontSize:18,fontWeight:500,color:'var(--slate-700)',margin:'4px 0 6px'}}>Free plan: 1 active trip</div>
            <div style={{font:'400 12px var(--font-body)',color:'var(--fg-2)',marginBottom:12,lineHeight:1.5}}>Upgrade to Pro for 10 itineraries, offline maps, GPX export and priority host replies. ₹299/mo.</div>
            <button onClick={onUpgrade} style={{padding:'10px 20px',background:'var(--lavender-700)',color:'white',border:0,borderRadius:999,font:'600 12px var(--font-body)',cursor:'pointer'}}>Upgrade to Pro</button>
          </div>
        )}

        {/* Curated */}
        <div className="v2-sech" style={{marginTop:24}}>
          <div className="v2-sech__t">Bookable, <em>guided</em></div>
          <span className="v2-sech__more">{D.curatedItineraries.length}</span>
        </div>
        <div className="app-cur-row">
          {D.curatedItineraries.map(c => (
            <button key={c.id} className="app-cur-card" onClick={() => onOpenCurated(c.id)}>
              <div className="app-cur-card__img" style={{ backgroundImage:`url(${c.img})` }}>
                <div className="app-cur-card__img-scrim"/>
                <span className="app-cur-card__chip">{c.region} · {c.days}D</span>
                <div className="app-cur-card__title">{c.title}</div>
              </div>
              <div className="app-cur-card__body">
                <div className="app-cur-card__meta">{c.creator.name} · {c.grade}</div>
                <div className="app-cur-card__price">₹{c.priceTotal.toLocaleString()}</div>
              </div>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}
window.MobileItinerariesScreen = MobileItinerariesScreen;

// ─── Curated detail (mobile fullscreen) ─────────────────
function MobileCuratedDetail({ curated, onBack, onBook, onFollow, onCopy }) {
  const c = curated;
  const [picked, setPicked] = useStateMIt(c?.departures?.[0]?.id);
  if (!c) return null;
  const dep = c.departures.find(d => d.id === picked) || c.departures[0];
  return (
    <div className="app-cur-page">
      <div className="app-cur-page__scroll">
      <div className="app-cur-page__hero" style={{ backgroundImage:`url(${c.img})` }}>
        <div className="app-cur-page__scrim"/>
        <button className="app-cur-page__back" onClick={onBack}>←</button>
        <div className="app-cur-page__hero-copy">
          <div className="app-cur-page__chips">
            <span className="app-cur-page__chip">{c.region}</span>
            <span className="app-cur-page__chip">{c.days} DAYS</span>
            <span className="app-cur-page__chip">GRADE {c.grade}</span>
          </div>
          <h1 className="app-cur-page__title">{c.title}</h1>
          <div style={{font:'400 13px var(--font-body)',marginTop:8,opacity:.92,fontStyle:'italic',fontFamily:'var(--font-display)'}}>{c.tagline}</div>
        </div>
      </div>
      <div className="app-cur-page__body">
        <h3>The route</h3>
        {c.route.map(d => (
          <div key={d.d} style={{display:'flex',gap:14,padding:'10px 0',borderBottom:'1px solid var(--border-1)'}}>
            <div style={{font:'700 11px var(--font-mono)',letterSpacing:'.12em',color:'var(--leaf-700)',width:32,flexShrink:0,paddingTop:2}}>{d.d}</div>
            <div style={{font:'400 13px var(--font-body)',color:'var(--fg-1)',lineHeight:1.5}}>{d.t}</div>
          </div>
        ))}

        <h3>Departures</h3>
        <div style={{display:'flex',flexDirection:'column',gap:6}}>
          {c.departures.map(d => (
            <div key={d.id} onClick={() => setPicked(d.id)} style={{padding:'10px 12px',background:picked === d.id ? 'var(--leaf-100)' : 'var(--bone-100)',border:`1px solid ${picked === d.id ? 'var(--leaf-700)' : 'var(--border-1)'}`,borderRadius:8,display:'flex',justifyContent:'space-between',alignItems:'center',cursor:'pointer'}}>
              <span style={{font:'600 12.5px var(--font-body)',color:'var(--slate-700)'}}>{fmtDate(d.startDate)} → {fmtDate(d.endDate)}</span>
              <span style={{font:'600 10px var(--font-body)',letterSpacing:'.12em',textTransform:'uppercase',color:picked === d.id ? 'var(--leaf-700)' : 'var(--fg-3)'}}>{d.seatsLeft} seats</span>
            </div>
          ))}
        </div>

        <h3>What's included</h3>
        <ul style={{listStyle:'none',padding:0,margin:0}}>
          {c.includes.map((x, i) => (
            <li key={i} style={{display:'flex',gap:8,padding:'4px 0',font:'400 12.5px var(--font-body)',color:'var(--fg-1)'}}>
              <span style={{color:'var(--leaf-700)',fontWeight:600,flexShrink:0}}>✓</span>{x}
            </li>
          ))}
        </ul>

        <h3>Not included</h3>
        <ul style={{listStyle:'none',padding:0,margin:0}}>
          {c.excludes.map((x, i) => (
            <li key={i} style={{display:'flex',gap:8,padding:'4px 0',font:'400 12.5px var(--font-body)',color:'var(--fg-1)'}}>
              <span style={{color:'var(--terracotta)',fontWeight:600,flexShrink:0}}>×</span>{x}
            </li>
          ))}
        </ul>

        <div style={{margin:'18px 0 0',padding:'14px',background:'var(--bg-paper)',border:'1px solid var(--border-1)',borderRadius:10}}>
          <div style={{font:'400 12px var(--font-body)',color:'var(--fg-3)',marginBottom:8}}>{c.bookedThisMonth} travellers booked this month. Cancellation up to 14 days before departure, full refund.</div>
          <div style={{display:'flex',gap:6}}>
            <button onClick={() => onFollow(c.id)} style={{flex:1,padding:'10px',background:'var(--bone-100)',border:'1px solid var(--border-1)',borderRadius:8,font:'600 11.5px var(--font-body)',color:'var(--slate-700)',cursor:'pointer'}}>Follow</button>
            <button onClick={() => onCopy(c.id)} style={{flex:1,padding:'10px',background:'var(--bone-100)',border:'1px solid var(--border-1)',borderRadius:8,font:'600 11.5px var(--font-body)',color:'var(--slate-700)',cursor:'pointer'}}>Copy</button>
          </div>
        </div>
      </div>
      </div>{/* /.app-cur-page__scroll */}
      <div className="app-cur-page__sticky">
        <div className="app-cur-page__price">
          <strong>₹{c.priceTotal.toLocaleString()}</strong>
          <span>{c.priceLabel}</span>
        </div>
        <button className="app-cur-page__btn" onClick={() => onBook(c, dep.id)}>Book →</button>
      </div>
    </div>
  );
}
window.MobileCuratedDetail = MobileCuratedDetail;

// ─── Add-to-itinerary sheet (mobile) ────────────────────
function MobileAddToItin({ poi, myItineraries, onClose, onAdd, onCreate }) {
  const [pick, setPick] = useStateMIt(null);
  return (
    <div style={{position:'absolute',inset:0,background:'rgba(14,26,36,.55)',zIndex:74}} onClick={onClose}>
      <div className="app-aisheet" onClick={e => e.stopPropagation()}>
        <div className="app-aisheet__handle"/>
        <h2 className="app-aisheet__t">{pick ? 'Which day?' : 'Add to itinerary'}</h2>
        <div className="app-aisheet__s">{pick ? myItineraries.find(i => i.id === pick)?.title : `${poi?.name} → pick a trip`}</div>
        {!pick && (
          <>
            {myItineraries.map(it => {
              const stops = it.days.reduce((s, d) => s + d.stops.length, 0);
              return (
                <button key={it.id} className="app-aisheet__row" onClick={() => setPick(it.id)}>
                  <div className="app-aisheet__row-img" style={{ backgroundImage:`url(${it.img})` }}/>
                  <div className="app-aisheet__row-body">
                    <div className="app-aisheet__row-t">{it.title}</div>
                    <div className="app-aisheet__row-m">{it.region} · {it.days.length}d · {stops} stops</div>
                  </div>
                  <span style={{color:'var(--fg-3)',fontSize:14}}>→</span>
                </button>
              );
            })}
            <button className="app-aisheet__newbtn" onClick={() => { onClose(); onCreate(); }}>
              <span style={{fontSize:16}}>+</span> Create new itinerary
            </button>
          </>
        )}
        {pick && (
          <>
            <div className="app-aisheet__days">
              {myItineraries.find(i => i.id === pick).days.map((d, di) => (
                <button key={di} className="app-aisheet__day" onClick={() => onAdd(pick, di)}>
                  <div>
                    <div className="app-aisheet__day-date">{d.date}</div>
                    <div>Day {di + 1}</div>
                  </div>
                  <span style={{color:'var(--fg-3)'}}>→</span>
                </button>
              ))}
            </div>
            <button style={{marginTop:10,width:'100%',padding:10,background:'transparent',border:0,font:'600 12px var(--font-body)',letterSpacing:'.04em',color:'var(--fg-3)',cursor:'pointer'}} onClick={() => setPick(null)}>← Back</button>
          </>
        )}
      </div>
    </div>
  );
}
window.MobileAddToItin = MobileAddToItin;

// ─── Create itinerary sheet (mobile) ───────────────────
function MobileCreateSheet({ presets, onClose, onCreate }) {
  const [title, setTitle] = useStateMIt('');
  const [region, setRegion] = useStateMIt((presets || ['SPITI'])[0]);
  const [start, setStart] = useStateMIt('2026-06-01');
  const [end, setEnd]     = useStateMIt('2026-06-05');
  const [adults, setAdults] = useStateMIt(2);
  const valid = title.trim().length > 0;
  return (
    <div style={{position:'absolute',inset:0,background:'rgba(14,26,36,.55)',zIndex:79}} onClick={onClose}>
      <div className="app-create-sheet" onClick={e => e.stopPropagation()}>
        <div className="app-create-sheet__handle"/>
        <div className="app-create-sheet__lbl">Create itinerary</div>
        <h2 className="app-create-sheet__t">Start a new <em>trip.</em></h2>

        <div className="app-create-sheet__field">
          <label className="app-create-sheet__field-l">Trip name</label>
          <input className="app-create-sheet__input" autoFocus placeholder="e.g. Spiti in autumn" value={title} onChange={e => setTitle(e.target.value)}/>
        </div>
        <div className="app-create-sheet__field">
          <label className="app-create-sheet__field-l">Region</label>
          <div className="app-create-sheet__regions">
            {(presets || ['SPITI','PARVATI','KINNAUR','DHAULADHAR','LAHAUL','KULLU']).map(r => (
              <button key={r} className={`app-create-sheet__region ${region === r ? 'is-on' : ''}`} onClick={() => setRegion(r)}>{r}</button>
            ))}
          </div>
        </div>
        <div className="app-create-sheet__field">
          <label className="app-create-sheet__field-l">Dates</label>
          {window.MobileDateRangePicker ? (
            <window.MobileDateRangePicker start={start} end={end} label="Trip dates"
              onChange={({ start:s, end:e }) => { if (s) setStart(s); if (e) setEnd(e); }}/>
          ) : (
            <div className="app-create-sheet__row">
              <input className="app-create-sheet__input" type="date" value={start} onChange={e => setStart(e.target.value)}/>
              <input className="app-create-sheet__input" type="date" value={end} onChange={e => setEnd(e.target.value)}/>
            </div>
          )}
        </div>
        <div className="app-create-sheet__field">
          <label className="app-create-sheet__field-l">Travellers</label>
          <input className="app-create-sheet__input" type="number" min="1" value={adults} onChange={e => setAdults(parseInt(e.target.value) || 1)}/>
        </div>
        <div className="app-create-sheet__actions">
          <button className="app-create-sheet__cancel" onClick={onClose}>Cancel</button>
          <button className="app-create-sheet__submit" disabled={!valid} style={!valid ? { opacity:.5 } : null}
            onClick={() => onCreate({ title:title.trim(), region, start, end, adults })}>Create →</button>
        </div>
      </div>
    </div>
  );
}
window.MobileCreateSheet = MobileCreateSheet;

// ─── Booking gate (mobile) — slim docked widget, no overlay backdrop ────────
function MobileBookingGate({ poi, tripContext, onClose, onProceed }) {
  const [start, setStart] = useStateMIt(tripContext.checkIn);
  const [end, setEnd]     = useStateMIt(tripContext.checkOut);
  const [adults, setAdults] = useStateMIt(tripContext.adults);
  const [children, setChildren] = useStateMIt(tripContext.children);
  const [rooms, setRooms] = useStateMIt(tripContext.rooms);
  const nights = useMemoMIt(() => daysBtw(start, end), [start, end]);
  const ratePerNight = poi?.price || 4200;
  const subtotal = ratePerNight * nights * rooms;
  const tax = Math.round(subtotal * 0.05);
  const total = subtotal + tax;
  return (
    <>
      <div className="app-bgate-backdrop" onClick={onClose}/>
      <div className="app-bgate-sheet" onClick={e => e.stopPropagation()}>
        <div className="app-bgate-sheet__handle"/>
        <div className="app-bgate-sheet__lbl">Booking</div>
        <h2 className="app-bgate-sheet__t">{poi?.name}</h2>
        <div className="app-bgate-sheet__sub">Pre-filled from your trip. Tweak dates and guests below.</div>

        {window.MobileDateRangePicker ? (
          <window.MobileDateRangePicker start={start} end={end}
            onChange={({ start:s, end:e }) => { if (s) setStart(s); if (e) setEnd(e); }}/>
        ) : (
          <div className="app-bgate-sheet__row">
            <label className="app-bgate-sheet__pill">
              <span className="app-bgate-sheet__pill-l">Check-in</span>
              <input type="date" value={start} onChange={e => setStart(e.target.value)}/>
            </label>
            <label className="app-bgate-sheet__pill">
              <span className="app-bgate-sheet__pill-l">Check-out</span>
              <input type="date" value={end} onChange={e => setEnd(e.target.value)} min={start}/>
            </label>
          </div>
        )}
        <div className="app-bgate-sheet__row">
          {[
            { k:'adults', name:'Adults', val:adults, set:setAdults, min:1 },
            { k:'rooms', name:'Rooms', val:rooms, set:setRooms, min:1 },
          ].map(r => (
            <div key={r.k} className="app-bgate-sheet__step">
              <div>
                <div className="app-bgate-sheet__step-l">{r.name}</div>
                <div className="app-bgate-sheet__step-s">{r.val}</div>
              </div>
              <div className="app-bgate-sheet__step-ct">
                <button onClick={() => r.set(Math.max(r.min, r.val - 1))}>−</button>
                <span>{r.val}</span>
                <button onClick={() => r.set(r.val + 1)}>+</button>
              </div>
            </div>
          ))}
        </div>

        <div className="app-bgate-sheet__summary">
          <div>
            <div style={{font:'600 9.5px var(--font-body)',letterSpacing:'.14em',textTransform:'uppercase',color:'var(--leaf-700)'}}>
              {nights} {nights === 1 ? 'night' : 'nights'} · {rooms} {rooms === 1 ? 'room' : 'rooms'} · {adults} adults
            </div>
            <div style={{font:'500 10.5px var(--font-mono)',color:'var(--fg-3)',marginTop:2}}>
              {nights}×{rooms}×₹{ratePerNight.toLocaleString()} + 5% tax
            </div>
          </div>
          <strong>₹{total.toLocaleString()}</strong>
        </div>
        <button className="app-bgate-sheet__submit"
          onClick={() => onProceed({ start, end, adults, children, rooms, nights, ratePerNight, subtotal, tax, total })}>
          Continue to payment →
        </button>
      </div>
    </>
  );
}
window.MobileBookingGate = MobileBookingGate;