// Event Detail — hero + tab host. Tab content is split across event-detail-tabs-a/b.jsx.

const EventHero = ({ setRoute, onPreview }) => (
  <>
    {/* Full-bleed cover */}
    <div style={{ position: 'relative', height: 320, overflow: 'hidden' }}>
      {/* Gradient poster */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `
          radial-gradient(ellipse at 20% 0%, oklch(0.56 0.18 340) 0%, transparent 55%),
          radial-gradient(ellipse at 80% 100%, oklch(0.48 0.2 30) 0%, transparent 60%),
          radial-gradient(ellipse at 50% 50%, oklch(0.38 0.16 295) 0%, transparent 70%),
          linear-gradient(135deg, oklch(0.26 0.1 300), oklch(0.22 0.08 340))
        `,
      }}/>
      {/* Grain */}
      <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.35, mixBlendMode: 'overlay' }}>
        <filter id="heroGrain">
          <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/>
          <feColorMatrix values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.4 0"/>
        </filter>
        <rect width="100%" height="100%" filter="url(#heroGrain)"/>
      </svg>
      {/* Decorative poster type, echoing tour art */}
      <div style={{
        position: 'absolute', right: 40, top: '50%', transform: 'translateY(-50%)',
        fontFamily: 'var(--font-display)', fontSize: 120, fontStyle: 'italic',
        color: 'rgba(255,255,255,0.12)', letterSpacing: '-0.04em', lineHeight: 1,
        fontWeight: 500, whiteSpace: 'nowrap', pointerEvents: 'none',
      }}>Apparat · LP5</div>
      {/* Strong bottom scrim so white title has contrast */}
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0.1) 0%, transparent 35%, rgba(0,0,0,0.55) 85%, rgba(0,0,0,0.7) 100%)' }}/>

      {/* Back button */}
      <div style={{ position: 'absolute', top: 16, left: 24 }}>
        <button onClick={() => setRoute('events')} style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          padding: '6px 12px', borderRadius: 999,
          background: 'rgba(255,255,255,0.14)', color: '#fff',
          border: '1px solid rgba(255,255,255,0.2)',
          backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
          fontFamily: 'inherit', fontSize: 12.5, fontWeight: 500,
          cursor: 'pointer',
        }}>
          <Icon name="chevronLeft" size={14}/>All events
        </button>
      </div>

      {/* Status chips top-right */}
      <div style={{ position: 'absolute', top: 16, right: 24, display: 'flex', gap: 6 }}>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          padding: '5px 10px', borderRadius: 999, fontSize: 11, fontWeight: 600,
          background: 'rgba(16, 185, 129, 0.25)', color: '#fff',
          border: '1px solid rgba(16, 185, 129, 0.4)',
          backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
          textTransform: 'uppercase', letterSpacing: '0.06em',
        }}>
          <span style={{ width: 6, height: 6, borderRadius: 99, background: '#10b981' }}/>
          On sale
        </span>
        <span style={{
          padding: '5px 10px', borderRadius: 999, fontSize: 11, fontWeight: 600,
          background: 'rgba(255,255,255,0.15)', color: '#fff',
          border: '1px solid rgba(255,255,255,0.2)',
          backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
          textTransform: 'uppercase', letterSpacing: '0.06em',
        }}>Concert</span>
      </div>
    </div>

    {/* Title band — sits ON TOP of the dark end of the cover */}
    <div style={{ padding: '0 36px', maxWidth: 1400, margin: '-140px auto 0', position: 'relative' }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '110px 1fr', gap: 20, alignItems: 'flex-end',
      }}>
        {/* Event avatar overlaps cover */}
        <div style={{
          width: 110, height: 110, borderRadius: 18,
          background: `
            radial-gradient(circle at 30% 20%, oklch(0.7 0.2 30), oklch(0.4 0.15 340) 70%)
          `,
          border: '4px solid var(--bg)',
          boxShadow: '0 8px 24px rgba(0,0,0,0.18)',
          overflow: 'hidden', position: 'relative',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <div style={{
            fontFamily: 'var(--font-display)', fontStyle: 'italic',
            color: '#fff', fontSize: 26, fontWeight: 500, lineHeight: 1,
            textAlign: 'center', letterSpacing: '-0.03em',
            textShadow: '0 2px 10px rgba(0,0,0,0.2)',
          }}>Apparat<br/>LP5</div>
        </div>

        {/* Title + primary meta — on top of dark cover scrim */}
        <div style={{ paddingBottom: 10, minWidth: 0 }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: 'rgba(255,255,255,0.95)', textTransform: 'uppercase',
            letterSpacing: '0.16em', marginBottom: 8,
            textShadow: '0 1px 8px rgba(0,0,0,0.5)' }}>
            Apparat presents
          </div>
          <h1 className="display" style={{
            margin: 0, fontSize: 38, fontWeight: 500, letterSpacing: '-0.02em',
            color: '#fff', lineHeight: 1.05,
            textShadow: '0 2px 20px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.4)',
          }}>LP5 Live · Berghain Residency</h1>
        </div>
      </div>

      {/* Meta strip + actions — lives below cover on page background */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 16,
        marginTop: 20, paddingTop: 16, flexWrap: 'wrap',
        borderTop: '1px solid var(--line)',
      }}>
        <MetaItem icon="calendar" label="Date" value="Sa, 24. Mai · 22:00"/>
        <MetaDivider/>
        <MetaItem icon="pin" label="Venue" value="Berghain, Berlin"/>
        <MetaDivider/>
        <MetaItem icon="users" label="Capacity" value="1.700 · 84% sold"/>
        <MetaDivider/>
        <MetaItem icon="link" label="Public URL" value="tixwerk.de/e/apparat-berghain" mono copy/>
        <div style={{ flex: 1, minWidth: 20 }}/>
        <div style={{ display: 'flex', gap: 8 }}>
          <Button variant="secondary" size="md" icon="eye" onClick={onPreview}>Preview</Button>
          <Button variant="secondary" size="md" icon="share">Share</Button>
          <Button variant="primary" size="md" icon="edit">Edit event</Button>
        </div>
      </div>
    </div>
  </>
);

const MetaItem = ({ icon, label, value, mono, copy }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
    <div style={{
      width: 32, height: 32, borderRadius: 9,
      background: 'var(--bg-raised)', border: '1px solid var(--line)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: 'var(--ink-2)', flexShrink: 0,
    }}>
      <Icon name={icon} size={14}/>
    </div>
    <div style={{ minWidth: 0 }}>
      <div style={{ fontSize: 10.5, color: 'var(--ink-3)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', lineHeight: 1.3 }}>{label}</div>
      <div style={{
        fontSize: 13, fontWeight: 600, color: 'var(--ink)', marginTop: 1,
        fontFamily: mono ? 'var(--font-mono)' : 'inherit',
        whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
        display: 'flex', alignItems: 'center', gap: 6,
      }}>
        {value}
        {copy && <Icon name="copy" size={11} style={{ color: 'var(--ink-3)', cursor: 'pointer' }}/>}
      </div>
    </div>
  </div>
);

const MetaDivider = () => <div style={{ width: 1, height: 24, background: 'var(--line)' }}/>;

const EventDetail = ({ setRoute }) => {
  const [tab, setTab] = React.useState(() => localStorage.getItem('tixwerk-event-tab') || 'overview');
  const [previewOpen, setPreviewOpen] = React.useState(false);
  React.useEffect(() => { localStorage.setItem('tixwerk-event-tab', tab); }, [tab]);

  return (
    <div style={{ padding: '0 0 80px' }}>
      <EventHero setRoute={setRoute} onPreview={() => setPreviewOpen(true)}/>

      <div style={{ padding: '0 36px', maxWidth: 1400, margin: '0 auto' }}>
        {/* Tabs */}
        <Tabs value={tab} onChange={setTab} style={{ marginTop: 24 }} options={[
          { value: 'overview', label: 'Overview' },
          { value: 'sales', label: 'Sales' },
          { value: 'tickets', label: 'Tickets' },
          { value: 'blockseats', label: 'Block seats' },
          { value: 'reminders', label: 'Reminders' },
          { value: 'embed', label: 'Embed & share' },
          { value: 'settings', label: 'Settings' },
        ]}/>

        <div style={{ marginTop: 20 }}>
          {tab === 'overview' && <EventDetailOverview/>}
          {tab === 'sales' && <EventDetailSales/>}
          {tab === 'tickets' && <EventDetailTickets/>}
          {tab === 'blockseats' && <EventDetailBlockSeats/>}
          {tab === 'reminders' && <EventDetailReminders/>}
          {tab === 'embed' && <EventDetailEmbed/>}
          {tab === 'settings' && <EventDetailSettings/>}
        </div>
      </div>

      {previewOpen && <PublicPreview onClose={() => setPreviewOpen(false)}/>}
    </div>
  );
};

window.EventDetail = EventDetail;