import { adminListMedia } from '../api';
import type { LearnMedia } from '../types';

export type LearnMediaPickerKind = 'image' | 'video' | 'file' | 'audio' | 'caption';

function accepts(kind: LearnMediaPickerKind, item: LearnMedia): boolean {
  if (kind === 'image') return item.mimeType.startsWith('image/');
  if (kind === 'video') return item.mimeType.startsWith('video/');
  if (kind === 'audio') return item.mimeType.startsWith('audio/');
  if (kind === 'caption') return item.mimeType.startsWith('text/vtt');
  return !item.mimeType.startsWith('image/') && !item.mimeType.startsWith('video/') && !item.mimeType.startsWith('audio/') && !item.mimeType.startsWith('text/vtt');
}

function sizeLabel(bytes: number): string {
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
}

/**
 * Shared inline Learn media library. It intentionally avoids browser-native
 * dialogs and lets Editor.js tools reuse the same authorized media service.
 */
export async function populateLearnMediaPicker(
  host: HTMLElement,
  kind: LearnMediaPickerKind,
  onSelect: (item: LearnMedia) => void,
): Promise<void> {
  host.replaceChildren();
  host.className = 'interactive-learn-editor-media-picker';
  const status = document.createElement('p');
  status.className = 'interactive-muted';
  status.textContent = 'Loading media library…';
  host.append(status);
  try {
    const items = (await adminListMedia()).filter((item) => accepts(kind, item));
    host.replaceChildren();
    if (!items.length) {
      status.textContent = `No ${kind} media has been uploaded yet.`;
      host.append(status);
      return;
    }
    for (const item of items) {
      const button = document.createElement('button');
      button.type = 'button';
      button.className = 'interactive-learn-editor-media-option';
      if (kind === 'image') {
        const image = document.createElement('img');
        image.src = item.url;
        image.alt = '';
        button.append(image);
      } else {
        const icon = document.createElement('span');
        icon.className = 'interactive-learn-editor-media-icon';
        icon.textContent = kind === 'video' ? '▶' : kind === 'audio' ? '♪' : '↧';
        button.append(icon);
      }
      const copy = document.createElement('span');
      const title = document.createElement('strong');
      title.textContent = item.originalName;
      const meta = document.createElement('small');
      meta.textContent = `${item.mimeType} · ${sizeLabel(item.sizeBytes)}`;
      copy.append(title, meta);
      button.append(copy);
      button.addEventListener('click', () => onSelect(item));
      host.append(button);
    }
  } catch (error) {
    host.replaceChildren();
    status.textContent = error instanceof Error ? error.message : String(error);
    host.append(status);
  }
}