<script setup lang="ts">
import {onMounted, ref} from 'vue';
import {useNews} from './stores/useNews';
import FeedManager from './components/FeedManager.vue';
import CronSlider from './components/CronSlider.vue';
import SyncButton from './components/SyncButton.vue';
import ModelStatus from './components/ModelStatus.vue';

const news = useNews();
const filters = ref({country: 'DE'});

onMounted(async () => {
  await news.loadLastSync();
  await news.sync(filters.value);
});
</script>
<template>
  <main class="max-w-4xl mx-auto p-4 space-y-6">
    <h1 class="text-2xl font-bold">📰 Local News Summariser</h1>

    <div class="grid md:grid-cols-3 gap-4">
      <CronSlider/>
      <SyncButton/>
      <ModelStatus/>
    </div>

    <FeedManager/>

    <section v-if="news.offline" class="p-2 bg-yellow-100 border-l-4 border-yellow-500">
      Offline – Datenstand: {{ new Date(news.lastSync).toLocaleString() }}
    </section>

    <article v-for="a in news.articles" :key="a.id" class="bg-white rounded p-4 shadow">
      <h2 class="font-semibold">{{ a.title }}</h2>
      <p class="text-sm text-gray-600">{{ new Date(a.published).toLocaleString() }} – {{
          a.source
        }}</p>
      <p class="mt-2">{{ a.summary_de }}</p>
      <p class="italic mt-2 text-sm text-gray-700">{{ a.summary_en }}</p>
      <a :href="a.url" target="_blank" class="text-blue-600 hover:underline">Original →</a>
    </article>
  </main>
</template>
