<?php 
session_start();
if (!isset($_SESSION['id'])) {
    header("Location: login.php");
    exit();
}

include 'includes/header.php'; 

// Carregamento de dados
$file = 'mensagem.txt';
if (file_exists($file)) {
    $data = json_decode(file_get_contents($file), true);
    $mensagem = htmlspecialchars($data['mensagem'] ?? '');
    $cor = htmlspecialchars($data['cor'] ?? '#ffffff');
    $bgcolor = htmlspecialchars($data['bgcolor'] ?? '#f59e0b');
    $opacity = htmlspecialchars($data['opacity'] ?? '1');
    $fontSize = htmlspecialchars($data['fontSize'] ?? '16');
    $efeito = htmlspecialchars($data['efeito'] ?? 'scroll');
} else {
    $mensagem = "BEM-VINDO AO PAINEL IBO PRO";
    $cor = "#ffffff"; $bgcolor = "#f59e0b"; $opacity = "1"; $fontSize = "16"; $efeito = "scroll";
}
?>

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

<style>
    /* RESET E SEGURANÇA */
    * { box-sizing: border-box; }

    /* FUNDO TOTAL DARK */
    html, body, .wrapper, .main-panel, .content, .container-fluid {
        background-color: #020617 !important;
        color: #e2e8f0 !important;
        overflow-x: hidden;
    }

    /* OCULTAR NAVBAR ORIGINAL */
    .lua-icon, .fa-moon, .fa-sun, .navbar, #dark-mode-switch { display: none !important; }

    .container-fluid { padding: 15px !important; }

    /* BOTÃO VOLTAR */
    .btn-back-nav {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #64748b;
        text-decoration: none !important;
        font-size: 0.85rem;
        font-weight: 600;
        margin-bottom: 20px;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }

    /* CARD PREMIUM CENTRALIZADO */
    .premium-card {
        background: #070e1b !important;
        border: 1px solid #1e293b !important;
        border-radius: 20px;
        padding: 25px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.3);
        max-width: 700px;
        margin: 0 auto 40px auto;
        width: 100%;
    }

    .neon-title {
        color: #f59e0b !important;
        font-weight: 900;
        text-transform: uppercase;
        font-size: 1.4rem;
        margin-bottom: 5px;
        text-align: center;
    }

    .label-minimal {
        font-size: 0.65rem;
        font-weight: 800;
        color: #64748b !important;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        margin-bottom: 8px;
        display: block;
        text-align: center;
    }

    /* INPUTS STEALTH */
    .input-stealth {
        background: #0f172a !important;
        border: 1px solid #1e293b !important;
        color: #fff !important;
        border-radius: 12px !important;
        padding: 15px !important;
        text-align: center !important;
        width: 100%;
        margin-bottom: 20px;
    }

    /* GRID DE CONTROLE */
    .control-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        margin-bottom: 20px;
    }

    /* PREVIEW */
    .preview-wrapper {
        width: 100%;
        height: 100px;
        margin: 25px 0;
        border-radius: 15px;
        border: 1px solid #1e293b;
        overflow: hidden;
        background: #000;
    }

    #preview-iframe {
        width: 100%;
        height: 100%;
        border: none;
    }

    /* SLIDERS */
    .slider-box { 
        background: #0f172a;
        padding: 15px;
        border-radius: 12px;
        border: 1px solid #1e293b;
    }
    input[type=range] { width: 100%; accent-color: #f59e0b; cursor: pointer; }

    .btn-action-neon {
        background: #f59e0b !important;
        color: #000 !important;
        font-weight: 900 !important;
        border-radius: 14px !important;
        padding: 18px !important;
        width: 100%;
        border: none !important;
        text-transform: uppercase;
        box-shadow: 0 4px 15px rgba(245, 158, 11, 0.2) !important;
        cursor: pointer;
        transition: 0.3s;
    }
    .btn-action-neon:hover { transform: translateY(-2px); opacity: 0.9; }

    /* Estilo Pickr para combinar com o tema */
    .pickr .pcr-button { border: 2px solid #1e293b !important; border-radius: 8px !important; width: 100% !important; }
</style>

<div class="container-fluid">
    <div style="max-width: 700px; margin: 0 auto;">
        <a href="index.php" class="btn-back-nav"><i class="fas fa-chevron-left"></i> Voltar ao Painel</a>
    </div>

    <div class="premium-card">
        <div class="text-center mb-4">
            <h2 class="neon-title">Avisos do Sistema</h2>
            <p style="color: #64748b; font-size: 0.8rem;">Configure a barra de mensagens do aplicativo</p>
        </div>

        <form action="salvar_mensagem.php" method="post" id="msgForm">
            <label class="label-minimal">Conteúdo da Mensagem</label>
            <input class="input-stealth" type="text" id="mensagem" name="mensagem" value="<?php echo $mensagem; ?>" oninput="updatePreview()" required>

            <div class="control-grid">
                <div>
                    <label class="label-minimal">Cor Texto</label>
                    <div id="textColorPicker"></div>
                    <input type="hidden" id="cor" name="cor" value="<?php echo $cor; ?>">
                </div>
                <div>
                    <label class="label-minimal">Efeito</label>
                    <select id="efeito" name="efeito" class="input-stealth" onchange="updatePreview()" style="margin-bottom: 0;">
                        <option value="scroll" <?php echo ($efeito === 'scroll' ? 'selected' : ''); ?>>Rolante</option>
                        <option value="static" <?php echo ($efeito === 'static' ? 'selected' : ''); ?>>Parado</option>
                        <option value="blink" <?php echo ($efeito === 'blink' ? 'selected' : ''); ?>>Piscante</option>
                    </select>
                </div>
                <div>
                    <label class="label-minimal">Cor Fundo</label>
                    <div id="bgColorPicker"></div>
                    <input type="hidden" id="bgcolor" name="bgcolor" value="<?php echo $bgcolor; ?>">
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <div class="slider-box">
                        <label class="label-minimal">Opacidade: <span id="opText" style="color:#f59e0b"><?php echo $opacity; ?></span></label>
                        <input type="range" id="opacity" name="opacity" min="0" max="1" step="0.1" value="<?php echo $opacity; ?>" oninput="updatePreview()">
                    </div>
                </div>
                <div class="col-md-6 mb-3">
                    <div class="slider-box">
                        <label class="label-minimal">Tamanho: <span id="fsText" style="color:#f59e0b"><?php echo $fontSize; ?>px</span></label>
                        <input type="range" id="fontSize" name="fontSize" min="10" max="40" value="<?php echo $fontSize; ?>" oninput="updatePreview()">
                    </div>
                </div>
            </div>

            <div class="preview-wrapper">
                <iframe id="preview-iframe" src="api/msg.php"></iframe>
            </div>

            <button class="btn-action-neon" type="submit">
                <i class="fas fa-save mr-2"></i> Salvar e Aplicar
            </button>
        </form>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr"></script>
<script>
    function updatePreview() {
        const msg = document.getElementById('mensagem').value;
        const color = document.getElementById('cor').value;
        const bg = document.getElementById('bgcolor').value;
        const op = document.getElementById('opacity').value;
        const size = document.getElementById('fontSize').value;
        const effect = document.getElementById('efeito').value;
        
        document.getElementById('opText').innerText = op;
        document.getElementById('fsText').innerText = size + 'px';

        const preview = document.getElementById('preview-iframe');
        preview.src = `api/msg.php?mensagem=${encodeURIComponent(msg)}&cor=${encodeURIComponent(color)}&bgcolor=${encodeURIComponent(bg)}&opacity=${op}&fontSize=${size}&efeito=${effect}`;
    }

    const pickrConfig = {
        theme: 'monolith',
        components: { 
            preview: true, 
            hue: true, 
            interaction: { input: true, save: true } 
        }
    };

    const pText = Pickr.create({ ...pickrConfig, el: '#textColorPicker', default: '<?php echo $cor; ?>' });
    const pBg = Pickr.create({ ...pickrConfig, el: '#bgColorPicker', default: '<?php echo $bgcolor; ?>' });

    pText.on('save', (color) => {
        document.getElementById('cor').value = color.toHEXA().toString();
        updatePreview();
        pText.hide();
    });

    pBg.on('save', (color) => {
        document.getElementById('bgcolor').value = color.toHEXA().toString();
        updatePreview();
        pBg.hide();
    });
    
    // Inicializar preview
    window.onload = updatePreview;
</script>

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