---
import Base from '../../layouts/Base.astro';
---
<Base title="Invites — Bincio">
  <div class="max-w-lg mx-auto mt-12 px-4">
    <div class="flex items-center justify-between mb-4">
      <h1 class="text-2xl font-bold text-white">Your invites</h1>
      <button id="gen-btn"
        class="px-4 py-2 rounded-lg bg-[--accent] hover:opacity-90 text-white text-sm font-medium transition-opacity">
        Generate invite
      </button>
    </div>

    <!-- Activity toggle: only shown for users who have activity_access -->
    <div id="activity-toggle-row" style="display:none" class="mb-6">
      <label class="flex items-center gap-2 cursor-pointer select-none group">
        <input id="grants-activity" type="checkbox"
          class="w-4 h-4 rounded accent-[--accent] cursor-pointer" />
        <span class="text-sm text-zinc-400 group-hover:text-zinc-300 transition-colors">
          Include activity access
        </span>
        <span class="text-xs text-zinc-600">(wiki + activity)</span>
      </label>
    </div>

    <p id="invite-error" class="text-red-400 text-sm mb-4 hidden"></p>

    <ul id="invite-list" class="space-y-3">
      <li class="text-zinc-500 text-sm">Loading…</li>
    </ul>
  </div>
</Base>

<script>
  const listEl         = document.getElementById('invite-list')!;
  const errEl          = document.getElementById('invite-error')!;
  const toggleRow      = document.getElementById('activity-toggle-row') as HTMLElement;
  const grantsActivityChk = document.getElementById('grants-activity') as HTMLInputElement;

  type Invite = {
    code: string;
    used: boolean;
    used_by: string | null;
    created_at: number;
    grants_activity: boolean;
  };

  function renderInvite(inv: Invite) {
    const li = document.createElement('li');
    li.className = 'flex items-center justify-between rounded-xl bg-zinc-900 border border-zinc-800 px-4 py-3';

    const date = new Date(inv.created_at * 1000).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' });
    const registerUrl = `${window.location.origin}/register/?code=${inv.code}`;
    const badge = inv.grants_activity
      ? `<span class="text-xs px-2 py-0.5 rounded-full bg-zinc-800 text-zinc-400 border border-zinc-700">wiki + activity</span>`
      : `<span class="text-xs px-2 py-0.5 rounded-full bg-zinc-800 text-zinc-600 border border-zinc-700">wiki only</span>`;

    li.innerHTML = `
      <div class="flex-1 min-w-0">
        <div class="flex items-center gap-2 flex-wrap">
          <span class="font-mono text-lg tracking-widest ${inv.used ? 'text-zinc-600 line-through' : 'text-white'}">${inv.code}</span>
          ${badge}
        </div>
        <p class="text-xs text-zinc-500 mt-0.5">
          ${inv.used ? `Used by @${inv.used_by}` : `Created ${date}`}
        </p>
      </div>
      ${!inv.used ? `
        <button data-link="${registerUrl}"
          class="copy-btn ml-3 shrink-0 text-xs px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-300 transition-colors">
          Copy link
        </button>
      ` : ''}
    `;
    return li;
  }

  function fallbackCopy(text: string, done: () => void) {
    const ta = document.createElement('textarea');
    ta.value = text;
    ta.style.cssText = 'position:fixed;opacity:0;top:0;left:0';
    document.body.appendChild(ta);
    ta.focus();
    ta.select();
    try { document.execCommand('copy'); done(); } catch (_) {}
    document.body.removeChild(ta);
  }

  async function loadInvites() {
    try {
      const r = await fetch('/api/invites', { credentials: 'include' });
      if (r.status === 401) {
        window.location.href = `/login/?next=${encodeURIComponent(window.location.pathname)}`;
        return;
      }
      if (!r.ok) throw new Error(`HTTP ${r.status}`);
      const invites: Invite[] = await r.json();
      listEl.innerHTML = '';
      if (invites.length === 0) {
        listEl.innerHTML = '<li class="text-zinc-500 text-sm">No invites yet.</li>';
        return;
      }
      for (const inv of invites) listEl.appendChild(renderInvite(inv));

      listEl.querySelectorAll('.copy-btn').forEach(btn => {
        btn.addEventListener('click', () => {
          const text = (btn as HTMLElement).dataset.link ?? '';
          const done = () => {
            btn.textContent = 'Copied!';
            setTimeout(() => { btn.textContent = 'Copy link'; }, 2000);
          };
          if (navigator.clipboard) {
            navigator.clipboard.writeText(text).then(done).catch(() => fallbackCopy(text, done));
          } else {
            fallbackCopy(text, done);
          }
        });
      });
    } catch (e: any) {
      errEl.textContent = e.message;
      errEl.classList.remove('hidden');
    }
  }

  // Show activity toggle only for users who have activity access
  fetch('/api/me', { credentials: 'include' })
    .then(async r => {
      if (!r.ok) return;
      const user = await r.json();
      if (user.activity_access) toggleRow.style.display = '';
    })
    .catch(() => {});

  document.getElementById('gen-btn')?.addEventListener('click', async () => {
    errEl.classList.add('hidden');
    const grantsActivity = grantsActivityChk?.checked ?? false;
    try {
      const r = await fetch('/api/invites', {
        method: 'POST',
        credentials: 'include',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ grants_activity: grantsActivity }),
      });
      if (!r.ok) {
        const d = await r.json().catch(() => ({}));
        errEl.textContent = d.detail ?? 'Could not generate invite';
        errEl.classList.remove('hidden');
        return;
      }
      await loadInvites();
    } catch (e: any) {
      errEl.textContent = e.message;
      errEl.classList.remove('hidden');
    }
  });

  loadInvites();
</script>
