<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { withBase, useData } from 'vitepress'
import { useLangs } from './useLangs'

const { site, theme, lang } = useData()
const { localeLinks } = useLangs({ removeCurrent: false })

const root = ref('/')
onMounted(() => {
    const path = window ? window.location.pathname : ""
        .replace(site.value.base, '')
        .replace(/(^.*?\/).*$/, '/$1')
    
    if (localeLinks.value.length) {
        root.value =
            localeLinks.value.find(({ link }) => link.startsWith(path))?.link ||
            localeLinks.value[0].link
    }
})
</script>

<template>
    <div class="NotFound">
        <p class="code">{{ theme.notFound?.code ?? '404' }}</p>
        <h1 class="title">{{ theme.notFound?.title ?? '页面未找到' }}</h1>
        <div class="divider" />
        <blockquote class="quote">
            {{
                theme.notFound?.quote ??
                "生大材，不遇其时，其势定衰。生平庸，不化其势，其性定弱。"
            }}
        </blockquote>

        <div class="action">
            <a
                class="link"
                href="javascript:history.go(-1)"
                :aria-label="'前往上一页'"
            >
                {{ '前往上一页' }}
            </a>
            <a
                class="link"
                :href="withBase(root)"
                :aria-label="theme.notFound?.linkLabel ?? '回到最初'"
            >
                {{ theme.notFound?.linkText ?? '回到最初' }}
            </a>
        </div>
    </div>
</template>

<style scoped>
.NotFound {
    padding: 64px 24px 96px;
    text-align: center;
}

@media (min-width: 768px) {
    .NotFound {
        padding: 96px 32px 168px;
    }
}

.code {
    line-height: 64px;
    font-size: 64px;
    font-weight: 600;
}

.title {
    padding-top: 12px;
    letter-spacing: 2px;
    line-height: 20px;
    font-size: 20px;
    font-weight: 700;
}

.divider {
    margin: 24px auto 18px;
    width: 64px;
    height: 1px;
    background-color: var(--vp-c-divider);
}

.quote {
    margin: 0 auto;
    max-width: 256px;
    font-size: 14px;
    font-weight: 500;
    color: var(--vp-c-text-2);
}

.action {
    padding-top: 20px;
    display: flex;
    justify-content: center;
    gap: 12px;
}

.link {
    display: inline-block;
    border: 1px solid var(--vp-c-brand-1);
    border-radius: 16px;
    padding: 3px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--vp-c-brand-1);
    transition: border-color 0.25s, color 0.25s;
}

.link:hover {
    border-color: var(--vp-c-brand-2);
    color: var(--vp-c-brand-2);
}
</style>