// Fair Play — anti-cheat dashboard
const FairPlay = ({ tweaks }) => {
  const [tab, setTab] = useState("BANS");
  const [reportTarget, setReportTarget] = useState("");
  const [reportCat, setReportCat] = useState("Cheating / Aim assist");
  const [reportDesc, setReportDesc] = useState("");
  const [reportSent, setReportSent] = useState(false);
  const s = window.WZN.FAIR_PLAY_STATS;

  const handleSendReport = () => {
    if (!reportDesc.trim()) return;
    setReportSent(true);
    setTimeout(() => { setReportTarget(""); setReportDesc(""); setReportSent(false); }, 3000);
  };

  return (
    <div className="fairplay">
      <SectionHeader
        code="11"
        title="FAIR PLAY · SENTER"
        subtitle="Transparens · åpne saker · bans"
        accent={tweaks.accent}
      />

      {/* Stats strip */}
      <div className="fp-stats">
        <div className="fp-stat">
          <div className="fp-stat-k">AKTIVE BANS</div>
          <div className="fp-stat-v" style={{color: tweaks.accent}}>{s.activeBans}</div>
          <div className="fp-stat-h">Per dags dato</div>
        </div>
        <div className="fp-stat">
          <div className="fp-stat-k">ÅPNE SAKER</div>
          <div className="fp-stat-v">{s.openCases}</div>
          <div className="fp-stat-h">Under utredning</div>
        </div>
        <div className="fp-stat">
          <div className="fp-stat-k">RAPPORTER · MAI</div>
          <div className="fp-stat-v">{s.reportsThisMonth}</div>
          <div className="fp-stat-h">Mottatt denne måneden</div>
        </div>
        <div className="fp-stat">
          <div className="fp-stat-k">VOD REVIEWS</div>
          <div className="fp-stat-v">{s.vodReviews}</div>
          <div className="fp-stat-h">Pågående</div>
        </div>
        <div className="fp-stat">
          <div className="fp-stat-k">ACCEPT RATE</div>
          <div className="fp-stat-v">{Math.round(s.acceptanceRate * 100)}%</div>
          <div className="fp-stat-h">Saker bekreftet</div>
        </div>
      </div>

      <div className="panel">
        <div className="tabs">
          {[["BANS","BAN-LISTE","01"],["CASES","ÅPNE SAKER","02"],["REPORT","RAPPORTER SPILLER","03"],["RULES","REGLER & PROSESS","04"]].map(([id,label,code]) => (
            <button key={id} className={`tab ${tab === id ? "active" : ""}`} onClick={() => setTab(id)}>
              <span className="tab-code">{code}</span>{label}
            </button>
          ))}
        </div>

        {tab === "BANS" && (
          <table className="leaderboard fp-table">
            <thead>
              <tr>
                <th>SPILLER</th>
                <th>LAG</th>
                <th>ÅRSAK</th>
                <th>BEVIS</th>
                <th>UTSTEDT</th>
                <th>LENGDE</th>
                <th>STATUS</th>
              </tr>
            </thead>
            <tbody>
              {window.WZN.BANS.map(b => (
                <tr key={b.id}>
                  <td>
                    <div className="fp-player">
                      <span className="fp-player-name">{b.player}</span>
                      <span className="fp-player-by">utstedt av {b.by}</span>
                    </div>
                  </td>
                  <td><span className="fp-team-dim">{b.team}</span></td>
                  <td>{b.reason}</td>
                  <td><span className="fp-evidence">{b.evidence}</span></td>
                  <td className="num">{b.date}</td>
                  <td>{b.length}</td>
                  <td>
                    <span className={`fp-status ${b.status === "AKTIV" ? "bad" : "expired"}`}
                      style={b.status === "AKTIV" ? {color: tweaks.accent, borderColor: tweaks.accent} : null}>
                      {b.status}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}

        {tab === "CASES" && (
          <div className="case-list">
            {window.WZN.OPEN_CASES.map(c => (
              <div key={c.id} className={`case-card prio-${c.priority.toLowerCase()}`}>
                <div className="case-head">
                  <div>
                    <div className="case-subject">{c.subject}</div>
                    <div className="case-reason">{c.reason}</div>
                  </div>
                  <div className={`prio-badge prio-${c.priority.toLowerCase()}`}>{c.priority}</div>
                </div>
                <div className="case-body">
                  <div className="case-row"><span>SAK-ID</span><b>WZN-CASE-{c.id.toUpperCase()}</b></div>
                  <div className="case-row"><span>RAPPORTERT AV</span><b>{c.reporter}</b></div>
                  <div className="case-row"><span>BEVIS</span><b>{c.evidence}</b></div>
                  <div className="case-row"><span>ÅPNET</span><b>{c.opened}</b></div>
                  <div className="case-row"><span>TILDELT</span><b>{c.assignedTo}</b></div>
                </div>
                <div className="case-progress">
                  <div className="cp-label">FRAMDRIFT · {c.progress}%</div>
                  <div className="cp-bar">
                    <div className="cp-fill" style={{width: `${c.progress}%`, background: tweaks.accent}} />
                  </div>
                  <div className="cp-stages">
                    <span className={c.progress >= 25 ? "done" : ""}>RAPPORT</span>
                    <span className={c.progress >= 50 ? "done" : ""}>BEVIS-SAMLING</span>
                    <span className={c.progress >= 75 ? "done" : ""}>VOD REVIEW</span>
                    <span className={c.progress >= 100 ? "done" : ""}>VEDTAK</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}

        {tab === "REPORT" && (
          <div className="report-flow">
            <div className="rf-intro">
              Anonyme rapporter aksepteres, men rapporter med Activision-ID + bevis (klipp/SS) prioriteres.
              Alle saker logges og besvares innen 72 timer.
            </div>
            <div className="rf-form">
              {reportSent ? (
                <div className="submit-success">
                  <div className="ss-icon" style={{color: tweaks.accent}}>✓</div>
                  <div className="ss-title">RAPPORT MOTTATT</div>
                  <div className="ss-sub">Vi behandler saken innen 72 timer.</div>
                </div>
              ) : (
                <>
                  <div className="field">
                    <span className="field-label">SPILLER (ACTIVISION-ID)</span>
                    <input type="text" placeholder="f.eks. GHST_iver31" value={reportTarget} onChange={e => setReportTarget(e.target.value)} />
                  </div>
                  <div className="field">
                    <span className="field-label">KATEGORI</span>
                    <select value={reportCat} onChange={e => setReportCat(e.target.value)}>
                      <option>Cheating / Aim assist</option>
                      <option>Wallhack / ESP</option>
                      <option>Stream-sniping</option>
                      <option>Account sharing / Smurfing</option>
                      <option>Toxicity / Harassment</option>
                      <option>Match-fixing</option>
                    </select>
                  </div>
                  <div className="field">
                    <span className="field-label">BESKRIVELSE</span>
                    <textarea rows="4" placeholder="Beskriv hva som skjedde. Inkluder dato, matchday, game nr." value={reportDesc} onChange={e => setReportDesc(e.target.value)} />
                  </div>
                  <div className="rf-evidence">
                    <span className="field-label">BEVIS</span>
                    <div className="dropzone small">
                      <div className="dz-icon" style={{borderColor: tweaks.accent, color: tweaks.accent}}>↑</div>
                      <div className="dz-title">DRA INN KLIPP / SCREENSHOT</div>
                      <div className="dz-sub">.mp4 .mov .png .jpg · Maks 50 MB</div>
                    </div>
                  </div>
                  <button className="cta cta-primary" style={{background: tweaks.accent, borderColor: tweaks.accent}} onClick={handleSendReport} disabled={!reportDesc.trim()}>
                    <span>SEND RAPPORT</span> <span>▶</span>
                  </button>
                </>
              )}
            </div>
          </div>
        )}

        {tab === "RULES" && (
          <div className="rules-grid">
            <div className="rule-card">
              <div className="rule-num" style={{color: tweaks.accent}}>01</div>
              <div className="rule-title">NULL TOLERANSE FOR CHEATS</div>
              <p>Wallhack, aimbot, radar-overlays, eksterne macros eller hardware-modifikasjoner gir umiddelbar permanent ban. Activision-ID svartelistes også på tvers av andre nordiske ligaer.</p>
            </div>
            <div className="rule-card">
              <div className="rule-num" style={{color: tweaks.accent}}>02</div>
              <div className="rule-title">VOD REVIEW PROSESS</div>
              <p>Når en sak åpnes, samler vi minst 3 game-VOD-er + screenshots. To uavhengige admins må være enige før ban utstedes. Spilleren får mulighet til å forsvare seg.</p>
            </div>
            <div className="rule-card">
              <div className="rule-num" style={{color: tweaks.accent}}>03</div>
              <div className="rule-title">STATISTIKK-ANOMALY-DETECTION</div>
              <p>Hver matchday kjører vi anomaly-analyse på K/D, headshot %, reaksjonstid og rotasjon. Avvik over 3σ flagges automatisk for manuell review.</p>
            </div>
            <div className="rule-card">
              <div className="rule-num" style={{color: tweaks.accent}}>04</div>
              <div className="rule-title">TRANSPARENS</div>
              <p>Alle bans publiseres her med årsak, lengde og bevisbeskrivelse (uten å eksponere bevisene selv). Statistikk om accept rate og response time publiseres månedlig.</p>
            </div>
            <div className="rule-card">
              <div className="rule-num" style={{color: tweaks.accent}}>05</div>
              <div className="rule-title">FALSK RAPPORTERING</div>
              <p>Bevisst falske rapporter eller massereports for å skade andre lag = utestengelse i 30 dager. Vi behandler hver sak alvorlig — også de mot rapportøren.</p>
            </div>
            <div className="rule-card">
              <div className="rule-num" style={{color: tweaks.accent}}>06</div>
              <div className="rule-title">ANKE</div>
              <p>Du kan anke en ban i 14 dager. Ankene behandles av et panel på 3 — minst én ekstern part. Beslutningen er endelig.</p>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

Object.assign(window, { FairPlay });