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

// Carregar configurações existentes (mensagem3.txt)
if (file_exists('mensagem3.txt')) {
    $data = json_decode(file_get_contents('mensagem3.txt'), 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 SISTEMA IBO PRO";
    $cor = "#ffffff"; $bgcolor = "#f59e0b"; $opacity = "1"; $fontSize = "16"; $efeito = "scroll";
}
?>

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/monolith.min.css" />
    <style>
        /* ===== DESIGN SYSTEM TOTAL DARK (ESTILO DASHBOARD) ===== */
        :root {
            --accent: #f59e0b;
            --deep-black: #020617;
            --border: rgba(255, 255, 255, 0.08);
            --text-gray: #94a3b8;
        }

        /* Limpeza de fundos Bootstrap/Padrão */
        html, body, .wrapper, .main-panel, .content, .container-fluid, .card {
            background-color: var(--deep-black) !important;
            color: #f8fafc !important;
            border: none !important;
            box-shadow: none !important;
        }

        .lux-container {
            max-width: 850px;
            margin: 0 auto;
            padding: 20px;
            animation: fadeIn 0.8s ease;
        }

        .neon-title {
            color: var(--accent) !important;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: -1px;
            text-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
        }

        /* Inputs Stealth */
        .input-lux {
            background: rgba(255, 255, 255, 0.03) !important;
            border: 1px solid var(--border) !important;
            color: #fff !important;
            border-radius: 12px !important;
            padding: 12px 15px !important;
            text-align: center;
            transition: all 0.3s ease;
        }

        .input-lux:focus {
            border-color: var(--accent) !important;
            background: rgba(255, 255, 255, 0.07) !important;
            box-shadow: 0 0 20px rgba(245, 158, 11, 0.1) !important;
        }

        .label-minimal {
            font-size: 0.7rem;
            font-weight: 800;
            color: var(--text-gray) !important;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-bottom: 10px;
            display: block;
            text-align: center;
        }

        /* Grid e Blocos de Controle */
        .lux-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .control-box {
            background: rgba(255, 255, 255, 0.02);
            padding: 20px;
            border-radius: 16px;
            border: 1px solid var(--border);
            text-align: center;
        }

        /* Iframe Preview */
        #preview-frame {
            width: 100%;
            height: 80px;
            border: 1px solid var(--border);
            border-radius: 14px;
            background: #000;
            margin-top: 15px;
        }

        /* Botão de Ação Laranja Neon */
        .btn-premium {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
            color: #000 !important;
            font-weight: 900 !important;
            text-transform: uppercase;
            padding: 18px !important;
            border-radius: 14px !important;
            width: 100%;
            border: none !important;
            box-shadow: 0 10px 25px rgba(245, 158, 11, 0.3) !important;
            cursor: pointer;
            transition: 0.4s;
        }

        .btn-premium:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(245, 158, 11, 0.5) !important;
        }

        /* Sliders Custom */
        input[type=range] { accent-color: var(--accent); cursor: pointer; }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(15px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body>

<div class="lux-container">
    <div class="text-center mb-5">
        <i class="fas fa-bullhorn mb-3" style="font-size: 2.5rem; color: var(--accent);"></i>
        <h2 class="neon-title">Editor de Aviso 03</h2>
        <p style="color: var(--text-gray) !important; font-size: 0.8rem;">Personalize a terceira linha de notificações dos clientes</p>
    </div>

    <form action="salvar_mensagem3.php" method="post" id="formMsg3">
        <div class="mb-4">
            <label class="label-minimal">Conteúdo da Mensagem</label>
            <input type="text" class="form-control input-lux" id="mensagem" name="mensagem" 
                   value="<?php echo $mensagem; ?>" oninput="updatePreview()" required>
        </div>

        <div class="lux-grid">
            <div class="control-box">
                <label class="label-minimal">Cor do Texto</label>
                <div id="textColorPicker"></div>
                <input type="hidden" id="cor" name="cor" value="<?php echo $cor; ?>">
            </div>
            
            <div class="control-box">
                <label class="label-minimal">Efeito</label>
                <select id="efeito" name="efeito" class="form-control input-lux" onchange="updatePreview()">
                    <option value="scroll" <?php echo ($efeito === 'scroll' ? 'selected' : ''); ?>>Letreiro Rolante</option>
                    <option value="static" <?php echo ($efeito === 'static' ? 'selected' : ''); ?>>Fixo Centralizado</option>
                    <option value="blink" <?php echo ($efeito === 'blink' ? 'selected' : ''); ?>>Efeito Piscante</option>
                </select>
            </div>

            <div class="control-box">
                <label class="label-minimal">Cor do Fundo</label>
                <div id="bgColorPicker"></div>
                <input type="hidden" id="bgcolor" name="bgcolor" value="<?php echo $bgcolor; ?>">
            </div>
        </div>

        <div class="lux-grid mt-3">
            <div class="control-box">
                <label class="label-minimal">Opacidade: <span id="opVal" style="color:var(--accent)"><?php echo $opacity; ?></span></label>
                <input type="range" class="w-100" id="opacity" name="opacity" min="0" max="1" step="0.1" value="<?php echo $opacity; ?>" oninput="updatePreview()">
            </div>
            <div class="control-box">
                <label class="label-minimal">Tamanho da Fonte: <span id="fsVal" style="color:var(--accent)"><?php echo $fontSize; ?>px</span></label>
                <input type="range" class="w-100" id="fontSize" name="fontSize" min="10" max="60" value="<?php echo $fontSize; ?>" oninput="updatePreview()">
            </div>
        </div>

        <div class="mt-5">
            <label class="label-minimal">Visualização em Tempo Real (Aviso 03)</label>
            <iframe id="preview-frame" src="api/msg3.php"></iframe>
        </div>

        <div class="mt-4 pb-5">
            <button type="submit" class="btn-premium">
                <i class="fas fa-check-circle me-2"></i> Atualizar Mensagem 03
            </button>
        </div>
    </form>
</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('opVal').innerText = op;
        document.getElementById('fsVal').innerText = size + 'px';

        const preview = document.getElementById('preview-frame');
        preview.src = `api/msg3.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();
    });

    // Iniciar preview
    updatePreview();
</script>

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