<template>
  <div class="modal-overlay" @click="$emit('close')">
    <div class="modal-content" @click.stop>
      <h3>切换线路</h3>
      <div class="source-list">
        <div 
          v-for="(url, index) in channel?.urls" 
          :key="index"
          class="source-item"
          :class="{ 
            active: currentUrl === url,
            online: getValidity(url)?.status === 'online',
            offline: getValidity(url)?.status === 'offline'
          }"
          @click="$emit('switch', { url }, index)"
        >
          <span class="source-name">线路 {{ index + 1 }}</span>
          <span class="source-status" :class="getValidity(url)?.status">
            {{ getStatusText(url) }}
          </span>
          <span class="source-latency" v-if="getValidity(url)?.latency > 0">
            {{ getValidity(url).latency }}ms
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  channel: Object,
  currentUrl: String,
  validityMap: {
    type: Map,
    default: () => new Map()
  }
});

const emit = defineEmits(['switch', 'close']);

function getValidity(url) {
  return props.validityMap.get(url);
}

function getStatusText(url) {
  const validity = getValidity(url);
  if (!validity) return '未检测';
  if (validity.status === 'online') return '在线';
  if (validity.status === 'offline') return '离线';
  return '未知';
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
}

.modal-content {
  background: #1a1a1a;
  border-radius: 12px;
  padding: 20px;
  min-width: 400px;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
}

.source-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.source-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  cursor: pointer;
  border-left: 3px solid transparent;
}

.source-item:hover,
.source-item.active {
  background: rgba(255, 255, 255, 0.1);
}

.source-item.active {
  border-left-color: #fff;
}

.source-item.online {
  border-left-color: #00ff88;
}

.source-item.offline {
  border-left-color: #ff4444;
}

.source-name {
  font-size: 14px;
  color: #fff;
  flex: 1;
}

.source-status {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
}

.source-status.online {
  background: rgba(0, 255, 136, 0.2);
  color: #00ff88;
}

.source-status.offline {
  background: rgba(255, 68, 68, 0.2);
  color: #ff4444;
}

.source-latency {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-family: monospace;
}
</style>
