/* HelpMe — Bookings + Profile */

function BookingCard({ b, onView, onReview }) {
  const past = b.status === 'past';
  return (
    <div style={{ background: T.card, border: `1px solid ${T.line}`, borderRadius: 18, overflow: 'hidden', boxShadow: '0 4px 16px rgba(16,40,66,0.05)' }}>
      <div style={{ display: 'flex', gap: 13, padding: 14 }}>
        <Img src={b.img} grad={b.grad} radius={13} style={{ width: 74, height: 74, flexShrink: 0 }} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 }}>
            <span style={{ fontFamily: DISP, fontWeight: 700, fontSize: 18, color: T.ink, whiteSpace: 'nowrap' }}>{b.place}</span>
            <span style={{ fontFamily: SANS, fontWeight: 700, fontSize: 11, padding: '4px 10px', borderRadius: 7, flexShrink: 0,
              background: past ? T.cream2 : T.tealBg, color: past ? T.muted : T.tealDk }}>{past ? 'COMPLETED' : 'UPCOMING'}</span>
          </div>
          <div style={{ fontFamily: SANS, fontSize: 13, color: T.muted, marginTop: 3 }}>{b.sub}</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 7, fontFamily: SANS, fontSize: 13.5, color: T.body, fontWeight: 600 }}>
            <Icon name="calendar" size={15} color={T.teal} />{b.date}
            <span style={{ width: 3, height: 3, borderRadius: 9, background: T.muted, margin: '0 2px' }} />
            <span style={{ fontFamily: MONO, fontSize: 12 }}>{b.code}</span>
          </div>
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 16px', borderTop: `1px solid ${T.line}`, background: T.cream }}>
        <span style={{ fontFamily: SANS, fontWeight: 800, fontSize: 16, color: T.ink }}>${b.total.toFixed(2)}</span>
        {past ? (
          <button onClick={() => onReview && onReview(b.place)} style={ghostMini}><Icon name="star" size={15} color={T.gold} /> Leave a review</button>
        ) : (
          <button onClick={onView} style={{ ...ghostMini, borderColor: T.navy, color: T.navy }}><Icon name="qr" size={16} color={T.navy} /> View pass</button>
        )}
      </div>
    </div>
  );
}
const ghostMini = { display: 'flex', alignItems: 'center', gap: 7, background: T.white, border: `1px solid ${T.line}`, borderRadius: 10, padding: '9px 14px', cursor: 'pointer', fontFamily: SANS, fontWeight: 700, fontSize: 13.5, color: T.body, whiteSpace: 'nowrap' };

function Bookings({ onNav, bookings, onView, onReview }) {
  const [tab, setTab] = React.useState('upcoming');
  const list = bookings.filter(b => b.status === tab);
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: T.cream }}>
      <div style={{ background: T.navy, paddingBottom: 16, borderBottomLeftRadius: 26, borderBottomRightRadius: 26, flexShrink: 0 }}>
        <StatusBar light />
        <div style={{ padding: '4px 22px 0' }}>
          <h1 style={{ fontFamily: DISP, fontWeight: 800, fontSize: 30, color: '#fff', margin: '2px 0 14px' }}>My Bookings</h1>
          <div style={{ display: 'flex', gap: 8, background: 'rgba(255,255,255,0.08)', borderRadius: 12, padding: 4 }}>
            {[['upcoming', 'Upcoming'], ['past', 'Past']].map(([id, l]) => (
              <button key={id} onClick={() => setTab(id)} style={{ flex: 1, padding: '10px 0', borderRadius: 9, cursor: 'pointer', border: 'none',
                background: tab === id ? '#fff' : 'transparent', color: tab === id ? T.navy : 'rgba(255,255,255,0.8)', fontFamily: SANS, fontWeight: 700, fontSize: 14.5 }}>{l}</button>
            ))}
          </div>
        </div>
      </div>
      <div style={{ flex: 1, overflowY: 'auto' }}>
        <div style={{ padding: '18px 22px 110px', display: 'flex', flexDirection: 'column', gap: 14 }}>
          {list.length ? list.map(b => <BookingCard key={b.id} b={b} onView={onView} onReview={onReview} />)
            : <div style={{ textAlign: 'center', padding: '50px 20px' }}>
                <div style={{ width: 64, height: 64, borderRadius: 999, background: T.cream2, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 14px' }}><Icon name="ticket" size={28} color={T.muted} /></div>
                <div style={{ fontFamily: DISP, fontWeight: 700, fontSize: 20, color: T.ink }}>Nothing here yet</div>
                <div style={{ fontFamily: SANS, fontSize: 14.5, color: T.muted, marginTop: 4 }}>Your {tab} tickets will appear here.</div>
              </div>}
        </div>
      </div>
      <BottomNav active="bookings" onNav={onNav} />
    </div>
  );
}

function Profile({ onNav, lang, setLang, onSignOut }) {
  const [openLang, setOpenLang] = React.useState(false);
  const langLabel = (HM.LANGS.find(l => l.code === lang) || HM.LANGS[0]).label;
  const rows = [
    { icon: 'globe', label: 'Language', detail: langLabel, onClick: () => setOpenLang(true) },
    { icon: 'bell', label: 'Notifications', detail: 'On' },
    { icon: 'ticket', label: 'Payment methods', detail: '•••• 4242' },
    { icon: 'download', label: 'Offline guides', detail: '2 saved' },
  ];
  const rows2 = [
    { icon: 'shield-check', label: 'Scam Shield settings', onClick: () => onNav('shield') },
    { icon: 'heart', label: 'Saved places', detail: '5' },
    { icon: 'info', label: 'Help & support' },
  ];
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: T.cream }}>
      <div style={{ background: T.navy, paddingBottom: 22, borderBottomLeftRadius: 26, borderBottomRightRadius: 26, flexShrink: 0 }}>
        <StatusBar light />
        <div style={{ padding: '6px 22px 0', display: 'flex', alignItems: 'center', gap: 15 }}>
          <div style={{ width: 64, height: 64, borderRadius: 999, background: '#fff', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, boxShadow: '0 4px 14px rgba(0,0,0,0.2)' }}>
            <img src="app/assets/user-photo.jpg" alt="Zhang Liming" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: DISP, fontWeight: 700, fontSize: 24, color: '#fff' }}>Zhang Liming</div>
            <div style={{ fontFamily: SANS, fontSize: 13.5, color: 'rgba(255,255,255,0.65)' }}>lymeng.pen@dojology.com</div>
          </div>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, background: 'rgba(207,154,53,0.18)', border: `1px solid ${T.gold}66`, borderRadius: 999, padding: '6px 11px', fontFamily: SANS, fontWeight: 700, fontSize: 12, color: T.gold }}><Icon name="sparkle" size={13} color={T.gold} />Explorer</span>
        </div>
        <div style={{ display: 'flex', margin: '18px 22px 0', background: 'rgba(255,255,255,0.07)', borderRadius: 14, padding: '12px 0' }}>
          {[['7', 'Places visited'], ['3', 'Bookings'], ['4.2h', 'Audio heard']].map((s, i) => (
            <div key={i} style={{ flex: 1, textAlign: 'center', borderRight: i < 2 ? '1px solid rgba(255,255,255,0.12)' : 'none' }}>
              <div style={{ fontFamily: DISP, fontWeight: 800, fontSize: 21, color: '#fff' }}>{s[0]}</div>
              <div style={{ fontFamily: SANS, fontSize: 11.5, color: 'rgba(255,255,255,0.6)' }}>{s[1]}</div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ flex: 1, overflowY: 'auto', position: 'relative' }}>
        <div style={{ padding: '18px 22px 110px' }}>
          <SettingGroup rows={rows} />
          <div style={{ height: 14 }} />
          <SettingGroup rows={rows2} />
          <button onClick={onSignOut} style={{ width: '100%', marginTop: 18, padding: 16, borderRadius: 16, border: `1px solid ${T.line}`, background: T.card, color: T.danger, cursor: 'pointer', fontFamily: SANS, fontWeight: 700, fontSize: 15.5 }}>Sign out</button>
          <div style={{ textAlign: 'center', marginTop: 16, fontFamily: SANS, fontSize: 12.5, color: T.muted }}>GoWithMe · v1.0 · gowithme.dojology.com</div>
        </div>

        {openLang && (
          <div style={{ position: 'absolute', inset: 0, zIndex: 40, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
            <div onClick={() => setOpenLang(false)} style={{ position: 'absolute', inset: 0, background: 'rgba(8,18,32,0.4)' }} />
            <div style={{ position: 'relative', background: T.card, borderTopLeftRadius: 24, borderTopRightRadius: 24, padding: '14px 22px 26px' }}>
              <div style={{ width: 42, height: 5, borderRadius: 999, background: T.line, margin: '0 auto 16px' }} />
              <h3 style={{ fontFamily: DISP, fontWeight: 700, fontSize: 22, color: T.ink, margin: '0 0 14px' }}>Guide language</h3>
              {HM.LANGS.map(l => (
                <button key={l.code} onClick={() => { setLang(l.code); setOpenLang(false); }} style={{
                  width: '100%', display: 'flex', alignItems: 'center', gap: 12, padding: '14px 4px', cursor: 'pointer', background: 'none', border: 'none', borderBottom: `1px solid ${T.line}`,
                }}>
                  <span style={{ fontSize: 22 }}>{l.flag}</span>
                  <span style={{ flex: 1, textAlign: 'left', fontFamily: SANS, fontWeight: 600, fontSize: 16, color: T.ink }}>{l.label}</span>
                  {lang === l.code && <Icon name="check" size={20} color={T.teal} />}
                </button>
              ))}
            </div>
          </div>
        )}
      </div>
      <BottomNav active="profile" onNav={onNav} />
    </div>
  );
}

function SettingGroup({ rows }) {
  return (
    <div style={{ background: T.card, border: `1px solid ${T.line}`, borderRadius: 16, padding: '0 16px' }}>
      {rows.map((r, i) => (
        <div key={r.label} onClick={r.onClick} style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '15px 0', borderBottom: i < rows.length - 1 ? `1px solid ${T.line}` : 'none', cursor: r.onClick ? 'pointer' : 'default' }}>
          <div style={{ width: 38, height: 38, borderRadius: 11, background: T.cream, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={r.icon} size={19} color={T.navy} /></div>
          <span style={{ flex: 1, fontFamily: SANS, fontWeight: 600, fontSize: 15.5, color: T.ink }}>{r.label}</span>
          {r.detail && <span style={{ fontFamily: SANS, fontSize: 14, color: T.muted }}>{r.detail}</span>}
          <Icon name="chevron-right" size={18} color={T.muted} />
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { Bookings, Profile });