---
import { GITHUB_URL } from '../data/site';
---

<!-- Star nudge toast — shown every 5 copies -->
<div
  id="star-toast"
  role="status"
  aria-live="polite"
  class="fixed bottom-6 right-6 z-50 hidden max-w-sm w-full"
>
  <div class="flex items-center gap-3 bg-brand rounded-xl shadow-xl px-4 py-3">
    <svg class="w-4 h-4 text-white/80 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
    </svg>
    <p class="flex-1 text-sm text-white">
      Useful? <a
        href={GITHUB_URL}
        target="_blank"
        rel="noopener noreferrer"
        class="font-semibold underline underline-offset-2 hover:no-underline transition-all"
      >Star on GitHub</a> — it helps others discover it.
    </p>
    <button
      id="star-toast-close"
      aria-label="Dismiss"
      class="flex-shrink-0 text-white/60 hover:text-white transition-colors"
    >
      <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>
  </div>
</div>

<script>
  const COPY_COUNT_KEY = 'gh_star_copy_count';
  const SHOW_EVERY = 5;
  const IDLE_MS = 10 * 60 * 1000; // 10 minutes

  const toast = document.getElementById('star-toast');
  const closeBtn = document.getElementById('star-toast-close');
  let autoHideTimer: ReturnType<typeof setTimeout> | null = null;
  let idleTimer: ReturnType<typeof setTimeout> | null = null;

  function displayToast() {
    if (!toast) return;
    if (autoHideTimer) clearTimeout(autoHideTimer);
    toast.classList.remove('hidden');
    autoHideTimer = setTimeout(hideToast, 15000);
  }

  function hideToast() {
    toast?.classList.add('hidden');
    if (autoHideTimer) { clearTimeout(autoHideTimer); autoHideTimer = null; }
  }

  function resetIdleTimer() {
    if (idleTimer) clearTimeout(idleTimer);
    idleTimer = setTimeout(displayToast, IDLE_MS);
  }

  function onCopy() {
    // Increment counter and show every 5th copy
    const count = (parseInt(sessionStorage.getItem(COPY_COUNT_KEY) ?? '0', 10) || 0) + 1;
    sessionStorage.setItem(COPY_COUNT_KEY, String(count));
    if (count % SHOW_EVERY === 0) displayToast();

    // Reset the idle timer on each copy
    resetIdleTimer();
  }

  closeBtn?.addEventListener('click', hideToast);
  window.addEventListener('copy-success', onCopy);

  // Start idle timer on page load
  resetIdleTimer();
</script>