// Redeem section + Stickers + Modals

function RedeemSection({ onRedeem, message }) {
  const [code, setCode] = React.useState('');
  const handleSubmit = (e) => {
    e.preventDefault();
    if (code.trim()) {
      onRedeem(code.trim());
      setCode('');
    }
  };
  return (
    <section className="section" id="kode">
      <div className="redeem">
        <div className="redeem-deco d1">✨</div>
        <div className="redeem-deco d2">⭐</div>
        <div className="redeem-deco d3">💫</div>
        <div>
          <div className="redeem-eyebrow">
            <span>🎁</span> Hemmelig kode
          </div>
          <h2>Løs inn <span className="pink">koden din</span> og se overraskelsen!</h2>
          <p>
            Har du fått en kode etter å ha spilt et mattespill? Skriv den inn under
            for å se hva som venter — kanskje en morsom video, et bilde eller en GIF?
          </p>
          <form onSubmit={handleSubmit}>
            <div className="code-input-wrap">
              <input
                type="text"
                className="code-input"
                placeholder="🌈 🦄 ⭐ 🚀  eller  BURSDAG2026"
                value={code}
                onChange={e => setCode(e.target.value)}
              />
              <button type="submit" className="redeem-btn">
                Løs inn <span>→</span>
              </button>
            </div>
          </form>
          {message ? (
            <div className={`redeem-msg ${message.type}`}>{message.text}</div>
          ) : (
            <div className="redeem-hint">
              💡 Tips: Kopier hele emoji-koden fra premie-skjermen
            </div>
          )}
        </div>
        <div className="code-preview">
          <div className="code-preview-tag">
            <span>🎉</span> Eksempel
          </div>
          <div className="code-preview-emojis">🌈 🦄 ⭐ 🚀</div>
          <div className="code-preview-label">Slik ser en kode ut</div>
        </div>
      </div>
    </section>
  );
}

function StickerCollection({ stickers, total = 24 }) {
  const slots = Array.from({ length: total }, (_, i) => stickers[i] || null);
  return (
    <section className="section" id="klistremerker">
      <div className="stickers-section">
        <div className="section-head">
          <div className="section-head-left">
            <div className="section-icon" style={{ background: 'linear-gradient(135deg,#DCC8FF,#9B72E8)' }}>
              <span style={{ fontSize: 32 }}>🦄</span>
            </div>
            <div>
              <h2>Min samling</h2>
              <div className="section-sub">Klistremerker du har samlet vises her</div>
            </div>
          </div>
          <div className="sticker-count-pill">
            <span>⭐</span> {stickers.length} av {total} samlet
          </div>
        </div>
        <div className="stickers-grid">
          {slots.map((s, i) => (
            <div key={i} className={`sticker ${s ? 'unlocked' : 'locked'}`}>
              {s || '?'}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function GameModal({ game, kind, onClose }) {
  if (!game) return null;
  const bg = game.bg;
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-hero" style={{ background: bg }}>
          <button className="modal-close" onClick={onClose}>✕</button>
          {kind === 'math' ? (
            <span className={`modal-hero-symbol ${game.symbolDark ? '' : ''}`} style={{ color: game.symbolDark ? '#6B4A00' : '#fff', fontSize: game.isEmoji ? 100 : 120 }}>
              {game.symbol}
            </span>
          ) : (
            <div style={{ width: '70%' }}>
              <RandomArt type={game.artType} />
            </div>
          )}
        </div>
        <div className="modal-body">
          <h3>{game.title}</h3>
          <p>{game.desc} Trykk «Start spillet» for å åpne det i et nytt vindu.</p>
          <div className="modal-meta">
            {kind === 'math' && <span className={`chip ${game.diffClass}`}>{game.difficulty}</span>}
            {game.reward && <span className="chip reward">🎁 Gir kode etter fullført</span>}
            <span className="chip">⏱ Ca. 5 min</span>
          </div>
          <div className="modal-actions">
            <button className="btn-primary">▶ Start spillet</button>
            <button className="btn-secondary" onClick={onClose}>Avbryt</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function RewardModal({ reward, onClose, onSave }) {
  if (!reward) return null;
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="reveal-art">
          <button className="modal-close" onClick={onClose}>✕</button>
          <div className="reveal-art-emojis">{reward.code}</div>
          <div className="reveal-art-title">Du fant en overraskelse!</div>
          <div className="reveal-art-sub">{reward.mediaUrl ? 'Her er den!' : 'Trykk play for å se den'}</div>
        </div>
        <div style={{ padding: '0 0 8px' }}>
          <RewardMedia type={reward.mediaType} label={reward.mediaLabel} url={reward.mediaUrl} />
        </div>
        <div className="modal-body" style={{ paddingTop: 8 }}>
          <p>
            Klistremerket <strong style={{ fontSize: 22 }}>{reward.sticker}</strong> er
            lagt til i samlingen din! Du kan se alle klistremerkene under «Klistremerke­samling».
          </p>
          <div className="modal-actions">
            <button className="btn-primary" onClick={onClose}>Supert! 🎉</button>
          </div>
        </div>
      </div>
    </div>
  );
}

// Renders the actual reward asset when a url is provided. Falls back to the
// existing label-only placeholder so codes without curated media still
// celebrate the win and keep the visual language consistent.
function RewardMedia({ type, label, url }) {
  if (!url) {
    return (
      <div className="reveal-media">
        <span className="reveal-media-label">{type} • {label}</span>
      </div>
    );
  }
  if (type === 'YouTube') {
    // Accept either a full YouTube URL or a bare video id.
    const id = (url.match(/(?:youtu\.be\/|v=|embed\/)([\w-]{6,})/) || [null, url])[1];
    return (
      <div className="reveal-media-frame">
        <iframe
          src={`https://www.youtube-nocookie.com/embed/${id}`}
          title={label}
          allow="autoplay; encrypted-media; picture-in-picture"
          allowFullScreen
        />
      </div>
    );
  }
  if (type === 'Video') {
    return (
      <div className="reveal-media-frame">
        <video src={url} controls autoPlay loop />
      </div>
    );
  }
  // Bilde / GIF / fallthrough: render an <img>.
  return (
    <div className="reveal-media-frame">
      <img src={url} alt={label} />
    </div>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="footer-mark">Math4Kids ☁️</div>
      <div>Laget med skyer, sol og mye matte • © 2026</div>
    </footer>
  );
}

Object.assign(window, { RedeemSection, StickerCollection, GameModal, RewardModal, RewardMedia, Footer });