<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);

include 'session_check.php';

$page_title = "🎨 Rgvip_colores";

// Caminho do arquivo JSON
$jsonFile = 'cores.json';

// Código para color transparente
define('TRANSPARENT_COLOR', '#00000000');

// Verificar/crear arquivo JSON con valores padres
if (!file_exists($jsonFile)) {
    $defaultColors = [
        "START_COLOR_XML" => '#4a90e2',
        "END_COLOR_XML" => '#4a90e2',
        "BORDER_COLOR_NORMAL" => '#cccccc',
        "BORDER_COLOR_FOCUS" => '#4a90e2',
        "BORDER_WIDTH_DP" => 2,
        "CORNER_RADIUS_DP" => 8
    ];
    file_put_contents($jsonFile, json_encode($defaultColors, JSON_PRETTY_PRINT));
}

// Configuraciones preestablecidas para botones
$buttonPresets = [
    'square' => [
        'border_width' => 2,
        'corner_radius' => 1,
        'label' => '🔲 Cuadrados',
        'desc' => 'Bordes rectos sin redondeo'
    ],
    'rounded' => [
        'border_width' => 2,
        'corner_radius' => 8,
        'label' => '🔳 Redondeados',
        'desc' => 'Esquinas ligeramente redondeadas'
    ],
    'round' => [
        'border_width' => 2,
        'corner_radius' => 120,
        'label' => '🔵 Circulares',
        'desc' => 'Bordes completamente redondos'
    ]
];

// Cargar configuraciones existentes
$cores = json_decode(file_get_contents($jsonFile), true);
if ($cores === null) {
    die("Error al leer el archivo de configuración JSON");
}

// Determinar el preset actual
$currentPreset = 'rounded'; // Valor por defecto
foreach ($buttonPresets as $key => $preset) {
    if ($cores['CORNER_RADIUS_DP'] == $preset['corner_radius'] && 
        $cores['BORDER_WIDTH_DP'] == $preset['border_width']) {
        $currentPreset = $key;
        break;
    }
}

// Procesar formulario
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $presetKey = $_POST['button_preset'] ?? $currentPreset;
    $currentPreset = $presetKey; // ✅ Esto asegura que se refleje inmediatamente
    $preset = $buttonPresets[$presetKey];

    $newColors = [
        "START_COLOR_XML" => isset($_POST['start_transparent']) ? TRANSPARENT_COLOR : ($_POST['start_color'] ?? $cores['START_COLOR_XML']),
        "END_COLOR_XML" => isset($_POST['end_transparent']) ? TRANSPARENT_COLOR : ($_POST['end_color'] ?? $cores['END_COLOR_XML']),
        "BORDER_COLOR_NORMAL" => $_POST['border_color'] ?? $cores['BORDER_COLOR_NORMAL'],
        "BORDER_COLOR_FOCUS" => $_POST['border_color_focus'] ?? $cores['BORDER_COLOR_FOCUS'],
        "BORDER_WIDTH_DP" => (int)$preset['border_width'],
        "CORNER_RADIUS_DP" => (int)$preset['corner_radius']
    ];

    if (file_put_contents($jsonFile, json_encode($newColors, JSON_PRETTY_PRINT)) === false) {
        die("Error al guardar las configuraciones");
    }

    $success_message = "🎉 Configuraciones actualizadas correctamente!";
}


// Recargar configuraciones después de guardar
$cores = json_decode(file_get_contents($jsonFile), true);
$isStartTransparent = ($cores['START_COLOR_XML'] === TRANSPARENT_COLOR);
$isEndTransparent = ($cores['END_COLOR_XML'] === TRANSPARENT_COLOR);

// Contenido da página
$page_content = '
<div class="container-fluid">
    <div class="card radius-10">
        <div class="card-header bg-gradient-primary text-white">
            <center>
                <h4 class="card-title mb-0">🌈 Panel de Colores Personalizados</h4>
                <p class="mb-0">Personalice la apariencia de su aplicación</p>
            </center>
        </div>
        <div class="card-body">';

if (isset($success_message)) {
    $page_content .= '
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <span class="h5">' . $success_message . '</span>
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>';
}

$page_content .= '
            <form method="POST" id="colorSettingsForm">
                <div class="row">
                    <!-- Tarjeta 1 - Colores de Botones -->
                    <div class="col-md-5">
                        <div class="card mb-4">
                            <div class="card-header bg-light">
                                <h5 class="mb-0">🎨 Colores de Botones</h5>
                            </div>
                            <div class="card-body">
                                <div class="form-group">
                                    <label for="start_color">🔷 Color Inicial:</label>
                                    <div class="input-group">
                                        <input type="color" class="form-control" name="start_color" id="start_color"
                                               value="' . ($isStartTransparent ? '#ffffff' : htmlspecialchars($cores['START_COLOR_XML'])) . '"
                                               ' . ($isStartTransparent ? 'disabled' : '') . '>
                                        <div class="input-group-append">
                                            <div class="input-group-text">
                                                <input type="checkbox" name="start_transparent" id="start_transparent" 
                                                       ' . ($isStartTransparent ? 'checked' : '') . '>
                                                <label for="start_transparent" class="mb-0 ml-2">👻 Transparencia</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="end_color">🔶 Color Final:</label>
                                    <div class="input-group">
                                        <input type="color" class="form-control" name="end_color" id="end_color"
                                               value="' . ($isEndTransparent ? '#ffffff' : htmlspecialchars($cores['END_COLOR_XML'])) . '"
                                               ' . ($isEndTransparent ? 'disabled' : '') . '>
                                        <div class="input-group-append">
                                            <div class="input-group-text">
                                                <input type="checkbox" name="end_transparent" id="end_transparent" 
                                                       ' . ($isEndTransparent ? 'checked' : '') . '>
                                                <label for="end_transparent" class="mb-0 ml-2">👻 Transparencia</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Tarjeta 2 - Colores de Contorno -->
                    <div class="col-md-3">
                        <div class="card mb-4">
                            <div class="card-header bg-light">
                                <h5 class="mb-0">🖍️ Bordes</h5>
                            </div>
                            <div class="card-body">
                                <div class="form-group">
                                    <label for="border_color">🔳 Color Normal:</label>
                                    <input type="color" class="form-control" name="border_color" id="border_color"
                                           value="' . htmlspecialchars($cores['BORDER_COLOR_NORMAL']) . '">
                                </div>

                                <div class="form-group">
                                    <label for="border_color_focus">🔲 Color en Foco:</label>
                                    <input type="color" class="form-control" name="border_color_focus" id="border_color_focus"
                                           value="' . htmlspecialchars($cores['BORDER_COLOR_FOCUS']) . '">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Tarjeta 3 - Forma de Botones + Vista Previa alineada a la derecha -->
                    <div class="col-md-4">
                        <div class="card mb-4">
                            <div class="card-header bg-light">
                                <h5 class="mb-0">🔘 Estilo de Botones y Vista Previa</h5>
                            </div>
                            <div class="card-body">
                                <input type="hidden" name="border_width" id="border_width" value="' . $cores['BORDER_WIDTH_DP'] . '">
                                <input type="hidden" name="corner_radius" id="corner_radius" value="' . $cores['CORNER_RADIUS_DP'] . '">

                                <div class="d-flex justify-content-between">
                                    <!-- Opciones de Estilo -->
                                    <div class="w-50 pr-2">
                                        <label>🎭 Seleccione un estilo:</label>
                                        <div class="btn-group-vertical btn-group-toggle w-100" data-toggle="buttons">';
                                        
foreach ($buttonPresets as $key => $preset) {
    $active = ($key === $currentPreset) ? 'active' : '';
    $page_content .= '
                                            <label class="btn btn-outline-primary ' . $active . ' text-left mb-2">
                                                <input type="radio" name="button_preset" value="' . $key . '" autocomplete="off" ' . 
                                                ($active ? 'checked' : '') . '>
                                                <div class="d-flex align-items-center">
                                                    <span class="h5 mb-0 mr-2">' . $preset['label'] . '</span>
                                                </div>
                                                <small class="d-block text-muted">' . $preset['desc'] . '</small>
                                            </label>';
}

$page_content .= '
                                        </div>
                                    </div>

                                    <!-- Vista Previa -->
                                    <div class="w-50 pl-2">
                                        <h6 class="text-center mb-2">👁️ Vista Previa</h6>
                                        <div class="text-center mb-3">
                                            <div class="preview-btn mb-2" id="previewButtonNormal">
                                                Botón Normal
                                            </div>
                                            <small class="text-muted">Estado Normal</small>
                                        </div>
                                        <div class="text-center mb-3">
                                            <div class="preview-btn mb-2" id="previewButtonFocus">
                                                Botón en Foco
                                            </div>
                                            <small class="text-muted">Estado Activo</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="text-center mt-3">
                    <button type="submit" class="btn btn-primary btn-lg">
                        💾 Guardar Configuraciones
                    </button>
                </div>
            </form>
        </div>
        <div class="card-footer text-muted text-center">
            🎨 Personaliza los colores para que coincidan con la identidad de tu aplicación
        </div>
    </div>
</div>

<style>
/* Estilos para la vista previa de botones */
.preview-btn {
    padding: 10px 20px;
    display: inline-block;
    text-align: center;
    font-weight: 500;
    cursor: default;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Efecto hover para el botón en foco */
#previewButtonFocus:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Estilo para las tarjetas */
.card {
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

/* Mejoras de estilo para los inputs */
.form-control {
    border-radius: 8px;
    padding: 10px 15px;
}

.input-group-text {
    background-color: #f8f9fa;
}

/* Estilo para los botones de radio personalizados */
.btn-group-toggle .btn {
    border-radius: 8px !important;
    padding: 12px;
}

.btn-group-toggle .btn.active {
    background-color: rgba(74, 144, 226, 0.1);
    border-color: #4a90e2;
}
</style>

<script>
// Habilitar/desabilitar inputs de color
document.getElementById("start_transparent").addEventListener("change", function() {
    const startColorInput = document.getElementById("start_color");
    startColorInput.disabled = this.checked;
    if(this.checked) {
        startColorInput.value = "#ffffff";
    }
    updateButtonPreview();
});

document.getElementById("end_transparent").addEventListener("change", function() {
    const endColorInput = document.getElementById("end_color");
    endColorInput.disabled = this.checked;
    if(this.checked) {
        endColorInput.value = "#ffffff";
    }
    updateButtonPreview();
});

// Actualizar los hidden inputs cuando se selecciona un preset
document.querySelectorAll("input[name=\'button_preset\']").forEach(function(radio) {
    radio.addEventListener("change", function() {
        if(this.checked) {
            const presets = ' . json_encode($buttonPresets) . ';
            const preset = presets[this.value];
            document.getElementById("border_width").value = preset.border_width;
            document.getElementById("corner_radius").value = preset.corner_radius;
            updateButtonPreview();
        }
    });
});

// Función para actualizar la vista previa de los botones
function updateButtonPreview() {
    const form = document.getElementById("colorSettingsForm");
    const formData = new FormData(form);
    
    // Obtener valores del formulario
    const startColor = formData.get("start_transparent") ? "transparent" : formData.get("start_color");
    const endColor = formData.get("end_transparent") ? "transparent" : formData.get("end_color");
    const borderColor = formData.get("border_color");
    const borderFocusColor = formData.get("border_color_focus");
    const borderWidth = document.getElementById("border_width").value;
    const borderRadius = document.getElementById("corner_radius").value;
    
    // Aplicar estilos al botón normal
    const normalBtn = document.getElementById("previewButtonNormal");
    normalBtn.style.border = `${borderWidth}px solid ${borderColor}`;
    normalBtn.style.borderRadius = `${borderRadius}px`;
    
    // Aplicar estilos al botón en foco
    const focusBtn = document.getElementById("previewButtonFocus");
    focusBtn.style.border = `${borderWidth}px solid ${borderFocusColor}`;
    focusBtn.style.borderRadius = `${borderRadius}px`;
    
    // Aplicar gradiente suave vertical (de arriba hacia abajo)
    if(startColor !== "transparent" && endColor !== "transparent") {
        normalBtn.style.background = `linear-gradient(to bottom, ${startColor}, ${endColor})`;
        focusBtn.style.background = `linear-gradient(to bottom, ${startColor}, ${endColor})`;
    } else {
        normalBtn.style.background = "transparent";
        focusBtn.style.background = "transparent";
    }
    
    // Efecto adicional para el botón en foco
    focusBtn.style.boxShadow = `0 0 0 ${borderWidth}px ${borderFocusColor}20`;
}

// Escuchar cambios en los inputs de color
document.querySelectorAll("#colorSettingsForm input[type=\'color\'], #colorSettingsForm input[type=\'checkbox\']").forEach(input => {
    input.addEventListener("input", updateButtonPreview);
    input.addEventListener("change", updateButtonPreview);
});

// Inicializar la vista previa al cargar la página
document.addEventListener("DOMContentLoaded", function() {
    updateButtonPreview();
});
</script>';

include 'includes/layout.php';