let friends = [];
let shareTargetId = null;

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

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="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));
  });
}

// 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 = `${window.location.origin}/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 = `${window.location.origin}/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 = '/';
});

checkSession();
loadFriends();