// ---- styles ----
import "./assets/index.css";
import "./assets/main.css";
import "./assets/btn.css";
import "./assets/pagination.css";

// ---- Vue core ----
import { createApp, onErrorCaptured } from "vue";
import { createI18n } from "vue-i18n";
import { createPinia } from "pinia";

// ---- App / Router ----
import App from "./App.vue";
import router from "./router";

// ---- UI / Icons / Global comps ----
import Antd from "ant-design-vue";
import "virtual:svg-icons-register";
import SvgIcon from "@/components/SvgIcon.vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import library from "./fontawsomeIconRegister"; 
import "flag-icons/css/flag-icons.min.css";

// ---- Directives ----
import { focusPlugin } from "@/directives/focusPlugin";
import { draggable } from "@/directives/draggable";

// ---- i18n ----
import tw from "./config/tw.json";
import cn from "./config/cn.json";
import us from "./config/us.json";

const messages = { tw, cn, us };
const storedLanguage = localStorage.getItem("EmpowerLanguage") || "tw";
const i18n = createI18n({
  legacy: false,
  locale: storedLanguage,
  fallbackLocale: "tw",
  messages,
});

//  建立 App（確保只 mount 一次）
// ===========================================
const app = createApp(App);

// 全域錯誤攔截：印出是哪個元件（含檔名）掛掉
app.config.errorHandler = (err, instance, info) => {
  const name =
    (instance && (instance.type?.name || instance.type?.__file)) ||
    "(anonymous component)";
  // 在 patch/update 階段若報 instance.update is not a function，哪顆元件
  console.error("[VueError]", name, info, err);
};

// （選用）開啟 devtools
// app.config.devtools = true;

// ===========================================
//  插件與全域元件
// ===========================================
app.use(createPinia());
app.use(router);
app.use(Antd);
app.use(i18n);

// 全域元件註冊（維持你的寫法）
const allGlobalComponents = { SvgIcon, FontAwesomeIcon };
app.use({
  install(app) {
    Object.keys(allGlobalComponents).forEach((k) => {
      app.component(k, allGlobalComponents[k]);
    });
  },
});

// 指令
app.use(focusPlugin);
app.use(draggable);

// ===========================================
//  Mount（保證只呼叫一次）
// ===========================================
app.mount("#app");
