<template>
  <div class="dashboard-mockup">
    <!-- Header -->
    <header class="dashboard-header">
      <div class="dashboard-header__content">
        <h1 
          v-motion
          :initial="{ opacity: 0, x: -20 }"
          :enter="{ opacity: 1, x: 0 }"
          class="dashboard-header__title"
        >
          Welcome back, {{ userName }}
        </h1>
        <p 
          v-motion
          :initial="{ opacity: 0, x: -20 }"
          :enter="{ opacity: 1, x: 0, transition: { delay: 100 } }"
          class="dashboard-header__subtitle"
        >
          Here's what's happening with MonacoUSA today
        </p>
      </div>
      
      <div class="dashboard-header__actions">
        <MonacoButton variant="glass" icon="bell">
          Notifications
        </MonacoButton>
        <MonacoButton variant="primary" icon="plus">
          New Event
        </MonacoButton>
      </div>
    </header>

    <!-- Stats Grid -->
    <section class="dashboard-stats">
      <StatsCard
        v-for="(stat, index) in stats"
        :key="stat.label"
        :label="stat.label"
        :value="stat.value"
        :icon="stat.icon"
        :prefix="stat.prefix"
        :suffix="stat.suffix"
        :trend="stat.trend"
        :progress="stat.progress"
        :sparkline="stat.sparkline"
        :delay="index"
        variant="glass"
      />
    </section>

    <!-- Main Content Grid -->
    <div class="dashboard-grid">
      <!-- Recent Activity -->
      <GlassCard 
        title="Recent Activity" 
        variant="glass"
        :delay="400"
        class="dashboard-activity"
      >
        <div class="activity-list">
          <div 
            v-for="(activity, index) in recentActivities" 
            :key="index"
            v-motion
            :initial="{ opacity: 0, x: -20 }"
            :enter="{ 
              opacity: 1, 
              x: 0,
              transition: { delay: 500 + (index * 50) }
            }"
            class="activity-item"
          >
            <div class="activity-item__icon">
              <span :class="`activity-icon activity-icon--${activity.type}`">
                {{ activity.icon }}
              </span>
            </div>
            <div class="activity-item__content">
              <p class="activity-item__text">{{ activity.text }}</p>
              <span class="activity-item__time">{{ activity.time }}</span>
            </div>
          </div>
        </div>
      </GlassCard>

      <!-- Upcoming Events -->
      <GlassCard 
        title="Upcoming Events" 
        variant="glass"
        :delay="450"
        class="dashboard-events"
      >
        <div class="events-list">
          <div 
            v-for="(event, index) in upcomingEvents" 
            :key="index"
            v-motion
            :initial="{ opacity: 0, y: 20 }"
            :enter="{ 
              opacity: 1, 
              y: 0,
              transition: { delay: 550 + (index * 50) }
            }"
            class="event-card"
          >
            <div class="event-card__date">
              <span class="event-card__day">{{ event.day }}</span>
              <span class="event-card__month">{{ event.month }}</span>
            </div>
            <div class="event-card__content">
              <h4 class="event-card__title">{{ event.title }}</h4>
              <p class="event-card__location">{{ event.location }}</p>
              <div class="event-card__attendees">
                <span class="event-card__count">{{ event.attendees }} attending</span>
                <MonacoButton variant="ghost" size="sm">
                  View Details
                </MonacoButton>
              </div>
            </div>
          </div>
        </div>
      </GlassCard>

      <!-- Member Status -->
      <GlassCard 
        title="Member Status" 
        variant="gradient"
        :delay="500"
        class="dashboard-member-status"
      >
        <div class="member-status">
          <div class="member-status__badge">
            <span class="badge badge--active">Active Member</span>
          </div>
          <div class="member-status__info">
            <div class="status-item">
              <span class="status-item__label">Dues Status</span>
              <span class="status-item__value status-item__value--success">Paid</span>
            </div>
            <div class="status-item">
              <span class="status-item__label">Next Payment</span>
              <span class="status-item__value">January 2025</span>
            </div>
            <div class="status-item">
              <span class="status-item__label">Member Since</span>
              <span class="status-item__value">March 2023</span>
            </div>
          </div>
          <MonacoButton variant="primary" block>
            Manage Membership
          </MonacoButton>
        </div>
      </GlassCard>

      <!-- Quick Actions -->
      <GlassCard 
        title="Quick Actions" 
        variant="glass"
        :delay="550"
        class="dashboard-actions"
      >
        <div class="quick-actions">
          <button 
            v-for="(action, index) in quickActions"
            :key="action.label"
            v-motion
            :initial="{ opacity: 0, scale: 0.8 }"
            :enter="{ 
              opacity: 1, 
              scale: 1,
              transition: { delay: 600 + (index * 50) }
            }"
            class="action-button"
          >
            <span class="action-button__icon">{{ action.icon }}</span>
            <span class="action-button__label">{{ action.label }}</span>
          </button>
        </div>
      </GlassCard>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import GlassCard from '~/components/ui/GlassCard.vue'
import MonacoButton from '~/components/ui/MonacoButton.vue'
import StatsCard from '~/components/ui/StatsCard.vue'

const userName = ref('John')

const stats = ref([
  {
    label: 'Total Members',
    value: 1234,
    icon: 'users',
    trend: { type: 'up', value: 12 },
    sparkline: [30, 40, 35, 50, 49, 60, 70, 91, 95]
  },
  {
    label: 'Events This Month',
    value: 8,
    icon: 'calendar',
    suffix: ' events',
    trend: { type: 'up', value: 33 }
  },
  {
    label: 'Dues Collected',
    value: 45670,
    icon: 'dollar',
    prefix: '$',
    trend: { type: 'up', value: 5 },
    progress: 78
  },
  {
    label: 'Active Projects',
    value: 12,
    icon: 'briefcase',
    trend: { type: 'neutral', value: 0 }
  }
])

const recentActivities = ref([
  {
    icon: '👤',
    type: 'member',
    text: 'New member John Doe joined',
    time: '2 hours ago'
  },
  {
    icon: '📅',
    type: 'event',
    text: 'Summer Gala event created',
    time: '5 hours ago'
  },
  {
    icon: '💳',
    type: 'payment',
    text: 'Sarah Smith paid dues',
    time: '1 day ago'
  },
  {
    icon: '📝',
    type: 'update',
    text: 'Board meeting minutes posted',
    time: '2 days ago'
  }
])

const upcomingEvents = ref([
  {
    day: '15',
    month: 'DEC',
    title: 'Monaco Winter Gala',
    location: 'Grand Ballroom',
    attendees: 120
  },
  {
    day: '22',
    month: 'DEC',
    title: 'Board Meeting',
    location: 'Conference Room A',
    attendees: 15
  },
  {
    day: '31',
    month: 'DEC',
    title: 'New Year Celebration',
    location: 'Monaco Club',
    attendees: 200
  }
])

const quickActions = ref([
  { icon: '📝', label: 'Register for Event' },
  { icon: '💳', label: 'Pay Dues' },
  { icon: '📊', label: 'View Reports' },
  { icon: '👥', label: 'Member Directory' },
  { icon: '📧', label: 'Send Newsletter' },
  { icon: '⚙️', label: 'Settings' }
])
</script>

<style scoped lang="scss">
.dashboard-mockup {
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
  min-height: 100vh;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  
  &__content {
    flex: 1;
  }
  
  &__title {
    font-size: 2rem;
    font-weight: 700;
    color: #27272a;
    margin: 0 0 0.5rem;
  }
  
  &__subtitle {
    font-size: 1rem;
    color: #6b7280;
    margin: 0;
  }
  
  &__actions {
    display: flex;
    gap: 1rem;
  }
}

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
  
  .dashboard-activity {
    grid-column: span 8;
  }
  
  .dashboard-events {
    grid-column: span 4;
  }
  
  .dashboard-member-status {
    grid-column: span 4;
  }
  
  .dashboard-actions {
    grid-column: span 8;
  }
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.75rem;
  border-radius: 8px;
  transition: background 0.2s;
  
  &:hover {
    background: rgba(220, 38, 38, 0.05);
  }
  
  &__icon {
    flex-shrink: 0;
  }
  
  &__content {
    flex: 1;
  }
  
  &__text {
    margin: 0 0 0.25rem;
    color: #27272a;
    font-size: 0.875rem;
  }
  
  &__time {
    font-size: 0.75rem;
    color: #6b7280;
  }
}

.activity-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  font-size: 1rem;
  
  &--member {
    background: rgba(59, 130, 246, 0.1);
  }
  
  &--event {
    background: rgba(168, 85, 247, 0.1);
  }
  
  &--payment {
    background: rgba(16, 185, 129, 0.1);
  }
  
  &--update {
    background: rgba(251, 146, 60, 0.1);
  }
}

.events-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.event-card {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  transition: all 0.2s;
  
  &:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: translateX(4px);
  }
  
  &__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    border-radius: 10px;
    flex-shrink: 0;
  }
  
  &__day {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
  }
  
  &__month {
    font-size: 0.75rem;
    text-transform: uppercase;
  }
  
  &__content {
    flex: 1;
  }
  
  &__title {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: #27272a;
  }
  
  &__location {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
  }
  
  &__attendees {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  &__count {
    font-size: 0.75rem;
    color: #dc2626;
    font-weight: 500;
  }
}

.member-status {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  
  &__badge {
    text-align: center;
  }
  
  &__info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
}

.badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  
  &--active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
  }
}

.status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  
  &__label {
    font-size: 0.875rem;
    color: #6b7280;
  }
  
  &__value {
    font-size: 0.875rem;
    font-weight: 600;
    color: #27272a;
    
    &--success {
      color: #10b981;
    }
  }
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.action-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem;
  background: rgba(255, 255, 255, 0.5);
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  
  &:hover {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(220, 38, 38, 0.2);
    transform: translateY(-2px);
  }
  
  &__icon {
    font-size: 1.5rem;
  }
  
  &__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #27272a;
  }
}

// Responsive
@media (max-width: 1024px) {
  .dashboard-grid {
    .dashboard-activity,
    .dashboard-events,
    .dashboard-member-status,
    .dashboard-actions {
      grid-column: span 12;
    }
  }
  
  .quick-actions {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    
    &__actions {
      width: 100%;
      
      button {
        flex: 1;
      }
    }
  }
  
  .dashboard-stats {
    grid-template-columns: 1fr;
  }
}
</style>