<template>
  <div class="admin-dashboard-v2">
    <!-- Neumorphic Header -->
    <div class="dashboard-header">
      <h1 class="dashboard-title">System Administration</h1>
      <p class="dashboard-subtitle">Complete platform control and management</p>
    </div>

    <!-- Stats Grid with Neumorphic Cards -->
    <div class="stats-grid">
      <div class="stat-card neumorphic-card" v-for="stat in stats" :key="stat.id">
        <div class="stat-content">
          <div class="stat-info">
            <div class="stat-label">{{ stat.label }}</div>
            <div class="stat-value">{{ stat.value }}</div>
            <div class="stat-change" :class="stat.changeType">
              <Icon :name="stat.changeIcon" class="change-icon" />
              <span>{{ stat.changeText }}</span>
            </div>
          </div>
          <div class="stat-icon-wrapper neumorphic-inset">
            <Icon :name="stat.icon" class="stat-icon" :style="{ color: stat.color }" />
          </div>
        </div>
      </div>
    </div>

    <!-- Main Management Sections -->
    <div class="management-grid">
      <!-- User Management -->
      <div class="management-card neumorphic-card">
        <div class="card-header">
          <Icon name="mdi:account-group" class="header-icon" />
          <h2>User Management</h2>
        </div>
        <p class="card-description">Manage user accounts, roles, and permissions</p>
        
        <!-- Morphing Dropdown for User Filters -->
        <div class="morphing-select-wrapper">
          <div class="select-trigger neumorphic-button" @click="toggleUserFilter">
            <span>{{ selectedUserFilter }}</span>
            <Icon name="mdi:chevron-down" class="dropdown-icon" :class="{ 'rotate': showUserFilter }" />
          </div>
          <Transition name="morph">
            <div v-if="showUserFilter" class="morphing-dropdown">
              <div 
                v-for="option in userFilterOptions" 
                :key="option"
                class="dropdown-option"
                @click="selectUserFilter(option)"
              >
                {{ option }}
              </div>
            </div>
          </Transition>
        </div>

        <div class="action-buttons">
          <button class="neumorphic-button primary" @click="showCreateUserDialog = true">
            <Icon name="mdi:account-plus" />
            Create User
          </button>
          <button class="neumorphic-button" @click="manageRoles">
            <Icon name="mdi:shield-account" />
            Manage Roles
          </button>
        </div>
      </div>

      <!-- System Maintenance -->
      <div class="management-card neumorphic-card">
        <div class="card-header">
          <Icon name="mdi:cog" class="header-icon" />
          <h2>System Maintenance</h2>
        </div>
        <p class="card-description">Backend operations and system health</p>

        <!-- System Status Indicator -->
        <div class="system-status neumorphic-inset">
          <div class="status-indicator" :class="systemStatus.type"></div>
          <span>{{ systemStatus.text }}</span>
        </div>

        <div class="action-buttons">
          <button class="neumorphic-button" @click="assignMemberIds">
            Assign Member IDs
          </button>
          <button class="neumorphic-button" @click="backfillEventIds">
            Backfill Event IDs
          </button>
        </div>
      </div>

      <!-- Reports & Analytics -->
      <div class="management-card neumorphic-card">
        <div class="card-header">
          <Icon name="mdi:chart-line" class="header-icon" />
          <h2>Reports & Analytics</h2>
        </div>
        <p class="card-description">Generate insights and track metrics</p>

        <!-- Report Type Dropdown -->
        <div class="morphing-select-wrapper">
          <div class="select-trigger neumorphic-button" @click="toggleReportType">
            <span>{{ selectedReportType }}</span>
            <Icon name="mdi:chevron-down" class="dropdown-icon" :class="{ 'rotate': showReportType }" />
          </div>
          <Transition name="morph">
            <div v-if="showReportType" class="morphing-dropdown">
              <div 
                v-for="type in reportTypes" 
                :key="type"
                class="dropdown-option"
                @click="selectReportType(type)"
              >
                {{ type }}
              </div>
            </div>
          </Transition>
        </div>

        <button class="neumorphic-button primary full-width" @click="generateReport">
          <Icon name="mdi:file-chart" />
          Generate Report
        </button>
      </div>

      <!-- Configuration -->
      <div class="management-card neumorphic-card">
        <div class="card-header">
          <Icon name="mdi:tune" class="header-icon" />
          <h2>Configuration</h2>
        </div>
        <p class="card-description">Portal settings and integrations</p>

        <div class="config-grid">
          <button class="config-button neumorphic-button" @click="showMembershipConfig = true">
            <Icon name="mdi:card-account-details" />
            <span>Membership</span>
          </button>
          <button class="config-button neumorphic-button" @click="showRecaptchaConfig = true">
            <Icon name="mdi:robot" />
            <span>reCAPTCHA</span>
          </button>
          <button class="config-button neumorphic-button" @click="openEmailConfig">
            <Icon name="mdi:email" />
            <span>Email</span>
          </button>
          <button class="config-button neumorphic-button" @click="showNocoDBSettings = true">
            <Icon name="mdi:database" />
            <span>Database</span>
          </button>
        </div>
      </div>
    </div>

    <!-- Activity Feed -->
    <div class="activity-section neumorphic-card">
      <div class="card-header">
        <Icon name="mdi:timeline" class="header-icon" />
        <h2>Recent Activity</h2>
        <button class="neumorphic-button small" @click="refreshActivity">
          <Icon name="mdi:refresh" />
        </button>
      </div>
      
      <div class="activity-list">
        <div v-for="activity in recentActivity" :key="activity.id" class="activity-item neumorphic-inset">
          <Icon :name="activity.icon" class="activity-icon" :style="{ color: activity.color }" />
          <div class="activity-content">
            <p class="activity-text">{{ activity.text }}</p>
            <span class="activity-time">{{ activity.time }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

// Define page meta
definePageMeta({
  layout: 'admin',
  middleware: 'auth'
})

// Stats data
const stats = ref([
  {
    id: 1,
    label: 'Total Members',
    value: '1,247',
    changeType: 'positive',
    changeIcon: 'mdi:trending-up',
    changeText: '+12% this month',
    icon: 'mdi:account-group',
    color: '#CC0000'
  },
  {
    id: 2,
    label: 'Active Sessions',
    value: '342',
    changeType: 'neutral',
    changeIcon: 'mdi:circle',
    changeText: 'Live now',
    icon: 'mdi:monitor-dashboard',
    color: '#10B981'
  },
  {
    id: 3,
    label: 'Revenue MTD',
    value: '$48,392',
    changeType: 'positive',
    changeIcon: 'mdi:trending-up',
    changeText: '+8% vs last month',
    icon: 'mdi:currency-usd',
    color: '#3B82F6'
  },
  {
    id: 4,
    label: 'System Health',
    value: '98.5%',
    changeType: 'positive',
    changeIcon: 'mdi:check-circle',
    changeText: 'All systems operational',
    icon: 'mdi:shield-check',
    color: '#10B981'
  }
])

// Dropdown states
const showUserFilter = ref(false)
const selectedUserFilter = ref('All Users')
const userFilterOptions = ref(['All Users', 'Active Users', 'Inactive Users', 'Admins', 'Members'])

const showReportType = ref(false)
const selectedReportType = ref('Financial Report')
const reportTypes = ref(['Financial Report', 'Member Report', 'Activity Report', 'Usage Report'])

// System status
const systemStatus = ref({
  type: 'healthy',
  text: 'All systems operational'
})

// Recent activity
const recentActivity = ref([
  {
    id: 1,
    icon: 'mdi:account-plus',
    text: 'New member registration: John Doe',
    time: '2 minutes ago',
    color: '#10B981'
  },
  {
    id: 2,
    icon: 'mdi:credit-card',
    text: 'Payment received from Jane Smith',
    time: '15 minutes ago',
    color: '#3B82F6'
  },
  {
    id: 3,
    icon: 'mdi:calendar-check',
    text: 'Event created: Annual Gala 2024',
    time: '1 hour ago',
    color: '#F59E0B'
  },
  {
    id: 4,
    icon: 'mdi:account-edit',
    text: 'Profile updated: Mike Johnson',
    time: '3 hours ago',
    color: '#6B7280'
  }
])

// Dialog states
const showCreateUserDialog = ref(false)
const showMembershipConfig = ref(false)
const showRecaptchaConfig = ref(false)
const showNocoDBSettings = ref(false)

// Methods
const toggleUserFilter = () => {
  showUserFilter.value = !showUserFilter.value
  showReportType.value = false
}

const selectUserFilter = (option) => {
  selectedUserFilter.value = option
  showUserFilter.value = false
}

const toggleReportType = () => {
  showReportType.value = !showReportType.value
  showUserFilter.value = false
}

const selectReportType = (type) => {
  selectedReportType.value = type
  showReportType.value = false
}

const manageRoles = () => {
  console.log('Managing roles...')
}

const assignMemberIds = () => {
  console.log('Assigning member IDs...')
}

const backfillEventIds = () => {
  console.log('Backfilling event IDs...')
}

const generateReport = () => {
  console.log('Generating report:', selectedReportType.value)
}

const openEmailConfig = () => {
  console.log('Opening email configuration...')
}

const refreshActivity = () => {
  console.log('Refreshing activity...')
}

onMounted(() => {
  // Close dropdowns when clicking outside
  document.addEventListener('click', (e) => {
    if (!e.target.closest('.morphing-select-wrapper')) {
      showUserFilter.value = false
      showReportType.value = false
    }
  })
})
</script>

<style lang="scss" scoped>
@import '@/assets/scss/design-system-v2.scss';

.admin-dashboard-v2 {
  padding: 2rem;
  background: linear-gradient(135deg, $neutral-50 0%, $neutral-100 100%);
  min-height: 100vh;
}

// Header
.dashboard-header {
  text-align: center;
  margin-bottom: 3rem;
  
  .dashboard-title {
    font-size: $text-4xl;
    font-weight: $font-bold;
    color: $neutral-800;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, $primary-600, $primary-800);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .dashboard-subtitle {
    color: $neutral-600;
    font-size: $text-lg;
  }
}

// Stats Grid
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.stat-card {
  @include neumorphic-card('md');
  padding: 1.5rem;
  transition: all $transition-base;
  
  &:hover {
    @include neumorphic-card('lg');
    transform: translateY(-2px);
  }
  
  .stat-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .stat-info {
    flex: 1;
  }
  
  .stat-label {
    color: $neutral-600;
    font-size: $text-sm;
    margin-bottom: 0.5rem;
  }
  
  .stat-value {
    font-size: $text-3xl;
    font-weight: $font-bold;
    color: $neutral-800;
    margin-bottom: 0.5rem;
  }
  
  .stat-change {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: $text-sm;
    
    &.positive {
      color: $success-500;
    }
    
    &.neutral {
      color: $neutral-600;
    }
    
    .change-icon {
      width: 14px;
      height: 14px;
    }
  }
  
  .stat-icon-wrapper {
    width: 60px;
    height: 60px;
    border-radius: $radius-xl;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: $shadow-inset-sm;
    
    .stat-icon {
      width: 28px;
      height: 28px;
    }
  }
}

// Management Grid
.management-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.management-card {
  @include neumorphic-card('md');
  padding: 2rem;
  
  .card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    
    .header-icon {
      width: 24px;
      height: 24px;
      color: $primary-600;
    }
    
    h2 {
      font-size: $text-xl;
      font-weight: $font-semibold;
      color: $neutral-800;
    }
  }
  
  .card-description {
    color: $neutral-600;
    margin-bottom: 1.5rem;
    font-size: $text-sm;
  }
  
  .action-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
  }
  
  .config-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .config-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    font-size: $text-sm;
    
    svg {
      width: 20px;
      height: 20px;
    }
  }
}

// Morphing Dropdown
.morphing-select-wrapper {
  position: relative;
  margin-bottom: 1.5rem;
  
  .select-trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    cursor: pointer;
    
    .dropdown-icon {
      transition: transform 0.3s $spring-smooth;
      
      &.rotate {
        transform: rotate(180deg);
      }
    }
  }
}

.morphing-dropdown {
  @include morphing-dropdown();
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: $z-dropdown;
  
  .dropdown-option {
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all $transition-fast;
    color: $neutral-700;
    
    &:hover {
      background: rgba($blue-500, 0.1);
      color: $blue-600;
      padding-left: 1.25rem;
    }
  }
}

// Neumorphic Elements
.neumorphic-card {
  background: linear-gradient(145deg, #ffffff, #f0f0f0);
  border-radius: $radius-xl;
  box-shadow: $shadow-soft-md;
}

.neumorphic-button {
  @include neumorphic-button();
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: $radius-lg;
  font-weight: $font-medium;
  color: $neutral-700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  
  &.primary {
    background: linear-gradient(145deg, $primary-600, $primary-700);
    color: white;
    
    &:hover {
      background: linear-gradient(145deg, $primary-700, $primary-800);
    }
  }
  
  &.small {
    padding: 0.5rem 0.75rem;
    font-size: $text-sm;
  }
  
  &.full-width {
    width: 100%;
    justify-content: center;
  }
  
  svg {
    width: 18px;
    height: 18px;
  }
}

.neumorphic-inset {
  box-shadow: $shadow-inset-sm;
  background: linear-gradient(145deg, #e6e6e6, #ffffff);
}

// System Status
.system-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: $radius-lg;
  margin-bottom: 1.5rem;
  
  .status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: pulse 2s infinite;
    
    &.healthy {
      background-color: $success-500;
    }
    
    &.warning {
      background-color: $warning-500;
    }
    
    &.error {
      background-color: $error-500;
    }
  }
}

// Activity Section
.activity-section {
  @include neumorphic-card('lg');
  padding: 2rem;
  
  .card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    
    h2 {
      flex: 1;
    }
  }
  
  .activity-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .activity-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: $radius-lg;
    
    .activity-icon {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
    }
    
    .activity-content {
      flex: 1;
      
      .activity-text {
        color: $neutral-800;
        font-size: $text-sm;
        margin-bottom: 0.25rem;
      }
      
      .activity-time {
        color: $neutral-500;
        font-size: $text-xs;
      }
    }
  }
}

// Transitions
.morph-enter-active,
.morph-leave-active {
  transition: all 0.3s $spring-smooth;
}

.morph-enter-from {
  opacity: 0;
  transform: scale(0.95) translateY(-10px);
}

.morph-leave-to {
  opacity: 0;
  transform: scale(0.95) translateY(-10px);
}

// Responsive
@include responsive($breakpoint-md) {
  .admin-dashboard-v2 {
    padding: 3rem;
  }
}

@include responsive($breakpoint-lg) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .management-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>