{% extends 'base.html' %}

{% block title %}
    {% if user.is_admin %}
        Management Dashboard - Optinet Global Links
    {% elif user.is_technician %}
        Technician Dashboard - Optinet Global Links
    {% elif user.is_client %}
        My Account - Optinet Global Links
    {% else %}
        Dashboard - Optinet Global Links
    {% endif %}
{% endblock %}

{% block extra_css %}
<style>
.metric-card {
    background: linear-gradient(135deg, var(--card-bg) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.metric-card .metric-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 1rem;
}

.metric-card .metric-value {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.metric-card .metric-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.metric-card .metric-change {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.metric-change.positive {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.metric-change.negative {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.alert-card {
    border-left: 4px solid;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 0 8px 8px 0;
}

.alert-critical {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.05);
}

.alert-warning {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.05);
}

.progress-ring {
    width: 80px;
    height: 80px;
    position: relative;
}

.progress-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.progress-ring circle {
    fill: transparent;
    stroke: var(--border-color);
    stroke-width: 8;
    stroke-dasharray: 251.2;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.5s ease;
}

.progress-ring .progress {
    stroke: var(--primary-color);
}

.chart-container {
    height: 300px;
    position: relative;
}

.quick-stat {
    text-align: center;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.quick-stat .stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.quick-stat .stat-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-active {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.status-expired {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.status-overdue {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1><i class="bi bi-speedometer2"></i> Management Dashboard</h1>
        <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> Manage Services
            </a>
        </div>
    </div>

    <!-- Critical Alerts -->
    {% if critical_alerts %}
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-exclamation-triangle-fill text-danger"></i> Critical Alerts</h5>
                </div>
                <div class="card-body">
                    {% for alert in critical_alerts %}
                    <div class="alert-card alert-critical">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <strong>{{ alert.title }}</strong>
                                <p class="mb-0 text-muted">{{ alert.description }}</p>
                            </div>
                            <span class="badge bg-danger">{{ alert.count }}</span>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Primary Metrics Row -->
    <div class="row mb-4">
        <div class="col-md-3 mb-3">
            <div class="metric-card">
                <div class="metric-icon" style="background: rgba(34, 197, 94, 0.1); color: #22c55e;">
                    <i class="bi bi-currency-dollar"></i>
                </div>
                <div class="metric-value text-success">KSh {{ monthly_revenue|floatformat:0 }}</div>
                <div class="metric-label">Monthly Revenue</div>
                {% if revenue_growth %}
                <div class="metric-change {% if revenue_growth > 0 %}positive{% else %}negative{% endif %}">
                    <i class="bi bi-arrow-{% if revenue_growth > 0 %}up{% else %}down{% endif %}"></i>
                    {{ revenue_growth|floatformat:1 }}% vs last month
                </div>
                {% endif %}
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="metric-card">
                <div class="metric-icon" style="background: rgba(239, 68, 68, 0.1); color: #ef4444;">
                    <i class="bi bi-receipt"></i>
                </div>
                <div class="metric-value text-danger">KSh {{ monthly_expenses|floatformat:0 }}</div>
                <div class="metric-label">Monthly Expenses</div>
                <div class="metric-change {% if expense_change > 0 %}negative{% else %}positive{% endif %}">
                    <i class="bi bi-arrow-{% if expense_change > 0 %}up{% else %}down{% endif %}"></i>
                    {{ expense_change|floatformat:1 }}% vs last month
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="metric-card">
                <div class="metric-icon" style="background: rgba(59, 130, 246, 0.1); color: #3b82f6;">
                    <i class="bi bi-graph-up"></i>
                </div>
                <div class="metric-value text-primary">KSh {{ net_profit|floatformat:0 }}</div>
                <div class="metric-label">Net Profit</div>
                <div class="metric-change {% if profit_margin > 0 %}positive{% else %}negative{% endif %}">
                    {{ profit_margin|floatformat:1 }}% margin
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="metric-card">
                <div class="metric-icon" style="background: rgba(168, 85, 247, 0.1); color: #a855f7;">
                    <i class="bi bi-people"></i>
                </div>
                <div class="metric-value">{{ total_customers }}</div>
                <div class="metric-label">Total Customers</div>
                <div class="metric-change positive">
                    <i class="bi bi-arrow-up"></i>
                    {{ new_customers_this_month }} new this month
                </div>
            </div>
        </div>
    </div>

    <!-- Secondary Metrics Row -->
    <div class="row mb-4">
        <div class="col-md-6 mb-3">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-headset"></i> Support Tickets</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-4">
                            <div class="quick-stat">
                                <div class="stat-value text-success">{{ resolved_tickets }}</div>
                                <div class="stat-label">Resolved</div>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="quick-stat">
                                <div class="stat-value text-warning">{{ open_tickets }}</div>
                                <div class="stat-label">Open</div>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="quick-stat">
                                <div class="stat-value text-danger">{{ overdue_tickets_24h }}</div>
                                <div class="stat-label">Overdue 24h+</div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-6">
                            <small class="text-muted">Resolution Rate</small>
                            <div class="progress mt-1">
                                <div class="progress-bar bg-success" style="width: {{ ticket_resolution_rate }}%"></div>
                            </div>
                            <small>{{ ticket_resolution_rate|floatformat:1 }}%</small>
                        </div>
                        <div class="col-6">
                            <small class="text-muted">Avg Resolution Time</small>
                            <div class="mt-1">
                                <strong>{{ avg_resolution_time|floatformat:1 }} hours</strong>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 mb-3">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-cash-stack"></i> Payment Tracking</h5>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-4">
                            <div class="quick-stat">
                                <div class="stat-value">KSh {{ daily_payments|floatformat:0 }}</div>
                                <div class="stat-label">Today</div>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="quick-stat">
                                <div class="stat-value">KSh {{ weekly_payments|floatformat:0 }}</div>
                                <div class="stat-label">This Week</div>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="quick-stat">
                                <div class="stat-value">KSh {{ monthly_payments|floatformat:0 }}</div>
                                <div class="stat-label">This Month</div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="text-muted">Collection Rate</span>
                        <span class="fw-bold {% if collection_rate > 80 %}text-success{% else %}text-warning{% endif %}">{{ collection_rate|floatformat:1 }}%</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Customer Status & Performance Charts -->
    <div class="row mb-4">
        <div class="col-md-4 mb-3">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-person-check"></i> Customer Status</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span>Active Services</span>
                            <span class="status-badge status-active">{{ active_customers }}</span>
                        </div>
                        <div class="progress" style="height: 6px;">
                            <div class="progress-bar bg-success" style="width: {{ active_percentage }}%"></div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span>Expired Services</span>
                            <span class="status-badge status-expired">{{ expired_customers }}</span>
                        </div>
                        <div class="progress" style="height: 6px;">
                            <div class="progress-bar bg-danger" style="width: {{ expired_percentage }}%"></div>
                        </div>
                    </div>
                    <div>
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span>Overdue Payments</span>
                            <span class="status-badge status-overdue">{{ overdue_customers_count }}</span>
                        </div>
                        <div class="progress" style="height: 6px;">
                            <div class="progress-bar bg-warning" style="width: {{ overdue_percentage }}%"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-8 mb-3">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-graph-up"></i> Performance Trends</h5>
                </div>
                <div class="card-body">
                    <canvas id="performanceChart" height="200"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Activity & Urgent Items -->
    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-clock-history"></i> Recent Payments</h5>
                </div>
                <div class="card-body">
                    {% if recent_payments %}
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>Customer</th>
                                        <th>Amount</th>
                                        <th>Method</th>
                                        <th>Time</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for payment in recent_payments %}
                                    <tr>
                                        <td>{{ payment.customer.display_name|truncatechars:20 }}</td>
                                        <td class="text-success fw-bold">KSh {{ payment.amount|floatformat:0 }}</td>
                                        <td><span class="badge bg-info">{{ payment.get_payment_method_display }}</span></td>
                                        <td class="text-muted">{{ payment.created_at|timesince }} ago</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <p class="text-muted">No recent payments</p>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-exclamation-circle"></i> Urgent Tickets</h5>
                </div>
                <div class="card-body">
                    {% if urgent_tickets %}
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Customer</th>
                                        <th>Issue</th>
                                        <th>Age</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for item in urgent_tickets %}
                                    <tr>
                                        <td>
                                            {% if item.ticket.ticket_number %}
                                                <a href="{% url 'tickets:ticket_detail' item.ticket.ticket_number %}" class="text-decoration-none">
                                                    {{ item.ticket.ticket_number }}
                                                </a>
                                            {% else %}
                                                {{ item.ticket.ticket_number }}
                                            {% endif %}
                                        </td>
                                        <td>{{ item.customer_name|truncatechars:15 }}</td>
                                        <td>{{ item.ticket.title|truncatechars:20 }}</td>
                                        <td class="text-{{ item.is_past_due|yesno:'danger,muted' }}">{{ item.ticket.created_at|timesince }}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <p class="text-muted">No urgent tickets</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Check if chart container exists
    const chartElement = document.getElementById('performanceChart');
    if (!chartElement) {
        console.log('Chart element not found');
        return;
    }

    // Parse chart data safely
    let chartLabels, customerGrowthData, revenueGrowthData;

    try {
        chartLabels = {{ chart_labels|safe|default:"[]" }};
        customerGrowthData = {{ customer_growth_data|safe|default:"[]" }};
        revenueGrowthData = {{ revenue_growth_data|safe|default:"[]" }};

        // Validate data
        if (!Array.isArray(chartLabels) || chartLabels.length === 0) {
            console.log('No chart data available');
            return;
        }

        // Performance Chart
        const ctx = chartElement.getContext('2d');
        const performanceChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: chartLabels,
                datasets: [{
                    label: 'New Customers',
                    data: customerGrowthData,
                    borderColor: '#3b82f6',
                    backgroundColor: 'rgba(59, 130, 246, 0.1)',
                    fill: true,
                    tension: 0.4,
                    yAxisID: 'y'
                }, {
                    label: 'Revenue (KSh)',
                    data: revenueGrowthData,
                    borderColor: '#22c55e',
                    backgroundColor: 'rgba(34, 197, 94, 0.1)',
                    fill: true,
                    tension: 0.4,
                    yAxisID: 'y1'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: {
                    mode: 'index',
                    intersect: false
                },
                plugins: {
                    legend: {
                        position: 'top'
                    }
                },
                scales: {
                    x: {
                        display: true,
                        grid: {
                            display: false
                        }
                    },
                    y: {
                        type: 'linear',
                        display: true,
                        position: 'left',
                        title: {
                            display: true,
                            text: 'Customers'
                        },
                        grid: {
                            drawOnChartArea: false
                        }
                    },
                    y1: {
                        type: 'linear',
                        display: true,
                        position: 'right',
                        title: {
                            display: true,
                            text: 'Revenue (KSh)'
                        },
                        grid: {
                            drawOnChartArea: false
                        }
                    }
                }
            }
        });
    } catch (error) {
        console.error('Error creating chart:', error);
    }
});

// Auto-refresh dashboard every 5 minutes
setInterval(function() {
    location.reload();
}, 300000);
</script>
{% endblock %}