console.log("✅ content script cargado");

chrome.runtime.sendMessage({
  type: "CONTENT_READY"
});

async function wait(ms) {
  return new Promise(r => setTimeout(r, ms));
}

const map = new Map();
let groupsContainer = null;

// Intentar localizar el contenedor exclusivo de la lista de unidos al inicio
function inicializarContenedor() {
  const spans = Array.from(document.querySelectorAll('span'));
  const headerSpan = spans.find(s => s.textContent.includes("Todos los grupos a los que te uniste"));
  if (headerSpan) {
    const headerContainer = headerSpan.closest('div');
    if (headerContainer) {
      groupsContainer = headerContainer.nextElementSibling;
      console.log("✅ Contenedor exclusivo de grupos unidos identificado.");
    }
  }
}

// Función para capturar los grupos visibles en el DOM en este instante
function capturarGruposVisibles() {
  if (!groupsContainer) {
    inicializarContenedor();
  }

  // Usar el contenedor exclusivo si está disponible para evitar grupos sugeridos del final o del panel lateral
  const rootElement = groupsContainer || document;
  console.log("🔍 Escaneando tarjetas de grupos...");

  const divs = Array.from(rootElement.querySelectorAll('div'));
  const cards = divs.filter(d => {
    const text = d.innerText;
    return (text.includes("Tu última visita:") || text.includes("Ver grupo")) && 
           !text.includes("Solicitó unirse") &&
           !text.includes("Cancelar solicitud") &&
           !text.includes("Invitado") &&
           !text.includes("Invitación") &&
           !text.includes("Solicitud enviada");
  });

  console.log(`🔍 Tarjetas encontradas en este frame: ${cards.length}`);

  cards.forEach((card, cardIdx) => {
    const anchors = Array.from(card.querySelectorAll('a[href*="/groups/"]'));
    if (anchors.length === 0) return;

    // Loggear datos crudos para depuración
    console.log(`[RAW CARD #${cardIdx}] Text: "${card.innerText.replace(/\n/g, ' ').substring(0, 100)}"`);
    anchors.forEach((a, aIdx) => {
      const svg = a.querySelector('svg[aria-label]');
      console.log(`  -> Anchor #${aIdx}: href="${a.href}" | text="${a.innerText.trim()}" | svg_label="${svg ? svg.getAttribute('aria-label') : 'none'}"`);
    });

    const anchor = anchors[0];
    const url = anchor.href.split("?")[0];
    const match = url.match(/\/groups\/([a-zA-Z0-9\._\-]+)/);
    if (!match) return;
    
    const idOrSlug = match[1];
    if (["create", "discover", "joins", "search", "categories", "feed", "about", "invites", "settings", "pins", "suggested", "interested", "membership", "your-groups", "requests"].includes(idOrSlug)) {
      return;
    }

    let name = '';
    // 1. Intentar obtener el nombre del SVG
    for (const a of anchors) {
      const svg = a.querySelector('svg[aria-label]');
      if (svg) {
        name = svg.getAttribute('aria-label').trim();
        break;
      }
    }
    
    // 2. Si no hay SVG, usar el texto del enlace que no sea un botón genérico
    if (!name) {
      for (const a of anchors) {
        const textVal = a.innerText.trim();
        if (textVal && textVal.length > 2 && textVal !== "Ver grupo" && textVal !== "Visitar" && textVal !== "Unirse") {
          name = textVal;
          break;
        }
      }
    }

    if (!name || name.length < 2) {
      console.log(`⚠️ Nombre inválido o vacío para el grupo en URL: https://www.facebook.com/groups/${idOrSlug}/`);
      return;
    }

    const groupUrl = `https://www.facebook.com/groups/${idOrSlug}/`;
    if (!map.has(groupUrl)) {
      console.log(`📌 Grupo capturado exitosamente - Nombre: "${name}" | ID: "${idOrSlug}"`);
      map.set(groupUrl, {
        name: name,
        url: groupUrl,
        fb_id_grupo: /^\d+$/.test(idOrSlug) ? idOrSlug : ''
      });
    }
  });
}

// Bucle de scroll idéntico a la versión 1.8 (3 attempts de 2 segundos)
async function autoScrollAndCapture() {
  let lastHeight = 0;
  let attempts = 0;

  // Inicializar el contenedor antes de empezar a desplazar
  inicializarContenedor();

  while (attempts < 3) {
    capturarGruposVisibles(); // Capturar en cada paso
    
    window.scrollTo(0, document.body.scrollHeight);
    await wait(2000);

    let newHeight = document.body.scrollHeight;
    if (newHeight === lastHeight) {
      attempts++;
    } else {
      attempts = 0;
    }
    lastHeight = newHeight;
  }
  
  // Captura final al terminar el scroll
  capturarGruposVisibles();
}

async function run() {
  console.log("🚀 Iniciando extracción...");
  await wait(3000);
  await autoScrollAndCapture();
  const groups = Array.from(map.values());
  
  console.log(`📊 TOTAL GRUPOS DETECTADOS: ${groups.length}`);
  if (groups.length > 0) {
    console.log(`📌 PRIMER GRUPO: "${groups[0].name}" | URL: ${groups[0].url}`);
    console.log(`📌 ÚLTIMO GRUPO: "${groups[groups.length - 1].name}" | URL: ${groups[groups.length - 1].url}`);
  }

  console.log("📤 Enviando grupos encontrados:", groups.length);

  try {
    chrome.runtime.sendMessage({
      type: "GROUPS_RESULT",
      data: groups
    });
    chrome.runtime.sendMessage({
      type: "CLOSE_TAB"
    });
  } catch (e) {
    console.error("❌ Error enviando grupos:", e);
  }
}

chrome.runtime.onMessage.addListener((request) => {
  if (request.action === "START_EXTRACTION") {
    run();
  }
});