<template>
  <div class="enterprise-order-management">
    <!-- Command Center Header -->
    <div class="command-header">
      <div class="header-left">
        <h1 class="command-title">🎯 Order Command Center</h1>
        <div class="live-indicator">
          <div class="pulse-dot"></div>
          <span>Live Monitoring</span>
        </div>
      </div>
      <div class="header-actions">
        <button @click="runRiskDetection" class="action-btn risk-btn">
          <span class="icon">🔍</span>
          Risk Scan
        </button>
        <button @click="showBulkActions = true" class="action-btn bulk-btn">
          <span class="icon">⚡</span>
          Bulk Actions
        </button>
        <button @click="exportData" class="action-btn export-btn">
          <span class="icon">📊</span>
          Export
        </button>
      </div>
    </div>

    <!-- Real-time Metrics Dashboard -->
    <div class="metrics-grid">
      <div class="metric-card critical">
        <div class="metric-icon">🚨</div>
        <div class="metric-content">
          <div class="metric-value">{{ criticalAlerts }}</div>
          <div class="metric-label">Critical Alerts</div>
        </div>
        <div class="metric-trend up">+12%</div>
      </div>
      <div class="metric-card revenue">
        <div class="metric-icon">💰</div>
        <div class="metric-content">
          <div class="metric-value">Rs. {{ formatCurrency(totalRevenue) }}</div>
          <div class="metric-label">Live Revenue</div>
        </div>
        <div class="metric-trend up">+8.5%</div>
      </div>
      <div class="metric-card orders">
        <div class="metric-icon">📦</div>
        <div class="metric-content">
          <div class="metric-value">{{ activeOrders }}</div>
          <div class="metric-label">Active Orders</div>
        </div>
        <div class="metric-trend down">-2.1%</div>
      </div>
      <div class="metric-card commission">
        <div class="metric-icon">🏦</div>
        <div class="metric-content">
          <div class="metric-value">Rs. {{ formatCurrency(platformCommission) }}</div>
          <div class="metric-label">Platform Commission</div>
        </div>
        <div class="metric-trend up">+15.2%</div>
      </div>
    </div>

    <!-- Advanced Filters & Search -->
    <div class="control-panel">
      <div class="search-section">
        <div class="search-input-group">
          <input 
            v-model="searchQuery" 
            type="text" 
            placeholder="Search orders, restaurants, customers..."
            class="enterprise-search"
          >
          <button class="search-btn">🔍</button>
        </div>
      </div>
      
      <div class="filter-section">
        <select v-model="statusFilter" class="filter-select">
          <option value="all">All Status</option>
          <option value="pending">Pending</option>
          <option value="critical">Critical Issues</option>
          <option value="delivered">Delivered</option>
        </select>
        
        <select v-model="timeFilter" class="filter-select">
          <option value="today">Today</option>
          <option value="week">This Week</option>
          <option value="month">This Month</option>
        </select>
        
        <select v-model="riskFilter" class="filter-select">
          <option value="all">All Risk Levels</option>
          <option value="high">High Risk</option>
          <option value="flagged">Flagged Orders</option>
        </select>
      </div>

      <div class="view-controls">
        <button 
          @click="viewMode = 'grid'" 
          :class="['view-btn', { active: viewMode === 'grid' }]"
        >
          ⊞ Grid
        </button>
        <button 
          @click="viewMode = 'list'" 
          :class="['view-btn', { active: viewMode === 'list' }]"
        >
          ☰ List
        </button>
        <button 
          @click="viewMode = 'analytics'" 
          :class="['view-btn', { active: viewMode === 'analytics' }]"
        >
          📈 Analytics
        </button>
      </div>
    </div>

    <!-- Restaurant Command Cards -->
    <div v-if="viewMode === 'grid'" class="restaurant-command-grid">
      <div 
        v-for="restaurant in filteredRestaurants" 
        :key="restaurant.id" 
        class="restaurant-command-card"
        :class="{ 
          'blocked': restaurant.is_blocked,
          'high-risk': restaurant.risk_level === 'high',
          'critical': restaurant.critical_alerts > 0 
        }"
      >
        <!-- Restaurant Header -->
        <div class="restaurant-header">
          <div class="restaurant-info">
            <div class="restaurant-name">
              {{ restaurant.name }}
              <span v-if="restaurant.is_blocked" class="blocked-badge">🚫 BLOCKED</span>
              <span v-if="restaurant.critical_alerts > 0" class="critical-badge">🚨 {{ restaurant.critical_alerts }}</span>
            </div>
            <div class="restaurant-meta">
              <span class="location">📍 {{ getRestaurantTown(restaurant.address) }}</span>
              <span class="status" :class="restaurant.operational_status">
                {{ restaurant.operational_status }}
              </span>
            </div>
          </div>
          
          <div class="restaurant-actions">
            <button 
              @click="showRestaurantControls(restaurant)" 
              class="control-btn"
              :class="{ 'blocked': restaurant.is_blocked }"
            >
              ⚙️
            </button>
          </div>
        </div>

        <!-- Performance Metrics -->
        <div class="performance-grid">
          <div class="perf-metric">
            <div class="perf-value">{{ restaurant.today_orders }}</div>
            <div class="perf-label">Today Orders</div>
          </div>
          <div class="perf-metric">
            <div class="perf-value">Rs. {{ formatCurrency(restaurant.today_revenue) }}</div>
            <div class="perf-label">Revenue</div>
          </div>
          <div class="perf-metric">
            <div class="perf-value">{{ restaurant.completion_rate }}%</div>
            <div class="perf-label">Completion</div>
          </div>
          <div class="perf-metric">
            <div class="perf-value">Rs. {{ formatCurrency(restaurant.commission) }}</div>
            <div class="perf-label">Commission</div>
          </div>
        </div>

        <!-- Order Management Section -->
        <div class="order-management">
          <div class="section-header">
            <span class="section-title">Orders ({{ restaurant.orders.length }})</span>
            <button 
              @click="toggleRestaurantOrders(restaurant.id)"
              class="toggle-btn"
            >
              {{ expandedRestaurants.includes(restaurant.id) ? '▼' : '▶' }}
            </button>
          </div>

          <div v-if="expandedRestaurants.includes(restaurant.id)" class="orders-container">
            <div 
              v-for="order in restaurant.orders" 
              :key="order.id"
              class="enterprise-order-card"
              :class="{ 
                'flagged': order.flags?.length > 0,
                'late': order.is_late,
                'high-value': order.total > 5000 
              }"
            >
              <div class="order-header">
                <div class="order-id">
                  <span class="order-number">#{{ order.order_number }}</span>
                  <div class="order-badges">
                    <span v-if="order.flags?.length > 0" class="flag-badge">
                      🚩 {{ order.flags.length }}
                    </span>
                    <span v-if="order.is_late" class="late-badge">⏰ LATE</span>
                    <span v-if="order.total > 5000" class="high-value-badge">💎 HIGH</span>
                  </div>
                </div>
                <div class="order-actions">
                  <button @click="showOrderDetails(order)" class="action-icon">👁️</button>
                  <button @click="showOrderControls(order)" class="action-icon">⚙️</button>
                </div>
              </div>

              <div class="order-content">
                <div class="order-info">
                  <div class="customer-info">
                    <span class="customer-name">{{ order.customer_name }}</span>
                    <span class="order-time">{{ formatTime(order.created_at) }}</span>
                  </div>
                  <div class="order-details">
                    <span class="order-value">Rs. {{ formatCurrency(order.total) }}</span>
                    <span class="item-count">{{ order.items_count }} items</span>
                  </div>
                </div>

                <div class="status-section">
                  <select 
                    v-model="order.status" 
                    @change="updateOrderStatus(order)"
                    class="status-select"
                    :class="order.status"
                  >
                    <option value="pending">Pending</option>
                    <option value="accepted">Accepted</option>
                    <option value="preparing">Preparing</option>
                    <option value="ready_for_pickup">Ready</option>
                    <option value="picked_up">Picked Up</option>
                    <option value="delivered">Delivered</option>
                  </select>
                </div>
              </div>

              <!-- Quick Actions -->
              <div class="quick-actions">
                <button @click="forceCancel(order)" class="quick-btn cancel">Cancel</button>
                <button @click="reassignDelivery(order)" class="quick-btn reassign">Reassign</button>
                <button @click="processRefund(order)" class="quick-btn refund">Refund</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Analytics View -->
    <div v-if="viewMode === 'analytics'" class="analytics-dashboard">
      <div class="analytics-grid">
        <div class="chart-card">
          <h3>Order Volume Trends</h3>
          <div class="chart-placeholder">📊 Chart Component</div>
        </div>
        <div class="chart-card">
          <h3>Revenue Analytics</h3>
          <div class="chart-placeholder">📈 Chart Component</div>
        </div>
        <div class="chart-card">
          <h3>Risk Distribution</h3>
          <div class="chart-placeholder">🎯 Chart Component</div>
        </div>
        <div class="chart-card">
          <h3>Performance Metrics</h3>
          <div class="chart-placeholder">⚡ Chart Component</div>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: 'EnterpriseOrderManagement',
  setup() {
    const restaurants = ref([])
    const loading = ref(true)
    const searchQuery = ref('')
    const statusFilter = ref('all')
    const timeFilter = ref('today')
    const riskFilter = ref('all')
    const viewMode = ref('grid')
    const expandedRestaurants = ref([])
    const selectedOrders = ref([])
    const selectedOrder = ref(null)
    const controlOrder = ref(null)
    const controlRestaurant = ref(null)
    const orderControlsVisible = ref(false)
    const restaurantControlsVisible = ref(false)
    const showBulkActions = ref(false)

    // Computed metrics
    const criticalAlerts = computed(() => 15)
    const totalRevenue = computed(() => 125000.50)
    const activeOrders = computed(() => 89)
    const platformCommission = computed(() => 18750.75)

    const filteredRestaurants = computed(() => {
      return restaurants.value.filter(restaurant => {
        const matchesSearch = !searchQuery.value || 
          restaurant.name.toLowerCase().includes(searchQuery.value.toLowerCase())
        const matchesStatus = statusFilter.value === 'all' || 
          restaurant.orders.some(order => order.status === statusFilter.value)
        return matchesSearch && matchesStatus
      })
    })

    const loadOrders = async () => {
      try {
        loading.value = true
        const token = localStorage.getItem('token')
        const response = await axios.get('/api/super-admin/orders', {
          headers: { 'Authorization': `Bearer ${token}` }
        })
        
        if (response.data.success) {
          restaurants.value = response.data.data.map(restaurant => ({
            ...restaurant,
            is_blocked: Math.random() > 0.8,
            critical_alerts: Math.floor(Math.random() * 3),
            risk_level: Math.random() > 0.7 ? 'high' : 'normal',
            today_orders: Math.floor(Math.random() * 20) + 5,
            today_revenue: Math.random() * 50000 + 10000,
            completion_rate: Math.floor(Math.random() * 20) + 80,
            commission: Math.random() * 5000 + 1000,
            operational_status: ['open', 'busy', 'closed'][Math.floor(Math.random() * 3)]
          }))
        }
      } catch (error) {
        console.error('Error loading orders:', error)
      } finally {
        loading.value = false
      }
    }

    const formatCurrency = (amount) => {
      return parseFloat(amount).toLocaleString('en-US', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      })
    }

    const formatTime = (dateString) => {
      return new Date(dateString).toLocaleTimeString('en-US', {
        hour: '2-digit',
        minute: '2-digit'
      })
    }

    const getRestaurantTown = (address) => {
      if (!address) return 'Unknown'
      const parts = address.split(',')
      return parts[parts.length - 1]?.trim() || 'Unknown'
    }

    const toggleRestaurantOrders = (restaurantId) => {
      const index = expandedRestaurants.value.indexOf(restaurantId)
      if (index > -1) {
        expandedRestaurants.value.splice(index, 1)
      } else {
        expandedRestaurants.value.push(restaurantId)
      }
    }

    const showOrderDetails = (order) => {
      selectedOrder.value = order
    }

    const showOrderControls = (order) => {
      controlOrder.value = order
      orderControlsVisible.value = true
    }

    const showRestaurantControls = (restaurant) => {
      controlRestaurant.value = restaurant
      restaurantControlsVisible.value = true
    }

    const updateOrderStatus = async (order) => {
      console.log('Updating order status:', order.id, order.status)
    }

    const forceCancel = (order) => {
      console.log('Force cancel order:', order.id)
    }

    const reassignDelivery = (order) => {
      console.log('Reassign delivery:', order.id)
    }

    const processRefund = (order) => {
      console.log('Process refund:', order.id)
    }

    const runRiskDetection = () => {
      console.log('Running risk detection...')
    }

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

    const handleOrderAction = (action, order) => {
      console.log('Order action:', action, order)
    }

    const handleRestaurantAction = (action, restaurant) => {
      console.log('Restaurant action:', action, restaurant)
    }

    const handleBulkAction = (action, orders) => {
      console.log('Bulk action:', action, orders)
    }

    onMounted(loadOrders)

    return {
      restaurants,
      loading,
      searchQuery,
      statusFilter,
      timeFilter,
      riskFilter,
      viewMode,
      expandedRestaurants,
      selectedOrders,
      selectedOrder,
      controlOrder,
      controlRestaurant,
      orderControlsVisible,
      restaurantControlsVisible,
      showBulkActions,
      criticalAlerts,
      totalRevenue,
      activeOrders,
      platformCommission,
      filteredRestaurants,
      formatCurrency,
      formatTime,
      getRestaurantTown,
      toggleRestaurantOrders,
      showOrderDetails,
      showOrderControls,
      showRestaurantControls,
      updateOrderStatus,
      forceCancel,
      reassignDelivery,
      processRefund,
      runRiskDetection,
      exportData,
      handleOrderAction,
      handleRestaurantAction,
      handleBulkAction
    }
  }
}
</script>

<style scoped>
.enterprise-order-management {
  min-height: 100vh;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #f8fafc;
  padding: 1.5rem;
}

/* Command Header */
.command-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding: 1.5rem 2rem;
  background: rgba(15, 23, 42, 0.8);
  border-radius: 20px;
  border: 1px solid rgba(59, 130, 246, 0.2);
  backdrop-filter: blur(20px);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.command-title {
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}

.live-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #10b981;
}

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

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

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

.action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.risk-btn {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.bulk-btn {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
}

.export-btn {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
}

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

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

.metric-card {
  background: rgba(15, 23, 42, 0.6);
  border-radius: 20px;
  padding: 2rem;
  border: 1px solid rgba(59, 130, 246, 0.1);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: all 0.3s ease;
}

.metric-card:hover {
  transform: translateY(-5px);
  border-color: rgba(59, 130, 246, 0.3);
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.metric-card.critical {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.05);
}

.metric-card.revenue {
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.05);
}

.metric-card.orders {
  border-color: rgba(59, 130, 246, 0.3);
  background: rgba(59, 130, 246, 0.05);
}

.metric-card.commission {
  border-color: rgba(139, 92, 246, 0.3);
  background: rgba(139, 92, 246, 0.05);
}

.metric-icon {
  font-size: 3rem;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 20px;
}

.metric-content {
  flex: 1;
}

.metric-value {
  font-size: 2rem;
  font-weight: 800;
  color: #f8fafc;
  margin-bottom: 0.5rem;
}

.metric-label {
  color: #94a3b8;
  font-size: 0.875rem;
  font-weight: 500;
}

.metric-trend {
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 8px;
}

.metric-trend.up {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}

.metric-trend.down {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

/* Control Panel */
.control-panel {
  display: flex;
  gap: 2rem;
  align-items: center;
  margin-bottom: 2rem;
  padding: 1.5rem 2rem;
  background: rgba(15, 23, 42, 0.6);
  border-radius: 20px;
  border: 1px solid rgba(59, 130, 246, 0.1);
  backdrop-filter: blur(20px);
}

.search-section {
  flex: 1;
}

.search-input-group {
  display: flex;
  align-items: center;
  background: rgba(30, 41, 59, 0.8);
  border-radius: 12px;
  border: 1px solid rgba(59, 130, 246, 0.2);
  overflow: hidden;
}

.enterprise-search {
  flex: 1;
  padding: 1rem 1.5rem;
  background: transparent;
  border: none;
  color: #f8fafc;
  font-size: 1rem;
  outline: none;
}

.enterprise-search::placeholder {
  color: #64748b;
}

.search-btn {
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border: none;
  color: white;
  cursor: pointer;
  font-size: 1.2rem;
}

.filter-section {
  display: flex;
  gap: 1rem;
}

.filter-select {
  padding: 0.75rem 1rem;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  color: #f8fafc;
  font-size: 0.875rem;
  min-width: 150px;
}

.view-controls {
  display: flex;
  gap: 0.5rem;
}

.view-btn {
  padding: 0.75rem 1rem;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  color: #94a3b8;
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.3s ease;
}

.view-btn.active {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  border-color: #3b82f6;
}

/* Restaurant Command Grid */
.restaurant-command-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
}

.restaurant-command-card {
  background: rgba(15, 23, 42, 0.8);
  border-radius: 24px;
  border: 1px solid rgba(59, 130, 246, 0.2);
  backdrop-filter: blur(20px);
  overflow: hidden;
  transition: all 0.3s ease;
}

.restaurant-command-card:hover {
  transform: translateY(-8px);
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 25px 50px rgba(0,0,0,0.3);
}

.restaurant-command-card.blocked {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.05);
}

.restaurant-command-card.high-risk {
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.05);
}

.restaurant-command-card.critical {
  border-color: rgba(239, 68, 68, 0.7);
  background: rgba(239, 68, 68, 0.1);
  animation: criticalPulse 2s infinite;
}

@keyframes criticalPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
}

.restaurant-header {
  padding: 2rem;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.restaurant-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: #f8fafc;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.blocked-badge {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  padding: 0.25rem 0.75rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
}

.critical-badge {
  background: rgba(239, 68, 68, 0.3);
  color: #ef4444;
  padding: 0.25rem 0.75rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  animation: pulse 1s infinite;
}

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

.location {
  color: #94a3b8;
  font-size: 0.875rem;
}

.status {
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.status.open {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}

.status.busy {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}

.status.closed {
  background: rgba(107, 114, 128, 0.2);
  color: #6b7280;
}

.control-btn {
  padding: 0.75rem;
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 12px;
  color: #3b82f6;
  cursor: pointer;
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

.control-btn:hover {
  background: rgba(59, 130, 246, 0.3);
  transform: scale(1.1);
}

.control-btn.blocked {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

/* Performance Grid */
.performance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding: 1.5rem 2rem;
  background: rgba(30, 41, 59, 0.3);
}

.perf-metric {
  text-align: center;
}

.perf-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: #f8fafc;
  margin-bottom: 0.25rem;
}

.perf-label {
  font-size: 0.75rem;
  color: #94a3b8;
  text-transform: uppercase;
  font-weight: 500;
}

/* Order Management */
.order-management {
  padding: 1.5rem 2rem 2rem;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.section-title {
  font-weight: 600;
  color: #f8fafc;
}

.toggle-btn {
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 6px;
  color: #3b82f6;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.875rem;
}

.orders-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.enterprise-order-card {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 16px;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.enterprise-order-card:hover {
  border-color: rgba(59, 130, 246, 0.4);
  transform: translateX(8px);
}

.enterprise-order-card.flagged {
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.05);
}

.enterprise-order-card.late {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.05);
}

.enterprise-order-card.high-value {
  border-color: rgba(139, 92, 246, 0.5);
  background: rgba(139, 92, 246, 0.05);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.order-id {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.order-number {
  font-weight: 700;
  color: #f8fafc;
  font-size: 1rem;
}

.order-badges {
  display: flex;
  gap: 0.5rem;
}

.flag-badge, .late-badge, .high-value-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
}

.flag-badge {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}

.late-badge {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.high-value-badge {
  background: rgba(139, 92, 246, 0.2);
  color: #8b5cf6;
}

.order-actions {
  display: flex;
  gap: 0.5rem;
}

.action-icon {
  padding: 0.5rem;
  background: rgba(59, 130, 246, 0.2);
  border: none;
  border-radius: 8px;
  color: #3b82f6;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.action-icon:hover {
  background: rgba(59, 130, 246, 0.3);
  transform: scale(1.1);
}

.order-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.customer-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.customer-name {
  font-weight: 600;
  color: #f8fafc;
}

.order-time {
  font-size: 0.875rem;
  color: #94a3b8;
}

.order-details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: right;
}

.order-value {
  font-weight: 700;
  color: #10b981;
  font-size: 1.125rem;
}

.item-count {
  font-size: 0.875rem;
  color: #94a3b8;
}

.status-select {
  padding: 0.5rem 1rem;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  color: #f8fafc;
  font-size: 0.875rem;
}

.status-select.pending {
  border-color: rgba(245, 158, 11, 0.5);
}

.status-select.delivered {
  border-color: rgba(16, 185, 129, 0.5);
}

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

.quick-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.quick-btn.cancel {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.quick-btn.reassign {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.quick-btn.refund {
  background: rgba(139, 92, 246, 0.2);
  color: #8b5cf6;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

.quick-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Analytics Dashboard */
.analytics-dashboard {
  padding: 2rem;
}

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

.chart-card {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 20px;
  padding: 2rem;
  backdrop-filter: blur(20px);
}

.chart-card h3 {
  color: #f8fafc;
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.chart-placeholder {
  height: 300px;
  background: rgba(30, 41, 59, 0.5);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: #64748b;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .restaurant-command-grid {
    grid-template-columns: 1fr;
  }
  
  .control-panel {
    flex-direction: column;
    gap: 1rem;
  }
  
  .performance-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .enterprise-order-management {
    padding: 1rem;
  }
  
  .command-header {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .metrics-grid {
    grid-template-columns: 1fr;
  }
  
  .order-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .quick-actions {
    justify-content: flex-start;
  }
}
</style>