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

ob_start();
?>

<div class="container mx-auto px-4 py-6">
    <!-- Header -->
    <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
                <h1 class="text-2xl font-bold text-gray-900">Proyectos</h1>
                <p class="text-gray-600 mt-1">Gestión de proyectos institucionales</p>
            </div>
            <a href="/projects/create" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                </svg>
                Nuevo Proyecto
            </a>
        </div>
    </div>

    <!-- Estadísticas -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
        <div class="bg-white rounded-lg shadow-sm p-4">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600">Total Proyectos</p>
                    <p class="text-2xl font-bold text-gray-900"><?= $stats['total'] ?? 0 ?></p>
                </div>
                <div class="p-3 bg-blue-100 rounded-full">
                    <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                    </svg>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-sm p-4">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600">En Progreso</p>
                    <p class="text-2xl font-bold text-green-600"><?= $stats['by_status']['in_progress'] ?? 0 ?></p>
                </div>
                <div class="p-3 bg-green-100 rounded-full">
                    <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                    </svg>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-sm p-4">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600">Progreso Promedio</p>
                    <p class="text-2xl font-bold text-purple-600"><?= $stats['average_progress'] ?? 0 ?>%</p>
                </div>
                <div class="p-3 bg-purple-100 rounded-full">
                    <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                    </svg>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-sm p-4">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600">Atrasados</p>
                    <p class="text-2xl font-bold text-red-600"><?= $stats['delayed'] ?? 0 ?></p>
                </div>
                <div class="p-3 bg-red-100 rounded-full">
                    <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <!-- Filtros -->
    <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
        <form method="GET" action="/projects" class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Buscar</label>
                <input type="text" name="search" value="<?= htmlspecialchars($_GET['search'] ?? '') ?>" 
                       placeholder="Código, nombre..." 
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Estado</label>
                <select name="status" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    <option value="">Todos</option>
                    <option value="planning" <?= ($_GET['status'] ?? '') === 'planning' ? 'selected' : '' ?>>Planificación</option>
                    <option value="in_progress" <?= ($_GET['status'] ?? '') === 'in_progress' ? 'selected' : '' ?>>En Progreso</option>
                    <option value="testing" <?= ($_GET['status'] ?? '') === 'testing' ? 'selected' : '' ?>>En Pruebas</option>
                    <option value="deployed" <?= ($_GET['status'] ?? '') === 'deployed' ? 'selected' : '' ?>>Desplegado</option>
                    <option value="closed" <?= ($_GET['status'] ?? '') === 'closed' ? 'selected' : '' ?>>Cerrado</option>
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Prioridad</label>
                <select name="priority" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    <option value="">Todas</option>
                    <option value="low" <?= ($_GET['priority'] ?? '') === 'low' ? 'selected' : '' ?>>Baja</option>
                    <option value="medium" <?= ($_GET['priority'] ?? '') === 'medium' ? 'selected' : '' ?>>Media</option>
                    <option value="high" <?= ($_GET['priority'] ?? '') === 'high' ? 'selected' : '' ?>>Alta</option>
                    <option value="critical" <?= ($_GET['priority'] ?? '') === 'critical' ? 'selected' : '' ?>>Crítica</option>
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Equipo</label>
                <select name="team" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    <option value="">Todos</option>
                    <?php foreach ($teams as $team): ?>
                        <option value="<?= $team['id'] ?>" <?= ($_GET['team'] ?? '') == $team['id'] ? 'selected' : '' ?>>
                            <?= htmlspecialchars($team['name']) ?>
                        </option>
                    <?php endforeach; ?>
                </select>
            </div>

            <div class="md:col-span-4 flex justify-end gap-2">
                <a href="/projects" class="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
                    Limpiar
                </a>
                <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                    Filtrar
                </button>
            </div>
        </form>
    </div>

    <!-- Proyectos Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
        <?php if (empty($projects)): ?>
            <div class="col-span-full bg-white rounded-lg shadow-sm p-8 text-center">
                <svg class="w-16 h-16 mx-auto text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
                <p class="text-gray-600">No hay proyectos registrados</p>
                <a href="/projects/create" class="inline-block mt-4 text-blue-600 hover:text-blue-700">
                    Crear el primer proyecto
                </a>
            </div>
        <?php else: ?>
            <?php foreach ($projects as $project): 
                $statusColors = [
                    'planning' => 'bg-gray-100 text-gray-800',
                    'in_progress' => 'bg-blue-100 text-blue-800',
                    'testing' => 'bg-yellow-100 text-yellow-800',
                    'deployed' => 'bg-green-100 text-green-800',
                    'closed' => 'bg-gray-300 text-gray-700'
                ];
                $statusLabels = [
                    'planning' => 'Planificación',
                    'in_progress' => 'En Progreso',
                    'testing' => 'En Pruebas',
                    'deployed' => 'Desplegado',
                    'closed' => 'Cerrado'
                ];
                $priorityColors = [
                    'low' => 'bg-gray-100 text-gray-700',
                    'medium' => 'bg-blue-100 text-blue-700',
                    'high' => 'bg-orange-100 text-orange-700',
                    'critical' => 'bg-red-100 text-red-700'
                ];
                $priorityLabels = [
                    'low' => 'Baja',
                    'medium' => 'Media',
                    'high' => 'Alta',
                    'critical' => 'Crítica'
                ];

                $isDelayed = !empty($project['target_date']) && 
                             $project['target_date'] < date('Y-m-d') && 
                             !in_array($project['status'], ['closed', 'deployed']);
            ?>
            <div class="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow border <?= $isDelayed ? 'border-red-300' : 'border-gray-200' ?>">
                <div class="p-6">
                    <!-- Header -->
                    <div class="flex items-start justify-between mb-4">
                        <div class="flex-1">
                            <div class="flex items-center gap-2 mb-2">
                                <span class="text-xs font-mono text-gray-500"><?= htmlspecialchars($project['code']) ?></span>
                                <?php if ($isDelayed): ?>
                                    <span class="px-2 py-0.5 text-xs font-medium bg-red-100 text-red-700 rounded">Atrasado</span>
                                <?php endif; ?>
                            </div>
                            <h3 class="text-lg font-semibold text-gray-900 mb-1">
                                <a href="/projects/<?= $project['id'] ?>" class="hover:text-blue-600">
                                    <?= htmlspecialchars($project['name']) ?>
                                </a>
                            </h3>
                            <?php if (!empty($project['description'])): ?>
                                <p class="text-sm text-gray-600 line-clamp-2"><?= htmlspecialchars($project['description']) ?></p>
                            <?php endif; ?>
                        </div>
                    </div>

                    <!-- Badges -->
                    <div class="flex flex-wrap gap-2 mb-4">
                        <span class="px-2 py-1 text-xs font-medium rounded <?= $statusColors[$project['status']] ?>">
                            <?= $statusLabels[$project['status']] ?>
                        </span>
                        <span class="px-2 py-1 text-xs font-medium rounded <?= $priorityColors[$project['priority']] ?>">
                            <?= $priorityLabels[$project['priority']] ?>
                        </span>
                        <?php if (!empty($project['team_name'])): ?>
                            <span class="px-2 py-1 text-xs font-medium bg-purple-100 text-purple-700 rounded">
                                <?= htmlspecialchars($project['team_name']) ?>
                            </span>
                        <?php endif; ?>
                    </div>

                    <!-- Progress Bar -->
                    <div class="mb-4">
                        <div class="flex justify-between text-sm mb-1">
                            <span class="text-gray-600">Progreso</span>
                            <span class="font-medium text-gray-900"><?= $project['progress_percentage'] ?>%</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2">
                            <div class="bg-blue-600 h-2 rounded-full transition-all" style="width: <?= $project['progress_percentage'] ?>%"></div>
                        </div>
                    </div>

                    <!-- Info -->
                    <div class="space-y-2 text-sm text-gray-600 mb-4">
                        <?php if (!empty($project['requesting_department'])): ?>
                            <div class="flex items-center gap-2">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                                </svg>
                                <span><?= htmlspecialchars($project['requesting_department']) ?></span>
                            </div>
                        <?php endif; ?>
                        <div class="flex items-center gap-2">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                            </svg>
                            <span><?= $project['requirements_count'] ?> requerimiento(s)</span>
                        </div>
                        <?php if (!empty($project['target_date'])): ?>
                            <div class="flex items-center gap-2">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                </svg>
                                <span>Meta: <?= date('d/m/Y', strtotime($project['target_date'])) ?></span>
                            </div>
                        <?php endif; ?>
                    </div>

                    <!-- Footer -->
                    <div class="flex items-center justify-between pt-4 border-t border-gray-200">
                        <span class="text-xs text-gray-500">
                            Por <?= htmlspecialchars($project['creator_first_name'] . ' ' . $project['creator_last_name']) ?>
                        </span>
                        <a href="/projects/<?= $project['id'] ?>" class="text-sm text-blue-600 hover:text-blue-700 font-medium">
                            Ver detalles →
                        </a>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        <?php endif; ?>
    </div>
</div>

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