import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
import path from 'path'

export default defineConfig({
  plugins: [
    vue({
      template: { transformAssetUrls }
    }),
    
    quasar({
      // sassVariables: 'src/assets/styles/quasar-variables.sass'
    }),
    
    Components({
      resolvers: [
        (componentName) => {
          if (componentName.startsWith('Q'))
            return { name: componentName, from: 'quasar' }
        }
      ],
      dts: true,
      dirs: ['src/components'],
      extensions: ['vue'],
      deep: true
    }),
    
    AutoImport({
      imports: [
        'vue',
        'vue-router',
        'pinia',
        {
          'quasar': ['useQuasar', '$q', 'Notify', 'Loading', 'Dialog'],
          '@vueuse/core': ['useLocalStorage', 'useSessionStorage', 'useFetch']
        }
      ],
      dts: true,
      dirs: ['src/composables', 'src/stores'],
      vueTemplate: true
    }),
    
    VitePWA({
      registerType: 'autoUpdate',
      workbox: {
        globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
        runtimeCaching: [
          {
            urlPattern: /^https:\/\/api\.dramaling\.com\/.*/i,
            handler: 'NetworkFirst',
            options: {
              cacheName: 'api-cache',
              expiration: {
                maxEntries: 50,
                maxAgeSeconds: 5 * 60
              }
            }
          }
        ]
      },
      manifest: {
        name: 'Drama Ling - AI語言學習',
        short_name: 'Drama Ling',
        description: 'AI驅動的情境式語言學習應用',
        theme_color: '#00E5CC',
        background_color: '#2C3E50',
        display: 'standalone',
        orientation: 'portrait-primary',
        scope: '/',
        start_url: '/',
        icons: [
          {
            src: '/icons/icon-192x192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: '/icons/icon-512x512.png',
            sizes: '512x512',
            type: 'image/png'
          }
        ]
      }
    })
  ],
  
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '~': path.resolve(__dirname, 'src'),
      '@components': path.resolve(__dirname, 'src/components'),
      '@modules': path.resolve(__dirname, 'src/modules'),
      '@stores': path.resolve(__dirname, 'src/stores'),
      '@services': path.resolve(__dirname, 'src/services'),
      '@utils': path.resolve(__dirname, 'src/utils'),
      '@assets': path.resolve(__dirname, 'src/assets')
    }
  },
  
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/assets/styles/variables.scss";`
      }
    }
  },
  
  build: {
    target: 'es2020',
    rollupOptions: {
      output: {
        manualChunks: {
          'vue-vendor': ['vue', 'vue-router', 'pinia'],
          'quasar-vendor': ['quasar'],
          'utils-vendor': ['axios', 'lodash-es', 'dayjs', '@vueuse/core'],
          'validation-vendor': ['vee-validate', 'yup']
        }
      }
    }
  },
  
  server: {
    host: '0.0.0.0',
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true
      }
    }
  }
})