Skip to content

My Teams

Your favorited teams across AFL and Football

viewof signedIn = {
  const e = document.createElement("div")
  e.value = !!(window.auth && window.auth.isSignedIn())

  function update() {
    const next = !!(window.auth && window.auth.isSignedIn())
    if (e.value !== next) {
      e.value = next
      e.dispatchEvent(new Event("input", { bubbles: true }))
    }
  }

  if (window.auth && window.auth.onChange) {
    window.auth.onChange(update)
  } else {
    let tries = 0
    const iv = setInterval(() => {
      if (window.auth && window.auth.onChange) {
        clearInterval(iv)
        window.auth.onChange(update)
        update()
      } else if (++tries > 100) {
        clearInterval(iv)
      }
    }, 100)
  }
  return e
}

// Bumping this re-triggers the data fetch (used after a remove)
mutable refreshKey = 0

myData = {
  refreshKey
  if (!signedIn) return null
  return await window.auth.getMe()
}

{
  if (!signedIn) {
    const wrap = html`<div style="text-align:center;padding:3rem 1rem;color:var(--bs-secondary-color)">
      <p style="font-size:1.1rem;margin-bottom:1rem">Sign in to manage your favorite teams.</p>
      <button class="btn btn-primary">Sign in</button>
    </div>`
    wrap.querySelector("button").addEventListener("click", () => window.auth && window.auth.signIn())
    return wrap
  }

  if (myData === undefined) {
    return html`<p style="text-align:center;color:var(--bs-secondary-color);padding:2rem">Loading…</p>`
  }

  const favs = (myData && myData.favorites) || []
  if (favs.length === 0) {
    return html`<p style="text-align:center;color:var(--bs-secondary-color);padding:2rem">
      No favorites yet — visit a team page and click the star button to add one. Try
      <a href="/afl/team-stats.html">AFL Team Stats</a> or
      <a href="/football/team-stats.html">Football Team Stats</a> to find a team.
    </p>`
  }

  const SPORT_LABEL = { afl: "AFL", football: "Football", cricket: "Cricket" }
  const SPORT_PATH  = { afl: "afl/team.html", football: "football/team.html", cricket: "cricket/team.html" }

  const bySport = {}
  for (const f of favs) {
    if (!bySport[f.sport]) bySport[f.sport] = []
    bySport[f.sport].push(f)
  }

  const sections = Object.keys(bySport).sort().map(sport => {
    const items = bySport[sport].map(f => html`
      <li style="display:flex;justify-content:space-between;align-items:center;padding:0.6rem 0;border-bottom:1px solid var(--bs-border-color)">
        <a href="/${SPORT_PATH[sport]}#team=${encodeURIComponent(f.team_id)}" style="font-weight:500;text-decoration:none">${f.team_id}</a>
        <button class="btn btn-sm btn-outline-secondary my-teams-remove" data-sport=${sport} data-team=${f.team_id}>Remove</button>
      </li>`)
    return html`<section style="margin:1.75rem 0">
      <h2 style="font-size:1.1rem;margin-bottom:0.5rem;color:var(--bs-secondary-color);text-transform:uppercase;letter-spacing:0.05em">${SPORT_LABEL[sport] || sport}</h2>
      <ul style="list-style:none;padding:0;margin:0">${items}</ul>
    </section>`
  })

  const container = html`<div style="max-width:640px;margin:1rem auto">${sections}</div>`
  container.querySelectorAll(".my-teams-remove").forEach(btn => {
    btn.addEventListener("click", async () => {
      btn.disabled = true
      btn.textContent = "Removing…"
      try {
        await window.auth.removeFavorite(btn.dataset.sport, btn.dataset.team)
        mutable refreshKey = refreshKey + 1
      } catch (e) {
        console.error("[my-teams] remove failed:", e)
        btn.disabled = false
        btn.textContent = "Remove"
      }
    })
  })
  return container
}