ghostguild-org/app/pages/member/dashboard.vue

<template>
  <div>
    <!-- Page Header -->
    <PageHeader
      title="Member Dashboard"
      :subtitle="`Welcome back, ${memberData?.name || 'Member'}!`"
      theme="blue"
      size="medium"
    />

    <UContainer class="">
      <!-- Loading State -->
      <div
        v-if="!memberData || authPending"
        class="flex justify-center items-center py-20"
      >
        <div class="text-center">
          <div
            class="w-8 h-8 border-4 border-whisper-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
          />
          <p class="text-ghost-300">Loading your dashboard...</p>
        </div>
      </div>

      <!-- Dashboard Content -->
      <div v-else class="space-y-8">
        <!-- Welcome Card -->
        <UCard
          class="sparkle-field"
          :ui="{
            root: 'bg-ghost-900 border border-ghost-700',
            header: 'border-b border-ghost-700',
            body: 'bg-ghost-900',
          }"
        >
          <template #header>
            <div class="flex items-start justify-between gap-4">
              <div class="flex-1">
                <h1 class="text-2xl font-bold text-ghost-100 ethereal-text">
                  Welcome to Ghost Guild, {{ memberData?.name }}!
                </h1>
                <p class="text-ghost-300 mt-2">Your membership is active!</p>
              </div>
              <div class="flex-shrink-0" v-if="memberData?.avatar">
                <img
                  :src="`/ghosties/Ghost-${capitalize(memberData.avatar)}.png`"
                  :alt="memberData.name"
                  class="w-16 h-16"
                />
              </div>
              <div v-else class="flex-shrink-0">
                <div
                  class="w-16 h-16 bg-ghost-700 border border-ghost-600 flex items-center justify-center text-ghost-200 font-bold text-xl"
                >
                  {{ memberData?.name?.charAt(0)?.toUpperCase() }}
                </div>
              </div>
            </div>
          </template>

          <div class="flex flex-wrap gap-4 text-sm">
            <div class="bg-ghost-800 border border-ghost-600 px-4 py-2">
              <span class="text-ghost-200">Circle:</span>
              <span class="font-medium text-stone-50 ml-1 capitalize">{{
                memberData?.circle
              }}</span>
            </div>
            <div class="bg-ghost-800 border border-ghost-600 px-4 py-2">
              <span class="text-ghost-200">Contribution:</span>
              <span class="font-medium text-stone-50 ml-1"
                >${{ memberData?.contributionTier }} CAD/month</span
              >
            </div>
          </div>
        </UCard>

        <!-- Quick Links -->
        <UCard
          :ui="{
            root: 'bg-ghost-900 border border-ghost-700',
            header: 'border-b border-ghost-700 bg-ghost-900',
            body: 'bg-ghost-900',
          }"
        >
          <template #header>
            <h2 class="text-xl font-bold text-ghost-100 ethereal-text">
              Quick Links
            </h2>
          </template>

          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
            <UButton
              to="/members?peerSupport=true"
              variant="outline"
              class="border-ghost-600 text-ghost-200 hover:bg-ghost-800 hover:border-whisper-500 justify-start"
              block
            >
              Book a Peer Session
            </UButton>

            <UButton
              disabled
              variant="outline"
              class="border-ghost-600 text-ghost-500 cursor-not-allowed justify-start"
              block
              title="Coming soon"
            >
              Browse Resources
            </UButton>

            <UButton
              to="/member/profile"
              variant="outline"
              class="border-ghost-600 text-ghost-200 hover:bg-ghost-800 hover:border-whisper-500 justify-start"
              block
            >
              Update Profile
            </UButton>

            <UButton
              to="/events"
              variant="outline"
              class="border-ghost-600 text-ghost-200 hover:bg-ghost-800 hover:border-whisper-500 justify-start"
              block
            >
              View Events
            </UButton>

            <UButton
              to="/members"
              variant="outline"
              class="border-ghost-600 text-ghost-200 hover:bg-ghost-800 hover:border-whisper-500 justify-start"
              block
            >
              Browse Members
            </UButton>

            <UButton
              to="/member/profile#account"
              variant="outline"
              class="border-ghost-600 text-ghost-200 hover:bg-ghost-800 hover:border-whisper-500 justify-start"
              block
            >
              Manage Account
            </UButton>
          </div>
        </UCard>

        <!-- Your Registered Events -->
        <UCard
          :ui="{
            root: 'bg-ghost-900 border border-ghost-700',
            header: 'border-b border-ghost-700 bg-ghost-900',
            body: 'bg-ghost-900',
          }"
        >
          <template #header>
            <div class="flex items-center justify-between">
              <h2 class="text-xl font-bold text-ghost-100 ethereal-text">
                Your Upcoming Events
              </h2>
              <div class="flex items-center gap-2">
                <UButton
                  v-if="registeredEvents.length > 0"
                  @click="copyCalendarLink"
                  variant="ghost"
                  size="sm"
                  class="text-ghost-300 hover:text-ghost-100"
                  icon="heroicons:calendar"
                >
                  {{
                    calendarLinkCopied ? "Link Copied!" : "Get Calendar Link"
                  }}
                </UButton>
                <UButton
                  to="/events"
                  variant="ghost"
                  size="sm"
                  class="text-ghost-300 hover:text-ghost-100"
                >
                  Browse All Events
                </UButton>
              </div>
            </div>
          </template>

          <div v-if="loadingEvents" class="text-center py-8">
            <div
              class="w-6 h-6 border-2 border-whisper-500 border-t-transparent rounded-full animate-spin mx-auto"
            ></div>
          </div>

          <div v-else-if="registeredEvents.length" class="space-y-4">
            <NuxtLink
              v-for="evt in registeredEvents"
              :key="evt._id"
              :to="`/events/${evt.slug || evt._id}`"
              class="block p-4 border border-ghost-700 hover:border-whisper-500 transition-colors"
            >
              <div class="flex items-start gap-4">
                <div
                  v-if="
                    evt.featureImage &&
                    (evt.featureImage.publicId || evt.featureImage.url)
                  "
                  class="flex-shrink-0 w-20 h-20 overflow-hidden"
                >
                  <img
                    :src="getEventImageUrl(evt.featureImage)"
                    :alt="evt.title"
                    class="w-full h-full object-cover"
                  />
                </div>
                <div
                  v-else
                  class="flex-shrink-0 w-20 h-20 bg-ghost-800 border border-ghost-600 flex items-center justify-center"
                >
                  <Icon
                    name="heroicons:calendar-days"
                    class="w-8 h-8 text-whisper-400"
                  />
                </div>
                <div class="flex-1 min-w-0">
                  <h3 class="font-semibold text-ghost-100 mb-1">
                    {{ evt.title }}
                  </h3>
                  <div class="flex items-center gap-4 text-sm text-ghost-400">
                    <span class="flex items-center gap-1">
                      <Icon name="heroicons:calendar" class="w-4 h-4" />
                      {{ formatEventDate(evt.startDate) }}
                    </span>
                    <span class="flex items-center gap-1">
                      <Icon name="heroicons:clock" class="w-4 h-4" />
                      {{ formatEventTime(evt.startDate) }}
                    </span>
                  </div>
                </div>
                <div class="flex-shrink-0">
                  <Icon
                    name="heroicons:chevron-right"
                    class="w-5 h-5 text-ghost-500"
                  />
                </div>
              </div>
            </NuxtLink>
          </div>

          <div v-else class="text-center py-8">
            <Icon
              name="heroicons:calendar-days"
              class="w-12 h-12 text-ghost-600 mx-auto mb-3"
            />
            <p class="text-ghost-400 mb-4">
              You haven't registered for any upcoming events
            </p>
            <UButton
              to="/events"
              size="sm"
              class="border-ghost-600 text-ghost-200 hover:bg-ghost-800 hover:border-whisper-500"
            >
              Browse Events
            </UButton>
          </div>

          <!-- Calendar subscription instructions -->
          <div
            v-if="registeredEvents.length > 0 && showCalendarInstructions"
            class="mt-4 p-4 bg-ghost-800 border border-ghost-600"
          >
            <div class="flex items-start justify-between gap-4">
              <div class="flex-1">
                <h4 class="text-sm font-semibold text-ghost-100 mb-2">
                  How to Subscribe to Your Calendar
                </h4>
                <ul
                  class="text-xs text-ghost-300 space-y-1 list-disc list-inside"
                >
                  <li>
                    <strong>Google Calendar:</strong> Click "+" → "From URL" →
                    Paste the link
                  </li>
                  <li>
                    <strong>Apple Calendar:</strong> File → New Calendar
                    Subscription → Paste the link
                  </li>
                  <li>
                    <strong>Outlook:</strong> Add Calendar → Subscribe from web
                    → Paste the link
                  </li>
                </ul>
                <p class="text-xs text-ghost-400 mt-2">
                  Your calendar will automatically update when you register or
                  unregister from events.
                </p>
              </div>
              <button
                @click="showCalendarInstructions = false"
                class="text-ghost-400 hover:text-ghost-200"
              >
                <Icon name="heroicons:x-mark" class="w-5 h-5" />
              </button>
            </div>
          </div>
        </UCard>
      </div>
    </UContainer>
  </div>
</template>

<script setup>
const { memberData, checkMemberStatus } = useAuth();

const registeredEvents = ref([]);
const loadingEvents = ref(false);
const calendarLinkCopied = ref(false);
const showCalendarInstructions = ref(false);

// Calendar subscription URL
const calendarUrl = computed(() => {
  const memberId = memberData.value?._id || memberData.value?.id;
  if (!memberId) return "";
  const config = useRuntimeConfig();
  const baseUrl = config.public.appUrl || "http://localhost:3000";
  // Use webcal protocol for calendar subscription
  const webcalUrl = baseUrl.replace(/^https?:/, "webcal:");
  return `${webcalUrl}/api/members/my-calendar?memberId=${memberId}`;
});

// Copy calendar subscription link to clipboard
const copyCalendarLink = async () => {
  try {
    await navigator.clipboard.writeText(calendarUrl.value);
    calendarLinkCopied.value = true;
    showCalendarInstructions.value = true;
    setTimeout(() => {
      calendarLinkCopied.value = false;
    }, 2000);
  } catch (err) {
    console.error("Failed to copy calendar link:", err);
  }
};

// Handle authentication check on page load
const { pending: authPending } = await useLazyAsyncData(
  "dashboard-auth",
  async () => {
    // Only check authentication on client side
    if (process.server) return null;

    console.log(
      "📊 Dashboard auth check - memberData exists:",
      !!memberData.value,
    );

    // If no member data, try to authenticate
    if (!memberData.value) {
      console.log("  - No member data, checking authentication...");
      const isAuthenticated = await checkMemberStatus();
      console.log("  - Auth result:", isAuthenticated);

      if (!isAuthenticated) {
        console.log("  - Redirecting to login");
        await navigateTo("/login");
        return null;
      }
    }

    console.log("  - ✅ Dashboard auth successful");
    return memberData.value;
  },
);

// Load registered events
const loadRegisteredEvents = async () => {
  console.log(
    "🔍 memberData.value:",
    JSON.stringify(memberData.value, null, 2),
  );
  console.log("🔍 memberData.value._id:", memberData.value?._id);
  console.log("🔍 memberData.value.id:", memberData.value?.id);

  const memberId = memberData.value?._id || memberData.value?.id;

  if (!memberId) {
    console.log("❌ No member ID available");
    return;
  }

  console.log("📅 Loading events for member:", memberId);
  loadingEvents.value = true;
  try {
    const response = await $fetch("/api/members/my-events", {
      params: { memberId },
    });
    console.log("📅 Events response:", response);
    registeredEvents.value = response.events;
  } catch (error) {
    console.error("Failed to load registered events:", error);
  } finally {
    loadingEvents.value = false;
  }
};

// Valid ghost avatar options
const validAvatars = [
  "disbelieving",
  "double-take",
  "exasperated",
  "mild",
  "sweet",
];

const isValidAvatar = (avatar) => {
  if (!avatar) return false;
  return validAvatars.includes(avatar.toLowerCase());
};

const capitalize = (str) => {
  if (!str) return "";
  // Handle kebab-case or multi-word avatars (e.g., "double-take" -> "Double-Take")
  return str
    .split("-")
    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
    .join("-");
};

// Helper functions for event display
const getEventImageUrl = (featureImage) => {
  if (!featureImage) return "";

  if (featureImage.url) {
    return featureImage.url;
  }

  if (featureImage.publicId) {
    const config = useRuntimeConfig();
    return `https://res.cloudinary.com/${config.public.cloudinaryCloudName}/image/upload/w_200,h_200,c_fill,f_auto,q_auto/${featureImage.publicId}`;
  }

  return "";
};

const formatEventDate = (dateString) => {
  const date = new Date(dateString);
  return new Intl.DateTimeFormat("en-US", {
    month: "short",
    day: "numeric",
    year: "numeric",
  }).format(date);
};

const formatEventTime = (dateString) => {
  const date = new Date(dateString);
  return new Intl.DateTimeFormat("en-US", {
    hour: "numeric",
    minute: "2-digit",
  }).format(date);
};

onMounted(() => {
  loadRegisteredEvents();
});

// Set page meta
useHead({
  title: "Member Dashboard - Ghost Guild",
});

// Removed middleware - handling auth directly in the page component
</script>