import inertia from '@inertiajs/vite';
import { wayfinder } from '@laravel/vite-plugin-wayfinder';
import tailwindcss from '@tailwindcss/vite';
import vue from '@vitejs/plugin-vue';
import laravel from 'laravel-vite-plugin';
import { bunny } from 'laravel-vite-plugin/fonts';
import { defineConfig, loadEnv } from 'vite';
import { VitePWA } from 'vite-plugin-pwa';

const manifestIcons = [
    {
        src: '/assets/pwa-64x64.png',
        sizes: '64x64',
        type: 'image/png',
    },
    {
        src: '/assets/pwa-192x192.png',
        sizes: '192x192',
        type: 'image/png',
    },
    {
        src: '/assets/pwa-512x512.png',
        sizes: '512x512',
        type: 'image/png',
        purpose: 'any',
    },
    {
        src: '/assets/maskable-icon-512x512.png',
        sizes: '512x512',
        type: 'image/png',
        purpose: 'maskable',
    },
] as const;

const publicIcons = [
    { src: '/favicon.ico' },
    { src: '/favicon.svg' },
    { src: '/assets/apple-touch-icon-180x180.png' },
    { src: '/assets/logo.png' },
];

export default defineConfig(({ mode }) => {
    const env = loadEnv(mode, process.cwd(), '');
    const appName = env.VITE_APP_NAME || 'DST Collection';

    return {
        plugins: [
            laravel({
                input: ['resources/css/app.css', 'resources/js/app.ts'],
                refresh: true,
                fonts: [
                    bunny('Instrument Sans', {
                        weights: [400, 500, 600],
                    }),
                ],
            }),
            inertia(),
            tailwindcss(),
            vue({
                template: {
                    transformAssetUrls: {
                        base: null,
                        includeAbsolute: false,
                    },
                },
            }),
            wayfinder({
                formVariants: true,
            }),
            VitePWA({
                buildBase: '/build/',
                scope: '/',
                base: '/',
                registerType: 'autoUpdate',
                devOptions: {
                    enabled: false,
                },
                includeAssets: [],
                workbox: {
                    globPatterns: [
                        '**/*.{js,css,html,ico,jpg,png,svg,woff,woff2,ttf,eot}',
                    ],
                    navigateFallback: '/',
                    navigateFallbackDenylist: [/^\/telescope/],
                    additionalManifestEntries: [
                        { url: '/', revision: `${Date.now()}` },
                        ...manifestIcons.map((icon) => ({
                            url: icon.src,
                            revision: `${Date.now()}`,
                        })),
                        ...publicIcons.map((icon) => ({
                            url: icon.src,
                            revision: `${Date.now()}`,
                        })),
                    ],
                    maximumFileSizeToCacheInBytes: 3_000_000,
                },
                manifest: {
                    name: appName,
                    short_name: appName,
                    description: `${appName} - Progressive Web App`,
                    theme_color: '#171717',
                    background_color: '#ffffff',
                    display: 'standalone',
                    orientation: 'portrait',
                    scope: '/',
                    start_url: '/',
                    id: '/',
                    icons: [...manifestIcons],
                },
            }),
        ],
    };
});