// 14 · My Bookings   ·   15 · Ticket detail / download   ·   16 · Favorites

// ───────────────────────────────────────────────
// Shared account shell — sidebar + content
// ───────────────────────────────────────────────
function AccountShell({ active, children, onNav }) {
  const C = window.V4;
  const nav = [
    { id: 'bookings', label: 'My bookings', icon: 'ticket', count: 3 },
    { id: 'favorites', label: 'Favorites', icon: 'heart', count: 8 },
    { id: 'ticket', label: 'Single ticket', icon: 'qr' },
    { id: 'profile', label: 'Profile', icon: 'user' },
    { id: 'wallet', label: 'Payment methods', icon: 'wallet' },
    { id: 'settings', label: 'Settings', icon: 'info' },
  ];
  return (
    <div data-screen-label={active} style={{ background: C.bg, minHeight: '100vh' }}>
      <V4TopNav onNav={onNav} transparent={false}/>
      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '40px 40px 80px', display: 'grid', gridTemplateColumns: '260px 1fr', gap: 40 }}>
        <aside>
          {/* User card */}
          <div style={{ padding: 18, background: C.paper, borderRadius: 14, border: `1px solid ${C.line}`, display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
            <div style={{
              width: 44, height: 44, borderRadius: 99, background: C.gradient, color: '#fff',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 16,
            }}>PS</div>
            <div>
              <div style={{ fontSize: 14, fontWeight: 500 }}>Priya Sharma</div>
              <div style={{ fontSize: 11.5, color: C.ink3 }}>priya.s@gmail.com</div>
            </div>
          </div>
          {/* Nav */}
          <nav style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            {nav.map(n => (
              <button key={n.id} onClick={() => n.id === 'bookings' ? onNav('bookings') : n.id === 'favorites' ? onNav('favorites') : n.id === 'ticket' ? onNav('ticket') : null} style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '12px 14px', borderRadius: 10, border: 0,
                background: active.startsWith(n.id) ? C.ink : 'transparent',
                color: active.startsWith(n.id) ? '#fff' : C.ink2,
                fontSize: 13.5, fontWeight: active.startsWith(n.id) ? 600 : 500,
                cursor: 'pointer', textAlign: 'left', justifyContent: 'flex-start',
              }}>
                <V4Icon name={n.icon} size={15}/>
                <span style={{ flex: 1 }}>{n.label}</span>
                {n.count != null && (
                  <span style={{ fontSize: 11, fontFamily: 'var(--font-mono)', opacity: 0.7 }}>{n.count}</span>
                )}
              </button>
            ))}
          </nav>
        </aside>
        <main>{children}</main>
      </div>
      <V4Footer/>
    </div>
  );
}

// ───────────────────────────────────────────────
// 14 · My Bookings
// ───────────────────────────────────────────────
function ScreenMyBookings({ onNav }) {
  const C = window.V4;
  const allEvents = window.DESI_EVENTS;
  const [tab, setTab] = React.useState('upcoming');

  const upcoming = [
    { event: allEvents[0], ref: 'DSP-4KX9M2', qty: 2, tier: 'Gold Standing', paid: 301.6 },
    { event: allEvents[1], ref: 'DSP-8PL2X7', qty: 1, tier: 'Cat 1 Seated', paid: 99.9 },
  ];
  const past = [
    { event: allEvents[5], ref: 'DSP-2MN1W8', qty: 2, tier: 'GA', paid: 130, rating: 5 },
    { event: allEvents[7], ref: 'DSP-9TR3L4', qty: 1, tier: 'VIP', paid: 220, rating: 4 },
  ];

  return (
    <AccountShell active="bookings" onNav={onNav}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 24 }}>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, letterSpacing: '0.18em', textTransform: 'uppercase', color: C.red, marginBottom: 10, fontWeight: 600 }}>My bookings</div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 48, fontWeight: 500, letterSpacing: '-0.028em', margin: 0 }}>
            Your <em style={{ fontFamily: 'var(--font-serif-italic)', fontStyle: 'italic', color: C.red }}>tickets.</em>
          </h1>
        </div>
        <div style={{ fontSize: 13, color: C.ink2 }}>
          {upcoming.length} upcoming · {past.length} past
        </div>
      </div>

      {/* Tabs */}
      <div style={{ display: 'flex', gap: 2, background: C.bgAlt, padding: 4, borderRadius: 99, marginBottom: 24, width: 'fit-content' }}>
        {[
          { id: 'upcoming', label: `Upcoming (${upcoming.length})` },
          { id: 'past', label: `Past (${past.length})` },
          { id: 'cancelled', label: 'Cancelled (0)' },
        ].map(t => (
          <button key={t.id} onClick={() => setTab(t.id)} style={{
            height: 38, padding: '0 18px', borderRadius: 99, border: 0,
            background: tab === t.id ? C.paper : 'transparent',
            color: tab === t.id ? C.ink : C.ink3,
            fontSize: 13, fontWeight: 600, cursor: 'pointer',
            boxShadow: tab === t.id ? '0 1px 3px rgba(0,0,0,0.08)' : 'none',
          }}>{t.label}</button>
        ))}
      </div>

      {tab === 'upcoming' && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {upcoming.map(b => (
            <BookingCard key={b.ref} booking={b} onNav={onNav} upcoming/>
          ))}
        </div>
      )}
      {tab === 'past' && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {past.map(b => (
            <BookingCard key={b.ref} booking={b} onNav={onNav}/>
          ))}
        </div>
      )}
      {tab === 'cancelled' && (
        <div style={{ padding: '60px', textAlign: 'center', background: C.paper, borderRadius: 16, border: `1px solid ${C.line}` }}>
          <div style={{ fontSize: 44, marginBottom: 12 }}>🎉</div>
          <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 500, margin: '0 0 6px' }}>No cancellations. Ever.</h3>
          <p style={{ color: C.ink2, fontSize: 14, margin: 0 }}>Every show you've booked has gone ahead as planned.</p>
        </div>
      )}
    </AccountShell>
  );
}

function BookingCard({ booking, onNav, upcoming }) {
  const C = window.V4;
  const e = booking.event;
  const daysTo = 12; // mock
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '100px 1fr auto', gap: 20,
      padding: 20, background: C.paper, borderRadius: 14,
      border: `1px solid ${C.line}`,
    }}>
      <div style={{ width: 100, aspectRatio: '3/4', borderRadius: 8, overflow: 'hidden' }}>
        <window.DesiPoster event={e}/>
      </div>
      <div>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 4 }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.12em', color: C.red, textTransform: 'uppercase', fontWeight: 600 }}>
            {e.dateShort} · {e.day}
          </span>
          {upcoming && daysTo < 14 && (
            <span style={{ padding: '3px 9px', borderRadius: 99, background: C.saffron + '22', color: C.saffron, fontSize: 10, fontWeight: 700, letterSpacing: '0.1em' }}>
              IN {daysTo} DAYS
            </span>
          )}
        </div>
        <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 500, letterSpacing: '-0.02em', margin: '0 0 6px' }}>{e.artist}</h3>
        <div style={{ fontSize: 13, color: C.ink2 }}>{e.venue}, {e.city} · {e.time}</div>
        <div style={{ display: 'flex', gap: 14, marginTop: 10, fontSize: 12, color: C.ink3, fontFamily: 'var(--font-mono)' }}>
          <span>Ref {booking.ref}</span>
          <span>·</span>
          <span>{booking.qty} × {booking.tier}</span>
          <span>·</span>
          <span>€{booking.paid.toFixed(2).replace('.', ',')}</span>
        </div>
        {!upcoming && booking.rating && (
          <div style={{ marginTop: 10, display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ color: C.saffron, fontSize: 13 }}>{'★'.repeat(booking.rating)}{'☆'.repeat(5-booking.rating)}</span>
            <span style={{ fontSize: 12, color: C.ink3 }}>Your rating</span>
          </div>
        )}
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'flex-end' }}>
        {upcoming ? (
          <>
            <button onClick={() => onNav('ticket')} style={{
              height: 40, padding: '0 16px', borderRadius: 99,
              background: C.ink, color: '#fff', border: 0,
              fontSize: 13, fontWeight: 600, cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', gap: 6,
            }}><V4Icon name="qr" size={13}/> View ticket</button>
            <button style={smallBtn(C)}>Add to calendar</button>
            <button style={smallBtn(C)}>Share with friends</button>
          </>
        ) : (
          <>
            <button style={smallBtn(C)}>Download receipt</button>
            <button style={smallBtn(C)}>Book similar</button>
            {!booking.rating && <button style={{ ...smallBtn(C), color: C.red, borderColor: C.red }}>Rate this show</button>}
          </>
        )}
      </div>
    </div>
  );
}

function smallBtn(C) {
  return {
    height: 34, padding: '0 12px', borderRadius: 99,
    background: 'transparent', color: C.ink, border: `1px solid ${C.line}`,
    fontSize: 12, fontWeight: 500, cursor: 'pointer', whiteSpace: 'nowrap',
  };
}

// ───────────────────────────────────────────────
// 15 · Ticket detail / download
// ───────────────────────────────────────────────
function ScreenTicket({ onNav }) {
  const C = window.V4;
  const event = window.DESI_EVENTS[0];
  const ref = 'DSP-4KX9M2';

  return (
    <AccountShell active="ticket" onNav={onNav}>
      <button onClick={() => onNav('bookings')} style={{
        background: 'none', border: 0, color: C.ink2, fontSize: 13, cursor: 'pointer',
        display: 'inline-flex', alignItems: 'center', gap: 6, padding: 0, marginBottom: 20,
      }}><V4Icon name="cheL" size={14}/> Back to bookings</button>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: 40 }}>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, letterSpacing: '0.18em', textTransform: 'uppercase', color: C.red, marginBottom: 10, fontWeight: 600 }}>Your ticket · In 12 days</div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 500, letterSpacing: '-0.025em', margin: '0 0 22px' }}>{event.artist}</h1>

          {/* Big ticket stub */}
          <window.TicketStub event={event} bookingRef={ref}/>

          {/* Action row */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, marginTop: 20 }}>
            {[
              { i: 'qr',       l: 'Open in Wallet' },
              { i: 'calendar', l: 'Add to calendar' },
              { i: 'share',    l: 'Share' },
              { i: 'ticket',   l: 'Download PDF' },
            ].map(a => (
              <button key={a.l} style={{
                padding: '14px 10px', background: C.paper, borderRadius: 12,
                border: `1px solid ${C.line}`, cursor: 'pointer',
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
                fontSize: 12.5, fontWeight: 500, color: C.ink,
              }}>
                <V4Icon name={a.i} size={18}/> {a.l}
              </button>
            ))}
          </div>

          {/* Venue info */}
          <section style={{ marginTop: 40 }}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 500, margin: '0 0 16px' }}>Venue</h2>
            <div style={{
              padding: 20, background: C.paper, borderRadius: 14, border: `1px solid ${C.line}`,
              display: 'grid', gridTemplateColumns: '1fr 200px', gap: 20,
            }}>
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 500, marginBottom: 4 }}>{event.venue}</div>
                <div style={{ fontSize: 13, color: C.ink2, marginBottom: 14 }}>{event.address}</div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, fontSize: 13 }}>
                  <div><strong>Doors:</strong> {event.doors}</div>
                  <div><strong>Show:</strong> {event.time}</div>
                  <div><strong>Duration:</strong> {event.duration}</div>
                  <div><strong>Age:</strong> {event.ageRestriction}</div>
                </div>
              </div>
              {/* Map */}
              <div style={{ aspectRatio: '1', borderRadius: 10, background: C.bgAlt, position: 'relative', overflow: 'hidden' }}>
                <svg viewBox="0 0 200 200" style={{ width: '100%', height: '100%' }}>
                  {/* Grid */}
                  {[40, 80, 120, 160].map(x => <line key={'v'+x} x1={x} y1="0" x2={x} y2="200" stroke={C.line} strokeWidth="1"/>)}
                  {[40, 80, 120, 160].map(y => <line key={'h'+y} x1="0" y1={y} x2="200" y2={y} stroke={C.line} strokeWidth="1"/>)}
                  <path d="M 0 90 Q 50 80 100 100 T 200 110" stroke={C.line} strokeWidth="4" fill="none"/>
                  <circle cx="100" cy="100" r="10" fill={C.red}/>
                  <circle cx="100" cy="100" r="20" fill={C.red} opacity="0.2"/>
                </svg>
                <button style={{
                  position: 'absolute', bottom: 8, left: 8, right: 8,
                  height: 30, borderRadius: 99, background: '#fff', border: `1px solid ${C.line}`,
                  fontSize: 11, fontWeight: 600, cursor: 'pointer',
                }}>Open in Maps</button>
              </div>
            </div>
          </section>

          {/* Perks */}
          <section style={{ marginTop: 32 }}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 500, margin: '0 0 16px' }}>Your perks · Unlocked</h2>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
              {[
                { b: 'FoodRista', o: '15% off', c: 'FOOD15' },
                { b: 'FreeNow', o: '€8 ride credit', c: 'DESIPASS8' },
              ].map(p => (
                <div key={p.b} style={{ padding: 18, background: C.paper, borderRadius: 12, border: `1px dashed ${C.red}` }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.14em', color: C.ink3, textTransform: 'uppercase', fontWeight: 600 }}>{p.b}</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500, color: C.red, margin: '4px 0 8px' }}>{p.o}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, padding: '6px 10px', background: C.bgAlt, borderRadius: 6, display: 'inline-block' }}>Code: {p.c}</div>
                </div>
              ))}
            </div>
          </section>
        </div>

        {/* Sidebar */}
        <aside style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div style={{ padding: 20, background: C.ink, color: '#fff', borderRadius: 14 }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.14em', color: 'rgba(255,255,255,0.6)', marginBottom: 8, textTransform: 'uppercase' }}>Countdown to show</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 46, fontWeight: 500, lineHeight: 1 }}>12 days</div>
            <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.7)', marginTop: 6 }}>04h 22m 18s</div>
          </div>
          <div style={{ padding: 20, background: C.paper, borderRadius: 14, border: `1px solid ${C.line}` }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.14em', color: C.ink3, marginBottom: 10, textTransform: 'uppercase', fontWeight: 600 }}>Need help?</div>
            <button style={{ ...smallBtn(C), width: '100%', height: 40, marginBottom: 8 }}>Transfer to a friend</button>
            <button style={{ ...smallBtn(C), width: '100%', height: 40, marginBottom: 8 }}>Request refund</button>
            <button style={{ ...smallBtn(C), width: '100%', height: 40 }}>Contact organiser</button>
          </div>
          <div style={{ padding: 20, background: C.paper, borderRadius: 14, border: `1px solid ${C.line}` }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.14em', color: C.ink3, marginBottom: 10, textTransform: 'uppercase', fontWeight: 600 }}>Getting there</div>
            <ul style={{ margin: 0, paddingLeft: 18, fontSize: 12.5, color: C.ink2, lineHeight: 1.7 }}>
              <li>🚇 U1 to Warschauer Straße</li>
              <li>🚆 S-Bahn to Ostbahnhof</li>
              <li>🚗 Paid parking on-site (€12)</li>
              <li>♿ Step-free access at Gate C</li>
            </ul>
          </div>
        </aside>
      </div>
    </AccountShell>
  );
}

// ───────────────────────────────────────────────
// 16 · Favorites
// ───────────────────────────────────────────────
function ScreenFavorites({ onNav }) {
  const C = window.V4;
  const favs = window.DESI_EVENTS.slice(0, 8);
  const [view, setView] = React.useState('grid');

  return (
    <AccountShell active="favorites" onNav={onNav}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 24 }}>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, letterSpacing: '0.18em', textTransform: 'uppercase', color: C.red, marginBottom: 10, fontWeight: 600 }}>Favorites · {favs.length} saved</div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 48, fontWeight: 500, letterSpacing: '-0.028em', margin: 0 }}>
            Your <em style={{ fontFamily: 'var(--font-serif-italic)', fontStyle: 'italic', color: C.red }}>wishlist.</em>
          </h1>
        </div>
        <div style={{ display: 'flex', gap: 10 }}>
          <select style={{
            height: 40, padding: '0 14px', borderRadius: 99,
            border: `1px solid ${C.line}`, background: '#fff', fontSize: 13, cursor: 'pointer',
          }}>
            <option>Sort: Recently saved</option>
            <option>Sort: Soonest</option>
            <option>Sort: Price low → high</option>
          </select>
          <button style={{
            height: 40, padding: '0 16px', borderRadius: 99,
            border: `1px solid ${C.line}`, background: '#fff', fontSize: 13, fontWeight: 500, cursor: 'pointer',
          }}>Set price alerts</button>
        </div>
      </div>

      {/* Group: Still on sale */}
      <FavGroup title="On sale now" count={favs.length - 1} accent={C.green}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
          {favs.slice(0, 4).map(e => (
            <div key={e.id} style={{ position: 'relative' }}>
              <V4EventCard event={e} onNav={onNav}/>
              {/* Override with filled heart */}
              <button style={{
                position: 'absolute', top: 14, right: 14, zIndex: 2,
                width: 34, height: 34, borderRadius: 99,
                background: C.red, color: '#fff', border: 0,
                display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
              }}><V4Icon name="heart" size={15}/></button>
            </div>
          ))}
        </div>
      </FavGroup>

      {/* Group: Sold out */}
      <FavGroup title="Sold out · Join waitlist" count={2} accent={C.saffron}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
          {favs.slice(4, 6).map(e => (
            <div key={e.id} style={{ position: 'relative', opacity: 0.85 }}>
              <V4EventCard event={e} onNav={onNav}/>
              <div style={{
                position: 'absolute', top: '40%', left: '50%', transform: 'translate(-50%, -50%)',
                padding: '8px 16px', background: C.ink, color: '#fff',
                borderRadius: 99, fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
              }}>SOLD OUT</div>
              <button style={{
                position: 'absolute', bottom: 100, left: 0, right: 0, margin: '0 auto',
                width: 'fit-content', height: 34, padding: '0 14px', borderRadius: 99,
                background: C.paper, color: C.red, border: `1px solid ${C.red}`,
                fontSize: 12, fontWeight: 600, cursor: 'pointer',
              }}>+ Join waitlist</button>
            </div>
          ))}
        </div>
      </FavGroup>

      {/* Group: Past */}
      <FavGroup title="Past · No longer available" count={2} accent={C.ink4}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20, opacity: 0.55 }}>
          {favs.slice(6, 8).map(e => <V4EventCard key={e.id} event={e} onNav={onNav}/>)}
        </div>
      </FavGroup>

      {/* Empty bucket prompt */}
      <div style={{ marginTop: 40, padding: 30, background: C.paper, borderRadius: 16, border: `1px dashed ${C.lineStrong}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500 }}>Looking for more?</div>
          <p style={{ fontSize: 13, color: C.ink2, margin: '4px 0 0' }}>Browse Desipass Originals — shows curated by us, only available to members.</p>
        </div>
        <button onClick={() => onNav('events-list')} style={{
          height: 44, padding: '0 20px', borderRadius: 99, background: C.ink, color: '#fff',
          border: 0, fontSize: 13, fontWeight: 600, cursor: 'pointer',
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}>Browse events <V4Icon name="arrow" size={13}/></button>
      </div>
    </AccountShell>
  );
}

function FavGroup({ title, count, accent, children }) {
  const C = window.V4;
  return (
    <section style={{ marginBottom: 48 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 18, paddingBottom: 12, borderBottom: `1px solid ${C.line}` }}>
        <span style={{ width: 8, height: 8, borderRadius: 99, background: accent, display: 'inline-block' }}/>
        <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500, margin: 0 }}>{title}</h3>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: C.ink3 }}>{count}</span>
      </div>
      {children}
    </section>
  );
}

Object.assign(window, { ScreenMyBookings, ScreenTicket, ScreenFavorites });