<template>
  <div class="glass-dashboard">
    <!-- Ultra-Modern Hero Header -->
    <div class="hero-header">
      <!-- Animated background -->
      <div class="hero-gradient"></div>
      <div class="hero-overlay"></div>
      
      <!-- Floating elements -->
      <div class="floating-orb orb-1"></div>
      <div class="floating-orb orb-2"></div>
      <div class="floating-orb orb-3"></div>
      
      <!-- Mesh gradient overlay -->
      <div class="mesh-overlay"></div>
      
      <div class="hero-content">
        <div class="hero-inner">
          <!-- User Info -->
          <div class="user-section">
            <div class="avatar-wrapper">
              <!-- Avatar glow -->
              <div class="avatar-glow"></div>
              
              <div class="avatar-container">
                <div class="avatar">
                  <span class="avatar-text">JD</span>
                </div>
                
                <!-- Status indicator -->
                <div class="status-indicator">
                  <div class="status-dot"></div>
                </div>
                
                <!-- Crown icon -->
                <div class="crown-badge">
                  👑
                </div>
              </div>
            </div>
            
            <div class="user-info">
              <h1 class="welcome-title">
                Welcome back,
                <span class="name-gradient">Board Member!</span>
              </h1>
              
              <div class="user-meta">
                <div class="role-badge">
                  <span class="sparkle">✨</span>
                  <span class="role-text">Administrator</span>
                </div>
                
                <div class="divider"></div>
                
                <span class="org-name">MonacoUSA Association</span>
              </div>
            </div>
          </div>
          
          <!-- Date & Quick Actions -->
          <div class="actions-section">
            <!-- Date Card -->
            <div class="date-card">
              <div class="date-header">
                <span class="calendar-icon">📅</span>
                <p class="date-label">Today</p>
              </div>
              <p class="date-text">
                {{ currentDate }}
              </p>
              <div class="date-progress">
                <div class="progress-fill"></div>
              </div>
            </div>
            
            <!-- Quick Actions -->
            <div class="quick-actions">
              <button class="action-btn action-alerts">
                <span class="action-icon">🔔</span>
                <span class="action-text">Alerts</span>
              </button>
              
              <button class="action-btn action-primary">
                <span class="action-icon">✨</span>
                <span class="action-text">Quick Add</span>
              </button>
            </div>
          </div>
        </div>
        
        <!-- Decorative line -->
        <div class="hero-divider"></div>
      </div>
    </div>

    <!-- Statistics Grid -->
    <div class="stats-section">
      <div class="stats-grid">
        <div v-for="stat in stats" :key="stat.label" class="stat-card">
          <div class="stat-icon">{{ stat.icon }}</div>
          <div class="stat-content">
            <p class="stat-label">{{ stat.label }}</p>
            <p class="stat-value">
              {{ stat.prefix }}{{ stat.value.toLocaleString() }}{{ stat.suffix }}
            </p>
            <p v-if="stat.change" class="stat-change">
              {{ stat.change }}
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- Dues Management Section -->
    <div class="dues-section">
      <h2 class="section-title">Member Dues Overview</h2>
      
      <div class="dues-grid">
        <div v-for="member in visibleDuesMembers" :key="member.id" class="dues-card">
          <div class="member-header">
            <div class="member-avatar">
              <span>{{ member.initials }}</span>
            </div>
            <div class="member-details">
              <h3 class="member-name">{{ member.name }}</h3>
              <p class="member-id">Member #{{ member.id }}</p>
            </div>
          </div>
          
          <div class="dues-info">
            <span class="dues-label">Amount Due</span>
            <span class="dues-amount">${{ member.dueAmount }}</span>
          </div>
          
          <button class="btn-pay">
            Mark Paid
          </button>
        </div>
      </div>
      
      <div class="view-all-container">
        <button class="btn-view-all">
          View All Members →
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  layout: 'board',
  middleware: 'board-auth'
}
</script>

<script setup>
import { ref, computed } from 'vue'

// Current date
const currentDate = computed(() => {
  return new Date().toLocaleDateString('en-US', {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
})

// Statistics data
const stats = ref([
  {
    icon: '👥',
    label: 'TOTAL MEMBERS',
    value: 1234,
    change: '+12%',
  },
  {
    icon: '💰',
    label: 'DUES COLLECTED',
    value: 45678,
    prefix: '$',
    change: '+8%',
  },
  {
    icon: '📅',
    label: 'UPCOMING EVENTS',
    value: 5,
    change: '2 this week',
  },
  {
    icon: '📈',
    label: 'GROWTH RATE',
    value: 23,
    suffix: '%',
    change: '+3%',
  }
])

// Sample dues members data
const visibleDuesMembers = ref([
  {
    id: 1,
    name: 'John Smith',
    initials: 'JS',
    dueAmount: 250,
  },
  {
    id: 2,
    name: 'Marie Dubois',
    initials: 'MD',
    dueAmount: 250,
  },
  {
    id: 3,
    name: 'Alessandro Rossi',
    initials: 'AR',
    dueAmount: 250,
  },
  {
    id: 4,
    name: 'Emma Wilson',
    initials: 'EW',
    dueAmount: 250,
  }
])
</script>

<style scoped>
/* Simplified Animations */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

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

/* Base Styles */
.glass-dashboard {
  min-height: 100vh;
  background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
}

/* Hero Header */
.hero-header {
  position: relative;
  overflow: hidden;
  margin-bottom: 2rem;
}

.hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.3), transparent);
}

/* Floating Orbs */
.floating-orb {
  position: absolute;
  border-radius: 50%;
  opacity: 0.3;
  filter: blur(20px);
}

.orb-1 {
  top: 40px;
  right: 80px;
  width: 200px;
  height: 200px;
  background: rgba(220, 38, 38, 0.05);
}

.orb-2 {
  bottom: 40px;
  left: 80px;
  width: 150px;
  height: 150px;
  background: rgba(220, 38, 38, 0.03);
}

.orb-3 {
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  background: rgba(220, 38, 38, 0.02);
}

.mesh-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background: radial-gradient(circle at 20% 50%, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
  mix-blend-mode: overlay;
}

.hero-content {
  position: relative;
  padding: 3rem;
  border-radius: 1.5rem;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .hero-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* User Section */
.user-section {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  animation: fade-in 0.3s ease-out;
}

.avatar-wrapper {
  position: relative;
  group: true;
}

.avatar-glow {
  position: absolute;
  inset: -4px;
  background: rgba(220, 38, 38, 0.1);
  border-radius: 50%;
  opacity: 0.5;
  transition: opacity 0.3s;
}

.avatar-wrapper:hover .avatar-glow {
  opacity: 0.8;
}

.avatar-container {
  position: relative;
}

.avatar {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #fff, #fef2f2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    0 0 0 4px rgba(255,255,255,0.4),
    0 10px 40px rgba(0,0,0,0.2);
  border: 2px solid rgba(255,255,255,0.2);
  transition: transform 0.3s;
}

.avatar:hover {
  transform: scale(1.1);
}

.avatar-text {
  font-size: 1.5rem;
  font-weight: bold;
  color: #dc2626;
}

.status-indicator {
  position: absolute;
  bottom: -8px;
  right: -8px;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #10b981, #059669);
  border-radius: 50%;
  border: 4px solid white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-dot {
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  animation: pulse-slow 2s infinite;
}

.crown-badge {
  position: absolute;
  top: -12px;
  right: -4px;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  animation: bounce-slow 3s infinite;
}

/* User Info */
.user-info {
  flex: 1;
}

.welcome-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #27272a;
  margin-bottom: 0.5rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.name-gradient {
  display: block;
  color: #dc2626;
  font-weight: 800;
}

.user-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.role-badge {
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(4px);
  border-radius: 9999px;
  padding: 0.75rem 1.5rem;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sparkle {
  font-size: 1.25rem;
}

.role-text {
  color: #27272a;
  font-weight: 600;
}

.divider {
  height: 1.5rem;
  width: 1px;
  background: rgba(255,255,255,0.3);
}

.org-name {
  color: #6b7280;
  font-weight: 500;
}

/* Actions Section */
.actions-section {
  animation: fade-in 0.3s ease-out;
  animation-delay: 100ms;
  animation-fill-mode: both;
}

.date-card {
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(2px);
  border-radius: 1rem;
  padding: 1.5rem;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: all 0.3s;
  margin-bottom: 1rem;
}

.date-card:hover {
  background: rgba(255,255,255,0.8);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.date-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.calendar-icon {
  font-size: 1.5rem;
}

.date-label {
  color: #6b7280;
  font-weight: 600;
}

.date-text {
  font-size: 1.25rem;
  font-weight: 600;
  color: #27272a;
  line-height: 1.2;
}

.date-progress {
  margin-top: 0.75rem;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 9999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 75%;
  background: linear-gradient(90deg, rgba(255,255,255,0.6), rgba(255,255,255,0.8));
  border-radius: 9999px;
  animation: pulse-slow 2s infinite;
}

.quick-actions {
  display: flex;
  gap: 0.75rem;
}

.action-btn {
  flex: 1;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255,255,255,0.2);
  transition: all 0.3s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.action-alerts {
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(2px);
  color: #27272a;
  border: 1px solid rgba(0,0,0,0.05);
}

.action-alerts:hover {
  background: rgba(255,255,255,0.8);
  transform: translateY(-2px);
}

.action-primary {
  background: #dc2626;
  color: white;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
}

.action-primary:hover {
  background: #b91c1c;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.3);
}

.action-icon {
  font-size: 1.25rem;
}

.action-text {
  font-size: 0.875rem;
  font-weight: 500;
}

.hero-divider {
  margin-top: 2rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
}

/* Stats Section */
.stats-section {
  padding: 0 1.5rem;
  margin-bottom: 2rem;
}

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

.stat-card {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.05);
  transition: all 0.2s;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  background: rgba(255, 255, 255, 0.95);
}

.stat-icon {
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
  border: 1px solid rgba(220, 38, 38, 0.1);
  border-radius: 0.75rem;
}

.stat-content {
  flex: 1;
}

.stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.stat-value {
  font-size: 1.875rem;
  font-weight: 900;
  color: #1f2937;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-change {
  font-size: 0.875rem;
  color: #10b981;
  font-weight: 500;
}

/* Dues Section */
.dues-section {
  padding: 0 1.5rem;
  margin-bottom: 2rem;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 1.5rem;
}

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

.dues-card {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.05);
  transition: all 0.2s;
}

.dues-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  background: rgba(255, 255, 255, 0.95);
}

.member-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.member-avatar {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #e5e7eb, #d1d5db);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #6b7280;
}

.member-details {
  flex: 1;
}

.member-name {
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.25rem;
}

.member-id {
  font-size: 0.875rem;
  color: #6b7280;
}

.dues-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: #f9fafb;
  border-radius: 0.75rem;
}

.dues-label {
  font-size: 0.875rem;
  color: #6b7280;
}

.dues-amount {
  font-size: 1.25rem;
  font-weight: 700;
  color: #dc2626;
}

.btn-pay {
  width: 100%;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.6);
  color: #dc2626;
  font-weight: 600;
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-pay:hover {
  background: #dc2626;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.view-all-container {
  text-align: center;
}

.btn-view-all {
  padding: 0.875rem 2rem;
  background: white;
  color: #dc2626;
  font-weight: 600;
  border: 2px solid #dc2626;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-view-all:hover {
  background: #dc2626;
  color: white;
  transform: translateX(4px);
}
</style>