<template>
  <!-- 详情视图 -->
  <div class="details-view-content">
    <div class="details-content">
      <MarkdownRenderer v-if="useMarkdown" :content="displayContent" />
      <div v-else v-html="displayContent"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, watch, onUnmounted } from 'vue'
import { useSSE } from '../composables/useSSE'
import MarkdownRenderer from './MarkdownRenderer.vue'

interface Props {
  showDetails: boolean
  isLoadingDetails: boolean
  taskDetails: string
  sseUrl?: string
  useSSE: boolean
  useMarkdown?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  useMarkdown: true,
})

const { data: sseData, isConnected, error, connect, disconnect, reset } = useSSE(props.sseUrl || '')

const displayContent = computed(() => {
  return props.useSSE ? sseData.value : props.taskDetails
})

watch(
  () => props.showDetails,
  (newVal) => {
    if (newVal && props.useSSE && props.sseUrl) {
      reset()
      connect()
    } else {
      disconnect()
    }
  }
)

watch(
  () => props.sseUrl,
  (newUrl) => {
    if (props.showDetails && props.useSSE && newUrl) {
      disconnect()
      reset()
      connect()
    }
  }
)

onUnmounted(() => {
  disconnect()
})
</script>

<style lang="scss" scoped>
$neon-green: #00d6c0;
$neon-blue: #00fff4;
$neon-cyan: #00ffe6;

// 详情视图样式
.details-view-content {
  height: 100%;
  margin-top: 40px;
  padding: 0px 40px;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: rgba(0, 255, 230, 0.1);
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #00ffe6, #00d6c0);
    border-radius: 3px;
    box-shadow: 0 0 4px rgba(0, 255, 230, 0.5);
  }

  &::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #00d6c0, #00b3a0);
  }

  .details-content {
    font-size: 20px;
    line-height: 1.6;
    color: $neon-cyan;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: $neon-cyan;
      margin-top: 24px;
      margin-bottom: 16px;
    }

    h1 {
      font-size: 32px;
    }

    h2 {
      font-size: 28px;
    }

    h3 {
      font-size: 24px;
    }

    p {
      margin-bottom: 16px;
    }

    ul,
    ol {
      margin-bottom: 16px;
      padding-left: 24px;
    }

    li {
      margin-bottom: 8px;
    }

    strong {
      color: $neon-cyan;
      font-weight: 600;
    }

    .highlight {
      background: rgba(0, 255, 230, 0.1);
      padding: 2px 4px;
      border-radius: 4px;
    }
  }
}
</style>
