// Bookings
const Bookings = ({ setRoute }) => {
  const [drawerOpen, setDrawerOpen] = React.useState(false);
  const [activeBooking, setActiveBooking] = React.useState(null);
  const openDrawer = (b) => { setActiveBooking(b); setDrawerOpen(true); };
  const rows = [
    { id: 'TX-24891', buyer: 'Lena Weber', email: 'lena.weber@gmail.com', event: 'Apparat · Berghain', ticket: '2× Stehplatz', amount: 98, date: '17. Apr, 09:42', status: 'paid' },
    { id: 'TX-24890', buyer: 'Jonas Richter', email: 'jonas.r@outlook.de', event: 'Apparat · Berghain', ticket: '1× Early Bird', amount: 32, date: '17. Apr, 09:36', status: 'paid' },
    { id: 'TX-24889', buyer: 'Mila Hofmann', email: 'mila.h@icloud.com', event: 'Hot Chip · Astra', ticket: '1× GA', amount: 42, date: '17. Apr, 09:22', status: 'refund' },
    { id: 'TX-24888', buyer: 'Finn Wagner', email: 'finn.w@gmail.com', event: 'Lost & Sound · Sisyphos', ticket: '4× GA', amount: 180, date: '17. Apr, 09:18', status: 'paid' },
    { id: 'TX-24887', buyer: 'Clara Schulz', email: 'clara@hey.com', event: 'Nachtgalerie · Rooftop', ticket: '1× VIP', amount: 65, date: '17. Apr, 08:58', status: 'pending' },
    { id: 'TX-24886', buyer: 'Max Neumann', email: 'max@neumann.de', event: 'Apparat · Berghain', ticket: '1× Premium', amount: 120, date: '17. Apr, 08:31', status: 'paid' },
    { id: 'TX-24885', buyer: 'Hannah Bauer', email: 'h.bauer@gmail.com', event: 'Boiler Room · Kantine', ticket: '2× GA', amount: 58, date: '17. Apr, 08:12', status: 'paid' },
    { id: 'TX-24884', buyer: 'Luka Fischer', email: 'luka.f@yahoo.de', event: 'Moderat DJ Set', ticket: '1× GA', amount: 48, date: '17. Apr, 07:48', status: 'paid' },
    { id: 'TX-24883', buyer: 'Sophie Köhler', email: 's.koehler@gmail.com', event: 'Lost & Sound · Sisyphos', ticket: '2× VIP', amount: 160, date: '17. Apr, 07:22', status: 'paid' },
    { id: 'TX-24882', buyer: 'Paul Schneider', email: 'paul.s@gmail.com', event: 'Open Air · Tempelhof', ticket: '3× GA', amount: 114, date: '16. Apr, 23:58', status: 'paid' },
  ];

  const tone = { paid: 'success', pending: 'warning', refund: 'neutral' };

  return (
    <div style={{ padding: '28px 36px 80px', maxWidth: 1400, margin: '0 auto' }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 24 }}>
        <div>
          <h1 className="display" style={{ margin: 0, fontSize: 30, fontWeight: 500, letterSpacing: '-0.02em' }}>Bookings</h1>
          <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 4 }}>1.821 total · {euro(482400, { compact: true })} collected this month</div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <Button variant="secondary" icon="download" size="md">Export CSV</Button>
          <Button variant="primary" icon="plus" size="md">Manual booking</Button>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginBottom: 18 }}>
        <Card><Stat label="Today" value="147" sub={euro(14820, { compact: true }) + ' collected'} icon="ticket"/></Card>
        <Card><Stat label="This week" value="892" delta="+24%" icon="bar"/></Card>
        <Card><Stat label="Refunds pending" value="3" sub={euro(285) + ' total'} icon="refresh"/></Card>
        <Card><Stat label="Avg order value" value={euro(142)} delta="+5%" icon="money"/></Card>
      </div>

      <Card pad={0}>
        <div style={{ padding: '14px 18px', display: 'flex', gap: 10, alignItems: 'center', borderBottom: '1px solid var(--line)' }}>
          <Input prefix={<Icon name="search" size={14}/>} placeholder="Search by name, email, booking ID..." style={{ flex: 1, height: 34 }}/>
          <Select value="all" onChange={() => {}} options={[{value:'all',label:'All events'},{value:'apparat',label:'Apparat · Berghain'}]} style={{ width: 170, height: 34 }}/>
          <Select value="all" onChange={() => {}} options={[{value:'all',label:'All statuses'},{value:'paid',label:'Paid'},{value:'refund',label:'Refunded'}]} style={{ width: 150, height: 34 }}/>
          <Button variant="secondary" icon="filter" size="sm">More filters</Button>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '120px 1.6fr 1.8fr 1.4fr 1fr 1fr 40px', gap: 14, padding: '12px 18px', fontSize: 11, fontWeight: 600, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.04em', borderBottom: '1px solid var(--line)', background: 'var(--bg-sunken)' }}>
          <div>Booking ID</div><div>Buyer</div><div>Event</div><div>Ticket</div><div>Status</div><div style={{ textAlign: 'right' }}>Amount</div><div></div>
        </div>
        {rows.map((r, i) => (
          <div key={r.id} style={{
            display: 'grid', gridTemplateColumns: '120px 1.6fr 1.8fr 1.4fr 1fr 1fr 40px', gap: 14,
            padding: '12px 18px', alignItems: 'center',
            borderBottom: i < rows.length - 1 ? '1px solid var(--line)' : 'none',
            cursor: 'pointer',
          }}
          onClick={() => openDrawer(r)}
          onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-sunken)'}
          onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
          >
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink-2)' }}>{r.id}</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
              <Avatar name={r.buyer} size={28}/>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.buyer}</div>
                <div style={{ fontSize: 11, color: 'var(--ink-3)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.email}</div>
              </div>
            </div>
            <div style={{ fontSize: 12.5 }}>
              <div>{r.event}</div>
              <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 1 }}>{r.date}</div>
            </div>
            <div style={{ fontSize: 12.5 }}>{r.ticket}</div>
            <div>
              <Chip tone={tone[r.status]} size="sm">
                {r.status === 'paid' && <span style={{ width: 6, height: 6, borderRadius: 99, background: 'oklch(0.58 0.12 155)' }}/>}
                {r.status.charAt(0).toUpperCase() + r.status.slice(1)}
              </Chip>
            </div>
            <div style={{ fontSize: 13, fontWeight: 600, fontFamily: 'var(--font-display)', textAlign: 'right' }}>{euro(r.amount)}</div>
            <Icon name="more" size={14} style={{ color: 'var(--ink-3)' }}/>
          </div>
        ))}

        <div style={{ padding: '14px 18px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 12, color: 'var(--ink-3)' }}>
          <div>Showing 1–10 of 1,821</div>
          <div style={{ display: 'flex', gap: 4 }}>
            <Button variant="secondary" size="sm" icon="chevronLeft">Prev</Button>
            <Button variant="secondary" size="sm" iconRight="chevronRight">Next</Button>
          </div>
        </div>
      </Card>

      <BookingDrawer open={drawerOpen} onClose={() => setDrawerOpen(false)} booking={activeBooking}/>
    </div>
  );
};

window.Bookings = Bookings;