import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  env: {
    MEDOLS_CLIENT_KEY: process.env.MEDOLS_CLIENT_KEY,
  },
  images: {
    domains: ["mikulnews.com", "dev.mikulnews.com"],
  },
  eslint: {
    ignoreDuringBuilds: true,
  },
  webpack: (config, { isServer }) => {
    // Handle chunk loading errors
    config.optimization = {
      ...config.optimization,
      splitChunks: {
        ...config.optimization.splitChunks,
        chunks: 'all',
        cacheGroups: {
          ...config.optimization.splitChunks?.cacheGroups,
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all',
          },
          // Separate CKEditor chunks
          ckeditor: {
            test: /[\\/]node_modules[\\/]@ckeditor[\\/]/,
            name: 'ckeditor',
            chunks: 'all',
            priority: 20,
          },
          // Separate ApexCharts chunks
          apexcharts: {
            test: /[\\/]node_modules[\\/](apexcharts|react-apexcharts)[\\/]/,
            name: 'apexcharts',
            chunks: 'all',
            priority: 20,
          },
        },
      },
    };

    // Add error handling for chunk loading
    if (!isServer) {
      config.output = {
        ...config.output,
        chunkFilename: '[name].[chunkhash].js',
        filename: '[name].[chunkhash].js',
      };
    }

    return config;
  },
  // Add experimental features for better chunk handling
  experimental: {
    optimizePackageImports: ['@ckeditor/ckeditor5-react', 'react-apexcharts'],
  },
};

export default nextConfig;