<script setup lang="ts">
import {ref, onMounted} from 'vue';
import {useFeeds} from '../stores/useFeeds';

const feeds = useFeeds();
const country = ref('DE');
const url = ref('');

onMounted(() => feeds.fetch());

async function add() {
  if (!url.value.trim()) return;
  await feeds.add(country.value, url.value.trim());
  url.value = '';
}
</script>
<template>
  <div class="bg-white dark:bg-gray-800 rounded p-4 shadow space-y-2">
    <h2 class="font-semibold text-lg dark:text-gray-200">Feeds verwalten</h2>

    <div class="flex gap-2">
      <select v-model="country"
              class="border dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded p-1 flex-1">
        <option>DE</option>
        <option>FR</option>
        <option>EU</option>
      </select>
      <input v-model="url" placeholder="https://…"
             class="border dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded p-1 flex-[3]"/>
      <button @click="add"
              class="bg-green-600 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800 text-white px-3 rounded">
        +
      </button>
    </div>

    <ul class="list-disc pl-5">
      <li v-for="(f, index) in feeds.list" :key="index" class="flex justify-between items-center">
        <span class="dark:text-gray-200">{{ f.country }} — {{ f.url }}</span>
        <button @click="feeds.remove(f.url)"
                class="text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-500">✕
        </button>
      </li>
    </ul>
  </div>
</template>
