<?php
$title = 'Dashboard - Sistema de Gestión de Proyectos';
$page_title = 'Dashboard';
$current_page = 'dashboard';
$showSidebar = true;
$csrf_token = csrf_token();

ob_start();
?>

<!-- Welcome Section -->
<div class="mb-8">
    <div class="bg-gradient-to-r from-blue-600 to-indigo-600 rounded-lg shadow-lg p-6 text-white">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-2xl font-bold mb-2">
                    ¡Bienvenido, <?= htmlspecialchars($stats['user']['name'] ?? 'Usuario') ?>!
                </h1>
                <p class="text-blue-100">
                    <i class="fas fa-user-shield mr-2"></i>
                    <?= htmlspecialchars($stats['user']['role'] ?? 'Sin rol asignado') ?>
                </p>
                <?php if (!empty($stats['user']['last_login'])): ?>
                <p class="text-blue-200 text-sm mt-2">
                    <i class="fas fa-clock mr-1"></i>
                    Último acceso: <?= date('d/m/Y H:i', strtotime($stats['user']['last_login'])) ?>
                </p>
                <?php endif; ?>
            </div>
            <div class="text-right">
                <div class="text-3xl opacity-20">
                    <i class="fas fa-project-diagram"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Quick Actions -->
<!-- <div class="mb-8">
    <h2 class="text-lg font-semibold text-gray-900 mb-4">Acciones Rápidas</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        
        <?php if (in_array($stats['user']['role_name'] ?? '', ['super_admin', 'admin'])): ?>
        <a href="/admin/users" class="bg-white p-6 rounded-lg shadow hover:shadow-md transition-shadow border border-gray-200 hover:border-blue-300">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-users text-blue-600"></i>
                    </div>
                </div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-gray-900">Gestionar Usuarios</p>
                    <p class="text-xs text-gray-500">Administrar usuarios del sistema</p>
                </div>
            </div>
        </a>

        <a href="/admin/roles" class="bg-white p-6 rounded-lg shadow hover:shadow-md transition-shadow border border-gray-200 hover:border-purple-300">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-user-shield text-purple-600"></i>
                    </div>
                </div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-gray-900">Gestionar Roles</p>
                    <p class="text-xs text-gray-500">Configurar roles y permisos</p>
                </div>
            </div>
        </a>
        <?php endif; ?>
        
        <a href="/projects" class="bg-white p-6 rounded-lg shadow hover:shadow-md transition-shadow border border-gray-200 hover:border-green-300">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-project-diagram text-green-600"></i>
                    </div>
                </div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-gray-900">Ver Proyectos</p>
                    <p class="text-xs text-gray-500">Gestionar proyectos activos</p>
                </div>
            </div>
        </a>

        <a href="/reports" class="bg-white p-6 rounded-lg shadow hover:shadow-md transition-shadow border border-gray-200 hover:border-yellow-300">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-chart-bar text-yellow-600"></i>
                    </div>
                </div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-gray-900">Ver Reportes</p>
                    <p class="text-xs text-gray-500">Analizar métricas y estadísticas</p>
                </div>
            </div>
        </a>
                <div class="ml-3">
                    <p class="text-sm font-medium text-gray-900">Nuevo Requerimiento</p>
                    <p class="text-xs text-gray-500">Crear solicitud</p>
                </div>
            </div>
        </a>

        <a href="/projects" class="bg-white p-6 rounded-lg shadow hover:shadow-md transition-shadow border border-gray-200 hover:border-blue-300">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-folder-open text-blue-600"></i>
                    </div>
                </div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-gray-900">Mis Proyectos</p>
                    <p class="text-xs text-gray-500">Ver estado</p>
                </div>
            </div>
        </a>

        <?php if ($user['is_admin'] ?? false): ?>
        <a href="/admin/users" class="bg-white p-6 rounded-lg shadow hover:shadow-md transition-shadow border border-gray-200 hover:border-blue-300">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-users text-purple-600"></i>
                    </div>
                </div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-gray-900">Gestionar Usuarios</p>
                    <p class="text-xs text-gray-500">Administración</p>
                </div>
            </div>
        </a>
        <?php endif; ?>

        <a href="/reports" class="bg-white p-6 rounded-lg shadow hover:shadow-md transition-shadow border border-gray-200 hover:border-blue-300">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-chart-bar text-yellow-600"></i>
                    </div>
                </div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-gray-900">Reportes</p>
                    <p class="text-xs text-gray-500">Ver métricas</p>
                </div>
            </div>
        </div>
    </div>
</div> -->

<!-- Statistics Cards (Solo para admins) -->
<?php if (in_array($stats['user']['role_name'] ?? '', ['super_admin', 'admin'])): ?>
<div class="mb-8">
    <h2 class="text-lg font-semibold text-gray-900 mb-4">Estadísticas del Sistema</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        
        <!-- Total Requerimientos -->
        <?php if (!empty($stats['requirements'])): ?>
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-8 h-8 bg-blue-500 rounded-md flex items-center justify-center">
                            <i class="fas fa-clipboard-list text-white text-sm"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Total Requerimientos</dt>
                            <dd class="text-lg font-medium text-gray-900"><?= $stats['requirements']['total'] ?? 0 ?></dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-5 py-3">
                <a href="/requirements" class="text-sm font-medium text-blue-600 hover:text-blue-800">
                    Ver todos <i class="fas fa-arrow-right ml-1"></i>
                </a>
            </div>
        </div>

        <!-- Nuevos Requerimientos -->
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-8 h-8 bg-yellow-500 rounded-md flex items-center justify-center">
                            <i class="fas fa-inbox text-white text-sm"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Nuevos</dt>
                            <dd class="text-lg font-medium text-gray-900"><?= $stats['requirements']['new'] ?? 0 ?></dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-5 py-3">
                <a href="/requirements?status=new" class="text-sm font-medium text-yellow-600 hover:text-yellow-800">
                    Revisar <i class="fas fa-arrow-right ml-1"></i>
                </a>
            </div>
        </div>

        <!-- En Proceso -->
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-8 h-8 bg-purple-500 rounded-md flex items-center justify-center">
                            <i class="fas fa-spinner text-white text-sm"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">En Proceso</dt>
                            <dd class="text-lg font-medium text-gray-900"><?= $stats['requirements']['in_progress'] ?? 0 ?></dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-5 py-3">
                <span class="text-sm text-gray-600">
                    Análisis, desarrollo, pruebas
                </span>
            </div>
        </div>

        <!-- Completados -->
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-8 h-8 bg-green-500 rounded-md flex items-center justify-center">
                            <i class="fas fa-check-circle text-white text-sm"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Completados</dt>
                            <dd class="text-lg font-medium text-gray-900"><?= $stats['requirements']['completed'] ?? 0 ?></dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-5 py-3">
                <a href="/requirements?status=completed" class="text-sm font-medium text-green-600 hover:text-green-800">
                    Ver completados <i class="fas fa-arrow-right ml-1"></i>
                </a>
            </div>
        </div>
        <?php endif; ?>
        
        <!-- Total Users -->
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-8 h-8 bg-indigo-500 rounded-md flex items-center justify-center">
                            <i class="fas fa-users text-white text-sm"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Total Usuarios</dt>
                            <dd class="text-lg font-medium text-gray-900"><?= $stats['users']['total'] ?? 0 ?></dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-5 py-3">
                <div class="text-sm">
                    <span class="text-green-600 font-medium"><?= $stats['users']['active'] ?? 0 ?> activos</span>
                    <span class="text-gray-600"> • </span>
                    <span class="text-red-600 font-medium"><?= $stats['users']['without_role'] ?? 0 ?> sin rol</span>
                </div>
            </div>
        </div>

        <!-- Active Users -->
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-8 h-8 bg-teal-500 rounded-md flex items-center justify-center">
                            <i class="fas fa-user-check text-white text-sm"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Usuarios Activos</dt>
                            <dd class="text-lg font-medium text-gray-900"><?= $stats['users']['active'] ?? 0 ?></dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-5 py-3">
                <div class="text-sm">
                    <span class="text-green-600 font-medium">
                        <?= $stats['users']['total'] > 0 ? round(($stats['users']['active'] / $stats['users']['total']) * 100) : 0 ?>%
                    </span>
                    <span class="text-gray-600"> del total</span>
                </div>
            </div>
        </div>

        <!-- Roles -->
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-8 h-8 bg-purple-500 rounded-md flex items-center justify-center">
                            <i class="fas fa-user-shield text-white text-sm"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Roles Activos</dt>
                            <dd class="text-lg font-medium text-gray-900"><?= $stats['roles']['total_roles'] ?? 0 ?></dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-5 py-3">
                <div class="text-sm">
                    <a href="/admin/roles" class="text-purple-600 hover:text-purple-500">Ver detalles →</a>
                </div>
            </div>
        </div>

        <!-- Recent Users -->
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-8 h-8 bg-yellow-500 rounded-md flex items-center justify-center">
                            <i class="fas fa-clock text-white text-sm"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Nuevos (7 días)</dt>
                            <dd class="text-lg font-medium text-gray-900"><?= $stats['users']['recent'] ?? 0 ?></dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-5 py-3">
                <div class="text-sm">
                    <a href="/admin/users?filter=recent" class="text-yellow-600 hover:text-yellow-500">Ver usuarios →</a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Role Distribution Chart -->
<div class="mb-8">
    <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-medium text-gray-900">Distribución de Roles</h3>
        </div>
        <div class="p-6">
            <div class="space-y-3">
                <?php foreach (($stats['roles']['distribution'] ?? []) as $role): ?>
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="w-3 h-3 bg-blue-500 rounded-full mr-3"></div>
                        <span class="text-sm font-medium text-gray-700"><?= htmlspecialchars($role['display_name']) ?></span>
                    </div>
                    <span class="text-sm text-gray-500"><?= $role['user_count'] ?> usuarios</span>
                </div>
                <?php endforeach; ?>
                
                <?php if (empty($stats['roles']['distribution'])): ?>
                <p class="text-sm text-gray-500 text-center py-4">No hay datos de roles disponibles</p>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>
<?php endif; ?>

<!-- Recent Activity -->
<div class="mb-8">
    <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-medium text-gray-900">Actividad Reciente</h3>
        </div>
        <div class="p-6">
            <div class="text-center py-8">
                <i class="fas fa-history text-gray-300 text-4xl mb-4"></i>
                <p class="text-gray-500">La funcionalidad de actividad reciente estará disponible próximamente</p>
                <p class="text-sm text-gray-400 mt-2">Se mostrará el historial de requerimientos y proyectos</p>
            </div>
        </div>
    </div>
</div>

<!-- Next Sprint Preview -->
<div class="mb-8">
    <div class="bg-gradient-to-r from-green-50 to-blue-50 border border-green-200 rounded-lg p-6">
        <div class="flex items-start">
            <div class="flex-shrink-0">
                <i class="fas fa-rocket text-green-600 text-xl"></i>
            </div>
            <div class="ml-4">
                <h3 class="text-lg font-medium text-gray-900 mb-2">Próximamente - Sprint 2</h3>
                <p class="text-gray-700 mb-3">
                    En el siguiente sprint implementaremos el sistema completo de gestión de requerimientos siguiendo el flujo definido en el contexto.
                </p>
                <ul class="text-sm text-gray-600 space-y-1">
                    <li><i class="fas fa-check-circle text-green-500 mr-2"></i>Sistema de tickets y mesa de ayuda</li>
                    <li><i class="fas fa-check-circle text-green-500 mr-2"></i>Clasificación automática de requerimientos</li>
                    <li><i class="fas fa-check-circle text-green-500 mr-2"></i>Workflow de aprobaciones</li>
                    <li><i class="fas fa-check-circle text-green-500 mr-2"></i>Dashboard de coordinación TI</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<?php
$content = ob_get_clean();
include __DIR__ . '/../layouts/app.php';
?>