<script setup>
import { ref } from 'vue'

// 分类配置（phase-1: 数组驱动 tabs; phase-2: 改为 { key, icon, component }）
const categories = [
  { key: 'general', icon: 'mdi-tune-variant' },
  { key: 'appearance', icon: 'mdi-palette-outline' },
  { key: 'notifications', icon: 'mdi-bell-outline' },
  { key: 'data', icon: 'mdi-database-outline' },
  { key: 'account', icon: 'mdi-account-cog-outline' },
  { key: 'about', icon: 'mdi-information-outline' }
]

const activeTab = ref('general')

// phase-1 占位状态; phase-2 替换为 usePreferencesStore()
const general = ref({ language: 'zh-CN', timezone: 'Asia/Shanghai' })
const appearance = ref({ theme: 'system', density: 'comfortable' })
const notifications = ref({ weekStart: 1, reminderLeadTime: 15 })
const data = ref({ exportFormat: 'xlsx', autoBackup: true })
</script>

<template>
  <v-container fluid>
    <!-- 页面标题区（与 HomeView/TaskView 一致） -->
    <v-row class="mb-4">
      <v-col cols="12">
        <h2>{{ $t('settings.title') }}</h2>
        <p class="text-body-2 text-medium-emphasis mt-1">
          {{ $t('settings.subtitle') }}
        </p>
      </v-col>
    </v-row>

    <v-card>
      <!-- 分类 tabs -->
      <v-tabs v-model="activeTab" show-arrows density="comfortable">
        <v-tab v-for="cat in categories" :key="cat.key" :value="cat.key">
          <v-icon class="me-2" :icon="cat.icon" />
          {{ $t(`settings.categories.${cat.key}.label`) }}
        </v-tab>
      </v-tabs>

      <v-divider />

      <!-- 分类内容 -->
      <v-window v-model="activeTab">
        <v-window-item v-for="cat in categories" :key="cat.key" :value="cat.key">
          <v-card flat>
            <v-card-title>
              {{ $t(`settings.categories.${cat.key}.label`) }}
            </v-card-title>
            <v-card-subtitle>
              {{ $t(`settings.categories.${cat.key}.description`) }}
            </v-card-subtitle>
            <v-card-text>
              <p class="text-body-2 text-medium-emphasis mb-4">
                {{ $t('settings.placeholders.comingSoon') }}
              </p>

              <v-row dense>
                <!-- general -->
                <template v-if="cat.key === 'general'">
                  <v-col cols="12" md="6">
                    <v-select
                      v-model="general.language"
                      :items="[
                        { title: '中文', value: 'zh-CN' },
                        { title: 'English', value: 'en' }
                      ]"
                      :label="$t('settings.fields.language')"
                      variant="outlined"
                      density="comfortable"
                    />
                  </v-col>
                  <v-col cols="12" md="6">
                    <v-text-field
                      v-model="general.timezone"
                      :label="$t('settings.fields.timezone')"
                      variant="outlined"
                      density="comfortable"
                    />
                  </v-col>
                </template>

                <!-- appearance -->
                <template v-else-if="cat.key === 'appearance'">
                  <v-col cols="12" md="6">
                    <v-select
                      v-model="appearance.theme"
                      :items="['system', 'light', 'dark']"
                      :label="$t('settings.fields.theme')"
                      variant="outlined"
                      density="comfortable"
                    />
                  </v-col>
                  <v-col cols="12" md="6">
                    <v-select
                      v-model="appearance.density"
                      :items="['comfortable', 'compact', 'default']"
                      :label="$t('settings.fields.density')"
                      variant="outlined"
                      density="comfortable"
                    />
                  </v-col>
                </template>

                <!-- notifications -->
                <template v-else-if="cat.key === 'notifications'">
                  <v-col cols="12" md="6">
                    <v-select
                      v-model="notifications.weekStart"
                      :items="[0, 1, 6]"
                      :label="$t('settings.fields.weekStart')"
                      variant="outlined"
                      density="comfortable"
                    />
                  </v-col>
                  <v-col cols="12" md="6">
                    <v-text-field
                      v-model.number="notifications.reminderLeadTime"
                      type="number"
                      :label="$t('settings.fields.reminderLeadTime')"
                      variant="outlined"
                      density="comfortable"
                    />
                  </v-col>
                </template>

                <!-- data -->
                <template v-else-if="cat.key === 'data'">
                  <v-col cols="12" md="6">
                    <v-select
                      v-model="data.exportFormat"
                      :items="['xlsx', 'csv', 'json']"
                      :label="$t('settings.fields.exportFormat')"
                      variant="outlined"
                      density="comfortable"
                    />
                  </v-col>
                  <v-col cols="12" md="6" class="d-flex align-center">
                    <v-switch
                      v-model="data.autoBackup"
                      :label="$t('settings.fields.autoBackup')"
                      color="primary"
                      hide-details
                    />
                  </v-col>
                </template>

                <!-- account: 占位 -->
                <template v-else-if="cat.key === 'account'">
                  <v-col cols="12">
                    <v-alert type="info" variant="tonal">
                      {{ $t('settings.placeholders.comingSoon') }}
                    </v-alert>
                  </v-col>
                </template>

                <!-- about -->
                <template v-else-if="cat.key === 'about'">
                  <v-col cols="12">
                    <v-list>
                      <v-list-item title="Version" subtitle="0.1.0 (phase-1)" />
                      <v-list-item title="Vue" subtitle="3.x" />
                      <v-list-item title="Vuetify" subtitle="3.x" />
                    </v-list>
                  </v-col>
                </template>
              </v-row>
            </v-card-text>
          </v-card>
        </v-window-item>
      </v-window>

      <!-- 底部共享按钮: 跨所有 tab, 只显示一对 Reset / Save -->
      <v-divider />
      <v-card-actions>
        <v-spacer />
        <v-btn variant="text" color="error">
          {{ $t('settings.actions.reset') }}
        </v-btn>
        <v-btn color="primary" variant="elevated">
          {{ $t('settings.actions.save') }}
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-container>
</template>