// Pick'em — predictions for upcoming matchday
const PickEm = ({ tweaks }) => {
  const [picks, setPicks] = useState({});
  const questions = window.WZN.PICKEM_QUESTIONS;
  const lb = window.WZN.PICKEM_LEADERBOARD;

  const [locked, setLocked] = useState(false);
  const setPick = (qId, optId) => { if (!locked) setPicks(p => ({...p, [qId]: optId})); };
  const totalPossible = questions.reduce((s,q) => s + q.points, 0);
  const lockedAt = "13.05 · 19:55";
  const handleLock = () => { if (Object.keys(picks).length > 0) setLocked(true); };

  return (
    <div className="pickem">
      <SectionHeader
        code="10"
        title="PICK'EM · MATCHDAY 10"
        subtitle={`Frist: ${lockedAt} CET · Maks ${totalPossible} poeng`}
        accent={tweaks.accent}
        right={
          <div className="pe-pot">
            <span>POTENSIELL UTBETALING</span>
            <b style={{color: tweaks.accent}}>{totalPossible} PTS</b>
          </div>
        }
      />

      <div className="pickem-grid">
        {/* Questions */}
        <div className="pe-questions">
          {questions.map(q => {
            const totalPicks = q.options.reduce((s,o) => s + o.picks, 0);
            const userPick = picks[q.id];
            return (
              <div key={q.id} className="panel pe-question">
                <div className="peq-head">
                  <div className="peq-head-l">
                    <div className="peq-title">{q.title}</div>
                    <div className="peq-sub">{q.subtitle}</div>
                  </div>
                  <div className="peq-points" style={{color: tweaks.accent, borderColor: tweaks.accent}}>+{q.points} PTS</div>
                </div>
                <div className="peq-opts">
                  {q.options.map(o => {
                    const pct = Math.round((o.picks / totalPicks) * 100);
                    const selected = userPick === o.id;
                    return (
                      <button
                        key={o.id}
                        className={`peq-opt ${selected ? "selected" : ""}`}
                        style={selected ? {borderColor: tweaks.accent} : null}
                        onClick={() => setPick(q.id, o.id)}
                      >
                        <div className="peq-opt-bar" style={{width: `${pct}%`, background: selected ? tweaks.accent : null, opacity: selected ? 0.18 : 0.08}} />
                        <div className="peq-opt-l">
                          <span className={`peq-radio ${selected ? "on" : ""}`} style={selected ? {background: tweaks.accent, borderColor: tweaks.accent} : null} />
                          <span className="peq-opt-label">{o.label}</span>
                        </div>
                        <div className="peq-opt-r">
                          <span className="peq-opt-pct">{pct}%</span>
                          <span className="peq-opt-odds" style={selected ? {color: tweaks.accent} : null}>{o.odds}x</span>
                        </div>
                      </button>
                    );
                  })}
                </div>
                <div className="peq-foot">
                  <span>{totalPicks.toLocaleString()} har stemt</span>
                  {userPick && <span className="peq-locked">✓ Stem lagret · kan endres til {lockedAt}</span>}
                </div>
              </div>
            );
          })}

          {locked ? (
            <div className="submit-success">
              <div className="ss-icon" style={{color: tweaks.accent}}>✓</div>
              <div className="ss-title">PICKS LÅST INN</div>
              <div className="ss-sub">Du kan ikke endre stemmene dine etter lås.</div>
            </div>
          ) : (
            <button className="cta cta-primary big" style={{background: tweaks.accent, borderColor: tweaks.accent}} onClick={handleLock} disabled={Object.keys(picks).length === 0}>
              <span>LÅS INN {Object.keys(picks).length}/{questions.length} STEMMER</span> <span>▶</span>
            </button>
          )}
        </div>

        {/* Leaderboard sidebar */}
        <div className="pe-side">
          <div className="panel compact">
            <div className="ls-head">
              <div className="ls-head-l">
                <div className="section-code" style={{borderColor: tweaks.accent}}>SE01</div>
                <div>
                  <div className="ls-title">SESONG-LEDERTAVLE</div>
                  <div className="ls-sub">Topp 8 · oppdatert daglig</div>
                </div>
              </div>
            </div>
            <table className="pe-lb">
              <tbody>
                {lb.map(u => (
                  <tr key={u.pos} className={u.you ? "you" : ""}>
                    <td className="pe-lb-pos" style={{color: u.pos <= 3 ? tweaks.accent : null}}>{String(u.pos).padStart(2,"0")}</td>
                    <td>
                      <div className="pe-lb-name">{u.user}{u.you && <span className="you-tag" style={{background: tweaks.accent}}>DU</span>}</div>
                      <div className="pe-lb-acc">{u.correct}/{u.total} riktig</div>
                    </td>
                    <td className="pe-lb-streak">
                      {u.streak > 0 && <span style={{color: tweaks.accent}}>🔥{u.streak}</span>}
                    </td>
                    <td className="pe-lb-pts" style={{color: tweaks.accent}}>{u.points.toLocaleString()}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div className="panel compact pe-stats-card">
            <div className="pe-stats-eyebrow">DIN SESONG</div>
            <div className="pe-stats-grid">
              <div><span>POENG</span><b style={{color: tweaks.accent}}>4 201</b></div>
              <div><span>RIKTIG %</span><b>66%</b></div>
              <div><span>STREAK</span><b style={{color: tweaks.accent}}>🔥 5</b></div>
              <div><span>RANK</span><b>#5</b></div>
            </div>
            <div className="pe-progress-l">NESTE BELØNNING · TOPP 3 SESONGEN</div>
            <div className="cp-bar">
              <div className="cp-fill" style={{width: "78%", background: tweaks.accent}} />
            </div>
            <div className="pe-progress-h">419 poeng igjen til rank #3 (ORACLE_lars)</div>
          </div>

          <div className="panel compact pe-rules">
            <div className="pe-stats-eyebrow">REGLER</div>
            <ul className="pe-rules-list">
              <li><span className="bullet" style={{color: tweaks.accent}}>›</span> Stem før matchday starter — låses 5 min før kick-off</li>
              <li><span className="bullet" style={{color: tweaks.accent}}>›</span> Streak gir +10% bonus for hver riktig på rad</li>
              <li><span className="bullet" style={{color: tweaks.accent}}>›</span> Topp 3 ved sesongslutt får WZN-merch</li>
              <li><span className="bullet" style={{color: tweaks.accent}}>›</span> Helt gratis — ingen innsats, kun ære</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { PickEm });