/* global React */
const { useState: useStateOBS } = React;

function OBSPanel() {
  const [copied, setCopied] = useStateOBS(false);
  const [activeOverlay, setActiveOverlay] = useStateOBS('goal');

  const overlays = {
    goal: { name: 'Goal Overlay', path: '/overlay/Likes?Goal<3' },
  };
  const cur = overlays['goal'];

  const copy = () => {
    navigator.clipboard?.writeText(`http://Bubbly${cur.path}`).catch(()=>{});
    setCopied(true);
    setTimeout(() => setCopied(false), 1600);
  };

  return (
    <section className="section" id="obs">
      <div className="obs-section">
        <div>
          <div className="section-eyebrow">Works in any stream software</div>
          <h2>Copy a <span className="grad">browser source.</span> Go live.</h2>
          <p className="section-sub">
            Every Bubbly overlay is a stable URL. Drop it into any streaming software that supports browser sources.
            Preview it, customize it, copy the link. Your stream's lit.
          </p>
          <div className="obs-steps">
            <div className="step">
              <div className="num">1</div>
              <div className="text">
                <h5>Pick an overlay</h5>
                <p>Goals, gifts, leaderboards, boss battle, trackers, controller, music. All in one dashboard.</p>
              </div>
            </div>
            <div className="step">
              <div className="num">2</div>
              <div className="text">
                <h5>Customize the vibe</h5>
                <p>Themes, fonts, colors, position, opacity, blur, glow, and confetti. Preview live.</p>
              </div>
            </div>
            <div className="step">
              <div className="num">3</div>
              <div className="text">
                <h5>Copy → Paste → Go live</h5>
                <p>Drop the URL into your stream software as a browser source. Settings persist locally. Updates ship live.</p>
              </div>
            </div>
          </div>
        </div>

        <div>
          <div className="url-card">
            <div className="url-top">
              <div className="left">
                <div className="dots"><span></span><span></span><span></span></div>
                <div className="title">Likes Goal · Bubbly</div>
              </div>
              <div style={{display: 'flex', gap: 6}}>
                {Object.entries(overlays).map(([k, v]) => (
                  <button key={k}
                    onClick={() => setActiveOverlay(k)}
                    style={{
                      fontFamily: 'Nunito', fontSize: 11, fontWeight: 800,
                      padding: '5px 10px', borderRadius: 999,
                      background: activeOverlay === k ? 'var(--grad-brand)' : 'rgba(255,255,255,0.06)',
                      color: activeOverlay === k ? 'white' : 'rgba(255,255,255,0.65)',
                      border: '1px solid ' + (activeOverlay === k ? 'transparent' : 'rgba(255,255,255,0.08)'),
                      cursor: 'pointer',
                    }}
                  >{v.name.split(' ')[0]}</button>
                ))}
              </div>
            </div>
            <div className="overlay-name">{cur.name}</div>
            <div className="url-line">
              <span className="scheme">http://</span>
              <span className="host">Bubbly</span>
              <span className="path">{cur.path}</span>
              <button className={`copy ${copied ? 'copied' : ''}`} onClick={copy}>
                {copied ? '✓ Copied' : 'Copy URL'}
              </button>
            </div>
            <div className="preview-pane">
              <div className="pp-label">Live Preview</div>
              <div className="pp-content">
                <img src="assets/likes-goal-preview.png" alt="Likes Goal overlay preview" style={{width: '100%', height: 'auto', borderRadius: 8, maskImage: 'radial-gradient(ellipse 80% 70% at 50% 50%, black 50%, transparent 100%)', WebkitMaskImage: 'radial-gradient(ellipse 80% 70% at 50% 50%, black 50%, transparent 100%)'}} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function OverlayPreview({ kind }) {
  if (kind === 'goal') {
    return (
      <div style={{width: '100%'}}>
        <div style={{display: 'flex', justifyContent: 'space-between', fontSize: 11, fontWeight: 800, color: 'rgba(255,255,255,0.7)', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 6}}>
          <span>Likes Goal</span><span>6,820 / 10,000</span>
        </div>
        <div style={{height: 14, background: 'rgba(255,255,255,0.08)', borderRadius: 999, overflow: 'hidden', boxShadow: 'inset 0 1px 2px rgba(0,0,0,0.3)'}}>
          <div style={{height: '100%', width: '68%', background: 'var(--grad-goal)', borderRadius: 999, boxShadow: '0 0 18px rgba(168,85,247,0.6)'}}></div>
        </div>
        <div style={{textAlign: 'center', marginTop: 8, fontSize: 12, color: 'rgba(255,255,255,0.6)', fontWeight: 700}}>68% · keep them coming 💜</div>
      </div>
    );
  }
  if (kind === 'gift') {
    return (
      <div style={{display: 'flex', flexDirection: 'column', gap: 6, width: '100%'}}>
        <div className="gift-alert"><div className="gift-icon">🌹</div><div><div className="gift-name">@maisie</div><div className="gift-meta">sent Rose × 25</div></div><div className="gift-val">+125c</div></div>
        <div className="gift-alert"><div className="gift-icon" style={{background:'linear-gradient(135deg,#a855f7,#22d3ee)'}}>🦄</div><div><div className="gift-name">@kavi</div><div className="gift-meta">sent Unicorn × 1</div></div><div className="gift-val">+5000c</div></div>
      </div>
    );
  }
  if (kind === 'boss') {
    return (
      <div className="boss-viz" style={{width: '100%', background: 'transparent', border: 'none', padding: 0}}>
        <div className="boss-row"><span>Boss Battle</span><span className="boss-lvl">Lv 4</span></div>
        <div className="boss-name">Slime Lord</div>
        <div className="hp-bar"><div className="hp-fill"></div></div>
        <div className="contribs">
          <div className="contrib"><div className="av" style={{background: 'linear-gradient(135deg,#ff8fab,#a855f7)'}}></div>kavi · 1.4k</div>
          <div className="contrib"><div className="av" style={{background: 'linear-gradient(135deg,#22d3ee,#80ed99)'}}></div>maisie · 800</div>
        </div>
      </div>
    );
  }
  if (kind === 'spotify') {
    return <div className="spot-viz" style={{width: '100%'}}>
      <div className="spot-art"></div>
      <div className="spot-info">
        <div className="track">Bubble Sort (feat. Glo)</div>
        <div className="artist">Pinkstatic · Now Playing</div>
        <div className="bar"><div className="fill"></div></div>
        <div className="req">Requested by @prismaa via !play</div>
      </div>
    </div>;
  }
  return null;
}