/* global React, window */
// Drums Lab — public beta page.
//
// Standalone wrapper rendered at coachingforall.co/drums-beta. Mounts
// the existing DrumsLab component without admin chrome and with a
// light brand header so any visitor (signed in or not) can play.
//
// Anonymous-friendly: the underlying drums_attempts / drums_feedback
// tables accept rows with user_id = NULL after v107. The data.js
// helpers fall through to writing a NULL user_id when no auth session
// is present — see updates in src/features/drums/data.js.

(function () {
  'use strict';
  window.DrumsLab = window.DrumsLab || {};
  window.DrumsLab.ui = window.DrumsLab.ui || {};

  const DrumsBetaPage = function (props) {
    const navigate = (props && props.navigate) || function () {};

    function goHome() {
      try { window.history.pushState({}, '', '/'); } catch (e) {}
      navigate('home');
    }

    return (
      <div style={{
        minHeight: '100vh',
        background: 'oklch(98.5% 0.007 60)',
        fontFamily: "'Plus Jakarta Sans', sans-serif",
        display: 'flex',
        flexDirection: 'column',
      }}>
        {/* Lightweight brand header — same family as the marketing site
            but stripped down so the lab feels like a dedicated tool. */}
        <header style={{
          padding: '14px 22px',
          borderBottom: '1px solid oklch(92% 0.012 265)',
          background: '#fff',
          display: 'flex',
          alignItems: 'center',
          gap: 12,
          flexWrap: 'wrap',
        }}>
          <a
            href="/"
            onClick={function (e) { e.preventDefault(); goHome(); }}
            style={{
              fontFamily: "'Cormorant Garamond', serif",
              fontSize: 22,
              fontWeight: 700,
              color: 'oklch(22% 0.06 265)',
              letterSpacing: '0.01em',
              textDecoration: 'none',
            }}
          >Coaching</a>
          <span style={{ fontSize: 11, color: 'oklch(55% 0.04 265)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
            Drums Lab · public beta
          </span>
          <span style={{ flex: 1 }} />
          <a
            href="/"
            onClick={function (e) { e.preventDefault(); goHome(); }}
            style={{
              fontSize: 13,
              fontWeight: 600,
              color: 'oklch(35% 0.16 265)',
              textDecoration: 'none',
            }}
          >Back to the site</a>
        </header>

        {/* Beta intro band — tells the visitor what this is, no signup
            required, and points them at the feedback widget. */}
        <div style={{
          padding: '18px 22px',
          background: 'oklch(96% 0.04 265)',
          borderBottom: '1px solid oklch(90% 0.04 265)',
        }}>
          <div style={{ maxWidth: 1080, margin: '0 auto' }}>
            <h1 style={{
              fontSize: 26,
              fontWeight: 700,
              color: 'oklch(18% 0.03 265)',
              margin: '0 0 6px',
              lineHeight: 1.2,
            }}>Try our drum-basics lessons + practice quizzes</h1>
            <p style={{
              fontSize: 14,
              color: 'oklch(35% 0.05 265)',
              margin: 0,
              lineHeight: 1.55,
              maxWidth: 740,
            }}>
              Free public beta. No account needed. Click a lesson on the left, or switch to Practice for the ear-training and reading quizzes. The blue "Give feedback" button bottom-right is the one we read — tell us anything: what's confusing, what worked, what should be in here that isn't.
            </p>
          </div>
        </div>

        {/* The lab itself — uses the same DrumsLab component the admin
            tab renders, so we don't fork the implementation. */}
        <main style={{
          flex: 1,
          padding: '24px 22px',
          width: '100%',
          maxWidth: 1080,
          margin: '0 auto',
          boxSizing: 'border-box',
        }}>
          {window.DrumsLab && window.DrumsLab.ui && window.DrumsLab.ui.DrumsLab ? (
            <window.DrumsLab.ui.DrumsLab />
          ) : (
            <div style={{ padding: 40, textAlign: 'center', color: 'oklch(55% 0.04 265)', fontSize: 13 }}>Loading…</div>
          )}
        </main>

        <footer style={{
          padding: '18px 22px',
          borderTop: '1px solid oklch(92% 0.012 265)',
          background: '#fff',
          fontSize: 11.5,
          color: 'oklch(55% 0.04 265)',
          textAlign: 'center',
        }}>
          Mastery · Coaching for All ·
          <a
            href="/"
            onClick={function (e) { e.preventDefault(); goHome(); }}
            style={{ marginLeft: 6, color: 'oklch(35% 0.16 265)', textDecoration: 'none' }}
          >Back to the site</a>
        </footer>
      </div>
    );
  };

  window.DrumsLab.ui.DrumsBetaPage = DrumsBetaPage;
  // Also expose as a bare global so app.jsx can do <window.DrumsBetaPage/>
  // without reaching through the namespace.
  window.DrumsBetaPage = DrumsBetaPage;
})();