// ============================================================================
// Miku Control Panel — Profile Picture, Album & Activities Module
// ============================================================================

// ============================================================================
// Profile Picture Tab (tab11) — Full Management
// ============================================================================

// pfpCropper declared in core.js

function getPfpCropMode() {
  const radio = document.querySelector('input[name="pfp-crop-mode"]:checked');
  return radio ? radio.value : 'auto';
}

function pfpSetStatus(text, color = '#61dafb') {
  const el = document.getElementById('pfp-tab-status');
  if (el) { el.textContent = text; el.style.color = color; }
}

function pfpRefreshPreviews() {
  const t = Date.now();
  const origImg = document.getElementById('pfp-preview-original');
  const curImg = document.getElementById('pfp-preview-current');
  if (origImg) origImg.src = `/profile-picture/image/original?t=${t}`;
  if (curImg) curImg.src = `/profile-picture/image/current?t=${t}`;
}

async function loadPfpTab() {
  // Load metadata
  try {
    const result = await apiCall('/profile-picture/metadata');
    if (result.status === 'ok' && result.metadata) {
      const metaDiv = document.getElementById('pfp-tab-metadata');
      const metaContent = document.getElementById('pfp-tab-metadata-content');
      metaContent.textContent = JSON.stringify(result.metadata, null, 2);
      metaDiv.style.display = 'block';

      // Show original dimensions if available
      const dimsEl = document.getElementById('pfp-original-dims');
      if (dimsEl && result.metadata.original_width) {
        dimsEl.textContent = `${result.metadata.original_width}×${result.metadata.original_height}`;
      }
    }
  } catch (e) {
    console.error('Failed to load PFP metadata:', e);
  }

  // Load description
  try {
    const result = await apiCall('/profile-picture/description');
    if (result.status === 'ok') {
      document.getElementById('pfp-description-editor').value = result.description || '';
    }
  } catch (e) {
    console.error('Failed to load PFP description:', e);
  }

  // Refresh preview images
  pfpRefreshPreviews();

  // Update album header counts (without opening)
  try {
    const [listRes, usageRes] = await Promise.all([
      apiCall('/profile-picture/album'),
      apiCall('/profile-picture/album/disk-usage')
    ]);
    if (listRes.status === 'ok') {
      albumEntries = listRes.entries || [];
      document.getElementById('album-count').textContent = `(${albumEntries.length} entries)`;
      if (albumOpen) albumRenderGrid();
    }
    if (usageRes.status === 'ok') {
      document.getElementById('album-disk-usage').textContent =
        `${usageRes.human_readable} · ${usageRes.entry_count} entries`;
    }
  } catch (e) {
    console.error('Failed to load album info:', e);
  }
}

// --- Danbooru Change ---
async function pfpChangeDanbooru() {
  const mode = getPfpCropMode();
  const selectedServer = document.getElementById('server-select').value;
  pfpSetStatus('⏳ Searching Danbooru...');

  try {
    const endpoint = mode === 'manual' ? '/profile-picture/change-no-crop' : '/profile-picture/change';
    const params = new URLSearchParams();
    if (selectedServer !== 'all') params.append('guild_id', selectedServer);
    const url = params.toString() ? `${endpoint}?${params.toString()}` : endpoint;

    const result = await apiCall(url, 'POST');

    if (result.status === 'ok') {
      pfpSetStatus(`✅ ${result.message}`, 'green');
      showNotification('Profile picture changed!');

      // Show metadata
      const metaDiv = document.getElementById('pfp-tab-metadata');
      const metaContent = document.getElementById('pfp-tab-metadata-content');
      if (result.metadata) {
        metaContent.textContent = JSON.stringify(result.metadata, null, 2);
        metaDiv.style.display = 'block';
      }

      pfpRefreshPreviews();

      // If manual mode, show crop interface
      if (mode === 'manual') {
        pfpShowCropInterface();
      }
    } else {
      throw new Error(result.message || 'Unknown error');
    }
  } catch (error) {
    console.error('PFP Danbooru error:', error);
    pfpSetStatus(`❌ Error: ${error.message}`, 'red');
  }
}

// Keep old function names working (backwards compatibility for autonomous/API callers)
async function changeProfilePicture() { await pfpChangeDanbooru(); }

// --- Custom Upload ---
async function pfpUploadCustom() {
  const fileInput = document.getElementById('pfp-tab-upload');
  const mode = getPfpCropMode();
  const selectedServer = document.getElementById('server-select').value;

  if (!fileInput.files || fileInput.files.length === 0) {
    showNotification('Please select an image file first', 'error');
    return;
  }

  const file = fileInput.files[0];
  if (!file.type.startsWith('image/')) {
    showNotification('Please select a valid image file', 'error');
    return;
  }

  pfpSetStatus('⏳ Uploading and processing...');

  try {
    const formData = new FormData();
    formData.append('file', file);

    const endpoint = mode === 'manual' ? '/profile-picture/change-no-crop' : '/profile-picture/change';
    let url = endpoint;
    if (selectedServer !== 'all') url += `?guild_id=${selectedServer}`;

    const response = await fetch(url, { method: 'POST', body: formData });
    const result = await response.json();

    if (response.ok && result.status === 'ok') {
      pfpSetStatus(`✅ ${result.message}`, 'green');
      showNotification('Image uploaded successfully!');
      fileInput.value = '';

      if (result.metadata) {
        const metaDiv = document.getElementById('pfp-tab-metadata');
        const metaContent = document.getElementById('pfp-tab-metadata-content');
        metaContent.textContent = JSON.stringify(result.metadata, null, 2);
        metaDiv.style.display = 'block';
      }

      pfpRefreshPreviews();

      if (mode === 'manual') {
        pfpShowCropInterface();
      }
    } else {
      throw new Error(result.message || 'Upload failed');
    }
  } catch (error) {
    console.error('PFP upload error:', error);
    pfpSetStatus(`❌ Error: ${error.message}`, 'red');
    showNotification(error.message, 'error');
  }
}

// Keep old function name working
async function uploadCustomPfp() { await pfpUploadCustom(); }

// --- Restore Fallback ---
async function pfpRestoreFallback() {
  if (!confirm('Are you sure you want to restore the original fallback avatar?')) return;

  pfpSetStatus('⏳ Restoring original avatar...');

  try {
    const result = await apiCall('/profile-picture/restore-fallback', 'POST');
    pfpSetStatus(`✅ ${result.message}`, 'green');
    document.getElementById('pfp-tab-metadata').style.display = 'none';
    pfpRefreshPreviews();
    showNotification('Original avatar restored!');
  } catch (error) {
    console.error('Restore fallback error:', error);
    pfpSetStatus(`❌ Error: ${error.message}`, 'red');
  }
}

async function restoreFallbackPfp() { await pfpRestoreFallback(); }

// --- Crop Interface ---
function pfpShowCropInterface() {
  const section = document.getElementById('pfp-crop-section');
  const img = document.getElementById('pfp-crop-image');

  // Destroy previous cropper if any
  if (pfpCropper) {
    pfpCropper.destroy();
    pfpCropper = null;
  }

  // Load original image
  img.src = `/profile-picture/image/original?t=${Date.now()}`;
  section.style.display = 'block';

  img.onload = function() {
    pfpCropper = new Cropper(img, {
      aspectRatio: 1,
      viewMode: 2,
      minCropBoxWidth: 64,
      minCropBoxHeight: 64,
      responsive: true,
      autoCropArea: 0.8,
      background: true,
      guides: true,
      center: true,
      highlight: true,
      cropBoxMovable: true,
      cropBoxResizable: true,
      toggleDragModeOnDblclick: false
    });
  };
}

function pfpHideCropInterface() {
  if (pfpCropper) {
    pfpCropper.destroy();
    pfpCropper = null;
  }
  document.getElementById('pfp-crop-section').style.display = 'none';
}

// Re-crop: open crop interface on stored original
function pfpRecrop() {
  pfpShowCropInterface();
}

async function pfpApplyManualCrop() {
  if (!pfpCropper) {
    showNotification('No crop region selected', 'error');
    return;
  }

  const data = pfpCropper.getData(true); // rounded integers
  pfpSetStatus('⏳ Applying manual crop...');

  try {
    const response = await fetch('/profile-picture/manual-crop', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        x: Math.round(data.x),
        y: Math.round(data.y),
        width: Math.round(data.width),
        height: Math.round(data.height)
      })
    });
    const result = await response.json();

    if (response.ok && result.status === 'ok') {
      pfpSetStatus(`✅ ${result.message}`, 'green');
      showNotification('Manual crop applied!');
      pfpHideCropInterface();
      pfpRefreshPreviews();

      // Refresh metadata
      if (result.metadata) {
        const metaContent = document.getElementById('pfp-tab-metadata-content');
        const existing = metaContent.textContent ? JSON.parse(metaContent.textContent) : {};
        Object.assign(existing, result.metadata);
        metaContent.textContent = JSON.stringify(existing, null, 2);
      }
    } else {
      throw new Error(result.message || 'Crop failed');
    }
  } catch (error) {
    console.error('Manual crop error:', error);
    pfpSetStatus(`❌ Error: ${error.message}`, 'red');
  }
}

async function pfpApplyAutoCrop() {
  pfpSetStatus('⏳ Running auto-crop (face detection)...');

  try {
    const result = await apiCall('/profile-picture/auto-crop', 'POST');

    if (result.status === 'ok') {
      pfpSetStatus(`✅ ${result.message}`, 'green');
      showNotification('Auto-crop applied!');
      pfpHideCropInterface();
      pfpRefreshPreviews();
    } else {
      throw new Error(result.message || 'Auto-crop failed');
    }
  } catch (error) {
    console.error('Auto-crop error:', error);
    pfpSetStatus(`❌ Error: ${error.message}`, 'red');
  }
}

// --- Description ---
async function pfpSaveDescription() {
  const descEl = document.getElementById('pfp-description-editor');
  const statusEl = document.getElementById('pfp-desc-status');
  const description = descEl.value.trim();

  if (!description) {
    statusEl.textContent = '⚠️ Description cannot be empty';
    statusEl.style.color = 'orange';
    return;
  }

  statusEl.textContent = '⏳ Saving description...';
  statusEl.style.color = '#61dafb';

  try {
    const response = await fetch('/profile-picture/description', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ description })
    });
    const result = await response.json();

    if (response.ok && result.status === 'ok') {
      statusEl.textContent = '✅ Description saved & injected into Cat memory';
      statusEl.style.color = 'green';
      showNotification('Description saved!');
    } else {
      throw new Error(result.message || 'Save failed');
    }
  } catch (error) {
    console.error('Save description error:', error);
    statusEl.textContent = `❌ Error: ${error.message}`;
    statusEl.style.color = 'red';
  }
}

async function pfpRegenerateDescription() {
  const statusEl = document.getElementById('pfp-desc-status');
  statusEl.textContent = '⏳ Regenerating description via vision model...';
  statusEl.style.color = '#61dafb';

  try {
    const result = await apiCall('/profile-picture/regenerate-description', 'POST');

    if (result.status === 'ok' && result.description) {
      document.getElementById('pfp-description-editor').value = result.description;
      statusEl.textContent = '✅ Description regenerated & saved';
      statusEl.style.color = 'green';
      showNotification('Description regenerated!');
    } else {
      throw new Error(result.message || 'Regeneration failed');
    }
  } catch (error) {
    console.error('Regenerate description error:', error);
    statusEl.textContent = `❌ Error: ${error.message}`;
    statusEl.style.color = 'red';
  }
}

// --- Role Color (updated element IDs for tab11) ---
async function setCustomRoleColor() {
  const statusDiv = document.getElementById('pfp-tab-role-color-status');
  const hexInput = document.getElementById('pfp-tab-role-color-hex');
  const hexColor = hexInput.value.trim();

  if (!hexColor) {
    statusDiv.textContent = '⚠️ Please enter a hex color code';
    statusDiv.style.color = 'orange';
    return;
  }

  statusDiv.textContent = '⏳ Updating role colors...';
  statusDiv.style.color = '#61dafb';

  try {
    const formData = new FormData();
    formData.append('hex_color', hexColor);

    const response = await fetch('/role-color/custom', {
      method: 'POST',
      body: formData
    });

    const result = await response.json();

    if (response.ok && result.status === 'ok') {
      statusDiv.textContent = `✅ ${result.message}`;
      statusDiv.style.color = 'green';
      showNotification(`Role color updated to ${result.color.hex}`);
    } else {
      throw new Error(result.message || 'Failed to update role color');
    }
  } catch (error) {
    console.error('Failed to set custom role color:', error);
    statusDiv.textContent = `❌ Error: ${error.message}`;
    statusDiv.style.color = 'red';
    showNotification(error.message || 'Failed to update role color', 'error');
  }
}

async function resetRoleColor() {
  const statusDiv = document.getElementById('pfp-tab-role-color-status');

  statusDiv.textContent = '⏳ Resetting to fallback color...';
  statusDiv.style.color = '#61dafb';

  try {
    const result = await apiCall('/role-color/reset-fallback', 'POST');

    statusDiv.textContent = `✅ ${result.message}`;
    statusDiv.style.color = 'green';

    document.getElementById('pfp-tab-role-color-hex').value = '#86cecb';

    showNotification('Role color reset to fallback #86cecb');
  } catch (error) {
    console.error('Failed to reset role color:', error);
    statusDiv.textContent = `❌ Error: ${error.message}`;
    statusDiv.style.color = 'red';
  }
}

// ============================================================================
// Album / Gallery System
// ============================================================================

// albumEntries, albumSelectedId, albumChecked, albumCropper, albumOpen declared in core.js

function albumSetStatus(text, color = '#61dafb') {
  const el = document.getElementById('album-status');
  if (el) { el.textContent = text; el.style.color = color; }
}

function albumToggle() {
  albumOpen = !albumOpen;
  document.getElementById('album-body').style.display = albumOpen ? 'block' : 'none';
  document.getElementById('album-toggle-icon').textContent = albumOpen ? '▼' : '▶';
  if (albumOpen) albumLoad();
}

async function albumLoad() {
  try {
    const [listRes, usageRes] = await Promise.all([
      apiCall('/profile-picture/album'),
      apiCall('/profile-picture/album/disk-usage')
    ]);
    if (listRes.status === 'ok') {
      albumEntries = listRes.entries || [];
      document.getElementById('album-count').textContent = `(${albumEntries.length} entries)`;
      albumRenderGrid();
    }
    if (usageRes.status === 'ok') {
      document.getElementById('album-disk-usage').textContent =
        `${usageRes.human_readable} · ${usageRes.entry_count} entries`;
    }
  } catch (e) {
    console.error('Album load error:', e);
  }
}

function albumRenderGrid() {
  const grid = document.getElementById('album-grid');
  if (!grid) return;

  if (albumEntries.length === 0) {
    grid.innerHTML = '<div style="color: #888; padding: 1rem; grid-column: 1/-1;">No album entries yet. Upload images or archive the current PFP.</div>';
    return;
  }

  grid.innerHTML = albumEntries.map(e => {
    const id = e.id;
    const isSelected = id === albumSelectedId;
    const isChecked = albumChecked.has(id);
    const colorDot = e.dominant_color
      ? `<span class="color-dot" style="background:${e.dominant_color.hex}"></span>`
      : '';
    const label = (e.source || '').replace('custom_upload', 'upload').substring(0, 12);
    return `<div class="album-card${isSelected ? ' selected' : ''}${isChecked ? ' checked' : ''}"
                 data-id="${id}" onclick="albumSelectEntry('${id}')">
              <input type="checkbox" class="album-check" ${isChecked ? 'checked' : ''}
                     onclick="event.stopPropagation(); albumToggleCheck('${id}', this.checked)">
              <img src="/profile-picture/album/${id}/image/cropped?t=${Date.now()}"
                   onerror="this.src='/profile-picture/album/${id}/image/original?t=${Date.now()}'"
                   loading="lazy" alt="">
              <div class="album-card-info">${colorDot}${label}</div>
            </div>`;
  }).join('');
}

function albumToggleCheck(id, checked) {
  if (checked) albumChecked.add(id); else albumChecked.delete(id);
  document.getElementById('album-selected-count').textContent = albumChecked.size;
  document.getElementById('album-bulk-delete-btn').disabled = albumChecked.size === 0;
  // update card class
  const card = document.querySelector(`.album-card[data-id="${id}"]`);
  if (card) card.classList.toggle('checked', checked);
}

async function albumSelectEntry(id) {
  albumSelectedId = id;
  // highlight card
  document.querySelectorAll('.album-card').forEach(c => c.classList.toggle('selected', c.dataset.id === id));
  // show detail
  const detail = document.getElementById('album-detail');
  detail.style.display = 'block';
  const t = Date.now();
  document.getElementById('album-detail-original').src = `/profile-picture/album/${id}/image/original?t=${t}`;
  document.getElementById('album-detail-cropped').src = `/profile-picture/album/${id}/image/cropped?t=${t}`;

  // load entry metadata
  try {
    const res = await apiCall(`/profile-picture/album/${id}`);
    if (res.status === 'ok' && res.entry) {
      const e = res.entry;
      document.getElementById('album-detail-dims').textContent =
        e.original_width && e.original_height ? `${e.original_width}×${e.original_height}` : '';
      document.getElementById('album-detail-description').value = e.description || '';
      const metaLines = [];
      if (e.added_at) metaLines.push(`Added: ${new Date(e.added_at).toLocaleString()}`);
      if (e.source) metaLines.push(`Source: ${e.source}`);
      if (e.dominant_color) metaLines.push(`Color: ${e.dominant_color.hex}`);
      if (e.was_current) metaLines.push('📌 Previously active');
      document.getElementById('album-detail-meta').textContent = metaLines.join(' · ');
    }
  } catch (e) {
    console.error('Album entry load error:', e);
  }
}

function albumCloseDetail() {
  document.getElementById('album-detail').style.display = 'none';
  albumSelectedId = null;
  albumHideCropInterface();
  document.querySelectorAll('.album-card').forEach(c => c.classList.remove('selected'));
}

// --- Album Upload ---
async function albumUpload() {
  const input = document.getElementById('album-upload');
  if (!input.files || input.files.length === 0) {
    showNotification('Select image(s) to add to album', 'error');
    return;
  }

  const files = Array.from(input.files);
  albumSetStatus(`⏳ Adding ${files.length} image(s) to album...`);

  try {
    if (files.length === 1) {
      const formData = new FormData();
      formData.append('file', files[0]);
      const resp = await fetch('/profile-picture/album/add', { method: 'POST', body: formData });
      const result = await resp.json();
      if (result.status === 'ok') {
        albumSetStatus(`✅ Added to album`, 'green');
        showNotification('Image added to album!');
      } else {
        throw new Error(result.message);
      }
    } else {
      const formData = new FormData();
      files.forEach(f => formData.append('files', f));
      const resp = await fetch('/profile-picture/album/add-batch', { method: 'POST', body: formData });
      const result = await resp.json();
      albumSetStatus(`✅ ${result.message}`, result.failed > 0 ? 'orange' : 'green');
      showNotification(result.message);
    }
    input.value = '';
    await albumLoad();
  } catch (error) {
    console.error('Album upload error:', error);
    albumSetStatus(`❌ Error: ${error.message}`, 'red');
  }
}

async function albumAddCurrent() {
  albumSetStatus('⏳ Archiving current PFP...');
  try {
    const result = await apiCall('/profile-picture/album/add-current', 'POST');
    if (result.status === 'ok') {
      albumSetStatus(`✅ ${result.message}`, 'green');
      showNotification('Current PFP archived to album!');
      await albumLoad();
    } else {
      throw new Error(result.message);
    }
  } catch (error) {
    albumSetStatus(`❌ Error: ${error.message}`, 'red');
  }
}

// --- Album Set as Current ---
async function albumSetAsCurrent() {
  if (!albumSelectedId) return;
  if (!confirm('Set this album entry as your current Discord profile picture?\nThe current PFP will be archived to the album.')) return;

  albumSetStatus('⏳ Setting as current PFP...');
  try {
    const result = await apiCall(`/profile-picture/album/${albumSelectedId}/set-current`, 'POST');
    if (result.status === 'ok') {
      albumSetStatus(`✅ ${result.message}`, 'green');
      showNotification('Album entry set as current PFP!');
      pfpRefreshPreviews();
      loadPfpTab(); // refresh metadata + description
      await albumLoad();
    } else {
      throw new Error(result.message);
    }
  } catch (error) {
    albumSetStatus(`❌ Error: ${error.message}`, 'red');
  }
}

// --- Album Delete ---
async function albumDeleteSelected() {
  if (!albumSelectedId) return;
  if (!confirm('Delete this album entry permanently?')) return;

  try {
    const resp = await fetch(`/profile-picture/album/${albumSelectedId}`, { method: 'DELETE' });
    const result = await resp.json();
    if (result.status === 'ok') {
      showNotification('Album entry deleted');
      albumCloseDetail();
      await albumLoad();
    } else {
      throw new Error(result.message);
    }
  } catch (error) {
    showNotification(`Error: ${error.message}`, 'error');
  }
}

async function albumBulkDelete() {
  if (albumChecked.size === 0) return;
  if (!confirm(`Delete ${albumChecked.size} selected album entries permanently?`)) return;

  albumSetStatus(`⏳ Deleting ${albumChecked.size} entries...`);
  try {
    const resp = await fetch('/profile-picture/album/delete-bulk', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ entry_ids: Array.from(albumChecked) })
    });
    const result = await resp.json();
    albumSetStatus(`✅ ${result.message}`, 'green');
    showNotification(result.message);
    albumChecked.clear();
    document.getElementById('album-selected-count').textContent = '0';
    document.getElementById('album-bulk-delete-btn').disabled = true;
    if (albumSelectedId && !albumEntries.find(e => e.id === albumSelectedId)) {
      albumCloseDetail();
    }
    await albumLoad();
  } catch (error) {
    albumSetStatus(`❌ Error: ${error.message}`, 'red');
  }
}

// --- Album Crop ---
function albumShowCropInterface() {
  if (!albumSelectedId) return;
  if (albumCropper) { albumCropper.destroy(); albumCropper = null; }

  const section = document.getElementById('album-crop-section');
  const img = document.getElementById('album-crop-image');
  img.src = `/profile-picture/album/${albumSelectedId}/image/original?t=${Date.now()}`;
  section.style.display = 'block';

  img.onload = function() {
    albumCropper = new Cropper(img, {
      aspectRatio: 1,
      viewMode: 2,
      minCropBoxWidth: 64,
      minCropBoxHeight: 64,
      responsive: true,
      autoCropArea: 0.8,
      background: true,
      guides: true,
      center: true,
      highlight: true,
      cropBoxMovable: true,
      cropBoxResizable: true,
      toggleDragModeOnDblclick: false
    });
  };
}

function albumHideCropInterface() {
  if (albumCropper) { albumCropper.destroy(); albumCropper = null; }
  document.getElementById('album-crop-section').style.display = 'none';
}

async function albumApplyManualCrop() {
  if (!albumCropper || !albumSelectedId) return;
  const data = albumCropper.getData(true);
  albumSetStatus('⏳ Applying crop to album entry...');

  try {
    const resp = await fetch(`/profile-picture/album/${albumSelectedId}/manual-crop`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ x: Math.round(data.x), y: Math.round(data.y), width: Math.round(data.width), height: Math.round(data.height) })
    });
    const result = await resp.json();
    if (result.status === 'ok') {
      albumSetStatus('✅ Crop applied', 'green');
      showNotification('Album entry cropped!');
      albumHideCropInterface();
      // refresh detail images
      const t = Date.now();
      document.getElementById('album-detail-cropped').src = `/profile-picture/album/${albumSelectedId}/image/cropped?t=${t}`;
      await albumLoad(); // refresh grid thumbnails
    } else {
      throw new Error(result.message);
    }
  } catch (error) {
    albumSetStatus(`❌ Error: ${error.message}`, 'red');
  }
}

async function albumApplyAutoCrop() {
  if (!albumSelectedId) return;
  albumSetStatus('⏳ Running auto-crop on album entry...');

  try {
    const result = await apiCall(`/profile-picture/album/${albumSelectedId}/auto-crop`, 'POST');
    if (result.status === 'ok') {
      albumSetStatus('✅ Auto-crop applied', 'green');
      showNotification('Album entry auto-cropped!');
      albumHideCropInterface();
      const t = Date.now();
      document.getElementById('album-detail-cropped').src = `/profile-picture/album/${albumSelectedId}/image/cropped?t=${t}`;
      await albumLoad();
    } else {
      throw new Error(result.message);
    }
  } catch (error) {
    albumSetStatus(`❌ Error: ${error.message}`, 'red');
  }
}

// --- Album Description ---
async function albumSaveDescription() {
  if (!albumSelectedId) return;
  const description = document.getElementById('album-detail-description').value.trim();
  if (!description) { showNotification('Description cannot be empty', 'error'); return; }

  try {
    const resp = await fetch(`/profile-picture/album/${albumSelectedId}/description`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ description })
    });
    const result = await resp.json();
    if (result.status === 'ok') {
      showNotification('Album entry description saved!');
    } else {
      throw new Error(result.message);
    }
  } catch (error) {
    showNotification(`Error: ${error.message}`, 'error');
  }
}

// ============================================================================
// MOOD ACTIVITIES EDITOR
// ============================================================================

// activitiesData, activitiesOpen, activitiesSections, activitiesEditing, activitiesEditCache declared in core.js

function activitiesToggle() {
  activitiesOpen = !activitiesOpen;
  document.getElementById('activities-body').style.display = activitiesOpen ? 'block' : 'none';
  document.getElementById('activities-toggle-icon').textContent = activitiesOpen ? '▼' : '▶';
  if (activitiesOpen) {
    if (!activitiesData) activitiesLoad();
    activityRefreshCurrent();
  }
}

function activitiesSectionToggle(section) {
  activitiesSections[section] = !activitiesSections[section];
  document.getElementById(`activities-${section}-body`).style.display = activitiesSections[section] ? 'block' : 'none';
  document.getElementById(`activities-${section}-icon`).textContent = activitiesSections[section] ? '▼' : '▶';
}

async function activitiesLoad() {
  const statusEl = document.getElementById('activities-status');
  statusEl.textContent = 'Loading...';
  try {
    activitiesData = await apiCall('/activities');
    const normalMoods = Object.keys(activitiesData.normal || {});
    const evilMoods = Object.keys(activitiesData.evil || {});
    const total = normalMoods.length + evilMoods.length;
    document.getElementById('activities-summary').textContent = `(${total} moods configured)`;
    activitiesRenderSection('normal');
    activitiesRenderSection('evil');
    statusEl.textContent = '';
  } catch (e) {
    statusEl.textContent = 'Failed to load: ' + e.message;
    statusEl.style.color = '#e74c3c';
  }
}

function activitiesRenderSection(section) {
  const container = document.getElementById(`activities-${section}-list`);
  if (!activitiesData || !activitiesData[section]) { container.innerHTML = '<p style="color:#888;">No data</p>'; return; }

  const moods = activitiesData[section];
  let html = '';
  for (const [mood, entries] of Object.entries(moods)) {
    const key = `${section}/${mood}`;
    const isEditing = activitiesEditing[key];
    const songs = entries.filter(e => e.type === 'listening').length;
    const games = entries.filter(e => e.type === 'playing').length;
    const watches = entries.filter(e => e.type === 'watching').length;
    const competes = entries.filter(e => e.type === 'competing').length;
    const streams = entries.filter(e => e.type === 'streaming').length;

    let stats = `${songs}🎵 ${games}🎮`;
    if (watches) stats += ` ${watches}📺`;
    if (competes) stats += ` ${competes}🏆`;
    if (streams) stats += ` ${streams}🔴`;

    html += `<div class="act-mood-row">`;
    html += `<div class="act-mood-header" onclick="activitiesMoodToggle('${section}','${mood}')">`;
    html += `<span class="act-mood-name"><span id="act-icon-${section}-${mood}">▶</span> ${mood}</span>`;
    html += `<span class="act-mood-stats">${stats}</span>`;
    html += `</div>`;
    html += `<div class="act-mood-content" id="act-content-${section}-${mood}">`;

    if (isEditing) {
      html += activitiesRenderEditForm(section, mood, activitiesEditCache[key] || entries);
    } else {
      html += activitiesRenderView(section, mood, entries);
    }

    html += `</div></div>`;
  }
  container.innerHTML = html;
}

function activitiesRenderView(section, mood, entries) {
  let html = '';
  for (let i = 0; i < entries.length; i++) {
    const entry = entries[i];
    const icons = { listening: '🎵', playing: '🎮', watching: '📺', competing: '🏆', streaming: '🔴' };
    const labels = { listening: 'Listening to', playing: 'Playing', watching: 'Watching', competing: 'Competing in', streaming: 'Streaming' };
    const icon = icons[entry.type] || '🎮';
    const label = labels[entry.type] || 'Playing';
    // Encode entry data for the "Set as Activity" button
    const entryData = encodeURIComponent(JSON.stringify({ type: entry.type, name: entry.name, state: entry.state || '', url: entry.url || '' }));
    html += `<div class="act-entry">`;
    html += `<span class="act-entry-icon">${icon}</span>`;
    html += `<span style="flex:1;"><strong style="color:#61dafb; font-size:0.8rem;">${label}</strong> ${escapeHtml(entry.name)}`;
    if (entry.state) html += ` <span style="color:#aaa; font-size:0.85rem;">— ${escapeHtml(entry.state)}</span>`;
    html += `</span>`;
    html += `<span style="color:#888; font-size:0.8rem;">weight: ${entry.weight}</span>`;
    html += `<button onclick="activitySetFromEntry(this)" data-entry="${entryData}" style="background:#e67e22; font-size:0.75rem; padding:0.2rem 0.5rem; margin-left:0.3rem;" title="Set this as bot's current activity (30 min override)">🎯 Set</button>`;
    html += `</div>`;
  }
  html += `<div class="act-toolbar">`;
  html += `<button onclick="activitiesStartEdit('${section}','${mood}')" style="background:#4a7bc9;">✏️ Edit</button>`;
  html += `</div>`;
  return html;
}

function activitiesRenderEditForm(section, mood, entries) {
  let html = '';
  for (let i = 0; i < entries.length; i++) {
    const e = entries[i];
    html += `<div class="act-entry">`;
    html += `<select id="act-type-${section}-${mood}-${i}" onchange="activitiesTypeChanged('${section}','${mood}',${i})">`;
    html += `<option value="listening" ${e.type === 'listening' ? 'selected' : ''}>🎵 Listening</option>`;
    html += `<option value="playing" ${e.type === 'playing' ? 'selected' : ''}>🎮 Playing</option>`;
    html += `<option value="watching" ${e.type === 'watching' ? 'selected' : ''}>📺 Watching</option>`;
    html += `<option value="competing" ${e.type === 'competing' ? 'selected' : ''}>🏆 Competing</option>`;
    html += `<option value="streaming" ${e.type === 'streaming' ? 'selected' : ''}>🔴 Streaming</option>`;
    html += `</select>`;
    html += `<input type="text" id="act-name-${section}-${mood}-${i}" value="${escapeHtml(e.name)}" placeholder="Name" style="flex:2; min-width:120px;">`;
    html += `<input type="text" id="act-state-${section}-${mood}-${i}" value="${escapeHtml(e.state || '')}" placeholder="Detail (optional)" style="flex:1.5; min-width:100px;">`;
    html += `<input type="text" id="act-url-${section}-${mood}-${i}" value="${escapeHtml(e.url || '')}" placeholder="URL (streaming)" style="flex:1.5; min-width:100px; ${e.type === 'streaming' ? '' : 'display:none;'}">`;
    html += `<input type="number" id="act-weight-${section}-${mood}-${i}" value="${e.weight}" min="1" max="20" style="width:60px;">`;
    html += `<button onclick="activitiesRemoveEntry('${section}','${mood}',${i})" style="background:#c0392b; padding:0.3rem 0.5rem;" title="Remove">✕</button>`;
    html += `</div>`;
  }
  html += `<div class="act-toolbar">`;
  html += `<button onclick="activitiesAddEntry('${section}','${mood}')" style="background:#27ae60;">➕ Add Entry</button>`;
  html += `<button onclick="activitiesSave('${section}','${mood}')" style="background:#4a7bc9;">💾 Save</button>`;
  html += `<button onclick="activitiesCancelEdit('${section}','${mood}')" style="background:#555;">Cancel</button>`;
  html += `</div>`;
  return html;
}

function activitiesTypeChanged(section, mood, index) {
  const typeEl = document.getElementById(`act-type-${section}-${mood}-${index}`);
  const urlEl = document.getElementById(`act-url-${section}-${mood}-${index}`);
  if (!typeEl || !urlEl) return;
  urlEl.style.display = typeEl.value === 'streaming' ? '' : 'none';
}

function activitiesMoodToggle(section, mood) {
  const el = document.getElementById(`act-content-${section}-${mood}`);
  const iconEl = document.getElementById(`act-icon-${section}-${mood}`);
  if (!el) return;
  const isOpen = el.style.display === 'block';
  el.style.display = isOpen ? 'none' : 'block';
  if (iconEl) iconEl.textContent = isOpen ? '▶' : '▼';
}

function activitiesStartEdit(section, mood) {
  const key = `${section}/${mood}`;
  const entries = activitiesData[section][mood];
  // Deep clone entries for editing
  activitiesEditCache[key] = JSON.parse(JSON.stringify(entries));
  activitiesEditing[key] = true;
  activitiesRenderSection(section);
  // Auto-expand the mood panel
  const el = document.getElementById(`act-content-${section}-${mood}`);
  const iconEl = document.getElementById(`act-icon-${section}-${mood}`);
  if (el) el.style.display = 'block';
  if (iconEl) iconEl.textContent = '▼';
}

function activitiesCancelEdit(section, mood) {
  const key = `${section}/${mood}`;
  delete activitiesEditing[key];
  delete activitiesEditCache[key];
  activitiesRenderSection(section);
}

function activitiesAddEntry(section, mood) {
  const key = `${section}/${mood}`;
  // First, sync current form values to cache
  activitiesSyncFormToCache(section, mood);
  activitiesEditCache[key].push({ type: 'listening', name: '', state: '', weight: 1 });
  activitiesRenderSection(section);
  // Keep the mood panel open
  const el = document.getElementById(`act-content-${section}-${mood}`);
  if (el) el.style.display = 'block';
}

function activitiesRemoveEntry(section, mood, index) {
  const key = `${section}/${mood}`;
  activitiesSyncFormToCache(section, mood);
  activitiesEditCache[key].splice(index, 1);
  activitiesRenderSection(section);
  const el = document.getElementById(`act-content-${section}-${mood}`);
  if (el) el.style.display = 'block';
}

function activitiesSyncFormToCache(section, mood) {
  const key = `${section}/${mood}`;
  const entries = activitiesEditCache[key] || [];
  for (let i = 0; i < entries.length; i++) {
    const typeEl = document.getElementById(`act-type-${section}-${mood}-${i}`);
    const nameEl = document.getElementById(`act-name-${section}-${mood}-${i}`);
    const stateEl = document.getElementById(`act-state-${section}-${mood}-${i}`);
    const urlEl = document.getElementById(`act-url-${section}-${mood}-${i}`);
    const weightEl = document.getElementById(`act-weight-${section}-${mood}-${i}`);
    if (typeEl) entries[i].type = typeEl.value;
    if (nameEl) entries[i].name = nameEl.value;
    if (stateEl) entries[i].state = stateEl.value || undefined;
    if (urlEl) entries[i].url = urlEl.value || undefined;
    if (weightEl) entries[i].weight = parseInt(weightEl.value) || 1;
  }
  activitiesEditCache[key] = entries;
}

async function activitiesSave(section, mood) {
  const key = `${section}/${mood}`;
  activitiesSyncFormToCache(section, mood);
  const entries = activitiesEditCache[key];

  // Client-side validation
  for (let i = 0; i < entries.length; i++) {
    if (!entries[i].name || !entries[i].name.trim()) {
      showNotification(`Entry ${i + 1}: name cannot be empty`, 'error');
      return;
    }
    if (!entries[i].weight || entries[i].weight < 1) {
      showNotification(`Entry ${i + 1}: weight must be at least 1`, 'error');
      return;
    }
    if (entries[i].type === 'streaming' && !entries[i].url) {
      showNotification(`Entry ${i + 1}: streaming requires a URL`, 'error');
      return;
    }
  }

  try {
    await apiCall(`/activities/${section}/${mood}`, 'POST', { activities: entries });
    showNotification(`Saved activities for ${section}/${mood}`, 'success');
    delete activitiesEditing[key];
    delete activitiesEditCache[key];
    // Reload to get fresh data
    await activitiesLoad();
  } catch (e) {
    showNotification('Save failed: ' + e.message, 'error');
  }
}

// ============================================================================
// CURRENT ACTIVITY OVERRIDE
// ============================================================================

function _activityTypeIcon(type) {
  return { listening: '🎵', playing: '🎮', watching: '📺', competing: '🏆', streaming: '🔴' }[type] || '🎮';
}

function _activityTypeLabel(type) {
  return { listening: 'Listening to', playing: 'Playing', watching: 'Watching', competing: 'Competing in', streaming: 'Streaming' }[type] || 'Playing';
}

async function activityRefreshCurrent() {
  const statusEl = document.getElementById('activity-override-status');
  try {
    const data = await apiCall('/activities/current');
    const act = data.activity;
    const isOverride = data.manual_override;

    if (act) {
      const icon = _activityTypeIcon(act.type);
      const label = _activityTypeLabel(act.type);
      let html = `${icon} <strong>${label}</strong> ${escapeHtml(act.name)}`;
      if (act.state) html += ` <span style="color:#aaa;">— ${escapeHtml(act.state)}</span>`;
      if (isOverride) html += ` <span style="color:#e67e22; font-size:0.8rem;">⚡ MANUAL OVERRIDE (30 min)</span>`;
      statusEl.innerHTML = html;
    } else {
      let html = '<span style="color:#888;">No activity (idle)</span>';
      if (isOverride) html += ' <span style="color:#e67e22; font-size:0.8rem;">⚡ MANUAL OVERRIDE</span>';
      statusEl.innerHTML = html;
    }
  } catch (e) {
    statusEl.innerHTML = `<span style="color:#e74c3c;">Error: ${e.message}</span>`;
  }
}

async function activitySetManual() {
  const type = document.getElementById('act-manual-type').value;
  const name = document.getElementById('act-manual-name').value.trim();
  const state = document.getElementById('act-manual-state').value.trim();
  const url = document.getElementById('act-manual-url').value.trim();

  if (!name) { showNotification('Activity name is required', 'error'); return; }
  if (type === 'streaming' && !url) { showNotification('Streaming requires a URL', 'error'); return; }

  try {
    const body = { type, name };
    if (state) body.state = state;
    if (url) body.url = url;
    await apiCall('/activities/current', 'POST', body);
    showNotification(`Set activity: ${type} ${name}`, 'success');
    await activityRefreshCurrent();
  } catch (e) {
    showNotification('Failed to set activity: ' + e.message, 'error');
  }
}

async function activitySetFromEntry(btnElement) {
  const raw = btnElement.getAttribute('data-entry');
  if (!raw) return;
  let entry;
  try { entry = JSON.parse(decodeURIComponent(raw)); } catch (e) { showNotification('Failed to parse activity data', 'error'); return; }
  const type = entry.type;
  const name = entry.name;
  const state = entry.state || null;
  const url = entry.url || null;

  if (!name) { showNotification('Activity name is empty', 'error'); return; }
  if (type === 'streaming' && !url) { showNotification('Streaming requires a URL', 'error'); return; }

  try {
    const body = { type, name };
    if (state) body.state = state;
    if (url) body.url = url;
    await apiCall('/activities/current', 'POST', body);
    const icon = _activityTypeIcon(type);
    showNotification(`${icon} Set activity: ${name}`, 'success');
    await activityRefreshCurrent();
  } catch (e) {
    showNotification('Failed to set activity: ' + e.message, 'error');
  }
}

async function activityClearManual() {
  try {
    await apiCall('/activities/current', 'DELETE');
    showNotification('Activity cleared (manual override active)', 'success');
    await activityRefreshCurrent();
  } catch (e) {
    showNotification('Failed to clear: ' + e.message, 'error');
  }
}

async function activityReleaseAuto() {
  try {
    await apiCall('/activities/current/auto', 'POST');
    showNotification('Returned to automatic mode', 'success');
    await activityRefreshCurrent();
  } catch (e) {
    showNotification('Failed to release override: ' + e.message, 'error');
  }
}

// Show/hide URL field when streaming is selected in manual override
document.getElementById('act-manual-type').addEventListener('change', function() {
  document.getElementById('act-manual-url').style.display = this.value === 'streaming' ? '' : 'none';
});