// SLIK FUNGERER WZN LEAGUE — Liga-spesifikk forklaringsside
// Tilbake-knapp øverst, så stegvis gjennomgang av hele liga-strukturen

const LigaHowto = ({ tweaks, onNav }) => {
  const accent = tweaks.accent;
  const [teamCount, setTeamCount] = useState(50);
  useEffect(() => {
    if (typeof window.db !== "undefined") {
      window.db.from("team_registrations").select("id", { count: "exact", head: true })
        .eq("status", "approved")
        .then(({ count }) => { if (count) setTeamCount(count); });
    }
  }, []);
  const matchPointThreshold = Math.round(Math.max(teamCount, 10) * 2.5);

  const sections = [
    {
      n: "01",
      title: "OPPSETT",
      lead: "WZN League består av to divisjoner med 25 lag hver. Du registrerer et trio og spiller deg gjennom hele sesongen.",
      points: [
        { k: "DIVISJONER", v: "DIV.1 (toppen) og DIV.2. Nye lag starter alltid i Div.2." },
        { k: "LAG-STØRRELSE", v: "3 spillere per roster. 1 erstatter tillatt mid-sesong." },
        { k: "REGION", v: "EU-Nord servere. Bostedsadresse i Norge for hovedligaen." },
        { k: "PÅMELDING", v: "500 NOK per lag per sesong. Inkluderer 20 matchdays + 2 turneringer." },
      ],
    },
    {
      n: "02",
      title: "SESONGFORMAT",
      lead: "Sesongen er 20 matchdays over 5 måneder. Hver torsdag kl. 20:00.",
      points: [
        { k: "MATCHDAYS", v: "20 stk over hele sesongen. Torsdager 20:00 — 23:00." },
        { k: "GAMES", v: "5 BR Trios games per matchday på Verdansk / Urzikstan / Vondel." },
        { k: "DROP", v: "Frie drop første 4 games. Tournament drop på siste game." },
        { k: "DURATION", v: "Hver game ~18-22 min. Hele matchday ~3 timer." },
      ],
    },
    {
      n: "03",
      title: "POENGSYSTEM (WZN LIGAPOENG)",
      lead: "Basert på lp 2025. Tilpasset Norge med team-count-skalert match point-terskel.",
      tableSpec: {
        headers: ["PLASSERING", "MULTIPLIKATOR", "BASE POENG", "EKS. PÅ 8 KILLS"],
        rows: [
          ["1st",          "2.0x", "70 p", "(70 + 8) × 2.0 = 156"],
          ["2nd – 5th",    "1.8x", "50 p", "(50 + 8) × 1.8 = 104"],
          ["6th – 10th",   "1.6x", "35 p", "(35 + 8) × 1.6 = 69"],
          ["11th – 20th",  "1.4x", "20 p", "(20 + 8) × 1.4 = 39"],
          ["21st – 35th",  "1.2x", "10 p", "(10 + 8) × 1.2 = 22"],
          ["36th – 50th",  "1.0x", "5 p",  "(5 + 8) × 1.0 = 13"],
        ],
      },
      points: [
        { k: "KILLS", v: "1 poeng per kill (telles før multiplikator)." },
        { k: "TOPP 4 AV 5", v: "Beste 4 av 5 games per matchday teller mot LP-totalen." },
        { k: "SESONG-LP", v: "Sum av alle matchdays. Avgjør tabellplassering." },
      ],
    },
    {
      n: "04",
      title: "MATCH POINT-FORMAT",
      lead: `Inspirert av lp finale-format. Tilpasset: terskel skalert med antall lag = ${teamCount} × 2.5 = ${matchPointThreshold}p.`,
      points: [
        { k: "TERSKEL", v: `${matchPointThreshold} Ligapoeng. Når et lag krysser, blir de "Match Point Eligible".` },
        { k: "VINNE", v: "Første Match Point-lag som vinner én game (1st plass) tar tittelen." },
        { k: "INGEN GRENSE", v: "Flere lag kan være Match Point Eligible samtidig — race om første seier." },
        { k: "MERK", v: "Match Point gjelder kun siste 3 matchdays. Før det er det ren LP-summering." },
      ],
    },
    {
      n: "05",
      title: "OPPRYKK OG NEDRYKK",
      lead: "Sesongen avsluttes med opp/nedrykk basert på tabellposisjon.",
      points: [
        { k: "DIV.2 → DIV.1", v: "Topp 2 rykker direkte opp. Plass 3-4 spiller playoff mot plass 23-24 i Div.1." },
        { k: "DIV.1 → DIV.2", v: "Bunn 2 rykker direkte ned. Plass 23-24 spiller playoff mot plass 3-4 i Div.2." },
        { k: "NYE LAG", v: "Starter alltid i Div.2 uavhengig av tidligere sesong." },
        { k: "INAKTIVITET", v: "Lag som ikke spiller 3+ matchdays mister Div.1-plassen automatisk." },
      ],
    },
    {
      n: "06",
      title: "INNRAPPORTERING",
      lead: "Etter hvert game laster kapteinen opp screenshot. AI-en vår leser tallene automatisk.",
      points: [
        { k: "FRIST", v: "10 min etter hvert game. Etter det = automatisk null poeng." },
        { k: "SCREENSHOT", v: "Lobby leaderboard + placement screen. Begge må synes klart." },
        { k: "AI-VERIFISERING", v: "Vår clip-judge ekstraherer tall og flagger diskrepanser. ~95% confidence." },
        { k: "MANUELL OVERSTYRING", v: "Admin verifiserer flaggete saker innen 24t. Du får varsel om endring." },
      ],
    },
    {
      n: "07",
      title: "PREMIER",
      lead: "Premiepotten deles mellom topp lag og topp individuelle prestasjoner.",
      points: [
        { k: "TOTAL POTT", v: "150 000 NOK + utstyrspakker fra Telenor og partnere." },
        { k: "TOPP 3 LAG", v: "60 / 35 / 15k NOK til 1./2./3.plass." },
        { k: "TOPP FRAGGER", v: "20k NOK til spilleren med flest kills over sesongen." },
        { k: "MVP", v: "Stemmes på av spillere + panel. 10k NOK + WZN-trofé." },
        { k: "FAIR PLAY-PRIS", v: "5k NOK til laget med færrest rapporter og høyest sportsmanship-score." },
      ],
    },
  ];

  return (
    <div className="howto-screen" data-screen-label="LIGA-HOWTO">
      {/* BACK BAR */}
      <div className="howto-backbar">
        <button className="howto-back-btn" onClick={() => onNav("liga")}>
          <span className="back-arrow">←</span>
          <span className="back-label">TILBAKE TIL LIGA</span>
        </button>
        <span className="howto-crumb">LIGA / SLIK FUNGERER WZN LEAGUE</span>
      </div>

      <SectionHeader
        code="03"
        title="SLIK FUNGERER WZN LEAGUE"
        subtitle="En komplett gjennomgang av sesongstruktur, poengsystem og premier."
        accent={accent}
        right={
          <button className="liga-action-btn" style={{borderColor: accent, color: accent}} onClick={() => onNav("liga-regler")}>
            <span className="liga-action-code">§</span>
            <span className="liga-action-label">SE FULLE REGLER</span>
          </button>
        }
      />

      {/* TL;DR */}
      <div className="howto-tldr">
        <div className="tldr-head">
          <span className="tldr-tag" style={{borderColor: accent, color: accent}}>TL;DR</span>
          <span className="tldr-time">3 min lesing</span>
        </div>
        <p className="tldr-body">
          Du registrerer et trio for 500 NOK, spiller 20 matchdays med 5 BR-games hver, samler Ligapoeng basert på placement + kills, og kjemper om topp 3 i din divisjon. Topp 2 i Div.2 rykker opp. Bunn 2 i Div.1 rykker ned. Total premiepott: 150 000 NOK.
        </p>
        <div className="tldr-actions">
          <button className="tldr-action" onClick={() => onNav("liga")}>← TILBAKE TIL LIGA</button>
          <button className="tldr-action primary" style={{borderColor: accent, color: accent}} onClick={() => onNav("team-create")}>
            REGISTRER LAG →
          </button>
        </div>
      </div>

      {/* SECTIONS */}
      <div className="howto-sections">
        {sections.map(sec => (
          <div key={sec.n} className="howto-section">
            <div className="howto-sec-head">
              <span className="howto-sec-n" style={{borderColor: accent}}>{sec.n}</span>
              <div className="howto-sec-titles">
                <h3 className="howto-sec-title">{sec.title}</h3>
                <p className="howto-sec-lead">{sec.lead}</p>
              </div>
            </div>
            {sec.tableSpec && (
              <div className="howto-table-wrap">
                <table className="howto-table">
                  <thead>
                    <tr>
                      {sec.tableSpec.headers.map(h => <th key={h}>{h}</th>)}
                    </tr>
                  </thead>
                  <tbody>
                    {sec.tableSpec.rows.map((row, i) => (
                      <tr key={i}>
                        {row.map((cell, j) => (
                          <td key={j} className={j === 0 ? "howto-td-pos" : j === 1 ? "howto-td-mult" : ""} style={j === 1 ? {color: accent} : {}}>
                            {cell}
                          </td>
                        ))}
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
            <dl className="howto-points">
              {sec.points.map(pt => (
                <div key={pt.k} className="howto-point">
                  <dt className="howto-point-k">{pt.k}</dt>
                  <dd className="howto-point-v">{pt.v}</dd>
                </div>
              ))}
            </dl>
          </div>
        ))}
      </div>

      {/* CTA FOOTER */}
      <div className="howto-cta-footer">
        <div className="cta-text">
          <div className="cta-k">KLAR TIL Å STARTE?</div>
          <div className="cta-v">Registrer laget ditt for Sesong 06 — påmelding åpner 15.06.2026</div>
        </div>
        <div className="cta-actions">
          <button className="cta-btn" onClick={() => onNav("liga-regler")}>LES REGLER</button>
          <button className="cta-btn primary" style={{borderColor: accent, color: accent}} onClick={() => onNav("team-create")}>
            REGISTRER LAG →
          </button>
        </div>
      </div>
    </div>
  );
};

window.LigaHowto = LigaHowto;