<template>
  <div class="mb-3">
    <div class="text-[10px] font-semibold text-[var(--text-weak)] uppercase tracking-[1.5px] mb-1 pl-0.5">个性化</div>
    <div class="bg-[var(--card-bg)] border border-[var(--card-border)] rounded-lg">
      <div class="flex justify-between items-center px-3.5 py-2">
        <div class="text-xs font-medium text-[var(--text-muted)]">我的星座</div>
        <select v-model="s.zodiac" @change="go.saveZodiac(s.zodiac)"
          class="bg-[var(--input-bg)] border border-[var(--input-border)] rounded-md text-[var(--text)] text-[11px] py-0.5 px-1.5 outline-none min-w-[80px] max-w-[160px] focus:border-[var(--input-border-focus)]">
          <option v-for="z in zodiacs" :key="z" :value="z">{{ z }}</option>
        </select>
      </div>
      <div class="flex justify-between items-center px-3.5 py-2 border-t border-[var(--card-divider)]">
        <div><div class="text-xs font-medium text-[var(--text-muted)]">知识关键字</div><div class="text-[10px] text-[var(--text-weak)] mt-px">AI 将根据关键字生成知识小卡片</div></div>
        <input type="text" v-model="s.knowledgeKeyword" @input="debounced('kw', go.saveKnowledgeKeyword, s.knowledgeKeyword)"
          placeholder="如: 历史、科学、冷知识"
          class="bg-[var(--input-bg)] border border-[var(--input-border)] rounded-md text-[var(--text)] text-[11px] py-1 px-2 outline-none w-[140px] focus:border-[var(--input-border-focus)]">
      </div>
      <div class="flex justify-between items-center px-3.5 py-2 border-t border-[var(--card-divider)]">
        <div><div class="text-xs font-medium text-[var(--text-muted)]">知识提示词</div><div class="text-[10px] text-[var(--text-weak)] mt-px">补充风格或方向，系统会保证内容密度</div></div>
        <input type="text" v-model="s.knowledgePrompt" @input="debounced('kp', go.saveKnowledgePrompt, s.knowledgePrompt)"
          placeholder="如: 偏实践、给出判断标准"
          class="bg-[var(--input-bg)] border border-[var(--input-border)] rounded-md text-[var(--text)] text-[11px] py-1 px-2 outline-none w-[140px] focus:border-[var(--input-border-focus)]">
      </div>
      <div class="flex justify-between items-center px-3.5 py-2 border-t border-[var(--card-divider)] relative">
        <div class="text-xs font-medium text-[var(--text-muted)]">天气城市</div>
        <div class="city-picker" :class="{ open: cityOpen }" tabindex="0" @click="cityOpen = !cityOpen">
          <span class="text-[var(--text)] text-[11px]">{{ cityDisplay }}</span>
          <span class="absolute right-1.5 top-1/2 -translate-y-1/2 text-[var(--text-weak)] text-[10px] pointer-events-none">▾</span>
          <div class="city-panel">
            <div class="city-col">
              <div v-for="p in s.provinces" :key="p" :class="{ active: p === activeProv }" @click.stop="activeProv = p">{{ p }}</div>
            </div>
            <div class="city-col">
              <div v-for="c in currentCities" :key="c.id" :class="{ active: c.id === s.city }" @click.stop="onCitySelect(c)">{{ c.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { go } from '../composables/useGoBridge'
import { debounced } from '../composables/useDebounce'
import type { SettingsData } from '@shared/types'

const props = defineProps<{ s: SettingsData }>()
const zodiacs = ['白羊座','金牛座','双子座','巨蟹座','狮子座','处女座','天秤座','天蝎座','射手座','摩羯座','水瓶座','双鱼座']
const cityOpen = ref(false)
const activeProv = ref('')
const selectedCityName = ref('')

const currentCities = computed(() => {
  if (!activeProv.value) return []
  return (props.s.citiesByProv as any)[activeProv.value] || []
})

const cityDisplay = computed(() => {
  if (activeProv.value && selectedCityName.value) return `${activeProv.value} · ${selectedCityName.value}`
  return '未选择'
})

function onCitySelect(c: { id: string; name: string }) {
  props.s.city = c.id
  selectedCityName.value = c.name
  cityOpen.value = false
  go.saveCity(c.id)
}

function onDocClick(e: MouseEvent) {
  const picker = document.querySelector('.city-picker')
  if (picker && !picker.contains(e.target as Node)) cityOpen.value = false
}

onMounted(() => {
  document.addEventListener('click', onDocClick)
  const entries = Object.entries(props.s.citiesByProv as Record<string, { id: string; name: string }[]>)
  for (const [p, cs] of entries) {
    const found = cs.find(c => c.id === props.s.city)
    if (found) { activeProv.value = p; selectedCityName.value = found.name; break }
  }
})
onUnmounted(() => document.removeEventListener('click', onDocClick))
</script>

<style scoped>
.city-picker {
  position: relative; background: var(--input-bg); border: 1px solid var(--input-border);
  border-radius: 6px; padding: 4px 24px 4px 8px; cursor: pointer;
  font-size: 11px; min-width: 140px; max-width: 180px;
}
.city-picker:focus, .city-picker.open { border-color: var(--input-border-focus); }
.city-panel {
  display: none; position: absolute; right: -1px; bottom: calc(100% + 4px);
  background: var(--option-bg); border: 1px solid var(--input-border);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  z-index: 1000; width: 260px; height: 200px; overflow: hidden;
}
.city-picker.open .city-panel { display: flex; }
.city-col { flex: 1; overflow-y: auto; border-right: 1px solid var(--card-divider); }
.city-col:last-child { border-right: none; }
.city-col div {
  padding: 5px 10px; font-size: 11px; color: var(--text); cursor: pointer; white-space: nowrap;
}
.city-col div:hover { background: var(--input-bg); }
.city-col div.active { color: var(--accent); font-weight: 600; }
</style>
