<?php
require 'includes/db.php';

// Si no está logueado, lo mandamos al login de inmediato
if (!isset($_SESSION['usuario_id'])) {
    header("Location: login.php");
    exit;
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Builder Pro - Editor Visual</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* Estilos del editor */
        body { overflow-x: hidden; }
        #canvas { min-height: 85vh; background: #fff; padding-bottom: 50px; }
        .block-item { cursor: grab; padding: 12px; background: #fff; border: 1px solid #dee2e6; margin-bottom: 8px; border-radius: 5px; font-weight: 500; transition: 0.2s; }
        .block-item:hover { background: #f8f9fa; border-color: #0d6efd; }
        
        /* Contenedor del bloque en el lienzo */
        .block-wrapper { position: relative; border: 2px dashed transparent; transition: 0.3s; }
        .block-wrapper:hover { border-color: #0d6efd; }
        
        /* Botón de eliminar (oculto por defecto) */
        .toolbar-block { display: none; }
        .block-wrapper:hover .toolbar-block { display: block; }
        
        /* Indicador visual para textos editables */
        [contenteditable="true"]:hover { outline: 1px dashed #6c757d; background: rgba(0,0,0,0.02); cursor: text; }
        [contenteditable="true"]:focus { outline: 2px solid #0d6efd; background: #fff; }
    </style>
</head>
<body class="bg-light">

<nav class="navbar navbar-dark bg-dark px-4 py-3 shadow-sm">
    <span class="navbar-brand fw-bold">🚀 Builder Pro</span>
    <div>
        <button class="btn btn-outline-light me-2" onclick="limpiarLienzo()">Limpiar</button>
        <button class="btn btn-primary fw-bold" onclick="guardarProyecto()">💾 Guardar Diseño</button>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <!-- Sidebar de Bloques -->
        <div class="col-md-2 bg-white border-end shadow-sm p-3" style="min-height: 90vh;">
            <h6 class="text-uppercase text-muted fw-bold mb-3 mt-2">Componentes</h6>
            <div id="block-list">
                <div class="block-item shadow-sm" data-type="navbar">Navegación</div>
                <div class="block-item shadow-sm" data-type="hero">Hero Section</div>
                <div class="block-item shadow-sm" data-type="pricing">Precios</div>
                <div class="block-item shadow-sm" data-type="footer">Footer</div>
            </div>
        </div>

        <!-- El Lienzo (Canvas) -->
        <div class="col-md-10 p-0">
            <div id="canvas" class="shadow-sm">
                <!-- Aquí caerán los bloques y se renderizará el HTML -->
                <div class="text-center py-5 text-muted" id="empty-state">
                    <h3>Arrastra componentes aquí</h3>
                    <p>Comienza a construir tu sitio web</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
    const canvas = document.getElementById('canvas');
    const blockList = document.getElementById('block-list');
    const emptyState = document.getElementById('empty-state');

    // Inicializar Drag & Drop
    new Sortable(canvas, {
        group: { name: 'shared', pull: false, put: true },
        animation: 150,
        onAdd: function (evt) {
            if (emptyState) emptyState.style.display = 'none'; // Ocultar mensaje vacío
            const type = evt.item.getAttribute('data-type');
            renderBlock(type, evt.item);
        }
    });

    new Sortable(blockList, {
        group: { name: 'shared', pull: 'clone', put: false },
        animation: 150,
        sort: false
    });

    // Función que carga el HTML real del bloque
    async function renderBlock(type, element) {
        // Estado de carga temporal
        element.innerHTML = '<div class="text-center p-4 text-primary spinner-border"></div>';
        element.className = 'block-wrapper';
        element.setAttribute('data-type', type);

        try {
            // Buscamos el HTML del archivo correspondiente
            const response = await fetch(`blocks/${type}.html`);
            const html = await response.text();

            // Insertamos el HTML real y el botón flotante de eliminar
            element.innerHTML = `
                <div class="toolbar-block position-absolute top-0 end-0 p-2 z-3">
                    <button class="btn btn-danger btn-sm shadow" onclick="this.closest('.block-wrapper').remove()">Eliminar</button>
                </div>
                <div class="block-content">
                    ${html}
                </div>
            `;
        } catch (error) {
            element.innerHTML = '<p class="text-danger p-3">Error al cargar el bloque.</p>';
        }
    }

    function limpiarLienzo() {
        if(confirm("¿Seguro que quieres borrar todo?")) {
            canvas.innerHTML = '';
        }
    }

    async function guardarProyecto() {
        // En el próximo paso capturaremos el HTML editado. 
        // Por ahora, solo guardamos la estructura de los bloques como lo hicimos antes.
        const bloques = [];
        document.querySelectorAll('.block-wrapper').forEach(el => {
            bloques.push({ 
                type: el.getAttribute('data-type'),
                html: el.querySelector('.block-content').innerHTML // Ya estamos capturando el HTML modificado!
            });
        });

        const res = await fetch('save_page.php', {
            method: 'POST',
            body: JSON.stringify({ id_pagina: 1, contenido: bloques })
        });
        const data = await res.json();
        alert(data.message);
    }
// Pasamos el JSON de PHP a una variable de JavaScript
const datosIniciales = <?php echo $contenido_guardado; ?>;
const proyectoId = <?php echo $proyecto_id; ?>;

// Función que se ejecuta al cargar la página
window.onload = function() {
    if (datosIniciales.length > 0) {
        if (emptyState) emptyState.style.display = 'none';
        
        datosIniciales.forEach(bloque => {
            // Creamos el contenedor del bloque manualmente
            const div = document.createElement('div');
            div.className = 'block-wrapper';
            div.setAttribute('data-type', bloque.type);
            
            // Insertamos el HTML que estaba guardado (con los cambios del usuario)
            div.innerHTML = `
                <div class="toolbar-block position-absolute top-0 end-0 p-2 z-3">
                    <button class="btn btn-danger btn-sm shadow" onclick="this.closest('.block-wrapper').remove()">Eliminar</button>
                </div>
                <div class="block-content">
                    ${bloque.html}
                </div>
            `;
            canvas.appendChild(div);
        });
    }
};

// Modificamos la función guardar para que envíe el ID del proyecto real
async function guardarProyecto() {
    const bloques = [];
    document.querySelectorAll('.block-wrapper').forEach(el => {
        bloques.push({ 
            type: el.getAttribute('data-type'),
            html: el.querySelector('.block-content').innerHTML 
        });
    });

    const res = await fetch('save_page.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ 
            proyecto_id: proyectoId, // Usamos la variable de PHP
            contenido: bloques 
        })
    });
    const data = await res.json();
    alert(data.message);
}    
</script>
</body>
</html>