<template>
  <div class="space-y-6">
    <h1 class="text-3xl font-bold text-white">{{ t('settings') }}</h1>
    
    <GlassCard class="p-6">
      <h2 class="text-xl font-semibold text-cyan-400 mb-4">{{ t('dashboardSettings') }}</h2>
      <p class="text-white/50">Dashboard configuration options will be displayed here.</p>
    </GlassCard>

    <!-- Language Settings -->
    <GlassCard class="p-6">
      <h2 class="text-xl font-semibold text-cyan-400 mb-4">{{ t('language') }}</h2>
      <div class="flex gap-4">
        <GlassButton 
          @click="switchLanguage('en')" 
          :class="locale === 'en' ? 'from-cyan-500 to-blue-500' : 'from-gray-600 to-gray-700'"
          class="px-4 py-2"
        >
          {{ t('english') }}
        </GlassButton>
        <GlassButton 
          @click="switchLanguage('id')" 
          :class="locale === 'id' ? 'from-cyan-500 to-blue-500' : 'from-gray-600 to-gray-700'"
          class="px-4 py-2"
        >
          {{ t('indonesian') }}
        </GlassButton>
        <GlassButton 
          @click="switchLanguage('zh')" 
          :class="locale === 'zh' ? 'from-cyan-500 to-blue-500' : 'from-gray-600 to-gray-700'"
          class="px-4 py-2"
        >
          {{ t('chinese') }}
        </GlassButton>
      </div>
    </GlassCard>

    <!-- Theme Settings -->
    <GlassCard class="p-6">
      <h2 class="text-xl font-semibold text-cyan-400 mb-4">{{ t('theme') }}</h2>
      <div class="flex gap-4">
        <GlassButton 
          @click="toggleTheme('dark')" 
          :class="theme === 'dark' ? 'from-cyan-500 to-blue-500' : 'from-gray-600 to-gray-700'"
          class="px-4 py-2"
        >
          {{ t('dark') }}
        </GlassButton>
        <GlassButton 
          @click="toggleTheme('light')" 
          :class="theme === 'light' ? 'from-cyan-500 to-blue-500' : 'from-gray-600 to-gray-700'"
          class="px-4 py-2"
        >
          {{ t('light') }}
        </GlassButton>
        <GlassButton 
          @click="toggleTheme('auto')" 
          :class="theme === 'auto' ? 'from-cyan-500 to-blue-500' : 'from-gray-600 to-gray-700'"
          class="px-4 py-2"
        >
          {{ t('auto') }}
        </GlassButton>
      </div>
    </GlassCard>

<GlassCard class="p-6">
  <h2 class="text-xl font-semibold text-cyan-400 mb-4">{{ t('totpSetup') }}</h2>
  <p class="text-white/50">Two-factor authentication setup will be displayed here.</p>
</GlassCard>

<GlassCard class="p-6">
  <h2 class="text-xl font-semibold text-cyan-400 mb-4">{{ t('smtpSettings') }}</h2>
  
  <div class="flex items-center justify-between mb-6">
    <span class="text-white">{{ t('enableSMTP') }}</span>
    <GlassToggle v-model="smtpSettings.Enabled" />
  </div>

  <div class="space-y-4">
    <div>
      <label class="block text-white/70 mb-1">{{ t('server') }}</label>
      <GlassInput v-model="smtpSettings.Server" placeholder="smtp.example.com" class="w-full" />
    </div>

    <div>
      <label class="block text-white/70 mb-1">{{ t('port') }}</label>
      <GlassInput v-model="smtpSettings.Port" type="number" placeholder="587" class="w-full" />
    </div>

    <div class="flex items-center justify-between">
      <span class="text-white/70">{{ t('useTLS') }}</span>
      <GlassToggle v-model="smtpSettings.UseTLS" />
    </div>

    <div>
      <label class="block text-white/70 mb-1">{{ t('username') }}</label>
      <GlassInput v-model="smtpSettings.Username" placeholder="user@example.com" class="w-full" />
    </div>

    <div>
      <label class="block text-white/70 mb-1">{{ t('password') }}</label>
      <GlassInput v-model="smtpSettings.Password" type="password" placeholder="SMTP Password" class="w-full" />
    </div>

    <div>
      <label class="block text-white/70 mb-1">{{ t('fromEmail') }}</label>
      <GlassInput v-model="smtpSettings.FromEmail" type="email" placeholder="noreply@example.com" class="w-full" />
    </div>

    <div>
      <label class="block text-white/70 mb-1">{{ t('fromName') }}</label>
      <GlassInput v-model="smtpSettings.FromName" placeholder="WireGuard VPN" class="w-full" />
    </div>
  </div>

  <div class="flex gap-4 mt-6">
    <GlassButton @click="testEmail" class="from-cyan-500 to-blue-500">{{ t('testEmail') }}</GlassButton>
    <GlassButton @click="saveSettings" class="from-green-500 to-teal-500">{{ t('saveSettings') }}</GlassButton>
  </div>
</GlassCard>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { useI18n } from 'vue-i18n'
import GlassCard from '../components/glass/GlassCard.vue'
import GlassInput from '../components/glass/GlassInput.vue'
import GlassToggle from '../components/glass/GlassToggle.vue'
import GlassButton from '../components/glass/GlassButton.vue'
import { useTheme } from '../composables/useTheme'

const { t, locale } = useI18n()
const { theme, toggleTheme } = useTheme()

const smtpSettings = reactive({
  Enabled: false,
  Server: '',
  Port: 587,
  UseTLS: true,
  Username: '',
  Password: '',
  FromEmail: '',
  FromName: ''
})

const switchLanguage = (lang: string) => {
  locale.value = lang
}

const testEmail = () => {
  console.log('Test Email with settings:', JSON.parse(JSON.stringify(smtpSettings)))
  alert('Test email functionality (mock) - check console for settings')
}

const saveSettings = () => {
  console.log('Saving SMTP settings (mock):', JSON.parse(JSON.stringify(smtpSettings)))
  alert('SMTP settings saved (mock)')
}
</script>
