import path from "node:path";
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
import vue from "@vitejs/plugin-vue";
import { VitePWA } from "vite-plugin-pwa";

export default defineConfig({
  base: "./",
  root: path.resolve(__dirname, "apps/demo"),
  publicDir: path.resolve(__dirname, "public"),
  define: {
    __NVR_BUILD_ID__: JSON.stringify(new Date().toISOString()),
  },
  server: {
    // iOS Safari can otherwise retain a tunnelled development response after
    // the dev server has restarted with a new build.
    headers: { "Cache-Control": "no-store" },
    allowedHosts: ["demo.native-router.harvmaster.com"],
  },
  preview: {
    // Production hosts should apply the same policy at least to index.html and
    // sw.js. Fingerprinted assets can use immutable caching when deployed.
    headers: { "Cache-Control": "no-cache" },
  },
  plugins: [
    vue(),
    tailwindcss(),
    VitePWA({
      registerType: "autoUpdate",
      devOptions: {
        enabled: true,
        navigateFallback: "index.html",
        suppressWarnings: true,
      },
      includeAssets: [
        "favicon.svg",
        "app-icon.svg",
        "apple-touch-icon.png",
        "pwa-192.png",
        "pwa-512.png",
      ],
      manifest: {
        id: "/",
        name: "Native Vue Messenger",
        short_name: "NVR Messenger",
        description: "Gesture-first navigation for Vue applications",
        theme_color: "#0b0d12",
        background_color: "#0b0d12",
        display: "standalone",
        scope: "/",
        orientation: "any",
        start_url: "/",
        icons: [
          {
            src: "/pwa-192.png",
            sizes: "192x192",
            type: "image/png",
            purpose: "any",
          },
          {
            src: "/pwa-512.png",
            sizes: "512x512",
            type: "image/png",
            purpose: "any",
          },
          {
            src: "/pwa-512.png",
            sizes: "512x512",
            type: "image/png",
            purpose: "maskable",
          },
          {
            src: "/app-icon.svg",
            sizes: "any",
            type: "image/svg+xml",
            purpose: "any",
          },
        ],
      },
      workbox: {
        cleanupOutdatedCaches: true,
        clientsClaim: true,
        skipWaiting: true,
        navigateFallback: "/index.html",
        globPatterns: ["**/*.{js,css,html,svg,png,woff2}"],
      },
    }),
  ],
  resolve: {
    alias: [
      {
        find: /^@\/(.*)$/,
        replacement: `${path.resolve(__dirname, "apps/demo/src")}/$1`,
      },
      {
        find: /^@native-vue-router\/core$/,
        replacement: path.resolve(__dirname, "packages/core/src/index.ts"),
      },
      {
        find: /^@native-vue-router\/preset-native$/,
        replacement: path.resolve(
          __dirname,
          "packages/preset-native/src/index.ts",
        ),
      },
      {
        find: /^@native-vue-router\/capacitor$/,
        replacement: path.resolve(__dirname, "packages/capacitor/src/index.ts"),
      },
      {
        find: /^@native-vue-router\/electron$/,
        replacement: path.resolve(__dirname, "packages/electron/src/index.ts"),
      },
    ],
  },
  build: {
    outDir: path.resolve(__dirname, "apps/demo/dist"),
    emptyOutDir: true,
  },
});