// Attendees list + profile drawer (refund/transfer/resend/segment)
const Attendees = () => {
  const [openId, setOpenId] = React.useState(null);
  const [selected, setSelected] = React.useState(new Set());
  const [filter, setFilter] = React.useState('all');

  const attendees = [
    { id:1, name:'Lena Weber', email:'lena@weber.de', phone:'+49 151 2345 6789', event:'Apparat · Berghain', tier:'VIP', paid:120, status:'confirmed', checkedIn:true, seat:'V-12', bookedAt:'3 days ago' },
    { id:2, name:'Jonas Richter', email:'jonas.r@gmail.com', phone:'+49 160 3344 2211', event:'Apparat · Berghain', tier:'GA', paid:49, status:'confirmed', checkedIn:true, bookedAt:'1 week ago' },
    { id:3, name:'Mila Hofmann', email:'mila.h@web.de', phone:'+49 171 1122 3344', event:'Apparat · Berghain', tier:'GA', paid:49, status:'confirmed', checkedIn:false, bookedAt:'2 days ago' },
    { id:4, name:'Finn Wagner', email:'finn@wagner.co', phone:'+49 176 9988 0812', event:'Apparat · Berghain', tier:'VIP', paid:120, status:'refunded', checkedIn:false, bookedAt:'6 days ago' },
    { id:5, name:'Clara Schulz', email:'clara.schulz@posteo.de', phone:'+49 162 2112 2334', event:'Comedy Abend · Quatsch', tier:'GA', paid:28, status:'confirmed', checkedIn:false, bookedAt:'yesterday' },
    { id:6, name:'Max Neumann', email:'max@neumann.de', phone:'+49 151 8823 4455', event:'Comedy Abend · Quatsch', tier:'Front row', paid:42, status:'confirmed', checkedIn:false, bookedAt:'2 days ago' },
    { id:7, name:'Sophie Köhler', email:'sophie.k@outlook.de', phone:'+49 170 7765 4321', event:'Jazz · A-Trane', tier:'GA', paid:32, status:'pending', checkedIn:false, bookedAt:'1 hour ago' },
    { id:8, name:'Paul Schneider', email:'paul.s@gmail.com', phone:'+49 152 1223 3445', event:'Apparat · Berghain', tier:'GA', paid:49, status:'confirmed', checkedIn:true, bookedAt:'5 days ago' },
  ];

  const visible = filter === 'all' ? attendees : attendees.filter(a => a.status === filter);
  const openAttendee = attendees.find(a => a.id === openId);

  const toggleAll = () => setSelected(visible.length === selected.size ? new Set() : new Set(visible.map(a => a.id)));
  const toggle = (id) => { const n = new Set(selected); n.has(id) ? n.delete(id) : n.add(id); setSelected(n); };

  return (
    <div style={{ padding: '24px 36px 60px', maxWidth: 1400, margin: '0 auto' }}>
      <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom: 18 }}>
        <div>
          <h1 className="display" style={{ margin: 0, fontSize: 30, fontWeight: 500, letterSpacing:'-0.02em' }}>Attendees</h1>
          <div style={{ fontSize: 13.5, color: 'var(--ink-3)', marginTop: 4 }}>{attendees.length.toLocaleString()} people across {new Set(attendees.map(a=>a.event)).size} events.</div>
        </div>
        <div style={{ display:'flex', gap: 8 }}>
          <Button variant="secondary" icon="download">Export CSV</Button>
          <Button variant="secondary" icon="message">Email attendees</Button>
        </div>
      </div>

      {/* Filters + search */}
      <div style={{ display:'flex', alignItems:'center', gap: 10, marginBottom: 16 }}>
        <Tabs value={filter} onChange={setFilter} options={[
          { value:'all', label:'All', count: attendees.length },
          { value:'confirmed', label:'Confirmed', count: attendees.filter(a=>a.status==='confirmed').length },
          { value:'pending', label:'Pending', count: attendees.filter(a=>a.status==='pending').length },
          { value:'refunded', label:'Refunded', count: attendees.filter(a=>a.status==='refunded').length },
        ]} style={{ border: 'none', flex: 1 }}/>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          border: '1px solid var(--line-2)', background: 'var(--bg-raised)',
          borderRadius: 8, padding: '0 10px', height: 34, width: 260,
        }}>
          <Icon name="search" size={14} style={{ color:'var(--ink-3)' }}/>
          <input placeholder="Search attendees…" style={{ flex:1, border: 0, outline: 0, background: 'transparent', fontFamily:'inherit', fontSize: 13 }}/>
        </div>
      </div>

      {/* Bulk bar */}
      {selected.size > 0 && <Card pad={10} style={{ marginBottom: 12, background: 'var(--ink)', color: 'var(--bg)', border: 'none', display:'flex', alignItems:'center', gap: 12 }}>
        <span style={{ fontSize: 12.5, fontWeight: 500, paddingLeft: 8 }}>{selected.size} selected</span>
        <div style={{ flex: 1 }}/>
        <button style={{ background:'transparent', border:'1px solid rgba(255,255,255,0.2)', color:'inherit', borderRadius: 6, padding:'6px 10px', fontSize: 12, fontWeight: 500, cursor:'pointer', fontFamily:'inherit', display:'flex', alignItems:'center', gap: 6 }}><Icon name="message" size={12}/> Email</button>
        <button style={{ background:'transparent', border:'1px solid rgba(255,255,255,0.2)', color:'inherit', borderRadius: 6, padding:'6px 10px', fontSize: 12, fontWeight: 500, cursor:'pointer', fontFamily:'inherit', display:'flex', alignItems:'center', gap: 6 }}><Icon name="ticket" size={12}/> Resend tickets</button>
        <button style={{ background:'transparent', border:'1px solid rgba(255,255,255,0.2)', color:'inherit', borderRadius: 6, padding:'6px 10px', fontSize: 12, fontWeight: 500, cursor:'pointer', fontFamily:'inherit' }}>Add to segment</button>
        <button onClick={() => setSelected(new Set())} style={{ background:'transparent', border: 0, color:'rgba(255,255,255,0.6)', cursor:'pointer', fontFamily:'inherit', fontSize: 12, padding: '0 6px' }}>Clear</button>
      </Card>}

      {/* Table */}
      <Card pad={0}>
        <table style={{ width:'100%', borderCollapse:'collapse', fontSize: 13 }}>
          <thead>
            <tr style={{ background:'var(--bg-sunken)', borderBottom:'1px solid var(--line)' }}>
              <th style={{ padding:'10px 14px', width: 36 }}>
                <input type="checkbox" checked={visible.length && selected.size === visible.length} onChange={toggleAll}/>
              </th>
              {['Attendee','Event','Tier','Paid','Status','Check-in','Booked',''].map(h => (
                <th key={h} style={{ padding: '10px 14px', textAlign:'left', fontSize: 11, fontWeight: 600, color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'0.05em' }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {visible.map(a => (
              <tr key={a.id} onClick={() => setOpenId(a.id)} style={{ borderBottom:'1px solid var(--line)', height: 56, cursor:'pointer', background: selected.has(a.id) ? 'var(--accent-soft)' : 'transparent' }}>
                <td style={{ padding:'0 14px' }} onClick={e => e.stopPropagation()}>
                  <input type="checkbox" checked={selected.has(a.id)} onChange={() => toggle(a.id)}/>
                </td>
                <td style={{ padding:'0 14px' }}>
                  <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
                    <Avatar name={a.name} size={30}/>
                    <div>
                      <div style={{ fontSize: 13, fontWeight: 600 }}>{a.name}</div>
                      <div style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>{a.email}</div>
                    </div>
                  </div>
                </td>
                <td style={{ padding:'0 14px', color:'var(--ink-2)' }}>{a.event}</td>
                <td style={{ padding:'0 14px' }}>
                  <Chip tone={a.tier === 'VIP' ? 'accent' : a.tier === 'Front row' ? 'indigo' : 'neutral'} size="sm">{a.tier}</Chip>
                </td>
                <td style={{ padding:'0 14px' }}><span className="mono" style={{ fontWeight: 600 }}>{euro(a.paid)}</span></td>
                <td style={{ padding:'0 14px' }}>
                  <Chip tone={a.status === 'confirmed' ? 'success' : a.status === 'pending' ? 'warning' : 'danger'} size="sm">{a.status}</Chip>
                </td>
                <td style={{ padding:'0 14px' }}>
                  {a.checkedIn
                    ? <span style={{ display:'inline-flex', alignItems:'center', gap: 5, fontSize: 12, color:'var(--success)', fontWeight: 550 }}><Icon name="check" size={12}/> Scanned{a.seat && ` · ${a.seat}`}</span>
                    : <span style={{ fontSize: 12, color:'var(--ink-3)' }}>—</span>}
                </td>
                <td style={{ padding:'0 14px', color:'var(--ink-3)', fontSize: 12 }}>{a.bookedAt}</td>
                <td style={{ padding:'0 14px' }} onClick={e => e.stopPropagation()}><Icon name="more" size={14} style={{ color:'var(--ink-3)' }}/></td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>

      {/* Profile drawer */}
      <Drawer open={!!openId} onClose={() => setOpenId(null)} width={480}>
        {openAttendee && <div style={{ display:'flex', flexDirection:'column', height:'100%' }}>
          <div style={{ padding: '20px 24px', borderBottom: '1px solid var(--line)' }}>
            <div style={{ display:'flex', alignItems:'center', gap: 14 }}>
              <Avatar name={openAttendee.name} size={52}/>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em' }}>{openAttendee.name}</div>
                <div style={{ fontSize: 12.5, color:'var(--ink-3)' }}>{openAttendee.email} · {openAttendee.phone}</div>
              </div>
            </div>
            <div style={{ display:'flex', gap: 6, marginTop: 14 }}>
              <Button variant="secondary" size="sm" icon="message">Email</Button>
              <Button variant="secondary" size="sm" icon="ticket">Resend ticket</Button>
              <Button variant="secondary" size="sm" icon="edit">Transfer</Button>
              <Button variant="danger" size="sm">Refund</Button>
            </div>
          </div>

          <div style={{ flex:1, padding: 24, overflow:'auto', display:'flex', flexDirection: 'column', gap: 20 }}>
            <div>
              <div style={{ fontSize: 11, textTransform:'uppercase', letterSpacing:'0.08em', color:'var(--ink-3)', fontWeight: 600, marginBottom: 10 }}>Booking</div>
              <Card pad={14}>
                <div style={{ display:'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                  <div><div style={{ fontSize: 11, color:'var(--ink-3)' }}>Event</div><div style={{ fontSize: 13, fontWeight: 500, marginTop: 2 }}>{openAttendee.event}</div></div>
                  <div><div style={{ fontSize: 11, color:'var(--ink-3)' }}>Tier</div><div style={{ fontSize: 13, fontWeight: 500, marginTop: 2 }}>{openAttendee.tier}{openAttendee.seat && ` · ${openAttendee.seat}`}</div></div>
                  <div><div style={{ fontSize: 11, color:'var(--ink-3)' }}>Booking ID</div><div className="mono" style={{ fontSize: 12.5, fontWeight: 500, marginTop: 2 }}>TX-{String(openAttendee.id*317).padStart(6,'0')}</div></div>
                  <div><div style={{ fontSize: 11, color:'var(--ink-3)' }}>Paid</div><div className="mono" style={{ fontSize: 13, fontWeight: 600, marginTop: 2 }}>{euro(openAttendee.paid)}</div></div>
                  <div><div style={{ fontSize: 11, color:'var(--ink-3)' }}>Payment</div><div style={{ fontSize: 13, fontWeight: 500, marginTop: 2 }}>SEPA · DE89••4821</div></div>
                  <div><div style={{ fontSize: 11, color:'var(--ink-3)' }}>Booked</div><div style={{ fontSize: 13, fontWeight: 500, marginTop: 2 }}>{openAttendee.bookedAt}</div></div>
                </div>
              </Card>
            </div>

            <div>
              <div style={{ fontSize: 11, textTransform:'uppercase', letterSpacing:'0.08em', color:'var(--ink-3)', fontWeight: 600, marginBottom: 10 }}>Activity</div>
              <div style={{ display:'flex', flexDirection:'column', gap: 2 }}>
                {[
                  { t:'Ticket scanned · Gate A', when:'Today 19:42', icon:'check', tone:'success' },
                  { t:'Reminder email opened', when:'Today 14:08', icon:'message', tone:'neutral' },
                  { t:'Booking confirmed', when:'15. Apr, 22:11', icon:'ticket', tone:'accent' },
                  { t:'Payment successful · SEPA', when:'15. Apr, 22:10', icon:'money', tone:'success' },
                  { t:'Applied promo EARLY20', when:'15. Apr, 22:09', icon:'coupon', tone:'indigo' },
                ].map((a, i) => (
                  <div key={i} style={{ display:'flex', gap: 12, padding: '10px 0', borderBottom: i<4 ? '1px solid var(--line)' : 'none' }}>
                    <div style={{ width: 28, height: 28, flexShrink: 0, borderRadius: 99, background: 'var(--bg-muted)', color:'var(--ink-2)', display:'flex', alignItems:'center', justifyContent:'center' }}><Icon name={a.icon} size={13}/></div>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 13 }}>{a.t}</div>
                      <div style={{ fontSize: 11.5, color:'var(--ink-3)', marginTop: 1 }}>{a.when}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div>
              <div style={{ fontSize: 11, textTransform:'uppercase', letterSpacing:'0.08em', color:'var(--ink-3)', fontWeight: 600, marginBottom: 10 }}>Attendee history</div>
              <div style={{ display:'flex', gap: 12, fontSize: 12.5 }}>
                <Card pad={12} style={{ flex: 1 }}>
                  <div style={{ color:'var(--ink-3)' }}>Past events</div>
                  <div className="display" style={{ fontSize: 22, fontWeight: 500, marginTop: 4 }}>7</div>
                </Card>
                <Card pad={12} style={{ flex: 1 }}>
                  <div style={{ color:'var(--ink-3)' }}>Lifetime spend</div>
                  <div className="display" style={{ fontSize: 22, fontWeight: 500, marginTop: 4 }}>{euro(640, { compact: true })}</div>
                </Card>
                <Card pad={12} style={{ flex: 1 }}>
                  <div style={{ color:'var(--ink-3)' }}>No-show rate</div>
                  <div className="display" style={{ fontSize: 22, fontWeight: 500, marginTop: 4 }}>0%</div>
                </Card>
              </div>
            </div>
          </div>
        </div>}
      </Drawer>
    </div>
  );
};

window.Attendees = Attendees;