const fs = require('fs');
const path = require('path');
const jsdom = require('jsdom');
const { JSDOM } = jsdom;

const postsDir = path.join(process.cwd(), 'reference', 'klz-cables-clone', 'posts');
const mdxDir = path.join(process.cwd(), 'data', 'blog', 'en');

const files = fs.readdirSync(postsDir);

files.forEach(file => {
  if (!file.endsWith('.html')) return;
  
  const slug = file.replace('.html', '');
  const mdxPath = path.join(mdxDir, `${slug}.mdx`);
  
  if (!fs.existsSync(mdxPath)) {
    console.log(`MDX file not found for ${slug}`);
    return;
  }

  const htmlContent = fs.readFileSync(path.join(postsDir, file), 'utf8');
  const dom = new JSDOM(htmlContent);
  const document = dom.window.document;
  
  const vlpContainers = document.querySelectorAll('.vlp-link-container');
  
  if (vlpContainers.length === 0) return;

  console.log(`Processing ${slug} with ${vlpContainers.length} visual links`);

  let mdxContent = fs.readFileSync(mdxPath, 'utf8');
  let modified = false;

  vlpContainers.forEach(container => {
    const link = container.querySelector('a.vlp-link');
    const titleEl = container.querySelector('.vlp-link-title');
    const summaryEl = container.querySelector('.vlp-link-summary');
    const imgEl = container.querySelector('.vlp-link-image img');

    if (!link) return;

    const url = link.getAttribute('href');
    const title = titleEl ? titleEl.textContent.trim() : '';
    const summary = summaryEl ? summaryEl.textContent.trim() : '';
    const image = imgEl ? imgEl.getAttribute('src') : '';

    // Construct the component string
    const component = `
<VisualLinkPreview 
  url="${url}"
  title="${title.replace(/"/g, '"')}"
  summary="${summary.replace(/"/g, '"')}"
  image="${image}"
/>
`;

    // Try to find the link in MDX
    // It could be [Title](URL) or just URL or <a href="URL">...</a>
    // We'll try to find the URL and replace the paragraph containing it if it looks like a standalone link
    // Or just append it if we can't find it easily? No, that's risky.
    
    // Strategy: Look for the URL.
    // If found in `[...](url)`, replace the whole markdown link.
    // If found in `href="url"`, replace the anchor tag.
    
    const markdownLinkRegex = new RegExp(`\\[.*?\\]\\(${escapeRegExp(url)}\\)`, 'g');
    const plainUrlRegex = new RegExp(`(?<!\\()${escapeRegExp(url)}(?!\\))`, 'g'); // URL not in parens

    if (markdownLinkRegex.test(mdxContent)) {
      mdxContent = mdxContent.replace(markdownLinkRegex, component);
      modified = true;
    } else if (plainUrlRegex.test(mdxContent)) {
       // Be careful not to replace inside other attributes
       // This is a bit loose, but might work for standalone URLs
       // Better to check if it's a standalone line?
       // Let's just replace it.
       mdxContent = mdxContent.replace(plainUrlRegex, component);
       modified = true;
    } else {
        console.log(`Could not find link for ${url} in ${slug}`);
        // Maybe the URL in MDX is slightly different (e.g. trailing slash)?
        // Or maybe it's not there at all.
        // Let's try without trailing slash
        const urlNoSlash = url.replace(/\/$/, '');
        const markdownLinkRegex2 = new RegExp(`\\[.*?\\]\\(${escapeRegExp(urlNoSlash)}\\)`, 'g');
        if (markdownLinkRegex2.test(mdxContent)) {
            mdxContent = mdxContent.replace(markdownLinkRegex2, component);
            modified = true;
        }
    }
  });

  if (modified) {
    fs.writeFileSync(mdxPath, mdxContent);
    console.log(`Updated ${slug}`);
  }
});

function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}