<template>
  <div class="row justify-content-center">
    <div class="col-lg-6 col-md-8 col-sm-10">
      <div class="main-error-wrapper text-center">
        <div class="error-icon mb-4">
          <i class="fe fe-shield-off" style="font-size: 4rem; color: #dc3545;"></i>
        </div>
        <h1 class="error-title mb-3">Không có quyền truy cập</h1>
        <div class="error-message mb-4">
          <p class="lead">
            Bạn đang cố gắng truy cập vào trang không hợp lệ, hoặc trên trang bạn đang truy cập có chức năng bạn chưa
            được cấp quyền.
          </p>
          <p class="text-muted">
            Vui lòng liên hệ với bộ phận IT để được hỗ trợ. Xin cảm ơn!
          </p>
        </div>
        <div class="error-actions">
          <router-link :to="{ name: 'home' }" class="btn btn-primary me-3">
            <i class="fe fe-home me-2"></i>
            Về trang chủ
          </router-link>
          <button @click="goBack" class="btn btn-outline-secondary">
            <i class="fe fe-arrow-left me-2"></i>
            Quay lại
          </button>
        </div>
        <div class="contact-info mt-4">
          <small class="text-muted">
            <i class="fe fe-mail me-1"></i>
            Liên hệ IT: thangtq@ladaexpress.vn |
            <i class="fe fe-phone ms-2 me-1"></i>
            Zalo: 0904.669.169
          </small>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const goBack = () => {
  if (window.history.length > 1) {
    router.go(-1)
  } else {
    router.push({ name: 'home' })
  }
}
</script>

<style scoped>
.main-error-wrapper {
  padding: 3rem 2rem;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.error-title {
  color: #495057;
  font-weight: 600;
  font-size: 2.5rem;
}

.error-message {
  max-width: 500px;
  margin: 0 auto;
}

.error-message .lead {
  font-size: 1.1rem;
  color: #6c757d;
  line-height: 1.6;
}

.error-actions {
  margin: 2rem 0;
}

.btn {
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  border-radius: 0.375rem;
  transition: all 0.2s ease-in-out;
}

.btn-primary {
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:hover {
  background-color: #0056b3;
  border-color: #0056b3;
  transform: translateY(-1px);
}

.btn-outline-secondary {
  color: #6c757d;
  border-color: #6c757d;
}

.btn-outline-secondary:hover {
  background-color: #6c757d;
  border-color: #6c757d;
  color: white;
  transform: translateY(-1px);
}

.contact-info {
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 0.375rem;
  border-left: 4px solid #007bff;
}

.error-icon {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

@media (max-width: 768px) {
  .main-error-wrapper {
    padding: 2rem 1rem;
  }

  .error-title {
    font-size: 2rem;
  }

  .btn {
    display: block;
    width: 100%;
    margin-bottom: 0.5rem;
  }

  .btn:last-child {
    margin-bottom: 0;
  }
}
</style>
