import { createApp } from "vue";
import { createPinia } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
import App from "./App.vue";
import router from "./router";
import { registerFeature, useAreaSelection } from "stk-table-vue";
import "@/styles/index.css";
import "stk-table-vue/lib/style.css";
import "vue-sonner/style.css";

registerFeature(useAreaSelection);

const app = createApp(App);
const pinia = createPinia();

pinia.use(piniaPluginPersistedstate);
app.use(pinia);
app.use(router);

function showBootstrapError(error: unknown) {
  console.error("Application bootstrap failed", error);

  const boot = document.querySelector<HTMLElement>("#app-boot");
  const message = document.querySelector<HTMLElement>("#app-boot-message");
  const retry = document.querySelector<HTMLButtonElement>("#app-boot-retry");
  if (!boot || !message || !retry) return;

  boot.classList.add("app-boot--error");
  boot.setAttribute("aria-busy", "false");
  boot.setAttribute("aria-label", "应用加载失败");
  message.textContent = "应用加载失败，请检查网络后重试";
  message.hidden = false;
  retry.hidden = false;
  retry.addEventListener("click", () => window.location.reload(), { once: true });
}

async function bootstrap() {
  try {
    await router.isReady();
    app.mount("#app");
  } catch (error) {
    showBootstrapError(error);
  }
}

void bootstrap();