script.js

const ESPN_URL =
  "https://site.api.espn.com/apis/site/v2/sports/soccer/fifa.world/scoreboard?dates=20260611-20260719&limit=200";

const REFRESH_MS = 30000;

const groups = {
  A: ["Mexico", "South Africa", "South Korea", "Czechia"],
  B: ["Canada", "Bosnia and Herzegovina", "Qatar", "Switzerland"],
  C: ["Brazil", "Morocco", "Haiti", "Scotland"],
  D: ["United States", "Paraguay", "Australia", "Turkey"],
  E: ["Germany", "Curacao", "Ivory Coast", "Ecuador"],
  F: ["Netherlands", "Japan", "Sweden", "Tunisia"],
  G: ["Belgium", "Egypt", "Iran", "New Zealand"],
  H: ["Spain", "Cape Verde", "Saudi Arabia", "Uruguay"],
  I: ["France", "Senegal", "Iraq", "Norway"],
  J: ["Argentina", "Algeria", "Austria", "Jordan"],
  K: ["Portugal", "DR Congo", "Uzbekistan", "Colombia"],
  L: ["England", "Croatia", "Ghana", "Panama"]
};

const flagCodes = {
  "Mexico":"mx","South Africa":"za","South Korea":"kr","Korea Republic":"kr","Czechia":"cz",
  "Canada":"ca","Bosnia and Herzegovina":"ba","Qatar":"qa","Switzerland":"ch",
  "Brazil":"br","Morocco":"ma","Haiti":"ht","Scotland":"gb-sct",
  "United States":"us","USA":"us","Paraguay":"py","Australia":"au","Turkey":"tr",
  "Germany":"de","Curacao":"cw","Ivory Coast":"ci","Ecuador":"ec",
  "Netherlands":"nl","Japan":"jp","Sweden":"se","Tunisia":"tn",
  "Belgium":"be","Egypt":"eg","Iran":"ir","New Zealand":"nz",
  "Spain":"es","Cape Verde":"cv","Saudi Arabia":"sa","Uruguay":"uy",
  "France":"fr","Senegal":"sn","Iraq":"iq","Norway":"no",
  "Argentina":"ar","Algeria":"dz","Austria":"at","Jordan":"jo",
  "Portugal":"pt","DR Congo":"cd","Congo DR":"cd","Uzbekistan":"uz","Colombia":"co",
  "England":"gb-eng","Croatia":"hr","Ghana":"gh","Panama":"pa",
  "TBD": null
};

const fallbackMatches = [
  ["Round of 32","2026-06-28T19:00:00Z","South Africa","Canada",0,1,"Final","Los Angeles"],
  ["Round of 32","2026-06-29T17:00:00Z","Brazil","Japan",2,1,"Final","Houston"],
  ["Round of 32","2026-06-29T20:30:00Z","Germany","Paraguay",1,1,"Final","Boston","3–4 pens"],
  ["Round of 32","2026-06-30T01:00:00Z","Netherlands","Morocco",1,1,"Final","Monterrey","2–3 pens"],
  ["Round of 32","2026-06-30T17:00:00Z","Ivory Coast","Norway",1,2,"Final","Philadelphia"],
  ["Round of 32","2026-06-30T21:00:00Z","France","Sweden",3,0,"Final","New York / New Jersey"],
  ["Round of 32","2026-07-01T02:00:00Z","Mexico","Ecuador",2,0,"Final","Mexico City"],
  ["Round of 32","2026-07-01T16:00:00Z","England","DR Congo",2,1,"Final","Atlanta"],
  ["Round of 32","2026-07-01T20:00:00Z","Belgium","Senegal",3,2,"Final","Seattle"],
  ["Round of 32","2026-07-02T00:00:00Z","United States","Bosnia and Herzegovina",2,0,"Final","San Francisco"],
  ["Round of 32","2026-07-02T19:00:00Z","Spain","Austria",3,0,"Final","Dallas"],
  ["Round of 32","2026-07-02T23:00:00Z","Portugal","Croatia",2,1,"Final","Miami"],
  ["Round of 32","2026-07-03T03:00:00Z","Switzerland","Algeria",2,0,"Final","Vancouver"],
  ["Round of 32","2026-07-03T18:00:00Z","Australia","Egypt",1,1,"Final","Toronto","2–4 pens"],
  ["Round of 32","2026-07-03T22:00:00Z","Argentina","Cape Verde",3,2,"Final","Kansas City"],
  ["Round of 32","2026-07-04T01:30:00Z","Colombia","Ghana",1,0,"Final","Los Angeles"],
  ["Round of 16","2026-07-04T17:00:00Z","Canada","Morocco",0,3,"Final","Philadelphia"],
  ["Round of 16","2026-07-04T21:00:00Z","Paraguay","France",0,1,"Final","Houston"],
  ["Round of 16","2026-07-05T20:00:00Z","Brazil","Norway",1,2,"Final","New York / New Jersey"],
  ["Round of 16","2026-07-06T01:00:00Z","Mexico","England",2,3,"Final","Mexico City"],
  ["Round of 16","2026-07-06T19:00:00Z","Portugal","Spain",0,1,"Final","Dallas"],
  ["Round of 16","2026-07-07T00:00:00Z","United States","Belgium",1,4,"Final","Seattle"],
  ["Round of 16","2026-07-07T16:00:00Z","Argentina","Egypt",3,2,"Final","Atlanta"],
  ["Round of 16","2026-07-07T20:00:00Z","Switzerland","Colombia",0,0,"Final","Kansas City","4–3 pens"],
  ["Quarterfinal","2026-07-09T20:00:00Z","France","Morocco",2,0,"Final","Boston"],
  ["Quarterfinal","2026-07-10T19:00:00Z","Spain","Belgium",1,1,"In Progress","Los Angeles"],
  ["Quarterfinal","2026-07-11T21:00:00Z","Norway","England",null,null,"Scheduled","Miami"],
  ["Quarterfinal","2026-07-12T01:00:00Z","Argentina","Switzerland",null,null,"Scheduled","Kansas City"],
  ["Semifinal","2026-07-14T19:00:00Z","France","TBD",null,null,"Scheduled","Dallas"],
  ["Semifinal","2026-07-15T19:00:00Z","TBD","TBD",null,null,"Scheduled","Atlanta"],
  ["3rd Place","2026-07-18T21:00:00Z","TBD","TBD",null,null,"Scheduled","Miami"],
  ["Final","2026-07-19T19:00:00Z","TBD","TBD",null,null,"Scheduled","New York / New Jersey"]
].map((m, i) => ({
  id: `fallback-${i}`,
  stage: m[0], date: m[1], home: m[2], away: m[3],
  homeScore: m[4], awayScore: m[5], status: m[6], venue: m[7], detail: m[8] || ""
}));

let matches = [];
let standings = {};
let hidePrevious = false;
let currentGroup = "all";

const $ = (s, p=document) => p.querySelector(s);
const $$ = (s, p=document) => [...p.querySelectorAll(s)];

function normaliseStage(value="") {
  const s = value.toLowerCase();
  if (s.includes("group")) return "Group Stage";
  if (s.includes("round of 32")) return "Round of 32";
  if (s.includes("round of 16")) return "Round of 16";
  if (s.includes("quarter")) return "Quarterfinal";
  if (s.includes("semi")) return "Semifinal";
  if (s.includes("3rd") || s.includes("third")) return "3rd Place";
  if (s.includes("final")) return "Final";
  return value || "Tournament";
}

function flag(name, className="flag-img") {
  const code = flagCodes[name];
  if (!code) return `<span class="${className}" aria-hidden="true" style="display:inline-grid;place-items:center;background:var(--surface-3)">?</span>`;
  return `<img class="${className}" src="https://flagcdn.com/w80/${code}.png" alt="${name} flag" loading="lazy">`;
}

function parseEspn(payload) {
  const events = payload.events || [];
  return events.map(event => {
    const comp = event.competitions?.[0] || {};
    const competitors = comp.competitors || [];
    const home = competitors.find(c => c.homeAway === "home") || competitors[0] || {};
    const away = competitors.find(c => c.homeAway === "away") || competitors[1] || {};
    const statusType = event.status?.type || comp.status?.type || {};
    const statusName = statusType.description || statusType.name || "Scheduled";
    return {
      id: event.id,
      stage: normaliseStage(event.season?.slug || event.grouping?.name || event.note || event.name || ""),
      date: event.date,
      home: home.team?.displayName || home.team?.name || "TBD",
      away: away.team?.displayName || away.team?.name || "TBD",
      homeScore: home.score === undefined ? null : Number(home.score),
      awayScore: away.score === undefined ? null : Number(away.score),
      status: statusType.completed ? "Final" : statusName,
      clock: event.status?.displayClock || "",
      venue: comp.venue?.fullName || comp.venue?.address?.city || "",
      detail: statusType.detail || event.status?.type?.shortDetail || "",
      completed: Boolean(statusType.completed),
      live: Boolean(statusType.state === "in")
    };
  }).sort((a,b) => new Date(a.date) - new Date(b.date));
}

function makeFallbackStandings() {
  const known = {
    A: [
      ["Mexico",3,3,0,0,6,9],["South Africa",3,1,1,1,-1,4],["South Korea",3,1,0,2,-1,3],["Czechia",3,0,1,2,-4,1]
    ],
    B: [
      ["Switzerland",3,2,1,0,4,7],["Canada",3,1,1,1,5,4],["Bosnia and Herzegovina",3,1,0,2,-2,3],["Qatar",3,0,2,1,-7,2]
    ]
  };
  const result = {};
  Object.entries(groups).forEach(([letter, teams]) => {
    result[letter] = (known[letter] || teams.map(name => [name,0,0,0,0,0,0])).map(row => ({
      name: row[0], played: row[1], wins: row[2], draws: row[3],
      losses: row[4], gd: row[5], points: row[6]
    }));
  });
  return result;
}

function deriveStandingsFromMatches() {
  const result = makeFallbackStandings();
  const groupMatches = matches.filter(m => m.stage === "Group Stage" && (m.completed || m.status === "Final"));
  if (!groupMatches.length) return result;

  Object.entries(groups).forEach(([letter, teams]) => {
    const table = Object.fromEntries(teams.map(name => [name, {name,played:0,wins:0,draws:0,losses:0,gf:0,ga:0,gd:0,points:0}]));
    groupMatches.forEach(m => {
      if (!table[m.home] || !table[m.away] || m.homeScore == null || m.awayScore == null) return;
      const h = table[m.home], a = table[m.away];
      h.played++; a.played++;
      h.gf += m.homeScore; h.ga += m.awayScore;
      a.gf += m.awayScore; a.ga += m.homeScore;
      if (m.homeScore > m.awayScore) { h.wins++; h.points += 3; a.losses++; }
      else if (m.homeScore < m.awayScore) { a.wins++; a.points += 3; h.losses++; }
      else { h.draws++; a.draws++; h.points++; a.points++; }
    });
    result[letter] = Object.values(table).map(t => ({...t, gd:t.gf-t.ga}))
      .sort((a,b) => b.points-a.points || b.gd-a.gd || b.gf-a.gf || a.name.localeCompare(b.name));
  });
  return result;
}

function isLive(m) {
  return m.live || /in progress|half|extra time|penalties|live/i.test(m.status);
}
function isPast(m) {
  return m.completed || m.status === "Final" || (!isLive(m) && new Date(m.date) < new Date());
}
function scoreText(m) {
  if (m.homeScore == null || m.awayScore == null) return "vs";
  return `${m.homeScore}–${m.awayScore}`;
}
function localDate(date, opts={}) {
  return new Intl.DateTimeFormat(undefined, opts).format(new Date(date));
}

function featured() {
  return matches.find(isLive) ||
    matches.find(m => !isPast(m)) ||
    [...matches].reverse().find(isPast);
}

function renderFeatured() {
  const m = featured();
  if (!m) return;
  const live = isLive(m);
  $("#featuredMatch").innerHTML = `
    <div class="feature-head">
      <div>
        <span class="eyebrow">${m.stage}</span>
        <h2>${m.home} vs ${m.away}</h2>
      </div>
      ${live ? `<span class="live-badge">${m.clock || "Live"}</span>` : `<span class="muted">${m.status}</span>`}
    </div>
    <div class="feature-teams">
      <div class="feature-team">${flag(m.home)}<span>${m.home}</span></div>
      <div class="score-centre">
        <strong class="big-score">${scoreText(m)}</strong>
        <span class="match-clock">${live ? (m.clock || m.detail || "Live") : localDate(m.date,{weekday:"short",hour:"numeric",minute:"2-digit"})}</span>
      </div>
      <div class="feature-team"><span>${m.away}</span>${flag(m.away)}</div>
    </div>
    <div class="meta-row"><span>📍 ${m.venue || "Venue TBC"}</span><span>${m.detail || m.status}</span></div>`;

  $("#heroMatch").innerHTML = `
    ${live ? `<span class="live-badge">${m.clock || "Live now"}</span>` : `<span>${m.stage}</span>`}
    <div class="hero-score">
      <strong>${m.home} ${scoreText(m)} ${m.away}</strong>
    </div>
    <small>${localDate(m.date,{weekday:"long",hour:"numeric",minute:"2-digit"})} · ${m.venue || "Venue TBC"}</small>`;
}

function renderStats() {
  const completed = matches.filter(isPast).length;
  const live = matches.filter(isLive).length;
  const goals = matches.reduce((sum,m) => sum + (Number.isFinite(m.homeScore)?m.homeScore:0) + (Number.isFinite(m.awayScore)?m.awayScore:0), 0);
  const upcoming = matches.filter(m => !isPast(m) && !isLive(m)).length;
  $("#statsGrid").innerHTML = [
    [completed,"Matches completed"],[live,"Live now"],[goals,"Goals recorded"],[upcoming,"Matches remaining"]
  ].map(([n,label]) => `<div class="stat-card"><strong>${n}</strong><span>${label}</span></div>`).join("");
}

function fixtureCard(m) {
  return `<article class="fixture-card">
    <small><span>${m.stage}</span><span>${isLive(m) ? "LIVE" : localDate(m.date,{weekday:"short",month:"short",day:"numeric"})}</span></small>
    <div class="fixture-team"><span class="team-label">${flag(m.home)}<span>${m.home}</span></span><strong>${m.homeScore ?? ""}</strong></div>
    <div class="fixture-team"><span class="team-label">${flag(m.away)}<span>${m.away}</span></span><strong>${m.awayScore ?? ""}</strong></div>
  </article>`;
}

function renderOverviewRound() {
  const priority = ["Quarterfinal","Semifinal","Final","Round of 16","Round of 32","Group Stage"];
  const current = priority.find(stage => matches.some(m => m.stage === stage && (!isPast(m) || isLive(m)))) ||
    priority.find(stage => matches.some(m => m.stage === stage));
  $("#roundCards").innerHTML = matches.filter(m => m.stage === current).slice(0,8).map(fixtureCard).join("");
}

function renderBracket() {
  const stageOrder = ["Round of 32","Round of 16","Quarterfinal","Semifinal","3rd Place","Final"];
  $("#bracketWrap").innerHTML = stageOrder.map(stage => {
    const stageMatches = matches.filter(m => m.stage === stage);
    if (!stageMatches.length) return "";
    return `<section class="round-column" data-round="${stage}">
      <div class="round-title">${stage}</div>
      <div class="round-stack">${stageMatches.map(m => `
        <article class="bracket-match ${isLive(m)?"live":""}">
          <div class="fixture-team"><span class="team-label">${flag(m.home)}<span>${m.home}</span></span><strong>${m.homeScore ?? ""}</strong></div>
          <div class="fixture-team"><span class="team-label">${flag(m.away)}<span>${m.away}</span></span><strong>${m.awayScore ?? ""}</strong></div>
          <div class="match-note">${isLive(m)?`LIVE · ${m.clock || m.detail}`:localDate(m.date,{weekday:"short",month:"short",day:"numeric",hour:"numeric",minute:"2-digit"})} · ${m.venue || "TBC"}</div>
        </article>`).join("")}</div>
    </section>`;
  }).join("");
}

function renderMatches() {
  const stage = $("#matchFilter").value;
  const filtered = matches.filter(m =>
    (stage === "all" || m.stage === stage) &&
    (!hidePrevious || !isPast(m) || isLive(m))
  );

  let previousDate = "";
  $("#matchesList").innerHTML = filtered.map(m => {
    const dateKey = localDate(m.date,{weekday:"long",month:"long",day:"numeric"});
    const heading = dateKey !== previousDate ? `<div class="date-heading">${dateKey}</div>` : "";
    previousDate = dateKey;
    return `${heading}<article class="match-row ${isLive(m)?"live":""}" data-round="${m.stage}">
      <div class="match-date">${m.stage}<br>${isLive(m)?`LIVE · ${m.clock || m.detail}`:localDate(m.date,{hour:"numeric",minute:"2-digit"})}</div>
      <div class="match-versus">
        <span class="team-label">${flag(m.home)}<span>${m.home}</span></span>
        <strong class="score-box">${scoreText(m)}</strong>
        <span class="team-label away"><span>${m.away}</span>${flag(m.away)}</span>
      </div>
      <div class="match-location">📍 ${m.venue || "Venue TBC"}<br>${m.detail || m.status}</div>
    </article>`;
  }).join("");
  $("#emptyMatches").hidden = filtered.length > 0;
}

function renderGroups() {
  $("#groupTabs").innerHTML = `<button class="group-tab ${currentGroup==="all"?"is-active":""}" data-group="all">All</button>` +
    Object.keys(groups).map(letter => `<button class="group-tab ${currentGroup===letter?"is-active":""}" data-group="${letter}">${letter}</button>`).join("");

  $("#groupTables").innerHTML = Object.entries(standings).map(([letter, teams]) => `
    <article class="group-card ${currentGroup!=="all"&&currentGroup!==letter?"hidden-group":""}">
      <div class="group-title">Group ${letter}</div>
      <table class="standings">
        <thead><tr><th>Team</th><th>P</th><th>W</th><th>D</th><th>L</th><th>GD</th><th>Pts</th></tr></thead>
        <tbody>${teams.map((t,i) => `<tr class="${i<2?"qualified":""}">
          <td><span class="team-cell">${flag(t.name)}<span>${t.name}</span></span></td>
          <td>${t.played}</td><td>${t.wins}</td><td>${t.draws}</td><td>${t.losses}</td>
          <td>${t.gd>0?"+":""}${t.gd}</td><td><strong>${t.points}</strong></td>
        </tr>`).join("")}</tbody>
      </table>
    </article>`).join("");

  $$(".group-tab").forEach(btn => btn.onclick = () => {
    currentGroup = btn.dataset.group;
    renderGroups();
  });
}

function renderAll() {
  standings = deriveStandingsFromMatches();
  renderFeatured();
  renderStats();
  renderOverviewRound();
  renderBracket();
  renderMatches();
  renderGroups();
}

function setSync(state,text) {
  const pill = $("#syncPill");
  pill.className = `sync-pill ${state}`;
  $("#syncText").textContent = text;
}

async function loadScores(manual=false) {
  if (manual) $("#refreshButton").textContent = "…";
  setSync("", "Refreshing…");
  try {
    const response = await fetch(ESPN_URL, {cache:"no-store"});
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    const payload = await response.json();
    const parsed = parseEspn(payload);
    if (!parsed.length) throw new Error("No events returned");
    matches = parsed;
    const liveCount = matches.filter(isLive).length;
    setSync(liveCount ? "live" : "good", liveCount ? `${liveCount} live` : "Live feed connected");
  } catch (error) {
    console.warn("Live feed unavailable; using bundled fallback data.", error);
    if (!matches.length) matches = fallbackMatches;
    setSync("error", "Fallback data");
  } finally {
    $("#refreshButton").textContent = "↻";
    $("#lastUpdated").textContent = `Updated ${new Date().toLocaleTimeString([], {hour:"2-digit",minute:"2-digit",second:"2-digit"})}`;
    renderAll();
  }
}

function openView(name) {
  $$(".tab").forEach(tab => tab.classList.toggle("is-active", tab.dataset.view === name));
  $$(".view").forEach(view => view.classList.toggle("is-active", view.id === name));
  window.scrollTo({top:0,behavior:"smooth"});
}

$$(".tab").forEach(tab => tab.addEventListener("click", () => openView(tab.dataset.view)));
$$("[data-jump]").forEach(btn => btn.addEventListener("click", () => openView(btn.dataset.jump)));
$("#themeToggle").onclick = () => {
  document.body.classList.toggle("dark");
  localStorage.setItem("wc-theme", document.body.classList.contains("dark") ? "dark" : "light");
};
$("#refreshButton").onclick = () => loadScores(true);
$("#matchFilter").onchange = renderMatches;
$("#previousToggle").onclick = () => {
  hidePrevious = !hidePrevious;
  $("#previousToggle").setAttribute("aria-pressed", String(hidePrevious));
  $("#previousToggle").textContent = hidePrevious ? "Show previous games" : "Hide previous games";
  renderMatches();
};
$("#bracketFilters").onclick = event => {
  const btn = event.target.closest("[data-stage]");
  if (!btn) return;
  $$("[data-stage]", $("#bracketFilters")).forEach(b => b.classList.toggle("is-active", b === btn));
  const stage = btn.dataset.stage;
  $$(".round-column", $("#bracketWrap")).forEach(col => {
    col.hidden = stage !== "all" && col.dataset.round !== stage;
  });
};

if (localStorage.getItem("wc-theme") === "dark") document.body.classList.add("dark");

matches = fallbackMatches;
standings = makeFallbackStandings();
renderAll();
loadScores();
setInterval(loadScores, REFRESH_MS);