<template>
  <div class="snake-timeline-container">
    <!-- Left Navigation Button -->
    <div class="nav-btn left" @click="scrollLeft" :class="{ disabled: isStart }">
      <img src="@/assets/icons/card-btn-left.png" alt="Previous" />
    </div>

    <!-- Scrollable Content -->
    <div class="timeline-wrapper" ref="scrollContainer" @scroll="checkScroll">
      <div class="timeline-track">
        <!-- Connecting Line -->
        <div class="connecting-line"></div>

        <!-- Cards -->
        <div
          v-for="(item, index) in timelineData"
          :key="index"
          class="timeline-card-item"
          :class="{ 'item-top': index % 2 !== 0, 'item-bottom': index % 2 === 0 }"
        >
          <!-- Date Label -->
          <div class="date-label">
            <span class="year">{{ item.year }}</span>
            <span class="month">{{ item.month }}</span>
          </div>

          <!-- Node/Dot -->
          <div class="timeline-node"></div>

          <!-- Card Content -->
          <div class="card-content">
            <div class="tags">
              <span
                v-for="(tag, tIndex) in item.tags"
                :key="tIndex"
                class="tag"
                :class="getTagClass(tag)"
              >
                {{ tag }}
              </span>
            </div>
            <h3 class="title" :title="item.title">{{ item.title }}</h3>
            <p class="description">{{ item.description }}</p>
            <div class="footer">
              <span class="date">{{ item.fullDate }}</span>
              <span class="separator">·</span>
              <span class="source">{{ item.source }}</span>
              <span class="separator">·</span>
              <span class="category">{{ item.category }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Right Navigation Button -->
    <div class="nav-btn right" @click="scrollRight" :class="{ disabled: isEnd }">
      <img src="@/assets/icons/card-btn-right.png" alt="Next" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const scrollContainer = ref(null);
const isStart = ref(true);
const isEnd = ref(false);

const timelineData = ref([
  {
    year: '2025年',
    month: '5月',
    tags: ['人工智能', '航空航天'],
    title: '《国家量子倡议再授权法案》发布',
    description: '计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...',
    fullDate: '11月15日',
    source: '参议院',
    category: '科技法案'
  },
  {
    year: '2025年',
    month: '5月',
    tags: ['人工智能'],
    title: '《国家量子倡议再授权法案》发布',
    description: '计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...',
    fullDate: '11月15日',
    source: '参议院',
    category: '科技法案'
  },
  {
    year: '2025年',
    month: '5月',
    tags: ['集成电路'],
    title: '《国家量子倡议再授权法案》发布',
    description: '计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...',
    fullDate: '11月15日',
    source: '参议院',
    category: '科技法案'
  },
  {
    year: '2025年',
    month: '6月',
    tags: ['新材料', '量子科技'],
    title: '《国家量子倡议再授权法案》发布',
    description: '计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...',
    fullDate: '11月15日',
    source: '参议院',
    category: '科技法案'
  },
  {
    year: '2025年',
    month: '6月',
    tags: ['人工智能', '航空航天'],
    title: '《国家量子倡议再授权法案》发布',
    description: '计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...',
    fullDate: '11月15日',
    source: '参议院',
    category: '科技法案'
  },
  {
    year: '2025年',
    month: '7月',
    tags: ['新材料', '能源'],
    title: '《国家量子倡议再授权法案》发布',
    description: '计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...',
    fullDate: '11月15日',
    source: '参议院',
    category: '科技法案'
  },
    {
    year: '2025年',
    month: '7月',
    tags: ['人工智能', '航空航天'],
    title: '《国家量子倡议再授权法案》发布',
    description: '计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...',
    fullDate: '11月15日',
    source: '参议院',
    category: '科技法案'
  },
  {
    year: '2025年',
    month: '8月',
    tags: ['能源'],
    title: '《国家量子倡议再授权法案》发布',
    description: '计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...',
    fullDate: '11月15日',
    source: '参议院',
    category: '科技法案'
  },
  {
    year: '2025年',
    month: '8月',
    tags: ['新材料', '量子科技'],
    title: '《国家量子倡议再授权法案》发布',
    description: '计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...',
    fullDate: '11月15日',
    source: '参议院',
    category: '科技法案'
  }
]);

const getTagClass = (tag) => {
  // Simple logic to assign colors based on tag name or random
  const map = {
    '人工智能': 'tag-red',
    '航空航天': 'tag-blue',
    '集成电路': 'tag-blue-dark',
    '新材料': 'tag-cyan',
    '量子科技': 'tag-purple',
    '能源': 'tag-green'
  };
  return map[tag] || 'tag-default';
};

const scrollLeft = () => {
  if (scrollContainer.value) {
    scrollContainer.value.scrollBy({ left: -400, behavior: 'smooth' });
  }
};

const scrollRight = () => {
  if (scrollContainer.value) {
    scrollContainer.value.scrollBy({ left: 400, behavior: 'smooth' });
  }
};

const checkScroll = () => {
  if (!scrollContainer.value) return;
  const { scrollLeft, scrollWidth, clientWidth } = scrollContainer.value;
  isStart.value = scrollLeft <= 0;
  isEnd.value = Math.ceil(scrollLeft + clientWidth) >= scrollWidth;
};

onMounted(() => {
  checkScroll();
  window.addEventListener('resize', checkScroll);
});

onUnmounted(() => {
  window.removeEventListener('resize', checkScroll);
});
</script>

<style lang="scss" scoped>
.snake-timeline-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 20px 40px; /* Space for buttons */
  box-sizing: border-box;
  background-color: transparent;

  .nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
    width: 24px;
    height: 48px;
    
    &.left {
      left: 0;
    }
    &.right {
      right: 0;
    }
    
    &.disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  .timeline-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    
    &::-webkit-scrollbar {
      display: none;
    }

    .timeline-track {
      display: flex;
      position: relative;
      padding: 20px 0;
      min-width: max-content;
      align-items: center; /* Center items vertically relative to the line */
      height: 550px; /* Sufficient height for top and bottom cards */
    }
  }

  .connecting-line {
    position: absolute;
    top: 50%;
    left: 20px;
    right: 20px;
    height: 2px;
    background-color: #A9C4DF;
    z-index: 0;
    transform: translateY(-50%);
  }

  .timeline-card-item {
    position: relative;
    flex: 0 0 320px;
    margin-right: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align content to the left or center */
    justify-content: flex-start;
    height: 100%;
    
    &:last-child {
      margin-right: 0;
    }

    /* Common Node Styles */
    .timeline-node {
      width: 12px;
      height: 12px;
      background-color: #2F88FF;
      border: 2px solid #fff;
      border-radius: 50%;
      box-shadow: 0 0 0 2px #2F88FF;
      position: absolute;
      top: 50%;
      left: 24px; /* Align with card content padding */
      z-index: 1;
      transform: translateY(-50%);
    }

    /* Date Label Styles */
    .date-label {
      background: #EAF4FF;
      color: #2F88FF;
      padding: 4px 12px;
      border-radius: 8px;
      font-weight: bold;
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 1.2;
      position: absolute;
      left: 0;
      
      .year {
        font-size: 14px;
      }
      .month {
        font-size: 16px;
      }
    }

    /* Card Content Styles */
    .card-content {
      background: #fff;
      border-radius: 8px;
      padding: 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      border: 1px solid #eee;
      transition: transform 0.2s;
      width: 100%;
      position: absolute;
      left: 0;

      &:hover {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
      }
      
      /* ... inner content styles remain same ... */
      .tags {
        display: flex;
        gap: 8px;
        margin-bottom: 12px;
        flex-wrap: wrap;

        .tag {
          font-size: 12px;
          padding: 2px 8px;
          border-radius: 4px;
          border: 1px solid currentColor;
          
          &.tag-red { color: #FF4D4F; background: #FFF1F0; border-color: #FFA39E; }
          &.tag-blue { color: #1890FF; background: #E6F7FF; border-color: #91D5FF; }
          &.tag-blue-dark { color: #2F54EB; background: #F0F5FF; border-color: #ADC6FF; }
          &.tag-cyan { color: #13C2C2; background: #E6FFFB; border-color: #87E8DE; }
          &.tag-purple { color: #722ED1; background: #F9F0FF; border-color: #D3ADF7; }
          &.tag-green { color: #52C41A; background: #F6FFED; border-color: #B7EB8F; }
          &.tag-default { color: #666; background: #F5F5F5; border-color: #D9D9D9; }
        }
      }

      .title {
        font-size: 16px;
        font-weight: bold;
        color: #333;
        margin: 0 0 8px 0;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .description {
        font-size: 13px;
        color: #666;
        margin: 0 0 16px 0;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .footer {
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #999;
        
        .separator {
          margin: 0 4px;
        }
      }
    }

    /* Bottom Alignment (Even) */
    &.item-bottom {
      .date-label {
        top: 50%;
        transform: translateY(-55px); /* Just above the line */
      }
      .card-content {
        top: 50%;
        margin-top: 20px; /* Below the line */
      }
    }

    /* Top Alignment (Odd) */
    &.item-top {
      .date-label {
        top: 50%;
        transform: translateY(15px); /* Just below the line */
      }
      .card-content {
        bottom: 50%;
        margin-bottom: 20px; /* Above the line */
      }
    }
  }
}
</style>
