export const ELEMENT_IDS = [
  'setup-screen', 'main-screen', 'setup-key', 'setup-save',
  'btn-settings', 'modal-settings', 'modal-key', 'modal-save', 'btn-close-modal',
  'sel-model', 'inp-prompt', 'inp-frames', 'inp-fps', 'sel-ratio', 'inp-max-size',
  'chk-semi-transparent',
  'btn-generate', 'progress-area', 'progress-bar', 'progress-text', 'frames-preview',
  'result-area', 'result-gif', 'btn-download'
];

const camelize = (id) => id.replace(/-([a-z])/g, (_, c) => c.toUpperCase());

export function grabElements(ids = ELEMENT_IDS) {
  const el = {};
  for (const id of ids) {
    const key = camelize(id);
    el[key] = document.getElementById(id);
    if (!el[key]) console.warn(`vibegif: missing element #${id}`);
  }
  return el;
}

export function show(node) {
  if (!node) return;
  node.classList.remove('hidden');
  if (node.classList.contains('flex')) {
    node.style.display = 'flex';
  } else {
    node.style.display = '';
  }
}

export function hide(node) {
  if (!node) return;
  node.classList.add('hidden');
  node.style.display = 'none';
}

export function setProgress(el, pct, text) {
  show(el.progressArea);
  if (el.progressBar) el.progressBar.style.width = `${Math.max(0, Math.min(100, pct))}%`;
  if (el.progressText) el.progressText.textContent = text || '';
}

export function resetProgress(el) {
  hide(el.progressArea);
  if (el.progressBar) el.progressBar.style.width = '0%';
  if (el.progressText) el.progressText.textContent = '';
  if (el.framesPreview) el.framesPreview.innerHTML = '';
}

export function addFramePreview(el, src, index, aspectRatio = '1:1') {
  if (!el.framesPreview) return;
  const img = document.createElement('img');
  img.src = src;
  img.className = 'h-16 rounded-lg border border-neutral-200 object-cover bg-white';
  img.style.aspectRatio = aspectRatio;
  img.style.width = 'auto';
  img.title = `frame ${index + 1}`;
  el.framesPreview.appendChild(img);
}

export function showResult(el, blobUrl, filename = 'vibegif.gif') {
  if (el.resultArea) {
    el.resultArea.classList.remove('hidden');
    el.resultArea.style.display = 'flex';
  }
  if (el.resultGif) el.resultGif.src = blobUrl;
  if (el.btnDownload) {
    el.btnDownload.href = blobUrl;
    el.btnDownload.download = filename;
  }
}

export function hideResult(el) {
  if (!el.resultArea) return;
  el.resultArea.classList.add('hidden');
  el.resultArea.style.display = 'none';
}

export function setGenerating(el, active) {
  if (!el.btnGenerate) return;
  el.btnGenerate.disabled = !!active;
  el.btnGenerate.style.opacity = active ? '0.5' : '1';
  el.btnGenerate.style.cursor = active ? 'not-allowed' : 'pointer';
}