<script lang="ts" setup>
import { Link } from '@inertiajs/vue3'
import AdminLayout from '@/Layouts/AdminLayout.vue'
import type { KnowledgeBaseArticle, StatusColor } from '@/types'

interface Props {
  article: KnowledgeBaseArticle & { helpful_percentage: number }
}

defineOptions({ layout: AdminLayout })

const props = defineProps<Props>()

function resolveStatusColor(status: string): StatusColor {
  const map: Record<string, StatusColor> = {
    draft: 'warning',
    published: 'success',
    archived: 'secondary',
  }
  return map[status] ?? 'info'
}

function formatDate(dateString: string | null): string {
  if (!dateString) {
    return '--'
  }
  const date = new Date(dateString)
  return date.toLocaleDateString('en-US', {
    month: 'short',
    day: 'numeric',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  })
}
</script>

<template>
  <div>
    <!-- Header -->
    <div class="d-flex align-center justify-space-between mb-6">
      <div>
        <div class="d-flex align-center gap-2 mb-1">
          <Link href="/knowledge-base/articles" class="text-decoration-none">
            <VBtn icon="tabler-arrow-left" variant="text" size="small" />
          </Link>
          <span class="text-h4 font-weight-bold">{{ article.title }}</span>
          <VChip
            :color="resolveStatusColor(article.status)"
            size="small"
            variant="tonal"
            class="text-capitalize ms-2"
          >
            {{ article.status }}
          </VChip>
          <VChip
            v-if="article.is_featured"
            color="warning"
            size="small"
            variant="tonal"
          >
            Featured
          </VChip>
        </div>
        <div class="text-body-2 text-medium-emphasis ms-10">
          By {{ article.author?.name ?? 'Unknown' }} in {{ article.category?.name ?? 'Uncategorized' }}
        </div>
      </div>
      <Link :href="`/knowledge-base/articles/${article.id}/edit`">
        <VBtn color="primary" prepend-icon="tabler-edit">
          Edit Article
        </VBtn>
      </Link>
    </div>

    <VRow>
      <!-- Article Content -->
      <VCol cols="12" lg="8">
        <VCard class="mb-6">
          <VCardText>
            <div class="text-body-1" style="white-space: pre-wrap; word-wrap: break-word;">{{ article.content }}</div>
          </VCardText>
        </VCard>
      </VCol>

      <!-- Sidebar -->
      <VCol cols="12" lg="4">
        <!-- Info -->
        <VCard title="Article Info" class="mb-6">
          <VCardText>
            <div class="d-flex justify-space-between align-center mb-3">
              <span class="text-body-2 text-medium-emphasis">Views</span>
              <span class="text-body-2 font-weight-medium">{{ article.view_count.toLocaleString() }}</span>
            </div>
            <div class="d-flex justify-space-between align-center mb-3">
              <span class="text-body-2 text-medium-emphasis">Helpful</span>
              <span class="text-body-2 font-weight-medium">{{ article.helpful_count }} / {{ article.helpful_count + article.not_helpful_count }}</span>
            </div>
            <div class="d-flex justify-space-between align-center mb-3">
              <span class="text-body-2 text-medium-emphasis">Helpful %</span>
              <span class="text-body-2 font-weight-medium">
                {{ article.helpful_count + article.not_helpful_count > 0 ? `${article.helpful_percentage}%` : '--' }}
              </span>
            </div>
            <div class="d-flex justify-space-between align-center mb-3">
              <span class="text-body-2 text-medium-emphasis">Published</span>
              <span class="text-body-2">{{ formatDate(article.published_at) }}</span>
            </div>
            <div class="d-flex justify-space-between align-center">
              <span class="text-body-2 text-medium-emphasis">Last Updated</span>
              <span class="text-body-2">{{ formatDate(article.updated_at) }}</span>
            </div>
          </VCardText>
        </VCard>

        <!-- Revision History -->
        <VCard v-if="article.revisions && article.revisions.length > 0" title="Revision History">
          <VCardText>
            <VList density="compact" class="pa-0">
              <VListItem
                v-for="revision in article.revisions"
                :key="revision.id"
                class="px-0"
              >
                <template #prepend>
                  <VIcon icon="tabler-history" size="18" class="me-2" />
                </template>
                <VListItemTitle class="text-body-2">
                  {{ revision.editor?.name ?? 'Unknown' }}
                </VListItemTitle>
                <VListItemSubtitle class="text-caption">
                  {{ formatDate(revision.created_at) }}
                </VListItemSubtitle>
              </VListItem>
            </VList>
          </VCardText>
        </VCard>
      </VCol>
    </VRow>
  </div>
</template>
