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

// Импортируем все инструкции из директории
const importInstructions = import.meta.glob('/src/content/placementInstructions/*.md', {
  as: 'raw',
}) 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>
.markdown {
  font-family: 'Inter', sans-serif;
  line-height: 1.7;
  color: #333;
}

.markdown ::v-deep(h1) {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #111827;
  font-weight: 700;
}

.markdown ::v-deep(h2) {
  font-size: 1.75rem;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  color: #1f2937;
  font-weight: 600;
}

.markdown ::v-deep(h3) {
  font-size: 1.5rem;
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
  color: #374151;
  font-weight: 500;
}

.markdown ::v-deep(p) {
  margin-bottom: 1rem;
  color: #4b5563;
}

.markdown ::v-deep(ul) {
  list-style: disc;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.markdown ::v-deep(ol) {
  list-style: decimal;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

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

.markdown ::v-deep(a) {
  color: #2563eb;
  text-decoration: underline;
}

.markdown ::v-deep(blockquote) {
  border-left: 4px solid #d1d5db;
  padding-left: 1rem;
  color: #6b7280;
  margin: 1rem 0;
  font-style: italic;
}

.markdown ::v-deep(code) {
  background-color: #f3f4f6;
  border-radius: 4px;
  padding: 0.2rem 0.4rem;
  font-family: 'Courier New', Courier, monospace;
  color: #1f2937;
}

.markdown ::v-deep(pre) {
  background-color: #f9fafb;
  padding: 1rem;
  border-radius: 8px;
  overflow-x: auto;
  color: #111827;
  font-family: 'Courier New', Courier, monospace;
}

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

.markdown ::v-deep(th),
.markdown ::v-deep(td) {
  border: 1px solid #d1d5db;
  padding: 0.5rem;
}

.markdown ::v-deep(th) {
  background-color: #f9fafb;
  font-weight: 600;
  text-align: left;
}
</style>
