// screens-adslots.jsx — Backend Werbeplätze (ad slot inventory + calendar)

const { useState: useStateAS } = React;

// ─────────────────────────────────────────────────────────────
// Werbeplätze (ad slot inventory)
// Each slot has: id, name, location, dimension, daily price,
// description, and a list of bookings.
// ─────────────────────────────────────────────────────────────
const AD_SLOTS = [
  {
    id: 'home-banner',
    name: 'Startseiten-Banner',
    placement: 'In-App · Home',
    format: 'Hero-Banner unter Match-Karte',
    dimensions: '402 × 138 px · ~2.840 Imp./Tag',
    pricePerDay: 149,
    cpm: '€ 24',
    description: 'Direkt unter dem Matchday-Hero. Erste sichtbare Werbefläche nach Login. Hohe Tap-Rate — ideal für Mitglieder-Aktionen.',
    bookings: [
      {
        id: 'b1',
        partnerName: 'onlytap GmbH',
        partnerLogo: 'assets/logos/onlytap.png',
        contact: 'Meik Lengk',
        role: 'Geschäftsführer',
        email: 'meik@onlytap.de',
        phone: '+49 234 5896712',
        address: 'Castroper Hellweg 49, 46149 Oberhausen',
        // 16 days starting March 10, 2026
        start: '2026-03-10', end: '2026-03-25',
        days: 16,
        total: 16 * 149,
        creative: 'assets/ads/onlytap-banner.jpg',
        link: 'onlytap.de/vfl-vip',
        status: 'Aktiv',
        invoice: 'RE-2026-0481',
      },
    ],
  },
  {
    id: 'onboarding-poweredby',
    name: 'Powered-by Onboarding',
    placement: 'In-App · Onboarding',
    format: 'Logo-Lockup unter App-Logo',
    dimensions: 'Logo · ~3.200 Imp./Tag',
    pricePerDay: 380,
    cpm: '€ 119',
    description: 'Premium-Position bei jedem App-Start. „Powered by"-Branding mit Logo und Tap-Through.',
    bookings: [
      {
        id: 'b2',
        partnerName: 'H2K Security + Services',
        partnerLogo: 'assets/h2k-logo.png',
        contact: 'Heiko Kurzawa',
        role: 'Geschäftsführer',
        email: 'kurzawa@h2k-security.de',
        phone: '+49 234 5896712',
        address: 'Castroper Hellweg 49, 46149 Oberhausen',
        start: '2025-08-01', end: '2026-07-31',
        days: 365, total: 138700,
        creative: 'assets/h2k-logo.png',
        link: 'h2k-security.de',
        status: 'Aktiv · Saison',
        invoice: 'RE-2025-1124',
      },
    ],
  },
  {
    id: 'matches-banner',
    name: 'Spielplan-Banner',
    placement: 'In-App · Spielplan',
    format: 'Inline-Banner zwischen Spieltagen',
    dimensions: '402 × 96 px · ~1.450 Imp./Tag',
    pricePerDay: 89,
    cpm: '€ 19',
    description: 'Inline-Banner zwischen den Fixtures. Gut sichtbar bei Tickets-Recherche.',
    bookings: [],
  },
  {
    id: 'shop-tile',
    name: 'Shop-Kachel',
    placement: 'In-App · Boutique',
    format: 'Native Kachel im Shop-Grid',
    dimensions: '186 × 186 px · ~980 Imp./Tag',
    pricePerDay: 65,
    cpm: '€ 16',
    description: 'Sponsoren-Kachel im Boutique-Grid. Native Integration zwischen Vereins-Produkten.',
    bookings: [],
  },
  {
    id: 'community-card',
    name: 'Community-Feed Card',
    placement: 'In-App · Community',
    format: 'Sponsored Post im Feed',
    dimensions: '402 × 200 px · ~2.100 Imp./Tag',
    pricePerDay: 110,
    cpm: '€ 22',
    description: 'Native Sponsored-Post im Member-Feed. Markiert als „Anzeige", aber im Feed-Stil.',
    bookings: [],
  },
];

// ─── helpers ───
function fmtMoney(n) {
  return '€ ' + n.toLocaleString('de-DE');
}
function fmtDateRange(start, end) {
  const s = new Date(start);
  const e = new Date(end);
  const monthShort = (d) => ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'][d.getMonth()];
  return `${s.getDate()}. ${monthShort(s)} – ${e.getDate()}. ${monthShort(e)} ${e.getFullYear()}`;
}
function daysInMonth(year, month) { return new Date(year, month + 1, 0).getDate(); }
function isoDay(year, month, day) {
  return `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
}
function inRange(iso, start, end) { return iso >= start && iso <= end; }

// ─── List view ───
function AdminAdSlots({ onOpenSlot }) {
  const [q, setQ] = useStateAS('');
  const aq = q.trim().toLowerCase();
  const slots = !aq ? AD_SLOTS : AD_SLOTS.filter(s =>
    [s.name, s.placement, s.format].join(' ').toLowerCase().includes(aq)
  );

  const totalRevenue = AD_SLOTS.reduce((acc, s) =>
    acc + s.bookings.reduce((a, b) => a + b.total, 0), 0);
  const activeCount = AD_SLOTS.reduce((a, s) => a + s.bookings.filter(b => b.status.startsWith('Aktiv')).length, 0);
  const occupiedSlots = AD_SLOTS.filter(s => s.bookings.length > 0).length;

  return (
    <>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 18 }}>
        <KPI2 label="Werbeplätze gesamt" value={AD_SLOTS.length}/>
        <KPI2 label="Belegt" value={`${occupiedSlots} / ${AD_SLOTS.length}`}/>
        <KPI2 label="Aktive Buchungen" value={activeCount}/>
        <KPI2 label="Erlös aktuell" value={fmtMoney(totalRevenue)}/>
      </div>

      <AdminCard title="Werbeplätze" subtitle="Alle buchbaren In-App Werbeflächen mit aktueller Belegung. Klick auf einen Platz öffnet den Buchungskalender."
        action={
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <SearchBox value={q} onChange={setQ} placeholder="Platz, Position…" width={220}/>
            <button style={pillBtn('primary')}>+ Werbeplatz</button>
          </div>
        } padded={false}>
        <div>
          <div style={{
            display: 'grid', gridTemplateColumns: '2.6fr 1.8fr 1.4fr 110px 1.6fr 80px',
            padding: '10px 18px', fontSize: 10.5, fontWeight: 600, color: 'var(--text-dim)',
            textTransform: 'uppercase', letterSpacing: '0.05em', borderBottom: '1px solid var(--border)',
            gap: 12, alignItems: 'center',
          }}>
            <div>Werbeplatz</div>
            <div>Format</div>
            <div>Position</div>
            <div style={{ textAlign: 'right' }}>€ / Tag</div>
            <div>Aktuelle Buchung</div>
            <div>Status</div>
          </div>
          {slots.map((s, i) => {
            const active = s.bookings.find(b => b.status.startsWith('Aktiv'));
            return (
              <button key={s.id} onClick={() => onOpenSlot(s.id)} style={{
                width: '100%', display: 'grid',
                gridTemplateColumns: '2.6fr 1.8fr 1.4fr 110px 1.6fr 80px',
                padding: '14px 18px', fontSize: 12.5, gap: 12,
                borderBottom: i < slots.length - 1 ? '1px solid var(--border)' : 'none',
                alignItems: 'center', background: 'transparent', border: 'none',
                cursor: 'pointer', textAlign: 'left', color: 'var(--text)',
              }}>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{s.name}</div>
                  <div style={{ fontSize: 11, color: 'var(--text-soft)', marginTop: 2 }}>{s.dimensions}</div>
                </div>
                <div style={{ color: 'var(--text-soft)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{s.format}</div>
                <div style={{ color: 'var(--text-soft)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{s.placement}</div>
                <div style={{ fontFamily: 'var(--mono)', textAlign: 'right' }}>{fmtMoney(s.pricePerDay)}</div>
                <div style={{ minWidth: 0 }}>
                  {active ? (
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
                      {active.partnerLogo && (
                        <div style={{
                          width: 24, height: 24, borderRadius: 6, background: '#fff',
                          display: 'flex', alignItems: 'center', justifyContent: 'center',
                          padding: 2, border: '1px solid var(--border)', flexShrink: 0,
                        }}>
                          <img src={active.partnerLogo} alt="" style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }}/>
                        </div>
                      )}
                      <div style={{ minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontSize: 12 }}>
                        {active.partnerName}
                      </div>
                    </div>
                  ) : (
                    <span style={{ fontSize: 11, color: 'var(--text-dim)', fontStyle: 'italic' }}>frei</span>
                  )}
                </div>
                <div>
                  {active
                    ? <SlotPill kind="active">aktiv</SlotPill>
                    : <SlotPill kind="open">offen</SlotPill>
                  }
                </div>
              </button>
            );
          })}
        </div>
      </AdminCard>
    </>
  );
}

function KPI2({ label, value }) {
  return (
    <div style={{
      background: 'var(--surface)', border: '1px solid var(--border)',
      borderRadius: 12, padding: '14px 16px',
    }}>
      <div style={{ fontSize: 10, color: 'var(--text-dim)', letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 600 }}>{label}</div>
      <div style={{ fontSize: 22, fontWeight: 600, marginTop: 4, letterSpacing: '-0.015em' }}>{value}</div>
    </div>
  );
}

function SlotPill({ kind, children }) {
  const c = {
    active: { bg: 'rgba(34,170,90,0.12)', fg: '#1d8a52', bd: 'rgba(34,170,90,0.3)' },
    open:   { bg: 'var(--surface2)', fg: 'var(--text-soft)', bd: 'var(--border)' },
  }[kind];
  return (
    <span style={{
      display: 'inline-block', padding: '3px 10px', borderRadius: 999,
      background: c.bg, color: c.fg, border: `1px solid ${c.bd}`,
      fontSize: 11, fontWeight: 600, letterSpacing: '0.02em',
    }}>{children}</span>
  );
}

// ─── Detail view with calendar ───
function AdminAdSlotDetail({ id, onBack }) {
  const slot = AD_SLOTS.find(s => s.id === id);
  if (!slot) return null;

  const [calMonth, setCalMonth] = useStateAS(2); // 0=Jan, 2=Mar
  const [calYear, setCalYear] = useStateAS(2026);
  const [selectedBooking, setSelectedBooking] = useStateAS(slot.bookings[0]?.id || null);

  const booking = slot.bookings.find(b => b.id === selectedBooking);
  const totalEarned = slot.bookings.reduce((a, b) => a + b.total, 0);

  return (
    <>
      {/* Breadcrumb */}
      <button onClick={onBack} style={{
        display: 'flex', alignItems: 'center', gap: 6, marginBottom: 16,
        background: 'transparent', border: 'none', cursor: 'pointer',
        color: 'var(--text-soft)', fontSize: 12.5, padding: 0,
      }}>
        <Icon.chevron_l size={14}/> Werbeplätze
      </button>

      {/* Header */}
      <div style={{
        background: 'var(--surface)', border: '1px solid var(--border)',
        borderRadius: 14, padding: 24, marginBottom: 18,
      }}>
        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 18 }}>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 11, color: 'var(--text-dim)', letterSpacing: '0.12em', fontWeight: 600, textTransform: 'uppercase' }}>
              {slot.placement}
            </div>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 28, fontWeight: 500, marginTop: 6, letterSpacing: '-0.01em' }}>
              {slot.name}
            </div>
            <div style={{ fontSize: 13, color: 'var(--text-soft)', marginTop: 8, maxWidth: 620, lineHeight: 1.55 }}>
              {slot.description}
            </div>
            <div style={{ display: 'flex', gap: 28, marginTop: 18 }}>
              <KPI label="Format" value={slot.format}/>
              <KPI label="Volumen" value={slot.dimensions}/>
              <KPI label="Tagespreis" value={fmtMoney(slot.pricePerDay)}/>
              <KPI label="CPM" value={slot.cpm}/>
              <KPI label="Erlös bisher" value={fmtMoney(totalEarned)}/>
            </div>
          </div>
          <button style={pillBtn('primary')}>+ Buchung anlegen</button>
        </div>
      </div>

      {/* Two-column: calendar + booking detail */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 18, alignItems: 'start' }}>
        {/* Calendar */}
        <AdminCard title="Belegungs-Kalender" subtitle="Klick auf eine Buchung öffnet die Details rechts.">
          <CalendarView
            year={calYear} month={calMonth}
            onPrev={() => {
              if (calMonth === 0) { setCalMonth(11); setCalYear(calYear - 1); }
              else setCalMonth(calMonth - 1);
            }}
            onNext={() => {
              if (calMonth === 11) { setCalMonth(0); setCalYear(calYear + 1); }
              else setCalMonth(calMonth + 1);
            }}
            bookings={slot.bookings}
            selectedId={selectedBooking}
            onSelectBooking={setSelectedBooking}
          />

          <div style={{ height: 1, background: 'var(--border)', margin: '18px 0 14px' }}/>

          <div style={{ fontSize: 11, color: 'var(--text-dim)', letterSpacing: '0.1em', fontWeight: 600, textTransform: 'uppercase', marginBottom: 10 }}>
            Buchungen
          </div>
          {slot.bookings.length === 0 && (
            <div style={{
              padding: '28px 16px', textAlign: 'center', borderRadius: 10,
              background: 'var(--surface2)', border: '1px dashed var(--border-strong)',
              color: 'var(--text-soft)', fontSize: 13,
            }}>
              Keine aktive Buchung — Werbeplatz ist verfügbar.
            </div>
          )}
          {slot.bookings.map(b => (
            <button key={b.id} onClick={() => setSelectedBooking(b.id)} style={{
              width: '100%', display: 'flex', alignItems: 'center', gap: 12,
              padding: 12, marginBottom: 8, borderRadius: 10,
              background: selectedBooking === b.id ? 'var(--surface2)' : 'transparent',
              border: `1px solid ${selectedBooking === b.id ? 'var(--border-strong)' : 'var(--border)'}`,
              cursor: 'pointer', textAlign: 'left',
            }}>
              {b.partnerLogo && (
                <div style={{
                  width: 36, height: 36, borderRadius: 8, background: '#fff',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  padding: 4, border: '1px solid var(--border)', flexShrink: 0,
                }}>
                  <img src={b.partnerLogo} alt="" style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }}/>
                </div>
              )}
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text)' }}>{b.partnerName}</div>
                <div style={{ fontSize: 11.5, color: 'var(--text-soft)', marginTop: 2 }}>
                  {fmtDateRange(b.start, b.end)} · {b.days} Tage
                </div>
              </div>
              <div style={{ textAlign: 'right', flexShrink: 0 }}>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 12, fontWeight: 600 }}>{fmtMoney(b.total)}</div>
                <div style={{ marginTop: 4 }}><SlotPill kind={b.status.startsWith('Aktiv') ? 'active' : 'open'}>{b.status}</SlotPill></div>
              </div>
            </button>
          ))}
        </AdminCard>

        {/* Booking detail */}
        <div>
          {booking ? (
            <AdminCard title="Buchungs-Details" subtitle={`${booking.partnerName} · ${fmtDateRange(booking.start, booking.end)}`}>
              {/* Creative preview */}
              {slot.id === 'home-banner' && booking.creative && (
                <div style={{
                  position: 'relative', height: 130, borderRadius: 10,
                  overflow: 'hidden', marginBottom: 16,
                  backgroundImage: `linear-gradient(90deg, rgba(8,10,16,0.92) 0%, rgba(8,10,16,0.5) 60%, rgba(8,10,16,0.2) 100%), url('${booking.creative}')`,
                  backgroundSize: 'cover', backgroundPosition: 'center',
                  border: '1px solid var(--border)',
                }}>
                  <div style={{
                    position: 'absolute', top: 10, left: 12, fontFamily: 'var(--mono)',
                    fontSize: 9, color: 'rgba(255,255,255,0.55)', letterSpacing: '0.18em',
                  }}>VORSCHAU · IN-APP BANNER</div>
                  <div style={{ position: 'absolute', left: 12, bottom: 12, color: '#fff' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                      {booking.partnerLogo && <img src={booking.partnerLogo} alt="" style={{ width: 18, height: 18, objectFit: 'contain' }}/>}
                      <span style={{ fontSize: 11, fontWeight: 600 }}>{booking.partnerName.replace(' GmbH','').toLowerCase()}</span>
                    </div>
                    <div style={{ fontFamily: 'var(--serif)', fontSize: 14, lineHeight: 1.2 }}>Exklusives Angebot für<br/>onlytap NFC-Karten</div>
                  </div>
                </div>
              )}

              <DetailRow label="Buchungs-Zeitraum" value={fmtDateRange(booking.start, booking.end)}/>
              <DetailRow label="Buchungstage" value={`${booking.days} Tage · ${fmtMoney(slot.pricePerDay)} / Tag`}/>
              <DetailRow label="Gesamtwert" value={fmtMoney(booking.total)} mono bold/>
              <DetailRow label="Status" value={<SlotPill kind={booking.status.startsWith('Aktiv') ? 'active' : 'open'}>{booking.status}</SlotPill>}/>
              <DetailRow label="Rechnung" value={booking.invoice} mono/>
              <DetailRow label="Linkziel" value={booking.link} mono/>

              <div style={{ height: 1, background: 'var(--border)', margin: '14px 0' }}/>

              <div style={{ fontSize: 11, color: 'var(--text-dim)', letterSpacing: '0.1em', fontWeight: 600, textTransform: 'uppercase', marginBottom: 10 }}>
                Buchender Partner
              </div>
              <DetailRow label="Firma" value={booking.partnerName}/>
              <DetailRow label="Anschrift" value={booking.address}/>
              <DetailRow label="Ansprechpartner" value={`${booking.contact} · ${booking.role}`}/>
              <DetailRow label="E-Mail" value={booking.email} mono/>
              <DetailRow label="Telefon" value={booking.phone} mono/>

              <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
                <button style={pillBtn('ghost')}>Rechnung öffnen</button>
                <button style={pillBtn('ghost')}>Verlängern</button>
              </div>
            </AdminCard>
          ) : (
            <AdminCard title="Keine Buchung gewählt" subtitle="Wähle links eine Buchung oder lege eine neue an.">
              <div style={{ padding: '20px 0', color: 'var(--text-soft)', fontSize: 13 }}>
                Dieser Werbeplatz ist aktuell verfügbar.
              </div>
              <button style={pillBtn('primary')}>+ Buchung anlegen</button>
            </AdminCard>
          )}
        </div>
      </div>
    </>
  );
}

function DetailRow({ label, value, mono, bold }) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 16, padding: '6px 0', fontSize: 12.5 }}>
      <div style={{ color: 'var(--text-dim)', flexShrink: 0 }}>{label}</div>
      <div style={{
        textAlign: 'right',
        fontFamily: mono ? 'var(--mono)' : 'inherit',
        fontWeight: bold ? 600 : 400,
        color: 'var(--text)',
      }}>{value}</div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Calendar view
// ─────────────────────────────────────────────────────────────
function CalendarView({ year, month, onPrev, onNext, bookings, selectedId, onSelectBooking }) {
  const monthNames = ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'];
  const dayLabels = ['Mo','Di','Mi','Do','Fr','Sa','So'];
  const numDays = daysInMonth(year, month);
  // first day of month — convert Sunday-first JS index to Monday-first
  const firstWeekday = (new Date(year, month, 1).getDay() + 6) % 7;

  const cells = [];
  for (let i = 0; i < firstWeekday; i++) cells.push(null);
  for (let d = 1; d <= numDays; d++) cells.push(d);
  while (cells.length % 7 !== 0) cells.push(null);

  const colorForBooking = (bId) => {
    const i = bookings.findIndex(b => b.id === bId);
    const palette = ['#0a86d6', '#d68b0a', '#7a3fc8', '#1d8a52'];
    return palette[i % palette.length];
  };

  return (
    <div>
      {/* Month header */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
        <button onClick={onPrev} style={{
          width: 32, height: 32, borderRadius: 8, border: '1px solid var(--border)',
          background: 'var(--surface)', color: 'var(--text)', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}><Icon.chevron_l size={14}/></button>
        <div style={{ fontFamily: 'var(--serif)', fontSize: 18, fontWeight: 500 }}>
          {monthNames[month]} {year}
        </div>
        <button onClick={onNext} style={{
          width: 32, height: 32, borderRadius: 8, border: '1px solid var(--border)',
          background: 'var(--surface)', color: 'var(--text)', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}><Icon.chevron_r size={14}/></button>
      </div>

      {/* Weekday header */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4, marginBottom: 6 }}>
        {dayLabels.map(l => (
          <div key={l} style={{
            textAlign: 'center', fontSize: 10, color: 'var(--text-dim)',
            fontWeight: 600, letterSpacing: '0.08em',
          }}>{l}</div>
        ))}
      </div>

      {/* Day cells */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4 }}>
        {cells.map((d, i) => {
          if (d === null) return <div key={i}/>;
          const iso = isoDay(year, month, d);
          const bookingHere = bookings.find(b => inRange(iso, b.start, b.end));
          const isSelected = bookingHere && bookingHere.id === selectedId;
          const bgColor = bookingHere ? colorForBooking(bookingHere.id) : 'transparent';
          return (
            <button key={i}
              onClick={() => bookingHere && onSelectBooking(bookingHere.id)}
              disabled={!bookingHere}
              style={{
                aspectRatio: '1 / 1', borderRadius: 8,
                border: `1px solid ${isSelected ? 'var(--text)' : (bookingHere ? bgColor : 'var(--border)')}`,
                background: bookingHere
                  ? `${bgColor}${isSelected ? '' : '22'}`
                  : 'transparent',
                color: bookingHere
                  ? (isSelected ? '#fff' : bgColor)
                  : 'var(--text-soft)',
                fontFamily: 'var(--mono)', fontSize: 11.5, fontWeight: 600,
                cursor: bookingHere ? 'pointer' : 'default',
                position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center',
                outline: 'none',
              }}>
              {d}
              {isSelected && (
                <div style={{ position: 'absolute', inset: 0, borderRadius: 8, background: bgColor, opacity: 1, zIndex: -1 }}/>
              )}
            </button>
          );
        })}
      </div>

      {/* Legend */}
      {bookings.length > 0 && (
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 14, fontSize: 11.5 }}>
          {bookings.map(b => (
            <div key={b.id} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <div style={{ width: 10, height: 10, borderRadius: 3, background: colorForBooking(b.id) }}/>
              <span style={{ color: 'var(--text-soft)' }}>{b.partnerName}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { AdminAdSlots, AdminAdSlotDetail, AD_SLOTS });