<bmx-seat-map>

<div class="row" role="group" aria-label="Venue" style="gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-block-end: 0.75rem">
  <button type="button" id="ex-sm-theatre" aria-pressed="true">Theatre</button>
  <button type="button" id="ex-sm-arena" aria-pressed="false">Arena</button>
  <button type="button" id="ex-sm-cabin" aria-pressed="false">Aircraft cabin</button>
  <label style="margin-inline-start: auto"><input type="checkbox" id="ex-sm-edit" /> Edit the layout</label>
</div>

<bmx-seat-map id="ex-sm" locale="en-GB" max-seats="8"></bmx-seat-map>
<p class="note" id="ex-sm-out" role="status">A fictional theatre: stalls in curved rows with a centre aisle, a dress circle, two boxes and wheelchair spaces with companion seats. Choose seats on the map, with the arrow keys, from the seat list, or with "Find seats" - the page holds each seat for you as a box office would (about one in fifteen has "just been taken" by someone else), and a ten-minute hold counts down once you have seats.</p>

<script type="module">
  await customElements.whenDefined('bmx-seat-map');
  const el = document.getElementById('ex-sm');
  const out = document.getElementById('ex-sm-out');

  // The same "sales" on every visit.
  let seed = 11;
  const random = () => ((seed = (seed * 16807) % 2147483647) / 2147483647);

  const theatre = {
    name: 'The Harbour Playhouse',
    event: 'The Lighthouse Keeper - Saturday 14 November, 19:30',
    currency: 'GBP',
    zones: [
      { id: 'prime', name: 'Premium', price: 68, description: 'The best view of the stage' },
      { id: 'a', name: 'Band A', price: 52 },
      { id: 'b', name: 'Band B', price: 38 },
      { id: 'c', name: 'Band C', price: 24, description: 'Some seats have a restricted view' },
      { id: 'box', name: 'Boxes', price: 85 },
    ],
    stage: { label: 'Stage', shape: 'arc', x: -14, y: -3, width: 28, height: 5 },
    sections: [
      { id: 'STALLS-L', name: 'Stalls left', zone: 'b', shape: 'arc', x: 0, y: -14, bearing: -16, radius: 18, rows: 'A-N', seats: [8, 8, 9, 9, 10, 10, 10, 11, 11, 11, 12, 12, 12, 12], numbering: 'descending', seatStart: 101, rowZones: { 'A-E': 'prime', 'F-J': 'a' }, overrides: { 'N:101': { type: 'wheelchair' }, 'N:102': { type: 'companion' }, 'N:103': { type: 'wheelchair' }, 'N:104': { type: 'companion' } } },
      { id: 'STALLS-R', name: 'Stalls right', zone: 'b', shape: 'arc', x: 0, y: -14, bearing: 16, radius: 18, rows: 'A-N', seats: [8, 8, 9, 9, 10, 10, 10, 11, 11, 11, 12, 12, 12, 12], seatStart: 1, rowZones: { 'A-E': 'prime', 'F-J': 'a' }, overrides: { 'N:11': { type: 'companion' }, 'N:12': { type: 'wheelchair' } } },
      { id: 'CIRCLE', name: 'Dress circle', zone: 'a', shape: 'arc', x: 0, y: -14, bearing: 0, radius: 40, rows: 'A-H', seats: [30, 32, 34, 34, 36, 36, 38, 38], aisles: [8, 26], rowZones: { 'F-H': 'c' }, overrides: { 'H:1': { type: 'restricted', note: 'Pillar to the left' }, 'H:2': { type: 'restricted', note: 'Pillar to the left' }, 'H:37': { type: 'restricted', note: 'Pillar to the right' }, 'H:38': { type: 'restricted', note: 'Pillar to the right' } } },
      { id: 'BOX-L', name: 'Box A', zone: 'box', x: -27, y: 6, rotate: 62, rows: 2, seats: 3 },
      { id: 'BOX-R', name: 'Box B', zone: 'box', x: 27, y: 6, rotate: -62, rows: 2, seats: 3 },
    ],
    labels: [{ text: 'Main entrance', x: 0, y: 39, size: 1.4 }],
  };

  // A bowl of twenty blocks in two tiers round the floor, open at the stage end, and a standing floor.
  const lowerSeats = Array.from({ length: 17 }, (_, r) => Math.floor((60 + r * 1.2) * 0.227));
  const upperSeats = Array.from({ length: 21 }, (_, r) => Math.floor((92 + r * 1.2) * 0.227));
  const arena = {
    name: 'Riverside Arena',
    event: 'Northern Lights Live - Friday 4 December, 20:00',
    currency: 'GBP',
    zones: [
      { id: 'gold', name: 'Gold', price: 95 },
      { id: 'lower', name: 'Lower tier', price: 65 },
      { id: 'upper', name: 'Upper tier', price: 42 },
      { id: 'floor', name: 'Floor standing', price: 55 },
    ],
    stage: { label: 'Stage', x: -24, y: -58, width: 48, height: 13 },
    areas: [{ id: 'PIT', name: 'Floor standing', zone: 'floor', capacity: 2500, x: -38, y: -40, width: 76, height: 72 }],
    sections: Array.from({ length: 20 }, (_, i) => ({ id: `${101 + i}`, name: `Block ${101 + i}`, zone: Math.abs(i - 9.5) < 4 ? 'gold' : 'lower', shape: 'arc', x: 0, y: 0, bearing: -142.5 + i * 15, radius: 60, rows: 'A-Q', seats: lowerSeats, rowZones: Math.abs(i - 9.5) < 4 ? { 'J-Q': 'lower' } : {} }))
      .concat(Array.from({ length: 20 }, (_, i) => ({ id: `${201 + i}`, name: `Block ${201 + i}`, zone: 'upper', shape: 'arc', x: 0, y: 0, bearing: -142.5 + i * 15, radius: 92, rows: 'A-U', seats: upperSeats }))),
  };

  const cabin = {
    name: 'Example Air A321',
    event: 'Flight EA 204 Manchester - Lisbon, 08:15',
    currency: 'EUR',
    zones: [
      { id: 'biz', name: 'Business', price: 189 },
      { id: 'xl', name: 'Extra legroom', price: 34 },
      { id: 'std', name: 'Standard', price: 12 },
    ],
    stage: { label: 'Front', x: -4, y: -5, width: 8, height: 2.5 },
    sections: [
      { id: 'BIZ', name: 'Business', zone: 'biz', shape: 'cabin', x: 0, y: 0, rows: '1-3', columns: 'AC DF', seatPitch: 1.5, rowPitch: 1.7 },
      { id: 'MAIN', name: 'Economy', zone: 'std', shape: 'cabin', x: 0, y: 6.5, rows: '4-12,14-33', columns: 'ABC DEF', exitRows: ['15', '16'], rowZones: { '4-6': 'xl', '15-16': 'xl' } },
    ],
  };

  const venues = { theatre, arena, cabin };
  // Seats already sold, in small groups as people buy them.
  const rowsOf = spec => String(spec).split(',').flatMap(part => {
    const [a, b = a] = part.split('-');
    if (/^\d+$/.test(a)) return Array.from({ length: Number(b) - Number(a) + 1 }, (_, i) => String(Number(a) + i));
    return Array.from({ length: b.charCodeAt(0) - a.charCodeAt(0) + 1 }, (_, i) => String.fromCharCode(a.charCodeAt(0) + i));
  });
  const sold = {};
  for (const [name, layout] of Object.entries(venues)) {
    sold[name] = [];
    const share = name === 'arena' ? 0.62 : name === 'cabin' ? 0.5 : 0.45;
    for (const section of layout.sections) {
      rowsOf(section.rows).forEach((row, r) => {
        const labels = section.shape === 'cabin'
          ? [...section.columns.replace(/ /g, '')]
          : Array.from({ length: Array.isArray(section.seats) ? section.seats[Math.min(r, section.seats.length - 1)] : section.seats }, (_, i) => String((section.seatStart ?? 1) + i));
        for (let i = 0; i < labels.length; ) {
          if (random() < share / 2.5) {
            const run = 1 + Math.floor(random() * 4);
            for (let k = 0; k < run && i < labels.length; k++, i++) sold[name].push(`${section.id}:${row}:${labels[i]}`);
          } else i += 1 + Math.floor(random() * 3);
        }
      });
    }
  }

  let current = 'theatre';
  const show = name => {
    current = name;
    for (const id of ['theatre', 'arena', 'cabin']) document.getElementById(`ex-sm-${id}`).setAttribute('aria-pressed', String(id === name));
    el.layout = venues[name];
    el.availability = { sold: sold[name], held: name === 'theatre' ? ['CIRCLE:C:14-17'] : [], areas: { PIT: 1830 } };
    el.ticketTypes = name === 'cabin' ? [] : [
      { id: 'adult', name: 'Adult' },
      { id: 'child', name: 'Child (under 16)', factor: 0.5, zones: ['a', 'b', 'c', 'lower', 'upper'] },
      { id: 'conc', name: 'Concession', factor: 0.8 },
    ];
    el.fees = name === 'cabin' ? [] : [{ label: 'Booking fee', perTicket: 1.5 }];
    el.holdUntil = undefined;
  };
  show('theatre');

  for (const id of ['theatre', 'arena', 'cabin']) document.getElementById(`ex-sm-${id}`).addEventListener('click', () => show(id));
  document.getElementById('ex-sm-edit').addEventListener('change', e => (el.mode = e.target.checked ? 'edit' : 'pick'));

  // The page holds each seat on its "server" first, as a box office would.
  el.addEventListener('bmxSelect', e => {
    if (e.detail.action !== 'add') return;
    e.preventDefault();
    const id = e.detail.seat.id;
    out.textContent = `Holding ${e.detail.seat.name}…`;
    setTimeout(() => {
      if (random() < 1 / 15) {
        el.setSeatStatus([id], 'sold');
        out.textContent = `${e.detail.seat.name} has just been taken by someone else.`;
        return;
      }
      el.select([id]);
      if (!el.holdUntil) el.holdUntil = new Date(Date.now() + 10 * 60000).toISOString();
      out.textContent = `${e.detail.seat.name} is held for you.`;
    }, 250);
  });
  el.addEventListener('bmxSelectionChange', e => {
    const { seats, areas, totals } = e.detail;
    if (!seats.length && !areas.length) el.holdUntil = undefined;
    console.info('Order:', seats.map(s => `${s.id} ${s.ticketType ?? ''} ${s.price}`), areas, totals);
  });
  el.addEventListener('bmxCheckout', e => {
    out.textContent = `Checkout: ${e.detail.totals.count} tickets, ${new Intl.NumberFormat('en-GB', { style: 'currency', currency: e.detail.currency }).format(e.detail.totals.total)}. A real page goes to its payment step here.`;
  });
  el.addEventListener('bmxHoldExpire', () => {
    el.clearSelection();
    out.textContent = 'The hold ended, so the seats went back on sale.';
  });
  el.addEventListener('bmxLayoutChange', e => {
    venues[current] = e.detail.layout;
    console.info('Layout changed:', e.detail.reason);
  });
</script>