<template>
  <div class="config-panel" v-if="show">
    <div class="panel-overlay" @click="$emit('close')"></div>
    <div class="panel-content">
      <div class="panel-header">
        <h2>应用设置</h2>
        <button class="close-btn" @click="$emit('close')">✕</button>
      </div>
      
      <!-- 标签页 -->
      <div class="tabs">
        <button 
          v-for="tab in tabs" 
          :key="tab.id"
          class="tab-btn"
          :class="{ active: currentTab === tab.id }"
          @click="currentTab = tab.id"
        >
          {{ tab.name }}
        </button>
      </div>
      
      <div class="panel-body">
        <!-- 数据源 -->
        <div v-if="currentTab === 'source'" class="tab-content">
          <div class="setting-group">
            <label>数据源类型</label>
            <select v-model="config.apiType">
              <option value="local">📁 本地文件</option>
              <option value="guovin">🌐 在线接口</option>
              <option value="custom">✏️ 自定义</option>
            </select>
          </div>
          
          <div v-if="config.apiType === 'local'" class="setting-group">
            <label>选择文件</label>
            <select v-model="config.localFile">
              <option value="/api/result.txt">result.txt（完整）</option>
              <option value="/api/ipv4/result.txt">IPv4 专线</option>
              <option value="/api/ipv6/result.txt">IPv6 专线</option>
            </select>
          </div>
          
          <div v-if="config.apiType === 'custom'" class="setting-group">
            <label>接口地址</label>
            <input v-model="config.apiUrl" placeholder="http://..." />
          </div>
          
          <div class="setting-group">
            <label>EPG 数据源</label>
            <select v-model="config.epgType">
              <option value="local">📁 本地文件</option>
              <option value="custom">✏️ 自定义</option>
            </select>
          </div>
        </div>
        
        <!-- 播放设置 -->
        <div v-if="currentTab === 'playback'" class="tab-content">
          <div class="setting-group">
            <label>自动播放</label>
            <div class="toggle-switch">
              <input type="checkbox" v-model="config.autoPlay" id="autoplay">
              <label for="autoplay"></label>
            </div>
          </div>
          
          <div class="setting-group">
            <label>默认音量 {{ Math.round(config.defaultVolume * 100) }}%</label>
            <input 
              type="range" 
              min="0" 
              max="1" 
              step="0.1" 
              v-model="config.defaultVolume"
              class="slider"
            />
          </div>
          
          <div class="setting-group">
            <label>检测超时 {{ config.checkTimeout / 1000 }}s</label>
            <input 
              type="range" 
              min="1000" 
              max="10000" 
              step="500" 
              v-model.number="config.checkTimeout"
              class="slider"
            />
          </div>
          
          <div class="setting-group">
            <label>缓存过期 {{ Math.round(config.cacheExpire / 1000 / 60 / 60) }}h</label>
            <input 
              type="range" 
              min="3600000" 
              max="168000000" 
              step="3600000" 
              v-model.number="config.cacheExpire"
              class="slider"
            />
          </div>
        </div>
        
        <!-- 外观 -->
        <div v-if="currentTab === 'appearance'" class="tab-content">
          <div class="setting-group">
            <label>主题</label>
            <div class="theme-options">
              <div 
                class="theme-card"
                :class="{ active: config.theme === 'dark' }"
                @click="config.theme = 'dark'"
              >
                <div class="theme-icon">🌙</div>
                <span>深色</span>
              </div>
              <div 
                class="theme-card"
                :class="{ active: config.theme === 'light' }"
                @click="config.theme = 'light'"
              >
                <div class="theme-icon">☀</div>
                <span>浅色</span>
              </div>
              <div 
                class="theme-card"
                :class="{ active: config.theme === 'system' }"
                @click="config.theme = 'system'"
              >
                <div class="theme-icon">💻</div>
                <span>跟随系统</span>
              </div>
            </div>
          </div>
          
          <div class="shortcuts">
            <h4>快捷键</h4>
            <p>S 打开设置 | M 菜单 | I 信息 | F 收藏</p>
            <p>←→ 切换线路 | ↑↓ 切换频道</p>
          </div>
        </div>
      </div>
      
      <div class="panel-footer">
        <button class="btn-primary" @click="saveAndClose">
          完成
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useStore } from '../stores/useStore.js'

const props = defineProps({
  show: Boolean
})

const emit = defineEmits(['close', 'reload'])

const store = useStore()

const tabs = [
  { id: 'source', name: '数据源' },
  { id: 'playback', name: '播放设置' },
  { id: 'appearance', name: '外观' }
]

const currentTab = ref('source')

const config = ref({
  apiType: localStorage.getItem('iptv_api_type') || 'local',
  apiUrl: localStorage.getItem('iptv_api_url') || '',
  localFile: localStorage.getItem('iptv_local_file') || '/api/result.txt',
  epgType: localStorage.getItem('iptv_epg_type') || 'local',
  autoPlay: store.settings.autoPlay,
  defaultVolume: store.settings.defaultVolume,
  checkTimeout: store.settings.checkTimeout || 2000,
  cacheExpire: parseInt(localStorage.getItem('iptv_cache_expire')) || (24 * 60 * 60 * 1000),
  theme: localStorage.getItem('iptv_theme') || 'dark'
})

watch(config, (newVal) => {
  localStorage.setItem('iptv_api_type', newVal.apiType)
  localStorage.setItem('iptv_api_url', newVal.apiUrl)
  localStorage.setItem('iptv_local_file', newVal.localFile)
  localStorage.setItem('iptv_epg_type', newVal.epgType)
  localStorage.setItem('iptv_cache_expire', newVal.cacheExpire)
  localStorage.setItem('iptv_theme', newVal.theme)
  
  store.updateSetting('autoPlay', newVal.autoPlay)
  store.updateSetting('defaultVolume', newVal.defaultVolume)
  store.updateSetting('checkTimeout', newVal.checkTimeout)
}, { deep: true })

function saveAndClose() {
  emit('reload')
  emit('close')
}
</script>

<style scoped>
.config-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.8);
}

.panel-content {
  position: relative;
  background: #1a1a1a;
  border-radius: 16px;
  width: 90%;
  max-width: 480px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.panel-header h2 {
  font-size: 18px;
  font-weight: 500;
}

.close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #888;
  font-size: 18px;
  cursor: pointer;
}

.close-btn:hover {
  background: #2a2a2a;
  color: #fff;
}

/* 标签页 */
.tabs {
  display: flex;
  padding: 0 20px;
  gap: 8px;
  border-bottom: 1px solid #2a2a2a;
}

.tab-btn {
  flex: 1;
  padding: 12px;
  background: transparent;
  border: none;
  color: #888;
  font-size: 14px;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  transition: all 0.2s;
}

.tab-btn:hover {
  color: #fff;
  background: #2a2a2a;
}

.tab-btn.active {
  color: #fff;
  background: #2a2a2a;
}

/* 内容区 */
.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.tab-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.setting-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.setting-group label {
  font-size: 13px;
  color: #888;
}

select, input {
  width: 100%;
  padding: 12px;
  border: 1px solid #333;
  border-radius: 10px;
  background: #252525;
  color: #fff;
  font-size: 14px;
}

select:focus, input:focus {
  outline: none;
  border-color: #555;
}

/* 开关 */
.toggle-switch {
  position: relative;
  width: 50px;
  height: 28px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch label {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #333;
  border-radius: 28px;
  transition: 0.3s;
}

.toggle-switch label:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.3s;
}

.toggle-switch input:checked + label {
  background: #00d4ff;
}

.toggle-switch input:checked + label:before {
  transform: translateX(22px);
}

/* 滑块 */
.slider {
  -webkit-appearance: none;
  height: 6px;
  background: #333;
  border-radius: 3px;
  padding: 0;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
}

/* 主题选项 */
.theme-options {
  display: flex;
  gap: 12px;
}

.theme-card {
  flex: 1;
  padding: 20px;
  background: #252525;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid transparent;
}

.theme-card:hover {
  background: #2a2a2a;
}

.theme-card.active {
  border-color: #fff;
  background: #2a2a2a;
}

.theme-icon {
  font-size: 24px;
}

.theme-card span {
  font-size: 13px;
  color: #aaa;
}

.theme-card.active span {
  color: #fff;
}

/* 快捷键 */
.shortcuts {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #2a2a2a;
}

.shortcuts h4 {
  font-size: 13px;
  color: #888;
  margin-bottom: 12px;
  font-weight: normal;
}

.shortcuts p {
  font-size: 12px;
  color: #666;
  line-height: 1.8;
}

/* 底部按钮 */
.panel-footer {
  padding: 20px;
  border-top: 1px solid #2a2a2a;
}

.btn-primary {
  width: 100%;
  padding: 14px;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.btn-primary:hover {
  background: #e0e0e0;
}
</style>
