<template>
  <div class="page-container">
    <div class="page-header">
      <h1 class="page-title">{{ $t('navigation.downloads') }}</h1>
      <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
    </div>
    <div class="page-content">
      <el-skeleton
        :loading="pending"
        :rows="6"
        animated
        :throttle="{ leading: 500, trailing: 500 }"
      >
        <template #default>
          <file-card :file-id="id" :file="file" />
        </template>
      </el-skeleton>
    </div>
  </div>
</template>

<script setup lang="ts">
  const route = useRoute();
  const localePath = useLocalePath();

  const breadcrumbItems = [
    { label: $t('navigation.home'), to: localePath('/') },
    { label: $t('navigation.support'), to: localePath('/support') },
    { label: $t('navigation.documents'), to: localePath('/support/documents') },
    { label: $t('navigation.downloads') },
  ];

  const id = route.params.id as string;

  const {
    data: file,
    pending,
    error,
  } = await useFetch<FileMeta>(`/api/file/${id}`);

  if (error.value || !file.value) {
    throw createError({
      statusCode: 404,
      statusMessage: '文件未找到',
    });
  }

  const pageTitle = $t('page-title.download');
  usePageSeo({
    title: file.value.filename_download || pageTitle,
  });
</script>

<style scoped>
  .page-container {
    padding: 2rem;
    margin: 0 auto;
    max-width: 1200px;
  }

  .page-header {
    display: flex;
  }

  .page-title {
    font-size: 2rem;
    font-weight: bold;
    color: var(--el-color-primary);
    margin-bottom: 1rem;
  }

  .breadcrumb {
    margin-left: auto;
  }

  @media (max-width: 768px) {
    .breadcrumb {
      display: none;
    }
  }
</style>
