/* =========================================================================
   CISCO ARENA — Celebration overlay, Tweaks panel, Toasts
   ========================================================================= */

const { useState: _uS, useEffect: _uE, useMemo: _uM } = React;

function Celebration({ theme, streak, onDone }) {
  // Respect reduced motion preference
  const prefersReducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches;

  _uE(() => {
    const t = setTimeout(onDone, 2000);
    return () => clearTimeout(t);
  }, []);

  const confetti = _uM(() => {
    return Array.from({length: 60}).map((_, i) => {
      const left = Math.random() * 100;
      const dur = 1.4 + Math.random() * 1.1;
      const delay = Math.random() * .4;
      const colorPool = [
        "var(--accent)", "var(--accent-2)", "var(--success)", "var(--warning)",
      ];
      const bg = colorPool[i % colorPool.length];
      const rot = Math.floor(Math.random() * 360);
      const w = 6 + Math.floor(Math.random()*6);
      const h = 10 + Math.floor(Math.random()*10);
      return { left, dur, delay, bg, rot, w, h, i };
    });
  }, [theme.id]);

  return (
    <div className="celeb" role="status" aria-live="polite">
      {!prefersReducedMotion && (
        <div className="confetti">
          {confetti.map(c => (
            <span key={c.i} style={{
              left: `${c.left}%`,
              width: c.w, height: c.h,
              background: c.bg,
              transform: `rotate(${c.rot}deg)`,
              animationDuration: `${c.dur}s`,
              animationDelay: `${c.delay}s`,
            }}/>
          ))}
        </div>
      )}
      <div className="celeb-inner">
        <h1 className="celeb-word display">{theme.celebration.word}</h1>
        <div className="celeb-sub">{theme.celebration.sub}</div>
        <div className="celeb-streak display">STREAK × {streak}</div>
      </div>
    </div>
  );
}

function TweaksPanel({ open, onOpen, onClose, state, set }) {
  if (!open) {
    return (
      <button className="tweak-toggle" onClick={onOpen}>
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
          <circle cx="12" cy="12" r="3"/>
          <path d="M19.4 15a1.7 1.7 0 0 0 .34 1.87l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.7 1.7 0 0 0-1.87-.34 1.7 1.7 0 0 0-1.03 1.56V21a2 2 0 1 1-4 0v-.09A1.7 1.7 0 0 0 9 19.4a1.7 1.7 0 0 0-1.87.34l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.7 1.7 0 0 0 .34-1.87 1.7 1.7 0 0 0-1.56-1.03H3a2 2 0 1 1 0-4h.09A1.7 1.7 0 0 0 4.6 9a1.7 1.7 0 0 0-.34-1.87l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.7 1.7 0 0 0 1.87.34H9a1.7 1.7 0 0 0 1.03-1.56V3a2 2 0 1 1 4 0v.09A1.7 1.7 0 0 0 15 4.6a1.7 1.7 0 0 0 1.87-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.7 1.7 0 0 0-.34 1.87V9c.1.39.39.72.78.89a1.7 1.7 0 0 0 .78.11H21a2 2 0 1 1 0 4h-.09a1.7 1.7 0 0 0-1.51 1z"/>
        </svg>
        TWEAKS
      </button>
    );
  }
  return (
    <div className="tweak-panel" role="dialog" aria-label="Tweaks">
      <div className="tweak-head">
        <div className="t">Tweaks</div>
        <button className="icon-btn" onClick={onClose} aria-label="Close">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M6 6l12 12M6 18L18 6"/></svg>
        </button>
      </div>

      <div className="tweak-body">
        <div className="tweak-section">
          <div className="tweak-label"><span>Theme pack</span><span className="mono">5</span></div>
          <div className="tweak-grid c2">
            {window.THEMES.map(t => (
              <button
                key={t.id}
                className={`tweak-opt ${state.theme === t.id ? "active":""}`}
                onClick={() => set("theme", t.id)}
              >
                <span className="sw" style={{background: `linear-gradient(135deg, ${t.teams[0].color}, ${t.teams[1].color})`}} />
                <span className="nm">{t.label}</span>
                <span className="tg">{t.tag}</span>
              </button>
            ))}
          </div>
        </div>

        <div className="tweak-section">
          <div className="tweak-label"><span>Mode</span></div>
          <div className="tweak-grid c2">
            {["dark","light"].map(m => (
              <button key={m} className={`tweak-opt ${state.mode===m?"active":""}`} onClick={() => set("mode", m)}>
                <span className="nm" style={{textTransform:"capitalize"}}>{m}</span>
                <span className="tg">Chrome mode</span>
              </button>
            ))}
          </div>
        </div>

        <div className="tweak-section">
          <div className="tweak-label"><span>Density</span></div>
          <div className="tweak-grid c3">
            {[["compact","Compact"],["normal","Default"],["roomy","Roomy"]].map(([v,n]) => (
              <button key={v} className={`tweak-opt ${state.density===v?"active":""}`} onClick={() => set("density", v)}>
                <span className="nm">{n}</span>
              </button>
            ))}
          </div>
        </div>

        <div className="tweak-section">
          <div className="tweak-label"><span>Leaderboard layout</span></div>
          <div className="tweak-grid c3">
            {[["rail","Rail"],["full","Full"],["ticker","Ticker"]].map(([v,n]) => (
              <button key={v} className={`tweak-opt ${state.layout===v?"active":""}`} onClick={() => set("layout", v)}>
                <span className="nm">{n}</span>
                <span className="tg">{v==="rail"?"340 px":v==="full"?"400 px":"Top strip"}</span>
              </button>
            ))}
          </div>
        </div>

        <div className="tweak-section">
          <div className="tweak-label"><span>Celebration style</span></div>
          <div className="tweak-grid c3">
            {[["fullbleed","Full-bleed"],["center","Center"],["toast","Corner"]].map(([v,n]) => (
              <button key={v} className={`tweak-opt ${state.celeb===v?"active":""}`} onClick={() => set("celeb", v)}>
                <span className="nm">{n}</span>
              </button>
            ))}
          </div>
        </div>

        <div className="tweak-section">
          <div className="tweak-label"><span>Demos</span></div>
          <div className="tweak-grid c2">
            <button className="tweak-opt" onClick={() => set("triggerCeleb", Date.now())}>
              <span className="nm">▶ Fire celebration</span>
              <span className="tg">2s overlay</span>
            </button>
            <button className="tweak-opt" onClick={() => set("triggerToast", Date.now())}>
              <span className="nm">▶ Fire toast</span>
              <span className="tg">Score change</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

function Toasts({ toasts }) {
  return (
    <div className="toasts">
      {toasts.map(t => (
        <div key={t.id} className={`toast ${t.kind||""}`}>
          <div className="t">{t.head}</div>
          <div>{t.msg}</div>
        </div>
      ))}
    </div>
  );
}

window.Celebration = Celebration;
window.TweaksPanel = TweaksPanel;
window.Toasts = Toasts;