<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><div class="text-xs font-medium text-[var(--text-muted)]">相册展示</div></div>
        <ToggleSwitch v-model="s.photoCard" />
      </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>
        <ToggleSwitch v-model="s.photoFrameMode" />
      </div>
      <div class="flex justify-between items-center px-3.5 py-2 border-t border-[var(--card-divider)]">
        <div class="text-[10px] text-[var(--text-weak)]">{{ s.photoDir || '未选择目录' }}</div>
        <div class="flex gap-1">
          <button class="btn" @click="onPickDir">选择目录</button>
          <button v-if="s.photoDir" class="btn-sm" @click="onClearDir">清除</button>
        </div>
      </div>
      <div class="flex justify-between items-center px-3.5 py-2 border-t border-[var(--card-divider)]">
        <div class="text-xs font-medium text-[var(--text-muted)]">切换间隔</div>
        <select v-model="s.photoInterval" @change="go.savePhotoInterval(Number(s.photoInterval))"
          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="v in [5,10,15,20,30,60]" :key="v" :value="v">{{ v }} 秒</option>
        </select>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { watch } from 'vue'
import { go } from '../composables/useGoBridge'
import ToggleSwitch from './ToggleSwitch.vue'
import type { SettingsData } from '@shared/types'

const props = defineProps<{ s: SettingsData }>()

watch(
  () => [props.s.photoCard, props.s.photoFrameMode] as [boolean, boolean],
  ([photoCard, photoFrameMode]) => {
    go.saveToggles({ photoCard, photoFrameMode })
  }
)

async function onPickDir() {
  const dir = await go.pickPhotoDir()
  if (dir) props.s.photoDir = dir
}
async function onClearDir() {
  await go.clearPhotoDir()
  props.s.photoDir = ''
}
</script>

<style scoped>
.btn {
  background: var(--input-bg); border: 1px solid var(--input-border);
  border-radius: 6px; color: var(--text); font-size: 11px; padding: 4px 10px;
  font-family: inherit; cursor: pointer; transition: background 0.15s; white-space: nowrap;
}
.btn:hover { background: var(--card-border); }
.btn-sm {
  background: var(--input-bg); border: 1px solid var(--input-border);
  border-radius: 6px; color: var(--text); font-size: 10px; padding: 3px 8px;
  font-family: inherit; cursor: pointer; white-space: nowrap;
}
.btn-sm:hover { background: var(--card-border); }
</style>
