{% extends 'base.html' %}

{% block title %}Management Dashboard - Optinet Global Links{% endblock %}

{% block extra_css %}
<style>
    .metric-card {
        background: white;
        border-radius: 8px;
        padding: 1.5rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        border-left: 4px solid #007bff;
        transition: transform 0.2s;
    }
    
    .metric-card:hover {
        transform: translateY(-2px);
    }
    
    .metric-value {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 0.5rem;
    }
    
    .metric-label {
        color: #6c757d;
        font-size: 0.9rem;
    }
    
    .trend-indicator {
        font-size: 0.8rem;
        margin-left: 0.5rem;
    }
    
    .trend-up { color: #28a745; }
    .trend-down { color: #dc3545; }
    .trend-neutral { color: #6c757d; }
    
    .alert-item {
        border-left: 4px solid #dc3545;
        background: #fff5f5;
        border-radius: 4px;
        padding: 0.5rem 0.75rem;
        margin-bottom: 0.5rem;
        cursor: pointer;
        transition: background-color 0.2s;
        text-decoration: none;
        color: inherit;
        display: block;
    }
    
    .alert-item:hover {
        background: #ffe6e6;
        text-decoration: none;
        color: inherit;
    }
    
    .alert-item strong {
        font-size: 0.9rem;
    }
    
    .alert-item small {
        font-size: 0.75rem;
    }
    
    .network-status {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        margin-right: 8px;
    }
    
    .status-online { background-color: #28a745; }
    .status-warning { background-color: #ffc107; }
    .status-offline { background-color: #dc3545; }
    
    .kpi-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
        margin-bottom: 2rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <!-- Header with Actions -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1><i class="bi bi-speedometer2"></i> Management Dashboard</h1>
            <p class="text-muted mb-0">Real-time system overview and analytics</p>
        </div>
        <div class="btn-group" role="group">
            <a href="{% url 'customers:customer_add' %}" class="btn btn-primary">
                <i class="bi bi-person-plus"></i> Add Customer
            </a>
            <a href="{% url 'hr:service_list' %}" class="btn btn-success">
                <i class="bi bi-box-seam"></i> Add Service
            </a>
            <button class="btn btn-outline-secondary" onclick="refreshDashboard()">
                <i class="bi bi-arrow-clockwise"></i> Refresh
            </button>
        </div>
    </div>

    <!-- System Alerts -->
    {% if urgent_tickets or overdue_customers > 5 or open_tickets > 20 %}
    <div class="alert alert-warning mb-4" role="alert">
        <h5><i class="bi bi-exclamation-triangle"></i> System Alerts</h5>
        <div class="row">
            {% if urgent_tickets %}
            <div class="col-md-4">
                <a href="{% url 'tickets:ticket_list' %}?priority=urgent&status=open" class="alert-item">
                    <strong>{{ urgent_tickets|length }} High Priority Tickets</strong><br>
                    <small>Require immediate attention</small>
                </a>
            </div>
            {% endif %}
            {% if overdue_customers > 5 %}
            <div class="col-md-4">
                <a href="{% url 'billing:invoice_list' %}?status=overdue" class="alert-item">
                    <strong>{{ overdue_customers }} Overdue Accounts</strong><br>
                    <small>Payment collection needed</small>
                </a>
            </div>
            {% endif %}
            {% if open_tickets > 20 %}
            <div class="col-md-4">
                <a href="{% url 'tickets:ticket_list' %}?status=open&created_hours_ago=24" class="alert-item">
                    <strong>{{ open_tickets }} Open Tickets</strong><br>
                    <small>Review workload distribution</small>
                </a>
            </div>
            {% endif %}
            {% if pending_marketing_reports > 0 %}
            <div class="col-md-4">
                <a href="{% url 'customers:marketing_report_list' %}?status=submitted" class="alert-item" style="border-left-color: #007bff; background: #f0f8ff;">
                    <strong>{{ pending_marketing_reports }} New Marketing Reports</strong><br>
                    <small>Awaiting review</small>
                </a>
            </div>
            {% endif %}
        </div>
    </div>
    {% endif %}

    <!-- Enhanced KPI Metrics -->
    <div class="kpi-grid">
        <!-- Customer Metrics -->
        <div class="metric-card">
            <div class="metric-value text-primary">{{ total_customers|default:0 }}</div>
            <div class="metric-label">
                Total Customers
                <span class="trend-indicator trend-up">
                    <i class="bi bi-arrow-up"></i> {{ customer_growth|default:0 }}% this month
                </span>
            </div>
        </div>
        
        <!-- Revenue Metrics -->
        <div class="metric-card">
            <div class="metric-value text-success">KSh {{ total_revenue|floatformat:0|default:0 }}</div>
            <div class="metric-label">
                Monthly Revenue
                <span class="trend-indicator {% if revenue_trend > 0 %}trend-up{% elif revenue_trend < 0 %}trend-down{% else %}trend-neutral{% endif %}">
                    <i class="bi bi-arrow-{% if revenue_trend > 0 %}up{% elif revenue_trend < 0 %}down{% else %}right{% endif %}"></i> 
                    {{ revenue_trend|default:0 }}%
                </span>
            </div>
        </div>
        
        <!-- Network Health -->
        <div class="metric-card">
            <div class="metric-value">
                <span class="network-status {% if network_health.router_status == 'online' %}status-online{% else %}status-offline{% endif %}"></span>
                {{ network_health.uptime|default:"99.9%" }}
            </div>
            <div class="metric-label">
                Network Uptime
                <small class="d-block">{{ network_health.active_connections|default:0 }} active connections</small>
            </div>
        </div>
        
        <!-- Support Efficiency -->
        <div class="metric-card">
            <div class="metric-value text-info">{{ avg_ticket_resolution_time|default:0 }}h</div>
            <div class="metric-label">
                Avg. Resolution Time
                <small class="d-block">{{ open_tickets|default:0 }} tickets open</small>
            </div>
        </div>
        
        <!-- Financial Health -->
        <div class="metric-card">
            <div class="metric-value text-warning">{{ payment_collection_rate|floatformat:1|default:0 }}%</div>
            <div class="metric-label">
                Collection Rate
                <small class="d-block">KSh {{ overdue_amount|floatformat:0|default:0 }} overdue</small>
            </div>
        </div>
        
        <!-- Customer Satisfaction -->
        <div class="metric-card">
            <div class="metric-value text-purple">{{ customer_satisfaction|default:4.2 }}/5</div>
            <div class="metric-label">
                Customer Satisfaction
                <small class="d-block">{{ churn_rate|default:2.1 }}% churn rate</small>
            </div>
        </div>
    </div>

    <!-- Analytics and Monitoring Row -->
    <div class="row mb-4">
        <!-- Revenue Trend Chart -->
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5><i class="bi bi-graph-up"></i> Revenue & Customer Growth Trends</h5>
                    <div class="btn-group btn-group-sm">
                        <button class="btn btn-outline-secondary active" data-period="6months">6M</button>
                        <button class="btn btn-outline-secondary" data-period="1year">1Y</button>
                    </div>
                </div>
                <div class="card-body">
                    <canvas id="revenueChart" height="100"></canvas>
                </div>
            </div>
        </div>
        
        <!-- Network & System Health -->
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h5><i class="bi bi-router"></i> Network Health</h5>
                </div>
                <div class="card-body">
                    <!-- Bandwidth Utilization -->
                    <div class="mb-3">
                        <div class="d-flex justify-content-between">
                            <span>Bandwidth Usage</span>
                            <span>{{ network_health.bandwidth_utilization|default:65 }}%</span>
                        </div>
                        <div class="progress">
                            <div class="progress-bar bg-{% if network_health.bandwidth_utilization < 70 %}success{% elif network_health.bandwidth_utilization < 85 %}warning{% else %}danger{% endif %}" 
                                 style="width: {{ network_health.bandwidth_utilization|default:65 }}%"></div>
                        </div>
                    </div>
                    
                    <!-- Active Connections -->
                    <div class="mb-3">
                        <div class="d-flex justify-content-between">
                            <span>Active Connections</span>
                            <span>{{ network_health.active_connections|default:0 }}/{{ total_customers }}</span>
                        </div>
                        <div class="progress">
                            <div class="progress-bar bg-info" 
                                 style="width: {% widthratio network_health.active_connections total_customers 100 %}%"></div>
                        </div>
                    </div>
                    
                    <!-- System Services -->
                    <div class="list-group list-group-flush">
                        <div class="list-group-item d-flex justify-content-between align-items-center px-0">
                            <span>Router Status</span>
                            <span class="badge bg-{% if network_health.router_status == 'online' %}success{% else %}danger{% endif %}">
                                {{ network_health.router_status|default:"online"|title }}
                            </span>
                        </div>
                        <div class="list-group-item d-flex justify-content-between align-items-center px-0">
                            <span>Database</span>
                            <span class="badge bg-success">Online</span>
                        </div>
                        <div class="list-group-item d-flex justify-content-between align-items-center px-0">
                            <span>Billing System</span>
                            <span class="badge bg-success">Online</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions & Critical Issues -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5><i class="bi bi-lightning"></i> Quick Actions</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-2">
                            <a href="{% url 'customers:customer_list' %}" class="btn btn-outline-primary w-100">
                                <i class="bi bi-list"></i> View All Customers
                            </a>
                        </div>
                        <div class="col-md-6 mb-2">
                            <a href="{% url 'hr:service_list' %}" class="btn btn-outline-success w-100">
                                <i class="bi bi-grid"></i> View All Services
                            </a>
                        </div>
                        <div class="col-md-6 mb-2">
                            <a href="{% url 'billing:invoice_list' %}" class="btn btn-outline-warning w-100">
                                <i class="bi bi-receipt"></i> View Invoices
                            </a>
                        </div>
                        <div class="col-md-6 mb-2">
                            <a href="{% url 'tickets:ticket_list' %}" class="btn btn-outline-info w-100">
                                <i class="bi bi-headset"></i> View Tickets
                            </a>
                        </div>
                        <div class="col-md-6 mb-2">
                            <a href="{% url 'expenditure:dashboard' %}" class="btn btn-outline-secondary w-100">
                                <i class="bi bi-calculator"></i> Expenses
                            </a>
                        </div>
                        <div class="col-md-6 mb-2">
                            <a href="{% url 'customers:marketing_report_list' %}" class="btn btn-outline-secondary w-100">
                                <i class="bi bi-file-text"></i> Reports
                                {% if pending_marketing_reports %}
                                    <span class="badge bg-warning ms-2">{{ pending_marketing_reports }}</span>
                                {% endif %}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5><i class="bi bi-exclamation-triangle text-warning"></i> Critical Issues</h5>
                    <span class="badge bg-danger">{{ critical_issues_count|default:0 }}</span>
                </div>
                <div class="card-body">
                    {% if overdue_customers_list %}
                        <div class="list-group list-group-flush">
                            {% for customer in overdue_customers_list|slice:":5" %}
                                <div class="list-group-item d-flex justify-content-between align-items-center px-0">
                                    <div>
                                        <strong>{{ customer.full_name }}</strong>
                                        <br>
                                        <small class="text-muted">{{ customer.phone }}</small>
                                    </div>
                                    <span class="badge bg-danger">Overdue</span>
                                </div>
                            {% endfor %}
                            {% if overdue_customers > 5 %}
                                <div class="list-group-item px-0 text-center">
                                    <a href="{% url 'billing:invoice_list' %}?status=overdue" class="btn btn-sm btn-outline-danger">
                                        View {{ overdue_customers|add:"-5" }} More
                                    </a>
                                </div>
                            {% endif %}
                        </div>
                    {% else %}
                        <div class="text-center text-muted py-3">
                            <i class="bi bi-check-circle fs-2"></i>
                            <p class="mb-0">No critical issues detected</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Service Performance & Recent Activity -->
    <div class="row">
        <!-- Service Performance Analysis -->
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h5><i class="bi bi-pie-chart"></i> Service Package Performance</h5>
                </div>
                <div class="card-body">
                    {% if service_distribution %}
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>Service</th>
                                        <th>Customers</th>
                                        <th>Revenue</th>
                                        <th>Performance</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for service in service_distribution|slice:":5" %}
                                        <tr>
                                            <td>
                                                <strong>{{ service.name }}</strong><br>
                                                <small class="text-muted">{{ service.speed_mbps }}Mbps</small>
                                            </td>
                                            <td>{{ service.customer_count }}</td>
                                            <td>KSh {{ service.price|floatformat:0 }}</td>
                                            <td>
                                                <div class="progress" style="height: 6px;">
                                                    <div class="progress-bar bg-success" 
                                                         style="width: {% widthratio service.customer_count 50 100 %}%"></div>
                                                </div>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <p class="text-muted">No service data available</p>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Recent Customers -->
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5><i class="bi bi-clock-history"></i> Recent Customers</h5>
                    <a href="{% url 'customers:customer_list' %}" class="btn btn-sm btn-outline-primary">View All</a>
                </div>
                <div class="card-body">
                    {% if recent_customers %}
                        <div class="list-group list-group-flush">
                            {% for customer in recent_customers|slice:":6" %}
                                <div class="list-group-item d-flex justify-content-between align-items-center px-0">
                                    <div>
                                        <strong>{{ customer.full_name }}</strong>
                                        {% if customer.service %}
                                            <span class="badge bg-primary ms-2">{{ customer.service.name }}</span>
                                        {% endif %}
                                        <br>
                                        <small class="text-muted">
                                            <i class="bi bi-telephone"></i> {{ customer.phone }}
                                            <span class="ms-2">
                                                <i class="bi bi-calendar"></i> {{ customer.created_at|date:"M d" }}
                                            </span>
                                        </small>
                                    </div>
                                    <div class="d-flex align-items-center">
                                        {% if customer.is_active %}
                                            <span class="badge bg-success me-2">Active</span>
                                        {% else %}
                                            <span class="badge bg-secondary me-2">Inactive</span>
                                        {% endif %}
                                        {% if customer.customer_id %}
                                            <a href="{% url 'customers:customer_detail' customer.customer_id %}" 
                                               class="btn btn-sm btn-outline-primary">
                                                <i class="bi bi-eye"></i>
                                            </a>
                                        {% endif %}
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="text-center text-muted py-3">
                            <i class="bi bi-people fs-2"></i>
                            <p class="mb-0">No recent customers</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Revenue Trend Chart
    document.addEventListener('DOMContentLoaded', function() {
        const ctx = document.getElementById('revenueChart').getContext('2d');
        
        // Sample data - in real implementation, this would come from Django context
        const revenueData = {
            labels: [
                {% for month in revenue_trend %}
                    '{{ month.month }}',
                {% endfor %}
            ],
            datasets: [{
                label: 'Revenue (KSh)',
                data: [
                    {% for month in revenue_trend %}
                        {{ month.revenue }},
                    {% endfor %}
                ],
                borderColor: '#007bff',
                backgroundColor: 'rgba(0, 123, 255, 0.1)',
                borderWidth: 2,
                fill: true,
                tension: 0.4
            }, {
                label: 'New Customers',
                data: [
                    {% for month in customer_growth %}
                        {{ month.new_customers }},
                    {% endfor %}
                ],
                borderColor: '#28a745',
                backgroundColor: 'rgba(40, 167, 69, 0.1)',
                borderWidth: 2,
                fill: true,
                tension: 0.4,
                yAxisID: 'y1'
            }]
        };

        new Chart(ctx, {
            type: 'line',
            data: revenueData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        type: 'linear',
                        display: true,
                        position: 'left',
                        title: {
                            display: true,
                            text: 'Revenue (KSh)'
                        }
                    },
                    y1: {
                        type: 'linear',
                        display: true,
                        position: 'right',
                        title: {
                            display: true,
                            text: 'New Customers'
                        },
                        grid: {
                            drawOnChartArea: false,
                        },
                    }
                },
                plugins: {
                    legend: {
                        display: true,
                        position: 'top'
                    }
                }
            }
        });
    });

    // Refresh Dashboard
    function refreshDashboard() {
        location.reload();
    }

    // Auto-refresh every 5 minutes
    setInterval(refreshDashboard, 300000);
</script>
{% endblock %}