<script setup lang="ts">
// Renders the four add-to-calendar buttons (Google, Outlook, Apple/iCalendar,
// Other). Tier 2 Block B.
//
// Apple Calendar has no web-deeplink — it imports .ics files directly from the
// device. So Apple and "Other" both point at the .ics download URL; the only
// difference is the label so a desktop guest knows which to click.
const props = defineProps<{
  links: {
    google: string
    outlook: string
    yahoo: string
    ics: string
  }
  token: string
}>()

// The backend embeds a fully-qualified ics URL built from GG_PUBLIC_BASE_URL,
// which in production points at the same origin as the API (ingress). In
// dev the public base is the Nuxt frontend (port 3000) — that origin has no
// /access/.../calendar.ics route, so clicking would 404. We always
// reconstruct against runtimeConfig.apiBase, which is the host that
// actually serves the .ics endpoint regardless of deployment topology.
const config = useRuntimeConfig()
const icsHref = computed(() => {
  const base = (config.public.apiBase as string) || ''
  return `${base}/access/${props.token}/calendar.ics`
})
</script>

<template>
  <section aria-label="Add this event to your calendar">
    <p class="mb-3 text-xs font-medium uppercase tracking-widest text-brand-500">
      Add to calendar
    </p>
    <div class="grid grid-cols-2 gap-2 sm:grid-cols-4">
      <!-- Google: opens the prefilled event in a new tab. -->
      <a
        :href="links.google"
        target="_blank"
        rel="noopener noreferrer"
        class="flex items-center justify-center gap-1.5 rounded-md border border-zinc-700 bg-zinc-950 px-3 py-2 text-xs font-medium text-zinc-200 transition hover:border-brand-600 hover:bg-brand-500/10 hover:text-brand-200"
      >
        <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path d="M5 4a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H8V3a1 1 0 00-2 0v1H5zm0 5a1 1 0 011-1h8a1 1 0 011 1v6a1 1 0 01-1 1H6a1 1 0 01-1-1V9z" />
        </svg>
        Google
      </a>

      <!-- Outlook web: same idea, different domain. -->
      <a
        :href="links.outlook"
        target="_blank"
        rel="noopener noreferrer"
        class="flex items-center justify-center gap-1.5 rounded-md border border-zinc-700 bg-zinc-950 px-3 py-2 text-xs font-medium text-zinc-200 transition hover:border-brand-600 hover:bg-brand-500/10 hover:text-brand-200"
      >
        <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M3 4a2 2 0 012-2h10a2 2 0 012 2v12a2 2 0 01-2 2H5a2 2 0 01-2-2V4zm3 5a1 1 0 011-1h6a1 1 0 010 2H7a1 1 0 01-1-1zm0 4a1 1 0 011-1h4a1 1 0 010 2H7a1 1 0 01-1-1z" clip-rule="evenodd" />
        </svg>
        Outlook
      </a>

      <!-- Apple Calendar imports .ics from the file system; pointing at the
           download triggers the OS handler on macOS/iOS. -->
      <a
        :href="icsHref"
        class="flex items-center justify-center gap-1.5 rounded-md border border-zinc-700 bg-zinc-950 px-3 py-2 text-xs font-medium text-zinc-200 transition hover:border-brand-600 hover:bg-brand-500/10 hover:text-brand-200"
      >
        <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path d="M10 2a4 4 0 00-3.464 6.001A6 6 0 002 14a2 2 0 002 2h12a2 2 0 002-2 6 6 0 00-4.536-5.999A4 4 0 0010 2z" />
        </svg>
        Apple
      </a>

      <!-- Catch-all .ics for everything that isn't a hosted web calendar. -->
      <a
        :href="icsHref"
        class="flex items-center justify-center gap-1.5 rounded-md border border-zinc-700 bg-zinc-950 px-3 py-2 text-xs font-medium text-zinc-200 transition hover:border-brand-600 hover:bg-brand-500/10 hover:text-brand-200"
      >
        <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM6.293 6.707a1 1 0 010-1.414l3-3a1 1 0 011.414 0l3 3a1 1 0 01-1.414 1.414L11 5.414V13a1 1 0 11-2 0V5.414L7.707 6.707a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        </svg>
        Other (.ics)
      </a>
    </div>
  </section>
</template>
