<template>
  <div class="error-page">
    <!-- 错误内容容器 -->
    <div class="error-container">
      <!-- 错误图标和动画 -->
      <div class="error-icon-wrapper">
        <el-icon class="error-icon" size="120">
          <component :is="getErrorIcon()" />
        </el-icon>
        <div class="error-decoration">
          <div class="decoration-circle circle-1"></div>
          <div class="decoration-circle circle-2"></div>
          <div class="decoration-circle circle-3"></div>
        </div>
      </div>

      <!-- 错误信息 -->
      <div class="error-content">
        <h1 class="error-title">{{ getErrorTitle() }}</h1>
        <p class="error-message">{{ getErrorMessage() }}</p>
        <p class="error-description">{{ getErrorDescription() }}</p>
      </div>

      <!-- 操作按钮 -->
      <div class="error-actions">
        <el-button type="primary" size="large" @click="goHome" :icon="House"> 返回主页 </el-button>
        <el-button size="large" @click="goBack" :icon="ArrowLeft"> 返回上一页 </el-button>
        <el-button size="large" @click="refresh" :icon="Refresh"> 刷新页面 </el-button>
      </div>

      <!-- 帮助信息 -->
      <div class="error-help">
        <el-collapse>
          <el-collapse-item title="需要帮助？" name="help">
            <div class="help-content">
              <p><strong>可能的解决方案：</strong></p>
              <ul>
                <li>检查网络连接是否正常</li>
                <li>清除浏览器缓存和Cookie</li>
                <li>尝试使用其他浏览器访问</li>
                <li>联系系统管理员获取技术支持</li>
              </ul>
              <p><strong>联系方式：</strong></p>
              <p>技术支持邮箱：support@restaurant-system.com</p>
              <p>客服热线：400-123-4567</p>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>

      <!-- 错误详情（开发模式显示） -->
      <div v-if="showErrorDetails" class="error-details">
        <el-card>
          <template #header>
            <span>错误详情</span>
          </template>
          <div class="error-info">
            <p><strong>错误类型：</strong> {{ errorType }}</p>
            <p><strong>错误代码：</strong> {{ errorCode }}</p>
            <p><strong>时间戳：</strong> {{ errorTimestamp }}</p>
            <p v-if="errorStack"><strong>错误堆栈：</strong></p>
            <pre v-if="errorStack" class="error-stack">{{ errorStack }}</pre>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {
  Warning,
  CircleClose,
  WarnTriangleFilled,
  House,
  ArrowLeft,
  Refresh,
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useAuthStore } from '@/stores/auth'

const router = useRouter()
const route = useRoute()
const authStore = useAuthStore()

// 错误类型定义
type ErrorType = '404' | '403' | '500' | 'network' | 'auth' | 'unknown'

// 响应式数据
const errorType = ref<ErrorType>('unknown')
const errorCode = ref<string>('')
const errorMessage = ref<string>('')
const errorStack = ref<string>('')
const errorTimestamp = ref<string>(new Date().toLocaleString())
const showErrorDetails = ref(import.meta.env.DEV) // 开发模式显示详情

// 初始化错误信息
onMounted(() => {
  parseErrorFromQuery()
})

// 从路由查询参数解析错误信息
const parseErrorFromQuery = () => {
  const { type, code, message, stack } = route.query

  errorType.value = (type as ErrorType) || 'unknown'
  errorCode.value = (code as string) || ''
  errorMessage.value = (message as string) || ''
  errorStack.value = (stack as string) || ''
}

// 获取错误图标
const getErrorIcon = () => {
  switch (errorType.value) {
    case '404':
      return Warning
    case '403':
      return CircleClose
    case '500':
    case 'network':
      return WarnTriangleFilled
    case 'auth':
      return CircleClose
    default:
      return Warning
  }
}

// 获取错误标题
const getErrorTitle = (): string => {
  switch (errorType.value) {
    case '404':
      return '页面未找到'
    case '403':
      return '访问被拒绝'
    case '500':
      return '服务器错误'
    case 'network':
      return '网络连接失败'
    case 'auth':
      return '认证失败'
    default:
      return '发生错误'
  }
}

// 获取错误消息
const getErrorMessage = (): string => {
  if (errorMessage.value) {
    return errorMessage.value
  }

  switch (errorType.value) {
    case '404':
      return '抱歉，您访问的页面不存在'
    case '403':
      return '您没有权限访问此页面'
    case '500':
      return '服务器内部错误，请稍后重试'
    case 'network':
      return '网络连接失败，请检查您的网络设置'
    case 'auth':
      return '身份验证失败，请重新登录'
    default:
      return '系统发生未知错误，请稍后重试'
  }
}

// 获取错误描述
const getErrorDescription = (): string => {
  switch (errorType.value) {
    case '404':
      return '请检查URL是否正确，或从导航菜单重新开始'
    case '403':
      return '如果您认为这是错误，请联系系统管理员'
    case '500':
      return '我们的技术团队已收到通知，正在解决此问题'
    case 'network':
      return '请检查网络连接后重试，或联系网络管理员'
    case 'auth':
      return '您的登录会话可能已过期，请重新登录'
    default:
      return '如果问题持续存在，请联系技术支持团队'
  }
}

// 返回主页
const goHome = () => {
  // 清除本地用户信息和token
  authStore.logout()
  // 跳转到登录页面
  router.push('/login').catch(() => {
    window.location.href = '/login'
  })
}

// 返回上一页
const goBack = () => {
  if (window.history.length > 1) {
    router.back()
  } else {
    goHome()
  }
}

// 刷新页面
const refresh = () => {
  window.location.reload()
}
</script>

<style scoped lang="scss">
.error-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.error-container {
  max-width: 600px;
  width: 100%;
  text-align: center;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  z-index: 2;
}

.error-icon-wrapper {
  position: relative;
  margin-bottom: 30px;

  .error-icon {
    color: #f56c6c;
    animation: bounce 2s infinite;
  }

  .error-decoration {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;

    .decoration-circle {
      position: absolute;
      border: 2px solid rgba(245, 108, 108, 0.2);
      border-radius: 50%;
      animation: pulse 3s infinite;

      &.circle-1 {
        width: 150px;
        height: 150px;
        top: -75px;
        left: -75px;
        animation-delay: 0s;
      }

      &.circle-2 {
        width: 200px;
        height: 200px;
        top: -100px;
        left: -100px;
        animation-delay: 1s;
      }

      &.circle-3 {
        width: 250px;
        height: 250px;
        top: -125px;
        left: -125px;
        animation-delay: 2s;
      }
    }
  }
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

.error-content {
  margin-bottom: 30px;

  .error-title {
    font-size: 32px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0 0 15px 0;
  }

  .error-message {
    font-size: 18px;
    color: #7f8c8d;
    margin: 0 0 10px 0;
    line-height: 1.6;
  }

  .error-description {
    font-size: 14px;
    color: #95a5a6;
    margin: 0;
    line-height: 1.5;
  }
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 30px;

  .el-button {
    min-width: 120px;
  }
}

.error-help {
  margin-bottom: 20px;
  text-align: left;

  .help-content {
    padding: 15px 0;

    ul {
      margin: 10px 0;
      padding-left: 20px;

      li {
        margin-bottom: 5px;
        line-height: 1.5;
      }
    }

    p {
      margin: 8px 0;
      line-height: 1.5;
    }
  }
}

.error-details {
  .error-info {
    text-align: left;
    font-size: 14px;

    p {
      margin: 8px 0;
      line-height: 1.5;
    }

    .error-stack {
      background: #f8f9fa;
      border: 1px solid #e9ecef;
      border-radius: 4px;
      padding: 10px;
      font-size: 12px;
      line-height: 1.4;
      overflow-x: auto;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .error-container {
    padding: 30px 20px;
  }

  .error-content {
    .error-title {
      font-size: 24px;
    }

    .error-message {
      font-size: 16px;
    }
  }

  .error-actions {
    flex-direction: column;
    align-items: center;

    .el-button {
      width: 100%;
      max-width: 200px;
    }
  }

  .error-icon-wrapper {
    .error-icon {
      font-size: 80px;
    }

    .error-decoration {
      .decoration-circle {
        &.circle-1 {
          width: 100px;
          height: 100px;
          top: -50px;
          left: -50px;
        }

        &.circle-2 {
          width: 130px;
          height: 130px;
          top: -65px;
          left: -65px;
        }

        &.circle-3 {
          width: 160px;
          height: 160px;
          top: -80px;
          left: -80px;
        }
      }
    }
  }
}
</style>
