<template>
  <div class="flex items-center justify-center min-h-screen bg-gray-100">
    <div class="bg-white p-6 rounded-lg shadow-lg text-center max-w-md w-full">
      <h1 class="text-2xl font-bold mb-4">Initiate Scraping</h1>
      <button
        @click="scrape"
        class="bg-blue-500 text-white font-semibold py-2 px-4 rounded hover:bg-blue-700 transition-colors duration-300"
      >
        Start Scraping
      </button>
      <p v-if="message" class="mt-4 text-green-600">{{ message }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('');
const scrapers= [
  //'scrapepisoscom',
  'scrapehabitaclia'
]

const scrape = async () => {
  message.value = 'Starting scraping...\n';
  for (const portal of scrapers) {
    await initiateScraping(portal);
  }
};

const initiateScraping = async (portal) => {
  try {
    const response = await fetch(`/api/${portal}`, {
      method: 'POST',
    });
    const result = await response.json();
    if (result.success) {
      message.value = 'Scraping initiated successfully: ' + JSON.stringify(result);
    } else {
      message.value = `Error: ${result.message}`;
    }
  } catch (error) {
    message.value = `Error: ${error.message}`;
  }
};
</script>

<style>
/* Tailwind CSS se encargará de los estilos, por lo que no se necesita nada aquí */
</style>
