/* global React */
const { useState: useS, useEffect: useE } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#F5C518", "oklch(0.21 0.03 80)"],
  "density": "regular",
  "showNumbers": true
}/*EDITMODE-END*/;

// ---- Awards --------------------------------------------------------------
function AwardCard({ a }) {
  const T = window.TOURNAMENT;
  const team = T.TEAMS[a.team];
  return (
    <div className={"award" + (a.hero ? " award--hero" : "")} style={window.teamVars(team)}>
      {a.hero && <window.Medal size={44} />}
      <div className="award__body">
        <div className="award__title">{a.title}</div>
        {a.person ? (
          <div className="award__person">
            <span className="award__pname">{a.person}</span>
            <span className="award__pteam"><window.Badge team={team} size={22} /> {team.short}</span>
          </div>
        ) : (
          <div className="award__team">
            <window.Badge team={team} size={a.hero ? 40 : 30} />
            <span className="award__tname">{team.name}</span>
          </div>
        )}
        {a.note && <div className="award__note">{a.note}</div>}
      </div>
      <div className={"award__prize" + (a.hero ? " award__prize--hero" : "")}>{a.prize}</div>
    </div>
  );
}

function AwardsSection() {
  const T = window.TOURNAMENT;
  const hero = T.AWARDS.find((a) => a.hero);
  const rest = T.AWARDS.filter((a) => !a.hero);
  return (
    <section className="block">
      <div className="block__head">
        <h2 className="block__title">Awards &amp; Prizes</h2>
        <span className="block__sub">The honours from finals night</span>
      </div>
      <div className="awards">
        <AwardCard a={hero} />
        <div className="awards__grid">
          {rest.map((a) => <AwardCard key={a.id} a={a} />)}
        </div>
      </div>
    </section>
  );
}

// ---- Filter bar ----------------------------------------------------------
function Seg({ options, value, onChange }) {
  return (
    <div className="seg">
      {options.map((o) => (
        <button key={o.v} className={"seg__btn" + (value === o.v ? " seg__btn--on" : "")} onClick={() => onChange(o.v)}>
          {o.label}
        </button>
      ))}
    </div>
  );
}

// ---- Match list helpers --------------------------------------------------
function MatchList({ matches, expanded, onToggle, onTeam }) {
  return (
    <div className="mlist">
      {matches.map((m) => (
        <window.MatchRow key={m.no} m={m} expanded={expanded === m.no} onToggle={onToggle} onTeam={onTeam} />
      ))}
    </div>
  );
}

// ---- App -----------------------------------------------------------------
function App() {
  const T = window.TOURNAMENT;
  const [stage, setStage] = useS("all");      // all | group | ko
  const [grp, setGrp] = useS("all");          // all | A | B
  const [teamFilter, setTeamFilter] = useS("all");
  const [expanded, setExpanded] = useS(null);
  const [panel, setPanel] = useS(null);

  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const onToggle = (no) => setExpanded((e) => (e === no ? null : no));
  const openTeam = (id) => setPanel(id);

  // apply tweaks to CSS variables
  useE(() => {
    const r = document.documentElement;
    const acc = Array.isArray(t.accent) ? t.accent : [t.accent, "oklch(0.21 0.03 80)"];
    r.style.setProperty("--accent", acc[0]);
    r.style.setProperty("--accent-ink", acc[1]);
    r.style.setProperty("--row-gap", t.density === "compact" ? "5px" : "8px");
    r.dataset.numbers = t.showNumbers ? "on" : "off";
  }, [t.accent, t.density, t.showNumbers]);

  useE(() => {
    const onKey = (e) => { if (e.key === "Escape") setPanel(null); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  // filtering
  let matches = T.MATCHES.slice();
  if (teamFilter !== "all") matches = matches.filter((m) => m.home === teamFilter || m.away === teamFilter);
  const groupMatches = matches.filter((m) => m.stage === "group" && (grp === "all" || m.group === grp));
  const koMatches = matches.filter((m) => m.stage !== "group");

  const showGroup = stage === "all" || stage === "group";
  const showKo = stage === "all" || stage === "ko";
  const usingTeam = teamFilter !== "all";

  const groupA = groupMatches.filter((m) => m.group === "A");
  const groupB = groupMatches.filter((m) => m.group === "B");

  return (
    <div className="wrap">
      {/* ---------------- Header ---------------- */}
      <header className="hero">
        <div className="hero__top">
          <span className="hero__kicker">Indoor Football · 4 v 4</span>
          <span className="hero__format">{T.META.format}</span>
        </div>
        <h1 className="hero__title">{T.META.title}</h1>
        <div className="hero__sub">{T.META.subtitle} — <span>{T.META.resultsLabel}</span></div>

        <div className="champbanner" onClick={() => openTeam("pppk")}>
          <window.Medal size={40} />
          <div className="champbanner__txt">
            <span className="champbanner__label">Tournament Champions</span>
            <span className="champbanner__team">{T.TEAMS["pppk"].name}</span>
          </div>
          <span className="champbanner__cta">View team →</span>
        </div>

        <div className="statstrip">
          <div className="stat"><b>{T.META.teamsCount}</b><span>Teams</span></div>
          <div className="stat"><b>{T.META.matchesCount}</b><span>Matches</span></div>
          <div className="stat"><b>2</b><span>Groups</span></div>
          <div className="stat"><b>4</b><span>Knockouts</span></div>
        </div>
      </header>

      {/* ---------------- Filters ---------------- */}
      <div className="filters">
        <div className="filters__inner">
          <Seg options={[{v:"all",label:"All"},{v:"group",label:"Group Stage"},{v:"ko",label:"Knockouts"}]} value={stage} onChange={setStage} />
          <div className={"grpchips" + (stage === "ko" ? " grpchips--off" : "")}>
            <span className="grpchips__lbl">Group</span>
            <Seg options={[{v:"all",label:"All"},{v:"A",label:"A"},{v:"B",label:"B"}]} value={grp} onChange={setGrp} />
          </div>
          <div className="teamsel">
            <select value={teamFilter} onChange={(e) => setTeamFilter(e.target.value)}>
              <option value="all">All teams</option>
              {Object.values(T.TEAMS).map((t) => <option key={t.id} value={t.id}>{t.name}</option>)}
            </select>
          </div>
          {(stage !== "all" || grp !== "all" || teamFilter !== "all") && (
            <button className="resetbtn" onClick={() => { setStage("all"); setGrp("all"); setTeamFilter("all"); }}>Reset</button>
          )}
        </div>
      </div>

      {/* ---------------- Content ---------------- */}
      <main className="content">
        {usingTeam ? (
          <section className="block">
            <div className="block__head">
              <h2 className="block__title">{T.TEAMS[teamFilter].name}</h2>
              <button className="block__link" onClick={() => openTeam(teamFilter)}>Full team profile →</button>
            </div>
            <MatchList matches={matches} expanded={expanded} onToggle={onToggle} onTeam={openTeam} />
          </section>
        ) : (
          <React.Fragment>
            {showGroup && groupMatches.length > 0 && (
              <section className="block">
                <div className="block__head">
                  <h2 className="block__title">Group Stage</h2>
                  <span className="block__sub">Round robin · 3 pts win · 2 pts penalty win · 1 pt penalty loss</span>
                </div>
                {grp === "all" ? (
                  <React.Fragment>
                    <GroupHead letter="A" teams={["btwf","uufc","fcpc","tefc"]} onTeam={openTeam} />
                    <MatchList matches={groupA} expanded={expanded} onToggle={onToggle} onTeam={openTeam} />
                    <GroupHead letter="B" teams={["vik","pppk","unar","dboy"]} onTeam={openTeam} />
                    <MatchList matches={groupB} expanded={expanded} onToggle={onToggle} onTeam={openTeam} />
                  </React.Fragment>
                ) : (
                  <MatchList matches={groupMatches} expanded={expanded} onToggle={onToggle} onTeam={openTeam} />
                )}
              </section>
            )}

            {showKo && (
              <section className="block">
                <div className="block__head">
                  <h2 className="block__title">Knockout Stage</h2>
                  <span className="block__sub">Two semis, a third-place play-off and the grand final</span>
                </div>
                <window.Bracket onTeam={openTeam} />
                <div className="ko-list-label">Knockout results</div>
                <MatchList matches={koMatches} expanded={expanded} onToggle={onToggle} onTeam={openTeam} />
              </section>
            )}
          </React.Fragment>
        )}

        {!usingTeam && <window.Highlights />}

        <AwardsSection />

        <section className="cta">
          <div className="cta__txt">
            <h2 className="cta__title">Play at Paradise PlayPark</h2>
            <p className="cta__sub">Book the arena for your own 4-v-4 — and catch the action live.</p>
          </div>
          <div className="cta__actions">
            <a className="btn btn--primary" href="https://paradiseplayparkarena.com/" target="_blank" rel="noopener noreferrer">
              Book Us Now
              <svg viewBox="0 0 16 16" width="15" height="15"><path d="M5 3h8v8M13 3L4 12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </a>
            <a className="btn btn--twitch" href="https://www.twitch.tv/paradise_play_park" target="_blank" rel="noopener noreferrer">
              <span className="btn__live" aria-hidden="true"></span>
              Follow on Twitch
            </a>
          </div>
        </section>

        <footer className="foot">
          <span>{T.META.title} · {T.META.subtitle}</span>
          <span className="foot__links">
            <a href="https://paradiseplayparkarena.com/" target="_blank" rel="noopener noreferrer">Book Us</a>
            <a href="https://www.twitch.tv/paradise_play_park" target="_blank" rel="noopener noreferrer">Twitch</a>
          </span>
        </footer>
      </main>

      {panel && <window.TeamPanel teamId={panel} onClose={() => setPanel(null)} onTeam={openTeam} />}

      <window.TweaksPanel>
        <window.TweakSection label="Look" />
        <window.TweakColor label="Accent" value={t.accent}
          options={[
            ["#F5C518", "oklch(0.21 0.03 80)"],
            ["oklch(0.88 0.185 128)", "oklch(0.24 0.06 128)"],
            ["oklch(0.85 0.13 200)", "oklch(0.22 0.04 230)"],
            ["oklch(0.80 0.17 350)", "oklch(0.22 0.05 350)"],
          ]}
          onChange={(v) => setTweak("accent", v)} />
        <window.TweakRadio label="Density" value={t.density}
          options={["compact", "regular"]}
          onChange={(v) => setTweak("density", v)} />
        <window.TweakToggle label="Match numbers" value={t.showNumbers}
          onChange={(v) => setTweak("showNumbers", v)} />
      </window.TweaksPanel>
    </div>
  );
}

function GroupHead({ letter, teams, onTeam }) {
  const T = window.TOURNAMENT;
  return (
    <div className="ghead">
      <span className="ghead__badge">Group {letter}</span>
      <div className="ghead__teams">
        {teams.map((id) => (
          <button key={id} className="ghead__team" onClick={() => onTeam(id)}>
            <window.Badge team={T.TEAMS[id]} size={26} /> <span>{T.TEAMS[id].short}</span>
          </button>
        ))}
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);