;(async function() {
  //App
  return new Vue({
    //Initialization
    el: "main",
    async mounted() {
      //Palette
      try {
        this.palette = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
        if (localStorage.getItem("session.metrics"))
          axios.defaults.headers.common["x-metrics-session"] = localStorage.getItem("session.metrics")
      }
      catch (error) {}
      //Embed
      this.embed = !!(new URLSearchParams(location.search).get("embed"))
      //From local storage
      this.localstorage = !!(new URLSearchParams(location.search).get("localstorage"))
      //User
      const user = location.pathname.split("/").pop()
      if ((user) && (!["about", "insights"].includes(user))) {
        this.user = user
        await this.search()
      }
      else {
        const user = new URLSearchParams(location.search).get("user")
        this.searchable = true
        if (user) {
          this.user = user
          this.search()
        }
      }
      //Init
      await Promise.all([
        //GitHub limit tracker
        (async () => {
          const {data: requests} = await axios.get("/.requests")
          this.requests = requests
          if (!requests.login) {
            localStorage.removeItem("session.metrics")
            delete axios.defaults.headers.common["x-metrics-session"]
          }
        })(),
        //Version
        (async () => {
          const {data: version} = await axios.get("/.version")
          this.version = `v${version}`
        })(),
        //Hosted
        (async () => {
          const {data: hosted} = await axios.get("/.hosted")
          this.hosted = hosted
        })(),
        //OAuth
        (async () => {
          const {data: enabled} = await axios.get("/.oauth/enabled")
          this.oauth = enabled
        })(),
      ])
    },
    //Watchers
    watch: {
      palette: {
        immediate: true,
        handler(current, previous) {
          document.querySelector("body").classList.remove(previous)
          document.querySelector("body").classList.add(current)
        },
      },
    },
    //Methods
    methods: {
      format(type, value, options) {
        switch (type) {
          case "plural":
            if (options?.y)
              return (value !== 1) ? "ies" : "y"
            return (value !== 1) ? "s" : ""
          case "number":
            return new Intl.NumberFormat(navigator.lang, options).format(value)
          case "date":
            return new Intl.DateTimeFormat(navigator.lang, options).format(new Date(value))
          case "comment":
            const baseUrl = String.raw`https?:\/\/(?:www\.)?github.com\/([\w.-]+\/[\w.-]+)\/`
            return value
              .replace(
                RegExp(baseUrl + String.raw`(?:issues|pull|discussions)\/(\d+)(?:\?[\w-]+)?(#[\w-]+)?(?=<)`, "g"),
                (_, repo, id, comment) => (options?.repo === repo ? "" : repo) + `#${id}` + (comment ? ` (comment)` : ""),
              ) // -> 'lowlighter/metrics#123'
              .replace(
                RegExp(baseUrl + String.raw`commit\/([\da-f]+)(?=<)`, "g"),
                (_, repo, sha) => (options?.repo === repo ? "" : repo + "@") + sha,
              ) // -> 'lowlighter/metrics@123abc'
              .replace(
                RegExp(baseUrl + String.raw`compare\/([\w-.]+...[\w-.]+)(?=<)`, "g"),
                (_, repo, tags) => (options?.repo === repo ? "" : repo + "@") + tags,
              ) // -> 'lowlighter/metrics@1.0...1.1'
              .replace(
                /[^&]#(\d+)/g,
                (_, id) => `<a href="https://github.com/${options?.repo}/issues/${id}">#${id}</a>`,
              ) // -> #123
              .replace(
                /@([-\w]+)/g,
                (_, user) => `<a href="https://github.com/${user}">@${user}</a>`,
              ) // -> @user
        }
        return value
      },
      async search() {
        try {
          this.error = null
          this.metrics = null
          this.pending = true
          if (this.localstorage) {
            this.metrics = JSON.parse(localStorage.getItem("local.metrics") ?? "null")
            this.loaded = ["base", ...Object.keys(this.metrics?.rendered?.plugins ?? {})]
            return
          }
          const {processing, ...data} = (await axios.get(`/insights/query/${this.user}`)).data
          if (processing) {
            let completed = 0
            this.progress = 1 / (data.plugins.length + 1)
            this.loaded = []
            const retry = async (plugin, attempts = 60, interval = 10) => {
              if (this.loaded.includes(plugin))
                return
              do {
                try {
                  const {data} = await axios.get(`/insights/query/${this.user}/${plugin}`)
                  if (!data)
                    throw new Error(`${plugin}: no data`)
                  if (plugin === "base")
                    this.metrics = {rendered: data, mime: "application/json", errors: []}
                  else
                    Object.assign(this.metrics.rendered.plugins, {[plugin]: data})
                  break
                }
                catch {
                  console.warn(`${plugin}: no data yet, retrying in ${interval} seconds`)
                  await new Promise(solve => setTimeout(solve, interval * 1000))
                }
              }
              while (--attempts)
              completed++
              this.progress = completed / (data.plugins.length + 1)
              this.loaded.push(plugin)
            }
            await retry("base", 30, 5)
            await Promise.allSettled(data.plugins.map(plugin => retry(plugin)))
          }
          else {
            this.metrics = data
            this.loaded = ["base", ...Object.keys(this.metrics?.rendered?.plugins ?? {})]
          }
        }
        catch (error) {
          this.error = {code: error.response.status, message: error.response.data}
        }
        finally {
          this.pending = false
          try {
            const {data: requests} = await axios.get("/.requests")
            this.requests = requests
          }
          catch {}
        }
      },
    },
    //Computed properties
    computed: {
      params() {
        return new URLSearchParams({from: location.href})
      },
      warnings() {
        return Object.entries(this.metrics?.rendered.plugins ?? {}).map(([_, value]) => value?.error).filter(value => value)
      },
      stats() {
        return this.metrics?.rendered.user ?? null
      },
      sponsors() {
        return this.metrics?.rendered.plugins?.sponsors ?? null
      },
      ranked() {
        return this.metrics?.rendered.plugins?.achievements?.list?.filter(({leaderboard}) => leaderboard).sort((a, b) => a.leaderboard.type.localeCompare(b.leaderboard.type)) ?? []
      },
      achievements() {
        return this.metrics?.rendered.plugins?.achievements?.list?.filter(({leaderboard}) => !leaderboard).filter(({title}) => !/(?:automator|octonaut|infographile)/i.test(title)) ?? []
      },
      introduction() {
        return this.metrics?.rendered.plugins?.introduction?.text ?? ""
      },
      followup() {
        return this.metrics?.rendered.plugins?.followup ?? null
      },
      calendar() {
        if (this.metrics?.rendered.plugins?.calendar) {
          return Object.assign(this.metrics?.rendered.plugins?.calendar, {
            color(c) {
              return {
                "#ebedf0": "var(--color-calendar-graph-day-bg)",
                "#9be9a8": "var(--color-calendar-graph-day-L1-bg)",
                "#40c463": "var(--color-calendar-graph-day-L2-bg)",
                "#30a14e": "var(--color-calendar-graph-day-L3-bg)",
                "#216e39": "var(--color-calendar-graph-day-L4-bg)",
              }[c] ?? c
            },
          })
        }
        return null
      },
      isocalendar() {
        return (this.metrics?.rendered.plugins?.isocalendar?.svg ?? "")
          .replace(/#ebedf0/gi, "var(--color-calendar-graph-day-bg)")
          .replace(/#9be9a8/gi, "var(--color-calendar-graph-day-L1-bg)")
          .replace(/#40c463/gi, "var(--color-calendar-graph-day-L2-bg)")
          .replace(/#30a14e/gi, "var(--color-calendar-graph-day-L3-bg)")
          .replace(/#216e39/gi, "var(--color-calendar-graph-day-L4-bg)")
      },
      languages() {
        return Object.assign(this.metrics?.rendered.plugins?.languages?.favorites ?? [], {total: this.metrics?.rendered.plugins?.languages.total})
      },
      reactions() {
        return this.metrics?.rendered.plugins?.reactions ?? null
      },
      repositories() {
        return this.metrics?.rendered.plugins?.repositories?.list ?? []
      },
      stars() {
        return {repositories: this.metrics?.rendered.plugins?.stars?.repositories.map(({node, starredAt}) => ({...node, starredAt})) ?? []}
      },
      topics() {
        return this.metrics?.rendered.plugins?.topics?.list ?? []
      },
      activity() {
        return this.metrics?.rendered.plugins?.activity?.events ?? []
      },
      contributions() {
        return this.metrics?.rendered.plugins?.notable?.contributions ?? []
      },
      account() {
        if (!this.metrics)
          return null
        const {login, name} = this.metrics?.rendered.user
        return {login, name, avatar: this.metrics?.rendered.computed.avatar, type: this.metrics?.rendered.account}
      },
      url() {
        return `${window.location.protocol}//${window.location.host}/insights/${this.user}`
      },
      preview() {
        return /-preview$/.test(this.version)
      },
      beta() {
        return /-beta$/.test(this.version)
      },
      rlreset() {
        const reset = new Date(Math.max(this.requests.graphql.reset, this.requests.rest.reset))
        return `${reset.getHours()}:${reset.getMinutes()}`
      },
    },
    //Data initialization
    data: {
      version: "",
      hosted: null,
      user: "",
      embed: false,
      localstorage: false,
      searchable: false,
      requests: {rest: {limit: 0, used: 0, remaining: 0, reset: NaN}, graphql: {limit: 0, used: 0, remaining: 0, reset: NaN}, search: {limit: 0, used: 0, remaining: 0, reset: NaN}},
      palette: "light",
      metrics: null,
      pending: false,
      oauth: false,
      error: null,
      config: {},
      progress: 0,
      loaded: [],
    },
  })
})()