<script setup>
import { ArrowUpRight } from 'lucide-vue-next'
import PublicArticleImage from '~/components/shared/PublicArticleImage.vue'
import { useNewsContent } from '~/content/news'
import { normalizePublicInternalPath } from '~/utils/public-routes'
import { buildPublicSeoLinks } from '~/utils/public-seo'

const { newsArticles, newsIndex } = await useNewsContent()
const { locale } = usePublicLocale()
const ui = usePublicUi()
const newsIndexSeo = computed(() => newsIndex.value?.seo || null)

const featuredArticle = computed(() => newsArticles.value[0] || null)
const secondaryArticles = computed(() => newsArticles.value.slice(1, 3))
const listArticles = computed(() => newsArticles.value.slice(3))

function resolveSiteOrigin(url) {
  try {
    return new URL(String(url || 'https://bent.ge')).origin
  }
  catch {
    return 'https://bent.ge'
  }
}

const newsIndexLinks = computed(() => {
  const origin = resolveSiteOrigin(newsIndexSeo.value?.canonical || newsIndexSeo.value?.xDefault)
  const path = newsIndex.value?.path || ''
  const localized = Array.isArray(newsIndex.value?.localized) ? newsIndex.value.localized : []
  const hreflang = Array.isArray(newsIndexSeo.value?.hreflang) && newsIndexSeo.value.hreflang.length
    ? newsIndexSeo.value.hreflang
    : []

  return {
    canonical: newsIndexSeo.value?.canonical || (path ? `${origin}${path}` : ''),
    hreflang,
    xDefault: newsIndexSeo.value?.xDefault || localized.find((entry) => entry?.locale === 'en')?.href || '',
  }
})

useSeoMeta({
  title: () => newsIndexSeo.value?.title || 'News | bent.ge',
  description: () => newsIndexSeo.value?.description || '',
  ogTitle: () => newsIndexSeo.value?.ogTitle || newsIndexSeo.value?.title || 'News | bent.ge',
  ogDescription: () => newsIndexSeo.value?.ogDescription || newsIndexSeo.value?.description || '',
  ogImage: () => newsIndexSeo.value?.ogImage || '',
  robots: () => newsIndexSeo.value?.robots || 'index,follow',
})

useHead(() => ({
  link: buildPublicSeoLinks(newsIndexLinks.value),
}))
</script>

<template>
  <div class="pt-32 pb-32 max-w-7xl mx-auto px-4 sm:px-6">
    <div class="mb-12 md:mb-20">
      <h1 class="text-[12vw] md:text-[8vw] leading-[0.85] font-black text-slate-900 uppercase tracking-tighter">
        {{ ui.news.latest }}
      </h1>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 md:gap-6 mb-24 md:mb-32">
      <NuxtLink
        v-if="featuredArticle"
        :to="featuredArticle.resolvedPath || featuredArticle.path"
        class="lg:col-span-2 relative rounded-[2rem] overflow-hidden aspect-square lg:aspect-[2/1] group"
      >
        <PublicArticleImage
          :src="featuredArticle.image"
          :alt="featuredArticle.title"
          label="Feature"
          img-class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
          fallback-class="absolute inset-0 w-full h-full"
        />
        <div class="absolute inset-0 bg-gradient-to-t from-slate-900/90 via-slate-900/20 to-transparent" />

        <div class="absolute top-6 left-6 md:top-8 md:left-8 flex gap-3">
          <span class="bg-brand-orange text-white text-[10px] font-bold uppercase tracking-widest px-3 py-1.5 rounded-full">{{ ui.news.featured }}</span>
          <span class="bg-white/20 backdrop-blur-md text-white text-[10px] font-bold uppercase tracking-widest px-3 py-1.5 rounded-full">
            {{ featuredArticle.category }}
          </span>
          <span v-if="featuredArticle.isFallback" class="bg-white/20 backdrop-blur-md text-white text-[10px] font-bold uppercase tracking-widest px-3 py-1.5 rounded-full">
            {{ featuredArticle.sourceLocaleCode }}
          </span>
        </div>

        <div class="absolute bottom-0 left-0 w-full p-6 md:p-10 flex flex-col items-start">
          <div class="flex items-center gap-4 text-white/70 font-mono text-xs mb-4">
            <span>{{ featuredArticle.date }}</span>
            <span>•</span>
            <span>{{ featuredArticle.readTime }}</span>
          </div>
          <h2 class="text-3xl md:text-5xl lg:text-6xl font-black text-white mb-4 leading-[1.1] tracking-tight group-hover:text-brand-orange transition-colors duration-300">
            {{ featuredArticle.title }}
          </h2>
          <p class="text-white/80 text-lg max-w-xl hidden md:block font-medium">
            {{ featuredArticle.excerpt }}
          </p>
        </div>
      </NuxtLink>

      <div class="flex flex-col gap-4 md:gap-6">
        <NuxtLink
          v-for="article in secondaryArticles"
          :key="article.id"
          :to="article.resolvedPath || article.path"
          class="relative rounded-[2rem] overflow-hidden flex-1 group min-h-[300px] lg:min-h-0"
        >
          <PublicArticleImage
            :src="article.image"
            :alt="article.title"
            label="Story"
            img-class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
            fallback-class="absolute inset-0 w-full h-full"
          />
          <div class="absolute inset-0 bg-gradient-to-t from-slate-900/90 to-transparent" />

          <div class="absolute top-6 left-6">
            <div class="flex items-center gap-2">
              <span class="bg-white/20 backdrop-blur-md text-white text-[10px] font-bold uppercase tracking-widest px-3 py-1.5 rounded-full">
                {{ article.category }}
              </span>
              <span v-if="article.isFallback" class="bg-white/20 backdrop-blur-md text-white text-[10px] font-bold uppercase tracking-widest px-3 py-1.5 rounded-full">
                {{ article.sourceLocaleCode }}
              </span>
            </div>
          </div>

          <div class="absolute bottom-0 left-0 w-full p-6 md:p-8">
            <div class="flex items-center gap-3 text-white/70 font-mono text-[10px] mb-3">
              <span>{{ article.date }}</span>
            </div>
            <h3 class="text-2xl font-bold text-white leading-tight tracking-tight group-hover:text-brand-orange transition-colors duration-300">
              {{ article.title }}
            </h3>
          </div>
        </NuxtLink>
      </div>
    </div>

    <div class="max-w-5xl mx-auto">
      <div class="flex items-center justify-between mb-10 pb-4 border-b-2 border-slate-900">
        <h3 class="text-sm font-bold uppercase tracking-widest text-slate-900">{{ ui.news.moreUpdates }}</h3>
        <span class="font-mono text-xs text-slate-500">{{ ui.news.scrollToExplore }}</span>
      </div>

      <div class="flex flex-col">
        <NuxtLink
          v-for="(article, idx) in listArticles"
          :key="article.id"
          :to="article.resolvedPath || article.path"
          class="group flex flex-col md:flex-row md:items-center justify-between py-8 md:py-10 border-b border-slate-200 hover:border-brand-orange transition-colors duration-300"
        >
          <div class="flex items-start md:items-center gap-6 md:gap-12 mb-6 md:mb-0">
            <span class="font-mono text-sm text-slate-400 hidden md:block w-8">
              0{{ idx + 4 }}
            </span>
            <div>
              <div class="flex items-center gap-4 mb-3">
                <span class="text-[10px] font-bold uppercase tracking-widest text-brand-orange bg-brand-orange/10 px-2.5 py-1 rounded-full">
                  {{ article.category }}
                </span>
                <span v-if="article.isFallback" class="text-[10px] font-bold uppercase tracking-widest text-slate-700 bg-slate-100 px-2.5 py-1 rounded-full">
                  {{ article.sourceLocaleCode }}
                </span>
                <span class="font-mono text-xs text-slate-500">{{ article.date }}</span>
              </div>
              <h4 class="text-2xl md:text-4xl font-black text-slate-900 tracking-tight group-hover:text-brand-orange transition-colors duration-300">
                {{ article.title }}
              </h4>
            </div>
          </div>

          <div class="flex items-center justify-between md:justify-end w-full md:w-auto">
            <span class="text-xs font-bold uppercase tracking-widest text-slate-900 md:hidden">{{ ui.common.readArticle }}</span>
            <div class="w-14 h-14 rounded-full border border-slate-200 flex items-center justify-center group-hover:bg-brand-orange group-hover:border-brand-orange group-hover:text-white transition-all duration-300">
              <ArrowUpRight class="w-6 h-6 group-hover:rotate-45 transition-transform duration-300" />
            </div>
          </div>
        </NuxtLink>
      </div>
    </div>
  </div>
</template>
