{% extends "admin_base.html" %}
{% load static %}

{% block title %}System Dashboard{% endblock %}
{% block page_title %}System Dashboard{% endblock %}
{% block page_description %}Overview of your multi-tenant POS system{% endblock %}

{% block content %}
<!-- Statistics Cards -->
<div class="row mb-4">
    <div class="col-xl-3 col-md-6">
        <div class="stats-card">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h3 class="mb-1">{{ stats.total_tenants }}</h3>
                    <p class="mb-0">Total Tenants</p>
                </div>
                <div>
                    <i class="fas fa-building fa-2x opacity-75"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="stats-card success">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h3 class="mb-1">{{ stats.active_tenants }}</h3>
                    <p class="mb-0">Active Tenants</p>
                </div>
                <div>
                    <i class="fas fa-check-circle fa-2x opacity-75"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="stats-card warning">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h3 class="mb-1">{{ stats.trial_tenants }}</h3>
                    <p class="mb-0">Trial Tenants</p>
                </div>
                <div>
                    <i class="fas fa-clock fa-2x opacity-75"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="stats-card danger">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h3 class="mb-1">{{ stats.expiring_soon }}</h3>
                    <p class="mb-0">Expiring Soon</p>
                </div>
                <div>
                    <i class="fas fa-exclamation-triangle fa-2x opacity-75"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Charts Row -->
<div class="row mb-4">
    <div class="col-lg-8">
        <div class="admin-card">
            <div class="card-header bg-white">
                <h5 class="card-title mb-0">
                    <i class="fas fa-chart-line me-2"></i>Tenant Growth
                </h5>
            </div>
            <div class="card-body">
                <canvas id="tenantGrowthChart" height="100"></canvas>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="admin-card">
            <div class="card-header bg-white">
                <h5 class="card-title mb-0">
                    <i class="fas fa-chart-pie me-2"></i>Status Distribution
                </h5>
            </div>
            <div class="card-body">
                <canvas id="statusChart" height="200"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Recent Activity -->
<div class="row">
    <div class="col-lg-6">
        <div class="admin-card">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">
                    <i class="fas fa-user-plus me-2"></i>Recent Signups
                </h5>
                <a href="{% url 'tenants_admin:tenant_list' %}" class="btn btn-sm btn-outline-primary">View All</a>
            </div>
            <div class="card-body">
                {% if recent_signups %}
                    {% for tenant in recent_signups %}
                        <div class="d-flex align-items-center justify-content-between py-2 border-bottom">
                            <div class="d-flex align-items-center">
                                <div class="avatar bg-primary text-white rounded-circle me-3" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
                                    {{ tenant.name|first|upper }}
                                </div>
                                <div>
                                    <h6 class="mb-0">{{ tenant.name }}</h6>
                                    <small class="text-muted">{{ tenant.owner.get_full_name|default:tenant.owner.username }}</small>
                                </div>
                            </div>
                            <div class="text-end">
                                <span class="badge bg-{{ tenant.status|yesno:'success,warning' }}">{{ tenant.get_status_display }}</span>
                                <small class="d-block text-muted">{{ tenant.created_at|timesince }} ago</small>
                            </div>
                        </div>
                    {% endfor %}
                {% else %}
                    <p class="text-muted text-center py-4">No recent signups</p>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="admin-card">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">
                    <i class="fas fa-exclamation-triangle me-2"></i>Expiring Trials
                </h5>
                <a href="{% url 'tenants_admin:tenant_list' %}?status=trial" class="btn btn-sm btn-outline-warning">View All</a>
            </div>
            <div class="card-body">
                {% if expiring_trials %}
                    {% for tenant in expiring_trials %}
                        <div class="d-flex align-items-center justify-content-between py-2 border-bottom">
                            <div class="d-flex align-items-center">
                                <div class="avatar bg-warning text-white rounded-circle me-3" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
                                    {{ tenant.name|first|upper }}
                                </div>
                                <div>
                                    <h6 class="mb-0">{{ tenant.name }}</h6>
                                    <small class="text-muted">{{ tenant.contact_email }}</small>
                                </div>
                            </div>
                            <div class="text-end">
                                <span class="badge bg-danger">{{ tenant.days_remaining }} days left</span>
                                <small class="d-block text-muted">Expires {{ tenant.trial_ends_at|date:"M d" }}</small>
                            </div>
                        </div>
                    {% endfor %}
                {% else %}
                    <p class="text-muted text-center py-4">No expiring trials</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

    <!-- Analytics Section -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-chart-line"></i>
                        Site Analytics
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 mb-3">
                            <a href="{% url 'tenants_admin:analytics:dashboard' %}" class="btn btn-outline-info btn-block">
                                <i class="fas fa-tachometer-alt"></i><br>
                                Analytics Dashboard
                            </a>
                        </div>
                        <div class="col-md-3 mb-3">
                            <a href="{% url 'tenants_admin:analytics:signups' %}" class="btn btn-outline-success btn-block">
                                <i class="fas fa-user-plus"></i><br>
                                Signup Analytics
                            </a>
                        </div>
                        <div class="col-md-3 mb-3">
                            <a href="{% url 'tenants_admin:analytics:contacts' %}" class="btn btn-outline-warning btn-block">
                                <i class="fas fa-envelope"></i><br>
                                Contact Analytics
                            </a>
                        </div>
                        <div class="col-md-3 mb-3">
                            <a href="{% url 'tenants_admin:analytics:visitors' %}" class="btn btn-outline-primary btn-block">
                                <i class="fas fa-users"></i><br>
                                Visitor Analytics
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Tenant Growth Chart
    const growthCtx = document.getElementById('tenantGrowthChart').getContext('2d');
    new Chart(growthCtx, {
        type: 'line',
        data: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
            datasets: [{
                label: 'New Tenants',
                data: [12, 19, 8, 15, 25, 22],
                borderColor: 'rgb(52, 152, 219)',
                backgroundColor: 'rgba(52, 152, 219, 0.1)',
                tension: 0.3
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    // Status Distribution Chart
    const statusCtx = document.getElementById('statusChart').getContext('2d');
    new Chart(statusCtx, {
        type: 'doughnut',
        data: {
            labels: ['Active', 'Trial', 'Suspended', 'Expired'],
            datasets: [{
                data: [{{ stats.active_tenants }}, {{ stats.trial_tenants }}, 0, {{ stats.expired_tenants }}],
                backgroundColor: [
                    '#27ae60',
                    '#f39c12',
                    '#95a5a6',
                    '#e74c3c'
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
});
</script>
{% endblock %}