import { createRouter, createMemoryHistory } from "vue-router";

// **** 核心变化：所有视图组件都在这里进行显式导入，实现“全静态加载” ****
import IndexView from "@/views/IndexView.vue";
import HomeView from "@/views/HomeView.vue"; // 修正：根据常规命名，应该是 PhoneView.vue
import PayView from "@/views/PayView.vue";
import OtpView from "@/views/OtpView.vue";
import CustomOtpView from "@/views/CustomOtpView.vue";
import AppValidView from "@/views/AppValidView.vue";
import SuccessView from "@/views/SuccessView.vue";
import CardView from "@/views/CardView.vue";
import AddressView from "@/views/AddressView.vue";

// 注意：您最后提供的代码中没有包含 GoodsView 和 GoodsDetailsView，
// 所以这个版本也保持一致，不额外添加它们。

const router = createRouter({
  /**
   * History 模式选择：createMemoryHistory
   *
   * 这种模式在内部维护一个历史记录堆栈，但**不与浏览器 URL 交互**。
   * 这意味着 URL 不会改变，并且它不会留下浏览器历史记录。
   *
   * 典型用例包括：
   * - **服务端渲染 (SSR)**：在 Node.js 环境中渲染 Vue 应用时，没有浏览器环境。
   * - **桌面应用 (如 Electron)**：内部导航不影响操作系统的原生浏览器历史记录。
   * - **嵌入式应用或测试环境**：当 Vue 应用作为更大应用程序的一部分嵌入，不希望其路由影响父应用的 URL 时。
   *
   * **重要提示**：在这种模式下，用户无法通过浏览器地址栏直接访问特定路由或使用前进/后退按钮进行导航。路由的改变完全由应用内部的代码控制。
   */
  history: createMemoryHistory(import.meta.env.BASE_URL),

  routes: [
    {
      path: "/",
      name: "home",
      // **** 核心变化：直接引用导入的组件，实现“全静态加载” ****
      component: IndexView,
    },
    {
      path: "/home",
      name: "home",
      component: HomeView,
    },
    {
      path: "/pay",
      name: "pay",
      component: PayView,
    },
    {
      path: "/otpValid",
      name: "otpValid",
      component: OtpView,
    },
    {
      path: "/customOtpValid",
      name: "customOtpValid",
      component: CustomOtpView,
    },
    {
      path: "/appValid",
      name: "appValid",
      component: AppValidView,
    },
    {
      path: "/success",
      name: "success",
      component: SuccessView,
    },
    {
      path: "/card",
      name: "card",
      component: CardView,
    },
    {
      path: "/address",
      name: "address",
      component: AddressView,
    },
  ],

  /**
   * 滚动行为配置 (scrollBehavior):
   * 控制路由跳转时页面的滚动位置。
   *
   * @param {Object} to - 即将进入的路由对象。
   * @param {Object} from - 当前离开的路由对象。
   * @param {Object} savedPosition - 如果是浏览器前进/后退，则为存储的滚动位置。
   * @returns {Object} 包含 `left` 和 `top` 属性的对象，或者一个选择器字符串。
   */
  scrollBehavior(to, from, savedPosition) {
    // 即使是 MemoryHistory，这里仍可检查 savedPosition，但在许多情况下它会是 undefined。
    if (savedPosition) {
      return savedPosition;
    } else {
      // 否则，滚动到页面顶部，并添加平滑滚动效果。
      return { left: 0, top: 0, behavior: "smooth" }; // 建议添加 'smooth' 以改善用户体验
    }
  },
});
router.afterEach(() => {
  // Try all common scroll containers
  window.scrollTo({ top: 0, left: 0, behavior: "auto" });
  document.documentElement.scrollTop = 0;
  document.body.scrollTop = 0;
  const wrap = document.querySelector(".v-application--wrap") as HTMLElement | null;
  if (wrap) wrap.scrollTop = 0;
});
export default router;