<template>
  <div class="space-y-6">
    <h3 class="text-lg font-bold">Default Theme</h3>
    <p class="text-sm opacity-70">Set the default theme for users who haven't chosen one. Users can still override with their own preference.</p>

    <div class="flex flex-wrap gap-3">
      <label v-for="theme in AVAILABLE_THEMES" :key="theme.name"
        class="flex items-center gap-2 p-3 rounded-lg border-2 cursor-pointer transition-colors"
        :class="selectedTheme === theme.name ? 'border-primary bg-primary/10' : 'border-base-300 hover:border-base-content/30'">
        <input type="radio" :value="theme.name" v-model="selectedTheme" class="radio radio-primary radio-sm" />
        <span class="w-5 h-5 rounded-full border border-base-content/20" :style="{ background: theme.preview }"></span>
        <span class="font-medium">{{ theme.label }}</span>
      </label>
    </div>

    <button class="btn btn-primary" @click="save" :disabled="saving">
      <span v-if="saving" class="loading loading-spinner loading-xs"></span>
      Save Changes
    </button>
    <div v-if="error" class="alert alert-error alert-sm">{{ error }}</div>
    <div v-if="success" class="alert alert-success alert-sm">{{ success }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useSettingsStore } from '../../../stores/settings'
import { AVAILABLE_THEMES } from '../../../stores/theme'

const settingsStore = useSettingsStore()
const saving = ref(false)
const error = ref('')
const success = ref('')
const selectedTheme = ref('dark')

onMounted(() => {
  selectedTheme.value = settingsStore.settings.default_theme || 'dark'
})

async function save() {
  error.value = ''
  success.value = ''
  saving.value = true
  try {
    await settingsStore.updateSettings({ default_theme: selectedTheme.value })
    success.value = 'Default theme saved'
  } catch {
    error.value = 'Failed to save theme'
  } finally {
    saving.value = false
  }
}
</script>
