<template>
  <div class="execution-result">
    <h4 class="section-title">
      <i-lucide-activity class="title-icon" />
      {{ title }}
    </h4>
    <div class="log-container" ref="logContainer">
      <div
        class="clear-button"
        @click.stop="handleClearClick"
        title="清空执行结果"
        v-if="internalLogs.length !== 0"
      >
        <i-lucide-trash-2 class="clear-icon" />
      </div>
      <div v-for="(log, index) in internalLogs" :key="index" class="log-item" :class="{'error': log.includes('错误'), 'warning': log.includes('警告')}">
        {{ log }}
      </div>
      <div v-if="internalLogs.length === 0" class="empty-logs">
        <i-lucide-inbox class="empty-icon" />
        <span>暂无执行结果</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import type { ExecutionResultProps } from './types';

const props = withDefaults(defineProps<ExecutionResultProps>(), {
  title: '执行结果',
  logs: () => []
});

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

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

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

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

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

<style scoped lang="scss">
$primary-color: #4a90e2;
$primary-light: #5ba0f2;
$success-color: #52c41a;
$warning-color: #faad14;
$error-color: #ff4d4f;
$bg-dark: rgba(0, 0, 0, 0.3);
$bg-light: rgba(255, 255, 255, 0.1);
$bg-light-hover: rgba(255, 255, 255, 0.2);
$border-light: rgba(255, 255, 255, 0.2);
$text-white: #ffffff;
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 10px;
$border-radius: 4px;

// 混合器
@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;
}

.execution-result {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;

  .section-title {
    @include flex-align-center;
    gap: $spacing-sm;
    margin: 0 0 $spacing-md 0;
    color: $text-white;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid $primary-color;
    padding-bottom: $spacing-sm;
    position: relative;

    .title-icon {
      @include icon-base(20px);
      filter: drop-shadow(0 2px 4px rgba(74, 144, 226, 0.3));
    }
    
    .sse-indicator {
      @include flex-center;
      @include icon-base(16px);
      margin-left: auto;
      position: relative;
      
      .indicator-icon {
        @include icon-base(16px);
        color: $error-color;
        opacity: 0.5;
        @include transition-ease;
      }
      
      &.connected .indicator-icon {
        color: $success-color;
        opacity: 1;
        animation: pulse 2s infinite;
      }
      
      &::after {
        content: '';
        position: absolute;
        width: 6px;
        height: 6px;
        background-color: $error-color;
        border-radius: 50%;
        right: -2px;
        top: -2px;
        opacity: 0.5;
        @include transition-ease;
      }
      
      &.connected::after {
        background-color: $success-color;
        opacity: 1;
      }
    }
  }

  .log-container {
    flex: 1;
    background: $bg-dark;
    border: 1px solid $primary-color;
    border-radius: $border-radius;
    padding: $spacing-md;
    overflow-y: auto;
    font-family: 'Consolas', 'Monaco', monospace;
    position: relative;

    &:hover .clear-button {
      opacity: 1;
      visibility: visible;
    }

    .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;

      &: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: $success-color;
      font-size: 14px;
      line-height: 1.4;
      margin-bottom: 2px;
      white-space: nowrap;

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

      &.warning {
        color: $warning-color;
      }
    }
    
    .empty-logs {
      @include flex-center;
      flex-direction: column;
      height: 100%;
      min-height: 80px;
      color: $text-white;
      opacity: 0.5;
      font-size: 12px;
      
      .empty-icon {
        @include icon-base(24px);
        margin-bottom: $spacing-sm;
        color: $primary-color;
      }
    }

    /* 滚动条样式 */
    &::-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;
      }
    }
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
</style>