<?php 
include 'includes/header.php';

// ==============================
// CONFIGURAÇÕES E PARSING
// ==============================
$filePath = 'mensagem.txt';
$defaultData = [
    'mensagem' => "Sua mensagem aparecerá aqui",
    'cor' => "#000000",
    'bgcolor' => "#ffffff",
    'opacity' => "1.0",
    'fontSize' => "16"
];

$data = $defaultData;

if (file_exists($filePath)) {
    $content = @file_get_contents($filePath);
    if (!empty($content)) {
        $loadedData = json_decode($content, true);
        if (json_last_error() === JSON_ERROR_NONE && is_array($loadedData)) {
            $data = array_merge($defaultData, $loadedData);
        }
    }
}

// Sanitização para o HTML
$mensagem = htmlspecialchars($data['mensagem']);
$cor = htmlspecialchars($data['cor']);
$bgcolor = htmlspecialchars($data['bgcolor']);
$opacity = htmlspecialchars($data['opacity']);
$fontSize = htmlspecialchars($data['fontSize']);
?>

<style>
 :root {
        --primary-gradient: linear-gradient(135deg, #2E3192 0%, #1BFFFF 100%);
        --danger-gradient: linear-gradient(135deg, #FF416C 0%, #FF4B2B 100%);
        --success-gradient: linear-gradient(135deg, #1D976C 0%, #93F9B9 100%);
        --surface: #ffffff;
        --background: #f8fafc;
        --text-main: #2d3748;
        --light-blue: #f8f9fa;     /* Fundo claro para contraste */
        --white: #ffffff;
    }

.card { border: none; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.08); background-color: var(--white); }
.card-header { padding: 18px 25px; font-weight: 600; color: var(--white); background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue)); border-radius: 10px 10px 0 0 !important; }
.card-body { padding: 30px; }

/* Preview Section Melhorada */
.preview-section { 
    background-color: #f8f9fa; 
    border: 2px dashed #cbd5e0; 
    border-radius: 10px; 
    padding: 30px; 
    margin-bottom: 25px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    min-height: 120px;
}

#live-preview { 
    padding: 15px 25px; 
    border-radius: 8px; 
    text-align: center; 
    word-break: break-word; 
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    color: <?= $cor ?>;
    background-color: <?= $bgcolor ?>;
    opacity: <?= $opacity ?>;
    font-size: <?= $fontSize ?>px;
}

.color-picker-container { display: flex; align-items: center; gap: 10px; background: #f8f9fa; padding: 8px; border-radius: 8px; border: 1px solid #dee2e6; }
.range-group { display: flex; align-items: center; gap: 15px; width: 100%; }
.range-slider { flex: 1; cursor: pointer; }
</style>

<div class="container-fluid py-4">
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="mb-0"><i class="fas fa-edit me-2"></i>Configurar Mensagem de Alerta</h4>
                    <span class="badge bg-light text-dark">Live Preview</span>
                </div>
                <div class="card-body">
                    
                    <div class="preview-section">
                        <div id="live-preview"><?= $mensagem ?></div>
                    </div>

                    <form action="salvar_mensagem.php" method="post" id="messageForm">
                        <div class="mb-4">
                            <label class="form-label fw-bold">Texto da Mensagem</label>
                            <input type="text" class="form-control form-control-lg" id="mensagem" name="mensagem" value="<?= $mensagem ?>" required autocomplete="off">
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-4">
                                <label class="form-label fw-bold">Cor do Texto</label>
                                <div class="color-picker-container">
                                    <div id="cor-picker"></div>
                                    <input type="hidden" id="cor" name="cor" value="<?= $cor ?>">
                                    <small class="text-muted ms-auto" id="cor-hex"><?= $cor ?></small>
                                </div>
                            </div>
                            <div class="col-md-6 mb-4">
                                <label class="form-label fw-bold">Cor de Fundo</label>
                                <div class="color-picker-container">
                                    <div id="bgcolor-picker"></div>
                                    <input type="hidden" id="bgcolor" name="bgcolor" value="<?= $bgcolor ?>">
                                    <small class="text-muted ms-auto" id="bgcolor-hex"><?= $bgcolor ?></small>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-4">
                                <label class="form-label fw-bold">Opacidade: <span id="opacityValue" class="badge bg-primary"><?= $opacity ?></span></label>
                                <div class="range-group">
                                    <input type="range" class="range-slider" id="opacity" name="opacity" min="0.1" max="1" step="0.1" value="<?= $opacity ?>">
                                </div>
                            </div>
                            <div class="col-md-6 mb-4">
                                <label class="form-label fw-bold">Tamanho da Fonte (px)</label>
                                <input type="number" class="form-control" id="fontSize" name="fontSize" min="8" max="72" value="<?= $fontSize ?>">
                            </div>
                        </div>

                        <div class="text-center mt-4">
                            <button type="submit" class="btn btn-primary btn-lg px-5 shadow-sm">
                                <i class="fas fa-save me-2"></i>Gravar no Sistema
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/classic.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const preview = document.getElementById('live-preview');
    const msgInput = document.getElementById('mensagem');
    const opacityInput = document.getElementById('opacity');
    const sizeInput = document.getElementById('fontSize');

    const updatePreview = () => {
        preview.textContent = msgInput.value || "Exemplo de mensagem";
        preview.style.color = document.getElementById('cor').value;
        preview.style.backgroundColor = document.getElementById('bgcolor').value;
        preview.style.opacity = opacityInput.value;
        preview.style.fontSize = sizeInput.value + 'px';
        document.getElementById('opacityValue').textContent = opacityInput.value;
    };

    const createPicker = (el, inputId, hexDisplayId, defaultColor) => {
        const picker = Pickr.create({
            el: el, 
            theme: 'classic', 
            default: defaultColor,
            swatches: ['#FFFFFF', '#000000', '#FF0000', '#00FF00', '#0000FF'],
            components: { 
                preview: true, 
                opacity: false, 
                hue: true, 
                interaction: { hex: true, input: true, save: true } 
            },
            i18n: { 'btn:save': 'Selecionar' }
        });

        picker.on('change', (color) => {
            const hex = color.toHEXA().toString();
            document.getElementById(inputId).value = hex;
            document.getElementById(hexDisplayId).textContent = hex;
            updatePreview();
        });

        picker.on('save', (color) => {
            picker.hide();
        });

        return picker;
    };

    createPicker('#cor-picker', 'cor', 'cor-hex', '<?= $cor ?>');
    createPicker('#bgcolor-picker', 'bgcolor', 'bgcolor-hex', '<?= $bgcolor ?>');

    msgInput.addEventListener('input', updatePreview);
    opacityInput.addEventListener('input', updatePreview);
    sizeInput.addEventListener('input', updatePreview);
    
    // Inicializa o preview no load
    updatePreview();
});
</script>

<?php include 'includes/footer.php'; ?>