<template>
  <div v-if="!article" class="w-full flex justify-center">
    <div class="w-full max-w-[720px] md:p-6">
      <div class="text-center py-12">
        <h1
          class="text-2xl md:text-3xl font-semibold text-content-primary mb-4"
        >
          Artikel Tidak Ditemukan
        </h1>
        <p class="text-content-secondary mb-6">
          Artikel dengan ID "{{ articleId }}" tidak ditemukan.
        </p>
        <button
          @click="$emit('back')"
          class="text-blue-600 hover:text-blue-800 underline"
        >
          Kembali ke Daftar Artikel
        </button>
      </div>
    </div>
  </div>

  <div v-else class="w-full flex justify-center">
    <div class="w-full max-w-[720px] md:p-6">
      <!-- Back Button -->
      <button
        @click="$emit('back')"
        class="inline-flex items-center text-sm text-content-secondary hover:text-content-primary mb-6"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="mr-2"
        >
          <path d="M15 18l-6-6 6-6" />
        </svg>
        Kembali
      </button>

      <!-- Article Header -->
      <div class="mb-6">
        <h1
          class="text-3xl md:text-4xl font-semibold text-content-primary mb-4"
        >
          {{ article.title }}
        </h1>
        <p class="text-base md:text-lg text-content-secondary mb-4">
          {{ article.excerpt }}
        </p>
        <div class="flex items-center gap-4 text-sm text-gray-500">
          <span>{{ article.author }}</span>
          <span>•</span>
          <span>{{ formattedDate }}</span>
          <span>•</span>
          <span
            class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-medium"
          >
            {{ article.category }}
          </span>
        </div>
      </div>

      <!-- Article Image -->
      <div v-if="article.mediaSrc" class="mb-8">
        <img
          :src="article.mediaSrc"
          :alt="article.title"
          class="w-full h-auto rounded-lg"
        />
        <p class="text-sm text-gray-500 mt-2">Sumber: inadigitalnews.com</p>
      </div>

      <!-- Article Content -->
      <div class="prose prose-lg max-w-none">
        <p class="text-base md:text-lg text-gray-700 leading-relaxed mb-4">
          Jakarta — Pemerintah terus mendorong percepatan transformasi digital
          di lingkungan Aparatur Sipil Negara (ASN) melalui penguatan integrasi
          layanan dalam platform INAgov.
        </p>
        <p class="text-base md:text-lg text-gray-700 leading-relaxed mb-4">
          Kementerian Pendayagunaan Aparatur Negara dan Reformasi Birokrasi
          (KemenPANRB) menyatakan bahwa integrasi berbagai layanan ASN ke dalam
          satu portal bertujuan untuk mengurangi fragmentasi sistem yang selama
          ini menghambat efisiensi kerja.
        </p>
        <p class="text-base md:text-lg text-gray-700 leading-relaxed mb-4">
          "Selama ini ASN harus berpindah-pindah platform untuk mengakses
          layanan yang berbeda. Dengan INAgov, kami ingin menghadirkan
          pengalaman yang lebih sederhana, konsisten, dan efisien," ujar
          perwakilan KemenPANRB dalam keterangan resminya.
        </p>
        <p class="text-base md:text-lg text-gray-700 leading-relaxed mb-4">
          Integrasi ini mencakup layanan informasi kepegawaian, pengembangan
          kompetensi, akses kebijakan terbaru, dan berbagai layanan
          administratif lainnya. Melalui platform terpadu ini, diharapkan ASN
          dapat menghemat waktu dan meningkatkan produktivitas kerja.
        </p>
        <p class="text-base md:text-lg text-gray-700 leading-relaxed mb-4">
          Selain efisiensi, penguatan INAgov juga diharapkan dapat meningkatkan
          transparansi dan akuntabilitas dalam penyelenggaraan pemerintahan.
          Semua informasi dan layanan yang tersedia di platform ini dapat
          diakses dengan mudah oleh seluruh ASN di seluruh Indonesia.
        </p>
        <p class="text-base md:text-lg text-gray-700 leading-relaxed">
          Ke depan, pemerintah berencana untuk terus mengembangkan fitur INAgov
          dengan menambahkan lebih banyak layanan dan meningkatkan kualitas
          konten informasi yang tersedia. Langkah ini merupakan bagian dari
          komitmen pemerintah dalam mempercepat transformasi digital sektor
          publik.
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { articles } from '../data/articlesData';

interface ArticleDetailProps {
  articleId: string;
}

const props = defineProps<ArticleDetailProps>();
defineEmits(['back']);

const article = computed(() => {
  return articles.find((a) => a.id === props.articleId);
});

const formattedDate = computed(() => {
  if (!article.value) return '';
  return new Date(article.value.date).toLocaleDateString('id-ID', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  });
});
</script>
