{% extends "sb_sync/base.html" %}
{% load sb_sync_extras %}

{% block title %}Configuration Dashboard - {{ block.super }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <h2><i class="fas fa-cogs"></i> Configuration Dashboard</h2>
                <div class="btn-group" role="group">
                    <a href="{% url 'sb_sync:permission_matrix' %}" class="btn btn-outline-primary">
                        <i class="fas fa-shield-alt"></i> Permissions
                    </a>
                    <a href="{% url 'sb_sync:model_discovery_config' %}" class="btn btn-outline-secondary">
                        <i class="fas fa-search"></i> Model Discovery
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card text-center">
                <div class="card-body">
                    <div class="stats-number">{{ total_organizations }}</div>
                    <div class="stats-label">Organizations</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center">
                <div class="card-body">
                    <div class="stats-number">{{ total_groups }}</div>
                    <div class="stats-label">Groups</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center">
                <div class="card-body">
                    <div class="stats-number">{{ total_models }}</div>
                    <div class="stats-label">Models</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center">
                <div class="card-body">
                    <div class="stats-number">{{ total_models|add:total_organizations|add:total_groups }}</div>
                    <div class="stats-label">Total Items</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="row">
        <!-- Left Column -->
        <div class="col-md-8">
            <!-- Quick Actions -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-bolt"></i> Quick Actions
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <div class="d-grid">
                                <a href="{% url 'sb_sync:permission_matrix' %}" class="btn btn-primary">
                                    <i class="fas fa-shield-alt"></i> Manage Permissions
                                </a>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="d-grid">
                                <a href="{% url 'sb_sync:model_discovery_config' %}" class="btn btn-info">
                                    <i class="fas fa-search"></i> Configure Model Discovery
                                </a>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="d-grid">
                                <a href="{% url 'sb_sync:audit_trails' %}" class="btn btn-warning">
                                    <i class="fas fa-history"></i> View Audit Trails
                                </a>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="d-grid">
                                <a href="{% url 'sb_sync:performance_metrics' %}" class="btn btn-success">
                                    <i class="fas fa-chart-line"></i> Performance Metrics
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recent Activity -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-clock"></i> Recent Activity
                    </h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Time</th>
                                    <th>User</th>
                                    <th>Action</th>
                                    <th>Details</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for log in recent_logs %}
                                <tr>
                                    <td>{{ log.timestamp|date:"M d, H:i" }}</td>
                                    <td>{{ log.user.username }}</td>
                                    <td>
                                        <span class="badge bg-{{ log.status|lower }}">
                                            {{ log.operation }}
                                        </span>
                                    </td>
                                    <td>{{ log.model_name }}</td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="4" class="text-center text-muted">
                                        No recent activity
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right Column -->
        <div class="col-md-4">
            <!-- Organizations Overview -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-building"></i> Organizations
                    </h5>
                </div>
                <div class="card-body">
                    {% if organizations %}
                    <div class="list-group list-group-flush">
                        {% for organization in organizations %}
                        <div class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="mb-1">{{ organization.name }}</h6>
                                <small class="text-muted">{{ organization.domain }}</small>
                            </div>
                            <span class="badge bg-primary rounded-pill">
                                {{ organization.usersite_set.count }} users
                            </span>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <p>No organizations configured</p>
                    {% endif %}
                </div>
            </div>

            <!-- System Status -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-server"></i> System Status
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-6">
                            <div class="text-center">
                                <div class="h4 text-success">{{ cache_hit_rate|floatformat:1 }}%</div>
                                <small class="text-muted">Cache Hit Rate</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="text-center">
                                <div class="h4 text-info">{{ avg_response_time|floatformat:0 }}ms</div>
                                <small class="text-muted">Avg Response</small>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-6">
                            <div class="text-center">
                                <div class="h4 text-warning">{{ total_requests }}</div>
                                <small class="text-muted">Total Requests</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="text-center">
                                <div class="h4 text-danger">{{ error_rate|floatformat:1 }}%</div>
                                <small class="text-muted">Error Rate</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Stats -->
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-chart-pie"></i> Quick Stats
                    </h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Active Users</label>
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" style="width: {{ active_users_percent }}%">
                                {{ active_users_count }}
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Data Sync</label>
                        <div class="progress">
                            <div class="progress-bar bg-success" role="progressbar" style="width: {{ sync_success_rate }}%">
                                {{ sync_success_rate }}%
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">System Load</label>
                        <div class="progress">
                            <div class="progress-bar bg-{{ system_load_color }}" role="progressbar" style="width: {{ system_load }}%">
                                {{ system_load }}%
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.stats-number {
    font-size: 2rem;
    font-weight: bold;
    color: #007bff;
}

.stats-label {
    font-size: 0.9rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card {
    border: none;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: box-shadow 0.15s ease-in-out;
}

.card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.list-group-item {
    border: none;
    padding: 0.75rem 0;
}

.progress {
    height: 0.5rem;
}
</style>
{% endblock %}