import { createApp } from "vue";
import App from "./App.vue";
import "@/styles/tailwind.css";
import "@/styles/style.css";
import Toast from "vue-toastification";
import "vue-toastification/dist/index.css";
import { router } from "./router/index.js";

const appEl = document.getElementById("app");

function mostrarErroInicial(err) {
  if (!appEl) return;
  if (appEl.dataset.mounted === "1") return;
  const msg = typeof err === "string" ? err : err?.message || String(err || "erro");
  appEl.textContent = `Erro ao iniciar: ${msg}`;
}

window.addEventListener("error", (e) => mostrarErroInicial(e?.error || e?.message));
window.addEventListener("unhandledrejection", (e) => mostrarErroInicial(e?.reason));

function aplicarTemaInicial() {
  let salvo = null;
  try {
    salvo = localStorage.getItem("theme");
  } catch {
    salvo = null;
  }
  const tema =
    salvo === "dark" || salvo === "light"
      ? salvo
      : window.matchMedia?.("(prefers-color-scheme: dark)")?.matches
        ? "dark"
        : "light";

  document.documentElement.classList.toggle("dark", tema === "dark");
}

aplicarTemaInicial();

const toastOptions = {
  position: "top-right",
  timeout: 4000,
  closeOnClick: true,
  pauseOnFocusLoss: true,
  pauseOnHover: true,
  draggable: true,
  showCloseButtonOnHover: false,
  hideProgressBar: false,
  closeButton: "button",
  icon: true,
  rtl: false,
};

const app = createApp(App);
app.use(router);
app.use(Toast, toastOptions);
app.mount("#app");
if (appEl) appEl.dataset.mounted = "1";