{% extends "base.html" %}

{% block title %} Panel de Administración {% endblock %}

{% block content %}
<div class="dashboard-container">
    <div class="pt-5">
        <div class="row">
            <div class="col-12 mb-4">
                <h1>Panel de Administración</h1>
                <hr>
            </div>
        </div>

            <div class="col-md-12">
                <p class="mb-0">Bienvenido al panel de administración de LIBEROS. Desde aquí puedes gestionar usuarios, artículos, leads y otros aspectos del sistema.</p>
            </div>
        </div>

        <!-- Estadísticas Cards -->
        <div class="row mb-4">
            <!-- Usuarios Totales -->
            <div class="col-md-6 col-lg-3 mb-3">
                <div class="card shadow-sm">
                    <div class="card-body text-center">
                        <div class="mb-3">
                            <i class="fas fa-users fa-2x text-primary"></i>
                        </div>
                        <h3 class="card-title">{{ total_users }}</h3>
                        <p class="card-text text-muted">Usuarios Totales</p>
                        <a href="{{ url_for('admin.list_users') }}" class="btn btn-primary btn-sm">Ver Usuarios</a>
                    </div>
                </div>
            </div>

            <!-- Artículos Totales -->
            <div class="col-md-6 col-lg-3 mb-3">
                <div class="card shadow-sm">
                    <div class="card-body text-center">
                        <div class="mb-3">
                            <i class="fas fa-newspaper fa-2x text-success"></i>
                        </div>
                        <h3 class="card-title">{{ total_articles }}</h3>
                        <p class="card-text text-muted">Artículos Totales</p>
                        <a href="{{ url_for('admin.manage_articles') }}" class="btn btn-success btn-sm">Ver Artículos</a>
                    </div>
                </div>
            </div>

            <!-- Artículos Publicados -->
            <div class="col-md-6 col-lg-3 mb-3">
                <div class="card shadow-sm">
                    <div class="card-body text-center">
                        <div class="mb-3">
                            <i class="fas fa-eye fa-2x text-info"></i>
                        </div>
                        <h3 class="card-title">{{ published_articles }}</h3>
                        <p class="card-text text-muted">Artículos Publicados</p>
                        <a href="{{ url_for('blog.list_articles') }}" class="btn btn-info btn-sm" target="_blank">Ver Blog</a>
                    </div>
                </div>
            </div>

            <!-- Leads -->
            <div class="col-md-6 col-lg-3 mb-3">
                <div class="card shadow-sm">
                    <div class="card-body text-center">
                        <div class="mb-3">
                            <i class="fas fa-chart-line fa-2x text-warning"></i>
                        </div>
                        <h3 class="card-title">{{ total_leads }}</h3>
                        <p class="card-text text-muted">Leads Recibidos</p>
                        <a href="{{ url_for('admin.list_leads') }}" class="btn btn-warning btn-sm">Ver Leads</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Información del Usuario Actual -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h5 class="card-title">Sesión Actual</h5>
                        <div class="row">
                            <div class="col-md-6">
                                <p><strong>Usuario:</strong> {{ current_user.username }}</p>
                                <p><strong>Email:</strong> {{ current_user.email }}</p>
                            </div>
                            <div class="col-md-6">
                                <p><strong>Roles:</strong>
                                    {% for role in current_user.roles %}
                                        <span class="badge bg-primary">{{ role.name }}</span>
                                    {% endfor %}
                                </p>
                                <p><strong>Estado:</strong>
                                    <span class="badge bg-{{ 'success' if current_user.is_active else 'danger' }}">
                                        {{ 'Activo' if current_user.is_active else 'Inactivo' }}
                                    </span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Usuarios Recientes (si hay usuarios) -->
        {% if recent_users %}
        <div class="row">
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h5 class="card-title">Usuarios Recientes</h5>
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Nombre de Usuario</th>
                                        <th>Email</th>
                                        <th>Fecha de Registro</th>
                                        <th>Estado</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for user in recent_users %}
                                    <tr>
                                        <td>{{ user.id }}</td>
                                        <td>{{ user.username }}</td>
                                        <td>{{ user.email }}</td>
                                        <td>{{ user.created_at.strftime('%Y-%m-%d %H:%M') if user.created_at else 'N/A' }}</td>
                                        <td>
                                            <span class="badge bg-{{ 'success' if user.is_active else 'danger' }}">
                                                {{ 'Activo' if user.is_active else 'Inactivo' }}
                                            </span>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block styles %}
    <style>
        .btn-sm {
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
            border-radius: 0.2rem;
        }

        .table {
            width: 100%;
            margin-bottom: 1rem;
            color: #212529;
            border-collapse: collapse;
        }

        .table th,
        .table td {
            padding: 0.75rem;
            vertical-align: top;
            border-top: 1px solid #dee2e6;
        }

        .table thead th {
            vertical-align: bottom;
            border-bottom: 2px solid #dee2e6;
            background-color: #f8f9fa;
            font-weight: 600;
        }

        .table-responsive {
            display: block;
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .shadow-sm {
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
        }
    </style>
{% endblock %}