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

interface Breadcrumb {
  name: string
  slug: string
}

interface Props {
  category: KnowledgeBaseCategory
  articles: PaginatedResponse<KnowledgeBaseArticle>
  subcategories: KnowledgeBaseCategory[]
  breadcrumbs: Breadcrumb[]
}

defineOptions({ layout: MarketingLayout })

const props = defineProps<Props>()

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',
  })
}
</script>

<template>
  <Head :title="`${category.name} - Knowledge Base | EZSCALE`" />
  <div>
    <VContainer class="py-12">
      <!-- Breadcrumbs -->
      <VBreadcrumbs class="px-0 mb-6">
        <VBreadcrumbsItem>
          <Link href="/" class="text-decoration-none">
            Home
          </Link>
        </VBreadcrumbsItem>
        <VBreadcrumbsDivider />
        <VBreadcrumbsItem>
          <Link href="/knowledge-base" class="text-decoration-none">
            Knowledge Base
          </Link>
        </VBreadcrumbsItem>
        <template v-for="(crumb, index) in breadcrumbs" :key="crumb.slug">
          <VBreadcrumbsDivider />
          <VBreadcrumbsItem :disabled="index === breadcrumbs.length - 1">
            <Link
              v-if="index < breadcrumbs.length - 1"
              :href="`/knowledge-base/${crumb.slug}`"
              class="text-decoration-none"
            >
              {{ crumb.name }}
            </Link>
            <span v-else>{{ crumb.name }}</span>
          </VBreadcrumbsItem>
        </template>
      </VBreadcrumbs>

      <!-- Category Header -->
      <div class="mb-8">
        <div class="d-flex align-center gap-3 mb-3">
          <VAvatar
            v-if="category.icon"
            color="primary"
            variant="tonal"
            size="44"
          >
            <VIcon :icon="category.icon" size="22" />
          </VAvatar>
          <div>
            <h1 class="text-h4 font-weight-bold">{{ category.name }}</h1>
            <p v-if="category.description" class="text-body-1 text-medium-emphasis mb-0">
              {{ category.description }}
            </p>
          </div>
        </div>
      </div>

      <!-- Subcategories -->
      <VRow v-if="subcategories.length > 0" class="mb-8">
        <VCol
          v-for="sub in subcategories"
          :key="sub.id"
          cols="12"
          sm="6"
          md="4"
        >
          <Link :href="`/knowledge-base/${sub.slug}`" class="text-decoration-none">
            <VCard variant="outlined" class="feature-card-hover">
              <VCardText class="d-flex align-center gap-3 pa-4">
                <VAvatar
                  v-if="sub.icon"
                  color="primary"
                  variant="tonal"
                  size="36"
                >
                  <VIcon :icon="sub.icon" size="18" />
                </VAvatar>
                <div>
                  <div class="text-subtitle-2 font-weight-bold">{{ sub.name }}</div>
                  <div class="text-caption text-medium-emphasis">
                    {{ sub.articles_count ?? 0 }} {{ (sub.articles_count ?? 0) === 1 ? 'article' : 'articles' }}
                  </div>
                </div>
              </VCardText>
            </VCard>
          </Link>
        </VCol>
      </VRow>

      <!-- Articles List -->
      <VCard v-if="articles.data.length > 0" variant="outlined">
        <VList>
          <template v-for="(article, index) in articles.data" :key="article.id">
            <VDivider v-if="index > 0" />
            <Link
              :href="`/knowledge-base/${category.slug}/${article.slug}`"
              class="text-decoration-none"
            >
              <VListItem class="py-4">
                <VListItemTitle class="text-subtitle-1 font-weight-medium mb-1">
                  {{ article.title }}
                </VListItemTitle>
                <VListItemSubtitle v-if="article.excerpt" class="text-body-2 text-medium-emphasis" style="white-space: normal;">
                  {{ article.excerpt }}
                </VListItemSubtitle>
                <template #append>
                  <div class="d-flex align-center gap-4 text-caption text-medium-emphasis">
                    <span>
                      <VIcon icon="tabler-eye" size="14" class="me-1" />
                      {{ article.view_count }}
                    </span>
                    <span v-if="article.published_at">{{ formatDate(article.published_at) }}</span>
                  </div>
                </template>
              </VListItem>
            </Link>
          </template>
        </VList>
      </VCard>

      <!-- Pagination -->
      <div v-if="articles.last_page > 1" class="d-flex justify-center mt-8">
        <VPagination
          :model-value="articles.data.length > 0 ? Math.ceil((articles.from ?? 1) / 15) : 1"
          :length="articles.last_page"
          :total-visible="7"
        />
      </div>

      <!-- Empty state -->
      <div v-if="articles.data.length === 0 && subcategories.length === 0" class="text-center py-12">
        <VIcon icon="tabler-article-off" size="64" color="disabled" class="mb-4" />
        <h3 class="text-h6 text-medium-emphasis mb-2">No articles yet</h3>
        <p class="text-body-2 text-medium-emphasis mb-4">
          This category does not have any articles yet.
        </p>
        <Link href="/knowledge-base" class="text-decoration-none">
          <VBtn variant="outlined" prepend-icon="tabler-arrow-left">
            Back to Knowledge Base
          </VBtn>
        </Link>
      </div>
    </VContainer>
  </div>
</template>
