{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}

{% block content %}
<style>
  :root {
    --primary-color: #667eea;
    --primary-dark: #764ba2;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --info-color: #3b82f6;
    --bg-card: #ffffff;
    --border-color: #e2e8f0;
    --text-dark: #1e293b;
    --text-light: #64748b;
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.15);
  }

  /* Dashboard Header */
  .dashboard-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-lg);
  }

  .dashboard-title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
  }

  .dashboard-period {
    font-size: 1.1rem;
    opacity: 0.95;
    font-weight: 600;
  }

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

  .stat-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 1.75rem;
    box-shadow: var(--shadow-md);
    border: 2px solid var(--border-color);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--card-color);
  }

  .stat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
  }

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

  .stat-icon {
    font-size: 2.5rem;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--card-color);
    opacity: 0.15;
  }

  .stat-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
  }

  .stat-change {
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .stat-change.positive { color: var(--success-color); }
  .stat-change.negative { color: var(--danger-color); }

  /* Color variants */
  .stat-card.orders { --card-color: #3b82f6; }
  .stat-card.revenue { --card-color: #10b981; }
  .stat-card.expenses { --card-color: #ef4444; }
  .stat-card.profit { --card-color: #8b5cf6; }
  .stat-card.stock { --card-color: #f59e0b; }
  .stat-card.low-stock { --card-color: #ec4899; }

  /* Charts Section */
  .charts-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
  }

  .chart-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 1.75rem;
    box-shadow: var(--shadow-md);
    border: 2px solid var(--border-color);
  }

  .chart-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  /* Recent Activity */
  .activity-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 1.75rem;
    box-shadow: var(--shadow-md);
    border: 2px solid var(--border-color);
    margin-bottom: 2rem;
  }

  .activity-item {
    padding: 1rem;
    border-left: 3px solid var(--item-color);
    background: linear-gradient(90deg, rgba(0,0,0,0.02) 0%, transparent 100%);
    margin-bottom: 1rem;
    border-radius: 0 8px 8px 0;
    transition: all 0.2s ease;
  }

  .activity-item:hover {
    background: linear-gradient(90deg, rgba(0,0,0,0.04) 0%, transparent 100%);
    transform: translateX(5px);
  }

  .activity-item.order { --item-color: #3b82f6; }
  .activity-item.expense { --item-color: #ef4444; }
  .activity-item.stock { --item-color: #f59e0b; }

  .activity-time {
    font-size: 0.8rem;
    color: var(--text-light);
    font-weight: 600;
  }

  .activity-desc {
    font-weight: 600;
    color: var(--text-dark);
    margin-top: 0.25rem;
  }

  /* Quick Actions */
  .quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .action-btn {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  .action-btn:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--btn-color);
  }

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

  .action-label {
    font-weight: 700;
    color: var(--text-dark);
    font-size: 1rem;
  }

  .action-btn.orders { --btn-color: #3b82f6; }
  .action-btn.stock { --btn-color: #10b981; }
  .action-btn.expenses { --btn-color: #ef4444; }
  .action-btn.profit { --btn-color: #8b5cf6; }

  /* Mobile Responsive */
  @media (max-width: 768px) {
    .dashboard-title {
      font-size: 1.5rem;
    }

    .stats-grid {
      grid-template-columns: 1fr;
    }

    .charts-section {
      grid-template-columns: 1fr;
    }

    .quick-actions {
      grid-template-columns: repeat(2, 1fr);
    }

    .stat-value {
      font-size: 1.75rem;
    }
  }

  @media (max-width: 576px) {
    .dashboard-header {
      padding: 1.5rem;
    }

    .quick-actions {
      grid-template-columns: 1fr;
    }
  }
</style>

<div class="dashboard-header">
  <div class="dashboard-title">Dashboard Overview</div>
  <div class="dashboard-period">
    Current Period: {{ current_period.start_date }} to {{ current_period.end_date }}
  </div>
</div>

<!-- Statistics Cards -->
<div class="stats-grid">
  <div class="stat-card orders">
    <div class="stat-header">
      <div>
        <div class="stat-label">Total Orders</div>
        <div class="stat-value">{{ stats.total_orders }}</div>
        <div class="stat-change {{ 'positive' if stats.orders_change >= 0 else 'negative' }}">
          {% if stats.orders_change >= 0 %}↑{% else %}↓{% endif %}
          {{ stats.orders_change }}% from last period
        </div>
      </div>
      <div class="stat-icon">📦</div>
    </div>
  </div>

  <div class="stat-card revenue">
    <div class="stat-header">
      <div>
        <div class="stat-label">Total Revenue</div>
        <div class="stat-value">Rs. {{ "{:,.2f}".format(stats.total_revenue) }}</div>
        <div class="stat-change {{ 'positive' if stats.revenue_change >= 0 else 'negative' }}">
          {% if stats.revenue_change >= 0 %}↑{% else %}↓{% endif %}
          {{ stats.revenue_change }}% from last period
        </div>
      </div>
      <div class="stat-icon">💰</div>
    </div>
  </div>

  <div class="stat-card expenses">
    <div class="stat-header">
      <div>
        <div class="stat-label">Total Expenses</div>
        <div class="stat-value">Rs. {{ "{:,.2f}".format(stats.total_expenses) }}</div>
        <div class="stat-change {{ 'negative' if stats.expenses_change >= 0 else 'positive' }}">
          {% if stats.expenses_change >= 0 %}↑{% else %}↓{% endif %}
          {{ stats.expenses_change }}% from last period
        </div>
      </div>
      <div class="stat-icon">💸</div>
    </div>
  </div>

  <div class="stat-card profit">
    <div class="stat-header">
      <div>
        <div class="stat-label">Net Profit</div>
        <div class="stat-value" style="color: {{ '#10b981' if stats.net_profit >= 0 else '#ef4444' }}">
          Rs. {{ "{:,.2f}".format(stats.net_profit) }}
        </div>
        <div class="stat-change {{ 'positive' if stats.profit_change >= 0 else 'negative' }}">
          {% if stats.profit_change >= 0 %}↑{% else %}↓{% endif %}
          {{ stats.profit_change }}% from last period
        </div>
      </div>
      <div class="stat-icon">📈</div>
    </div>
  </div>


  <div class="stat-card profit">
    <div class="stat-header">
      <div>
        <div class="stat-label">Gross Sales Profit</div>
        <div class="stat-value">Rs. {{ "{:,.2f}".format(stats.gross_profit) }}</div>
        <div class="stat-change" style="color: var(--text-light);">Sales - item cost</div>
      </div>
      <div class="stat-icon">💹</div>
    </div>
  </div>

  <div class="stat-card stock">
    <div class="stat-header">
      <div>
        <div class="stat-label">Stock Items</div>
        <div class="stat-value">{{ stats.total_stock_items }}</div>
        <div class="stat-change" style="color: var(--text-light);">
          Total Quantity: {{ stats.total_stock_quantity }}
        </div>
      </div>
      <div class="stat-icon">📦</div>
    </div>
  </div>

  <div class="stat-card low-stock">
    <div class="stat-header">
      <div>
        <div class="stat-label">Low Stock Alert</div>
        <div class="stat-value">{{ stats.low_stock_items }}</div>
        <div class="stat-change" style="color: var(--danger-color);">
          Items 5 or below
        </div>
      </div>
      <div class="stat-icon">⚠️</div>
    </div>
  </div>
</div>

<!-- Quick Actions -->
<div class="activity-card">
  <div class="chart-title">Quick Actions</div>
  <div class="quick-actions">
    <a href="{{ url_for('new_invoice') }}" class="action-btn orders">
      <div class="action-icon">🛒</div>
      <div class="action-label">New Order</div>
    </a>
    <a href="{{ url_for('stock_manage') }}" class="action-btn stock">
      <div class="action-icon">📦</div>
      <div class="action-label">Manage Stock</div>
    </a>
    <a href="{{ url_for('manage_expenses') }}" class="action-btn expenses">
      <div class="action-icon">💰</div>
      <div class="action-label">Add Expense</div>
    </a>
    <a href="{{ url_for('calculate_profit') }}" class="action-btn profit">
      <div class="action-icon">📊</div>
      <div class="action-label">View Profit</div>
    </a>
    <a href="{{ url_for('global_search') }}" class="action-btn orders">
      <div class="action-icon">🔍</div>
      <div class="action-label">Customer Search</div>
    </a>
    <a href="{{ url_for('manage_imei') }}" class="action-btn stock">
      <div class="action-icon">📱</div>
      <div class="action-label">IMEI / Warranty</div>
    </a>
    <a href="{{ url_for('backups') }}" class="action-btn profit">
      <div class="action-icon">🛡️</div>
      <div class="action-label">Backup</div>
    </a>

  </div>
</div>

<!-- Charts -->
<div class="charts-section">
  <div class="chart-card">
    <div class="chart-title">Revenue vs Expenses</div>
    <canvas id="revenueExpensesChart"></canvas>
  </div>

  <div class="chart-card">
    <div class="chart-title">Orders Overview</div>
    <canvas id="ordersChart"></canvas>
  </div>

  <div class="chart-card">
    <div class="chart-title">Sales by Platform</div>
    <canvas id="platformChart"></canvas>
  </div>

  <div class="chart-card">
    <div class="chart-title">Stock Status</div>
    <canvas id="stockChart"></canvas>
  </div>
</div>

<!-- Recent Activity -->
<div class="activity-card">
  <div class="chart-title">Recent Activity</div>
  {% for activity in recent_activities %}
  <div class="activity-item {{ activity.type }}">
    <div class="activity-time">{{ activity.time }}</div>
    <div class="activity-desc">{{ activity.description }}</div>
  </div>
  {% else %}
  <p style="color: var(--text-light); text-align: center; padding: 2rem;">No recent activity</p>
  {% endfor %}
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
  const chartConfig = {
    responsive: true,
    maintainAspectRatio: true,
    plugins: {
      legend: {
        display: true,
        position: 'bottom',
        labels: { padding: 15, font: { size: 12, weight: '600' } }
      }
    }
  };

  // Revenue vs Expenses Chart
  new Chart(document.getElementById('revenueExpensesChart'), {
    type: 'bar',
    data: {
      labels: ['Revenue', 'Expenses', 'Profit'],
      datasets: [{
        label: 'Amount (Rs.)',
        data: [{{ stats.total_revenue }}, {{ stats.total_expenses }}, {{ stats.net_profit }}],
        backgroundColor: ['rgba(16, 185, 129, 0.8)', 'rgba(239, 68, 68, 0.8)', 'rgba(139, 92, 246, 0.8)'],
        borderColor: ['rgb(16, 185, 129)', 'rgb(239, 68, 68)', 'rgb(139, 92, 246)'],
        borderWidth: 2,
        borderRadius: 8
      }]
    },
    options: {
      ...chartConfig,
      scales: {
        y: {
          beginAtZero: true,
          ticks: { callback: value => 'Rs. ' + value.toLocaleString() }
        }
      }
    }
  });

  // Orders Chart
  new Chart(document.getElementById('ordersChart'), {
    type: 'doughnut',
    data: {
      labels: ['Completed', 'Pending'],
      datasets: [{
        data: [{{ stats.total_orders }}, 0],
        backgroundColor: ['rgba(16, 185, 129, 0.8)', 'rgba(203, 213, 225, 0.8)'],
        borderColor: ['rgb(16, 185, 129)', 'rgb(203, 213, 225)'],
        borderWidth: 2
      }]
    },
    options: chartConfig
  });

  // Platform Chart - FIXED
  new Chart(document.getElementById('platformChart'), {
    type: 'pie',
    data: {
      labels: {{ platform_labels_json | safe }},
      datasets: [{
        data: {{ platform_values_json | safe }},
        backgroundColor: [
          'rgba(59, 130, 246, 0.8)',
          'rgba(16, 185, 129, 0.8)',
          'rgba(245, 158, 11, 0.8)',
          'rgba(139, 92, 246, 0.8)'
        ],
        borderWidth: 2
      }]
    },
    options: chartConfig
  });

  // Stock Chart
  new Chart(document.getElementById('stockChart'), {
    type: 'bar',
    data: {
      labels: ['Available Stock', 'Low Stock', 'Out of Stock'],
      datasets: [{
        label: 'Items',
        data: [{{ stats.total_stock_items - stats.low_stock_items }}, {{ stats.low_stock_items }}, 0],
        backgroundColor: ['rgba(16, 185, 129, 0.8)', 'rgba(245, 158, 11, 0.8)', 'rgba(239, 68, 68, 0.8)'],
        borderColor: ['rgb(16, 185, 129)', 'rgb(245, 158, 11)', 'rgb(239, 68, 68)'],
        borderWidth: 2,
        borderRadius: 8
      }]
    },
    options: {
      ...chartConfig,
      scales: { y: { beginAtZero: true } }
    }
  });
</script>

{% endblock %}