import { useEffect, useMemo, useRef, useState } from 'react'
import Tree from '../Tree/Tree'
import FallingLeaves from '../Tree/FallingLeaves'

const numberFormat = new Intl.NumberFormat('en-GB')
const dateFormat = new Intl.DateTimeFormat('en-GB', {
  dateStyle: 'medium',
  timeStyle: 'short',
})

const apiEndpoints = {
  health: '/health',
  uptime: '/api/uptime',
  viewers: '/api/viewers',
  viewerEvent: '/api/viewers/event',
  viewerDelete: '/api/viewers/delete',
  teams: '/api/tss/leaderboard/teams?limit=100',
  teamsHealth: '/api/tss/leaderboard/teams?limit=1',
  resolve: (name) => `/api/tss/teams/resolve?name=${encodeURIComponent(name)}`,
  detail: (name) => `/api/tss/teams/${encodeURIComponent(name)}`,
  history: (name) => `/api/tss/teams/${encodeURIComponent(name)}/history`,
  games: (name) => `/api/tss/teams/${encodeURIComponent(name)}/games`,
}

const navItems = [
  { path: '/', label: 'Home' },
  { path: '/teams', label: 'Team leaderboard' },
  { path: '/battle-logs', label: 'Battle Logs' },
  { path: '/viewers', label: 'Viewers' },
]

const analyticsConsentKey = 'tssbot.analyticsConsent'
const analyticsPreferencesKey = 'tssbot.analyticsPreferences'
const analyticsPreferencesCookie = 'tssbot_analytics_preferences'
const analyticsVisitorKey = 'tssbot.analyticsVisitor'
const analyticsConsentVersion = 2

const defaultAnalyticsPreferences = {
  chosen: false,
  analytics: false,
  device: false,
  display: false,
  locale: false,
  referrer: false,
  version: analyticsConsentVersion,
}

async function fetchJson(path, signal) {
  const response = await fetch(path, {
    signal,
    headers: { Accept: 'application/json' },
  })
  const body = await response.json().catch(() => null)

  if (!response.ok) {
    throw new Error(body?.error || `Request failed with ${response.status}`)
  }

  return body
}

function parseRoute(pathname = window.location.pathname) {
  if (pathname === '/') return { page: 'home', teamName: '' }
  if (pathname === '/teams') return { page: 'teams', teamName: '' }
  if (pathname === '/uptime') return { page: 'uptime', teamName: '' }
  if (pathname === '/viewers') return { page: 'viewers', teamName: '' }
  if (pathname === '/privacy') return { page: 'privacy', teamName: '' }
  if (pathname.startsWith('/teams/')) {
    const teamName = decodeURIComponent(pathname.slice('/teams/'.length))
    return { page: 'team', teamName }
  }
  if (pathname === '/battle-logs' || pathname === '/live') return { page: 'battle-logs', teamName: '' }
  return { page: 'home', teamName: '' }
}

function teamPath(name) {
  return `/teams/${encodeURIComponent(name)}`
}

function formatNumber(value) {
  return numberFormat.format(Number(value || 0))
}

function formatDate(timestamp) {
  if (!timestamp) return 'Unknown time'
  return dateFormat.format(new Date(Number(timestamp) * 1000))
}

function bestTeamName(team) {
  return team?.tag_name || team?.short_name || team?.long_name || ''
}

function normalizeAnalyticsPreferences(value) {
  if (!value || typeof value !== 'object') return { ...defaultAnalyticsPreferences }

  return {
    chosen: Boolean(value.chosen) && value.version === analyticsConsentVersion,
    analytics: Boolean(value.analytics),
    device: Boolean(value.device),
    display: Boolean(value.display),
    locale: Boolean(value.locale),
    referrer: Boolean(value.referrer),
    version: analyticsConsentVersion,
  }
}

function browserPrivacySignalEnabled() {
  return Boolean(
    navigator.globalPrivacyControl ||
      navigator.doNotTrack === '1' ||
      window.doNotTrack === '1',
  )
}

function readCookie(name) {
  try {
    const match = document.cookie
      .split('; ')
      .find((item) => item.startsWith(`${encodeURIComponent(name)}=`))
    return match ? decodeURIComponent(match.split('=').slice(1).join('=')) : ''
  } catch {
    return ''
  }
}

function writeCookie(name, value) {
  try {
    const sixMonths = 60 * 60 * 24 * 180
    document.cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}; Max-Age=${sixMonths}; Path=/; SameSite=Lax`
  } catch {
    // Some browsers block cookies; local storage and in-memory state still work.
  }
}

function storedAnalyticsPreferences() {
  const cookieValue = readCookie(analyticsPreferencesCookie)
  if (cookieValue) {
    try {
      return normalizeAnalyticsPreferences(JSON.parse(cookieValue))
    } catch {
      // Fall back through the older storage formats below.
    }
  }

  try {
    const stored = window.localStorage.getItem(analyticsPreferencesKey)
    if (stored) return normalizeAnalyticsPreferences(JSON.parse(stored))
  } catch {
    // Fall back through the older consent flag below.
  }

  try {
    const legacyConsent = window.localStorage.getItem(analyticsConsentKey) || ''
    if (legacyConsent === 'analytics') {
      return {
        ...defaultAnalyticsPreferences,
        chosen: true,
        analytics: true,
        device: true,
        display: true,
        locale: true,
        referrer: true,
      }
    }
    if (legacyConsent === 'declined') {
      return { ...defaultAnalyticsPreferences, chosen: true, analytics: false }
    }
  } catch {
    // Use the default prompt state.
  }

  return { ...defaultAnalyticsPreferences }
}

function persistAnalyticsPreferences(preferences) {
  const normalized = normalizeAnalyticsPreferences(preferences)
  const serialized = JSON.stringify(normalized)

  writeCookie(analyticsPreferencesCookie, serialized)

  try {
    window.localStorage.setItem(analyticsPreferencesKey, serialized)
    window.localStorage.setItem(
      analyticsConsentKey,
      normalized.analytics ? 'analytics' : 'declined',
    )
  } catch {
    // Local storage can be blocked; the cookie and in-memory choice still apply.
  }

  return normalized
}

function stableId(storageKey) {
  try {
    const existing = window.localStorage.getItem(storageKey)
    if (existing) return existing

    const id =
      window.crypto?.randomUUID?.() ||
      `${Date.now().toString(36)}${Math.random().toString(36).slice(2)}`
    window.localStorage.setItem(storageKey, id)
    return id
  } catch {
    return `${Date.now().toString(36)}${Math.random().toString(36).slice(2)}`
  }
}

function storedVisitorId(storageKey) {
  try {
    return window.localStorage.getItem(storageKey) || ''
  } catch {
    return ''
  }
}

function forgetVisitorId(storageKey) {
  try {
    window.localStorage.removeItem(storageKey)
  } catch {
    // Storage may be unavailable; nothing else to clear locally.
  }
}

const analyticsSessionId =
  window.crypto?.randomUUID?.() ||
  `${Date.now().toString(36)}${Math.random().toString(36).slice(2)}`

function browserName() {
  const ua = navigator.userAgent
  if (ua.includes('Edg/')) return 'Microsoft Edge'
  if (ua.includes('OPR/')) return 'Opera'
  if (ua.includes('Firefox/')) return 'Firefox'
  if (ua.includes('Chrome/') && !ua.includes('Chromium/')) return 'Chrome'
  if (ua.includes('Safari/') && ua.includes('Version/')) return 'Safari'
  return 'Unknown'
}

function operatingSystem() {
  const ua = navigator.userAgent
  if (ua.includes('Windows NT')) return 'Windows'
  if (ua.includes('Android')) return 'Android'
  if (/iPhone|iPad|iPod/.test(ua)) return 'iOS'
  if (ua.includes('Mac OS X')) return 'macOS'
  if (ua.includes('Linux')) return 'Linux'
  return 'Unknown'
}

function deviceType() {
  const ua = navigator.userAgent
  if (/Mobi|Android|iPhone|iPod/.test(ua)) return 'Mobile'
  if (/iPad|Tablet/.test(ua)) return 'Tablet'
  return 'Desktop'
}

function routeLabel(route) {
  if (route.page === 'team' && route.teamName) return `Team: ${route.teamName}`
  if (route.page === 'teams') return 'Team leaderboard'
  if (route.page === 'battle-logs') return 'Battle Logs'
  if (route.page === 'uptime') return 'Uptime'
  if (route.page === 'viewers') return 'viewers'
  if (route.page === 'privacy') return 'Privacy notice'
  return 'Home'
}

async function fetchRecentTssGames(teams, signal) {
  const teamNames = teams.map(bestTeamName).filter(Boolean).slice(0, 12)

  if (!teamNames.length) {
    return { matches: [] }
  }

  const responses = await Promise.allSettled(
    teamNames.map((name) => fetchJson(apiEndpoints.games(name), signal).then((data) => ({ name, data }))),
  )
  const bySession = new Map()

  responses.forEach((result) => {
    if (result.status !== 'fulfilled') return

    const { name, data } = result.value
    ;(data.games || []).forEach((game) => {
      if (!game.session_id) return

      const existing = bySession.get(game.session_id)
      const currentTimestamp = Number(game.timestamp || 0)
      if (existing && Number(existing.timestamp || 0) >= currentTimestamp) return

      bySession.set(game.session_id, {
        ...game,
        team_name: data.tag_name || name,
        long_name: data.long_name || '',
      })
    })
  })

  return {
    matches: Array.from(bySession.values())
      .sort((a, b) => Number(b.timestamp || 0) - Number(a.timestamp || 0))
      .slice(0, 50),
  }
}

function Stat({ label, value }) {
  return (
    <div className="border-l border-border pl-4">
      <p className="text-xs font-semibold uppercase tracking-wide text-text-soft">
        {label}
      </p>
      <p className="mt-1 text-2xl font-semibold text-text">{value}</p>
    </div>
  )
}

function App() {
  const [route, setRoute] = useState(() => parseRoute())
  const [leaderboard, setLeaderboard] = useState({ status: 'idle', data: null, error: null })
  const [live, setLive] = useState({ status: 'idle', data: null, error: null })
  const [uptime, setUptime] = useState({ status: 'idle', checks: [], history: [], updatedAt: null })
  const [viewers, setViewers] = useState({ status: 'idle', data: null, error: null, updatedAt: null })
  const [analyticsPreferences, setAnalyticsPreferences] = useState(() => storedAnalyticsPreferences())
  const [teamQuery, setTeamQuery] = useState('')
  const [searchHint, setSearchHint] = useState({ status: 'idle', name: '' })
  const [profile, setProfile] = useState({
    teamName: '',
    detail: { status: 'idle', data: null, error: null },
    history: { status: 'idle', data: null, error: null },
    games: { status: 'idle', data: null, error: null },
  })
  const teams = useMemo(
    () => leaderboard.data?.teams || leaderboard.data?.squadrons || [],
    [leaderboard.data],
  )
  const matches = live.data?.matches || []

  function navigate(path) {
    window.history.pushState({}, '', path)
    setRoute(parseRoute(path))
  }

  useEffect(() => {
    const onPopState = () => setRoute(parseRoute())
    window.addEventListener('popstate', onPopState)
    return () => window.removeEventListener('popstate', onPopState)
  }, [])

  useEffect(() => {
    const title =
      route.page === 'team' && route.teamName
        ? `${route.teamName} | Toothless' TSS Bot`
        : route.page === 'teams'
          ? "Team leaderboard | Toothless' TSS Bot"
          : route.page === 'battle-logs'
            ? "Battle Logs | Toothless' TSS Bot"
            : route.page === 'uptime'
              ? "Uptime | Toothless' TSS Bot"
              : route.page === 'viewers'
                ? "viewers | Toothless' TSS Bot"
                : route.page === 'privacy'
                  ? "Privacy notice | Toothless' TSS Bot"
            : "Toothless' TSS Bot"

    document.title = title
  }, [route.page, route.teamName])

  useEffect(() => {
    if (!analyticsPreferences.analytics) return

    const visitorId = stableId(analyticsVisitorKey)
    let stopped = false
    const deviceDetails = analyticsPreferences.device
    const displayDetails = analyticsPreferences.display
    const localeDetails = analyticsPreferences.locale
    const referrerDetails = analyticsPreferences.referrer

    function sendViewerEvent(eventType) {
      if (stopped) return

      const body = {
        consent: 'analytics',
        event_type: eventType,
        visitor_id: visitorId,
        session_id: analyticsSessionId,
        page_path: window.location.pathname,
        page_title: routeLabel(route),
        referrer: referrerDetails ? document.referrer : '',
        user_agent: deviceDetails ? navigator.userAgent : 'Not shared',
        browser: deviceDetails ? browserName() : 'Not shared',
        os: deviceDetails ? operatingSystem() : 'Not shared',
        device: deviceDetails ? deviceType() : 'Not shared',
        screen: displayDetails ? `${window.screen.width}x${window.screen.height}` : '',
        language: localeDetails ? navigator.language : '',
        timezone: localeDetails ? Intl.DateTimeFormat().resolvedOptions().timeZone : '',
        metadata: displayDetails
          ? {
              color_depth: window.screen.colorDepth,
              viewport: `${window.innerWidth}x${window.innerHeight}`,
            }
          : {},
      }

      fetch(apiEndpoints.viewerEvent, {
        method: 'POST',
        headers: { 'content-type': 'application/json' },
        body: JSON.stringify(body),
        keepalive: true,
      }).catch(() => {})
    }

    sendViewerEvent('page_view')
    const timer = window.setInterval(() => sendViewerEvent('heartbeat'), 30000)
    const onVisibilityChange = () => {
      if (document.visibilityState === 'visible') sendViewerEvent('heartbeat')
    }
    document.addEventListener('visibilitychange', onVisibilityChange)

    return () => {
      stopped = true
      window.clearInterval(timer)
      document.removeEventListener('visibilitychange', onVisibilityChange)
    }
  }, [analyticsPreferences, route])

  useEffect(() => {
    const onKeyDown = (event) => {
      if (event.key === 'Escape') {
        navigate('/')
      }
    }

    window.addEventListener('keydown', onKeyDown)
    return () => window.removeEventListener('keydown', onKeyDown)
  }, [])

  useEffect(() => {
    const query = teamQuery.trim()
    if (query.length < 2) {
      setSearchHint({ status: 'idle', name: '' })
      return
    }

    const controller = new AbortController()
    const timer = window.setTimeout(() => {
      setSearchHint({ status: 'loading', name: '' })
      fetchJson(apiEndpoints.resolve(query), controller.signal)
        .then((data) => {
          const name = data.tag_name || data.short_name || data.long_name || query
          setSearchHint({ status: 'ready', name })
        })
        .catch(() => {
          if (!controller.signal.aborted) {
            setSearchHint({ status: 'error', name: '' })
          }
        })
    }, 350)

    return () => {
      window.clearTimeout(timer)
      controller.abort()
    }
  }, [teamQuery])

  useEffect(() => {
    if (!['home', 'teams', 'team', 'battle-logs'].includes(route.page)) return
    if (leaderboard.status === 'ready' || leaderboard.status === 'loading') return

    const controller = new AbortController()
    setLeaderboard({ status: 'loading', data: null, error: null })

    fetchJson(apiEndpoints.teams, controller.signal)
      .then((data) => setLeaderboard({ status: 'ready', data, error: null }))
      .catch((error) => {
        if (!controller.signal.aborted) {
          setLeaderboard({ status: 'error', data: null, error: error.message })
        }
      })

    return () => controller.abort()
  }, [leaderboard.status, route.page])

  useEffect(() => {
    if (!['home', 'teams', 'team', 'battle-logs'].includes(route.page)) return

    const controller = new AbortController()
    const timer = window.setInterval(() => {
      fetchJson(apiEndpoints.teams, controller.signal)
        .then((data) => setLeaderboard({ status: 'ready', data, error: null }))
        .catch((error) => {
          if (!controller.signal.aborted) {
            setLeaderboard((current) => ({ ...current, error: error.message }))
          }
        })
    }, 60000)

    return () => {
      window.clearInterval(timer)
      controller.abort()
    }
  }, [route.page])

  useEffect(() => {
    if (!['home', 'battle-logs'].includes(route.page)) return
    if (!teams.length) return

    const controller = new AbortController()
    setLive((current) =>
      current.status === 'ready' ? current : { status: 'loading', data: null, error: null },
    )

    fetchRecentTssGames(teams, controller.signal)
      .then((data) => setLive({ status: 'ready', data, error: null }))
      .catch((error) => {
        if (!controller.signal.aborted) {
          setLive({ status: 'error', data: null, error: error.message })
        }
      })

    return () => controller.abort()
  }, [route.page, teams])

  useEffect(() => {
    if (!['home', 'battle-logs'].includes(route.page)) return
    if (!teams.length) return

    const controller = new AbortController()
    const timer = window.setInterval(() => {
      fetchRecentTssGames(teams, controller.signal)
        .then((data) => setLive({ status: 'ready', data, error: null }))
        .catch((error) => {
          if (!controller.signal.aborted) {
            setLive((current) => ({ ...current, error: error.message }))
          }
        })
    }, 15000)

    return () => {
      window.clearInterval(timer)
      controller.abort()
    }
  }, [route.page, teams])

  useEffect(() => {
    if (route.page !== 'team' || !route.teamName) return

    const controller = new AbortController()
    setProfile({
      teamName: route.teamName,
      detail: { status: 'loading', data: null, error: null },
      history: { status: 'loading', data: null, error: null },
      games: { status: 'loading', data: null, error: null },
    })

    Promise.allSettled([
      fetchJson(apiEndpoints.detail(route.teamName), controller.signal),
      fetchJson(apiEndpoints.history(route.teamName), controller.signal),
      fetchJson(apiEndpoints.games(route.teamName), controller.signal),
    ]).then(([detailResult, historyResult, gamesResult]) => {
      if (controller.signal.aborted) return

      setProfile({
        teamName: route.teamName,
        detail:
          detailResult.status === 'fulfilled'
            ? { status: 'ready', data: detailResult.value, error: null }
            : { status: 'error', data: null, error: detailResult.reason.message },
        history:
          historyResult.status === 'fulfilled'
            ? { status: 'ready', data: historyResult.value, error: null }
            : { status: 'error', data: null, error: historyResult.reason.message },
        games:
          gamesResult.status === 'fulfilled'
            ? { status: 'ready', data: gamesResult.value, error: null }
            : { status: 'error', data: null, error: gamesResult.reason.message },
      })
    })

    return () => controller.abort()
  }, [route.page, route.teamName])

  useEffect(() => {
    if (route.page !== 'uptime') return

    const controller = new AbortController()

    async function loadUptime() {
      setUptime((current) => ({
        status: current.status === 'ready' ? 'refreshing' : 'loading',
        checks: current.checks,
        history: current.history,
        updatedAt: current.updatedAt,
      }))

      fetchJson(apiEndpoints.uptime, controller.signal)
        .then((data) => {
          const latest = data.latest
          const checks = latest
            ? [
              {
                name: 'Website',
                detail: 'App shell and static assets',
                ok: latest.website_ok,
                label: latest.details?.website?.label || (latest.website_ok ? 'Online' : 'Issue'),
                latency: latest.latency_ms,
              },
              {
                name: 'Health endpoint',
                detail: apiEndpoints.health,
                ok: latest.health_ok,
                label: latest.details?.health?.label || (latest.health_ok ? 'Operational' : 'Issue'),
                latency: latest.latency_ms,
              },
              {
                name: 'TSS data proxy',
                detail: apiEndpoints.teamsHealth,
                ok: latest.tss_ok,
                label: latest.details?.tss?.label || (latest.tss_ok ? 'Operational' : 'Issue'),
                latency: latest.details?.tss?.latency_ms || latest.latency_ms,
              },
            ]
            : []

          setUptime({
            status: 'ready',
            checks,
            history: (data.history || []).map((sample) => ({
              timestamp: new Date(sample.checked_at).getTime(),
              onlineChecks: [sample.website_ok, sample.health_ok, sample.tss_ok].filter(Boolean).length,
              totalChecks: 3,
              ok: sample.ok,
            })),
            updatedAt: latest ? new Date(latest.checked_at).getTime() : null,
            configured: data.configured,
          })
        })
        .catch((error) => {
          if (controller.signal.aborted) return

          setUptime({
            status: 'error',
            updatedAt: null,
            configured: false,
            history: [],
            checks: [
              {
                name: 'Website',
                detail: 'App shell and static assets',
                ok: true,
                label: 'Online',
                latency: 0,
              },
              {
                name: 'Health endpoint',
                detail: apiEndpoints.health,
                ok: false,
                label: error.message,
                latency: 0,
              },
              {
                name: 'TSS data proxy',
                detail: apiEndpoints.teamsHealth,
                ok: false,
                label: 'Uptime history unavailable',
                latency: 0,
              },
            ],
          })
        })
    }

    loadUptime()
    const timer = window.setInterval(loadUptime, 60000)

    return () => {
      window.clearInterval(timer)
      controller.abort()
    }
  }, [route.page])

  useEffect(() => {
    if (route.page !== 'viewers') return

    const controller = new AbortController()

    function loadViewers() {
      setViewers((current) => ({
        status: current.status === 'ready' ? 'refreshing' : 'loading',
        data: current.data,
        error: null,
        updatedAt: current.updatedAt,
      }))

      fetchJson(apiEndpoints.viewers, controller.signal)
        .then((data) => {
          setViewers({
            status: 'ready',
            data,
            error: null,
            updatedAt: Date.now(),
          })
        })
        .catch((error) => {
          if (!controller.signal.aborted) {
            setViewers((current) => ({ ...current, status: 'error', error: error.message }))
          }
        })
    }

    loadViewers()
    const timer = window.setInterval(loadViewers, 5000)

    return () => {
      window.clearInterval(timer)
      controller.abort()
    }
  }, [route.page])

  useEffect(() => {
    if (route.page !== 'team' || !route.teamName) return

    const controller = new AbortController()
    const timer = window.setInterval(() => {
      Promise.allSettled([
        fetchJson(apiEndpoints.detail(route.teamName), controller.signal),
        fetchJson(apiEndpoints.history(route.teamName), controller.signal),
        fetchJson(apiEndpoints.games(route.teamName), controller.signal),
      ]).then(([detailResult, historyResult, gamesResult]) => {
        if (controller.signal.aborted) return

        setProfile((current) => ({
          teamName: route.teamName,
          detail:
            detailResult.status === 'fulfilled'
              ? { status: 'ready', data: detailResult.value, error: null }
              : current.detail,
          history:
            historyResult.status === 'fulfilled'
              ? { status: 'ready', data: historyResult.value, error: null }
              : current.history,
          games:
            gamesResult.status === 'fulfilled'
              ? { status: 'ready', data: gamesResult.value, error: null }
              : current.games,
        }))
      })
    }, 60000)

    return () => {
      window.clearInterval(timer)
      controller.abort()
    }
  }, [route.page, route.teamName])

  const topTeamName = bestTeamName(teams[0])
  const searchPlaceholder =
    searchHint.status === 'ready' ? `Found ${searchHint.name}` : topTeamName || 'Search teams'

  async function handleTeamSearch(event) {
    event.preventDefault()
    const name = teamQuery.trim()
    if (!name) return

    try {
      const resolved = await fetchJson(apiEndpoints.resolve(name))
      navigate(teamPath(resolved.tag_name || resolved.short_name || resolved.long_name || name))
    } catch {
      navigate(teamPath(name))
    }
  }

  function chooseAnalyticsConsent(preferences) {
    const previousVisitorId = storedVisitorId(analyticsVisitorKey)
    const nextPreferences = persistAnalyticsPreferences({ ...preferences, chosen: true })

    if (!nextPreferences.analytics) {
      forgetVisitorId(analyticsVisitorKey)
      if (previousVisitorId) {
        fetch(apiEndpoints.viewerDelete, {
          method: 'POST',
          headers: { 'content-type': 'application/json' },
          body: JSON.stringify({
            visitor_id: previousVisitorId,
            session_id: analyticsSessionId,
          }),
          keepalive: true,
        }).catch(() => {})
      }
    }

    setAnalyticsPreferences(nextPreferences)
  }

  const activeNavPath =
    route.page === 'team'
      ? '/teams'
      : route.page === 'battle-logs'
        ? '/battle-logs'
        : route.page === 'viewers'
          ? '/viewers'
        : window.location.pathname

  return (
    <main className="min-h-screen bg-bg text-text">
      <header className="sticky top-0 z-50 border-b border-border bg-bg/90 backdrop-blur">
        <div className="mx-auto flex w-full max-w-7xl flex-col gap-3 px-5 py-3 sm:px-8 xl:flex-row xl:items-center">
          <button className="shrink-0 text-left" onClick={() => navigate('/')} type="button">
            <span className="text-lg font-bold tracking-tight">Toothless&apos; TSS Bot</span>
          </button>

          <nav className="flex flex-wrap items-center gap-1 rounded-lg bg-surface/70 p-1 xl:ml-8">
            {navItems.map((item) => (
              <button
                className={`rounded-md px-3 py-2 text-sm font-semibold transition ${activeNavPath === item.path
                  ? 'bg-text text-bg'
                  : 'text-text-soft hover:bg-fury-white'
                  }`}
                key={item.path}
                onClick={() => navigate(item.path)}
                type="button"
              >
                {item.label}
              </button>
            ))}
            <a
              className="rounded-md px-3 py-2 text-sm font-semibold text-text-soft transition hover:bg-fury-white"
              href="https://sre.pawjob.us/"
            >
              SRE
            </a>
          </nav>

          <form className="flex min-w-0 gap-2 xl:ml-auto xl:w-[360px]" onSubmit={handleTeamSearch}>
            <input
              className="min-w-0 flex-1 rounded-md border border-border bg-fury-white px-3 py-2 text-sm outline-none transition focus:border-ring focus:shadow-[0_0_0_3px_var(--color-shadow)]"
              placeholder={searchPlaceholder}
              value={teamQuery}
              onChange={(event) => setTeamQuery(event.target.value)}
            />
            <button
              className="rounded-md bg-fury-cyan px-4 py-2 text-sm font-semibold text-text transition hover:bg-fury-aqua"
              type="submit"
            >
              Search
            </button>
          </form>
        </div>
      </header>

      <section className="mx-auto w-full max-w-7xl px-5 sm:px-8">
        {route.page === 'home' ? (
          <Landing live={live} matches={matches} navigate={navigate} />
        ) : null}
        {route.page === 'teams' ? (
          <TeamsPage leaderboard={leaderboard} navigate={navigate} teams={teams} />
        ) : null}
        {route.page === 'team' ? (
          <TeamProfilePage
            navigate={navigate}
            profile={profile}
            requestedTeam={route.teamName}
            teams={teams}
          />
        ) : null}
        {route.page === 'battle-logs' ? <BattleLogsPage live={live} matches={matches} /> : null}
        {route.page === 'uptime' ? <UptimePage uptime={uptime} /> : null}
        {route.page === 'viewers' ? <ViewersPage viewers={viewers} /> : null}
        {route.page === 'privacy' ? <PrivacyPage /> : null}
      </section>
      <Footer navigate={navigate} />
      <ConsentBanner preferences={analyticsPreferences} onChoose={chooseAnalyticsConsent} />
    </main>
  )
}

function Footer({ navigate }) {
  return (
    <footer className="mt-14 border-t border-border bg-fury-white">
      <div className="mx-auto flex w-full max-w-7xl flex-col gap-3 px-5 py-6 text-sm text-text-soft sm:flex-row sm:items-center sm:justify-between sm:px-8">
        <p>Toothless&apos; TSS Bot</p>
        <div className="flex flex-wrap gap-4">
          <button
            className="w-fit font-semibold text-fury-cyan transition hover:text-text"
            onClick={() => navigate('/uptime')}
            type="button"
          >
            Uptime
          </button>
          <button
            className="w-fit font-semibold text-fury-cyan transition hover:text-text"
            onClick={() => navigate('/viewers')}
            type="button"
          >
            viewers
          </button>
          <button
            className="w-fit font-semibold text-fury-cyan transition hover:text-text"
            onClick={() => navigate('/privacy')}
            type="button"
          >
            Privacy
          </button>
        </div>
      </div>
    </footer>
  )
}

function ConsentBanner({ preferences, onChoose }) {
  const [isOpen, setIsOpen] = useState(() => !preferences.chosen)
  const [isConfiguring, setIsConfiguring] = useState(() => Boolean(preferences.chosen))
  const [draft, setDraft] = useState(() => normalizeAnalyticsPreferences(preferences))
  const privacySignalEnabled = browserPrivacySignalEnabled()

  useEffect(() => {
    setDraft(normalizeAnalyticsPreferences(preferences))
    if (!preferences.chosen) {
      setIsOpen(true)
      setIsConfiguring(false)
    }
  }, [preferences])

  useEffect(() => {
    if (!isOpen) return undefined

    const previousOverflow = document.body.style.overflow
    document.body.style.overflow = 'hidden'

    return () => {
      document.body.style.overflow = previousOverflow
    }
  }, [isOpen])

  function updateDraft(key, value) {
    setDraft((current) => ({ ...current, [key]: value }))
  }

  function savePreferences(nextPreferences) {
    onChoose(normalizeAnalyticsPreferences(nextPreferences))
    setIsOpen(false)
  }

  if (!isOpen) {
    return (
      <button
        className="fixed right-4 bottom-4 z-50 rounded-md border border-border bg-fury-white px-3 py-2 text-xs font-semibold text-text-soft shadow-sm transition hover:text-text"
        onClick={() => {
          setIsConfiguring(true)
          setIsOpen(true)
        }}
        type="button"
      >
        Cookie settings
      </button>
    )
  }

  return (
    <div
      aria-labelledby="consent-title"
      aria-modal="true"
      className="fixed inset-0 z-50 grid place-items-center bg-black/45 px-4 py-6 backdrop-blur-[2px]"
      role="dialog"
    >
      <div className="w-full max-w-2xl rounded-md border border-border bg-fury-white p-5 text-text shadow-[0_24px_70px_rgba(0,0,0,0.24)] sm:p-6">
        <div className="max-w-xl">
          <h2 id="consent-title" className="text-xl font-semibold">
            Cookie and analytics settings
          </h2>
          <p className="mt-2 text-sm leading-6 text-text-soft">
            We use a necessary cookie to remember these choices. You can also allow
            analytics for the public viewers page and choose which details are included.
          </p>
          {privacySignalEnabled ? (
            <p className="mt-2 text-sm font-semibold text-text">
              Your browser is signalling a privacy preference, so optional analytics stay
              off unless you explicitly allow them.
            </p>
          ) : null}
        </div>

        {isConfiguring ? (
          <>
            <div className="mt-5 space-y-3">
              <PreferenceToggle
                checked
                description="Stores this consent choice so the popup does not appear on every page."
                disabled
                label="Necessary cookie"
              />
              <PreferenceToggle
                checked={draft.analytics}
                description="Sends page views, live viewing state, session ID, and pseudonymous visitor ID."
                label="Viewer analytics"
                onChange={(value) => updateDraft('analytics', value)}
              />
              <PreferenceToggle
                checked={draft.device}
                description="Includes browser, operating system, and broad device type."
                disabled={!draft.analytics}
                label="Browser and device details"
                onChange={(value) => updateDraft('device', value)}
              />
              <PreferenceToggle
                checked={draft.display}
                description="Includes screen size, viewport size, and colour depth."
                disabled={!draft.analytics}
                label="Screen details"
                onChange={(value) => updateDraft('display', value)}
              />
              <PreferenceToggle
                checked={draft.locale}
                description="Includes browser language and timezone."
                disabled={!draft.analytics}
                label="Language and timezone"
                onChange={(value) => updateDraft('locale', value)}
              />
              <PreferenceToggle
                checked={draft.referrer}
                description="Includes the page that linked you here when the browser provides it."
                disabled={!draft.analytics}
                label="Referrer"
                onChange={(value) => updateDraft('referrer', value)}
              />
            </div>

            <div className="mt-5 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
              <button
                className="rounded-md border border-border px-4 py-2 text-sm font-semibold text-text-soft transition hover:bg-surface hover:text-text"
                onClick={() => savePreferences({ ...defaultAnalyticsPreferences, chosen: true })}
                type="button"
              >
                Decline all
              </button>
              <button
                className="rounded-md border border-border px-4 py-2 text-sm font-semibold text-text transition hover:bg-surface"
                onClick={() => savePreferences(draft)}
                type="button"
              >
                Save choices
              </button>
              <button
                className="rounded-md bg-fury-cyan px-4 py-2 text-sm font-semibold text-bg transition hover:bg-fury-aqua"
                onClick={() =>
                  savePreferences({
                    chosen: true,
                    analytics: true,
                    device: true,
                    display: true,
                    locale: true,
                    referrer: true,
                    version: analyticsConsentVersion,
                  })
                }
                type="button"
              >
                Allow all
              </button>
            </div>
          </>
        ) : (
          <div className="mt-5 flex flex-col gap-2 sm:flex-row sm:justify-end">
            <button
              className="rounded-md border border-border px-4 py-2 text-sm font-semibold text-text transition hover:bg-surface"
              onClick={() => setIsConfiguring(true)}
              type="button"
            >
              Configure
            </button>
            <button
              className="rounded-md bg-fury-cyan px-4 py-2 text-sm font-semibold text-bg transition hover:bg-fury-aqua"
              onClick={() =>
                savePreferences({
                  chosen: true,
                  analytics: true,
                  device: true,
                  display: true,
                  locale: true,
                  referrer: true,
                  version: analyticsConsentVersion,
                })
              }
              type="button"
            >
              Allow all
            </button>
          </div>
        )}
      </div>
    </div>
  )
}

function PreferenceToggle({ checked, description, disabled = false, label, onChange }) {
  return (
    <label
      className={`flex items-start gap-3 rounded-md border border-border bg-surface px-3 py-3 ${
        disabled ? 'opacity-65' : 'cursor-pointer'
      }`}
    >
      <input
        checked={checked}
        className="mt-1 h-4 w-4 accent-fury-cyan"
        disabled={disabled}
        onChange={(event) => onChange?.(event.target.checked)}
        type="checkbox"
      />
      <span>
        <span className="block text-sm font-semibold text-text">{label}</span>
        <span className="mt-1 block text-xs leading-5 text-text-soft">{description}</span>
      </span>
    </label>
  )
}

function PrivacyPage() {
  return (
    <section className="mx-auto max-w-4xl py-12">
      <div className="border-b border-border pb-6">
        <p className="text-sm font-semibold uppercase tracking-wide text-fury-cyan">
          Privacy notice
        </p>
        <h1 className="mt-2 text-4xl font-bold">How we handle your data</h1>
        <p className="mt-3 text-text-soft">
          Controller: Heidi
        </p>
        <p className="mt-3 text-text-soft">
          Contact through Discord: <span className="font-semibold text-text">clippiii</span>
        </p>
      </div>

      <div className="mt-8 grid gap-6 text-sm leading-6 text-text-soft">
        <PrivacySection title="What we collect">
          Necessary cookies store your cookie and analytics choices. If you opt in to
          viewer analytics, we collect page views, live viewing status, a pseudonymous
          visitor ID, and a session ID. Optional settings control whether browser/device,
          screen, language/timezone, and referrer details are included.
        </PrivacySection>

        <PrivacySection title="Why we collect it">
          Necessary cookies are used to remember your privacy choices. Optional viewer
          analytics are used only to power the public viewers page, understand basic site
          activity, and keep abuse low.
        </PrivacySection>

        <PrivacySection title="Legal basis">
          Necessary cookies are used because they are needed to remember your consent
          preferences. Optional analytics only run with your consent, and you can withdraw
          that consent from the Cookie settings button at any time.
        </PrivacySection>

        <PrivacySection title="Retention and deletion">
          Analytics events are automatically deleted after the configured retention period,
          currently documented as 30 days by default. Active viewer sessions expire after a
          short inactivity window. If you decline analytics after previously allowing them,
          the site asks the server to delete records linked to your current visitor and
          session IDs, and removes the local visitor ID from your browser.
        </PrivacySection>

        <PrivacySection title="Sharing and transfers">
          Viewer analytics are stored by this site and are not sold. Public viewer pages show
          only consented analytics fields and never show raw IP addresses. Hosting providers
          may process server logs as part of running the site.
        </PrivacySection>

        <PrivacySection title="Your rights">
          You can ask for access, correction, deletion, restriction, objection, portability,
          or withdrawal of consent by contacting Heidi on Discord at clippiii. If you are in
          the UK, you can also complain to the ICO. If you are in the EU or EEA, you can
          complain to your local data protection authority.
        </PrivacySection>
      </div>
    </section>
  )
}

function PrivacySection({ children, title }) {
  return (
    <article className="border-l border-border pl-4">
      <h2 className="text-lg font-semibold text-text">{title}</h2>
      <p className="mt-2">{children}</p>
    </article>
  )
}

function Landing({ live, matches, navigate }) {
  const treeRef = useRef(null)

  return (
    <div className="relative left-1/2 w-screen -translate-x-1/2 bg-bg">
      <div className="relative min-h-[calc(100vh-74px)] overflow-hidden px-5 sm:px-8">
        <PixelMountains />

        <section className="relative z-10 mx-auto grid min-h-[calc(100vh-74px)] w-full max-w-7xl gap-8 pt-16 pb-10 lg:grid-cols-[1.05fr_0.95fr] lg:items-center">
          <div className="max-w-3xl">
            <p className="text-base font-semibold uppercase tracking-wide text-fury-cyan">
              BorisBot got nothin on THIS
            </p>
            <h1 className="mt-3 text-6xl font-bold tracking-normal sm:text-7xl lg:text-8xl">
              Toothless&apos; TSS Bot
            </h1>
            <p className="mt-6 max-w-2xl text-xl leading-9 text-text-soft">
              Powered by Spectra. TSS analytics.
            </p>
            <div className="mt-8 flex flex-wrap gap-4">
              <button
                className="rounded-lg bg-text px-7 py-4 text-base font-semibold text-bg"
                onClick={() => navigate('/teams')}
                type="button"
              >
                Team leaderboard
              </button>
              <button
                className="rounded-lg border-2 border-ring px-7 py-4 text-base font-semibold text-fury-cyan"
                onClick={() => navigate('/battle-logs')}
                type="button"
              >
                Battle Logs
              </button>
            </div>
          </div>

          <div className="relative min-h-[520px] overflow-hidden">
            <FallingLeaves treeRef={treeRef} />
            <div className="absolute inset-0 z-[1] flex items-end justify-center pb-10 lg:pb-0">
              <Tree ref={treeRef} />
            </div>
          </div>
        </section>
      </div>

      <RecentGamesSection live={live} matches={matches} navigate={navigate} />
    </div>
  )
}

function RecentGamesSection({ live, matches, navigate }) {
  const recentMatches = matches.slice(0, 6)

  return (
    <section className="relative z-20 border-t border-border bg-fury-white px-5 py-10 sm:px-8">
      <div className="mx-auto w-full max-w-7xl">
        <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
          <div>
            <p className="text-sm font-semibold uppercase tracking-wide text-fury-cyan">
              Recent activity
            </p>
            <h2 className="mt-1 text-3xl font-bold">Latest games</h2>
          </div>
          <button
            className="w-fit rounded-lg border border-ring px-4 py-2 text-sm font-semibold text-fury-cyan transition hover:bg-surface"
            onClick={() => navigate('/battle-logs')}
            type="button"
          >
            View Battle Logs
          </button>
        </div>

        <div className="mt-6 grid gap-4 lg:grid-cols-3">
          {recentMatches.map((match) => (
            <article
              className="rounded-lg border border-border bg-bg p-4 shadow-sm"
              key={match.session_id}
            >
              <div className="flex items-start justify-between gap-3">
                <div className="min-w-0">
                  <h3 className="truncate text-lg font-semibold">
                    {match.map_name || 'Unknown map'}
                  </h3>
                  <p className="mt-1 text-xs text-text-soft">{formatDate(match.timestamp)}</p>
                </div>
                <span className="shrink-0 rounded-md bg-surface px-2 py-1 text-xs font-semibold text-text-soft">
                  {match.result || 'Unknown'}
                </span>
              </div>

              <div className="mt-4 grid grid-cols-[1fr_auto] items-center gap-3 text-sm">
                <p className="truncate font-semibold text-fury-cyan">
                  {match.team_name || 'TSS team'}
                </p>
                <p className="text-text-soft">
                  {formatNumber(match.player_count)} players
                </p>
              </div>
              <div className="mt-3 flex flex-wrap gap-2 text-xs text-text-soft">
                <span>{formatNumber(match.stats?.ground_kills)} ground</span>
                <span>{formatNumber(match.stats?.air_kills)} air</span>
                <span>{formatNumber(match.stats?.deaths)} deaths</span>
              </div>
            </article>
          ))}
        </div>

        {!recentMatches.length ? (
          <p className="mt-6 rounded-lg border border-border bg-bg px-5 py-6 text-sm text-text-soft">
            {live.status === 'loading' ? 'Loading latest games' : live.error || 'No games returned'}
          </p>
        ) : null}
      </div>
    </section>
  )
}

function PixelMountains() {
  const canvasRef = useRef(null)

  useEffect(() => {
    const canvas = canvasRef.current
    const ctx = canvas.getContext('2d')
    const WORLD_W = 1920
    const WORLD_H = 900

    function interpolate(points, x) {
      for (let i = 0; i < points.length - 1; i++) {
        const [x0, y0] = points[i]
        const [x1, y1] = points[i + 1]
        if (x >= x0 && x <= x1) {
          const t = (x - x0) / Math.max(1, x1 - x0)
          return y0 + (y1 - y0) * t
        }
      }

      return points.at(-1)[1]
    }

    function drawMountain(points, color, jitter = 0) {
      const width = WORLD_W
      const height = WORLD_H
      ctx.fillStyle = color

      for (let x = 0; x < width; x++) {
        const wave = jitter
          ? Math.sin(x * 0.08) * jitter + Math.sin(x * 0.021) * jitter * 1.8
          : 0
        const y = Math.round(interpolate(points, x) + wave)
        ctx.fillRect(x, y, 1, height - y)
      }
    }

    function draw() {
      const width = WORLD_W
      const height = WORLD_H

      canvas.width = WORLD_W
      canvas.height = WORLD_H
      ctx.imageSmoothingEnabled = false
      ctx.clearRect(0, 0, WORLD_W, WORLD_H)

      drawMountain(
        [
          [0, height * 0.82],
          [width * 0.12, height * 0.73],
          [width * 0.26, height * 0.66],
          [width * 0.39, height * 0.76],
          [width * 0.55, height * 0.58],
          [width * 0.64, height * 0.46],
          [width * 0.73, height * 0.62],
          [width * 0.86, height * 0.56],
          [width, height * 0.64],
        ],
        '#fcfbcf',
        1.1,
      )

      drawMountain(
        [
          [0, height * 0.86],
          [width * 0.15, height * 0.78],
          [width * 0.31, height * 0.81],
          [width * 0.43, height * 0.69],
          [width * 0.52, height * 0.76],
          [width * 0.62, height * 0.43],
          [width * 0.69, height * 0.31],
          [width * 0.78, height * 0.48],
          [width, height * 0.5],
        ],
        '#fff2e6',
        1.6,
      )

      drawMountain(
        [
          [0, height * 0.94],
          [width * 0.17, height * 0.9],
          [width * 0.32, height * 0.92],
          [width * 0.47, height * 0.83],
          [width * 0.58, height * 0.89],
          [width * 0.66, height * 0.61],
          [width * 0.71, height * 0.5],
          [width * 0.84, height * 0.7],
          [width, height * 0.68],
        ],
        '#fee5cd',
        2.1,
      )

      drawMountain(
        [
          [0, height * 0.98],
          [width * 0.17, height * 0.96],
          [width * 0.34, height * 0.99],
          [width * 0.48, height * 0.93],
          [width * 0.62, height * 0.97],
          [width * 0.72, height * 0.88],
          [width * 0.86, height * 0.95],
          [width, height * 0.93],
        ],
        '#fdca9b',
        1.4,
      )
    }

    draw()
  }, [])

  return <canvas ref={canvasRef} className="pixel-mountains" aria-hidden="true" />
}

function TeamsPage({ leaderboard, navigate, teams }) {
  return (
    <section className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold">Team leaderboard</h1>
        <p className="mt-2 text-sm text-text-soft">
          {leaderboard.status === 'loading'
            ? 'Loading leaderboard'
            : leaderboard.error || `${teams.length} teams returned`}
        </p>
      </div>

      <div className="overflow-hidden rounded-lg border border-border bg-fury-white shadow-sm">
        {teams.map((team, index) => {
          const name = bestTeamName(team)
          return (
            <button
              className="grid w-full gap-4 border-b border-surface px-5 py-4 text-left hover:bg-surface md:grid-cols-[4rem_1fr_repeat(4,auto)] md:items-center"
              key={`${name}-${team.clan_id || index}`}
              onClick={() => navigate(teamPath(name))}
              type="button"
            >
              <span className="text-sm font-semibold text-fury-cyan">#{index + 1}</span>
              <span className="min-w-0">
                <span className="block truncate text-lg font-semibold">{name}</span>
                <span className="block truncate text-xs text-text-soft">
                  {team.long_name || team.short_name || 'Unresolved'}
                </span>
              </span>
              <span className="text-sm">{formatNumber(team.player_count)} players</span>
              <span className="text-sm">{formatNumber(team.total_battles)} battles</span>
              <span className="text-sm">{Number(team.win_rate || 0).toFixed(1)}% WR</span>
              <span className="text-sm font-semibold">
                {formatNumber(team.points?.total_points || team.total_kills)}
              </span>
            </button>
          )
        })}

        {!teams.length ? (
          <p className="px-5 py-10 text-sm text-text-soft">
            {leaderboard.status === 'loading' ? 'Loading leaderboard' : 'No teams returned'}
          </p>
        ) : null}
      </div>
    </section>
  )
}

function TeamProfilePage({ navigate, profile, requestedTeam, teams }) {
  const detail = profile.detail.data
  const summary = detail?.team_summary || detail?.squadron_summary
  const players = detail?.players || []
  const games = profile.games.data?.games || []
  const history = profile.history.data?.history || []
  const ratingHourly = profile.history.data?.rating_hourly || []
  const latestRating = ratingHourly.at(-1)?.rating || summary?.points?.total_points
  const leaderboardTeam = teams.find((team) => bestTeamName(team) === requestedTeam)
  const displayName = detail?.tag_name || bestTeamName(leaderboardTeam) || requestedTeam
  const longName = detail?.long_name || leaderboardTeam?.long_name || ''

  return (
    <section className="space-y-6">
      <button
        className="text-sm font-semibold text-fury-cyan hover:text-text"
        onClick={() => navigate('/teams')}
        type="button"
      >
        Back to leaderboard
      </button>

      <div className="rounded-lg border border-border bg-fury-white p-6 shadow-sm">
        <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
          <div>
            <p className="text-sm font-semibold uppercase tracking-wide text-fury-cyan">
              Team profile
            </p>
            <h1 className="mt-1 text-4xl font-bold">{displayName}</h1>
            <p className="mt-2 text-sm text-text-soft">
              {profile.detail.error || longName || profile.detail.status}
            </p>
          </div>
          <div className="grid grid-cols-2 gap-3 text-sm sm:grid-cols-3">
            <span className="rounded-md bg-surface px-3 py-2 font-semibold">
              Rating {formatNumber(latestRating)}
            </span>
            <span className="rounded-md bg-surface px-3 py-2 font-semibold">
              Clan {detail?.clan_id || leaderboardTeam?.clan_id || 'n/a'}
            </span>
            <span className="rounded-md bg-surface px-3 py-2 font-semibold">
              {detail?.data_set || 'tss'}
            </span>
          </div>
        </div>

        <div className="mt-6 grid gap-5 sm:grid-cols-2 xl:grid-cols-5">
          <Stat label="Roster" value={formatNumber(summary?.player_count)} />
          <Stat label="Battles" value={formatNumber(summary?.total_battles)} />
          <Stat label="Wins" value={formatNumber(summary?.wins)} />
          <Stat label="Win rate" value={`${Number(summary?.win_rate || 0).toFixed(1)}%`} />
          <Stat label="KDR" value={Number(summary?.kdr || 0).toFixed(1)} />
        </div>
      </div>

      <div className="grid gap-6 xl:grid-cols-[1.15fr_0.85fr]">
        <RosterTable players={players} status={profile.detail.status} />
        <RatingPanel history={history} ratingHourly={ratingHourly} status={profile.history.status} />
      </div>

      <BattleResults games={games} status={profile.games.status} />
    </section>
  )
}

function RosterTable({ players, status }) {
  const sortedPlayers = [...players].sort((a, b) => {
    return (b.total_kills || 0) - (a.total_kills || 0) || String(a.nick || '').localeCompare(b.nick || '')
  })

  return (
    <div className="rounded-lg border border-border bg-fury-white shadow-sm">
      <div className="border-b border-surface px-5 py-4">
        <h2 className="text-lg font-semibold">Roster</h2>
        <p className="mt-1 text-sm text-text-soft">{formatNumber(sortedPlayers.length)} players</p>
      </div>
      <div className="max-h-[520px] overflow-auto">
        {sortedPlayers.map((player) => (
          <div
            className="grid gap-3 border-b border-surface px-5 py-3 text-sm md:grid-cols-[1fr_repeat(5,auto)] md:items-center"
            key={player.uid}
          >
            <div className="min-w-0">
              <p className="truncate font-semibold">{player.nick || player.uid}</p>
              <p className="text-xs text-text-soft">
                {player.uid} · {formatNumber(player.points || player.sqb_points)} pts
              </p>
            </div>
            <p>{formatNumber(player.total_battles)} battles</p>
            <p>{formatNumber(player.total_kills)} kills</p>
            <p>{Number(player.win_rate || 0).toFixed(1)}% WR</p>
            <p>{Number(player.kdr || 0).toFixed(1)} KDR</p>
            <p>{formatNumber(player.assists)} assists</p>
          </div>
        ))}
        {!sortedPlayers.length ? (
          <p className="px-5 py-10 text-sm text-text-soft">
            {status === 'loading' ? 'Loading roster' : 'No roster rows returned'}
          </p>
        ) : null}
      </div>
    </div>
  )
}

function RatingPanel({ history, ratingHourly, status }) {
  const recentHistory = history.slice(-8)
  const firstRating = ratingHourly[0]?.rating || 0
  const latestRating = ratingHourly.at(-1)?.rating || 0
  const ratingChange = latestRating - firstRating

  return (
    <div className="rounded-lg border border-border bg-fury-white shadow-sm">
      <div className="border-b border-surface px-5 py-4">
        <h2 className="text-lg font-semibold">History</h2>
        <p className="mt-1 text-sm text-text-soft">
          {ratingHourly.length ? `${formatNumber(ratingHourly.length)} rating snapshots` : status}
        </p>
      </div>
      <div className="space-y-5 p-5">
        <div className="grid gap-5 sm:grid-cols-2">
          <Stat label="Latest rating" value={formatNumber(latestRating)} />
          <Stat
            label="Rating change"
            value={`${ratingChange >= 0 ? '+' : ''}${formatNumber(ratingChange)}`}
          />
        </div>

        <div className="space-y-2">
          {recentHistory.map((item) => (
            <div
              className="grid grid-cols-[1fr_auto_auto] gap-3 rounded-md bg-surface px-3 py-2 text-sm"
              key={item.period}
            >
              <span className="font-semibold">{item.period}</span>
              <span>{formatNumber(item.battles)} battles</span>
              <span>{Number(item.win_rate || 0).toFixed(1)}% WR</span>
            </div>
          ))}
          {!recentHistory.length ? (
            <p className="text-sm text-text-soft">
              {status === 'loading' ? 'Loading history' : 'No history rows returned'}
            </p>
          ) : null}
        </div>
      </div>
    </div>
  )
}

function BattleResults({ games, status }) {
  return (
    <div className="rounded-lg border border-border bg-fury-white shadow-sm">
      <div className="border-b border-surface px-5 py-4">
        <h2 className="text-lg font-semibold">Battle results</h2>
        <p className="mt-1 text-sm text-text-soft">{formatNumber(games.length)} battles returned</p>
      </div>
      <div className="max-h-[560px] overflow-auto">
        {games.map((game) => (
          <div
            className="grid gap-4 border-b border-surface px-5 py-4 md:grid-cols-[1fr_auto_repeat(5,auto)] md:items-center"
            key={game.session_id}
          >
            <div className="min-w-0">
              <p className="truncate font-semibold">{game.map_name || 'Unknown map'}</p>
              <p className="text-xs text-text-soft">
                {formatDate(game.timestamp)} · {game.session_id}
              </p>
            </div>
            <p
              className={`rounded-md px-3 py-1 text-sm font-semibold ${String(game.result).toLowerCase() === 'win'
                ? 'bg-surface text-fury-cyan'
                : 'bg-fury-ice text-fury-violet'
                }`}
            >
              {game.result || 'Unknown'}
            </p>
            <p className="text-sm">{formatNumber(game.player_count)} players</p>
            <p className="text-sm">{formatNumber(game.stats?.ground_kills)} ground</p>
            <p className="text-sm">{formatNumber(game.stats?.air_kills)} air</p>
            <p className="text-sm">{formatNumber(game.stats?.assists)} assists</p>
            <p className="text-sm">{formatNumber(game.stats?.deaths)} deaths</p>
          </div>
        ))}
        {!games.length ? (
          <p className="px-5 py-10 text-sm text-text-soft">
            {status === 'loading' ? 'Loading battle results' : 'No battle results returned'}
          </p>
        ) : null}
      </div>
    </div>
  )
}

function BattleLogsPage({ live, matches }) {
  return (
    <section className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold">Battle Logs</h1>
        <p className="mt-2 text-sm text-text-soft">
          {live.status === 'loading' ? 'Loading battles' : live.error || `${matches.length} battles returned`}
        </p>
      </div>

      <div className="overflow-hidden rounded-lg border border-border bg-fury-white shadow-sm">
        {matches.map((match) => (
          <div
            className="grid gap-4 border-b border-surface px-5 py-4 md:grid-cols-[1fr_1fr_auto_repeat(4,auto)] md:items-center"
            key={match.session_id}
          >
            <div className="min-w-0">
              <p className="truncate font-semibold">{match.map_name || 'Unknown map'}</p>
              <p className="text-xs text-text-soft">
                {formatDate(match.timestamp)} · {match.session_id}
              </p>
            </div>
            <div className="min-w-0">
              <p className="truncate font-semibold text-fury-cyan">
                {match.team_name || 'TSS team'}
              </p>
              <p className="truncate text-xs text-text-soft">{match.long_name || 'TSS battle record'}</p>
            </div>
            <p
              className={`w-fit rounded-md px-3 py-1 text-sm font-semibold ${String(match.result).toLowerCase() === 'win'
                ? 'bg-surface text-fury-cyan'
                : 'bg-fury-ice text-fury-violet'
                }`}
            >
              {match.result || 'Unknown'}
            </p>
            <p className="text-sm">{formatNumber(match.player_count)} players</p>
            <p className="text-sm">{formatNumber(match.stats?.ground_kills)} ground</p>
            <p className="text-sm">{formatNumber(match.stats?.air_kills)} air</p>
            <p className="text-sm">{formatNumber(match.stats?.deaths)} deaths</p>
          </div>
        ))}

        {!matches.length ? (
          <p className="px-5 py-10 text-sm text-text-soft">
            {live.status === 'loading' ? 'Loading battles' : 'No battles returned'}
          </p>
        ) : null}
      </div>
    </section>
  )
}

function relativeSeconds(timestamp) {
  if (!timestamp) return 'unknown'
  const seconds = Math.max(0, Math.round((Date.now() - new Date(timestamp).getTime()) / 1000))
  if (seconds < 60) return `${seconds}s ago`
  return `${Math.round(seconds / 60)}m ago`
}

function ViewersPage({ viewers }) {
  const data = viewers.data || {}
  const active = data.active || []
  const topPages = data.top_pages || []
  const clients = data.clients || []
  const totals = data.totals || {}
  const generatedAt = data.generated_at ? dateFormat.format(new Date(data.generated_at)) : 'Waiting for data'

  return (
    <section className="space-y-6">
      <div className="rounded-lg border border-border bg-fury-white p-6 shadow-sm">
        <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
          <div>
            <p className="text-sm font-semibold uppercase tracking-wide text-fury-cyan">
              Public analytics
            </p>
            <h1 className="mt-1 text-4xl font-bold">viewers</h1>
            <p className="mt-2 text-sm text-text-soft">
              Live consented browser sessions and page activity. Last refreshed {generatedAt}.
            </p>
          </div>
          <span className="w-fit rounded-md bg-surface px-3 py-2 text-sm font-semibold text-fury-cyan">
            {viewers.status === 'loading' ? 'Loading' : `${formatNumber(totals.active_now)} active now`}
          </span>
        </div>
      </div>

      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <Stat label="Active now" value={formatNumber(totals.active_now)} />
        <Stat label="Visitors 24h" value={formatNumber(totals.visitors_24h)} />
        <Stat label="Page views 24h" value={formatNumber(totals.page_views_24h)} />
        <Stat label="Events 24h" value={formatNumber(totals.events_24h)} />
      </div>

      <div className="overflow-hidden rounded-lg border border-border bg-fury-white shadow-sm">
        <div className="border-b border-surface px-5 py-4">
          <h2 className="text-lg font-semibold">Currently viewing</h2>
          <p className="mt-1 text-sm text-text-soft">
            Heartbeats within {formatNumber(data.active_window_seconds || 75)} seconds
          </p>
        </div>
        {active.map((viewer) => (
          <div
            className="grid gap-3 border-b border-surface px-5 py-4 text-sm lg:grid-cols-[1fr_1fr_auto_auto_auto]"
            key={viewer.session}
          >
            <div className="min-w-0">
              <p className="truncate font-semibold">{viewer.page_title || viewer.page_path}</p>
              <p className="truncate text-xs text-text-soft">{viewer.page_path}</p>
            </div>
            <div className="min-w-0">
              <p className="truncate font-semibold">
                {viewer.browser} on {viewer.os}
              </p>
              <p className="truncate text-xs text-text-soft">
                {viewer.device} · {viewer.screen || 'unknown screen'} · {viewer.timezone || 'unknown timezone'}
              </p>
            </div>
            <p className="text-text-soft">{viewer.language || 'unknown language'}</p>
            <p className="text-text-soft">Seen {relativeSeconds(viewer.last_seen_at)}</p>
            <p className="font-mono text-xs text-text-muted">#{viewer.session}</p>
          </div>
        ))}
        {!active.length ? (
          <p className="px-5 py-10 text-sm text-text-soft">
            {viewers.error || 'No consented viewers are active right now'}
          </p>
        ) : null}
      </div>

      <div className="grid gap-6 xl:grid-cols-2">
        <div className="rounded-lg border border-border bg-fury-white shadow-sm">
          <div className="border-b border-surface px-5 py-4">
            <h2 className="text-lg font-semibold">Top pages</h2>
            <p className="mt-1 text-sm text-text-soft">Page views over the last 24 hours</p>
          </div>
          {topPages.map((page) => (
            <div className="grid grid-cols-[1fr_auto] gap-3 border-b border-surface px-5 py-3 text-sm" key={page.page_path}>
              <div className="min-w-0">
                <p className="truncate font-semibold">{page.page_title || page.page_path}</p>
                <p className="truncate text-xs text-text-soft">{page.page_path}</p>
              </div>
              <p className="font-semibold text-fury-cyan">{formatNumber(page.views)}</p>
            </div>
          ))}
          {!topPages.length ? <p className="px-5 py-10 text-sm text-text-soft">No page views recorded yet</p> : null}
        </div>

        <div className="rounded-lg border border-border bg-fury-white shadow-sm">
          <div className="border-b border-surface px-5 py-4">
            <h2 className="text-lg font-semibold">Clients</h2>
            <p className="mt-1 text-sm text-text-soft">Browsers, devices, and operating systems seen in 24 hours</p>
          </div>
          {clients.map((client) => (
            <div
              className="grid grid-cols-[1fr_auto] gap-3 border-b border-surface px-5 py-3 text-sm"
              key={`${client.browser}-${client.os}-${client.device}`}
            >
              <div className="min-w-0">
                <p className="truncate font-semibold">{client.browser} on {client.os}</p>
                <p className="truncate text-xs text-text-soft">{client.device}</p>
              </div>
              <p className="font-semibold text-fury-cyan">{formatNumber(client.events)}</p>
            </div>
          ))}
          {!clients.length ? <p className="px-5 py-10 text-sm text-text-soft">No client data recorded yet</p> : null}
        </div>
      </div>

      <p className="text-xs text-text-soft">
        Analytics are opt-in, retained for {formatNumber(data.privacy?.retention_days || 30)} days,
        and public output excludes raw IP addresses.
      </p>
    </section>
  )
}

function UptimePage({ uptime }) {
  const checks = uptime.checks
  const history = uptime.history
  const operationalCount = checks.filter((check) => check.ok).length
  const allOperational = checks.length > 0 && operationalCount === checks.length
  const updatedAt = uptime.updatedAt ? dateFormat.format(new Date(uptime.updatedAt)) : 'Not checked yet'
  const onlineSamples = history.filter((sample) => sample.ok).length
  const availability = history.length ? (onlineSamples / history.length) * 100 : 0

  return (
    <section className="space-y-6">
      <div className="rounded-lg border border-border bg-fury-white p-6 shadow-sm">
        <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
          <div>
            <p className="text-sm font-semibold uppercase tracking-wide text-fury-cyan">
              Website uptime
            </p>
            <h1 className="mt-1 text-4xl font-bold">
              {allOperational ? 'All systems operational' : 'Status check'}
            </h1>
            <p className="mt-2 text-sm text-text-soft">
              Last server snapshot {updatedAt}. The page refreshes once a minute.
            </p>
          </div>
          <span
            className={`w-fit rounded-md px-3 py-2 text-sm font-semibold ${allOperational
              ? 'bg-surface text-fury-cyan'
              : 'bg-fury-ice text-fury-violet'
              }`}
          >
            {uptime.status === 'loading' ? 'Checking' : `${operationalCount}/${checks.length || 3} online`}
          </span>
        </div>
      </div>

      <div className="rounded-lg border border-border bg-fury-white p-5 shadow-sm">
        <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
          <div>
            <h2 className="text-lg font-semibold">Availability timeline</h2>
            <p className="mt-1 text-sm text-text-soft">
              Last {formatNumber(history.length)} persisted server snapshots
            </p>
          </div>
          <p className="text-sm font-semibold text-fury-cyan">
            {history.length ? `${availability.toFixed(1)}% uptime` : 'Waiting for first sample'}
          </p>
        </div>

        <div className="mt-5 flex h-28 items-end gap-1 rounded-md border border-border bg-bg p-3">
          {history.map((sample) => {
            const height = `${Math.max(12, (sample.onlineChecks / sample.totalChecks) * 100)}%`

            return (
              <div
                aria-label={`${sample.ok ? 'Uptime' : 'Downtime'} at ${dateFormat.format(new Date(sample.timestamp))}`}
                className={`min-w-2 flex-1 rounded-sm ${sample.ok ? 'bg-success' : 'bg-danger'}`}
                key={sample.timestamp}
                style={{ height }}
                title={`${sample.onlineChecks}/${sample.totalChecks} online`}
              />
            )
          })}

          {!history.length ? (
            <div className="flex h-full w-full items-center justify-center text-sm text-text-soft">
              Checking website status
            </div>
          ) : null}
        </div>

        <div className="mt-3 flex flex-wrap gap-4 text-xs text-text-soft">
          <span className="flex items-center gap-2">
            <span className="h-2.5 w-2.5 rounded-sm bg-success" />
            Uptime
          </span>
          <span className="flex items-center gap-2">
            <span className="h-2.5 w-2.5 rounded-sm bg-danger" />
            Downtime or degraded
          </span>
        </div>
      </div>

      <div className="grid gap-4 lg:grid-cols-3">
        {checks.map((check) => (
          <article className="rounded-lg border border-border bg-fury-white p-5 shadow-sm" key={check.name}>
            <div className="flex items-start justify-between gap-3">
              <div>
                <h2 className="text-lg font-semibold">{check.name}</h2>
                <p className="mt-1 text-sm text-text-soft">{check.detail}</p>
              </div>
              <span
                className={`shrink-0 rounded-md px-2 py-1 text-xs font-semibold ${check.ok
                  ? 'bg-surface text-fury-cyan'
                  : 'bg-fury-ice text-fury-violet'
                  }`}
              >
                {check.ok ? 'Online' : 'Issue'}
              </span>
            </div>
            <p className="mt-5 text-sm font-semibold">{check.label}</p>
            <p className="mt-1 text-xs text-text-soft">{formatNumber(check.latency)} ms response window</p>
          </article>
        ))}

        {!checks.length ? (
          <p className="rounded-lg border border-border bg-fury-white px-5 py-10 text-sm text-text-soft shadow-sm lg:col-span-3">
            Checking website status
          </p>
        ) : null}
      </div>
    </section>
  )
}

export default App