// Universal read-only viewer:
//   /share/:token        -> fetch /api/shared/:token   (secret link)
//   /share?idea=:id      -> fetch /api/public/ideas/:id (public Explore item)
function resolveEndpoint() {
  const parts = location.pathname.split("/").filter(Boolean); // ["share", token?]
  if (parts.length >= 2) return `/api/shared/${encodeURIComponent(parts[1])}`;
  const id = new URLSearchParams(location.search).get("idea");
  if (id) return `/api/public/ideas/${encodeURIComponent(id)}`;
  return null;
}

async function load() {
  const root = $("#share-root");
  const endpoint = resolveEndpoint();
  if (!endpoint) {
    root.innerHTML =
      '<div class="empty"><span class="big">🤔</span>No idea specified.</div>';
    return;
  }

  try {
    const idea = await api.req("GET", endpoint);
    const isPublic = idea.visibility === "public";
    root.innerHTML = `
      <div class="read-only-banner">
        👁️ You're viewing a read-only ${
          isPublic ? "public" : "shared"
        } idea${idea.author_name ? ` by <strong>${escapeHtml(idea.author_name)}</strong>` : ""}.
      </div>
      <div class="panel">
        <div class="detail-head">
          <h2>${escapeHtml(idea.title)}</h2>
          <span class="vis-badge ${idea.visibility}">${
      isPublic ? "🌐 Public" : "🔒 Shared"
    }</span>
        </div>
        ${
          idea.description
            ? `<p class="detail-desc">${escapeHtml(idea.description)}</p>`
            : ""
        }
        <div class="detail-meta">Created ${fullTime(idea.created_at)}</div>
        <div class="divider"></div>
        <h2 style="font-size:1.05rem;margin-bottom:4px">Notes</h2>
        <div id="notes-container"></div>
      </div>
    `;
    renderNotesInto($("#notes-container"), idea.notes || []);
  } catch (e) {
    root.innerHTML = `<div class="empty"><span class="big">🔒</span>${
      e.status === 404
        ? "This idea doesn't exist, is private, or the link was disabled."
        : escapeHtml(e.message)
    }</div>`;
  }
}
load();