import tailwindcss from "@tailwindcss/vite";

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: "2025-05-15",
  devtools: { enabled: true },
  modules: [
    "@nuxt/eslint",
    "@nuxt/icon",
    "@nuxt/image",
    "@nuxt/fonts",
    "@nuxtjs/color-mode",
    "shadcn-nuxt",
    "@nuxtjs/i18n",
    "@vueuse/nuxt",
    "@pinia/nuxt",
    "pinia-plugin-persistedstate/nuxt",
    "@pinia/colada-nuxt",
    "nuxt-swiper",
    "nuxt-lottie",
    "nuxt-delay-hydration",
    "@nuxtjs/sitemap",
    "@nuxtjs/robots",
    "nuxt-schema-org",
    "nuxt-utm",
    "nuxt-user-country",
    "@nuxtjs/leaflet",
  ],

  css: [
    "~/assets/css/main.css",
    "~/assets/css/tailwind.css",
    "~/assets/css/page-transitions.css",
  ],

  // Nuxt Image Configuration
  image: {
    format: ["avif", "webp"],
    quality: 80,
    domains: ["admin.p4.webstdy.com", "picsum.photos"],
    presets: {
      default: {
        modifiers: {
          format: "webp",
          quality: 80,
        },
      },
    },
  },

  runtimeConfig: {
    public: {
      // apiBase: "https://admin.p4.webstdy.com/api/",
      apiBase: "https://admin.webstdy.com/api/",
      BASE_URL: "https://webstdy.com",
      // GTM container ID used by deferred client plugin
      // gtmId: "GTM-MCLRLRW",
    },
  },

  sitemap: {
    sources: ["/api/__sitemap__/urls"],
  },

  i18n: {
    // Module Options
    // TODO : Enhance importing JSON files in each language
    baseUrl: "https://webstdy.com",
    locales: [
      {
        code: "en",
        language: "en",
        name: "EN",
        dir: "ltr",
        files: [
          "en/general.json",
          "en/blogs.json",
          "en/forms.json",
          "en/sections.json",
          "en/about.json",
          "en/home.json",
          "en/join-us.json",
          "en/heros.json",
          "en/digital-marketing.json",
          "en/our-projects.json",
          "en/mobile-applications.json",
          "en/web-applications.json",
          "en/campaign.json",
          "en/privacy-policy.json",
          "en/terms-and-conditions.json",
          "en/seo.json",
        ],
      },
      {
        code: "ar",
        language: "ar",
        name: "AR",
        dir: "rtl",
        files: [
          "ar/general.json",
          "ar/blogs.json",
          "ar/forms.json",
          "ar/sections.json",
          "ar/about.json",
          "ar/home.json",
          "ar/join-us.json",
          "ar/heros.json",
          "ar/digital-marketing.json",
          "ar/our-projects.json",
          "ar/mobile-applications.json",
          "ar/web-applications.json",
          "ar/campaign.json",
          "ar/privacy-policy.json",
          "ar/terms-and-conditions.json",
          "ar/seo.json",
        ],
      },
    ],
    defaultLocale: "ar",
    defaultDirection: "rtl",
    langDir: "locales",
    strategy: "prefix_and_default",
    lazy: true,
    detectBrowserLanguage: false,
    skipSettingLocaleOnNavigate: true,
    bundle: {
      optimizeTranslationDirective: false,
    },
  },

  shadcn: {
    /**
     * Prefix for all the imported component
     */
    prefix: "",
    /**
     * Directory that the component lives in.
     * @default "./components/ui"
     */
    componentDir: "./components/ui",
  },

  colorMode: {
    preference: "system",
    fallback: "dark",
    classSuffix: "",
  },

  routeRules: {
    "/**": { isr: 60 },
    "/ar": { isr: 60 },
    "/en": { isr: 60 },
    "/campaign": { isr: 60 },
    "/en/campaign": { isr: 60 },
    "/ar/portfolio": {
      redirect: {
        to: `/ar/our-projects`,
        statusCode: 308,
      },
    },
    "/en/portfolio": {
      redirect: {
        to: `/en/our-projects`,
        statusCode: 308,
      },
    },
    "/ar/services/websites-apps-maintenance": {
      redirect: {
        to: `/ar/services/web-applications`,
        statusCode: 308,
      },
    },
    "/en/services/websites-apps-maintenance": {
      redirect: {
        to: `/en/services/web-applications`,
        statusCode: 308,
      },
    },
    "/ar/service/7": {
      redirect: {
        to: `/ar/services`,
        statusCode: 308,
      },
    },
    "/en/service/7": {
      redirect: {
        to: `/en/services`,
        statusCode: 308,
      },
    },
    "/ar/services/mobile-apps-development": {
      redirect: {
        to: `/ar/services/mobile-applications`,
        statusCode: 308,
      },
    },
    "/en/services/mobile-apps-development": {
      redirect: {
        to: `/en/services/mobile-applications`,
        statusCode: 308,
      },
    },
    "/ar/services/digital-marketing": {
      redirect: {
        to: `/ar/services/digital-marketing`,
        statusCode: 308,
      },
    },
    "/en/services/digital-marketing": {
      redirect: {
        to: `/en/services/digital-marketing`,
        statusCode: 308,
      },
    },
    "/ar/index-test": {
      redirect: {
        to: `/ar/`,
        statusCode: 308,
      },
    },
    "/en/index-test": {
      redirect: {
        to: `/en/`,
        statusCode: 308,
      },
    },
    "/ar/services/brand-identity-design": {
      redirect: {
        to: `/ar/services`,
        statusCode: 308,
      },
    },
    "/en/services/brand-identity-design": {
      redirect: {
        to: `/en/services`,
        statusCode: 308,
      },
    },
    "/ar/online-meeting-request": {
      redirect: {
        to: `/ar/`,
        statusCode: 308,
      },
    },
    "/en/online-meeting-request": {
      redirect: {
        to: `/en/`,
        statusCode: 308,
      },
    },
  },

  vite: {
    plugins: [tailwindcss()],
  },

  schemaOrg: {
    debug: true,
    reactive: false,
    identity: {
      type: "Organization",
      name: "WebSTDY",
    },
  },

  lottie: {
    componentName: "Lottie",
    lottieFolder: "/assets/lottie",
  },

  delayHydration: {
    // enables nuxt-delay-hydration in dev mode for testing
    // NOTE: you should disable this once you've finished testing, it will break HMR
    debug: process.env.NODE_ENV === "development",
    mode: "init",
  },

  hooks: {
    "build:manifest": (manifest) => {
      Object.values(manifest).forEach((item) => {
        item.css = [];
        item.prefetch = false;
        item.preload = false;
      });
    },
  },
  app: {
    head: {
      link: [
        {
          rel: "icon",
          type: "image/x-icon",
          sizes: "32x32",
          href: "/favicon.ico",
        },
      ],
    },
  },

  $production: {
    app: {
      head: {
        script: [
          {
            innerHTML: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-MCLRLRW');`,
            type: "text/javascript",
          },
        ],
        noscript: [
          {
            innerHTML: `<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MCLRLRW" height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
            body: true,
          },
        ],
      },
    },
  },
});
