<template>
  <div :class="['min-h-screen flex items-center justify-center', backgroundColor]">
    <div class="text-center">
      <h1 :class="errorCodeClass">{{ statusCode }}</h1>
      <h2 :class="errorTitleClass">{{ ERR_TITLES[statusCode] || defaultErrorTitle }}</h2>
      <p :class="errorMessageClass">{{ ERR_MSGS[statusCode] || defaultErrorMessage }}</p>
      <button :class="buttonClass" @click="goTo">{{ buttonText }}</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const props = defineProps({
  statusCode: {
    type: Number,
    required: true,
  },
  goToPath: {
    type: String,
    default: '/',
  },
  backgroundColor: {
    type: String,
    default: 'bg-base-200',
  },
  errorCodeClass: {
    type: String,
    default: 'text-9xl font-bold text-error',
  },
  errorTitleClass: {
    type: String,
    default: 'text-5xl font-semibold mb-4',
  },
  errorMessageClass: {
    type: String,
    default: 'text-xl mb-8',
  },
  buttonClass: {
    type: String,
    default: 'btn btn-primary',
  },
  buttonText: {
    type: String,
    default: 'Go Home',
  },
})

const ERR_TITLES: Record<number, string> = {
  200: 'OK',
  201: 'Created',
  204: 'No Content',
  301: 'Moved Permanently',
  302: 'Found (Temporary Redirect)',
  400: 'Bad Request',
  401: 'Unauthorized',
  403: 'Forbidden',
  404: 'Page Not Found',
  405: 'Method Not Allowed',
  408: 'Request Timeout',
  409: 'Conflict',
  410: 'Gone',
  413: 'Payload Too Large',
  415: 'Unsupported Media Type',
  422: 'Unprocessable Entity',
  429: 'Too Many Requests',
  500: 'Internal Server Error',
  501: 'Not Implemented',
  502: 'Bad Gateway',
  503: 'Service Unavailable',
  504: 'Gateway Timeout',
}

const ERR_MSGS: Record<number, string> = {
  200: 'The request has succeeded.',
  201: 'The request has been fulfilled and resulted in a new resource being created.',
  204: 'The server successfully processed the request and is not returning any content.',
  301: 'This and all future requests should be directed to the given URI.',
  302: 'This is an alias for 301 Moved Permanently due to historical reasons.',
  400: 'The server cannot or will not process the request due to something that is perceived to be a client error (e.g., malformed request syntax, invalid request message framing, or deceptive request routing).',
  401: 'The request requires user authentication.',
  403: 'The server understood the request but refuses to authorize it.',
  404: 'The requested resource could not be found but may be available in the future. Subsequent requests by the client are permissible.',
  405: 'The method specified in the Request-Line is not allowed for the resource identified by the Request-URI.',
  408: 'The client did not produce a request within the time that the server was prepared to wait.',
  409: 'The request could not be completed due to a conflict with the current state of the resource.',
  410: 'The requested resource is no longer available at the server and no forwarding address is known.',
  413: 'The server is refusing to process a request because the request entity is larger than the server is willing or able to process.',
  415: 'The server refuses to accept the request because the payload format is in an unsupported format.',
  422: 'When the instance given in the request is well-formed but unable to be followed due to semantic errors.',
  429: 'The user has sent too many requests in a given amount of time ("rate limiting").',
  500: 'A generic error message, given when an unexpected condition was encountered and no more specific message is suitable.',
  501: 'The server either does not recognize the request method, or it lacks the ability to fulfill the request.',
  502: 'The server, while acting as a gateway or proxy, received an invalid response from the upstream server it accessed in attempting to fulfill the request.',
  503: 'The server is currently unable to handle the request due to a temporary overloading or maintenance of the server.',
  504: 'The server, while acting as a gateway or proxy, did not receive a timely response from the upstream server specified by the URI.',
}
const defaultErrorTitle = 'An Error Occurred'
const defaultErrorMessage = 'We are unable to display the requested page. Please try again later.'

const router = useRouter()
const goTo = () => {
  router.push(props.goToPath)
}
</script>

<style scoped>
/* You can add any additional styles here */
</style>
