<template>
  <UDashboardPanel id="settings">
    <template #header>
      <UDashboardNavbar :title="$t('settings.title')">
        <template #leading>
          <UDashboardSidebarCollapse />
        </template>
      </UDashboardNavbar>
    </template>

    <template #body>
      <div class="flex flex-col gap-6 w-full lg:max-w-4xl mx-auto p-6">
        <!-- Language Section -->
        <UCard>
          <template #header>
            <div>
              <h3 class="text-lg font-semibold text-highlighted">{{ $t('settings.language.title') }}</h3>
              <p class="text-sm text-muted mt-1">{{ $t('settings.language.description') }}</p>
            </div>
          </template>
          <ULocaleSelect
            :model-value="locale"
            :locales="[de, en]"
            class="w-full max-w-xs"
            size="md"
            @update:model-value="handleLocaleChange"
          />
        </UCard>

        <!-- Appearance Section -->
        <UCard>
          <template #header>
            <div>
              <h3 class="text-lg font-semibold text-highlighted">{{ $t('settings.appearance.title') }}</h3>
              <p class="text-sm text-muted mt-1">{{ $t('settings.appearance.description') }}</p>
            </div>
          </template>
          <URadioGroup v-model="selectedColorMode" :items="colorModeOptions" class="gap-4" />
        </UCard>

        <!-- Theme Colors Section -->
        <UCard>
          <template #header>
            <div>
              <h3 class="text-lg font-semibold text-highlighted">{{ $t('settings.theme.title') }}</h3>
              <p class="text-sm text-muted mt-1">{{ $t('settings.theme.description') }}</p>
            </div>
          </template>

          <div class="space-y-6">
            <!-- Primary Color -->
            <div>
              <h4 class="text-sm font-medium text-highlighted mb-3">{{ $t('settings.theme.primary') }}</h4>
              <div class="grid grid-cols-10 gap-2">
                <button
                  v-for="color in colors"
                  :key="color"
                  type="button"
                  :class="[
                    'w-10 h-10 rounded-md transition-all',
                    appConfig.ui.colors.primary === color
                      ? 'ring-2 ring-offset-2 ring-offset-background'
                      : 'hover:scale-110'
                  ]"
                  :style="{
                    backgroundColor: `var(--color-${color}-500)`,
                    '--tw-ring-color': `var(--color-${color}-500)`
                  }"
                  @click="appConfig.ui.colors.primary = color"
                />
              </div>
            </div>
          </div>
        </UCard>
      </div>
    </template>
  </UDashboardPanel>
</template>

<script setup lang="ts">
import { de, en } from '@nuxt/ui/locale'

definePageMeta({
  layout: 'default'
})

const { t: $t, locale, setLocale } = useI18n()
const colorMode = useColorMode()
const appConfig = useAppConfig()

const colors = [
  'red',
  'orange',
  'amber',
  'yellow',
  'lime',
  'green',
  'emerald',
  'teal',
  'cyan',
  'sky',
  'blue',
  'indigo',
  'violet',
  'purple',
  'fuchsia',
  'pink'
]

function handleLocaleChange(newLocale: string | undefined) {
  if (newLocale) {
    setLocale(newLocale as 'de' | 'en')
  }
}

const colorModeOptions = computed(() => [
  {
    value: 'light',
    label: $t('settings.appearance.light'),
    icon: 'i-lucide-sun'
  },
  {
    value: 'dark',
    label: $t('settings.appearance.dark'),
    icon: 'i-lucide-moon'
  }
])

const selectedColorMode = computed({
  get: () => colorMode.value,
  set: (value) => {
    colorMode.preference = value as 'light' | 'dark'
  }
})
</script>
