// Public Event Preview — buyer-facing page rendered inside browser chrome.
// Opened from the event hero's "Preview" button.

const PublicPreview = ({ onClose }) => {
  const [device, setDevice] = React.useState('desktop');  // desktop | mobile
  const [qty, setQty] = React.useState({ vip: 0, stehplatz: 2, balkon: 0, oberrang: 0 });
  const subtotal =
    qty.vip * 120 + qty.stehplatz * 45 +
    qty.balkon * 68 + qty.oberrang * 38;
  const fees = Math.round(subtotal * 0.04);
  const vat = Math.round((subtotal + fees) * 0.19);
  const total = subtotal + fees + vat;
  const totalQty = Object.values(qty).reduce((a, b) => a + b, 0);

  return (
    <div style={{
      position: 'fixed', inset: 0, zIndex: 950,
      background: 'oklch(0.15 0.01 60 / 0.72)',
      backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)',
      display: 'flex', flexDirection: 'column', alignItems: 'center',
      padding: '24px 24px 40px',
      overflow: 'auto',
    }}>
      {/* Preview bar */}
      <div style={{
        width: '100%', maxWidth: 1200, display: 'flex', alignItems: 'center', gap: 10,
        padding: '10px 14px', marginBottom: 18,
        background: 'rgba(255,255,255,0.95)', borderRadius: 12,
        boxShadow: '0 8px 28px rgba(0,0,0,0.18)',
      }}>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em',
          color: 'var(--ink-3)',
        }}>
          <span style={{ width: 7, height: 7, borderRadius: 99, background: 'var(--accent)' }}/>
          Preview mode
        </span>
        <span style={{ fontSize: 12, color: 'var(--ink-3)' }}>— this is what buyers will see at tixwerk.de/e/apparat-berghain</span>
        <div style={{ flex: 1 }}/>
        <SegControl value={device} onChange={setDevice} options={[
          { value: 'desktop', label: <span style={{ display:'inline-flex', alignItems:'center', gap: 4 }}><Icon name="desktop" size={12}/>Desktop</span> },
          { value: 'mobile',  label: <span style={{ display:'inline-flex', alignItems:'center', gap: 4 }}><Icon name="mobile" size={12}/>Mobile</span> },
        ]}/>
        <Button variant="ghost" size="sm" icon="share">Copy link</Button>
        <Button variant="secondary" size="sm" onClick={onClose} icon="close">Close preview</Button>
      </div>

      {/* Browser window */}
      <div style={{ width: device === 'mobile' ? 400 : '100%', maxWidth: device === 'mobile' ? 400 : 1200, transition: 'max-width 240ms' }}>
        <ChromeWindow
          width="100%"
          height={device === 'mobile' ? 780 : 780}
          tabs={[
            { title: 'Apparat · LP5 Live · Tixwerk', active: true },
            { title: 'Gmail' },
            { title: 'Instagram' },
          ]}
          url="https://tixwerk.de/e/apparat-berghain"
        >
          <PublicEventPage qty={qty} setQty={setQty} subtotal={subtotal} fees={fees} vat={vat} total={total} totalQty={totalQty} mobile={device === 'mobile'}/>
        </ChromeWindow>
      </div>
    </div>
  );
};

// ─── The buyer-facing page ────────────────────────────────────────────────────

const PublicEventPage = ({ qty, setQty, subtotal, fees, vat, total, totalQty, mobile }) => (
  <div style={{
    minHeight: '100%',
    background: '#fafaf7',
    color: '#1a1a18',
    fontFamily: 'var(--font-ui)',
  }}>
    {/* Site header */}
    <div style={{
      height: 56, padding: '0 24px', display: 'flex', alignItems: 'center',
      borderBottom: '1px solid oklch(0.9 0.01 80)', background: '#fff',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{
          width: 26, height: 26, borderRadius: 7,
          background: 'linear-gradient(135deg, oklch(0.55 0.18 25), oklch(0.35 0.2 340))',
        }}/>
        <span className="display" style={{ fontSize: 18, fontWeight: 500, letterSpacing: '-0.01em', fontStyle: 'italic' }}>tixwerk</span>
      </div>
      <div style={{ flex: 1 }}/>
      {!mobile && <div style={{ display: 'flex', gap: 22, fontSize: 13, color: '#555' }}>
        <span>Concerts</span><span>Comedy</span><span>Sports</span><span>Festivals</span>
      </div>}
      <div style={{ flex: 1 }}/>
      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
        <div style={{ width: 28, height: 28, borderRadius: 99, background: '#eee', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name="search" size={12} style={{ color: '#666' }}/>
        </div>
        {!mobile && <span style={{ fontSize: 12.5, fontWeight: 500 }}>Sign in</span>}
      </div>
    </div>

    {/* Hero */}
    <div style={{
      position: 'relative', height: mobile ? 260 : 420, overflow: 'hidden',
      background: `
        radial-gradient(circle at 15% 20%, oklch(0.75 0.22 30) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, oklch(0.45 0.2 340) 0%, transparent 50%),
        radial-gradient(circle at 50% 100%, oklch(0.35 0.15 280) 0%, transparent 60%),
        linear-gradient(180deg, oklch(0.25 0.1 320), oklch(0.15 0.06 320))
      `,
    }}>
      {/* Decorative grain */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(circle at 50% 50%, transparent 30%, rgba(0,0,0,0.4) 100%)',
      }}/>
      <div style={{
        position: 'absolute', left: mobile ? 20 : 48, right: mobile ? 20 : 48, bottom: mobile ? 24 : 40,
        color: '#fff',
      }}>
        <span style={{
          display: 'inline-block', padding: '4px 10px', borderRadius: 99,
          background: 'rgba(255,255,255,0.15)', backdropFilter: 'blur(8px)',
          fontSize: 10.5, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase',
          marginBottom: 14,
        }}>Live Concert · LP5 World Tour</span>
        <h1 className="display" style={{
          margin: 0, fontSize: mobile ? 32 : 58, fontWeight: 500,
          letterSpacing: '-0.02em', lineHeight: 1.02, fontStyle: 'italic',
          textShadow: '0 2px 12px rgba(0,0,0,0.3)',
        }}>LP5 Live <span style={{ fontStyle: 'normal', fontWeight: 400, opacity: 0.9 }}>·</span> Berghain</h1>
        <div style={{ fontSize: mobile ? 14 : 17, opacity: 0.92, marginTop: 8, fontWeight: 400 }}>
          Apparat presents a night of cinematic electronica, live band & analogue synths
        </div>
      </div>
      <span style={{
        position: 'absolute', top: 18, right: 18, fontSize: 11, color: '#fff',
        background: 'rgba(0,0,0,0.35)', padding: '4px 10px', borderRadius: 99, backdropFilter: 'blur(8px)',
      }}>HERO IMAGE · placeholder</span>
    </div>

    {/* Content */}
    <div style={{
      maxWidth: 1100, margin: '0 auto',
      padding: mobile ? '20px 20px 120px' : '36px 48px 48px',
      display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 380px', gap: mobile ? 24 : 40,
    }}>
      {/* LEFT */}
      <div>
        {/* Essentials row */}
        <div style={{ display: 'flex', gap: mobile ? 14 : 28, flexWrap: 'wrap', paddingBottom: 22, borderBottom: '1px solid oklch(0.9 0.01 80)' }}>
          <FactRow icon="calendar" title="Samstag, 24. Mai" sub="Einlass 21:00 · Start 22:00"/>
          <FactRow icon="pin"      title="Berghain" sub="Friedrichshain, Berlin · 1.700 cap"/>
          <FactRow icon="user"     title="18+ only" sub="Photo ID required at entry"/>
        </div>

        {/* About */}
        <section style={{ padding: '24px 0 8px' }}>
          <h2 className="display" style={{ margin: 0, fontSize: 22, fontWeight: 500, letterSpacing: '-0.01em' }}>About this show</h2>
          <p style={{ fontSize: 14.5, lineHeight: 1.65, color: '#333', marginTop: 10 }}>
            The LP5 Live Tour lands at Berghain for a single night. Expect a two-hour set spanning
            Apparat's most celebrated work — <em>Goodbye</em>, <em>Heroist</em>, <em>Caronte</em> — with a live
            4-piece band, modular synths, and a room-filling Funktion-One rig. Come early for the opener and stay
            late for the Panorama Bar afterparty (ticketed separately).
          </p>
          <p style={{ fontSize: 14.5, lineHeight: 1.65, color: '#333', marginTop: 10 }}>
            Gates open at 21:00. U-Bahn Warschauer Straße · 6 min walk. No parking at venue — bike stands on Am Wriezener Bahnhof.
          </p>
        </section>

        {/* Lineup */}
        <section style={{ padding: '20px 0', borderTop: '1px solid oklch(0.9 0.01 80)' }}>
          <h2 className="display" style={{ margin: 0, fontSize: 22, fontWeight: 500, letterSpacing: '-0.01em', marginBottom: 14 }}>Lineup</h2>
          <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
            {[
              { name: 'Apparat',        role: 'Headliner',    time: '23:30' },
              { name: 'Pantha du Prince', role: 'Special guest', time: '22:30' },
              { name: 'Phaeleh',          role: 'Opening act',   time: '22:00' },
            ].map(a => (
              <div key={a.name} style={{ flex: '1 1 180px', padding: 14, borderRadius: 12, background: '#fff', border: '1px solid oklch(0.92 0.01 80)' }}>
                <div style={{
                  width: 52, height: 52, borderRadius: 99,
                  background: `radial-gradient(circle at 30% 30%, oklch(0.7 0.16 ${Math.random()*360}), oklch(0.3 0.12 ${Math.random()*360}))`,
                  marginBottom: 10,
                }}/>
                <div style={{ fontSize: 14, fontWeight: 600 }}>{a.name}</div>
                <div style={{ fontSize: 12, color: '#666', marginTop: 2 }}>{a.role} · {a.time}</div>
              </div>
            ))}
          </div>
        </section>

        {/* Venue map */}
        <section style={{ padding: '20px 0', borderTop: '1px solid oklch(0.9 0.01 80)' }}>
          <h2 className="display" style={{ margin: 0, fontSize: 22, fontWeight: 500, letterSpacing: '-0.01em', marginBottom: 14 }}>Venue & transport</h2>
          <div style={{
            height: 180, borderRadius: 12, overflow: 'hidden', position: 'relative',
            background: 'linear-gradient(135deg, #d6e4c8 0%, #e8e1cb 100%)',
            border: '1px solid oklch(0.88 0.01 80)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            {/* fake map lines */}
            <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0, opacity: 0.25 }}>
              <line x1="0" y1="60%" x2="100%" y2="55%" stroke="#555" strokeWidth="1.5"/>
              <line x1="30%" y1="0" x2="28%" y2="100%" stroke="#555" strokeWidth="1.5"/>
              <line x1="70%" y1="0" x2="72%" y2="100%" stroke="#555" strokeWidth="1.5"/>
              <line x1="0" y1="80%" x2="100%" y2="82%" stroke="#555" strokeWidth="1"/>
            </svg>
            <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 8, padding: '10px 16px', background: '#fff', borderRadius: 99, boxShadow: '0 4px 16px rgba(0,0,0,0.1)' }}>
              <Icon name="pin" size={14} style={{ color: 'oklch(0.55 0.18 25)' }}/>
              <span style={{ fontSize: 13, fontWeight: 600 }}>Berghain · Friedrichshain</span>
            </div>
            <span style={{ position: 'absolute', bottom: 10, right: 12, fontSize: 10.5, color: '#555', background: 'rgba(255,255,255,0.8)', padding: '2px 6px', borderRadius: 4 }}>MAP · placeholder</span>
          </div>
          <div style={{ display: 'flex', gap: 10, marginTop: 12, fontSize: 12.5, color: '#444' }}>
            <span>🚇 Warschauer Straße · 6 min walk</span>
            <span>·</span>
            <span>🚲 Bike stands at venue</span>
          </div>
        </section>

        {/* FAQ */}
        <section style={{ padding: '20px 0 0', borderTop: '1px solid oklch(0.9 0.01 80)' }}>
          <h2 className="display" style={{ margin: 0, fontSize: 22, fontWeight: 500, letterSpacing: '-0.01em', marginBottom: 12 }}>Good to know</h2>
          {[
            { q: 'Can I bring a bag?', a: 'Clutches and small handbags only (max 30×20cm). Backpacks must be checked at Gate 2.' },
            { q: 'Is there food and drink?', a: 'Yes — bar with beer, wine, cocktails and non-alcoholic options. Card, SEPA, and contactless accepted.' },
            { q: 'What if it rains?', a: 'Indoor venue — no weather issues. Covered seating on Rang 1 & 2.' },
            { q: 'Can I transfer my ticket?', a: 'Yes — tickets are transferable up to 24h before doors via your Tixwerk account.' },
          ].map((f, i) => (
            <details key={i} style={{ padding: '14px 0', borderBottom: i < 3 ? '1px solid oklch(0.92 0.01 80)' : 'none' }}>
              <summary style={{ fontSize: 14, fontWeight: 600, cursor: 'pointer', listStyle: 'none', display: 'flex', alignItems: 'center' }}>
                {f.q}
                <span style={{ flex: 1 }}/>
                <span style={{ fontSize: 18, color: '#999' }}>+</span>
              </summary>
              <p style={{ fontSize: 13.5, color: '#555', marginTop: 8, lineHeight: 1.6 }}>{f.a}</p>
            </details>
          ))}
        </section>
      </div>

      {/* RIGHT — sticky ticket picker */}
      <aside style={mobile ? { position: 'fixed', left: 16, right: 16, bottom: 16, zIndex: 5 } : { position: 'sticky', top: 20, alignSelf: 'start' }}>
        <div style={{
          background: '#fff', borderRadius: 14, border: '1px solid oklch(0.9 0.01 80)',
          boxShadow: '0 12px 36px rgba(0,0,0,0.08)', overflow: 'hidden',
        }}>
          {!mobile && (
            <div style={{ padding: '14px 18px 0' }}>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'oklch(0.55 0.18 25)' }}>Selling fast</div>
              <div className="display" style={{ fontSize: 20, fontWeight: 500, letterSpacing: '-0.01em', marginTop: 4 }}>Pick your tickets</div>
              <div style={{ fontSize: 12, color: '#666', marginTop: 4 }}>🔥 62 people viewing right now</div>
            </div>
          )}

          <div style={{ padding: mobile ? 12 : '14px 18px' }}>
            {[
              { k: 'vip',       n: 'VIP · Floor',            p: 120, sub: 'Meet & greet · Free bar' },
              { k: 'stehplatz', n: 'Stehplatz · GA',          p: 45,  sub: 'Floor standing', hot: true },
              { k: 'balkon',    n: 'Balkon · Rang 1',         p: 68,  sub: 'Seated · Great sightlines' },
              { k: 'oberrang',  n: 'Oberrang · Rang 2',       p: 38,  sub: 'Seated · Upper tier' },
            ].map(t => (
              <div key={t.k} style={{
                padding: '12px 0', borderBottom: '1px solid oklch(0.94 0.01 80)',
                display: 'flex', alignItems: 'center', gap: 10,
              }}>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    <span style={{ fontSize: 13.5, fontWeight: 600 }}>{t.n}</span>
                    {t.hot && <span style={{ fontSize: 10, fontWeight: 700, color: 'oklch(0.55 0.18 25)', background: 'oklch(0.95 0.04 25)', padding: '1px 6px', borderRadius: 99 }}>HOT</span>}
                  </div>
                  <div style={{ fontSize: 11.5, color: '#666', marginTop: 2 }}>{t.sub}</div>
                  <div style={{ fontSize: 14, fontWeight: 600, marginTop: 4, fontFamily: 'var(--font-display)' }}>{euro(t.p)}</div>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <button onClick={() => setQty(q => ({ ...q, [t.k]: Math.max(0, q[t.k] - 1) }))} style={qtyBtn}>−</button>
                  <span style={{ width: 18, textAlign: 'center', fontSize: 13, fontWeight: 600 }}>{qty[t.k]}</span>
                  <button onClick={() => setQty(q => ({ ...q, [t.k]: q[t.k] + 1 }))} style={qtyBtn}>+</button>
                </div>
              </div>
            ))}

            {/* Totals */}
            {totalQty > 0 && (
              <div style={{ marginTop: 14, padding: 12, background: '#fafaf7', borderRadius: 10, fontSize: 12.5 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', color: '#555', marginBottom: 3 }}>
                  <span>Subtotal</span><span>{euro(subtotal)}</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', color: '#555', marginBottom: 3 }}>
                  <span>Platform fee</span><span>{euro(fees)}</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', color: '#555', marginBottom: 6 }}>
                  <span>VAT (19%)</span><span>{euro(vat)}</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontWeight: 600, fontSize: 14, paddingTop: 6, borderTop: '1px solid oklch(0.92 0.01 80)' }}>
                  <span>Total</span><span style={{ fontFamily: 'var(--font-display)' }}>{euro(total)}</span>
                </div>
              </div>
            )}

            <button disabled={totalQty === 0} style={{
              marginTop: 14, width: '100%', height: 48,
              borderRadius: 10, border: 0, cursor: totalQty > 0 ? 'pointer' : 'not-allowed',
              background: totalQty > 0 ? 'oklch(0.2 0.02 60)' : 'oklch(0.88 0.01 80)',
              color: totalQty > 0 ? '#fff' : '#aaa',
              fontSize: 14.5, fontWeight: 600, fontFamily: 'inherit',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            }}>
              {totalQty === 0 ? 'Select tickets' : `Checkout · ${euro(total)}`}
              {totalQty > 0 && <Icon name="arrow-right" size={14}/>}
            </button>

            <div style={{ marginTop: 10, fontSize: 11, color: '#888', textAlign: 'center' }}>
              Secure payment · SEPA, cards, Klarna, PayPal · Instant e-tickets
            </div>
          </div>
        </div>

        {!mobile && (
          <div style={{ marginTop: 14, padding: 14, borderRadius: 12, background: '#fff', border: '1px solid oklch(0.92 0.01 80)', fontSize: 12.5 }}>
            <div style={{ fontWeight: 600, marginBottom: 6 }}>🎟 Organiser</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 32, height: 32, borderRadius: 99, background: 'linear-gradient(135deg, oklch(0.7 0.14 30), oklch(0.45 0.2 340))' }}/>
              <div>
                <div style={{ fontWeight: 600 }}>Universal Music GmbH</div>
                <div style={{ color: '#666', fontSize: 11.5 }}>127 events · Verified organiser</div>
              </div>
            </div>
          </div>
        )}
      </aside>
    </div>

    {/* Footer */}
    <div style={{ padding: '22px 48px', borderTop: '1px solid oklch(0.9 0.01 80)', background: '#fff', fontSize: 11.5, color: '#888', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8 }}>
      <span>© 2026 Tixwerk · A German ticketing platform</span>
      <span>Terms · Privacy · Refund policy · Help</span>
    </div>
  </div>
);

const FactRow = ({ icon, title, sub }) => (
  <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start', flex: '1 1 200px' }}>
    <div style={{ width: 36, height: 36, borderRadius: 10, background: '#fff', border: '1px solid oklch(0.92 0.01 80)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
      <Icon name={icon} size={15} style={{ color: 'oklch(0.55 0.18 25)' }}/>
    </div>
    <div>
      <div style={{ fontSize: 14, fontWeight: 600 }}>{title}</div>
      <div style={{ fontSize: 12, color: '#666', marginTop: 2 }}>{sub}</div>
    </div>
  </div>
);

const qtyBtn = {
  width: 26, height: 26, borderRadius: 6, border: '1px solid oklch(0.88 0.01 80)',
  background: '#fff', color: '#333', fontSize: 14, fontFamily: 'inherit', cursor: 'pointer',
  display: 'flex', alignItems: 'center', justifyContent: 'center',
};

window.PublicPreview = PublicPreview;