import type { Note } from './main';

let currentMedia: Note['media'] = [];
let currentIndex = 0;

function updateLightbox() {
  const item = currentMedia![currentIndex];
  const img = document.getElementById('lightbox-img') as HTMLImageElement;
  const alt = document.getElementById('lightbox-alt')!;
  const prev = document.getElementById('lightbox-prev')!;
  const next = document.getElementById('lightbox-next')!;

  img.src = item.url;
  img.alt = item.alt || '';

  if (item.alt) {
    alt.textContent = item.alt;
    alt.style.display = 'block';
  } else {
    alt.style.display = 'none';
  }

  prev.style.display = currentIndex > 0 ? 'block' : 'none';
  next.style.display = currentIndex < currentMedia!.length - 1 ? 'block' : 'none';
}

function navigateLightbox(dir: number) {
  const next = currentIndex + dir;
  if (next < 0 || next >= currentMedia!.length) return;
  currentIndex = next;
  updateLightbox();
}

function lightboxKeyHandler(e: KeyboardEvent) {
  if (e.key === 'Escape') closeLightbox();
  if (e.key === 'ArrowLeft') navigateLightbox(-1);
  if (e.key === 'ArrowRight') navigateLightbox(1);
}

export function openLightbox(media: NonNullable<Note['media']>, index: number) {
  currentMedia = media;
  currentIndex = index;

  const overlay = document.createElement('div');
  overlay.id = 'lightbox';
  overlay.addEventListener('click', e => {
    if (e.target === overlay) closeLightbox();
  });

  const close = document.createElement('button');
  close.id = 'lightbox-close';
  close.textContent = '×';
  close.addEventListener('click', closeLightbox);
  overlay.appendChild(close);

  const img = document.createElement('img');
  img.id = 'lightbox-img';

  const alt = document.createElement('div');
  alt.id = 'lightbox-alt';

  const prev = document.createElement('button');
  prev.id = 'lightbox-prev';
  prev.textContent = '‹';
  prev.addEventListener('click', () => navigateLightbox(-1));

  const next = document.createElement('button');
  next.id = 'lightbox-next';
  next.textContent = '›';
  next.addEventListener('click', () => navigateLightbox(1));

  overlay.append(prev, img, alt, next);
  document.body.appendChild(overlay);
  updateLightbox();

  document.addEventListener('keydown', lightboxKeyHandler);
}

export function closeLightbox() {
  document.getElementById('lightbox')?.remove();
  document.removeEventListener('keydown', lightboxKeyHandler);
}