<template>
  <div class="engines-container">
    <header class="hero-section-slate">
      <div class="engines-header-decor">
        <div class="hero-decor-blob -top-24 -left-24 h-96 w-96 bg-emerald-600"></div>
        <div class="hero-decor-blob -bottom-24 -right-24 h-96 w-96 bg-teal-600"></div>
      </div>

      <div class="hero-container">
        <div class="hero-badge">{{ t('engines.badge') }}</div>
        <h1 class="hero-title">
          {{ t('engines.titleLead') }} <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-teal-300">{{ t('engines.titleAccent') }}</span>
        </h1>
        <p class="hero-subtitle mb-10">{{ t('engines.subtitle') }}</p>
      </div>
    </header>

    <main class="engines-main">
      <div v-if="error" class="error-banner" role="alert">
        <i class="fa-solid fa-triangle-exclamation text-2xl text-yellow-500"></i>
        <div>
          <h3 class="error-banner-title">{{ t('engines.errorTitle') }}</h3>
          <p class="error-banner-desc">{{ error }}</p>
        </div>
      </div>

      <SkeletonCard v-else-if="loading" :count="3" />

      <div v-else-if="enginePages.length === 0" class="empty-state">
        <div class="empty-state-icon"><i class="fa-solid fa-inbox"></i></div>
        <h2 class="empty-state-title">{{ t('engines.noPagesTitle') }}</h2>
        <p class="empty-state-desc">{{ t('engines.noPagesDesc') }}</p>
      </div>

      <div v-else class="engine-list">
        <article v-for="({ page, digest }, index) in cards" :key="page.id" class="engine-card group">
          <div class="engine-card-index">{{ String(index + 1).padStart(2, '0') }}</div>

          <div class="engine-card-body">
            <h2 class="engine-card-title">
              <a :href="exploreUrl(page)" target="_blank" rel="noopener">{{ page.title }}</a>
            </h2>

            <p v-if="page.description" class="engine-card-desc">{{ page.description }}</p>
            <p v-if="digest.intro" class="engine-card-preview">{{ digest.intro }}</p>
            <p v-else-if="page.content" class="engine-card-preview">{{ getCleanPreview(page.content) }}</p>

            <section v-if="digest.highlights.length" class="engine-highlights">
              <h3 v-if="digest.highlightsTitle" class="engine-highlights-title">{{ digest.highlightsTitle }}</h3>
              <ul class="engine-highlights-grid">
                <li v-for="(item, i) in digest.highlights" :key="i" class="engine-highlight">
                  <span class="engine-highlight-icon"><i class="fa-solid fa-check"></i></span>
                  <p class="engine-highlight-body">
                    <strong v-if="item.title" class="engine-highlight-lead">{{ item.title }}</strong>
                    <template v-if="item.title && item.text"> — </template>{{ item.text }}
                  </p>
                </li>
              </ul>
            </section>

            <div class="engine-card-actions">
              <a :href="exploreUrl(page)" target="_blank" rel="noopener" class="engine-explore-btn">
                <i class="fa-solid fa-code-branch text-sm"></i>
                {{ t('engines.explore') }}
                <i class="fa-solid fa-arrow-right text-sm"></i>
              </a>
              <a :href="`${WIKI_BASE}/${page.path}`" target="_blank" rel="noopener" class="engine-wiki-link">
                <i class="fa-solid fa-book mr-1"></i>{{ t('engines.openWiki') }}
              </a>
            </div>
          </div>
        </article>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useI18n } from 'vue-i18n'
import { WIKI_BASE } from '../../api/wiki.api'
import { useEnginesStore, getEngineDigest } from '../../stores/engines.store'
import type { WikiPageWithContent } from '../../lib/interfaces/wiki.interface'
import SkeletonCard from '../../components/SkeletonCard.vue'

const { t } = useI18n()

const store = useEnginesStore()
const { pages: enginePages, loading, error } = storeToRefs(store)
const { getCleanPreview } = store

const cards = computed(() =>
  enginePages.value.map((page) => ({ page, digest: getEngineDigest(page.content) })),
)

// Explore points at the engine's git repository (from wiki metadata);
// pages without one fall back to their wiki page.
const exploreUrl = (page: WikiPageWithContent): string =>
  page.repo || `${WIKI_BASE}/${page.path}`

onMounted(() => store.fetch())
</script>

<style scoped>
.engines-container {
  @apply bg-slate-950 min-h-screen pb-24;
}
.engines-header-decor {
  @apply absolute inset-0 opacity-30;
}
.engines-main {
  @apply max-w-5xl mx-auto px-4 md:px-8 mt-16 relative z-10;
}
.banner-base {
  @apply max-w-7xl mx-auto border-l-4 p-6 rounded-r-xl shadow-lg mb-12 flex items-start gap-4;
}
.error-banner { @apply banner-base bg-red-50 border-red-500; }
.error-banner-title { @apply text-red-800 font-bold text-lg; }
.error-banner-desc { @apply text-red-700 mt-1; }
.empty-state {
  @apply max-w-7xl mx-auto bg-slate-900 rounded-2xl shadow-xl p-12 text-center border border-slate-800;
}
.empty-state-icon { @apply text-6xl mb-4; }
.empty-state-title { @apply text-2xl font-bold text-white mb-2; }
.empty-state-desc { @apply text-slate-400 max-w-md mx-auto; }

/* Few engines, so every one of them gets a full-width, poster-like card. */
.engine-list {
  @apply flex flex-col gap-10;
}
.engine-card {
  @apply relative overflow-hidden bg-slate-900 rounded-3xl border border-slate-800 border-l-4 border-l-emerald-500 shadow-2xl transition-all hover:border-l-teal-300 hover:-translate-y-1;
}
.engine-card-index {
  @apply absolute -top-6 right-4 text-[9rem] leading-none font-black text-slate-800/60 select-none pointer-events-none transition-colors;
}
.engine-card:hover .engine-card-index {
  @apply text-slate-800;
}
.engine-card-body {
  @apply relative p-8 md:p-12;
}
.engine-card-title {
  @apply text-3xl md:text-5xl font-black text-white mb-4 leading-tight;
}
.engine-card-title a {
  @apply hover:text-emerald-400 transition-colors;
}
.engine-card-desc {
  @apply text-lg md:text-xl text-emerald-100/90 font-semibold mb-3 leading-relaxed max-w-3xl;
}
.engine-card-preview {
  @apply text-base text-slate-400 leading-relaxed mb-8 max-w-3xl;
}
.engine-highlights {
  @apply mb-10;
}
.engine-highlights-title {
  @apply text-xs font-bold uppercase tracking-[0.2em] text-emerald-400 mb-5;
}
.engine-highlights-grid {
  @apply grid md:grid-cols-2 gap-x-10 gap-y-4 max-w-4xl;
}
.engine-highlight {
  @apply flex items-start gap-3;
}
.engine-highlight-icon {
  @apply mt-1 flex h-5 w-5 flex-none items-center justify-center rounded-md bg-emerald-500/15 text-emerald-400 text-[10px];
}
.engine-highlight-body {
  @apply text-sm text-slate-400 leading-relaxed;
}
.engine-highlight-lead {
  @apply text-white font-semibold;
}
.engine-card-actions {
  @apply flex flex-wrap items-center gap-6;
}
.engine-explore-btn {
  @apply inline-flex items-center gap-2 bg-emerald-500 text-slate-950 px-6 py-3 rounded-xl font-bold hover:bg-emerald-400 transition-all shadow-lg shadow-emerald-900/40 group-hover:translate-x-1;
}
.engine-wiki-link {
  @apply text-slate-400 font-semibold hover:text-white transition-colors;
}
</style>
