<template>
  <div class="deployment-architecture">
    <div class="architecture-view">
      <div class="view-selector">
        <button
          v-for="(view, index) in views"
          :key="index"
          class="view-btn"
          :class="{ active: currentView === index }"
          @click="currentView = index"
        >
          {{ view.name }}
        </button>
      </div>

      <div class="architecture-diagram">
        <!-- 基础架构 -->
        <div v-if="currentView === 0" class="basic-architecture">
          <div class="user-node">
            <div class="node-icon">👤</div>
            <div class="node-label">用户</div>
          </div>

          <div class="arrow-down">↓</div>

          <div class="domain-node">
            <div class="node-icon">🌐</div>
            <div class="node-label">域名</div>
            <div class="node-desc">example.com</div>
          </div>

          <div class="arrow-down">↓ DNS 解析</div>

          <div class="server-node">
            <div class="node-icon">🖥️</div>
            <div class="node-label">服务器</div>
            <div class="node-desc">IP: 1.2.3.4</div>
          </div>

          <div class="arrow-down">↓</div>

          <div class="web-node">
            <div class="node-icon">🌍</div>
            <div class="node-label">Web 应用</div>
          </div>
        </div>

        <!-- CDN 架构 -->
        <div v-if="currentView === 1" class="cdn-architecture">
          <div class="user-nodes">
            <div class="user-node china">
              <div class="node-icon">🇨🇳</div>
              <div class="node-label">中国用户</div>
            </div>
            <div class="user-node usa">
              <div class="node-icon">🇺🇸</div>
              <div class="node-label">美国用户</div>
            </div>
          </div>

          <div class="arrow-group">
            <div class="arrow-left">↙</div>
            <div class="arrow-right">↘</div>
          </div>

          <div class="cdn-nodes">
            <div class="cdn-node">
              <div class="node-icon">📡</div>
              <div class="node-label">CDN 北京节点</div>
            </div>
            <div class="cdn-node">
              <div class="node-icon">📡</div>
              <div class="node-label">CDN 纽约节点</div>
            </div>
          </div>

          <div class="arrow-down">↓ 缓存未命中</div>

          <div class="origin-node">
            <div class="node-icon">🖥️</div>
            <div class="node-label">源服务器</div>
          </div>
        </div>

        <!-- 负载均衡 -->
        <div v-if="currentView === 2" class="loadbalancer-architecture">
          <div class="user-node">
            <div class="node-icon">👥</div>
            <div class="node-label">用户请求</div>
          </div>

          <div class="arrow-down">↓</div>

          <div class="lb-node">
            <div class="node-icon">⚖️</div>
            <div class="node-label">负载均衡器</div>
          </div>

          <div class="arrow-group">
            <div class="arrow-1">↖</div>
            <div class="arrow-2">↑</div>
            <div class="arrow-3">↗</div>
          </div>

          <div class="server-nodes">
            <div class="server-node">
              <div class="node-icon">🖥️</div>
              <div class="node-label">服务器 1</div>
            </div>
            <div class="server-node">
              <div class="node-icon">🖥️</div>
              <div class="node-label">服务器 2</div>
            </div>
            <div class="server-node">
              <div class="node-icon">🖥️</div>
              <div class="node-label">服务器 3</div>
            </div>
          </div>
        </div>

        <!-- 完整架构 -->
        <div v-if="currentView === 3" class="full-architecture">
          <div class="user-nodes">
            <div class="user-node">
              <div class="node-icon">👤</div>
              <div class="node-label">用户</div>
            </div>
          </div>

          <div class="arrow-down">↓</div>

          <div class="dns-node">
            <div class="node-icon">🔍</div>
            <div class="node-label">DNS</div>
          </div>

          <div class="arrow-down">↓</div>

          <div class="cdn-lb-row">
            <div class="cdn-node">
              <div class="node-icon">📡</div>
              <div class="node-label">CDN</div>
            </div>
            <div class="lb-node">
              <div class="node-icon">⚖️</div>
              <div class="node-label">LB</div>
            </div>
          </div>

          <div class="arrow-down">↓</div>

          <div class="server-cluster">
            <div class="server-node">
              <div class="node-icon">🖥️</div>
              <div class="node-label">Web 1</div>
            </div>
            <div class="server-node">
              <div class="node-icon">🖥️</div>
              <div class="node-label">Web 2</div>
            </div>
            <div class="server-node">
              <div class="node-icon">💾</div>
              <div class="node-label">Database</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="info-cards">
      <div class="info-card" v-if="currentView === 0">
        <div class="card-title">🌐 域名 (Domain)</div>
        <div class="card-content">
          <strong>什么是域名？</strong>
          <br />域名是网站的地址，如 example.com，便于记忆和访问。 <br /><br />
          <strong>域名注册</strong>
          <br />• 注册商：GoDaddy、Namecheap、阿里云 <br />•
          选择后缀：.com、.cn、.org、.io <br />• 价格：$10-50/年
        </div>
      </div>

      <div class="info-card" v-if="currentView === 1">
        <div class="card-title">📡 CDN (内容分发网络)</div>
        <div class="card-content">
          <strong>什么是 CDN？</strong>
          <br />将内容缓存到全球各地的节点，用户就近访问。 <br /><br />
          <strong>优势</strong>
          <br />• 加速访问：就近获取内容 <br />• 减轻负载：减少源站压力 <br />•
          提高可用性：节点故障自动切换 <br /><br />
          <strong>常见 CDN</strong>
          <br />• Cloudflare、AWS CloudFront、阿里云 CDN
        </div>
      </div>

      <div class="info-card" v-if="currentView === 2">
        <div class="card-title">⚖️ 负载均衡 (Load Balancer)</div>
        <div class="card-content">
          <strong>什么是负载均衡？</strong>
          <br />将请求分发到多台服务器，提高并发能力。 <br /><br />
          <strong>负载均衡算法</strong>
          <br />• 轮询 (Round Robin) <br />• 最少连接 (Least Connections)
          <br />• IP 哈希 (IP Hash) <br /><br />
          <strong>常见工具</strong>
          <br />• Nginx、HAProxy、AWS ELB
        </div>
      </div>

      <div class="info-card" v-if="currentView === 3">
        <div class="card-title">🏗️ 完整部署架构</div>
        <div class="card-content">
          <strong>现代 Web 应用架构</strong>
          <br /><br />
          1. 用户通过域名访问
          <br />2. DNS 解析到 CDN 或负载均衡器 <br />3. CDN 缓存静态资源
          <br />4. 负载均衡器分发请求 <br />5. Web 服务器处理动态请求 <br />6.
          数据库存储持久化数据 <br /><br />
          <strong>监控和运维</strong>
          <br />• 日志收集、性能监控、自动备份
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const currentView = ref(0)

const views = [
  { name: '基础架构' },
  { name: 'CDN 加速' },
  { name: '负载均衡' },
  { name: '完整架构' }
]
</script>

<style scoped>
.deployment-architecture {
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
  padding: 20px;
  background: var(--vp-c-bg-soft);
  margin: 20px 0;
}

.architecture-view {
  background: var(--vp-c-bg);
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 25px;
}

.view-selector {
  display: flex;
  gap: 10px;
  margin-bottom: 25px;
  justify-content: center;
  flex-wrap: wrap;
}

.view-btn {
  padding: 10px 20px;
  border: 2px solid var(--vp-c-divider);
  background: var(--vp-c-bg-soft);
  color: var(--vp-c-text-2);
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.view-btn:hover {
  border-color: var(--vp-c-brand);
  color: var(--vp-c-brand);
}

.view-btn.active {
  border-color: var(--vp-c-brand);
  background: var(--vp-c-brand);
  color: white;
}

.architecture-diagram {
  min-height: 300px;
}

.node-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

.node-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--vp-c-text-1);
  margin-bottom: 4px;
}

.node-desc {
  font-size: 0.75rem;
  color: var(--vp-c-text-3);
  font-family: monospace;
}

.user-node,
.domain-node,
.server-node,
.web-node,
.cdn-node,
.lb-node,
.dns-node,
.origin-node {
  background: var(--vp-c-bg-soft);
  border: 2px solid var(--vp-c-brand);
  border-radius: 6px;
  padding: 15px;
  text-align: center;
  margin: 0 auto;
  max-width: 200px;
}

.arrow-down {
  text-align: center;
  font-size: 1.5rem;
  color: var(--vp-c-text-3);
  margin: 10px 0;
}

.basic-architecture {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.cdn-architecture {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.user-nodes {
  display: flex;
  gap: 30px;
  justify-content: center;
}

.user-node.china {
  background: #ffebee;
  border-color: #f44336;
}

.user-node.usa {
  background: #e3f2fd;
  border-color: #2196f3;
}

.arrow-group {
  display: flex;
  gap: 20px;
  font-size: 2rem;
  color: var(--vp-c-text-3);
}

.cdn-nodes {
  display: flex;
  gap: 20px;
}

.cdn-node {
  background: #e8f5e9;
  border-color: #4caf50;
}

.loadbalancer-architecture {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.lb-node {
  background: #fff3e0;
  border-color: #ff9800;
}

.server-nodes {
  display: flex;
  gap: 15px;
}

.full-architecture {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.cdn-lb-row {
  display: flex;
  gap: 20px;
}

.server-cluster {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}

.info-cards {
  display: grid;
  gap: 15px;
}

.info-card {
  background: var(--vp-c-bg);
  border-radius: 6px;
  padding: 20px;
  border-left: 4px solid var(--vp-c-brand);
}

.card-title {
  font-size: 1rem;
  font-weight: bold;
  color: var(--vp-c-text-1);
  margin-bottom: 12px;
}

.card-content {
  font-size: 0.85rem;
  color: var(--vp-c-text-2);
  line-height: 1.8;
}

@media (max-width: 768px) {
  .user-nodes,
  .cdn-nodes,
  .server-nodes,
  .cdn-lb-row,
  .server-cluster {
    flex-direction: column;
    align-items: center;
  }
}
</style>
