// ============================================================
// Showdown — shared components (frames, shapes, helpers)
// Reuses CharGlyph / Icon from wc-rewards.jsx + wc-shared.jsx
// ============================================================

// Subject theme wrapper — sets the theme class on a div that scopes the CSS vars.
function SdScope({ theme = 'mixed', children, ...rest }) {
  return <div className={`wc-scope sd-scope sd-${theme}`} {...rest}>{children}</div>;
}

// Phone frame (390x844 friendly)
function PhoneFrame({ time = '9:41', children }) {
  return (
    <div className="sd-phone">
      <div className="sd-notch"></div>
      <div className="sd-phone-screen">
        <div className="sd-status">
          <span>{time}</span>
          <div className="sd-status-icons">
            <svg viewBox="0 0 16 16" fill="currentColor"><path d="M1 11h2v3H1zM5 8h2v6H5zM9 5h2v9H9zM13 2h2v12h-2z"/></svg>
            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M2 5.5C4 3.5 6 3 8 3s4 .5 6 2.5"/><path d="M4 8c1.2-1 2.5-1.4 4-1.4S10.8 7 12 8"/><path d="M6 10.5c.7-.5 1.3-.8 2-.8s1.3.3 2 .8"/><circle cx="8" cy="13" r="0.8" fill="currentColor"/></svg>
            <svg viewBox="0 0 22 12" fill="none" stroke="currentColor" strokeWidth="1.2"><rect x="0.5" y="0.5" width="18" height="11" rx="2"/><rect x="2" y="2" width="14" height="8" rx="1" fill="currentColor"/><rect x="19.5" y="4" width="1.5" height="4" rx="0.5" fill="currentColor"/></svg>
          </div>
        </div>
        {children}
      </div>
    </div>
  );
}

// Projector frame (1280x800 friendly) — dark bezel like a TV
function ProjectorFrame({ tag = 'PROJECTOR · 1080p', children }) {
  return (
    <div className="sd-projector">
      <div className="sd-projector-screen">
        <div className="sd-projector-tag">{tag}</div>
        {children}
      </div>
    </div>
  );
}

// Laptop frame — gentle browser chrome
function LaptopFrame({ url = 'hscscience.com.au/games/showdown/new', children }) {
  return (
    <div className="sd-laptop">
      <div className="sd-laptop-bar">
        <div className="sd-laptop-dots">
          <span className="sd-laptop-dot r"></span>
          <span className="sd-laptop-dot y"></span>
          <span className="sd-laptop-dot g"></span>
        </div>
        <div className="sd-laptop-url">{url}</div>
        <div style={{ width: 50 }}></div>
      </div>
      {children}
    </div>
  );
}

// Answer shape — 4 distinct geometric marks tied to A/B/C/D
function AnswerShape({ letter }) {
  const shapes = {
    A: <svg viewBox="0 0 24 24"><polygon points="12,3 22,21 2,21"/></svg>,
    B: <svg viewBox="0 0 24 24"><polygon points="12,2 22,8 22,16 12,22 2,16 2,8"/></svg>,
    C: <svg viewBox="0 0 24 24"><polygon points="12,2 22,12 12,22 2,12"/></svg>,
    D: <svg viewBox="0 0 24 24"><polygon points="12,2 14.9,9 22,9.3 16.5,14 18.4,21 12,17 5.6,21 7.5,14 2,9.3 9.1,9"/></svg>,
  };
  return shapes[letter] || shapes.A;
}

// Subject-tagged character row used in roster / leaderboard
function StudentMark({ char = 'helix', size = 36, mini = false }) {
  return (
    <div className={mini ? 'sd-char-tiny' : 'sd-char-mini'}>
      <CharGlyph kind={char} size={mini ? 24 : 36}/>
    </div>
  );
}

// In-app top bar — appears inside the laptop chrome on the host view
function AppBar({ crumbs = ['Multiplayer', 'New Showdown'], code }) {
  return (
    <div className="sd-app-bar">
      <div className="sd-app-brand">
        <div className="sd-app-brand-mark">H</div>
        HSCScience
      </div>
      <div className="sd-app-crumbs">
        / {crumbs.map((c, i) => (
          <React.Fragment key={i}>
            {i > 0 && <span>›</span>}
            {i === crumbs.length - 1 ? <strong>{c}</strong> : <span>{c}</span>}
          </React.Fragment>
        ))}
      </div>
      <div className="sd-app-bar-spacer"></div>
      {code && <div className="sd-game-code-mini">CODE · {code}</div>}
    </div>
  );
}

// Generic timer ring — bigger version of the wc one
function TimerRing({ seconds = 12, total = 20, color = 'var(--sd-subj-1)', size = 56 }) {
  const r = (size - 8) / 2;
  const c = 2 * Math.PI * r;
  const pct = seconds / total;
  return (
    <div className="sd-q-timer-ring" style={{ width: size, height: size }}>
      <svg viewBox={`0 0 ${size} ${size}`}>
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="var(--adv-rule-soft)" strokeWidth="4"/>
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={color} strokeWidth="4"
          strokeLinecap="round" strokeDasharray={`${c*pct} ${c}`}/>
      </svg>
      <div className="v">{seconds}</div>
    </div>
  );
}

// Generic post-it for canvas notes
function StickyNote({ children, x, y, rotate = -1.5 }) {
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      background: '#fef4a8', color: '#5a4a2a',
      padding: '14px 16px', maxWidth: 240,
      fontSize: 12, lineHeight: 1.5,
      transform: `rotate(${rotate}deg)`,
      boxShadow: '0 4px 14px rgba(0,0,0,0.10)',
      borderRadius: 6, fontFamily: 'system-ui, sans-serif',
      pointerEvents: 'auto', zIndex: 5,
    }}>
      {children}
    </div>
  );
}

// Deterministic-ish QR (pure decoration — not scannable)
function FakeQR({ seed = 'showdown' }) {
  // Pseudo-random pattern from seed string
  let h = 0;
  for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) >>> 0;
  const cells = [];
  for (let i = 0; i < 15*15; i++) {
    h = (h * 1664525 + 1013904223) >>> 0;
    const on = (h % 100) < 52;
    cells.push(on);
  }
  // Force finder patterns in corners
  const force = (cx, cy) => {
    for (let y = 0; y < 7; y++) for (let x = 0; x < 7; x++) {
      const i = (cy+y)*15 + (cx+x);
      const edge = (x===0||x===6||y===0||y===6);
      const center = (x>=2&&x<=4&&y>=2&&y<=4);
      cells[i] = edge || center;
    }
  };
  force(0,0); force(8,0); force(0,8);
  // clear center for logo
  for (let y = 5; y < 10; y++) for (let x = 5; x < 10; x++) cells[y*15+x] = false;
  return (
    <div className="sd-qr">
      <div className="sd-qr-grid">
        {cells.map((on, i) => <div key={i} className={`sd-qr-cell ${on ? 'on' : ''}`}></div>)}
      </div>
      <div className="sd-qr-logo">H</div>
    </div>
  );
}

Object.assign(window, {
  SdScope, PhoneFrame, ProjectorFrame, LaptopFrame,
  AnswerShape, StudentMark, AppBar, TimerRing, StickyNote, FakeQR,
});