<template>
  <div class="dashboard">
    <!-- Modern Header -->
    <div class="dashboard-header">
      <div class="header-content">
        <div class="title-section">
          <h1 class="main-title">
            <span class="icon">📊</span>
            Super Admin Dashboard
          </h1>
          <p class="subtitle">Complete system overview and analytics</p>
        </div>
        <div class="header-actions">
          <button class="action-btn primary" @click="refreshData">
            <span class="btn-icon">🔄</span>
            Refresh
          </button>
          <button class="action-btn secondary" @click="exportData">
            <span class="btn-icon">📊</span>
            Reports
          </button>
        </div>
      </div>
    </div>

    <!-- Enhanced Stats Grid -->
    <div class="stats-grid">
      <div class="stat-card" v-for="(stat, index) in statsCards" :key="index" :style="{ animationDelay: `${index * 0.1}s` }">
        <div class="stat-icon" :style="{ background: stat.gradient }">
          {{ stat.icon }}
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ stat.value }}</div>
          <div class="stat-label">{{ stat.label }}</div>
          <div class="stat-trend" :class="stat.trend > 0 ? 'positive' : 'negative'" v-if="stat.trend">
            <span class="trend-icon">{{ stat.trend > 0 ? '↗️' : '↘️' }}</span>
            {{ Math.abs(stat.trend) }}%
          </div>
        </div>
      </div>
    </div>

    <!-- Analytics Section -->
    <div class="analytics-section">
      <div class="analytics-grid">
        <!-- Quick Stats -->
        <div class="chart-card quick-stats">
          <div class="card-header">
            <h3>⚡ Quick Stats</h3>
          </div>
          <div class="quick-stats-grid">
            <div class="quick-stat">
              <div class="stat-number">{{ formatNumber(1247) }}</div>
              <div class="stat-text">Total Orders</div>
            </div>
            <div class="quick-stat">
              <div class="stat-number">Rs. {{ formatCurrency(2400000) }}</div>
              <div class="stat-text">Revenue</div>
            </div>
            <div class="quick-stat">
              <div class="stat-number">{{ formatNumber(156) }}</div>
              <div class="stat-text">Restaurants</div>
            </div>
            <div class="quick-stat">
              <div class="stat-number">{{ formatNumber(89) }}</div>
              <div class="stat-text">Delivery Boys</div>
            </div>
          </div>
        </div>

        <!-- System Health -->
        <div class="chart-card system-health">
          <div class="card-header">
            <h3>🔋 System Health</h3>
            <div class="health-indicator healthy">
              <span class="pulse-dot"></span>
              Healthy
            </div>
          </div>
          <div class="health-metrics">
            <div class="health-item">
              <div class="health-label">Server Status</div>
              <div class="health-value good">Online</div>
            </div>
            <div class="health-item">
              <div class="health-label">Database</div>
              <div class="health-value good">Connected</div>
            </div>
            <div class="health-item">
              <div class="health-label">API Response</div>
              <div class="health-value good">Fast</div>
            </div>
            <div class="health-item">
              <div class="health-label">Active Users</div>
              <div class="health-value">{{ formatNumber(234) }}</div>
            </div>
          </div>
        </div>

        <!-- Recent Activity -->
        <div class="chart-card recent-activity">
          <div class="card-header">
            <h3>🔴 Recent Activity</h3>
          </div>
          <div class="activity-feed">
            <div class="activity-item" v-for="activity in recentActivities" :key="activity.id">
              <div class="activity-icon" :style="{ background: activity.color }">
                {{ activity.icon }}
              </div>
              <div class="activity-content">
                <div class="activity-text">{{ activity.text }}</div>
                <div class="activity-time">{{ activity.time }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: 'Dashboard',
  setup() {
    const loading = ref(false)

    const statsCards = ref([
      {
        icon: '📦',
        value: '1,247',
        label: 'Total Orders',
        trend: 12.5,
        gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
      },
      {
        icon: '💰',
        value: 'Rs. 2.4M',
        label: 'Revenue',
        trend: 8.2,
        gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'
      },
      {
        icon: '🏪',
        value: '156',
        label: 'Restaurants',
        trend: 3.1,
        gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
      },
      {
        icon: '🚚',
        value: '89',
        label: 'Delivery Boys',
        trend: -2.3,
        gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)'
      }
    ])

    const recentActivities = ref([
      {
        id: 1,
        icon: '🆕',
        text: 'New restaurant registered',
        time: '2 min ago',
        color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
      },
      {
        id: 2,
        icon: '✅',
        text: 'Order #ORD123 completed',
        time: '5 min ago',
        color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)'
      },
      {
        id: 3,
        icon: '🚴',
        text: 'New delivery boy approved',
        time: '10 min ago',
        color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
      }
    ])

    const formatNumber = (num) => {
      return new Intl.NumberFormat().format(num || 0)
    }

    const formatCurrency = (amount) => {
      return new Intl.NumberFormat('en-US').format(amount || 0)
    }

    const refreshData = () => {
      loading.value = true
      setTimeout(() => {
        loading.value = false
      }, 1000)
    }

    const exportData = () => {
      console.log('Exporting reports...')
    }

    return {
      statsCards,
      recentActivities,
      formatNumber,
      formatCurrency,
      refreshData,
      exportData
    }
  }
}
</script>

<style scoped>
.dashboard {
  min-height: 100vh;
  background: #f5f7fa;
  padding: 2rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.dashboard-header {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 2rem;
  margin-bottom: 2rem;
  animation: slideInDown 0.6s ease-out;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-section {
  color: white;
}

.main-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.icon {
  font-size: 2rem;
}

.subtitle {
  margin: 0.5rem 0 0 0;
  opacity: 0.8;
  font-size: 1.1rem;
}

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

.action-btn {
  padding: 1rem 2rem;
  border: none;
  border-radius: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.action-btn.primary {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.action-btn.secondary {
  background: rgba(0, 0, 0, 0.1);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

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

.stat-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: all 0.3s ease;
  animation: slideInUp 0.6s ease-out;
}

.stat-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.stat-icon {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: white;
}

.stat-content {
  color: white;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 1rem;
  opacity: 0.8;
  margin-bottom: 0.5rem;
}

.stat-trend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.stat-trend.positive {
  color: #10b981;
}

.stat-trend.negative {
  color: #ef4444;
}

.analytics-section {
  margin-bottom: 2rem;
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
}

.chart-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 2rem;
  transition: all 0.3s ease;
}

.chart-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  color: white;
}

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

.quick-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.quick-stat {
  text-align: center;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
}

.stat-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  margin-bottom: 0.5rem;
}

.stat-text {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
}

.health-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.health-indicator.healthy {
  color: #10b981;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

.health-metrics {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.health-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

.health-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
}

.health-value {
  color: white;
  font-weight: 600;
  font-size: 0.875rem;
}

.health-value.good {
  color: #10b981;
}

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

.activity-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  transition: all 0.3s ease;
  color: white;
}

.activity-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(4px);
}

.activity-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.activity-content {
  flex: 1;
}

.activity-text {
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.activity-time {
  opacity: 0.7;
  font-size: 0.75rem;
}

@keyframes slideInDown {
  from { transform: translateY(-30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideInUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 768px) {
  .dashboard {
    padding: 1rem;
  }
  
  .header-content {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .analytics-grid {
    grid-template-columns: 1fr;
  }
  
  .quick-stats-grid {
    grid-template-columns: 1fr;
  }
}
</style>