// Event Detail — full tabs: Overview, Sales, Tickets, Attendees, Block seats, Reminders, Promo codes, Check-in, Settings, Embed

const EventDetailOverview = () => {
  const sparkRev = [20, 28, 24, 35, 42, 38, 48, 55, 52, 64, 70, 68, 78, 82];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 14 }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
          <Card><Stat label="Tickets sold" value={count(1420)} delta="+42 today" icon="ticket"/></Card>
          <Card><Stat label="Revenue" value={euro(58400, { compact: true })} delta={`+${euro(1820, { compact: true })}`} icon="money"/></Card>
          <Card><Stat label="Remaining" value={count(280)} sub="16% of capacity" icon="seat"/></Card>
          <Card><Stat label="Page views" value={count(58200, { compact: true })} delta="+12%" icon="eye"/></Card>
        </div>

        <Card>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
            <div>
              <h3 style={{ margin: 0, fontSize: 14.5, fontWeight: 600 }}>Sales velocity</h3>
              <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2 }}>Daily tickets sold since launch</div>
            </div>
            <SegControl value="14d" onChange={() => {}} options={[{value:'7d',label:'7T'},{value:'14d',label:'14T'},{value:'30d',label:'30T'},{value:'all',label:'Alle'}]}/>
          </div>
          <svg width="100%" height="180" viewBox="0 0 600 180" preserveAspectRatio="none" style={{ display: 'block' }}>
            {[0, 45, 90, 135].map(y => <line key={y} x1="0" x2="600" y1={y} y2={y} stroke="var(--line)" strokeDasharray="2 4"/>)}
            {sparkRev.map((v, i) => {
              const x = (i / (sparkRev.length - 1)) * 600;
              const h = (v / 100) * 160;
              return <rect key={i} x={x - 12} y={180 - h} width={18} height={h} rx={3} fill="var(--accent)" opacity={0.9}/>;
            })}
          </svg>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10.5, color: 'var(--ink-4)', marginTop: 6, fontFamily: 'var(--font-mono)' }}>
            {['3. Apr','6. Apr','9. Apr','12. Apr','15. Apr','17. Apr'].map(d => <span key={d}>{d}</span>)}
          </div>
        </Card>

        <Card>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 14 }}>
            <h3 style={{ margin: 0, fontSize: 14.5, fontWeight: 600 }}>Recent activity</h3>
            <Button variant="ghost" size="sm">View all</Button>
          </div>
          <div style={{ display:'flex', flexDirection:'column', gap: 2 }}>
            {[
              { ts:'2m ago', txt:'Lena Weber booked 2× VIP', ic:'ticket' },
              { ts:'8m ago', txt:'Promo code FRÜHLING20 redeemed (7 tickets)', ic:'coupon' },
              { ts:'18m ago', txt:`Mila Hofmann cancelled 1× GA · refund ${euro(32)}`, ic:'close' },
              { ts:'34m ago', txt:'Reminder email sent to 840 attendees · 68% opened', ic:'message' },
              { ts:'1h ago', txt:'Event reached 80% sellout', ic:'sparkle' },
            ].map((a, i) => (
              <div key={i} style={{ display:'flex', gap: 12, padding: '10px 4px', borderBottom: i<4 ? '1px solid var(--line)' : 'none' }}>
                <div style={{ width: 26, height: 26, borderRadius: 99, flexShrink: 0, background: 'var(--bg-muted)', color:'var(--ink-2)', display:'flex', alignItems:'center', justifyContent:'center' }}><Icon name={a.ic} size={13}/></div>
                <div style={{ flex: 1, fontSize: 13 }}>{a.txt}</div>
                <div style={{ fontSize: 11.5, color:'var(--ink-3)' }}>{a.ts}</div>
              </div>
            ))}
          </div>
        </Card>
      </div>

      {/* Right rail */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <Card>
          <div style={{ fontSize: 11, color: 'var(--ink-3)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 10 }}>Countdown to doors</div>
          <div style={{ display: 'flex', gap: 6, justifyContent: 'space-between' }}>
            {[
              { n: '37', l: 'tage' }, { n: '08', l: 'std' }, { n: '42', l: 'min' }, { n: '17', l: 'sek' },
            ].map(c => (
              <div key={c.l} style={{ flex: 1, padding: '10px 4px', borderRadius: 8, background: 'var(--bg-sunken)', textAlign: 'center' }}>
                <div style={{ fontSize: 20, fontWeight: 600, fontFamily: 'var(--font-display)' }}>{c.n}</div>
                <div style={{ fontSize: 10, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>{c.l}</div>
              </div>
            ))}
          </div>
        </Card>

        <Card>
          <div style={{ fontSize: 11, color: 'var(--ink-3)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 10 }}>Event URL</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 10px', borderRadius: 8, background: 'var(--bg-sunken)', fontSize: 12, fontFamily: 'var(--font-mono)' }}>
            <Icon name="link" size={12}/>
            <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis' }}>tixwerk.de/e/apparat-berghain</span>
            <Icon name="copy" size={12} style={{ cursor: 'pointer' }}/>
          </div>
        </Card>

        <Card>
          <div style={{ fontSize: 11, color: 'var(--ink-3)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 10 }}>Quick actions</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            {[
              { icon: 'send', label: 'Message attendees' },
              { icon: 'coupon', label: 'Create promo code' },
              { icon: 'download', label: 'Export attendee list' },
              { icon: 'qr', label: 'Open check-in terminal' },
              { icon: 'embed', label: 'Get embed snippet' },
              { icon: 'copy', label: 'Duplicate event' },
            ].map(a => (
              <button key={a.label} style={{
                display: 'flex', alignItems: 'center', gap: 10,
                padding: '8px 10px', border: 0, borderRadius: 8,
                background: 'transparent', fontFamily: 'inherit', fontSize: 13,
                color: 'var(--ink-2)', cursor: 'pointer', textAlign: 'left',
                transition: 'all 140ms',
              }}
              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-sunken)'}
              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
              >
                <Icon name={a.icon} size={14}/>{a.label}
              </button>
            ))}
          </div>
        </Card>

        <Card>
          <div style={{ fontSize: 11, color: 'var(--ink-3)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 10 }}>Team</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
            <div style={{ display: 'flex' }}>
              {['Priya Menon','Jonas Richter','Lena Weber'].map((n, i) => (
                <Avatar key={n} name={n} size={28} style={{ border: '2px solid var(--bg-raised)', marginLeft: i ? -8 : 0 }}/>
              ))}
            </div>
            <span style={{ fontSize: 12.5, color:'var(--ink-3)' }}>3 collaborators</span>
          </div>
          <Button variant="ghost" size="sm" icon="plus" style={{ width:'100%', justifyContent:'flex-start' }}>Invite someone</Button>
        </Card>
      </div>
    </div>
  );
};

const EventDetailTickets = () => {
  const tiers = [
    { name: 'VIP — Floor access', price: 120, sold: 180, total: 200, rev: 21600, status: 'selling' },
    { name: 'Stehplatz (GA)', price: 45, sold: 980, total: 1200, rev: 44100, status: 'selling' },
    { name: 'Balkon', price: 68, sold: 240, total: 300, rev: 16320, status: 'selling' },
    { name: 'Early bird (beendet)', price: 32, sold: 200, total: 200, rev: 6400, status: 'ended' },
  ];
  return (
    <Card pad={0}>
      <div style={{ padding:'14px 18px', borderBottom:'1px solid var(--line)', display:'flex', alignItems:'center' }}>
        <div>
          <div style={{ fontSize: 14, fontWeight: 600 }}>Ticket types</div>
          <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>Manage tiers, pricing, and inventory for this event.</div>
        </div>
        <div style={{ flex: 1 }}/>
        <Button variant="primary" size="sm" icon="plus">Add tier</Button>
      </div>
      <div style={{ padding: '4px 18px' }}>
        {tiers.map((t, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: 'auto 2fr 1fr 2fr 1fr auto', gap: 14, alignItems: 'center', padding: '16px 0', borderBottom: i < tiers.length - 1 ? '1px solid var(--line)' : 'none' }}>
            <div style={{ width: 6, height: 36, borderRadius: 3, background: t.status === 'ended' ? 'var(--ink-4)' : 'var(--accent)' }}/>
            <div>
              <div style={{ fontSize: 13.5, fontWeight: 600 }}>{t.name}</div>
              <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginTop: 3, display: 'flex', gap: 8 }}>
                <span>Verkauf: 3. Apr → 23. Mai</span>
                <span>·</span>
                <span>Min 1, max 6 pro Buchung</span>
              </div>
            </div>
            <div><span className="mono" style={{ fontSize: 13, fontWeight: 600 }}>{euro(t.price)}</span></div>
            <div>
              <div style={{ fontSize: 11.5, marginBottom: 4, color: 'var(--ink-3)' }}>{count(t.sold)}/{count(t.total)} · {Math.round((t.sold/t.total)*100)}%</div>
              <div style={{ height: 5, background: 'var(--bg-muted)', borderRadius: 99, overflow: 'hidden' }}>
                <div style={{ width: `${(t.sold/t.total)*100}%`, height: '100%', background: t.status === 'ended' ? 'var(--ink-4)' : 'var(--accent)' }}/>
              </div>
            </div>
            <div className="mono" style={{ fontSize: 13, fontWeight: 600, textAlign: 'right' }}>{euro(t.rev, { compact: true })}</div>
            <div style={{ display: 'flex', gap: 4 }}>
              <Button variant="ghost" size="sm" icon="edit" style={{ padding: '0 8px' }}/>
              <Button variant="ghost" size="sm" icon="more" style={{ padding: '0 8px' }}/>
            </div>
          </div>
        ))}
      </div>
    </Card>
  );
};

const EventDetailSales = () => {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
        <Card><Stat label="Gross sales" value={euro(88420, { compact: true })} delta={`+${euro(1820)} today`} icon="money"/></Card>
        <Card><Stat label="Net payout" value={euro(77300, { compact: true })} sub="after fees & refunds" icon="bank"/></Card>
        <Card><Stat label="Refunded" value={euro(1760)} sub="21 bookings" icon="close"/></Card>
        <Card><Stat label="Avg. order value" value={euro(62)} delta="+6%" icon="cart"/></Card>
      </div>

      <Card>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 16 }}>
          <h3 style={{ margin:0, fontSize: 14.5, fontWeight: 600 }}>Revenue breakdown</h3>
          <SegControl value="tier" onChange={()=>{}} options={[
            {value:'tier', label:'By tier'},
            {value:'day', label:'By day'},
            {value:'source', label:'By source'},
          ]}/>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, alignItems: 'center' }}>
          {/* Donut */}
          <svg viewBox="0 0 200 200" width="100%" style={{ maxWidth: 260, margin: '0 auto' }}>
            {(() => {
              const data = [
                { v: 44100, c: 'oklch(0.66 0.15 40)' },
                { v: 21600, c: 'oklch(0.52 0.12 265)' },
                { v: 16320, c: 'oklch(0.6 0.14 155)' },
                { v: 6400, c: 'oklch(0.62 0.18 15)' },
              ];
              const total = data.reduce((a, b) => a + b.v, 0);
              let off = 0;
              return data.map((d, i) => {
                const pct = d.v / total;
                const dash = pct * 502.65;
                const rot = (off * 360) - 90;
                off += pct;
                return <circle key={i} cx="100" cy="100" r="80" fill="none" stroke={d.c} strokeWidth="28" strokeDasharray={`${dash} 502.65`} transform={`rotate(${rot} 100 100)`}/>;
              });
            })()}
            <text x="100" y="95" textAnchor="middle" fontSize="14" fill="var(--ink-3)">Gross</text>
            <text x="100" y="120" textAnchor="middle" fontSize="22" fontWeight="600" fill="var(--ink)" fontFamily="var(--font-display)">{euro(88420, { compact: true })}</text>
          </svg>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[
              { n:'Stehplatz (GA)', v:euro(44100, { compact: true }), pct:49.9, c:'oklch(0.66 0.15 40)' },
              { n:'VIP — Floor', v:euro(21600, { compact: true }), pct:24.4, c:'oklch(0.52 0.12 265)' },
              { n:'Balkon', v:euro(16320, { compact: true }), pct:18.5, c:'oklch(0.6 0.14 155)' },
              { n:'Early bird', v:euro(6400, { compact: true }), pct:7.2, c:'oklch(0.62 0.18 15)' },
            ].map((r, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 0' }}>
                <span style={{ width: 10, height: 10, borderRadius: 3, background: r.c }}/>
                <span style={{ flex: 1, fontSize: 13, fontWeight: 500 }}>{r.n}</span>
                <span className="mono" style={{ fontSize: 12.5, color: 'var(--ink-3)' }}>{r.pct}%</span>
                <span className="mono" style={{ fontSize: 13, fontWeight: 600, width: 72, textAlign: 'right' }}>{r.v}</span>
              </div>
            ))}
          </div>
        </div>
      </Card>

      <Card pad={0}>
        <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--line)', display:'flex', alignItems: 'center' }}>
          <h3 style={{ margin:0, fontSize: 14, fontWeight: 600 }}>Daily sales</h3>
          <div style={{ flex: 1 }}/>
          <Button variant="ghost" size="sm" icon="download">Export</Button>
        </div>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
          <thead>
            <tr style={{ background: 'var(--bg-sunken)', borderBottom: '1px solid var(--line)' }}>
              {['Date','Tickets','Gross','Refunds','Net','Fees'].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>
            {[
              { d:'17. Apr', t:42, g:2428, r:0, n:2310, f:118 },
              { d:'16. Apr', t:38, g:2186, r:32, n:2076, f:98 },
              { d:'15. Apr', t:51, g:2984, r:0, n:2858, f:126 },
              { d:'14. Apr', t:34, g:1892, r:45, n:1769, f:78 },
              { d:'13. Apr', t:48, g:2418, r:0, n:2304, f:114 },
            ].map((r, i) => (
              <tr key={i} style={{ borderBottom: i<4?'1px solid var(--line)':'none', height: 44 }}>
                <td style={{ padding:'0 14px', color:'var(--ink-2)' }}>{r.d}</td>
                <td style={{ padding:'0 14px' }}><span className="mono">{r.t}</span></td>
                <td style={{ padding:'0 14px' }}><span className="mono" style={{ fontWeight: 600 }}>{euro(r.g)}</span></td>
                <td style={{ padding:'0 14px' }}><span className="mono" style={{ color: r.r?'var(--danger)':'var(--ink-4)' }}>{r.r?`−${euro(r.r)}`:'—'}</span></td>
                <td style={{ padding:'0 14px' }}><span className="mono" style={{ fontWeight: 600 }}>{euro(r.n)}</span></td>
                <td style={{ padding:'0 14px', color:'var(--ink-3)' }}><span className="mono">−{euro(r.f)}</span></td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </div>
  );
};

window.EventDetailOverview = EventDetailOverview;
window.EventDetailTickets = EventDetailTickets;
window.EventDetailSales = EventDetailSales;