<html lang="es">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Sistema de Gestión de Reuniones - Prefectura Tungurahua</title>
    
    <!-- Fuentes de Google -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- FontAwesome para íconos -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />

    <!-- Librerías para PDF y captura -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

    <!-- Estilos -->
    <link rel="stylesheet" href="styles.css"/>
</head>
<body onload="cargarReunionesDesdeServidor()">
  <!-- resto de tu HTML... -->
    <!-- Header con gradiente y logo -->
    <header class="main-header">
        <div class="header-content">
            <div class="logo-container">
                <i class="fas fa-building fa-2x"></i>
            </div>
            <div class="title-container">
                <h1>Sistema de Gestión de Reuniones</h1>
                <p>Prefectura de Tungurahua</p>
            </div>
        </div>
    </header>

    <!-- Dashboard Stats -->
    <div class="container">
        <div class="dashboard-stats">
            <div class="stat-card">
                <i class="fas fa-folder-open"></i>
                <h3>Total Proyectos</h3>
                <p id="total-reuniones">0</p>
            </div>
            <div class="stat-card">
                <i class="fas fa-clock"></i>
                <h3>En Curso</h3>
                <p id="proyectos-curso">0</p>
            </div>
            <div class="stat-card">
                <i class="fas fa-chart-line"></i>
                <h3>Progreso General</h3>
                <p id="progreso-general">0%</p>
            </div>
        </div>

        <!-- Contenedor principal con tabs -->
        <div class="main-content">
            <div class="tab-container">
                <div class="tab-buttons">
                    <button class="tab-button active" onclick="mostrarPestana('registro')">
                        <i class="fas fa-plus-circle"></i>
                        Registro de Nueva Reunión
                    </button>
                    <button class="tab-button" onclick="mostrarPestana('seguimiento')">
                        <i class="fas fa-tasks"></i>
                        Seguimiento de Proyectos
                    </button>
                </div>

                <!-- Tab: Registro de Nueva Reunión -->
                <section id="registro" class="tab-content active">
                    <div class="grid-container">
                        <!-- Formulario de registro -->
                        <div class="form-container main-form">
                            <div class="form-header">
                                <i class="fas fa-file-signature"></i>
                                <h2>Registro de Nueva Reunión</h2>
                            </div>
                            <form id="reunionForm" onsubmit="event.preventDefault(); guardarReunion();">
                                <div class="form-grid">
                                    <div class="form-group">
                                        <label for="codigoProyecto">
                                            <i class="fas fa-hashtag"></i>
                                            Código de Proyecto
                                        </label>
                                        <input type="text" id="codigoProyecto" placeholder="Ej: PRJ-2024-001" required />
                                    </div>

                                    <div class="form-group">
                                        <label for="direccion">
                                            <i class="fas fa-map-marker-alt"></i>
                                            Dirección/Departamento
                                        </label>
                                        <input type="text" id="direccion" placeholder="Ubicación del proyecto" required />
                                    </div>

                                    <div class="form-group full-width">
                                        <label for="proyecto">
                                            <i class="fas fa-project-diagram"></i>
                                            Proyecto Propuesto
                                        </label>
                                        <input type="text" id="proyecto" placeholder="Nombre del proyecto" required />
                                    </div>

                                    <div class="form-group full-width">
                                        <label for="accionRealizada">
                                            <i class="fas fa-check-circle"></i>
                                            Acciones Realizadas
                                        </label>
                                        <textarea id="accionRealizada" placeholder="Detalle las acciones completadas" required></textarea>
                                    </div>

                                    <div class="form-group full-width">
                                        <label for="accionPendiente">
                                            <i class="fas fa-clock"></i>
                                            Acciones Pendientes
                                        </label>
                                        <textarea id="accionPendiente" placeholder="Detalle las acciones por realizar" required></textarea>
                                    </div>

                                    <div class="form-group">
                                        <label for="responsable">
                                            <i class="fas fa-user"></i>
                                            Responsable
                                        </label>
                                        <input type="text" id="responsable" placeholder="Nombre del responsable" required />
                                    </div>

                                    <div class="form-group">
                                        <label for="presupuesto">
                                            <i class="fas fa-dollar-sign"></i>
                                            Presupuesto
                                        </label>
                                        <input type="number" id="presupuesto" placeholder="0.00" step="0.01" required />
                                    </div>

                                    <div class="form-group">
                                        <label for="fechaCumplimiento">
                                            <i class="fas fa-calendar"></i>
                                            Fecha de Cumplimiento
                                        </label>
                                        <input type="date" id="fechaCumplimiento" required />
                                    </div>

                                    <div class="form-group">
                                        <label for="progreso">
                                            <i class="fas fa-percentage"></i>
                                            Progreso Inicial (%)
                                        </label>
                                        <input type="number" id="progreso" min="0" max="100" placeholder="0" required />
                                    </div>

                                    <div class="form-group full-width">
                                        <button type="submit" class="btn-primary">
                                            <i class="fas fa-save"></i>
                                            Guardar Reunión
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <!-- Panel lateral -->
                        <div class="side-panel">
                            <!-- Último proyecto agregado -->
                            <div class="card" id="ultimoProyectoContainer">
                                <div class="card-header">
                                    <i class="fas fa-star"></i>
                                    <h3>Último Proyecto Agregado</h3>
                                </div>
                                <div class="card-body" id="ultimoProyectoAgregado">
                                    <!-- Contenido dinámico -->
                                </div>
                                <div class="card-footer">
                                    <button onclick="generatePDFUltimoProyecto()" class="btn-secondary">
                                        <i class="fas fa-file-pdf"></i>
                                        Generar PDF
                                    </button>
                                </div>
                            </div>

                            <!-- Asistente IA -->
                            <div class="card ai-section">
                                <div class="card-header">
                                    <i class="fas fa-robot"></i>
                                    <h3>Asistente IA</h3>
                                </div>
                                <div class="card-body">
                                    <div class="form-group">
                                        <label for="ai-prompt">Consulta al asistente:</label>
                                        <textarea id="ai-prompt" placeholder="¿En qué puedo ayudarte?"></textarea>
                                    </div>
                                    <button onclick="generateAIResponse()" id="generateAIResponse" class="btn-accent">
                                        <i class="fas fa-brain"></i>
                                        Generar Análisis
                                    </button>
                                    <div id="responseText" class="ai-response">
                                        <!-- Respuesta IA -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
              <!-- Tab: Seguimiento de Proyectos -->
                <section id="seguimiento" class="tab-content">
                    <div class="seguimiento-container">
                        <!-- Barra de búsqueda mejorada -->
                        <div class="search-container">
                            <div class="search-box">
                                <i class="fas fa-search"></i>
                                <input 
                                    type="text" 
                                    id="busquedaProyectos" 
                                    placeholder="Buscar por código, nombre o responsable..." 
                                    oninput="filtrarProyectos()" 
                                />
                            </div>
                        </div>

                        <!-- Grid de proyectos -->
                        <div class="projects-grid" id="listaProyectos">
                            <!-- Proyectos generados dinámicamente -->
                        </div>

                        <!-- Panel de detalle del proyecto -->
                        <div id="detalleProyectoSeleccionado" class="detail-panel">
                            <div class="detail-header">
                                <h3><i class="fas fa-folder-open"></i> Detalle del Proyecto</h3>
                                <button onclick="cerrarDetalle()" class="btn-close">
    <i class="fas fa-times"></i>
</button>
                            </div>

                            <!-- Información del proyecto -->
                            <div class="detail-content">
                                <div class="detail-info" id="detalleProyectoInfo">
                                    <!-- Información dinámica del proyecto -->
                                </div>

                                <!-- Panel de acciones -->
                                <div class="action-panels">
                                    <!-- Panel de actualización de progreso -->
                                    <div class="action-card">
    <div class="card-header">
        <i class="fas fa-chart-line"></i>
        <h4>Actualizar Progreso</h4>
    </div>
                                         <div class="card-body">
        <div class="form-group">
            <label for="progresoActualizado">Progreso a sumar (%)</label>
            <input
                type="number"
                id="progresoActualizado"
                min="0"
                max="100"
                placeholder="Ingrese el progreso adicional"
            />
        </div>
                                                  <div class="form-group">
            <label for="comentarioSeguimiento">Comentario</label>
            <textarea
                id="comentarioSeguimiento"
                placeholder="Detalle el motivo de esta actualización..."
            ></textarea>
        </div>
                                            <button onclick="actualizarProgresoProyecto()" class="btn-success">
                                                <i class="fas fa-save"></i>
                                                Guardar Progreso
                                            </button>
                                        </div>
                                    </div>

                                    <!-- Panel de comentarios -->
                                    <div class="action-card">
                                        <div class="card-header">
                                            <i class="fas fa-comments"></i>
                                            <h4>Agregar Comentario</h4>
                                        </div>
                                        <div class="card-body">
                                            <div class="form-group">
                                                <label for="comentarioSeguimiento">Comentario</label>
                                                <textarea 
                                                    id="comentarioSeguimiento" 
                                                    placeholder="Escriba su comentario aquí..."
                                                ></textarea>
                                            </div>
                                         <button onclick="enviarComentario()" class="btn-primary">
    <i class="fas fa-paper-plane"></i> Enviar Comentario
</button>
                                        </div>
                                    </div>

                                    <!-- Panel de IA -->
                                    <div class="action-card ai-panel">
                                        <div class="card-header">
                                            <i class="fas fa-robot"></i>
                                            <h4>Asistente IA</h4>
                                        </div>
                                        <div class="card-body">
                                            <div class="form-group">
                                                <label for="ai-prompt-detalle">Consulta</label>
                                                <textarea 
                                                    id="ai-prompt-detalle" 
                                                    placeholder="¿Qué deseas consultar sobre este proyecto?"
                                                ></textarea>
                                            </div>
                                            <button id="btnConsultarIA" onclick="consultarIA()" class="btn-primary">
    <i class="fas fa-robot"></i> Consultar IA
</button>
                                            <div id="responseTextDetalle" class="ai-response">
                                                <!-- Respuesta de IA -->
                                            </div>
                                        </div>
                                    </div>
                                </div>

                               <!-- Historial -->
<div class="history-section">
    <div class="card-header">
        <i class="fas fa-history"></i>
        <h4>Historial de Cambios</h4>
    </div>
    <div class="history-list" id="historialCambios">
        <!-- Historial dinámico -->
    </div>
</div>


                                <!-- Acciones del proyecto -->
                                <div class="project-actions">
                                    <button onclick="generatePDFDetalleProject()" class="btn-secondary">
                                        <i class="fas fa-file-pdf"></i>
                                        Generar PDF del Proyecto
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>

    <!-- Contenedor para PDF -->
    <div id="pdf-content" style="display: none;"></div>

    <!-- Import map para Google Generative AI -->
    <script type="importmap">
        {
            "imports": {
                "@google/generative-ai": "https://esm.run/@google/generative-ai"
            }
        }
    </script>

    <!-- JavaScript principal -->
    <script type="module" src="app.js"></script>

    <!-- Template para tarjetas de proyecto (opcional) -->
    <template id="project-card-template">
        <div class="project-card">
            <div class="card-header">
                <span class="project-code"></span>
                <span class="status-badge"></span>
            </div>
            <div class="card-body">
                <h4 class="project-title"></h4>
                <p class="project-description"></p>
                <div class="project-meta">
                    <span class="responsible"></span>
                    <span class="deadline"></span>
                </div>
                <div class="progress-bar">
                    <div class="progress"></div>
                </div>
            </div>
            <div class="card-footer">
                <button class="btn-detail">Ver Detalle</button>
            </div>
        </div>
    </template>
</body>
</html>