let friends = [];
let shareTargetId = null;
let settings = { publicBaseUrl: '' };

async function checkSession() {
  const res = await fetch('/api/session');
  const data = await res.json();
  if (data.role !== 'admin') {
    window.location.href = '/';
  }
}

async function loadSettings() {
  const res = await fetch('/api/settings');
  if (!res.ok) return;
  const data = await res.json();
  settings = data.settings || { publicBaseUrl: '' };
  document.getElementById('publicBaseUrl').value = settings.publicBaseUrl || '';
}

document.getElementById('saveSettingsBtn').addEventListener('click', async () => {
  const publicBaseUrl = document.getElementById('publicBaseUrl').value.trim();
  const res = await fetch('/api/settings', {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ publicBaseUrl }),
  });
  const data = await res.json();
  if (res.ok) {
    settings = data.settings;
    const msg = document.getElementById('settingsSaved');
    msg.textContent = 'Gespeichert ✓';
    msg.classList.add('show');
    setTimeout(() => msg.classList.remove('show'), 1800);
  }
});

function baseUrl() {
  return settings.publicBaseUrl && settings.publicBaseUrl.length
    ? settings.publicBaseUrl
    : window.location.origin;
}

async function loadFriends() {
  const res = await fetch('/api/friends');
  if (res.status === 401) { window.location.href = '/'; return; }
  const data = await res.json();
  friends = data.friends || [];
  renderFriends();
}

function renderFriends() {
  const grid = document.getElementById('friendGrid');
  const emptyMsg = document.getElementById('emptyMsg');
  grid.innerHTML = '';
  emptyMsg.style.display = friends.length ? 'none' : 'block';

  friends.forEach((f) => {
    const el = document.createElement('div');
    el.className = 'friend-card';
    const thumbHtml = f.profileImage
      ? `<img class="friend-thumb" src="/uploads/${encodeURIComponent(folderFor(f))}/${encodeURIComponent(f.profileImage)}" />`
      : `<div class="friend-thumb placeholder">${(f.name || '?')[0].toUpperCase()}</div>`;
    el.innerHTML = `
      <div class="tape"></div>
      ${thumbHtml}
      <h3>${escapeHtml(f.name)}</h3>
      <span class="badge ${f.shareEnabled ? 'on' : 'off'}">${f.shareEnabled ? 'Freigegeben' : 'Nicht freigegeben'}</span>
      <div class="friend-actions">
        <a class="btn" href="/friend/${f.id}">✏️ Bearbeiten</a>
        <button class="secondary" data-share="${f.id}">🔗 Freigabe</button>
        <button class="secondary" data-export="${f.id}">⬇️ Export</button>
        <button class="danger" data-delete="${f.id}">🗑️</button>
      </div>
    `;
    grid.appendChild(el);
  });

  grid.querySelectorAll('[data-share]').forEach((btn) => {
    btn.addEventListener('click', () => openShareModal(btn.dataset.share));
  });
  grid.querySelectorAll('[data-delete]').forEach((btn) => {
    btn.addEventListener('click', () => deleteFriend(btn.dataset.delete));
  });
  grid.querySelectorAll('[data-export]').forEach((btn) => {
    btn.addEventListener('click', () => window.location.href = `/api/friends/${btn.dataset.export}/export`);
  });
}

// wir brauchen den vollen Ordnernamen für Bild-URLs; da wir ihn nicht separat liefern,
// nutzen wir /uploads/<id>-Lookup über eine kleine Konvention: Backend akzeptiert auch
// reine IDs nicht direkt, daher holen wir folderName aus friend-detail bei Bedarf.
// Einfachere Lösung: Backend liefert profileImage-Pfad bereits vollständig auf.
function folderFor(f) {
  return f.folderName || f.id;
}

function escapeHtml(str) {
  const div = document.createElement('div');
  div.textContent = str || '';
  return div.innerHTML;
}

document.getElementById('createForm').addEventListener('submit', async (e) => {
  e.preventDefault();
  const name = document.getElementById('newName').value.trim();
  const errBox = document.getElementById('createErr');
  errBox.innerHTML = '';
  if (!name) return;
  const res = await fetch('/api/friends', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name }),
  });
  const data = await res.json();
  if (!res.ok) {
    errBox.innerHTML = `<p class="error-msg">${data.error}</p>`;
    return;
  }
  document.getElementById('newName').value = '';
  loadFriends();
});

async function deleteFriend(id) {
  const f = friends.find((x) => x.id === id);
  if (!confirm(`"${f ? f.name : 'Freund'}" wirklich löschen? Alle Fotos und Einträge gehen dabei verloren.`)) return;
  const res = await fetch(`/api/friends/${id}`, { method: 'DELETE' });
  if (res.ok) loadFriends();
}

function openShareModal(id) {
  shareTargetId = id;
  const f = friends.find((x) => x.id === id);
  document.getElementById('shareFriendName').textContent = f ? f.name : '';
  document.getElementById('sharePw').value = '';
  document.getElementById('shareErr').innerHTML = '';
  const linkBox = document.getElementById('shareLinkBox');
  if (f && f.shareEnabled) {
    linkBox.style.display = 'block';
    document.getElementById('shareLinkInput').value = `${baseUrl()}/share/${id}`;
  } else {
    linkBox.style.display = 'none';
  }
  document.getElementById('shareModal').style.display = 'flex';
}

document.getElementById('shareCloseBtn').addEventListener('click', () => {
  document.getElementById('shareModal').style.display = 'none';
});

document.getElementById('shareEnableBtn').addEventListener('click', async () => {
  const pw = document.getElementById('sharePw').value;
  const errBox = document.getElementById('shareErr');
  errBox.innerHTML = '';
  const res = await fetch(`/api/friends/${shareTargetId}/share`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ enabled: true, password: pw }),
  });
  const data = await res.json();
  if (!res.ok) {
    errBox.innerHTML = `<p class="error-msg">${data.error}</p>`;
    return;
  }
  document.getElementById('shareLinkBox').style.display = 'block';
  document.getElementById('shareLinkInput').value = `${baseUrl()}/share/${shareTargetId}`;
  await loadFriends();
});

document.getElementById('shareDisableBtn').addEventListener('click', async () => {
  const res = await fetch(`/api/friends/${shareTargetId}/share`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ enabled: false }),
  });
  if (res.ok) {
    document.getElementById('shareLinkBox').style.display = 'none';
    await loadFriends();
  }
});

document.getElementById('copyLinkBtn').addEventListener('click', () => {
  const input = document.getElementById('shareLinkInput');
  input.select();
  navigator.clipboard.writeText(input.value).catch(() => {});
});

document.getElementById('logoutBtn').addEventListener('click', async () => {
  await fetch('/api/logout', { method: 'POST' });
  window.location.href = '/';
});

// --- Sichern & Wiederherstellen ---
function showTransferMsg(text, isError) {
  const box = document.getElementById('transferMsg');
  box.innerHTML = isError ? `<p class="error-msg">${text}</p>` : `<p class="saved-msg2 show">${text}</p>`;
}

document.getElementById('bookExportBtn').addEventListener('click', () => {
  window.location.href = '/api/book/export';
});

document.getElementById('bookImportBtn').addEventListener('click', async () => {
  const fileInput = document.getElementById('bookImportFile');
  const file = fileInput.files[0];
  if (!file) { showTransferMsg('Bitte zuerst eine ZIP-Datei auswählen.', true); return; }
  const replaceAll = document.getElementById('bookImportReplace').checked;
  if (replaceAll && !confirm('Wirklich ALLE bestehenden Freunde vor dem Import löschen?')) return;

  const fd = new FormData();
  fd.append('file', file);
  fd.append('replaceAll', replaceAll ? 'true' : 'false');
  showTransferMsg('Importiere...', false);
  const res = await fetch('/api/book/import', { method: 'POST', body: fd });
  const data = await res.json();
  if (res.ok) {
    showTransferMsg(`${data.imported.length} Freund(e) importiert: ${data.imported.join(', ') || '–'}`, false);
    fileInput.value = '';
    loadFriends();
  } else {
    showTransferMsg(data.error || 'Import fehlgeschlagen.', true);
  }
});

document.getElementById('friendImportBtn').addEventListener('click', async () => {
  const fileInput = document.getElementById('friendImportFile');
  const file = fileInput.files[0];
  if (!file) { showTransferMsg('Bitte zuerst eine ZIP-Datei auswählen.', true); return; }
  const fd = new FormData();
  fd.append('file', file);
  showTransferMsg('Importiere...', false);
  const res = await fetch('/api/friends/import', { method: 'POST', body: fd });
  const data = await res.json();
  if (res.ok) {
    showTransferMsg(`"${data.friend.name}" wurde importiert.`, false);
    fileInput.value = '';
    loadFriends();
  } else {
    showTransferMsg(data.error || 'Import fehlgeschlagen.', true);
  }
});

checkSession();
loadSettings();
loadFriends();