import { createApp } from "vue";
import "../styles/tailwind.css";
import "../styles/transitions.css";
import "../styles/style.css";
import App from "./App.vue";
import { createRouter, createWebHistory } from "vue-router";
import { registerServiceWorker, subscribeToPushNotifications } from "./lib/pwa-utils";

// Initialize PWA functionality
async function initPWA() {
  // Register service worker
  const registration = await registerServiceWorker();
  
  // Check if push notifications are enabled
  if (registration && 
      localStorage.getItem("notificationsEnabled") === "true" && 
      Notification.permission === "granted") {
    try {
      await subscribeToPushNotifications();
      console.log("Push notifications subscription successful");
    } catch (error) {
      console.error("Failed to subscribe to push notifications:", error);
    }
  }
}

// Register service worker and initialize PWA
initPWA();

const router = createRouter({
  // createWebHistory is like BrowserRouter in React Router
  history: createWebHistory(),
  routes: [
    {
      path: "/",
      // Dynamic imports for code splitting - similar to React.lazy
      // In React: const Dashboard = React.lazy(() => import('./pages/Dashboard'))
      component: () => import("./pages/Dashboard.vue"),
      meta: { requiresAuth: true },
    },
    {
      path: "/about",
      component: () => import("./pages/About.vue"),
    },
    {
      path: "/login",
      component: () => import("./pages/Login.vue"),
    },
    // Budget manager routes
    {
      path: "/transactions",
      component: () => import("./pages/Transactions.vue"),
      meta: { requiresAuth: true },
    },
    {
      path: "/add",
      component: () => import("./pages/AddTransaction.vue"),
      meta: { requiresAuth: true },
    },
    {
      path: "/edit/:id",
      component: () => import("./pages/EditTransaction.vue"),
      meta: { requiresAuth: true },
    },
    {
      path: "/reports",
      component: () => import("./pages/Reports.vue"),
      meta: { requiresAuth: true },
    },
    {
      path: "/settings",
      component: () => import("./pages/Settings.vue"),
      meta: { requiresAuth: true },
    },
    {
      path: "/categories",
      component: () => import("./pages/Categories.vue"),
      meta: { requiresAuth: true },
    },
    {
      path: "/admin/categories",
      component: () => import("./pages/AdminCategories.vue"),
      meta: { requiresAuth: true, requiresAdmin: true },
    },
  ],
});

// Import Pinia store
import { createPinia } from "pinia";

// Create Pinia store instance
const pinia = createPinia();

// Router guards
router.beforeEach(async (to, _from, next) => {
  // Import auth store dynamically to avoid circular dependency issues
  const { useAuthStore } = await import("./stores/auth");
  const authStore = useAuthStore();

  // Check if route requires authentication
  if (to.meta.requiresAuth && !authStore.isAuthenticated) {
    next("/login");
    return;
  }

  // Check if route requires admin access
  if (to.meta.requiresAdmin && authStore.user?.role !== "admin") {
    next("/");
    return;
  }

  next();
});

createApp(App) // Create Vue app instance with root component
  .use(router) // Add the router to the app (like wrapping with <RouterProvider>)
  .use(pinia) // Add Pinia store (like wrapping with Redux Provider)
  .mount("#app"); // Mount to DOM element (like root.render())
