<template>
  <div class="max-w-3xl mx-auto py-6 px-4 md:px-6">
    <div v-if="isLoading" class="text-gray-500 dark:text-gray-400">Загрузка инструкции...</div>
    <div v-else-if="data" class="markdown dark:text-gray-300">
      <VueMarkdownIt :source="data" />
    </div>
    <p v-else-if="isError" class="text-red-500 dark:text-red-400">Ошибка загрузки инструкции.</p>
    <p v-else class="text-gray-500 dark:text-gray-400">
      Инструкция для этого типа размещения отсутствует.
    </p>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { VueMarkdownIt } from '@f3ve/vue-markdown-it'
import { useQuery } from '@tanstack/vue-query'
import { type QRCodeDocument } from '@hereconnect/types'

// Импортируем все инструкции из директории
const importInstructions = import.meta.glob('/src/content/placementInstructions/*.md', {
  query: '?raw',
  import: 'default',
}) as unknown as Record<string, () => Promise<string>>

const { placement } = defineProps<{ placement: QRCodeDocument['placement'] }>()

// Хук для загрузки инструкции
async function fetchInstructions(): Promise<string | undefined> {
  return importInstructions[`/src/content/placementInstructions/${placement}.md`]?.()
}

// Используем vue-query для управления запросом
const { isLoading, isError, data } = useQuery({
  queryKey: ['placementInstructions', computed(() => placement)],
  queryFn: fetchInstructions,
})
</script>

<style scoped lang="scss">
.markdown {
  font-family: 'Inter', sans-serif;
  line-height: 1.7;
  color: var(--p-text-color);

  & ::v-deep(h1) {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--p-primary-color);
    font-weight: 700;
  }

  & ::v-deep(h2) {
    font-size: 1.75rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    color: var(--p-secondary-color);
    font-weight: 600;
  }

  & ::v-deep(h3) {
    font-size: 1.5rem;
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
    color: var(--p-secondary-light-color);
    font-weight: 500;
  }

  & ::v-deep(p) {
    margin-bottom: 1rem;
    color: var(--p-text-secondary-color);
  }

  & ::v-deep(ul),
  & ::v-deep(ol) {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
  }

  & ::v-deep(li) {
    margin-bottom: 0.5rem;
  }

  & ::v-deep(a) {
    color: var(--p-link-color);
    text-decoration: underline;
  }

  & ::v-deep(blockquote) {
    border-left: 4px solid var(--p-border-color);
    padding-left: 1rem;
    color: var(--p-text-secondary-color);
    margin: 1rem 0;
    font-style: italic;
  }

  & ::v-deep(code) {
    background-color: var(--p-surface-50);
    border-radius: 4px;
    padding: 0.2rem 0.4rem;
    font-family: 'Courier New', Courier, monospace;
    color: var(--p-text-color);
  }

  & ::v-deep(pre) {
    background-color: var(--p-surface-100);
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    color: var(--p-text-color);
    font-family: 'Courier New', Courier, monospace;
  }

  & ::v-deep(table) {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
  }

  & ::v-deep(th),
  & ::v-deep(td) {
    border: 1px solid var(--p-border-color);
    padding: 0.5rem;
  }

  & ::v-deep(th) {
    background-color: var(--p-surface-200);
    font-weight: 600;
    text-align: left;
    color: var(--p-text-color);
  }
}
</style>
