// ── Types ────────────────────────────────────────────

interface Job {
  id: string;
  video_path: string;
  video_filename: string;
  status: 'pending' | 'queued' | 'processing' | 'paused' | 'completed' | 'failed' | 'cancelled';
  config: string;
  progress: number;
  current_index: number;
  total_units: number;
  segments: string;
  last_context: string;
  current_time_position: number;
  error: string | null;
  created_at: string;
  updated_at: string;
  completed_at: string | null;
  output_audio: string | null;
  output_subtitles_srt: string | null;
  output_subtitles_vtt: string | null;
  output_muxed: string | null;
  output_options: string;
}

interface AudioSegment {
  audioFile: string;
  startTime: number;
  duration: number;
  description: string;
}

interface ProgressData {
  id: string;
  status: string;
  progress: number;
  currentIndex: number;
  totalUnits: number;
  segments: AudioSegment[];
  error: string | null;
  output_audio: string | null;
  output_subtitles_srt: string | null;
  output_subtitles_vtt: string | null;
  output_muxed: string | null;
}

interface FileInfo {
  filename: string;
  filePath: string;
  size: number;
}

// ── State ────────────────────────────────────────────

let authToken: string | null = sessionStorage.getItem('authToken');
let selectedFilePath: string | null = null;
const sseMap = new Map<string, EventSource>();
let pollTimer: number | null = null;

// ── DOM helpers ───────────────────────────────────────

const $ = (sel: string): HTMLElement => document.querySelector(sel) as HTMLElement;
const $$ = (sel: string): NodeListOf<HTMLElement> => document.querySelectorAll(sel);
const el = (id: string): HTMLElement => document.getElementById(id)!;

// ── API ───────────────────────────────────────────────

function apiHeaders(): Record<string, string> {
  const h: Record<string, string> = { 'Content-Type': 'application/json' };
  if (authToken) h['Authorization'] = `Basic ${authToken}`;
  return h;
}

async function api(method: string, url: string, body?: unknown): Promise<Response> {
  const res = await fetch(url, {
    method,
    headers: apiHeaders(),
    body: body ? JSON.stringify(body) : undefined,
  });
  if (res.status === 401) {
    sessionStorage.removeItem('authToken');
    authToken = null;
    showLoginScreen();
    throw new Error('Unauthorized');
  }
  return res;
}

async function apiJson<T>(method: string, url: string, body?: unknown): Promise<T> {
  const res = await api(method, url, body);
  const data = await res.json();
  if (!res.ok) throw new Error(data.error || 'Request failed');
  return data as T;
}

// ── Screen switching ──────────────────────────────────

function showLoginScreen(): void {
  el('login-screen').classList.remove('hidden');
  el('main-screen').classList.add('hidden');
}

function showMainScreen(): void {
  el('login-screen').classList.add('hidden');
  el('main-screen').classList.remove('hidden');
}

// ── Tab navigation ────────────────────────────────────

function switchTab(name: string): void {
  $$('button.tab').forEach(b => b.classList.remove('active'));
  document.querySelector<HTMLElement>(`button.tab[data-tab="${name}"]`)?.classList.add('active');

  $$('.tab-content').forEach(c => c.classList.remove('active'));
  const pane = document.getElementById(name);
  if (pane) pane.classList.add('active');

  if (name === 'dashboard') loadJobs();
  if (name === 'files') loadFilesList();
}

$$('button.tab').forEach(btn => {
  btn.addEventListener('click', () => switchTab(btn.dataset.tab || ''));
});

// ── Mini tabs (video source) ──────────────────────────

$$('button.tab-mini').forEach(btn => {
  btn.addEventListener('click', () => {
    $$('button.tab-mini').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    $$('.src-panel').forEach(p => p.classList.remove('active'));
    const panel = document.getElementById('src-' + (btn.dataset.src || ''));
    if (panel) panel.classList.add('active');
  });
});

// ── Login ─────────────────────────────────────────────

el('login-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const username = (el('login-username') as HTMLInputElement).value;
  const password = (el('login-password') as HTMLInputElement).value;
  try {
    const res = await fetch('/api/auth/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username, password }),
    });
    const data = await res.json();
    if (data.authenticated) {
      authToken = data.token;
      if (authToken) sessionStorage.setItem('authToken', authToken);
      showMainScreen();
      initApp();
    } else {
      el('login-error').textContent = data.error;
      el('login-error').classList.remove('hidden');
    }
  } catch {
    el('login-error').textContent = 'Connection failed';
    el('login-error').classList.remove('hidden');
  }
});

el('logout-btn').addEventListener('click', () => {
  sessionStorage.removeItem('authToken');
  authToken = null;
  sseMap.forEach(s => s.close());
  sseMap.clear();
  if (pollTimer) clearInterval(pollTimer);
  showLoginScreen();
});

// ── Utils ─────────────────────────────────────────────

function escapeHtml(str: string | null | undefined): string {
  if (!str) return '';
  return String(str)
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;');
}

function formatSize(bytes: number): string {
  if (!bytes) return '0 B';
  const units = ['B', 'KB', 'MB', 'GB'];
  let i = 0;
  let size = bytes;
  while (size >= 1024 && i < units.length - 1) { size /= 1024; i++; }
  return `${size.toFixed(1)} ${units[i]}`;
}

// ── Browse files (for New Job) ────────────────────────

async function loadBrowseFiles(): Promise<void> {
  try {
    const data = await apiJson<{ files: FileInfo[] }>('GET', '/api/files');
    const sel = el('video-select') as HTMLSelectElement;
    sel.innerHTML = '<option value="">-- Select file --</option>';
    data.files.forEach(f => {
      const opt = document.createElement('option');
      opt.value = f.filePath;
      opt.textContent = `${f.filename} (${formatSize(f.size)})`;
      sel.appendChild(opt);
    });
  } catch (err) {
    console.error(err);
  }
}

el('refresh-files').addEventListener('click', loadBrowseFiles);

(el('video-select') as HTMLSelectElement).addEventListener('change', function () {
  if (this.value) selectedFilePath = this.value;
});

// ── File upload ───────────────────────────────────────

const videoUpload = el('video-upload') as HTMLInputElement;
const uploadName = el('upload-name');

videoUpload.addEventListener('change', function () {
  if (this.files?.length) {
    selectedFilePath = null; // will upload on submit
    uploadName.textContent = `Selected: ${this.files[0].name} (${formatSize(this.files[0].size)})`;
  } else {
    uploadName.textContent = '';
  }
});

// ── YouTube download ──────────────────────────────────

el('download-url').addEventListener('click', async () => {
  const url = (el('youtube-url') as HTMLInputElement).value;
  if (!url) return;
  const status = el('download-status');
  status.textContent = 'Downloading...';
  status.className = 'status';
  try {
    const data = await apiJson<{ filePath: string; filename: string }>('POST', '/api/files/youtube', { url });
    status.textContent = `Downloaded: ${data.filename}`;
    status.className = 'status success';
    selectedFilePath = data.filePath;
    const sel = el('video-select') as HTMLSelectElement;
    const opt = document.createElement('option');
    opt.value = data.filePath;
    opt.textContent = data.filename;
    opt.selected = true;
    sel.appendChild(opt);
  } catch (err: any) {
    status.textContent = `Error: ${err.message}`;
    status.className = 'status error';
  }
});

// ── New Job form ──────────────────────────────────────

el('new-job-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  if (!selectedFilePath) {
    if (videoUpload.files?.length) {
      const formData = new FormData();
      formData.append('video', videoUpload.files[0]);
      try {
        const headers: Record<string, string> = {};
        if (authToken) headers['Authorization'] = `Basic ${authToken}`;
        const res = await fetch('/api/files/upload', { method: 'POST', headers, body: formData });
        const data = await res.json();
        if (!res.ok) throw new Error(data.error || 'Upload failed');
        selectedFilePath = data.filePath;
      } catch (err: any) {
        alert('Upload error: ' + err.message);
        return;
      }
    } else {
      alert('Please select a video file or source');
      return;
    }
  }

  const fd = new FormData(e.target as HTMLFormElement);
  const config: Record<string, unknown> = {};
  for (const [key, val] of fd.entries()) {
    if (key === '') continue;
    if (val === 'on') config[key] = true;
    else if (val === 'off') config[key] = false;
    else if (!isNaN(val as any) && val !== '') config[key] = parseFloat(val as string);
    else config[key] = val;
  }

  const outputOptions = {
    audio: fd.get('output-audio') === 'on',
    subtitles: fd.get('output-subtitles') === 'on',
    muxed: fd.get('output-muxed') === 'on',
  };

  if (config.visionProvider) {
    const vp: Record<string, unknown> = {};
    vp[config.visionProvider as string] = {
      model: config.visionModel || 'gpt-4o',
      maxTokens: config.visionMaxTokens ? parseInt(config.visionMaxTokens as string) : 300,
    };
    config.visionProviders = vp;
  }
  if (config.ttsProvider) {
    const tp: Record<string, unknown> = {};
    tp[config.ttsProvider as string] = {
      model: config.ttsModel || 'tts-1',
      voice: config.ttsVoice || 'alloy',
    };
    config.ttsProviders = tp;
  }

  delete config.visionModel;
  delete config.visionMaxTokens;
  delete config.ttsModel;
  delete config['output-audio'];
  delete config['output-subtitles'];
  delete config['output-muxed'];

  try {
    const data = await apiJson<{ job: Job }>('POST', '/api/jobs', {
      videoPath: selectedFilePath,
      config,
      outputOptions,
    });
    await apiJson('POST', `/api/jobs/${data.job.id}/start`);
    selectedFilePath = null;
    videoUpload.value = '';
    uploadName.textContent = '';
    (el('new-job-form') as HTMLFormElement).reset();
    switchTab('dashboard');
  } catch (err: any) {
    alert('Error creating job: ' + err.message);
  }
});

// ── Job list & rendering ──────────────────────────────

async function loadJobs(): Promise<void> {
  try {
    const data = await apiJson<{ jobs: Job[] }>('GET', '/api/jobs');
    renderJobs(data.jobs);
    data.jobs.forEach(j => {
      if (j.status === 'processing' || j.status === 'queued') {
        connectSSE(j.id);
      }
    });
  } catch (err) {
    console.error(err);
  }
}

function renderJobs(jobs: Job[]): void {
  const container = el('jobs-list');
  if (!jobs.length) {
    container.innerHTML = '<p class="empty">No jobs yet. Create one from the "New Job" tab.</p>';
    return;
  }

  container.innerHTML = jobs.map(j => {
    const segs: AudioSegment[] = JSON.parse(j.segments || '[]');
    const progressClass = j.status === 'completed' ? 'completed' : j.status === 'failed' ? 'failed' : '';
    const downloads: string[] = [];

    if (j.status === 'completed') {
      if (j.output_audio) downloads.push(`<a href="/api/jobs/${j.id}/download/audio" download>Audio</a>`);
      if (j.output_subtitles_srt) downloads.push(`<a href="/api/jobs/${j.id}/download/subtitles?format=srt" download>SRT</a>`);
      if (j.output_subtitles_vtt) downloads.push(`<a href="/api/jobs/${j.id}/download/subtitles?format=vtt" download>VTT</a>`);
      if (j.output_muxed) downloads.push(`<a href="/api/jobs/${j.id}/download/muxed" download>Muxed</a>`);
    }

    let actions = '';
    if (j.status === 'pending' || j.status === 'queued') {
      actions += `<button class="act-start" data-id="${j.id}">Start</button>`;
    }
    if (j.status === 'processing') {
      actions += `<button class="act-pause" data-id="${j.id}">Pause</button>`;
    }
    if (j.status === 'failed' || j.status === 'paused' || j.status === 'cancelled') {
      actions += `<button class="act-restart" data-id="${j.id}">Restart</button>`;
    }
    if (j.status !== 'processing') {
      actions += `<button class="act-delete danger" data-id="${j.id}">Delete</button>`;
    }

    return `
      <div class="job-card" data-id="${j.id}">
        <div class="job-card-header">
          <h3>${escapeHtml(j.video_filename)}</h3>
          <div class="job-actions">${actions}</div>
        </div>
        <span class="status-badge status-${j.status}">${j.status}</span>
        <div class="progress-bar"><div class="progress-fill ${progressClass}" style="width:${j.progress}%"></div></div>
        <div class="job-meta">
          <span>${Math.round(j.progress)}%</span>
          <span>Idx: ${j.current_index}/${j.total_units}</span>
          <span>${new Date(j.created_at).toLocaleString()}</span>
        </div>
        ${j.error ? `<div class="error-msg">${escapeHtml(j.error)}</div>` : ''}
        ${downloads.length ? `<div class="download-links">${downloads.join('')}</div>` : ''}
        <div class="job-detail" data-id="${j.id}">
          <div class="segment-log">${segs.map((s, i) => `<div class="segment-entry"><span class="segment-time">[${s.startTime.toFixed(1)}s]</span> ${escapeHtml(s.description)}</div>`).join('')}</div>
        </div>
        <button class="toggle-detail" data-id="${j.id}">${segs.length} segments</button>
      </div>`;
  }).join('');

  // Wire up action buttons
  container.querySelectorAll<HTMLElement>('.act-start').forEach(b =>
    b.addEventListener('click', () => handleJobAction(b.dataset.id || '', 'start')));
  container.querySelectorAll<HTMLElement>('.act-pause').forEach(b =>
    b.addEventListener('click', () => handleJobAction(b.dataset.id || '', 'pause')));
  container.querySelectorAll<HTMLElement>('.act-restart').forEach(b =>
    b.addEventListener('click', () => handleJobAction(b.dataset.id || '', 'restart')));
  container.querySelectorAll<HTMLElement>('.act-delete').forEach(b =>
    b.addEventListener('click', () => handleJobAction(b.dataset.id || '', 'delete')));
  container.querySelectorAll<HTMLElement>('.toggle-detail').forEach(b => {
    b.addEventListener('click', () => {
      const jobId = b.dataset.id || '';
      const detail = container.querySelector<HTMLElement>(`.job-detail[data-id="${jobId}"]`);
      if (!detail) return;
      detail.classList.toggle('open');
      const job = jobs.find(j => j.id === jobId);
      const segs: AudioSegment[] = job ? JSON.parse(job.segments || '[]') : [];
      b.textContent = detail.classList.contains('open') ? 'Hide segments' : `${segs.length} segments`;
    });
  });
}

async function handleJobAction(id: string, action: string): Promise<void> {
  const method = action === 'delete' ? 'DELETE' : 'POST';
  const url = `/api/jobs/${id}${action === 'delete' ? '' : '/' + action}`;
  try {
    await api(method, url);
    loadJobs();
  } catch (err: any) {
    alert(`Error: ${err.message}`);
  }
}

el('refresh-jobs').addEventListener('click', loadJobs);

// ── Polling ───────────────────────────────────────────

function startPolling(): void {
  if (pollTimer) return;
  pollTimer = window.setInterval(loadJobs, 5000);
}

// ── SSE live progress ─────────────────────────────────

function connectSSE(jobId: string): void {
  if (sseMap.has(jobId)) return;
  const es = new EventSource(`/api/jobs/${jobId}/progress?token=${encodeURIComponent(authToken!)}`);
  es.onmessage = (event: MessageEvent) => {
    const data: ProgressData = JSON.parse(event.data);
    updateJobCard(jobId, data);
    if (data.status === 'completed' || data.status === 'failed' || data.status === 'cancelled') {
      es.close();
      sseMap.delete(jobId);
    }
  };
  es.onerror = () => {
    es.close();
    sseMap.delete(jobId);
  };
  sseMap.set(jobId, es);
}

function updateJobCard(jobId: string, data: ProgressData): void {
  const card = document.querySelector<HTMLElement>(`.job-card[data-id="${jobId}"]`);
  if (!card) return;

  const badge = card.querySelector('.status-badge');
  if (badge) {
    badge.className = `status-badge status-${data.status}`;
    badge.textContent = data.status;
  }

  const fill = card.querySelector<HTMLElement>('.progress-fill');
  if (fill) {
    fill.style.width = data.progress + '%';
    fill.className = 'progress-fill';
    if (data.status === 'completed') fill.classList.add('completed');
    else if (data.status === 'failed') fill.classList.add('failed');
  }

  const metaSpans = card.querySelectorAll<HTMLElement>('.job-meta span');
  if (metaSpans[0]) metaSpans[0].textContent = Math.round(data.progress) + '%';
  if (metaSpans[1]) metaSpans[1].textContent = `Idx: ${data.currentIndex}/${data.totalUnits}`;

  const log = card.querySelector<HTMLElement>('.segment-log');
  if (log && data.segments) {
    log.innerHTML = data.segments.map(s =>
      `<div class="segment-entry"><span class="segment-time">[${s.startTime.toFixed(1)}s]</span> ${escapeHtml(s.description)}</div>`
    ).join('');
  }

  const toggleBtn = card.querySelector<HTMLElement>('.toggle-detail');
  if (toggleBtn && data.segments) {
    toggleBtn.textContent = `${data.segments.length} segments`;
  }
}

// ── Settings ──────────────────────────────────────────

async function loadSettings(): Promise<void> {
  try {
    const data = await apiJson<{ config: Record<string, string> }>('GET', '/api/config');
    const container = el('settings-fields');
    const entries = Object.entries(data.config || {});
    if (!entries.length) {
      container.innerHTML = '<p class="empty">No custom settings yet. Settings from .env are used as defaults.</p>';
      return;
    }
    container.innerHTML = entries.map(([key, value]) =>
      `<label>${escapeHtml(key)} <input type="text" name="${escapeHtml(key)}" value="${escapeHtml(String(value))}"></label>`
    ).join('');
  } catch (err) {
    console.error(err);
  }
}

el('settings-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const fd = new FormData(e.target as HTMLFormElement);
  const config: Record<string, string> = {};
  for (const [key, val] of fd.entries()) {
    config[key] = val as string;
  }
  try {
    await apiJson('PUT', '/api/config', config);
    alert('Settings saved');
  } catch (err: any) {
    alert('Error: ' + err.message);
  }
});

// ── Files list ────────────────────────────────────────

let selectedFiles = new Set<string>();

async function loadFilesList(): Promise<void> {
  try {
    const data = await apiJson<{ files: FileInfo[] }>('GET', '/api/files');
    const tbody = document.querySelector('#files-table tbody')!;
    tbody.innerHTML = data.files.map(f => `
      <tr>
        <td><input type="checkbox" class="file-checkbox" data-path="${escapeHtml(f.filePath)}"></td>
        <td>${escapeHtml(f.filename)}</td>
        <td>${formatSize(f.size)}</td>
      </tr>
    `).join('');

    tbody.querySelectorAll<HTMLInputElement>('.file-checkbox').forEach(cb => {
      cb.addEventListener('change', updateFileSelection);
    });
  } catch (err) {
    console.error(err);
  }
}

function updateFileSelection(): void {
  selectedFiles.clear();
  document.querySelectorAll<HTMLInputElement>('.file-checkbox:checked').forEach(cb => {
    if (cb.dataset.path) selectedFiles.add(cb.dataset.path);
  });
  (el('delete-selected-files') as HTMLButtonElement).disabled = selectedFiles.size === 0;
}

(el('select-all-files') as HTMLInputElement).addEventListener('change', function () {
  document.querySelectorAll<HTMLInputElement>('.file-checkbox').forEach(cb => {
    cb.checked = this.checked;
  });
  updateFileSelection();
});

el('delete-selected-files').addEventListener('click', () => {
  if (!confirm(`Delete ${selectedFiles.size} file(s)?`)) return;
  alert('File deletion not yet implemented');
});

el('refresh-files-list').addEventListener('click', loadFilesList);

// ── Config defaults for New Job form ─────────────────

async function loadConfigDefaults(): Promise<void> {
  try {
    const data = await apiJson<{ config: Record<string, string> }>('GET', '/api/config');
    const c = data.config || {};

    if (c.visionProvider) {
      const sel = document.querySelector<HTMLSelectElement>('[name="visionProvider"]');
      if (sel) {
        sel.innerHTML = '<option value="openai">OpenAI</option><option value="gemini">Gemini</option><option value="ollama">Ollama</option><option value="openrouter">OpenRouter</option>';
        sel.value = c.visionProvider;
      }
    }
    if (c.ttsProvider) {
      const sel = document.querySelector<HTMLSelectElement>('[name="ttsProvider"]');
      if (sel) {
        sel.innerHTML = '<option value="openai">OpenAI</option><option value="elevenlabs">ElevenLabs</option><option value="google">Google Cloud</option>';
        sel.value = c.ttsProvider;
      }
    }
    const fields: [string, string?][] = [
      ['visionModel'], ['ttsModel'], ['ttsVoice'], ['ttsSpeedFactor'],
      ['ttsInstructions', 'textarea'], ['batchWindowDuration'], ['framesInBatch'],
      ['captureIntervalSeconds'], ['contextWindowSize'],
      ['defaultPrompt', 'textarea'], ['changePrompt', 'textarea'], ['batchPrompt', 'textarea'],
    ];
    for (const [name, tag] of fields) {
      const el = document.querySelector<HTMLInputElement | HTMLTextAreaElement>(`[name="${name}"]`);
      if (el && c[name] !== undefined) el.value = c[name];
    }
  } catch (err) {
    console.error(err);
  }
}

// ── Init ──────────────────────────────────────────────

function initApp(): void {
  loadJobs();
  loadBrowseFiles();
  loadConfigDefaults();
  startPolling();
}

// ── Startup ───────────────────────────────────────────

(async () => {
  if (authToken) {
    try {
      const res = await fetch('/api/auth/check', {
        headers: { Authorization: `Basic ${authToken}` },
      });
      const data = await res.json();
      if (data.authenticated) {
        showMainScreen();
        initApp();
        return;
      }
    } catch { /* fall through to login */ }
  }
  showLoginScreen();
})();