import { createVuetify } from 'vuetify'
import 'vuetify/styles'
import { aliases, fa } from 'vuetify/iconsets/fa'
import '@fortawesome/fontawesome-free/css/all.css'
import { en } from 'vuetify/locale'
import { defineNuxtPlugin } from '#app'

interface Theme {
  dark: boolean,
  colors: {
    'background': string,
    'on-background': string,
    'surface': string,
    'on-surface': string,
    'primary': string,
    'on-primary': string,
    'card-background': string,
  }
}

export const lightTheme: Theme = {
  dark: false,
  colors: {
    'background': '#f8f3e9', // Warm sand color
    'on-background': '#3a3a3a',
    'on-background--clickable': '#4d4d4d',

    'surface': '#fff9ed', // Light cream
    'on-surface': '#4d4d4d',

    'primary': '#5b88a5', // Ocean blue
    'on-primary': '#ffffff',
    'on-primary--clickable': '#e6e6e6',

    'card-background': '#ffffffd9', // White with 85% opacity (rgba(255, 255, 255, 0.85))
  }
}

export const darkTheme: Theme = {
  dark: true,
  colors: {
    'background': '#1a1a1a',
    'on-background': '#e6e6e6',
    'on-background--clickable': '#e6e6e6',

    'surface': '#262626',
    'on-surface': '#ffffff',

    'primary': '#7ba4d1',
    'on-primary': '#e6e6e6',
    'on-primary-alt--clickable': '#ffffff',

    'card-background': '#2a2a2ad9', // Dark gray with 85% opacity
  }
}

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    ssr: true,
    locale: {
      locale: 'en',
      messages: { en },
    },
    theme: {
      defaultTheme: 'light',
      themes: {
        light: lightTheme,
        dark: darkTheme
      },
    },
    icons: {
      defaultSet: 'fa',
      aliases,
      sets: {
        fa,
      },
    },
  })
  nuxtApp.vueApp.use(vuetify)
})