// Predictions — forutsigelser / pick'em for turneringer
const Predictions = ({ tweaks, onNav }) => {
  const accent = tweaks.accent;

  const matches = [
    { id: 1, teamA: "VKNG",  teamB: "NORDLYS", map: "Urzikstan", date: "Lørdag 18. mai", status: "open" },
    { id: 2, teamA: "ARC",   teamB: "STORM",   map: "Al Mazrah",  date: "Lørdag 18. mai", status: "open" },
    { id: 3, teamA: "BREV",  teamB: "GHOST",   map: "Rebirth",    date: "Søndag 19. mai", status: "locked" },
    { id: 4, teamA: "TITAN", teamB: "ZR8",     map: "Urzikstan",  date: "Søndag 19. mai", status: "locked" },
  ];

  const [picks, setPicks] = React.useState({});

  const pick = (matchId, team) => {
    if (matches.find(m => m.id === matchId)?.status === "locked") return;
    setPicks(p => ({ ...p, [matchId]: team }));
  };

  return (
    <div className="predictions-screen">
      <SectionHeader
        code="PRE"
        title="PREDICTIONS"
        subtitle="Tip matchresultatene og samle poeng"
        accent={accent}
      />

      <div className="pred-info panel">
        <span style={{ color: accent }}>★</span>
        Velg vinner for hver kamp før låsing. Riktig tipp gir <b>10 poeng</b>. Perfekt uke gir bonus.
        Rankingliste oppdateres etter hver matchday.
      </div>

      <div className="pred-grid">
        {matches.map(m => {
          const myPick = picks[m.id];
          const locked = m.status === "locked";
          return (
            <div key={m.id} className={`pred-card panel ${locked ? "pred-locked" : ""}`}>
              <div className="pred-card-meta">
                <span className="pred-map">{m.map}</span>
                <span className="pred-date">{m.date}</span>
                {locked && <span className="pred-lock-badge">LÅST</span>}
              </div>
              <div className="pred-teams">
                <button
                  className={`pred-team ${myPick === m.teamA ? "chosen" : ""}`}
                  style={myPick === m.teamA ? { borderColor: accent, color: accent } : {}}
                  onClick={() => pick(m.id, m.teamA)}
                  disabled={locked}
                >
                  <span className="pred-team-tag">{m.teamA}</span>
                  {myPick === m.teamA && <span className="pred-check" style={{ color: accent }}>✓</span>}
                </button>

                <div className="pred-vs">VS</div>

                <button
                  className={`pred-team ${myPick === m.teamB ? "chosen" : ""}`}
                  style={myPick === m.teamB ? { borderColor: accent, color: accent } : {}}
                  onClick={() => pick(m.id, m.teamB)}
                  disabled={locked}
                >
                  <span className="pred-team-tag">{m.teamB}</span>
                  {myPick === m.teamB && <span className="pred-check" style={{ color: accent }}>✓</span>}
                </button>
              </div>
            </div>
          );
        })}
      </div>

      <div className="pred-leaderboard panel">
        <div className="pred-lb-head">TOPPRANKING DENNE UKEN</div>
        {[
          { rank: 1, name: "VKNG_jonas21",  pts: 30 },
          { rank: 2, name: "arc_mikkeli",   pts: 20 },
          { rank: 3, name: "ghost_thunder",  pts: 20 },
          { rank: 4, name: "titan_recon",    pts: 10 },
          { rank: 5, name: "zr8_alpha",      pts: 10 },
        ].map(r => (
          <div key={r.rank} className="pred-lb-row">
            <span className="pred-lb-rank" style={r.rank === 1 ? { color: accent } : {}}>#{r.rank}</span>
            <span className="pred-lb-name">{r.name}</span>
            <span className="pred-lb-pts" style={r.rank === 1 ? { color: accent } : {}}>{r.pts} pts</span>
          </div>
        ))}
      </div>
    </div>
  );
};

window.Predictions = Predictions;