<template>
  <div class="error-page">
    <div class="error-container">
      <div class="error-content">
        <h1 class="error-code">{{ error?.statusCode || 404 }}</h1>
        <h2 class="error-title">
          {{ locale === "ar" ? getArabicTitle() : getEnglishTitle() }}
        </h2>
        <p class="error-description">
          {{ locale === "ar" ? getArabicDescription() : getEnglishDescription() }}
        </p>

        <div class="error-actions">
          <NuxtLink :to="localePath('/')" class="btn-primary">
            {{ locale === "ar" ? "العودة للرئيسية" : "Back to Home" }}
          </NuxtLink>
          <NuxtLink :to="localePath('/market')" class="btn-secondary">
            {{ locale === "ar" ? "تصفح السيارات" : "Browse Cars" }}
          </NuxtLink>
        </div>

        <div class="quick-links">
          <h3>{{ locale === "ar" ? "روابط سريعة" : "Quick Links" }}</h3>
          <ul>
            <li>
              <NuxtLink :to="localePath('/market')">
                {{ locale === "ar" ? "المعرض" : "Market" }}
              </NuxtLink>
            </li>
            <li>
              <NuxtLink :to="localePath('/offers')">
                {{ locale === "ar" ? "العروض" : "Offers" }}
              </NuxtLink>
            </li>
            <li>
              <NuxtLink :to="localePath('/contact')">
                {{ locale === "ar" ? "تواصل معنا" : "Contact Us" }}
              </NuxtLink>
            </li>
            <li>
              <NuxtLink :to="localePath('/about')">
                {{ locale === "ar" ? "من نحن" : "About Us" }}
              </NuxtLink>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  error: Object,
});

const { locale } = useI18n();
const localePath = useLocalePath();

const getArabicTitle = () => {
  switch (props.error?.statusCode) {
    case 404:
      return "الصفحة غير موجودة";
    case 500:
      return "خطأ في الخادم";
    case 403:
      return "غير مسموح بالوصول";
    default:
      return "حدث خطأ";
  }
};

const getEnglishTitle = () => {
  switch (props.error?.statusCode) {
    case 404:
      return "Page Not Found";
    case 500:
      return "Server Error";
    case 403:
      return "Access Forbidden";
    default:
      return "An Error Occurred";
  }
};

const getArabicDescription = () => {
  switch (props.error?.statusCode) {
    case 404:
      return "عذراً، الصفحة التي تبحث عنها غير موجودة أو تم نقلها.";
    case 500:
      return "عذراً، حدث خطأ في الخادم. يرجى المحاولة مرة أخرى لاحقاً.";
    case 403:
      return "عذراً، ليس لديك صلاحية للوصول إلى هذه الصفحة.";
    default:
      return "عذراً، حدث خطأ غير متوقع. يرجى المحاولة مرة أخرى.";
  }
};

const getEnglishDescription = () => {
  switch (props.error?.statusCode) {
    case 404:
      return "Sorry, the page you are looking for does not exist or has been moved.";
    case 500:
      return "Sorry, a server error occurred. Please try again later.";
    case 403:
      return "Sorry, you do not have permission to access this page.";
    default:
      return "Sorry, an unexpected error occurred. Please try again.";
  }
};

// SEO for error page
useHead({
  title: locale.value === "ar" ? "صفحة غير موجودة - خليج أوتو" : "Page Not Found - Khalej Auto",
  meta: [
    { name: "robots", content: "noindex, nofollow" },
  ],
});
</script>

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

.error-container {
  max-width: 600px;
  width: 100%;
  text-align: center;
}

.error-content {
  background: #fff;
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.error-code {
  font-size: 120px;
  font-weight: 700;
  color: #2D9596;
  line-height: 1;
  margin-bottom: 10px;
}

.error-title {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
}

.error-description {
  font-size: 16px;
  color: #666;
  margin-bottom: 30px;
  line-height: 1.6;
}

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

.btn-primary {
  background: #2D9596;
  color: #fff;
  padding: 12px 30px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.3s ease;

  &:hover {
    background: #247a7a;
  }
}

.btn-secondary {
  background: transparent;
  color: #2D9596;
  padding: 12px 30px;
  border-radius: 8px;
  border: 2px solid #2D9596;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;

  &:hover {
    background: #2D9596;
    color: #fff;
  }
}

.quick-links {
  border-top: 1px solid #eee;
  padding-top: 25px;

  h3 {
    font-size: 16px;
    color: #333;
    margin-bottom: 15px;
  }

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
  }

  a {
    color: #2D9596;
    text-decoration: none;
    font-size: 14px;

    &:hover {
      text-decoration: underline;
    }
  }
}

@media (max-width: 480px) {
  .error-code {
    font-size: 80px;
  }

  .error-title {
    font-size: 22px;
  }

  .error-content {
    padding: 25px;
  }
}
</style>
