<template>
  <div class="sort-demo">
    <header class="demo-header">
      <div class="demo-icon">🎯</div>
      <div>
        <h1 class="demo-title">排序算法动态演示</h1>
        <p class="demo-subtitle">通过动画直观理解分治排序算法的每一步操作</p>
      </div>
    </header>

    <section class="demo-section">
      <h2 class="section-title">📖 算法说明</h2>
      <div class="algo-info">
        <div class="algo-card">
          <h3>归并排序 (Merge Sort)</h3>
          <div class="complexity">
            <span><strong>时间复杂度:</strong> O(n log n)</span>
            <span><strong>空间复杂度:</strong> O(n)</span>
            <span><strong>稳定性:</strong> 稳定</span>
          </div>
          <p>归并排序采用<strong>分治策略</strong>：将数组不断拆分为两半，分别排序后再合并。合并时通过比较两个有序子数组的头部元素，依次选取较小的放入结果数组。</p>
          <ul class="algo-steps">
            <li><strong>分解</strong>：将数组从中间分为左右两个子数组</li>
            <li><strong>解决</strong>：递归地对左右子数组进行归并排序</li>
            <li><strong>合并</strong>：将两个有序子数组合并为一个有序数组</li>
          </ul>
        </div>
        <div class="algo-card">
          <h3>快速排序 (Quick Sort)</h3>
          <div class="complexity">
            <span><strong>时间复杂度:</strong> O(n log n) 平均 / O(n²) 最坏</span>
            <span><strong>空间复杂度:</strong> O(log n)</span>
            <span><strong>稳定性:</strong> 不稳定</span>
          </div>
          <p>快速排序采用<strong>分治策略</strong>：选择一个基准元素，将数组分为小于基准和大于基准的两部分，然后递归排序。核心是 <strong>partition（划分）</strong> 操作。</p>
          <ul class="algo-steps">
            <li><strong>选择基准</strong>：选取数组最后一个元素作为 pivot</li>
            <li><strong>划分</strong>：将小于 pivot 的元素放到左边，大于的放到右边</li>
            <li><strong>递归</strong>：对左右两个子区间递归进行快速排序</li>
          </ul>
        </div>
      </div>
    </section>

    <section class="demo-section">
      <h2 class="section-title">🎬 归并排序演示</h2>
      <SortVisualizer
        title="归并排序 (Merge Sort)"
        algorithm="merge"
        :arraySize="12"
      />
    </section>

    <section class="demo-section">
      <h2 class="section-title">🎬 快速排序演示</h2>
      <SortVisualizer
        title="快速排序 (Quick Sort)"
        algorithm="quick"
        :arraySize="12"
      />
    </section>

    <section class="demo-section">
      <h2 class="section-title">💡 对比总结</h2>
      <div class="comparison-table-wrapper">
        <table class="comparison-table">
          <thead>
            <tr>
              <th>特性</th>
              <th>归并排序</th>
              <th>快速排序</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>策略</td>
              <td>先递归后合并（后序遍历）</td>
              <td>先划分后递归（前序遍历）</td>
            </tr>
            <tr>
              <td>额外空间</td>
              <td>O(n) — 需要辅助数组</td>
              <td>O(log n) — 递归栈空间</td>
            </tr>
            <tr>
              <td>最坏情况</td>
              <td>O(n log n) — 始终稳定</td>
              <td>O(n²) — 已有序数组且选择最值作为 pivot</td>
            </tr>
            <tr>
              <td>稳定性</td>
              <td>✅ 稳定</td>
              <td>❌ 不稳定</td>
            </tr>
            <tr>
              <td>适用场景</td>
              <td>外部排序、对稳定性有要求的场景</td>
              <td>内部排序、对平均性能要求高的场景</td>
            </tr>
          </tbody>
        </table>
      </div>
    </section>

    <div class="nav-back">
      <router-link to="/chapter/ch2" class="back-link">← 返回第二章</router-link>
    </div>
  </div>
</template>

<script setup>
import SortVisualizer from '../components/SortVisualizer.vue'
</script>

<style scoped>
.sort-demo {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
}

.demo-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 28px 0 20px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 28px;
}

.demo-icon {
  font-size: 40px;
  flex-shrink: 0;
}

.demo-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.demo-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
}

.demo-section {
  margin-bottom: 32px;
}

.section-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border-color);
}

.algo-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.algo-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
}

.algo-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.complexity {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  padding: 8px 12px;
  background: var(--hover-bg);
  border-radius: 8px;
}

.algo-card p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 10px;
}

.algo-steps {
  font-size: 13px;
  color: var(--text-secondary);
  padding-left: 20px;
  line-height: 1.8;
}

.comparison-table-wrapper {
  overflow-x: auto;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.comparison-table th,
.comparison-table td {
  padding: 10px 16px;
  border: 1px solid var(--border-color);
  text-align: left;
}

.comparison-table th {
  background: var(--hover-bg);
  font-weight: 700;
  color: var(--text-primary);
}

.comparison-table td {
  color: var(--text-secondary);
}

.comparison-table tr:hover td {
  background: var(--hover-bg);
}

.nav-back {
  padding: 20px 0 40px;
}

.back-link {
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: none;
  font-size: 14px;
}

.back-link:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .algo-info {
    grid-template-columns: 1fr;
  }
}
</style>
