<template>
  <div class="sse-logs" ref="sseLogsRef">
    <div class="sse-status-info">
      <div class="status-item">
        <span class="label">当前状态</span>
        <span class="value" :class="sseStatusClass">{{ sseStatusText }}</span>
      </div>
      <div class="status-item">
        <span class="label">客户端ID</span>
        <span class="value">{{ sseClientId }}</span>
      </div>
      <div class="status-item">
        <span class="label">服务器地址</span>
        <span class="value">{{ sseConnectTime }}</span>
      </div>
    </div>
    
    <div class="sse-logs-content" ref="logContainer" @mouseenter="showClearButton = true" @mouseleave="showClearButton = false">      
      <div v-for="(log, index) in internalLogs" :key="index" class="log-item" :class="getLogClass(log)">
        {{ log }}
      </div>
      
      <div v-if="internalLogs.length === 0" class="empty-logs">
        <i-lucide-radio class="empty-icon" />
        <span>暂无SSE连接日志</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, nextTick, onMounted, onUnmounted } from 'vue';

// 定义组件属性
interface Props {
  logs?: string[];
  sseStatusText?: string;
  sseStatusClass?: string;
  sseClientId?: string;
  sseConnectTime?: string;
}

const props = withDefaults(defineProps<Props>(), {
  logs: () => [],
  sseStatusText: '未连接',
  sseStatusClass: 'disconnected',
  sseClientId: '未分配',
  sseConnectTime: '未连接'
});

// 定义事件
const emit = defineEmits<{
  clear: [];
}>();

// 响应式数据
const showClearButton = ref(false);
const logContainer = ref<HTMLElement>();
const sseLogsRef = ref<HTMLElement>();
const internalLogs = ref<string[]>([...props.logs]);

// 监听外部logs变化
watch(() => props.logs, (newLogs) => {
  internalLogs.value = [...newLogs];
  
  scrollToBottom();
}, { deep: true });

// 滚动到底部
const scrollToBottom = () => {
  if (logContainer.value) {
    nextTick(() => {
      if (logContainer.value) {
        logContainer.value.scrollTop = logContainer.value.scrollHeight;
      }
    });
  }
};

// 获取日志样式类
const getLogClass = (log: string) => {
  if (log.includes('错误') || log.includes('失败') || log.includes('Error')) {
    return 'error';
  }
  if (log.includes('警告') || log.includes('Warning')) {
    return 'warning';
  }
  if (log.includes('连接') || log.includes('成功') || log.includes('Success')) {
    return 'success';
  }
  return 'info';
};

// 处理清空按钮点击
const handleClearClick = () => {
  internalLogs.value = [];
  emit('clear');
  resetClickState();
};

// 重置点击状态
const resetClickState = () => {
  showClearButton.value = false;
};

// 全局点击监听
const handleGlobalClick = (event: MouseEvent) => {
  const target = event.target as HTMLElement;
  
  if (sseLogsRef.value && !sseLogsRef.value.contains(target)) {
    resetClickState();
  }
};

// 组件挂载时添加全局监听
onMounted(() => {
  document.addEventListener('click', handleGlobalClick);
  
  scrollToBottom();
});

// 组件卸载时移除全局监听
onUnmounted(() => {
  document.removeEventListener('click', handleGlobalClick);
});

// 暴露方法给父组件
defineExpose({
  scrollToBottom
});
</script>

<style scoped lang="scss">
// 变量定义
$primary-color: #4a90e2;
$primary-light: #5ba0f2;
$success-color: #52c41a;
$warning-color: #faad14;
$error-color: #ff4d4f;
$bg-dark: #283D62;
$bg-light: rgba(255, 255, 255, 0.1);
$bg-light-hover: rgba(255, 255, 255, 0.2);
$border-light: rgba(255, 255, 255, 0.3);
$text-white: #ffffff;
$text-gray: #cccccc;
$text-dark: #333333;
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 12px;
$spacing-lg: 16px;
$border-radius: 6px;

// 混合器
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flex-align-center {
  display: flex;
  align-items: center;
}

@mixin icon-base($size) {
  width: $size;
  height: $size;
}

@mixin transition-ease {
  transition: all 0.3s ease;
}

.sse-logs {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;

  .sse-status-info {
    background: $bg-light;
    border: 1px solid $border-light;
    border-radius: $border-radius;
    margin-bottom: $spacing-md;
    backdrop-filter: blur(10px);

    .status-item {
      @include flex-align-center;
      justify-content: space-between;
      margin-bottom: $spacing-sm;
      
      &:last-child {
        margin-bottom: 0;
      }

      .label {
        color: $text-dark;
        font-size: 14px;
        font-weight: 500;
      }

      .value {
        color: $text-dark;
        font-size: 14px;
        font-weight: bold;
        
        &.connected {
          color: $success-color;
        }
        
        &.disconnected {
          color: $error-color;
        }
        
        &.connecting {
          color: $warning-color;
        }
      }
    }
  }

  .sse-logs-content {
    flex: 1;
    background: $bg-dark;
    border: 1px solid $border-light;
    border-radius: $border-radius;
    padding: $spacing-md;
    overflow-y: auto;
    font-family: 'Consolas', 'Monaco', monospace;
    position: relative;
    backdrop-filter: blur(10px);
    min-height: 200px;
    max-height: 200px;

    .clear-button {
      position: absolute;
      right: $spacing-sm;
      top: $spacing-sm;
      width: 36px;
      height: 36px;
      @include flex-center;
      background: $bg-light;
      border-radius: $border-radius;
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      @include transition-ease;
      backdrop-filter: blur(10px);
      border: 1px solid $border-light;
      z-index: 10;

      &.visible {
        opacity: 1;
        visibility: visible;
      }

      &:hover {
        background: $bg-light-hover;
      }

      .clear-icon {
        @include icon-base(18px);
        color: $error-color;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
      }
    }

    .log-item {
      color: $text-white;
      font-size: 13px;
      line-height: 1.5;
      margin-bottom: 3px;
      padding: 2px 4px;
      border-radius: 3px;
      word-wrap: break-word;
      white-space: pre-wrap;

      &.success {
        color: $success-color;
      }

      &.error {
        color: $error-color;
      }

      &.warning {
        color: $warning-color;
      }
    }
    
    .empty-logs {
      @include flex-center;
      flex-direction: column;
      height: calc(200px - 2 * $spacing-md - 2px);
      color: $text-gray;
      opacity: 0.6;
      font-size: 13px;
      
      .empty-icon {
        @include icon-base(32px);
        margin-bottom: $spacing-sm;
        color: $text-gray;
        opacity: 0.5;
      }
    }

    /* 滚动条样式 */
    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-track {
      background: $bg-light;
      border-radius: 3px;
    }

    &::-webkit-scrollbar-thumb {
      background: $primary-color;
      border-radius: 3px;

      &:hover {
        background: $primary-light;
      }
    }
  }
}
</style>