function detectType(url) {
  if (!url) return 'none';
  try { new URL(url); } catch(e) { return 'none'; }
  const path = (new URL(url)).pathname.toLowerCase();
  const ext  = path.split('.').pop();
  if (['jpg','jpeg','png','gif','webp','bmp','svg','avif'].includes(ext)) return 'image';
  if (['mp4','webm','ogv','mov'].includes(ext)) return 'video';
  if (['mp3','flac','wav','ogg','aac','opus','m4a'].includes(ext)) return 'audio';
  if (/(?:youtube\.com\/watch\?.*v=|youtu\.be\/)([A-Za-z0-9_-]{11})/.test(url)) return 'youtube';
  if (/vimeo\.com\/(\d+)/.test(url)) return 'vimeo';
  return 'link';
}

function ytId(url) { const m = url.match(/(?:v=|youtu\.be\/)([A-Za-z0-9_-]{11})/); return m ? m[1] : null; }
function vimeoId(url) { const m = url.match(/vimeo\.com\/(\d+)/); return m ? m[1] : null; }

function updatePreview(url) {
  const el = document.getElementById('preview-body');
  const badge = document.getElementById('type-badge');
  if (!url) { el.innerHTML = '<p class="preview-empty">// no url set</p>'; badge.textContent = 'none'; badge.className = 'badge t-none'; return; }
  const type = detectType(url);
  badge.textContent = type;
  badge.className = 'badge t-' + type.replace(/:.*/, '');
  const s = url.replace(/"/g, '%22');
  let h = '<div class="preview-url"><a href="' + s + '" target="_blank" rel="noopener noreferrer">' + url + '</a></div>';
  if (type === 'image') h += '<img src="' + s + '" alt="preview" loading="lazy">';
  else if (type === 'video') h += '<video controls preload="none"><source src="' + s + '"></video>';
  else if (type === 'audio') h += '<audio controls preload="none" class="vibe-audio-full"><source src="' + s + '"></audio>';
  else if (type === 'youtube') { const id = ytId(url); if (id) h += '<div class="ratio-wrap"><iframe src="https://www.youtube.com/embed/' + id + '" allowfullscreen loading="lazy"></iframe></div>'; }
  else if (type === 'vimeo') { const id = vimeoId(url); if (id) h += '<div class="ratio-wrap"><iframe src="https://player.vimeo.com/video/' + id + '" allowfullscreen loading="lazy"></iframe></div>'; }
  else h += '<a href="' + s + '" target="_blank" rel="noopener noreferrer" class="vibe-preview-link">' + url + '</a>';
  el.innerHTML = h;
}

const urlInput = document.getElementById('url');
let debounce;
urlInput.addEventListener('input', () => {
  clearTimeout(debounce);
  debounce = setTimeout(() => updatePreview(urlInput.value.trim()), 350);
});

document.querySelectorAll('.preset').forEach(btn => {
  btn.addEventListener('click', () => {
    urlInput.value = btn.dataset.url;
    if (btn.dataset.desc) document.getElementById('description').value = btn.dataset.desc;
    updatePreview(btn.dataset.url);
  });
});