import { createApp } from 'vue'
import { createPinia } from 'pinia'
import PrimeVue from 'primevue/config'
import Aura from '@primevue/themes/aura'
import { definePreset } from '@primevue/themes'
import ToastService from 'primevue/toastservice'
import 'primeicons/primeicons.css'
import './assets/theme.css'

import App from './App.vue'
import router from './router'

// Custom TradingView-matched dark theme
const TradingViewPreset = definePreset(Aura, {
  primitive: {
    // TV green palette built around #089981
    tvgreen: {
      50:  '#e6f7f5',
      100: '#b3e8e2',
      200: '#80d9cf',
      300: '#4dcabc',
      400: '#26bfaf',
      500: '#089981',
      600: '#077d69',
      700: '#056153',
      800: '#03453d',
      900: '#022926',
      950: '#011614'
    }
  },
  semantic: {
    primary: {
      50:  '{tvgreen.50}',
      100: '{tvgreen.100}',
      200: '{tvgreen.200}',
      300: '{tvgreen.300}',
      400: '{tvgreen.400}',
      500: '{tvgreen.500}',
      600: '{tvgreen.600}',
      700: '{tvgreen.700}',
      800: '{tvgreen.800}',
      900: '{tvgreen.900}',
      950: '{tvgreen.950}'
    },
    colorScheme: {
      dark: {
        // Remap surface scale to TV neutrals.
        // Aura uses surface.950 for deepest bg, surface.700 for borders,
        // surface.900 for content bg, surface.0 for text.
        surface: {
          0:   '#ffffff',
          50:  '#dbdbdb',
          100: '#b8b8b8',
          200: '#8a8a8a',
          300: '#6d6d6d',
          400: '#4d4d4d',
          500: '#3d3d3d',
          600: '#3d3d3d',
          700: '#2e2e2e',  // → content.border.color, splitter gutter
          800: '#1c1c1c',  // → hover backgrounds, splitter handle
          900: '#141414',  // → content.background, overlays
          950: '#0f0f0f'   // → form field backgrounds, deepest bg
        },
        primary: {
          color:         '#089981',
          contrastColor: '#0f0f0f',
          hoverColor:    '#0aad95',
          activeColor:   '#0cc4a8'
        },
        text: {
          color:          '#dbdbdb',
          hoverColor:     '#dbdbdb',
          mutedColor:     '#8a8a8a',
          hoverMutedColor:'#b8b8b8'
        }
      }
    }
  }
})

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(PrimeVue, {
  theme: {
    preset: TradingViewPreset,
    options: {
      darkModeSelector: '.dark',
      cssLayer: false
    }
  }
})
app.use(ToastService)   // for agent ui:notification commands

app.mount('#app')