import { createApp } from 'vue'
import App from './App.vue'

// Styles
import 'normalize.css'
import './styles/tailwind.css'  // Tailwind CSS 样式
// import './styles/base.css'
// import './styles/theme.css'  
// Enable Element Plus dark theme CSS variables when html has the `dark` class
import 'element-plus/theme-chalk/dark/css-vars.css'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
// Plugins
import ElementPlus from 'element-plus'
import { createI18n } from 'vue-i18n'
import i18nConfig from './locales/index.js'
import router from './router'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
// import VueLazyload from 'vue3-lazyload'
import 'element-plus/dist/index.css'
import 'nprogress/nprogress.css'
import {ElMessage,ElLoading } from 'element-plus'
import dtUI from '@deotaland/ui'
import '@deotaland/ui/style.css'
import { environmentUtils } from '@deotaland/utils';
const app = createApp(App)
window.setElMessage = (options={})=>{
  ElMessage[options.type || 'info'](options.message || '请求失败')
}
// environmentUtils.detectEnvironment().then((env)=>{
//   console.log('当前环境:', env)
// })
app.use(dtUI);
// window.setElLoading = ()=>{
//   const loading = ElLoading.service({
//     lock: true,
//     text: 'Loading',
//     background: 'rgba(0, 0, 0, 0.4)',
//   })
//   return loading
//   // loading.close()
// }
// Pinia
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
app.use(pinia)
// i18n
const i18n = createI18n(i18nConfig)
app.use(i18n)
// Router & UI
app.use(router)
app.use(ElementPlus)
// Lazyload
// app.use(VueLazyload, {
//   loading: '/logo.png',
//   error: '/logo.png',
// })

// Configure Element Plus ElMessage component position via individual message calls
// Using default ElMessage configuration - no global config needed

// Custom scrollbar styles for theme support
const scrollbarStyle = document.createElement('style')
scrollbarStyle.textContent = `
  /* Light theme scrollbar */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  ::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
  }
  
  ::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }
  
  /* Dark theme scrollbar */
  html.dark ::-webkit-scrollbar-track {
    background: #2d2d2d;
  }
  
  html.dark ::-webkit-scrollbar-thumb {
    background: #5a5a5a;
  }
  
  html.dark ::-webkit-scrollbar-thumb:hover {
    background: #6d6d6d;
  }
  
  /* Firefox scrollbar */
  * {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
  }
  
  html.dark * {
    scrollbar-color: #5a5a5a #2d2d2d;
  }
`

// Element Plus ElMessage uses default styles - no custom overrides needed
document.head.appendChild(scrollbarStyle)
// Import message-fix styles last to ensure project dark overrides don't break
// Element Plus ElMessage appearance.
// import './styles/element-fix.css'

app.mount('#app')