// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: process.env.NODE_ENV === "development" },
  // "nuxt-swiper",
  modules: [
    "nuxt-swiper",
    "@nuxtjs/i18n",
    "@nuxt/image",
    "nuxt-gtag",
    "@nuxt/fonts",
    "nuxt-delay-hydration",
    "@nuxtjs/sitemap",
  ],
  plugins: [
    // sweetalert2 is imported directly in jobs.vue, no need for global plugin
    { src: "~/plugins/vuetify.js", mode: "client" },
    { src: "~/plugins/primevue.ts", mode: "client" },
    "~/plugins/pinia.js",
    "~/plugins/axios.js",
  ],

  // Experimental features for better performance
  experimental: {
    payloadExtraction: true,
    renderJsonPayloads: true,
    treeshakeClientOnly: true,
    componentIslands: true, // Enable islands for partial hydration
    headNext: true, // Better head management
  },

  image: {
    format: ["webp", "avif"],
    provider: "none",
    quality: 75, // Slightly lower quality for better performance
    presets: {
      default: {
        modifiers: {
          quality: 75,
        },
      },
      // Preset for car thumbnails
      carCard: {
        modifiers: {
          format: "webp",
          quality: 75,
          width: 400,
          height: 250,
        },
      },
      // Preset for brand logos
      brandLogo: {
        modifiers: {
          format: "webp",
          quality: 80,
          width: 100,
          height: 100,
        },
      },
    },
    screens: {
      xs: 320,
      sm: 640,
      md: 768,
      lg: 1024,
      xl: 1280,
      xxl: 1536,
    },
  },
  vite: {
    optimizeDeps: {
      exclude: [
        "@intlify/message-compiler",
      ],
    },
    build: {
      // Enable minification with esbuild (faster than terser)
      minify: "esbuild",
      // Target modern browsers for smaller bundles
      target: "es2020",
      // Code splitting for better caching
      rollupOptions: {
        output: {
          manualChunks: {
            "vendor-vue": ["vue", "vue-router", "pinia"],
            "vendor-vuetify": ["vuetify"],
            "vendor-swiper": ["swiper"],
            "vendor-utils": ["axios"],
          },
        },
      },
      // Reduce chunk size warnings threshold
      chunkSizeWarningLimit: 500,
      // CSS code splitting
      cssCodeSplit: true,
    },
    // CSS optimization
    css: {
      devSourcemap: false,
    },
    // Enable SSR optimization
    ssr: {
      noExternal: ["vuetify"],
    },
    // Disable esbuild warnings for cleaner output
    esbuild: {
      drop: ["console", "debugger"],
    },
  },
  //  aos: {
  //    // Initialize AOS
  //      once: true, // Animation happens only once
  //  },

  build: {
    transpile: ["vuetify"],
  },

  i18n: {
    // lazy: true,
    langDir: "locales",
    strategy: "prefix_and_default",
    detectBrowserLanguage: false,
    locales: [
      {
        code: "en",
        //  iso: "en",
        dir: "ltr",
        name: "english",
        file: "en.json",
      },
      {
        code: "ar",
        //  iso: "ar",
        dir: "rtl",
        name: "عربي",
        file: "ar.json",
      },
    ],
    defaultLocale: "ar",
  },

  gtag: {
    id: "G-5GGPXJLL8C",
  },

  // Sitemap configuration
  site: {
    url: "https://khalejauto.sa",
  },
  sitemap: {
    autoLastmod: true,
    defaults: {
      changefreq: "weekly",
      priority: 0.8,
    },
    // Dynamic URLs from API
    sources: [
      '/api/sitemap-urls',
    ],
    // Static routes with priorities
    urls: [
      { loc: "/", priority: 1.0, changefreq: "daily" },
      { loc: "/market", priority: 0.9, changefreq: "daily" },
      { loc: "/cars", priority: 0.9, changefreq: "daily" },
      { loc: "/offers", priority: 0.9, changefreq: "daily" },
      { loc: "/blogs", priority: 0.8, changefreq: "weekly" },
      { loc: "/contact", priority: 0.7, changefreq: "monthly" },
      { loc: "/about", priority: 0.7, changefreq: "monthly" },
      { loc: "/jobs", priority: 0.7, changefreq: "weekly" },
      { loc: "/terms", priority: 0.3, changefreq: "yearly" },
      { loc: "/policy", priority: 0.3, changefreq: "yearly" },
    ],
    exclude: [
      "/api/**",
      "/order-company",
      "/order-individuals",
      "/wishlist",
      "/en/order-company",
      "/en/order-individuals",
      "/en/wishlist",
    ],
  },

  // target: 'static',
  ssr: true,

  nitro: {
    // preset: "static",
    compressPublicAssets: true,

    //  prerender: {
    //    crawlLinks: true,
    //    failOnError: false,
    //  },
    minify: true,
    routeRules: {
      // Robots.txt route
      "/robots.txt": {
        headers: { "Content-Type": "text/plain" },
      },
      // Cache static assets for 1 year
      "/_nuxt/**": {
        headers: { "Cache-Control": "public, max-age=31536000, immutable" },
      },
      // Cache fonts for 1 year
      "/fonts/**": {
        headers: { "Cache-Control": "public, max-age=31536000, immutable" },
      },
      // Cache images for 1 year (they don't change)
      "/images/**": {
        headers: {
          "Cache-Control": "public, max-age=31536000, immutable",
        },
      },
      // Cache brand logos
      "/brands/**": {
        headers: {
          "Cache-Control": "public, max-age=31536000, immutable",
        },
      },
    },
  },

  delayHydration: {
    // enables nuxt-delay-hydration in dev mode for testing
    debug: process.env.NODE_ENV === "development",
    mode: "init", // Delays hydration until after first interaction
    replayClick: true, // Replay clicks that happened before hydration
  },

  fonts: {
    // Enable both Google and Local providers
    provider: undefined, // use both providers
    defaults: {
      weights: [400, 600, 700],
      styles: ["normal"],
      subsets: ["arabic", "latin"],
    },
    families: [
      {
        name: "Lama Sans",
        provider: "local",
        global: true,
      },
    ],
    // Fix font display to prevent FOIT (Flash of Invisible Text)
    display: "swap",
  },
  sourcemap: {
    server: process.env.NODE_ENV === "development",
    client: false, // Disable client sourcemaps in production for smaller bundle
  },

  app: {
    head: {
      htmlAttrs: {
        lang: "ar",
        dir: "rtl",
      },
      title: "الرئيسية - خليج أوتو",
      style: [
        // Critical CSS for hero section only (Bootstrap is bundled)
        {
          children: `
            .hero-section{width:100%;overflow:hidden;min-height:100vh}
            .slider{width:100%;height:100vh;min-height:400px;margin-top:-10px;position:relative;background:#1a1a2e;overflow:hidden}
            .hero-section .hero-picture,.hero-section .hero-placeholder{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1}
            .hero-placeholder{width:100%;height:100%;object-fit:cover}
            .hero-section .slider-iframe-wrap{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;overflow:hidden}
            .hero-section .slider-iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}
            .hero-section .loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background:rgba(0,0,0,.3);z-index:3}
          `,
        },
      ],
      meta: [
        { charset: "utf-8" },
        { name: "viewport", content: "width=device-width, initial-scale=1" },
        { name: "author", content: "khalej Auto" },
        { name: "robots", content: "index, follow" },
        { name: "theme-color", content: "#2D9596" },
        // Open Graph
        { property: "og:title", content: "khalej Auto" },
        { property: "og:site_name", content: "khalej Auto" },
        { property: "og:url", content: "https://khalejauto.sa/" },
        { property: "og:type", content: "business.business" },
        {
          property: "og:image",
          content: "https://khalejauto.sa/_nuxt/mainLogo-rtl.BJ0Ys74P.svg",
        },
        { property: "og:locale", content: "ar_SA" },
        // Twitter
        { name: "twitter:card", content: "summary_large_image" },
        { name: "twitter:site", content: "@khalejauto" },
        { name: "twitter:creator", content: "@khalejauto" },
      ],
      link: [
        { rel: "icon", type: "image/svg", href: "/favicon.svg" },
        { rel: "canonical", href: "https://khalejauto.sa/" },
        // Preconnect to API domain for faster API calls
        { rel: "preconnect", href: "https://new.khalejauto.sa", crossorigin: "anonymous" },
        { rel: "dns-prefetch", href: "https://new.khalejauto.sa" },
        // Preload hero image for fast LCP (WebP for modern browsers)
        {
          rel: "preload",
          href: "/images/hero.webp",
          as: "image",
          type: "image/webp",
        },
        // Preload critical font with correct path
        {
          rel: "preload",
          href: "/fonts/lamasans-regular-webfont.woff2",
          as: "font",
          type: "font/woff2",
          crossorigin: "anonymous",
        },
      ],
      script: [
        {
          src: "/js/bootstrap.bundle.min.js",
          defer: true,
          async: true, // Load asynchronously to not block rendering
        },
        // NOTE: Organization and WebSite schemas are now managed in composables/seo.js
        // to avoid duplicate JSON-LD blocks. They are added via setPageSeo() on each page.
      ],
    },
  },

  css: [
    // Bootstrap must be bundled (not async) to prevent CLS
    "bootstrap/dist/css/bootstrap.min.css",
    "~/assets/styles/main.scss",
  ],

  compatibilityDate: "2025-05-18",
});
