// Live Match Center — multistream grid, live scoreboard, event ticker
const LiveMatchCenter = ({ tweaks }) => {
  const [focusStream, setFocusStream] = useState(window.WZN.LIVE_STREAMS[0].id);
  const focused = window.WZN.LIVE_STREAMS.find(s => s.id === focusStream);
  const others = window.WZN.LIVE_STREAMS.filter(s => s.id !== focusStream);
  const state = window.WZN.LIVE_STATE;

  return (
    <div className="live-center">
      {/* Status banner */}
      <div className="live-banner" style={{borderColor: tweaks.accent}}>
        <div className="lb-left">
          <span className="lb-rec" style={{background: tweaks.accent}} />
          <span className="lb-rec-label" style={{color: tweaks.accent}}>LIVE NÅ</span>
          <span className="lb-sep">·</span>
          <span className="lb-md">MATCHDAY {state.matchday} / GAME {state.game} av {state.gamesTotal}</span>
          <span className="lb-sep">·</span>
          <span className="lb-map">{state.map}</span>
        </div>
        <div className="lb-right">
          <div className="lb-pill">
            <span>SIRKEL</span>
            <b style={{color: tweaks.accent}}>{state.circle}</b>
            <span>· lukker om {state.circleTimer}</span>
          </div>
          <div className="lb-pill">
            <span>ALIVE</span>
            <b>{state.teamsAlive}/{state.teamsTotal}</b>
            <span>· {state.playersAlive} spillere</span>
          </div>
        </div>
      </div>

      <div className="live-grid">
        {/* Main featured stream */}
        <div className="live-main">
          <div className="stream-tile main" style={{borderColor: tweaks.accent}}>
            <div className="stream-mock">
              <div className="stream-mock-scan" />
              <div className="stream-mock-bracket" />
              <div className="stream-mock-bottom">
                <div className="sm-team">
                  <div className="sm-tag" style={{borderColor: tweaks.accent, color: tweaks.accent}}>{focused.tag}</div>
                  <div>
                    <div className="sm-name">{focused.caster}</div>
                    <div className="sm-meta">{focused.team}</div>
                  </div>
                </div>
                <div className="sm-vitals">
                  <div className="sm-vital"><span>KILLS</span><b style={{color: tweaks.accent}}>{focused.kills}</b></div>
                  <div className="sm-vital"><span>STATUS</span><b>{focused.alive ? "ALIVE" : `OUT · #${focused.placement}`}</b></div>
                </div>
              </div>
              <div className="stream-mock-corners"><span/><span/><span/><span/></div>
              <div className="stream-mock-label">PRIMARY CAM · 1080p60</div>
            </div>
            <div className="stream-bar">
              <div className="sb-left">
                <span className="sb-live" style={{background: tweaks.accent, color:'#000'}}>● LIVE</span>
                <span className="sb-name">{focused.caster} · PRIMARY</span>
              </div>
              <div className="sb-right">
                <span className="sb-stat">👁 {focused.viewers.toLocaleString()}</span>
                <button className="sb-btn">POP-OUT ↗</button>
                <button className="sb-btn">CHAT ↗</button>
              </div>
            </div>
          </div>

          {/* Picker row */}
          <div className="stream-picker">
            {others.map(s => (
              <button key={s.id} className="picker-tile" onClick={() => setFocusStream(s.id)}>
                <div className="stream-mock small">
                  <div className="stream-mock-scan" />
                  <div className="stream-mock-corners"><span/><span/><span/><span/></div>
                  <div className="pt-overlay">
                    <span className="pt-tag" style={{borderColor: tweaks.accent, color: tweaks.accent}}>{s.tag}</span>
                    <span className="pt-name">{s.caster}</span>
                  </div>
                </div>
                <div className="pt-bar">
                  <span className="pt-live">● LIVE</span>
                  <span className="pt-views">{s.viewers.toLocaleString()}</span>
                  <span className={`pt-status ${s.alive ? 'ok' : 'down'}`}>{s.alive ? `${s.kills} K` : `#${s.placement}`}</span>
                </div>
              </button>
            ))}
          </div>
        </div>

        {/* Right column: live leaderboard + ticker */}
        <div className="live-side">
          <div className="panel compact">
            <div className="ls-head">
              <div className="ls-head-l">
                <div className="section-code" style={{borderColor: tweaks.accent}}>L01</div>
                <div>
                  <div className="ls-title">LIVE LEADERBOARD</div>
                  <div className="ls-sub">Game {state.game} · auto-oppdatert</div>
                </div>
              </div>
              <span className="ls-pulse" style={{background: tweaks.accent}} />
            </div>
            <table className="live-board">
              <tbody>
                {state.topTeams.map(t => (
                  <tr key={t.tag} className={t.pos <= 3 ? "top" : ""}>
                    <td className="lb-pos" style={{color: t.pos <= 3 ? tweaks.accent : null}}>{String(t.pos).padStart(2,"0")}</td>
                    <td className="lb-tag" style={{borderColor: tweaks.accent, color: tweaks.accent}}>{t.tag}</td>
                    <td className="lb-name">{t.name}</td>
                    <td className="lb-k num">{t.kills}</td>
                    <td className="lb-p num big" style={{color: tweaks.accent}}>{t.points}</td>
                  </tr>
                ))}
              </tbody>
            </table>
            <div className="lb-legend">
              <span>POS</span><span>TAG</span><span>LAG</span><span>K</span><span>PTS</span>
            </div>
          </div>

          <div className="panel compact">
            <div className="ls-head">
              <div className="ls-head-l">
                <div className="section-code" style={{borderColor: tweaks.accent}}>L02</div>
                <div>
                  <div className="ls-title">EVENT FEED</div>
                  <div className="ls-sub">Siste 60 sek</div>
                </div>
              </div>
              <span className="ticker-pulse">▮</span>
            </div>
            <ul className="ticker">
              {window.WZN.LIVE_TICKER.map((e, i) => (
                <li key={i} className={`tick tick-${e.type}`}>
                  <span className="tick-t">{e.t}</span>
                  <span className={`tick-pip ${e.type}`} style={e.type === "kill" ? {background: tweaks.accent} : null} />
                  <span className="tick-text">{e.text}</span>
                </li>
              ))}
            </ul>
          </div>

          <div className="panel compact discord-widget">
            <div className="dw-head">
              <span className="dw-dot" />
              <span className="dw-title">WZN-LEAGUE · #liga-chat</span>
              <span className="dw-online">412 online</span>
            </div>
            <div className="dw-msgs">
              <div className="dw-msg"><b>OPRTR_NIKO</b><span>JJ ser uslåelige akkurat nå</span></div>
              <div className="dw-msg"><b>WLF_kjell</b><span>Fjord vs Recon i circle 4 — wallah</span></div>
              <div className="dw-msg"><b>ANLY_freya</b><span>Storage Town har snittet 5 lag denne md'en</span></div>
              <div className="dw-msg"><b>VKNG_marius</b><span>kom igjen Stavanger 🔥</span></div>
            </div>
            <button className="dw-cta">ÅPNE DISCORD ↗</button>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { LiveMatchCenter });