// Admin · Turneringer — list + 5-step wizard for creating new tournaments

const STEP_DEFS = [
  { id: 1, label: "TYPE",     desc: "Killrace eller Bracket" },
  { id: 2, label: "FORMAT",   desc: "Rounds · scoring · seeding" },
  { id: 3, label: "PREMIER",  desc: "Entry fee + premiepott" },
  { id: 4, label: "PÅMELDING",desc: "Maks lag · datoer · regler" },
  { id: 5, label: "BEKREFT",  desc: "Preview + publiser" },
];

const PUBLISH_STATES = [
  { id: "draft",        label: "DRAFT",                  desc: "Kun admin ser" },
  { id: "published",    label: "PUBLISERT",              desc: "Synlig for alle, påmelding ikke åpen ennå" },
  { id: "open",         label: "PÅMELDING ÅPEN",         desc: "Lag kan registrere seg" },
  { id: "checkin",      label: "CHECK-IN",               desc: "Påmeldte må sjekke inn for å delta" },
  { id: "locked",       label: "PÅMELDING LUKKET",       desc: "Synlig, men ingen flere lag" },
  { id: "live",         label: "PÅGÅR (LIVE)",           desc: "Turneringen er i gang" },
  { id: "completed",    label: "FERDIG",                 desc: "Auto etter siste match" },
  { id: "cancelled",    label: "AVLYST",                 desc: "Refunder entry til alle" },
];

// Map-pools — gruppert for klar separasjon mellom Big og Small Map
const MAP_OPTIONS = ["Verdansk", "Avalon", "Rebirth Island", "Haven's Hollow", "Urzikstan", "Vondel"];
const MAP_GROUPS = [
  { label: "BIG MAP (BR)",       maps: ["Verdansk", "Avalon", "Urzikstan"] },
  { label: "SMALL MAP (Resurgence)", maps: ["Rebirth Island", "Haven's Hollow", "Vondel"] },
];

// Standard beskrivelse per turneringstype — vises i wizarden + på turnerings-siden
const FORMAT_DESCRIPTIONS = {
  "2v2": "Klassisk 2v2 Battle Royale Kill Race etter CMG-format. To spillere per lag spiller double-elimination bracket: BO3 i Winners, BO1/BO2 i Losers, BO5 i Grand Final. Laget med flest kills på tvers av maps vinner hver kamp.",
  "switcharoo": "2v2 Switcharoo er en spesialvariant: solo-spillere melder seg på individuelt og parres tilfeldig av admin via Spin the Wheel — live på stream. Selve turneringsformatet (CMG 2v2 BR Kill Race, double-elim) er identisk med vanlig 2v2. Respinn av lag (100 kr per spinn, dobles per spinn) sendes anonymt via Vipps til turneringshost.",
  "killrace": "Killrace er en parallell-lobby-turnering der alle lag spiller samtidig over flere maps. Akkumulerte kills på tvers av alle maps avgjør rangering. Tie-breaker: høyeste damage. Kan spilles i Solo, Duos, Trios eller Quads.",
  "custom": "Custom-turnering med fleksibelt oppsett. Admin definerer format, scoring og maps. Egnet for unike formater som community-events, sponsorturneringer eller spesielle utfordringer.",
};
const KR_LOBBY_MODES = [
  { id: "buyback",    label: "BR Buy Back",   desc: "Klassisk BR + kjøp tilbake teammate" },
  { id: "resurgence", label: "Resurgence",    desc: "Rebirth Island / Vondel-style respawn" },
];
const KR_TEAM_SIZES = [
  { id: "solo",  label: "SOLO",  size: 1 },
  { id: "duos",  label: "DUOS",  size: 2 },
  { id: "trios", label: "TRIOS", size: 3 },
  { id: "quads", label: "QUADS", size: 4 },
];
const KR_SCORING_MODES = [
  { id: "kill_mult", label: "Kills × Placement multiplier (Warzone-stil)",
    desc: "Kills multipliseres med plassering. F.eks. 1st = ×2.0 · top 5 = ×1.8 · top 10 = ×1.6", recommended: true },
  { id: "custom",    label: "Custom poeng-tabell",
    desc: "Admin definerer poeng per kill og per placement-tier manuelt" },
];
const TIEBREAKERS = ["Mest damage", "Mest kills i siste map", "Best placement", "Sudden death (ekstra map)"];

const DUOS_BO_PRESETS = [
  { id: "cmg",     label: "BO3 WB · BO1 LB · BO5 GF",   desc: "CMG-standard", wb: 3, lb: 1, gf: 5, recommended: true },
  { id: "rapid",   label: "BO1 WB · BO1 LB · BO3 GF",   desc: "Rapid format", wb: 1, lb: 1, gf: 3 },
  { id: "premium", label: "BO5 WB · BO3 LB · BO7 GF",   desc: "Premium / finale-event", wb: 5, lb: 3, gf: 7 },
  { id: "custom",  label: "Custom per stage",           desc: "Sett BO manuelt", wb: 3, lb: 1, gf: 5 },
];

const SPONSOR_PRESETS = [
  { id: "g-fuel",     name: "G-FUEL",     color: "#ff6b35" },
  { id: "logitech",   name: "LOGITECH",   color: "#00b8fc" },
  { id: "redbull",    name: "RED BULL",   color: "#ff0033" },
  { id: "razer",      name: "RAZER",      color: "#44d62c" },
];

// =========================================================
// ADMIN TOURNAMENT LIST
// =========================================================

const AdminTournamentList = ({ tweaks, onCreate, onEdit }) => {
  const [all, setAll] = useState([]);
  const [loading, setLoading] = useState(true);
  const [wheelTournament, setWheelTournament] = useState(null);

  const refresh = () => {
    setLoading(true);
    WZN_Store.getTournaments().then(data => { setAll(data); setLoading(false); });
  };
  useEffect(() => { refresh(); }, []);

  // Expose refresh + edit callback så Admin.jsx kan kalle den etter wizard-save
  AdminTournamentList._refresh = refresh;
  AdminTournamentList._onEdit = onEdit;

  return (
    <div className="admin-trn">
      {wheelTournament && (
        <SwitcharooWheel
          tournamentId={wheelTournament.id}
          accent={tweaks.accent}
          onClose={() => setWheelTournament(null)}
          onComplete={() => { setWheelTournament(null); refresh(); }}
        />
      )}
      <div className="admin-trn-toolbar">
        <div className="att-lead">
          <div className="att-lead-eye">TURNERING-ADMINISTRASJON</div>
          <div className="att-lead-title">{loading ? "Laster…" : `${all.length} turneringer i systemet`}</div>
          <div className="att-lead-sub">
            {all.filter(t=>t.status==="live").length} pågår · {all.filter(t=>t.status==="open" || t.status==="upcoming").length} kommende · {all.filter(t=>t.status==="completed").length} ferdig
          </div>
        </div>
        <button className="att-create" onClick={onCreate} style={{background: tweaks.accent, borderColor: tweaks.accent}}>
          <span className="att-create-plus">+</span>
          <span>NY TURNERING</span>
        </button>
      </div>

      <table className="admin-trn-table">
        <thead>
          <tr>
            <th style={{width: 80}}>STATUS</th>
            <th>NAVN</th>
            <th style={{width: 100}}>TYPE</th>
            <th>FORMAT</th>
            <th style={{width: 130}}>START</th>
            <th style={{width: 90}}>LAG</th>
            <th style={{width: 110}}>PREMIE</th>
            <th style={{width: 120}}>HANDLINGER</th>
          </tr>
        </thead>
        <tbody>
          {all.length === 0 && !loading && (
            <tr><td colSpan={8} style={{textAlign:"center", color:"var(--text-faint)", padding:"2rem"}}>
              Ingen turneringer ennå — opprett en med knappen over
            </td></tr>
          )}
          {all.map(t => (
            <tr key={t.id}>
              <td><StatusBadge status={t.status} accent={tweaks.accent}/></td>
              <td>
                <div className="att-name">{t.name}</div>
                <div className="att-sub">
                  {t.type === "switcharoo" ? `2v2 Switcharoo · solo-påmelding` :
                   t.type === "bracket" || t.type === "2v2" ? `Double-elim · ${t.team_size || "duos"}` :
                   `Killrace · ${t.team_size || "trios"}`}
                </div>
              </td>
              <td>
                <span className="att-type" style={{borderColor: tweaks.accent, color: tweaks.accent}}>
                  {t.type === "switcharoo" ? "SWITCHAROO" :
                   t.type === "bracket" || t.type === "2v2" ? "BRACKET" : "KILLRACE"}
                </span>
              </td>
              <td className="mono dim">{t.games ? `${t.games} games` : "—"} · {(t.maps || []).join(", ") || "—"}</td>
              <td className="mono dim">{t.start_date?.slice(0,16).replace("T"," ") || "—"}</td>
              <td className="num">{t.max_teams || "—"}</td>
              <td className="num" style={{color: tweaks.accent}}>{t.prize_pool ? `${t.prize_pool.toLocaleString()} NOK` : "—"}</td>
              <td>
                <div className="att-actions" style={{display:"flex", gap:6, alignItems:"center", flexWrap:"wrap"}}>
                  <select
                    className="att-status-sel"
                    value={t.status || "draft"}
                    onChange={e => WZN_Store.updateTournamentStatus(t.id, e.target.value).then(refresh)}
                    title="Endre status"
                    style={{
                      background: "var(--bg-2)", border: "1px solid var(--line)",
                      color: "var(--text)", fontFamily: "var(--font-mono)",
                      fontSize: 11, padding: "4px 6px", letterSpacing: "0.05em",
                      cursor: "pointer",
                    }}
                  >
                    {PUBLISH_STATES.map(s => (
                      <option key={s.id} value={s.id}>{s.label}</option>
                    ))}
                  </select>
                  {t.type === "switcharoo" && (
                    <button
                      className="att-act spin"
                      title="Spin the Wheel — par spillere tilfeldig"
                      onClick={() => setWheelTournament(t)}
                      style={{borderColor: tweaks.accent, color: tweaks.accent}}
                    >⟳ SPIN</button>
                  )}
                  <button
                    className="att-act"
                    title="Rediger turnering"
                    onClick={() => AdminTournamentList._onEdit && AdminTournamentList._onEdit(t)}
                  >✎ EDIT</button>
                  <button
                    className="att-act"
                    title="Avlys turneringen (status = cancelled)"
                    onClick={() => confirm(`Sett "${t.name}" som AVLYST?`) && WZN_Store.updateTournamentStatus(t.id, "cancelled").then(refresh)}
                    style={{borderColor: "var(--warn, #ffb700)", color: "var(--warn, #ffb700)"}}
                  >⊘</button>
                  <button
                    className="att-act danger"
                    title="Slett turneringen PERMANENT fra databasen"
                    onClick={async () => {
                      if (!confirm(`SLETT "${t.name}" permanent? Dette kan ikke angres.`)) return;
                      if (!confirm(`Er du HELT sikker? Alle lag, kamper og resultater for denne turneringen forsvinner.`)) return;
                      const res = await WZN_Store.deleteTournament(t.id);
                      if (res?.error) {
                        alert("Feil ved sletting: " + res.error.message);
                      } else {
                        refresh();
                      }
                    }}
                    style={{borderColor: "#dc3545", color: "#dc3545"}}
                  >🗑 SLETT</button>
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

const StatusBadge = ({ status, accent }) => {
  const map = {
    live:      { lab: "● LIVE",  color: accent, blink: true },
    upcoming:  { lab: "KOMMENDE", color: "var(--text-dim)" },
    published: { lab: "PUBLISERT", color: "var(--text)" },
    open:      { lab: "● PÅMELDING", color: accent },
    checkin:   { lab: "● CHECK-IN", color: accent, blink: true },
    locked:    { lab: "● LÅST",   color: "var(--warn)" },
    completed: { lab: "✓ FERDIG", color: "var(--ok)" },
    draft:     { lab: "DRAFT",    color: "var(--text-faint)" },
    cancelled: { lab: "✕ AVLYST", color: "var(--bad)" },
  };
  const s = map[status] || map.upcoming;
  return (
    <span className={`att-status ${s.blink ? "blink" : ""}`} style={{color: s.color, borderColor: s.color}}>
      {s.lab}
    </span>
  );
};

// =========================================================
// WIZARD MODAL
// =========================================================

const TournamentWizard = ({ tweaks, onClose, onSave, initialForm = null, editing = false }) => {
  const [step, setStep] = useState(1);
  const [advanced, setAdvanced] = useState(false);
  const [form, setForm] = useState(initialForm || {
    type: "2v2",              // "2v2" | "switcharoo" | "killrace" | "custom"
    name: "",
    subtitle: "",
    description: "",
    // KILLRACE
    krRounds: 5,
    krTeamSize: "duos",
    krLobbyMode: "buyback",
    krScoring: "kill_mult",
    krCustomScoring: { perKill: 1, top1: 15, top5: 5, top10: 2 },
    // 2v2 BRACKET
    bracketSizeMode: "auto", // auto fills BYE
    bracketCapacity: 16,
    bracketBoPreset: "cmg",
    bracketBo: { wb: 3, lb: 1, gf: 5 },
    bracketScoring: "total_kills",
    bracketSeeding: "registration_order",
    // Common
    maps: ["Verdansk"],
    tiebreaker: "Mest damage",
    entryFee: 200,
    cashInjection: 0,             // ekstra kontant-innskudd utenom entry fee
    prizeSplit: [0, 0, 0, 0, 0, 0], // %
    sponsorPrizes: [],            // {id, image, name, desc, value, awardTier}
    sponsors: [],                 // {id, logo, name, url, placement}
    startsAt: "",
    regOpens: "",
    regCloses: "",
    capacity: 16,
    rulesText: "",
    streamReqPC: true,
    minGames: 100,
    visibility: "public",
    // Advanced
    discordIntegration: false,
    sponsorLogo: null,
    bannerImage: null,
    streamLinkRequired: true,
    autoReminders: true,
    mvpAward: true,
    publishState: "draft",
  });
  const f = (k, v) => setForm(prev => ({ ...prev, [k]: v }));

  const isKR = form.type === "killrace";
  const isSwitcharoo = form.type === "switcharoo";
  const isCustom = form.type === "custom";
  const canNext = step < 5;
  const canBack = step > 1;

  const handleClose = () => {
    if (form.name && form.publishState !== "draft") {
      if (!confirm("Forkast endringer?")) return;
    }
    onClose();
  };

  return (
    <div className="wiz-overlay" onClick={handleClose}>
      <div className="wiz-modal" onClick={e => e.stopPropagation()}>
        <div className="wiz-head">
          <div className="wiz-head-left">
            <span className="wiz-eye" style={{color: tweaks.accent}}>● {editing ? "REDIGER TURNERING" : "OPPRETT TURNERING"}</span>
            <h2 className="wiz-title">{form.name || "Ny turnering"}</h2>
          </div>
          <div className="wiz-head-right">
            <label className="wiz-adv-toggle">
              <input type="checkbox" checked={advanced} onChange={e => setAdvanced(e.target.checked)}/>
              <span>AVANSERT MODUS</span>
            </label>
            <button className="wiz-close" onClick={handleClose}>✕</button>
          </div>
        </div>

        {/* Stepper */}
        <div className="wiz-steps">
          {STEP_DEFS.map((s, i) => (
            <button
              key={s.id}
              className={`wiz-step ${step === s.id ? "active" : ""} ${step > s.id ? "done" : ""}`}
              onClick={() => setStep(s.id)}
              style={step === s.id ? {borderColor: tweaks.accent} : null}
            >
              <span className="wiz-step-num" style={step === s.id ? {color: tweaks.accent, borderColor: tweaks.accent} : null}>
                {step > s.id ? "✓" : s.id}
              </span>
              <div className="wiz-step-text">
                <div className="wiz-step-lab">{s.label}</div>
                <div className="wiz-step-desc">{s.desc}</div>
              </div>
              {i < STEP_DEFS.length - 1 && <span className="wiz-step-line"/>}
            </button>
          ))}
        </div>

        {/* Body */}
        <div className="wiz-body">
          {step === 1 && <WizStep1 form={form} f={f} tweaks={tweaks}/>}
          {step === 2 && <WizStep2 form={form} f={f} tweaks={tweaks} advanced={advanced} isKR={isKR} isSwitcharoo={isSwitcharoo} isCustom={isCustom}/>}
          {step === 3 && <WizStep3 form={form} f={f} tweaks={tweaks} advanced={advanced}/>}
          {step === 4 && <WizStep4 form={form} f={f} tweaks={tweaks} advanced={advanced} isKR={isKR}/>}
          {step === 5 && <WizStep5 form={form} f={f} tweaks={tweaks}/>}
        </div>

        {/* Footer */}
        <div className="wiz-foot">
          <button className="wiz-btn ghost" onClick={handleClose}>AVBRYT</button>
          <div className="wiz-foot-right">
            <button className="wiz-btn ghost" disabled={!canBack} onClick={() => setStep(step - 1)}>← TILBAKE</button>
            {step < 5 && (
              <button className="wiz-btn primary" onClick={() => setStep(step + 1)} style={{background: tweaks.accent, borderColor: tweaks.accent}}>
                NESTE →
              </button>
            )}
            {step === 5 && (
              <button className="wiz-btn primary" onClick={() => onSave(form)} style={{background: tweaks.accent, borderColor: tweaks.accent}}>
                ✓ {editing ? "LAGRE ENDRINGER" : "OPPRETT TURNERING"}
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

// ----- STEP 1: TYPE -----
const WizStep1 = ({ form, f, tweaks }) => {
  const desc = FORMAT_DESCRIPTIONS[form.type];
  return (
  <div className="wiz-step-body">
    <WizField label="TURNERINGSTYPE" desc="Velg format for turneringen.">
      <div className="wiz-card-row">
        <button
          className={`wiz-bigcard ${form.type === "2v2" ? "active" : ""}`}
          onClick={() => f("type", "2v2")}
          style={form.type === "2v2" ? {borderColor: tweaks.accent} : null}
        >
          <div className="wbc-icon">▰▱</div>
          <div className="wbc-title" style={form.type === "2v2" ? {color: tweaks.accent} : null}>2v2 BRACKET</div>
          <div className="wbc-desc">CMG 2v2 BR Kill Race · double-elimination</div>
          <ul className="wbc-bullets">
            <li>BO3 / BO1 / BO5 (CMG-standard)</li>
            <li>Auto-BYE til 8/16/32 lag</li>
            <li>Lag-påmelding (begge spillere kjent)</li>
          </ul>
        </button>
        <button
          className={`wiz-bigcard ${form.type === "switcharoo" ? "active" : ""}`}
          onClick={() => f("type", "switcharoo")}
          style={form.type === "switcharoo" ? {borderColor: tweaks.accent} : null}
        >
          <div className="wbc-icon">⟳</div>
          <div className="wbc-title" style={form.type === "switcharoo" ? {color: tweaks.accent} : null}>2v2 SWITCHAROO</div>
          <div className="wbc-desc">Solo-påmelding · tilfeldig pairing live på stream</div>
          <ul className="wbc-bullets">
            <li>Spillere melder seg på alene</li>
            <li>Admin spinner hjulet — random 2v2-par</li>
            <li>Respinn: 100 kr (dobles per spinn)</li>
          </ul>
        </button>
        <button
          className={`wiz-bigcard ${form.type === "killrace" ? "active" : ""}`}
          onClick={() => f("type", "killrace")}
          style={form.type === "killrace" ? {borderColor: tweaks.accent} : null}
        >
          <div className="wbc-icon">▰▰▰</div>
          <div className="wbc-title" style={form.type === "killrace" ? {color: tweaks.accent} : null}>KILLRACE</div>
          <div className="wbc-desc">Parallelle lobbier · kumulative kills · leaderboard</div>
          <ul className="wbc-bullets">
            <li>Solo / Duos / Trios / Quads</li>
            <li>Big Map eller Small Map</li>
            <li>Custom antall maps</li>
          </ul>
        </button>
        <button
          className={`wiz-bigcard ${form.type === "custom" ? "active" : ""}`}
          onClick={() => f("type", "custom")}
          style={form.type === "custom" ? {borderColor: tweaks.accent} : null}
        >
          <div className="wbc-icon">⚙</div>
          <div className="wbc-title" style={form.type === "custom" ? {color: tweaks.accent} : null}>CUSTOM</div>
          <div className="wbc-desc">Fleksibelt oppsett · community-events</div>
          <ul className="wbc-bullets">
            <li>Solo / Duo / Trio / Quads</li>
            <li>Velg maps, scoring, format selv</li>
            <li>Egnet for sponsor- og spesialturneringer</li>
          </ul>
        </button>
      </div>
    </WizField>

    {desc && (
      <div className="wiz-infobox" style={{borderColor: tweaks.accent}}>
        <div className="wib-row" style={{flexDirection:"column", alignItems:"flex-start", gap:6}}>
          <span className="wib-label" style={{color: tweaks.accent, fontSize:11, letterSpacing:"0.2em"}}>OM {form.type.toUpperCase()}</span>
          <span style={{fontFamily:"var(--font-body)", fontSize:14, color:"var(--text-dim)", lineHeight:1.55}}>{desc}</span>
        </div>
      </div>
    )}

    <div className="wiz-row-2">
      <WizField label="TURNERINGSNAVN" desc="F.eks. WZN Duos Cup Mai">
        <input className="wiz-input" value={form.name} onChange={e => f("name", e.target.value)} placeholder="Skriv navn…"/>
      </WizField>
      <WizField label="UNDERTEKST" desc="F.eks. MAI 2026 eller #04">
        <input className="wiz-input" value={form.subtitle} onChange={e => f("subtitle", e.target.value)} placeholder="Skriv undertekst…"/>
      </WizField>
    </div>

    <WizField label="BESKRIVELSE" desc="Kort intro som vises på turnering-siden (valgfritt — overstyrer standardteksten)">
      <textarea className="wiz-textarea" rows={3} value={form.description} onChange={e => f("description", e.target.value)} placeholder={desc || "Skriv egen beskrivelse…"}/>
    </WizField>
  </div>
  );
};

// ----- STEP 2: FORMAT -----
const WizStep2 = ({ form, f, tweaks, advanced, isKR, isSwitcharoo, isCustom }) => {
  if (isCustom) {
    return (
      <div className="wiz-step-body">
        <WizField label="LAG-STØRRELSE" desc="Antall spillere per lag for custom-formatet">
          <div className="wiz-card-row">
            {KR_TEAM_SIZES.map(ts => (
              <button
                key={ts.id}
                className={`wiz-radiocard ${form.krTeamSize === ts.id ? "active" : ""}`}
                onClick={() => f("krTeamSize", ts.id)}
                style={form.krTeamSize === ts.id ? {borderColor: tweaks.accent} : null}
              >
                <div className="wrc-title" style={form.krTeamSize === ts.id ? {color: tweaks.accent} : null}>
                  {ts.label} ({ts.size}v{ts.size})
                </div>
                <div className="wrc-desc">{ts.size === 1 ? "Solo (én spiller per lag)" : `${ts.size} spillere per lag`}</div>
              </button>
            ))}
          </div>
        </WizField>
        <WizField label="MAPS" desc="Velg en eller flere maps">
          <MapMultiSelect value={form.maps} onChange={v => f("maps", v)} accent={tweaks.accent}/>
        </WizField>
        <div className="wiz-row-2">
          <WizField label="ANTALL MAPS" desc="Hvor mange runder spilles">
            <input type="number" className="wiz-input num" min={1} max={20}
              value={form.krRounds} onChange={e => f("krRounds", parseInt(e.target.value) || 1)}/>
          </WizField>
          <WizField label="TIE-BREAKER" desc="Hvis to lag er like">
            <select className="wiz-select" value={form.tiebreaker} onChange={e => f("tiebreaker", e.target.value)}>
              {TIEBREAKERS.map(tb => <option key={tb}>{tb}</option>)}
            </select>
          </WizField>
        </div>
        <div className="wiz-infobox">
          <div className="wib-row"><span className="wib-label">FORMAT</span><span className="wib-val">Custom — admin definerer regler i beskrivelses-feltet</span></div>
          <div className="wib-row"><span className="wib-label">SCORING</span><span className="wib-val">Custom (definert i beskrivelsen eller via score-submit)</span></div>
        </div>
      </div>
    );
  }
  if (isSwitcharoo) {
    return (
      <div className="wiz-step-body">
        <WizField label="FORMAT" desc="2v2 Switcharoo bruker alltid double-elimination bracket etter pairing.">
          <div className="wiz-infobox">
            <div className="wib-row"><span className="wib-label">LAGSTØRRELSE</span><span className="wib-val">2v2 (Duos)</span></div>
            <div className="wib-row"><span className="wib-label">BRACKET</span><span className="wib-val">Double-elimination</span></div>
            <div className="wib-row"><span className="wib-label">PAIRING</span><span className="wib-val">Tilfeldig via Spin the Wheel</span></div>
            <div className="wib-row"><span className="wib-label">PÅMELDING</span><span className="wib-val">Solo-spillere (individuelle)</span></div>
          </div>
        </WizField>
        <WizField label="ANTALL MAPS PER MATCH" desc="Best-of format for hver bracketkamp">
          <div className="wiz-card-row">
            {DUOS_BO_PRESETS.map(p => (
              <button key={p.id} className={`wiz-radiocard ${form.bracketBoPreset === p.id ? "active" : ""}`}
                onClick={() => { f("bracketBoPreset", p.id); if (p.id !== "custom") f("bracketBo", {wb: p.wb, lb: p.lb, gf: p.gf}); }}
                style={form.bracketBoPreset === p.id ? {borderColor: tweaks.accent} : null}>
                <div className="wrc-title" style={form.bracketBoPreset === p.id ? {color: tweaks.accent} : null}>
                  {p.label}{p.recommended && <span className="wrc-tag" style={{borderColor: tweaks.accent, color: tweaks.accent}}>ANBEFALT</span>}
                </div>
                <div className="wrc-desc">{p.desc}</div>
              </button>
            ))}
          </div>
        </WizField>
        <WizField label="MAPS" desc="Velg hvilke kart som brukes">
          <div className="wiz-checkbox-row">
            {MAP_OPTIONS.map(m => (
              <label key={m} className="wiz-checkbox">
                <input type="checkbox" checked={form.maps.includes(m)}
                  onChange={e => f("maps", e.target.checked ? [...form.maps, m] : form.maps.filter(x => x !== m))}/>
                <span>{m}</span>
              </label>
            ))}
          </div>
        </WizField>
      </div>
    );
  }
  if (isKR) {
    return (
      <div className="wiz-step-body">
        <div className="wiz-row-3">
          <WizField label="ANTALL RUNDER (MAPS)" desc="Hvor mange parallelle lobbier som spilles">
            <input
              type="number"
              className="wiz-input num"
              min={1} max={20}
              value={form.krRounds}
              onChange={e => f("krRounds", parseInt(e.target.value) || 1)}
            />
            <div className="wiz-hint">Standard: 5 maps · maks 20</div>
          </WizField>
          <WizField label="LAG-STØRRELSE" desc="Antall spillere per lag">
            <select className="wiz-select" value={form.krTeamSize} onChange={e => f("krTeamSize", e.target.value)}>
              {KR_TEAM_SIZES.map(ts => (
                <option key={ts.id} value={ts.id}>{ts.label} ({ts.size}v{ts.size})</option>
              ))}
            </select>
          </WizField>
          <WizField label="LOBBY-MODUS" desc="Warzone game mode">
            <select className="wiz-select" value={form.krLobbyMode} onChange={e => f("krLobbyMode", e.target.value)}>
              {KR_LOBBY_MODES.map(m => (
                <option key={m.id} value={m.id}>{m.label}</option>
              ))}
            </select>
            <div className="wiz-hint">{KR_LOBBY_MODES.find(m => m.id === form.krLobbyMode)?.desc}</div>
          </WizField>
        </div>

        <WizField label="SCORING SYSTEM" desc="Hvordan poeng beregnes per lobby">
          <div className="wiz-card-row">
            {KR_SCORING_MODES.map(m => (
              <button
                key={m.id}
                className={`wiz-radiocard ${form.krScoring === m.id ? "active" : ""}`}
                onClick={() => f("krScoring", m.id)}
                style={form.krScoring === m.id ? {borderColor: tweaks.accent} : null}
              >
                <div className="wrc-title" style={form.krScoring === m.id ? {color: tweaks.accent} : null}>
                  {m.label}
                  {m.recommended && <span className="wrc-tag" style={{borderColor: tweaks.accent, color: tweaks.accent}}>ANBEFALT</span>}
                </div>
                <div className="wrc-desc">{m.desc}</div>
              </button>
            ))}
          </div>
        </WizField>

        {form.krScoring === "custom" && (
          <div className="wiz-subpanel">
            <div className="wiz-subpanel-head">CUSTOM POENG-TABELL</div>
            <div className="wiz-row-4">
              <WizField label="POENG PER KILL">
                <input type="number" className="wiz-input num" value={form.krCustomScoring.perKill}
                  onChange={e => f("krCustomScoring", {...form.krCustomScoring, perKill: parseFloat(e.target.value)||0})}/>
              </WizField>
              <WizField label="BONUS · #1">
                <input type="number" className="wiz-input num" value={form.krCustomScoring.top1}
                  onChange={e => f("krCustomScoring", {...form.krCustomScoring, top1: parseFloat(e.target.value)||0})}/>
              </WizField>
              <WizField label="BONUS · TOP 5">
                <input type="number" className="wiz-input num" value={form.krCustomScoring.top5}
                  onChange={e => f("krCustomScoring", {...form.krCustomScoring, top5: parseFloat(e.target.value)||0})}/>
              </WizField>
              <WizField label="BONUS · TOP 10">
                <input type="number" className="wiz-input num" value={form.krCustomScoring.top10}
                  onChange={e => f("krCustomScoring", {...form.krCustomScoring, top10: parseFloat(e.target.value)||0})}/>
              </WizField>
            </div>
          </div>
        )}

        <div className="wiz-row-2">
          <WizField label="TIE-BREAKER" desc="Hvis to lag er like på kills">
            <select className="wiz-select" value={form.tiebreaker} onChange={e => f("tiebreaker", e.target.value)}>
              {TIEBREAKERS.map(tb => <option key={tb}>{tb}</option>)}
            </select>
          </WizField>
          {advanced && (
            <WizField label="MAP-ROTASJON" desc="Maps brukt i rotasjonen (alle valgte spilles i rekkefølge)">
              <MapMultiSelect value={form.maps} onChange={v => f("maps", v)} accent={tweaks.accent}/>
            </WizField>
          )}
        </div>
      </div>
    );
  }

  // 2v2 BRACKET
  return (
    <div className="wiz-step-body">
      <div className="wiz-row-2">
        <WizField label="LAG-KAPASITET" desc="Maks antall duos · auto-BYE-padding til 8/16/32">
          <input
            type="number"
            className="wiz-input num"
            min={2} max={128}
            value={form.bracketCapacity}
            onChange={e => f("bracketCapacity", parseInt(e.target.value) || 2)}
          />
          <BracketPadHint capacity={form.bracketCapacity} accent={tweaks.accent}/>
        </WizField>
        <WizField label="ELIMINERINGSFORMAT" desc="WZN bruker standard CMG-format">
          <select className="wiz-select" value="double" disabled>
            <option>Double Elimination (CMG-standard)</option>
          </select>
          <div className="wiz-hint">Winners + Losers bracket · tap 2 ganger = ute</div>
        </WizField>
      </div>

      <WizField label="BEST-OF PER STAGE" desc="Hvor mange maps i hver match-runde">
        <div className="wiz-card-row">
          {DUOS_BO_PRESETS.map(p => (
            <button
              key={p.id}
              className={`wiz-radiocard ${form.bracketBoPreset === p.id ? "active" : ""}`}
              onClick={() => {
                f("bracketBoPreset", p.id);
                f("bracketBo", { wb: p.wb, lb: p.lb, gf: p.gf });
              }}
              style={form.bracketBoPreset === p.id ? {borderColor: tweaks.accent} : null}
            >
              <div className="wrc-title" style={form.bracketBoPreset === p.id ? {color: tweaks.accent} : null}>
                {p.label}
                {p.recommended && <span className="wrc-tag" style={{borderColor: tweaks.accent, color: tweaks.accent}}>STANDARD</span>}
              </div>
              <div className="wrc-desc">{p.desc}</div>
            </button>
          ))}
        </div>
      </WizField>

      {form.bracketBoPreset === "custom" && (
        <div className="wiz-subpanel">
          <div className="wiz-subpanel-head">CUSTOM BEST-OF</div>
          <div className="wiz-row-3">
            <WizField label="WINNERS BRACKET">
              <select className="wiz-select" value={form.bracketBo.wb} onChange={e => f("bracketBo", {...form.bracketBo, wb: parseInt(e.target.value)})}>
                {[1,3,5,7].map(n => <option key={n} value={n}>BO{n}</option>)}
              </select>
            </WizField>
            <WizField label="LOSERS BRACKET">
              <select className="wiz-select" value={form.bracketBo.lb} onChange={e => f("bracketBo", {...form.bracketBo, lb: parseInt(e.target.value)})}>
                {[1,3,5].map(n => <option key={n} value={n}>BO{n}</option>)}
              </select>
            </WizField>
            <WizField label="GRAND FINAL">
              <select className="wiz-select" value={form.bracketBo.gf} onChange={e => f("bracketBo", {...form.bracketBo, gf: parseInt(e.target.value)})}>
                {[3,5,7].map(n => <option key={n} value={n}>BO{n}</option>)}
              </select>
            </WizField>
          </div>
        </div>
      )}

      <div className="wiz-row-3">
        <WizField label="SCORING PER MATCH" desc="Hvordan vinneren av en match bestemmes">
          <select className="wiz-select" value={form.bracketScoring} onChange={e => f("bracketScoring", e.target.value)}>
            <option value="total_kills">Total kills over alle maps (CMG-stil)</option>
          </select>
          <div className="wiz-hint">Kombinerte kills over BO-serien · damage som tiebreaker</div>
        </WizField>
        <WizField label="SEEDING" desc="Hvordan lag plasseres i bracketen">
          <select className="wiz-select" value={form.bracketSeeding} onChange={e => f("bracketSeeding", e.target.value)}>
            <option value="registration_order">Påmeldingsrekkefølge (først kommer, først seedet)</option>
          </select>
        </WizField>
        <WizField label="TIE-BREAKER" desc="Hvis to lag har like kills i en match">
          <select className="wiz-select" value={form.tiebreaker} onChange={e => f("tiebreaker", e.target.value)}>
            {TIEBREAKERS.map(tb => <option key={tb}>{tb}</option>)}
          </select>
        </WizField>
      </div>

      {advanced && (
        <WizField label="MAP(S)" desc="Maps brukt i turneringen">
          <MapMultiSelect value={form.maps} onChange={v => f("maps", v)} accent={tweaks.accent}/>
        </WizField>
      )}
    </div>
  );
};

const _adminNextPow2 = n => { let p = 1; while (p < n) p <<= 1; return p; };
const BracketPadHint = ({ capacity, accent }) => {
  const next = _adminNextPow2(capacity);
  const byes = next - capacity;
  if (byes === 0) return <div className="wiz-hint">✓ Eksakt bracket-størrelse · ingen BYE</div>;
  return <div className="wiz-hint" style={{color: accent}}>↗ Padder til {next}-lag bracket · {byes} BYE auto-tildelt topp-seeds</div>;
};

const MapMultiSelect = ({ value, onChange, accent }) => (
  <div style={{display:"flex", flexDirection:"column", gap:12}}>
    {MAP_GROUPS.map(group => (
      <div key={group.label}>
        <div style={{
          fontFamily:"var(--font-mono)", fontSize:10, color:"var(--text-faint)",
          letterSpacing:"0.18em", marginBottom:8,
        }}>{group.label}</div>
        <div className="map-multi">
          {group.maps.map(m => {
            const on = value.includes(m);
            return (
              <button
                key={m}
                className={`map-chip ${on ? "on" : ""}`}
                onClick={() => onChange(on ? value.filter(x => x !== m) : [...value, m])}
                style={on ? {borderColor: accent, color: accent} : null}
              >
                {on && <span className="map-chip-tick">✓ </span>}{m}
              </button>
            );
          })}
        </div>
      </div>
    ))}
  </div>
);

// ----- STEP 3: PREMIER -----
const AWARD_TIERS = ["1ST", "2ND", "3RD", "4TH-5TH", "MVP", "TOP FRAGGER", "LUCKY DROP", "CUSTOM"];
const PRIZE_PRESETS = [
  { name: "G-FUEL Starter Kit",          value: 800 },
  { name: "Logitech G Pro X Headset",    value: 2200 },
  { name: "Razer Viper V3 Pro Mouse",    value: 2400 },
  { name: "Red Bull 24-pack",            value: 600 },
  { name: "Elgato Stream Deck",          value: 1900 },
  { name: "Secretlab Stol-gavekort",     value: 5000 },
];

const WizStep3 = ({ form, f, tweaks, advanced }) => {
  const totalEntry = (form.capacity || form.bracketCapacity || 16) * form.entryFee;
  const prizePool = totalEntry + (form.cashInjection || 0);

  const splits = form.prizeSplit;
  const total = splits.reduce((a,b)=>a+b,0);
  const valid = total === 100;
  const labels = ["1ST", "2ND", "3RD", "4TH", "5TH", "6TH"];

  const updateSplit = (idx, v) => {
    const next = [...splits];
    next[idx] = parseFloat(v) || 0;
    f("prizeSplit", next);
  };

  const addPrize = () => {
    const newId = `sp-${Date.now()}`;
    f("sponsorPrizes", [...form.sponsorPrizes, {
      id: newId, image: null, name: "", desc: "", value: 0, awardTier: "1ST", sponsor: "",
    }]);
  };
  const updatePrize = (id, key, value) => {
    f("sponsorPrizes", form.sponsorPrizes.map(p => p.id === id ? { ...p, [key]: value } : p));
  };
  const removePrize = (id) => {
    f("sponsorPrizes", form.sponsorPrizes.filter(p => p.id !== id));
  };

  const addSponsor = () => {
    const newId = `sn-${Date.now()}`;
    f("sponsors", [...form.sponsors, {
      id: newId, logo: null, name: "", url: "", placement: "banner",
    }]);
  };
  const updateSponsor = (id, key, value) => {
    f("sponsors", form.sponsors.map(s => s.id === id ? { ...s, [key]: value } : s));
  };
  const removeSponsor = (id) => {
    f("sponsors", form.sponsors.filter(s => s.id !== id));
  };

  return (
    <div className="wiz-step-body">
      {/* ============ KONTANT-PREMIER ============ */}
      <div className="wiz-section">
        <div className="wiz-section-head">
          <div className="wiz-section-eye">A</div>
          <div>
            <div className="wiz-section-title">KONTANT-PREMIER</div>
            <div className="wiz-section-sub">Premiepott regnes automatisk fra entry fee × kapasitet + ekstra innskudd</div>
          </div>
        </div>

        <div className="cash-calc">
          <div className="cc-cell">
            <span className="cc-eye">ENTRY FEE</span>
            <div className="cc-input-wrap">
              <input
                type="number"
                className="wiz-input num"
                min={0}
                value={form.entryFee}
                onChange={e => f("entryFee", parseInt(e.target.value) || 0)}
              />
              <span className="cc-unit">NOK / LAG</span>
            </div>
            <div className="cc-hint">× {form.capacity || form.bracketCapacity || 16} lag</div>
          </div>

          <div className="cc-op">×</div>

          <div className="cc-cell">
            <span className="cc-eye">FRA PÅMELDING</span>
            <div className="cc-result">{totalEntry.toLocaleString()}<span> NOK</span></div>
            <div className="cc-hint">{form.entryFee} × {form.capacity || form.bracketCapacity || 16}</div>
          </div>

          <div className="cc-op">+</div>

          <div className="cc-cell">
            <span className="cc-eye">EKSTRA INNSKUDD</span>
            <div className="cc-input-wrap">
              <input
                type="number"
                className="wiz-input num"
                min={0}
                value={form.cashInjection}
                onChange={e => f("cashInjection", parseInt(e.target.value) || 0)}
              />
              <span className="cc-unit">NOK</span>
            </div>
            <div className="cc-hint">Liga / sponsor / arrangør tilskudd</div>
          </div>

          <div className="cc-op">=</div>

          <div className="cc-cell total" style={{borderColor: tweaks.accent}}>
            <span className="cc-eye" style={{color: tweaks.accent}}>TOTAL PREMIEPOTT</span>
            <div className="cc-result big" style={{color: tweaks.accent}}>
              {prizePool.toLocaleString()}<span> NOK</span>
            </div>
            <div className="cc-hint">Auto-beregnet · oppdateres når du endrer kapasitet</div>
          </div>
        </div>

        <WizField label="PREMIE-FORDELING" desc="Hvor mye av kontant-potten går til hver plassering">
          <div className="prize-split-grid">
            {labels.map((lab, i) => (
              <div key={i} className="prize-split-cell">
                <span className="psc-lab">{lab}</span>
                <input
                  type="number"
                  className="wiz-input num"
                  min={0} max={100}
                  value={splits[i] || 0}
                  onChange={e => updateSplit(i, e.target.value)}
                />
                <span className="psc-pct">%</span>
                <span className="psc-nok">
                  = {Math.round((splits[i] || 0) / 100 * prizePool).toLocaleString()} NOK
                </span>
              </div>
            ))}
          </div>
          <div className="prize-split-total" style={{color: valid ? tweaks.accent : "var(--bad)"}}>
            TOTAL: {total}% {valid ? "✓" : `(må være 100%)`}
          </div>
        </WizField>
      </div>

      {/* ============ SPONSOR-PREMIER (VARER) ============ */}
      <div className="wiz-section">
        <div className="wiz-section-head">
          <div className="wiz-section-eye">B</div>
          <div>
            <div className="wiz-section-title">SPONSOR-PREMIER (VARER)</div>
            <div className="wiz-section-sub">Fysiske premier fra sponsorer — headsets, mus, gavekort, merch etc.</div>
          </div>
          <button className="wiz-section-add" onClick={addPrize} style={{borderColor: tweaks.accent, color: tweaks.accent}}>
            + LEGG TIL PREMIE
          </button>
        </div>

        {form.sponsorPrizes.length === 0 ? (
          <div className="prize-empty">
            <div className="pe-icon">📦</div>
            <div className="pe-title">Ingen sponsor-premier lagt til ennå</div>
            <div className="pe-sub">Trykk "+ Legg til premie" for å starte. Du kan også bruke en preset:</div>
            <div className="pe-presets">
              {PRIZE_PRESETS.map((p, i) => (
                <button
                  key={i}
                  className="pe-preset"
                  onClick={() => {
                    const newId = `sp-${Date.now()}-${i}`;
                    f("sponsorPrizes", [...form.sponsorPrizes, {
                      id: newId, image: null, name: p.name, desc: "", value: p.value,
                      awardTier: i === 0 ? "MVP" : i < 3 ? "1ST" : "TOP FRAGGER", sponsor: "",
                    }]);
                  }}
                >
                  + {p.name} <span style={{color: tweaks.accent}}>{p.value} NOK</span>
                </button>
              ))}
            </div>
          </div>
        ) : (
          <div className="prize-list">
            {form.sponsorPrizes.map((p, i) => (
              <div key={p.id} className="prize-row">
                {/* Image upload tile */}
                <div className="prize-img-tile">
                  {p.image ? (
                    <img src={p.image} alt={p.name} className="prize-img"/>
                  ) : (
                    <div className="prize-img-empty">
                      <div className="pie-icon">↑</div>
                      <div className="pie-lab">LAST OPP BILDE</div>
                      <div className="pie-sub">PNG / JPG</div>
                    </div>
                  )}
                  <button className="prize-img-remove" onClick={() => removePrize(p.id)}>✕</button>
                </div>

                <div className="prize-fields">
                  <div className="wiz-row-3">
                    <WizField label="PREMIE-NAVN">
                      <input
                        className="wiz-input"
                        value={p.name}
                        placeholder="F.eks. Logitech G Pro X Headset"
                        onChange={e => updatePrize(p.id, "name", e.target.value)}
                      />
                    </WizField>
                    <WizField label="SPONSOR">
                      <input
                        className="wiz-input"
                        value={p.sponsor}
                        placeholder="F.eks. Logitech"
                        onChange={e => updatePrize(p.id, "sponsor", e.target.value)}
                      />
                    </WizField>
                    <WizField label="VERDI (NOK)">
                      <input
                        type="number"
                        className="wiz-input num"
                        value={p.value}
                        onChange={e => updatePrize(p.id, "value", parseInt(e.target.value) || 0)}
                      />
                    </WizField>
                  </div>
                  <div className="wiz-row-2">
                    <WizField label="BESKRIVELSE / DETALJER" desc="Hva er inkludert, modell-info, leveringstid etc.">
                      <textarea
                        className="wiz-textarea"
                        rows={2}
                        value={p.desc}
                        placeholder="F.eks. Trådløs gaming-headset · USB-C lading · 24t batteritid · sendes innen 7 dager"
                        onChange={e => updatePrize(p.id, "desc", e.target.value)}
                      />
                    </WizField>
                    <WizField label="TILDELES TIL" desc="Hvilken plassering / kategori får denne premien">
                      <select
                        className="wiz-select"
                        value={p.awardTier}
                        onChange={e => updatePrize(p.id, "awardTier", e.target.value)}
                      >
                        {AWARD_TIERS.map(t => <option key={t}>{t}</option>)}
                      </select>
                      <div className="wiz-hint">"LUCKY DROP" = tilfeldig spiller blant alle påmeldte</div>
                    </WizField>
                  </div>
                </div>
              </div>
            ))}
            <button className="prize-add-more" onClick={addPrize}>
              <span style={{color: tweaks.accent}}>+</span> LEGG TIL FLERE PREMIE
            </button>
          </div>
        )}

        {form.sponsorPrizes.length > 0 && (
          <div className="prize-summary">
            <span>SUM SPONSOR-PREMIER:</span>
            <b style={{color: tweaks.accent}}>
              {form.sponsorPrizes.reduce((s,p) => s + (p.value || 0), 0).toLocaleString()} NOK
            </b>
            <span>· {form.sponsorPrizes.length} premier</span>
          </div>
        )}
      </div>

      {/* ============ SPONSOR-BRANDING ============ */}
      <div className="wiz-section">
        <div className="wiz-section-head">
          <div className="wiz-section-eye">C</div>
          <div>
            <div className="wiz-section-title">SPONSOR-BRANDING</div>
            <div className="wiz-section-sub">Logoer som vises på turnering-siden, leaderboard, stream-overlay etc.</div>
          </div>
          <button className="wiz-section-add" onClick={addSponsor} style={{borderColor: tweaks.accent, color: tweaks.accent}}>
            + LEGG TIL SPONSOR
          </button>
        </div>

        {form.sponsors.length === 0 ? (
          <div className="prize-empty short">
            <div className="pe-icon">🏷</div>
            <div className="pe-title">Ingen sponsorer lagt til</div>
            <div className="pe-sub">Trykk "+ Legg til sponsor" for å laste opp logo og lenke</div>
          </div>
        ) : (
          <div className="sponsor-list">
            {form.sponsors.map(s => (
              <div key={s.id} className="sponsor-row-card">
                <div className="sponsor-logo-tile">
                  {s.logo ? (
                    <img src={s.logo} alt={s.name} className="sponsor-logo-img"/>
                  ) : (
                    <div className="sponsor-logo-empty">
                      <div className="pie-icon">↑</div>
                      <div className="pie-lab">LOGO</div>
                    </div>
                  )}
                  <button className="prize-img-remove" onClick={() => removeSponsor(s.id)}>✕</button>
                </div>
                <div className="sponsor-fields-row">
                  <div className="wiz-row-3">
                    <WizField label="SPONSOR-NAVN">
                      <input
                        className="wiz-input"
                        value={s.name}
                        placeholder="F.eks. G-FUEL"
                        onChange={e => updateSponsor(s.id, "name", e.target.value)}
                      />
                    </WizField>
                    <WizField label="LENKE (valgfritt)">
                      <input
                        className="wiz-input"
                        value={s.url}
                        placeholder="https://"
                        onChange={e => updateSponsor(s.id, "url", e.target.value)}
                      />
                    </WizField>
                    <WizField label="PLASSERING">
                      <select
                        className="wiz-select"
                        value={s.placement}
                        onChange={e => updateSponsor(s.id, "placement", e.target.value)}
                      >
                        <option value="banner">Banner (stor)</option>
                        <option value="sidebar">Sidebar</option>
                        <option value="footer">Footer</option>
                        <option value="stream">Kun stream-overlay</option>
                      </select>
                    </WizField>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

// ----- STEP 4: PÅMELDING -----
const WizStep4 = ({ form, f, tweaks, advanced, isKR }) => (
  <div className="wiz-step-body">
    <div className="wiz-row-3">
      <WizField label="PÅMELDING ÅPNER" desc="Når lag kan begynne å registrere seg">
        <input type="datetime-local" className="wiz-input" value={form.regOpens} onChange={e => f("regOpens", e.target.value)}/>
      </WizField>
      <WizField label="PÅMELDING STENGER" desc="Siste tidspunkt for registrering">
        <input type="datetime-local" className="wiz-input" value={form.regCloses} onChange={e => f("regCloses", e.target.value)}/>
      </WizField>
      <WizField label="TURNERINGEN STARTER" desc="Når første runde starter">
        <input type="datetime-local" className="wiz-input" value={form.startsAt} onChange={e => f("startsAt", e.target.value)}/>
      </WizField>
    </div>

    <div className="wiz-row-3">
      <WizField label="MAKS ANTALL LAG" desc="Kapasitet · turnering låser når full">
        <input
          type="number"
          className="wiz-input num"
          min={2} max={128}
          value={form.capacity}
          onChange={e => f("capacity", parseInt(e.target.value) || 2)}
        />
      </WizField>
      <WizField label="SYNLIGHET" desc="Hvem ser turneringen">
        <select className="wiz-select" value={form.visibility} onChange={e => f("visibility", e.target.value)}>
          <option value="public">Offentlig (alle)</option>
          <option value="members">Kun liga-medlemmer</option>
          <option value="invite">Invite-only</option>
        </select>
      </WizField>
      <WizField label="MIN. WARZONE-KAMPER" desc="Lavest antall kamper på account for å delta">
        <input
          type="number"
          className="wiz-input num"
          min={0}
          value={form.minGames}
          onChange={e => f("minGames", parseInt(e.target.value) || 0)}
        />
        <div className="wiz-hint">CMG-standard: 100</div>
      </WizField>
    </div>

    <WizField label="STREAM-KRAV" desc="Hvilke spillere må streame matchen">
      <div className="toggle-stack">
        <ToggleRow value={form.streamReqPC} onChange={v => f("streamReqPC", v)} accent={tweaks.accent}
          label="PC-spillere må streame (audio + VOD enabled)" desc="Brudd → DQ uten refund"/>
        {advanced && (
          <ToggleRow value={form.streamLinkRequired} onChange={v => f("streamLinkRequired", v)} accent={tweaks.accent}
            label="Stream-link påkrevd per lag ved påmelding" desc="Lagkapteiner må lime inn Twitch/YouTube-link"/>
        )}
      </div>
    </WizField>

    <WizField label="EGNE REGLER" desc="Custom regelfelt som vises i rules-tab (markdown støttes)">
      <textarea
        className="wiz-textarea"
        rows={5}
        value={form.rulesText}
        onChange={e => f("rulesText", e.target.value)}
        placeholder={`F.eks. Spesifikke restriksjoner:\n- Ingen riot shields\n- Ingen GPNV\n- Ingen JOKR / RPG`}
      />
      <div className="wiz-hint">Default-reglene (CMG-standard) inkluderes automatisk i tillegg</div>
    </WizField>

    {advanced && (
      <div className="wiz-row-2">
        <WizField label="BANNER / HEADER-BILDE" desc="Vises øverst på turnering-siden (1920×400 anbefalt)">
          <button className="wiz-upload-btn">
            <span>↑ LAST OPP BANNER</span>
            <span className="wiz-upload-sub">PNG / JPG · maks 5 MB</span>
          </button>
        </WizField>
        <WizField label="DISCORD-INTEGRASJON" desc="Auto-opprett chat-kanaler per lag i Discord">
          <ToggleRow value={form.discordIntegration} onChange={v => f("discordIntegration", v)} accent={tweaks.accent}
            label="Aktivér Discord-integrasjon" desc="Krever Discord-bot installert i serveren"/>
          <ToggleRow value={form.autoReminders} onChange={v => f("autoReminders", v)} accent={tweaks.accent}
            label="Auto-påminnelser (24t + 1t før start)" desc="Sendes til alle påmeldte kapteiner"/>
        </WizField>
      </div>
    )}
  </div>
);

// ----- STEP 5: BEKREFT / PUBLISH -----
const WizStep5 = ({ form, f, tweaks }) => {
  const isKR = form.type === "killrace";
  const bracketSize = !isKR ? _adminNextPow2(form.capacity || form.bracketCapacity || 16) : null;
  const teamSizeNum = isKR ? KR_TEAM_SIZES.find(t => t.id === form.krTeamSize)?.size : 2;
  const totalEntry = (form.capacity || form.bracketCapacity || 16) * form.entryFee;
  const prizePool = totalEntry + (form.cashInjection || 0);
  const sponsorPrizeValue = form.sponsorPrizes.reduce((s,p) => s + (p.value || 0), 0);

  return (
    <div className="wiz-step-body">
      <WizField label="GJENNOMGANG" desc="Sjekk at alt stemmer før du publiserer">
        <div className="wiz-summary">
          <div className="ws-sec">
            <div className="ws-head">GENERELT</div>
            <div className="ws-row"><span>NAVN</span><b>{form.name || "—"}</b></div>
            <div className="ws-row"><span>UNDERTEKST</span><b>{form.subtitle || "—"}</b></div>
            <div className="ws-row"><span>TYPE</span><b>{isKR ? "KILLRACE" : "2v2 BRACKET (Double Elim)"}</b></div>
          </div>
          <div className="ws-sec">
            <div className="ws-head">FORMAT</div>
            {isKR ? (
              <>
                <div className="ws-row"><span>RUNDER</span><b>{form.krRounds} maps</b></div>
                <div className="ws-row"><span>LAG-STR.</span><b>{KR_TEAM_SIZES.find(t => t.id === form.krTeamSize)?.label} ({teamSizeNum}v{teamSizeNum})</b></div>
                <div className="ws-row"><span>LOBBY</span><b>{KR_LOBBY_MODES.find(m => m.id === form.krLobbyMode)?.label}</b></div>
                <div className="ws-row"><span>SCORING</span><b>{KR_SCORING_MODES.find(m => m.id === form.krScoring)?.label}</b></div>
              </>
            ) : (
              <>
                <div className="ws-row"><span>KAPASITET</span><b>{form.capacity} duos → {bracketSize}-lag bracket ({bracketSize - form.capacity} BYE)</b></div>
                <div className="ws-row"><span>BO-FORMAT</span><b>BO{form.bracketBo.wb} WB · BO{form.bracketBo.lb} LB · BO{form.bracketBo.gf} GF</b></div>
                <div className="ws-row"><span>SEEDING</span><b>Påmeldingsrekkefølge</b></div>
              </>
            )}
            <div className="ws-row"><span>MAPS</span><b>{form.maps.join(", ") || "—"}</b></div>
            <div className="ws-row"><span>TIEBREAKER</span><b>{form.tiebreaker}</b></div>
          </div>
          <div className="ws-sec">
            <div className="ws-head">KONTANT-PREMIER</div>
            <div className="ws-row"><span>ENTRY</span><b>{form.entryFee} NOK × {form.capacity} = {totalEntry.toLocaleString()} NOK</b></div>
            <div className="ws-row"><span>EKSTRA INNSKUDD</span><b>{(form.cashInjection || 0).toLocaleString()} NOK</b></div>
            <div className="ws-row"><span>TOTAL POTT</span><b style={{color: tweaks.accent}}>{prizePool.toLocaleString()} NOK</b></div>
            <div className="ws-row"><span>FORDELING</span><b>
              {form.prizeSplit.slice(0,3).map((p, i) => `${["1ST","2ND","3RD"][i]} ${Math.round(p/100*prizePool).toLocaleString()}`).join(" · ")}
            </b></div>
          </div>
          <div className="ws-sec">
            <div className="ws-head">SPONSOR-PREMIER + BRANDING</div>
            <div className="ws-row"><span>VARER</span><b>{form.sponsorPrizes.length} premier · {sponsorPrizeValue.toLocaleString()} NOK verdi</b></div>
            {form.sponsorPrizes.slice(0, 4).map(p => (
              <div key={p.id} className="ws-row small">
                <span>· {p.awardTier}</span>
                <b>{p.name || "(uten navn)"}{p.sponsor ? ` — ${p.sponsor}` : ""}</b>
              </div>
            ))}
            <div className="ws-row"><span>SPONSORER</span><b>{form.sponsors.length} logo{form.sponsors.length !== 1 ? "er" : ""}</b></div>
            {form.sponsors.length > 0 && (
              <div className="ws-row small"><span>· LISTE</span><b>{form.sponsors.map(s => s.name || "(uten navn)").join(" · ")}</b></div>
            )}
          </div>
          <div className="ws-sec">
            <div className="ws-head">PÅMELDING</div>
            <div className="ws-row"><span>ÅPNER</span><b>{form.regOpens || "—"}</b></div>
            <div className="ws-row"><span>STENGER</span><b>{form.regCloses || "—"}</b></div>
            <div className="ws-row"><span>START</span><b>{form.startsAt || "—"}</b></div>
            <div className="ws-row"><span>SYNLIGHET</span><b>{form.visibility === "public" ? "Offentlig" : form.visibility === "members" ? "Kun medlemmer" : "Invite-only"}</b></div>
          </div>
        </div>
      </WizField>

      <WizField label="PUBLISERINGSSTATUS" desc="Velg hvordan turneringen lanseres">
        <div className="publish-state-grid">
          {PUBLISH_STATES.filter(s => ["draft","open","locked"].includes(s.id)).map(s => (
            <button
              key={s.id}
              className={`pub-state ${form.publishState === s.id ? "active" : ""}`}
              onClick={() => f("publishState", s.id)}
              style={form.publishState === s.id ? {borderColor: tweaks.accent} : null}
            >
              <div className="pub-state-lab" style={form.publishState === s.id ? {color: tweaks.accent} : null}>{s.label}</div>
              <div className="pub-state-desc">{s.desc}</div>
            </button>
          ))}
        </div>
        <div className="wiz-hint">PÅGÅR / FERDIG / AVLYST settes automatisk basert på datoer + handlinger</div>
      </WizField>
    </div>
  );
};

// =========================================================
// SHARED PRIMITIVES
// =========================================================

const WizField = ({ label, desc, children }) => (
  <div className="wiz-field">
    <label className="wiz-field-label">{label}</label>
    {desc && <div className="wiz-field-desc">{desc}</div>}
    <div className="wiz-field-control">{children}</div>
  </div>
);

const ToggleRow = ({ value, onChange, accent, label, desc }) => (
  <button className={`toggle-row ${value ? "on" : ""}`} onClick={() => onChange(!value)}>
    <div className={`toggle-pill ${value ? "on" : ""}`} style={value ? {background: accent} : null}>
      <span className="toggle-knob" style={value ? {transform: "translateX(18px)"} : null}/>
    </div>
    <div className="toggle-text">
      <div className="toggle-label">{label}</div>
      {desc && <div className="toggle-desc">{desc}</div>}
    </div>
  </button>
);

Object.assign(window, { AdminTournamentList, TournamentWizard });