<template>
  <div class="comprehensive-dashboard">
    <header class="page-header">
      <div>
        <h1>📊 Super Admin Dashboard</h1>
        <p class="subtitle">Complete system overview and analytics</p>
      </div>
      <div class="header-actions">
        <button @click="refreshData" class="btn-action"><span>🔄</span><span>Refresh</span></button>
        <button @click="exportReport" class="btn-action"><span>📊</span><span>Export</span></button>
      </div>
    </header>

    <!-- Stats Grid -->
    <div class="stats-grid">
      <div class="stat-card" v-for="stat in stats" :key="stat.label">
        <div class="stat-icon" :style="{ background: stat.gradient }">{{ stat.icon }}</div>
        <div class="stat-details">
          <span class="stat-label">{{ stat.label }}</span>
          <span class="stat-value">{{ stat.value }}</span>
          <span v-if="stat.trend" class="stat-trend" :class="stat.trend > 0 ? 'positive' : 'negative'">
            {{ stat.trend > 0 ? '↗' : '↘' }} {{ Math.abs(stat.trend) }}%
          </span>
        </div>
      </div>
    </div>

    <!-- Charts Section -->
    <div class="charts-grid">
      <!-- Revenue Chart -->
      <div class="chart-card">
        <div class="card-header">
          <h3>💰 Revenue Overview</h3>
          <select v-model="revenueFilter" class="filter-select">
            <option value="7">Last 7 Days</option>
            <option value="30">Last 30 Days</option>
            <option value="90">Last 90 Days</option>
          </select>
        </div>
        <div class="chart-container">
          <canvas ref="revenueChart"></canvas>
        </div>
      </div>

      <!-- Orders Chart -->
      <div class="chart-card">
        <div class="card-header">
          <h3>📦 Orders Trend</h3>
          <select v-model="ordersFilter" class="filter-select">
            <option value="7">Last 7 Days</option>
            <option value="30">Last 30 Days</option>
          </select>
        </div>
        <div class="chart-container">
          <canvas ref="ordersChart"></canvas>
        </div>
      </div>

      <!-- Status Distribution -->
      <div class="chart-card">
        <div class="card-header">
          <h3>📊 Order Status Distribution</h3>
        </div>
        <div class="chart-container">
          <canvas ref="statusChart"></canvas>
        </div>
      </div>

      <!-- Top Restaurants -->
      <div class="chart-card">
        <div class="card-header">
          <h3>🏆 Top Restaurants</h3>
        </div>
        <div class="chart-container">
          <canvas ref="restaurantsChart"></canvas>
        </div>
      </div>
    </div>

    <!-- Management Overview -->
    <div class="management-grid">
      <!-- Orders Management -->
      <div class="management-card">
        <div class="card-header">
          <h3>📦 Orders Management</h3>
          <button @click="navigateTo('/super-admin/orders')" class="view-all-btn">View All →</button>
        </div>
        <div class="management-stats">
          <div class="stat-item">
            <span class="stat-label">Pending</span>
            <span class="stat-value pending">{{ managementData.orders.pending }}</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">Processing</span>
            <span class="stat-value processing">{{ managementData.orders.processing }}</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">Delivered</span>
            <span class="stat-value delivered">{{ managementData.orders.delivered }}</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">Cancelled</span>
            <span class="stat-value cancelled">{{ managementData.orders.cancelled }}</span>
          </div>
        </div>
      </div>

      <!-- Restaurants Management -->
      <div class="management-card">
        <div class="card-header">
          <h3>🏪 Restaurants Management</h3>
          <button @click="navigateTo('/super-admin/restaurants')" class="view-all-btn">View All →</button>
        </div>
        <div class="management-stats">
          <div class="stat-item">
            <span class="stat-label">Active</span>
            <span class="stat-value active">{{ managementData.restaurants.active }}</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">Pending</span>
            <span class="stat-value pending">{{ managementData.restaurants.pending }}</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">Closed</span>
            <span class="stat-value closed">{{ managementData.restaurants.closed }}</span>
          </div>
        </div>
      </div>

      <!-- Delivery Boys Management -->
      <div class="management-card">
        <div class="card-header">
          <h3>🚴 Delivery Boys Management</h3>
          <button @click="navigateTo('/super-admin/delivery-boys')" class="view-all-btn">View All →</button>
        </div>
        <div class="management-stats">
          <div class="stat-item">
            <span class="stat-label">Online</span>
            <span class="stat-value online">{{ managementData.deliveryBoys.online }}</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">On Delivery</span>
            <span class="stat-value on-delivery">{{ managementData.deliveryBoys.onDelivery }}</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">Offline</span>
            <span class="stat-value offline">{{ managementData.deliveryBoys.offline }}</span>
          </div>
        </div>
      </div>

      <!-- Users Management -->
      <div class="management-card">
        <div class="card-header">
          <h3>👥 Users Management</h3>
          <button @click="navigateTo('/super-admin/users')" class="view-all-btn">View All →</button>
        </div>
        <div class="management-stats">
          <div class="stat-item">
            <span class="stat-label">Customers</span>
            <span class="stat-value">{{ managementData.users.customers }}</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">Managers</span>
            <span class="stat-value">{{ managementData.users.managers }}</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">Admins</span>
            <span class="stat-value">{{ managementData.users.admins }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Recent Activity -->
    <div class="activity-section">
      <div class="card-header">
        <h3>🔴 Recent Activity</h3>
      </div>
      <div class="activity-list">
        <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>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import Chart from 'chart.js/auto';

const router = useRouter();
const revenueChart = ref(null);
const ordersChart = ref(null);
const statusChart = ref(null);
const restaurantsChart = ref(null);
const revenueFilter = ref('7');
const ordersFilter = ref('7');

const stats = ref([
  { icon: '📦', label: 'Total Orders', value: '1,247', trend: 12.5, gradient: 'linear-gradient(135deg, #ff6b35, #f7931e)' },
  { icon: '💰', label: 'Revenue', value: 'Rs. 2.4M', trend: 8.2, gradient: 'linear-gradient(135deg, #10b981, #059669)' },
  { icon: '🏪', label: 'Restaurants', value: '156', trend: 3.1, gradient: 'linear-gradient(135deg, #3b82f6, #2563eb)' },
  { icon: '🚴', label: 'Delivery Boys', value: '89', trend: -2.3, gradient: 'linear-gradient(135deg, #f59e0b, #d97706)' },
  { icon: '👥', label: 'Total Users', value: '2,345', trend: 15.7, gradient: 'linear-gradient(135deg, #8b5cf6, #7c3aed)' },
  { icon: '⭐', label: 'Avg Rating', value: '4.8', trend: 2.1, gradient: 'linear-gradient(135deg, #fbbf24, #f59e0b)' }
]);

const managementData = ref({
  orders: { pending: 45, processing: 78, delivered: 1024, cancelled: 100 },
  restaurants: { active: 142, pending: 8, closed: 6 },
  deliveryBoys: { online: 56, onDelivery: 23, offline: 10 },
  users: { customers: 1890, managers: 156, admins: 12 }
});

const recentActivities = ref([
  { id: 1, icon: '🆕', text: 'New restaurant "Pizza Palace" registered', time: '2 min ago', color: 'linear-gradient(135deg, #667eea, #764ba2)' },
  { id: 2, icon: '✅', text: 'Order #ORD1234 delivered successfully', time: '5 min ago', color: 'linear-gradient(135deg, #10b981, #059669)' },
  { id: 3, icon: '🚴', text: 'Delivery boy "John Doe" approved', time: '10 min ago', color: 'linear-gradient(135deg, #f59e0b, #d97706)' },
  { id: 4, icon: '💰', text: 'Payment of Rs. 15,000 received', time: '15 min ago', color: 'linear-gradient(135deg, #10b981, #059669)' },
  { id: 5, icon: '⚠️', text: 'Restaurant "Burger King" reported issue', time: '20 min ago', color: 'linear-gradient(135deg, #ef4444, #dc2626)' }
]);

const initCharts = () => {
  // Revenue Chart
  if (revenueChart.value) {
    new Chart(revenueChart.value, {
      type: 'line',
      data: {
        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        datasets: [{
          label: 'Revenue (Rs.)',
          data: [120000, 150000, 180000, 140000, 200000, 250000, 220000],
          borderColor: '#ff6b35',
          backgroundColor: 'rgba(255, 107, 53, 0.1)',
          tension: 0.4,
          fill: true
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } }
      }
    });
  }

  // Orders Chart
  if (ordersChart.value) {
    new Chart(ordersChart.value, {
      type: 'bar',
      data: {
        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        datasets: [{
          label: 'Orders',
          data: [45, 52, 68, 55, 75, 90, 82],
          backgroundColor: 'rgba(59, 130, 246, 0.8)',
          borderRadius: 8
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } }
      }
    });
  }

  // Status Chart
  if (statusChart.value) {
    new Chart(statusChart.value, {
      type: 'doughnut',
      data: {
        labels: ['Delivered', 'Processing', 'Pending', 'Cancelled'],
        datasets: [{
          data: [1024, 78, 45, 100],
          backgroundColor: ['#10b981', '#3b82f6', '#f59e0b', '#ef4444']
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false
      }
    });
  }

  // Restaurants Chart
  if (restaurantsChart.value) {
    new Chart(restaurantsChart.value, {
      type: 'bar',
      data: {
        labels: ['Pizza Palace', 'Burger King', 'Sushi Bar', 'Taco Bell', 'KFC'],
        datasets: [{
          label: 'Orders',
          data: [145, 132, 98, 87, 76],
          backgroundColor: 'rgba(245, 158, 11, 0.8)',
          borderRadius: 8
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        indexAxis: 'y',
        plugins: { legend: { display: false } }
      }
    });
  }
};

const navigateTo = (path) => router.push(path);
const refreshData = () => console.log('Refreshing...');
const exportReport = () => console.log('Exporting...');

onMounted(() => {
  nextTick(() => initCharts());
});
</script>

<style scoped>
.comprehensive-dashboard { padding: 2rem; background: #f5f7fa; min-height: 100vh; }

.page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2rem; }
.page-header h1 { margin: 0; font-size: 1.75rem; font-weight: 700; color: #1f2937; }
.subtitle { margin: 0.5rem 0 0; color: #6b7280; font-size: 0.875rem; }
.header-actions { display: flex; gap: 0.75rem; }
.btn-action { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.25rem; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.3s; font-size: 0.875rem; background: white; color: #374151; border: 1px solid #e5e7eb; }
.btn-action:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
.stat-card { background: white; border-radius: 16px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); display: flex; align-items: center; gap: 1rem; transition: all 0.3s; }
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.stat-icon { width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; color: white; flex-shrink: 0; }
.stat-details { display: flex; flex-direction: column; gap: 0.25rem; }
.stat-label { font-size: 0.875rem; color: #6b7280; font-weight: 600; }
.stat-value { font-size: 1.75rem; font-weight: 700; color: #1f2937; }
.stat-trend { font-size: 0.875rem; font-weight: 600; }
.stat-trend.positive { color: #10b981; }
.stat-trend.negative { color: #ef4444; }

.charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
.chart-card { background: white; border-radius: 16px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.card-header h3 { margin: 0; font-size: 1.125rem; font-weight: 600; color: #1f2937; }
.filter-select { padding: 0.5rem 1rem; border: 1px solid #e5e7eb; border-radius: 6px; background: white; font-size: 0.875rem; cursor: pointer; }
.chart-container { height: 250px; }

.management-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
.management-card { background: white; border-radius: 16px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.view-all-btn { padding: 0.5rem 1rem; background: #f3f4f6; color: #374151; border: none; border-radius: 6px; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.3s; }
.view-all-btn:hover { background: #e5e7eb; }
.management-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 1rem; margin-top: 1rem; }
.stat-item { text-align: center; padding: 1rem; background: #f9fafb; border-radius: 12px; }
.stat-item .stat-label { display: block; font-size: 0.75rem; color: #6b7280; margin-bottom: 0.5rem; }
.stat-item .stat-value { display: block; font-size: 1.5rem; font-weight: 700; color: #1f2937; }
.stat-value.pending { color: #f59e0b; }
.stat-value.processing { color: #3b82f6; }
.stat-value.delivered { color: #10b981; }
.stat-value.cancelled { color: #ef4444; }
.stat-value.active { color: #10b981; }
.stat-value.closed { color: #6b7280; }
.stat-value.online { color: #10b981; }
.stat-value.on-delivery { color: #3b82f6; }
.stat-value.offline { color: #6b7280; }

.activity-section { background: white; border-radius: 16px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.activity-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.activity-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: #f9fafb; border-radius: 12px; transition: all 0.3s; }
.activity-item:hover { background: #f3f4f6; transform: translateX(4px); }
.activity-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.25rem; }
.activity-content { flex: 1; }
.activity-text { font-weight: 500; color: #1f2937; margin-bottom: 0.25rem; }
.activity-time { font-size: 0.75rem; color: #6b7280; }

@media (max-width: 768px) {
  .comprehensive-dashboard { padding: 1rem; }
  .page-header { flex-direction: column; gap: 1rem; }
  .stats-grid, .charts-grid, .management-grid { grid-template-columns: 1fr; }
}
</style>
