<script setup>
import { computed } from 'vue';

definePageMeta({
  title: "Error Page",
  layout: "empty",
});

const props = defineProps({
  error: {
    type: Object,
    required: true
  }
});

// console.log("props", props);

const isDynamicRouteError = computed(() => {
  const path = window?.location?.pathname || '';
  return path.includes('/[') || path.includes(']');
});

const handleError = () => {
  if (props.error.statusCode === 404 || isDynamicRouteError.value) {
    return navigateTo('/');
  }
  
  clearError({ redirect: window.location.pathname });
};
</script>

<template>
  <div class="min-h-screen bg-gray-50 flex flex-col items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md w-full space-y-8">
      <div>
        <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
          {{ error.statusCode === 404 ? 'Page not found' : 'An error occurred' }}
        </h2>
        <p class="mt-2 text-center text-sm text-gray-600">
          {{ error.message }}
        </p>
      </div>
      
      <div class="bg-white p-6 rounded-lg shadow-md">
        <div v-if="isDynamicRouteError" class="mb-6">
          <h3 class="text-lg font-medium text-gray-900 mb-2">Invalid URL Format</h3>
          <p class="text-gray-600 mb-4">
            It looks like you're trying to access a page with a placeholder in the URL.
            Dynamic routes like <code class="bg-gray-100 px-1 py-0.5 rounded">[id]</code> need to be 
            replaced with actual values.
          </p>
          <div class="bg-blue-50 border-l-4 border-blue-400 p-4">
            <div class="flex">
              <div class="flex-shrink-0">
                <Icon name="heroicons:information-circle" class="h-5 w-5 text-blue-400" />
              </div>
              <div class="ml-3">
                <p class="text-sm text-blue-700">
                  Instead of using <strong>/execution/form/[id]</strong>, you should use a specific ID, like 
                  <strong>/execution/form/123</strong> or navigate from the case list page.
                </p>
              </div>
            </div>
          </div>
        </div>
        
        <div class="flex flex-col space-y-4">
          <button 
            @click="handleError"
            class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
          >
            {{ error.statusCode === 404 ? 'Go to homepage' : 'Try again' }}
          </button>
          
          <button 
            v-if="error.statusCode !== 404"
            @click="navigateTo('/')"
            class="w-full flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
          >
            Go to homepage
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
