<template>
  <div>
    <div class="mb-4 sm:mb-6">
      <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 sm:gap-4 mb-4">
        <div>
          <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100">Artículos Notificados</h1>
          <p v-if="currentUser" class="mt-1 text-sm text-gray-500 dark:text-gray-400">
            <span v-if="isAdmin">Todos los artículos</span>
            <span v-else>Tus artículos</span>
            <span class="font-medium text-gray-700 dark:text-gray-300 ml-1">({{ currentUser }})</span>
          </p>
        </div>
      </div>
      
      <!-- Búsqueda y Filtros -->
      <div class="card p-4 mb-4">
        <!-- Campo de búsqueda -->
        <div class="mb-4">
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 flex items-center gap-2">
            <MagnifyingGlassIcon class="w-4 h-4 text-gray-500 dark:text-gray-400" />
            Búsqueda
          </label>
          <div class="relative">
            <input
              v-model="searchQuery"
              type="text"
              placeholder="Buscar artículos por título, descripción, precio, localidad..."
              class="input pr-10 pl-10"
              @input="searchQuery = $event.target.value"
            />
            <MagnifyingGlassIcon class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
            <span v-if="searching" class="absolute right-3 top-1/2 transform -translate-y-1/2">
              <div class="inline-block animate-spin rounded-full h-4 w-4 border-b-2 border-primary-600"></div>
            </span>
            <button
              v-else-if="searchQuery"
              @click="searchQuery = ''"
              class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
              title="Limpiar búsqueda"
            >
              <XMarkIcon class="w-5 h-5" />
            </button>
          </div>
        </div>
        
        <!-- Separador -->
        <div class="border-t border-gray-200 dark:border-gray-700 pt-4 mb-4">
          <div class="flex items-center justify-between mb-3">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
              <FunnelIcon class="w-5 h-5 text-primary-600" />
              Filtros
              <span v-if="hasActiveFilters" class="ml-2 px-2 py-0.5 bg-primary-600 text-white rounded-full text-xs font-semibold">
                {{ activeFiltersCount }}
              </span>
            </h2>
            <button 
              v-if="hasActiveFilters"
              @click="clearAllFilters"
              class="btn btn-secondary text-sm"
            >
              <XMarkIcon class="w-4 h-4 mr-1" />
              Limpiar todo
            </button>
          </div>
          
          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
            <div class="flex flex-col">
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 flex items-center gap-2">
                <ServerIcon class="w-4 h-4 text-gray-500 dark:text-gray-400" />
                Plataforma
              </label>
              <select
                v-model="selectedPlatform"
                @change="loadArticles"
                class="input text-sm w-full"
              >
                <option value="">Todas las plataformas</option>
                <option value="wallapop">Wallapop</option>
                <option value="vinted">Vinted</option>
              </select>
            </div>
            
            <div v-if="isAdmin" class="flex flex-col">
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 flex items-center gap-2">
                <UserIcon class="w-4 h-4 text-gray-500 dark:text-gray-400" />
                Usuario
              </label>
              <select
                v-model="selectedUsername"
                @change="loadArticles"
                class="input text-sm w-full"
              >
                <option value="">Todos los usuarios</option>
                <option v-for="username in availableUsernames" :key="username" :value="username">
                  {{ username }}
                </option>
              </select>
            </div>
            
            <div class="flex flex-col">
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 flex items-center gap-2">
                <BriefcaseIcon class="w-4 h-4 text-gray-500 dark:text-gray-400" />
                Worker
              </label>
              <select
                v-model="selectedWorker"
                @change="loadArticles"
                class="input text-sm w-full"
              >
                <option value="">Todos los workers</option>
                <option v-for="worker in availableWorkers" :key="worker" :value="worker">
                  {{ worker }}
                </option>
              </select>
            </div>
          </div>
          
          <div class="flex items-center gap-2 mt-4">
            <button @click="loadArticles" class="btn btn-primary whitespace-nowrap">
              <ArrowPathIcon class="w-4 h-4 mr-1" />
              Actualizar
            </button>
          </div>
        </div>
      </div>
      
      <!-- Filtros activos (chips) -->
      <div v-if="hasActiveFilters" class="flex flex-wrap gap-2 mt-3 mb-4">
        <span
          v-if="selectedPlatform"
          class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 rounded-full text-sm font-medium"
        >
          <ServerIcon class="w-3.5 h-3.5" />
          {{ selectedPlatform === 'wallapop' ? 'Wallapop' : 'Vinted' }}
          <button
            @click="selectedPlatform = ''; loadArticles()"
            class="ml-1 hover:text-primary-900 dark:hover:text-primary-100"
            title="Eliminar filtro"
          >
            <XMarkIcon class="w-3.5 h-3.5" />
          </button>
        </span>
        <span
          v-if="selectedUsername"
          class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 rounded-full text-sm font-medium"
        >
          <UserIcon class="w-3.5 h-3.5" />
          {{ selectedUsername }}
          <button
            @click="selectedUsername = ''; loadArticles()"
            class="ml-1 hover:text-primary-900 dark:hover:text-primary-100"
            title="Eliminar filtro"
          >
            <XMarkIcon class="w-3.5 h-3.5" />
          </button>
        </span>
        <span
          v-if="selectedWorker"
          class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 rounded-full text-sm font-medium"
        >
          <BriefcaseIcon class="w-3.5 h-3.5" />
          {{ selectedWorker }}
          <button
            @click="selectedWorker = ''; loadArticles()"
            class="ml-1 hover:text-primary-900 dark:hover:text-primary-100"
            title="Eliminar filtro"
          >
            <XMarkIcon class="w-3.5 h-3.5" />
          </button>
        </span>
      </div>
    </div>

    <div v-if="loading" class="text-center py-12">
      <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
      <p class="mt-2 text-gray-600 dark:text-gray-400">Cargando artículos...</p>
    </div>

    <div v-else-if="filteredArticles.length === 0 && !searchQuery" class="card text-center py-12">
      <p class="text-gray-600 dark:text-gray-400">No hay artículos para mostrar</p>
    </div>

    <div v-else-if="searching" class="card text-center py-12">
      <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
      <p class="mt-2 text-gray-600 dark:text-gray-400">Buscando artículos...</p>
    </div>

    <div v-else-if="filteredArticles.length === 0 && searchQuery && !searching" class="card text-center py-12">
      <p class="text-gray-600 dark:text-gray-400">No se encontraron artículos que coincidan con "{{ searchQuery }}"</p>
      <button @click="searchQuery = ''" class="btn btn-secondary mt-4">Limpiar búsqueda</button>
    </div>

    <div v-else class="space-y-4">
      <ArticleCard
        v-for="article in filteredArticles"
        :key="`${article.platform}-${article.id}`"
        :article="article"
      />

      <div v-if="!searchQuery" class="flex justify-center space-x-2 mt-6">
        <button
          @click="loadMore"
          :disabled="allArticles.length >= total"
          class="btn btn-secondary"
          :class="{ 'opacity-50 cursor-not-allowed': allArticles.length >= total }"
        >
          Cargar más
        </button>
      </div>

      <p class="text-center text-xs sm:text-sm text-gray-500 mt-4 px-2">
        <span v-if="searchQuery">
          Mostrando {{ filteredArticles.length }} resultados de búsqueda
          <span class="block sm:inline sm:ml-2 text-xs text-primary-600">(de {{ total }} artículos totales)</span>
        </span>
        <span v-else>
          Mostrando {{ filteredArticles.length }} de {{ total }} artículos
          <span class="block sm:inline sm:ml-2 text-xs text-gray-400">(Actualización automática cada 30s)</span>
        </span>
      </p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
import api from '../services/api';
import authService from '../services/auth';
import ArticleCard from '../components/ArticleCard.vue';
import {
  FunnelIcon,
  XMarkIcon,
  ServerIcon,
  UserIcon,
  BriefcaseIcon,
  ArrowPathIcon,
  MagnifyingGlassIcon
} from '@heroicons/vue/24/outline';

const currentUser = ref(authService.getUsername() || null);
const isAdmin = ref(false);

const allArticles = ref([]);
const searchResults = ref([]);
const loading = ref(true);
const searching = ref(false);
const total = ref(0);
const offset = ref(0);
const limit = 50;
const selectedPlatform = ref('');
const selectedUsername = ref('');
const selectedWorker = ref('');
const searchQuery = ref('');
const autoPollInterval = ref(null);
const searchTimeout = ref(null);
const POLL_INTERVAL = 30000; // 30 segundos
const SEARCH_DEBOUNCE = 500; // 500ms de debounce para búsqueda

// Obtener listas de usuarios y workers únicos de los artículos
const availableUsernames = computed(() => {
  const usernames = new Set();
  allArticles.value.forEach(article => {
    if (article.username) {
      usernames.add(article.username);
    }
  });
  searchResults.value.forEach(article => {
    if (article.username) {
      usernames.add(article.username);
    }
  });
  return Array.from(usernames).sort();
});

const availableWorkers = computed(() => {
  const workers = new Set();
  allArticles.value.forEach(article => {
    if (article.worker_name) {
      workers.add(article.worker_name);
    }
  });
  searchResults.value.forEach(article => {
    if (article.worker_name) {
      workers.add(article.worker_name);
    }
  });
  return Array.from(workers).sort();
});

// Artículos que se muestran (búsqueda o lista normal)
const filteredArticles = computed(() => {
  if (searchQuery.value.trim()) {
    return searchResults.value;
  }
  return allArticles.value;
});

// Computed para filtros activos
const hasActiveFilters = computed(() => {
  return !!(selectedPlatform.value || selectedUsername.value || selectedWorker.value);
});

const activeFiltersCount = computed(() => {
  let count = 0;
  if (selectedPlatform.value) count++;
  if (selectedUsername.value) count++;
  if (selectedWorker.value) count++;
  return count;
});

function clearAllFilters() {
  selectedPlatform.value = '';
  selectedUsername.value = '';
  selectedWorker.value = '';
  loadArticles();
}



async function loadArticles(reset = true, silent = false) {
  if (reset) {
    offset.value = 0;
    allArticles.value = [];
  }
  
  if (!silent) {
  loading.value = true;
  }
  
  try {
    // Construir query params para filtros
    const params = { limit, offset: offset.value };
    if (selectedPlatform.value) params.platform = selectedPlatform.value;
    // Solo permitir filtrar por username si es admin
    if (selectedUsername.value && isAdmin.value) {
      params.username = selectedUsername.value;
    }
    if (selectedWorker.value) params.worker_name = selectedWorker.value;
    
    const data = await api.getArticles(limit, offset.value, params);
    
    let filtered = data.articles;
    // El filtro de plataforma se aplica en el backend ahora, pero mantenemos compatibilidad
    if (selectedPlatform.value) {
      filtered = filtered.filter(a => a.platform === selectedPlatform.value);
    }
    
    if (reset) {
      allArticles.value = filtered;
      offset.value = limit;
    } else {
      allArticles.value.push(...filtered);
      offset.value += limit;
    }
    
    total.value = data.total;
  } catch (error) {
    console.error('Error cargando artículos:', error);
  } finally {
    if (!silent) {
    loading.value = false;
    }
  }
}

function handleAuthChange() {
  currentUser.value = authService.getUsername() || null;
  isAdmin.value = authService.isAdmin();
  // Si no es admin, no permitir filtrar por username
  if (!isAdmin.value && selectedUsername.value) {
    selectedUsername.value = '';
  }
  if (currentUser.value) {
    loadArticles();
  }
}

function loadMore() {
  loadArticles(false);
}

function handleWSMessage(event) {
  const data = event.detail;
  if (data.type === 'articles_updated') {
    loadArticles();
  }
}

async function searchArticles(query) {
  if (!query.trim()) {
    searchResults.value = [];
    searching.value = false;
    return;
  }
  
  searching.value = true;
  
  try {
    const data = await api.searchArticles(query);
    
    let filtered = data.articles || [];
    
    // Aplicar filtros si están seleccionados
    if (selectedPlatform.value) {
      filtered = filtered.filter(a => a.platform === selectedPlatform.value);
    }
    if (selectedUsername.value) {
      filtered = filtered.filter(a => a.username === selectedUsername.value);
    }
    if (selectedWorker.value) {
      filtered = filtered.filter(a => a.worker_name === selectedWorker.value);
    }
    
    searchResults.value = filtered;
  } catch (error) {
    console.error('Error buscando artículos:', error);
    searchResults.value = [];
  } finally {
    searching.value = false;
  }
}

// Watch para buscar cuando cambie searchQuery (con debounce)
watch(searchQuery, (newQuery) => {
  // Limpiar timeout anterior
  if (searchTimeout.value) {
    clearTimeout(searchTimeout.value);
  }
  
  // Si está vacío, limpiar resultados
  if (!newQuery.trim()) {
    searchResults.value = [];
    return;
  }
  
  // Añadir debounce antes de buscar
  searchTimeout.value = setTimeout(() => {
    searchArticles(newQuery);
  }, SEARCH_DEBOUNCE);
});


onMounted(() => {
  currentUser.value = authService.getUsername() || null;
  isAdmin.value = authService.isAdmin();
  // Si no es admin, no permitir filtrar por username
  if (!isAdmin.value && selectedUsername.value) {
    selectedUsername.value = '';
  }
  loadArticles();
  window.addEventListener('ws-message', handleWSMessage);
  window.addEventListener('auth-logout', handleAuthChange);
  window.addEventListener('auth-login', handleAuthChange);
  
  // Iniciar autopoll para actualizar automáticamente
  autoPollInterval.value = setInterval(() => {
    loadArticles(true, true); // Reset silencioso cada 30 segundos
  }, POLL_INTERVAL);
});

onUnmounted(() => {
  window.removeEventListener('ws-message', handleWSMessage);
  window.removeEventListener('auth-logout', handleAuthChange);
  window.removeEventListener('auth-login', handleAuthChange);
  
  // Limpiar el intervalo cuando el componente se desmonte
  if (autoPollInterval.value) {
    clearInterval(autoPollInterval.value);
    autoPollInterval.value = null;
  }
  
  // Limpiar el timeout de búsqueda
  if (searchTimeout.value) {
    clearTimeout(searchTimeout.value);
    searchTimeout.value = null;
  }
});
</script>

