<template>
  <div class="member-dashboard">
    <!-- Enhanced Glass Header -->
    <div class="dashboard-header glass-header mb-6">
      <h1 class="dashboard-title text-gradient">
        Welcome back, {{ firstName }}!
      </h1>
      <p class="dashboard-subtitle">
        Member Dashboard
      </p>
      <div class="text-center">
        <v-chip class="glass-badge mt-2">
          <v-icon start>mdi-account-circle</v-icon>
          Member
        </v-chip>
      </div>
    </div>

    <!-- Bento Grid Layout -->
    <div class="bento-grid mb-6">
      <!-- Profile Card -->
      <div class="bento-item bento-item--medium">
        <div class="glass-card animated-entrance">
          <SimpleProfileCard 
            :member="memberData"
            :email-verified="emailVerified"
            @edit-profile="navigateTo('/member/profile')"
          />
        </div>
      </div>

      <!-- Events Card -->
      <div class="bento-item bento-item--xlarge">
        <div class="glass-card animated-entrance" style="animation-delay: 0.1s;">
          <EventsCard 
            :events="upcomingEvents"
            @view-all="navigateTo('/member/events')"
          />
        </div>
      </div>
    </div>

    <!-- Activity Timeline with Glass Effect -->
    <div class="bento-grid">
      <div class="bento-item bento-item--full">
        <div class="glass-card animated-entrance" style="animation-delay: 0.2s;">
          <div class="card-header">
            <v-icon class="mr-2" color="primary">mdi-history</v-icon>
            <h2 class="card-title text-gradient">Recent Activity</h2>
          </div>
          <ActivityTimeline 
            :activities="filteredActivities"
            :max-items="10"
          />
        </div>
      </div>
    </div>


  </div>
</template>

<script setup lang="ts">
import type { Member } from '~/utils/types';
import SimpleProfileCard from '~/components/dashboard/SimpleProfileCard.vue';
import ActivityTimeline from '~/components/dashboard/ActivityTimeline.vue';
import EventsCard from '~/components/dashboard/EventsCard.vue';

definePageMeta({
  layout: 'member',
  middleware: 'member'
});

const { user } = useAuth();

// Fetch member data
const { data: sessionData } = await useFetch<{ success: boolean; member: Member | null }>('/api/auth/session', { 
  server: false
});

const memberData = computed<Member | null>(() => sessionData.value?.member || null);

// Computed properties
const firstName = computed(() => memberData.value?.first_name || user.value?.firstName || 'Member');
const fullName = computed(() => {
  if (memberData.value) {
    return `${memberData.value.first_name} ${memberData.value.last_name}`;
  }
  return user.value?.name || 'Member';
});
const email = computed(() => memberData.value?.email || user.value?.email || '');
const emailVerified = computed(() => {
  // Check if email is verified (you can add actual verification logic here)
  return true;
});


// Mock data - replace with actual API calls
const upcomingEvents = ref([
  {
    id: "1",
    title: "Monthly Networking Event",
    date: "2024-01-15",
    time: "6:00 PM",
    location: "Conference Center",
    status: "confirmed"
  },
  {
    id: "2",
    title: "Workshop: Digital Marketing",
    date: "2024-01-22",
    time: "2:00 PM",
    location: "Training Room A",
    status: "pending"
  },
  {
    id: "3",
    title: "Annual Gala Dinner",
    date: "2024-02-05",
    time: "7:00 PM",
    location: "Grand Ballroom",
    status: "confirmed"
  }
]);


const recentActivity = ref([
  {
    id: "1",
    type: "event",
    description: "Registered for Monthly Networking Event",
    timestamp: "2 days ago",
    icon: "mdi-calendar-check",
    color: "error"
  },
  {
    id: "2",
    type: "profile",
    description: "Updated profile information",
    timestamp: "1 week ago",
    icon: "mdi-account",
    color: "info"
  },
  {
    id: "3",
    type: "event",
    description: "Attended Workshop: Digital Marketing",
    timestamp: "2 weeks ago",
    icon: "mdi-account-group",
    color: "error"
  }
]);

// Filter activities to exclude payment and achievement types
const filteredActivities = computed(() => {
  return recentActivity.value
    .filter(activity => activity.type === 'event' || activity.type === 'profile')
    .map(activity => ({
      ...activity,
      title: activity.description.split(' ').slice(0, 3).join(' '),
      description: activity.description
    }));
});


// Helper functions
const formatDate = (dateString: string) => {
  return new Date(dateString).toLocaleDateString('en-US', { 
    month: 'short', 
    day: 'numeric', 
    year: 'numeric' 
  });
};

// Load real data on mount
onMounted(async () => {
  // Load upcoming events
  try {
    const eventsRes = await $fetch('/api/member/events/upcoming');
    if (eventsRes?.success && eventsRes?.data) {
      // Map real events data
      console.log('Loaded upcoming events:', eventsRes.data);
    }
  } catch (error) {
    console.error('Error loading events:', error);
  }

});
</script>

<style scoped lang="scss">
.member-dashboard {
  padding: 1rem;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f5f5 0%, #fafafa 100%);
}

/* Enhanced Glass Header */
.dashboard-header {
  margin-bottom: 2rem;
  padding: 2rem;
  border-radius: 20px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.85)
  );
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 
    0 8px 32px 0 rgba(31, 38, 135, 0.15),
    inset 0 1px 2px rgba(255, 255, 255, 0.6);
  animation: slide-up 0.6s ease-out;
  text-align: center;
}

.header-content {
  flex: 1;
}

.dashboard-title {
  font-size: 2.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5rem;
  animation: fade-in 0.8s ease-out;
}

.dashboard-subtitle {
  color: #71717a;
  font-size: 1.1rem;
}

.glass-badge {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: white !important;
  font-weight: 600;
}

.text-gradient {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.header-actions {
  display: flex;
  gap: 1rem;
}

.notification-btn {
  text-transform: none;
  font-weight: 500;
}

.dashboard-grid {
  margin-bottom: 3rem;
}

/* Bento Grid Layout */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
  
  .bento-item {
    border-radius: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    &--small { grid-column: span 3; }
    &--medium { grid-column: span 4; }
    &--large { grid-column: span 6; }
    &--xlarge { grid-column: span 8; }
    &--full { grid-column: span 12; }
    
    &:hover {
      transform: translateY(-4px);
    }
  }
}

/* Enhanced Glass Card */
.glass-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.85),
    rgba(255, 255, 255, 0.75)
  ) !important;
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 
    0 8px 32px 0 rgba(31, 38, 135, 0.15),
    inset 0 1px 2px rgba(255, 255, 255, 0.6),
    inset 0 -1px 2px rgba(0, 0, 0, 0.05) !important;
  border-radius: 20px !important;
  padding: 1.5rem;
  height: 100%;
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: 
      0 12px 40px 0 rgba(31, 38, 135, 0.25),
      inset 0 1px 2px rgba(255, 255, 255, 0.8),
      inset 0 -1px 2px rgba(0, 0, 0, 0.05) !important;
  }
}

.card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(220, 38, 38, 0.1);
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.quick-actions-section {
  margin-top: 2rem;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: rgb(31, 41, 55);
  margin-bottom: 1.5rem;
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  
  @media (max-width: 640px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

/* Animated Entrance */
.animated-entrance {
  animation: slide-up 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Button Enhancements */
.v-btn {
  text-transform: none !important;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
  }
}

/* Responsive Design */
@media (max-width: 1280px) {
  .bento-grid {
    .bento-item--xlarge {
      grid-column: span 12;
    }
    .bento-item--large {
      grid-column: span 6;
    }
    .bento-item--medium {
      grid-column: span 6;
    }
  }
}

@media (max-width: 960px) {
  .bento-grid {
    .bento-item--large {
      grid-column: span 12;
    }
    .bento-item--medium {
      grid-column: span 12;
    }
  }
}
</style>
