RD5 GOLD v14.0 - FINAL BOSS

<?php
/**
 * RD5 WEB MANAGER GOLD - v14.0 FINAL BOSS
 * COLORES FIX + FUENTES + TAMAÑO + PESTAÑAS + BUSCADOR + SUBIDA + VUMETRO + SCROLL FIX
 */
$mensaje = "";
$archivo_actual = isset($_GET['edit']) ? $_GET['edit'] : "";

// Lógica de subida mejorada para mantener el archivo en el editor
if (isset($_FILES['archivo_subir'])) {
    $target_path = basename($_FILES['archivo_subir']['name']);
    if (move_uploaded_file($_FILES['archivo_subir']['tmp_name'], $target_path)) {
        $mensaje = "🚀 SUBIDO: " . $target_path;
        $archivo_actual = $target_path; // Forzamos a que sea el archivo actual
    }
}

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['contenido'])) {
    $nombre_final = $_POST['nombre_archivo'];
    $contenido = $_POST['contenido'];
    if (file_put_contents($nombre_final, $contenido) !== false) {
        $mensaje = "✅ GUARDADO";
        $archivo_actual = $nombre_final;
    }
}

$contenido_editar = ($archivo_actual && file_exists($archivo_actual)) ? file_get_contents($archivo_actual) : "";
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>RD5 GOLD v14.0 - FINAL BOSS</title>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.12/codemirror.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.12/theme/monokai.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.12/theme/dracula.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.12/theme/material-darker.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.12/theme/blackboard.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.12/theme/abbott.min.css">
    
    <style>
        :root { --gold: #d4af37; --bg: #050505; --panel: #111111; --text: #e0e0e0; --green: #28a745; }
        * { box-sizing: border-box; }
        body, html { margin: 0; padding: 0; height: 100vh; background: var(--bg); color: var(--text); font-family: 'Segoe UI', sans-serif; overflow: hidden; }
        .app-container { display: flex; height: 100%; }
        
        .sidebar { width: 220px; background: var(--panel); border-right: 1px solid #222; display: flex; flex-direction: column; flex-shrink: 0; }
        .sidebar-header { padding: 15px; font-size: 11px; font-weight: bold; color: var(--gold); border-bottom: 1px solid #222; text-align: center; letter-spacing: 2px; }
        .file-list { flex-grow: 1; overflow-y: auto; }
        .file-item { display: block; padding: 10px 15px; color: #777; text-decoration: none; font-size: 12px; border-bottom: 1px solid #1a1a1a; transition: 0.2s; }
        .file-item:hover { background: #1a1a1a; color: #fff; }
        .file-item.active { background: #1a1a1a; color: var(--gold); border-left: 4px solid var(--gold); }

.main-content { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; position: relative; background: var(--bg); }
        .mode-tabs { background: #000; display: flex; border-bottom: 1px solid #222; }
        .mode-btn { padding: 12px 25px; cursor: pointer; background: transparent; color: #666; border: none; font-size: 11px; font-weight: bold; text-transform: uppercase; }
        .mode-btn.active { color: var(--gold); border-bottom: 2px solid var(--gold); background: var(--bg); }

.toolbar { background: #111; padding: 8px 15px; display: flex; gap: 8px; align-items: center; border-bottom: 1px solid #222; flex-wrap: wrap; }
        .filename-input { background: #000; color: var(--gold); border: 1px solid #333; padding: 6px 10px; border-radius: 4px; width: 150px; font-family: monospace; outline: none; }
        .config-select { background: #000; color: #fff; border: 1px solid #444; font-size: 11px; padding: 5px; border-radius: 3px; cursor: pointer; }

#search-box { position: absolute; top: 100px; right: 0px; background: #fff; padding: 15px; border-radius: 0px; display: none; z-index: 9999; border: 3px solid var(--gold); box-shadow: 0 10px 30px rgba(0,0,0,0.5); align-items: center; gap: 10px; color: #000; }
        #search-box input { border: 1px solid #ccc; padding: 8px; font-weight: bold; width: 180px; border-radius: 4px; }

.view-container { flex-grow: 1; display: none; position: relative; background: var(--bg); height: calc(100vh - 120px); }
        .view-container.active { display: flex; flex-direction: column; }
        
        .CodeMirror { 
            flex-grow: 1; 
            height: 100% !important; 
            background: #050505 !important; 
            border-top: 1px solid #222; 
            overflow: auto !important;
            font-size: 16px; 
        }
        .CodeMirror-scroll { height: 100%; overflow: auto !important; }
        .CodeMirror-gutter { background: #050505 !important; border-right: 1px solid #222; }

.btn { border: none; padding: 8px 14px; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 10px; text-transform: uppercase; display: flex; align-items: center; gap: 5px; }
        .btn-save { background: var(--gold); color: #000; }
        .btn-upload { background: var(--green); color: #fff; }
        .btn-tool { background: #333; color: #fff; }

.footer { background: #000; padding: 8px 20px; font-size: 11px; color: #555; border-top: 1px solid #222; display: flex; justify-content: space-between; align-items: center; }
        iframe { width: 100%; height: 100%; border: none; background: #fff; }

::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: #000; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--gold); }
    </style>
</head>
<body>

<div class="app-container">
    <div class="sidebar">
        <div class="sidebar-header">RD5 GOLD ENGINE</div>
        <div class="file-list">
            <?php foreach (scandir('.') as $f) { 
                if ($f != "." && $f != ".." && !is_dir($f) && $f != basename(__FILE__)) { 
                    $active = ($archivo_actual == $f) ? "active" : ""; 
                    echo "<a href='?edit=$f' class='file-item $active'>📄 $f</a>"; 
                } 
            } ?>
        </div>
    </div>

<div class="main-content">
        <div class="mode-tabs">
            <button class="mode-btn active" onclick="setMode('edit', this)">CÓDIGO (OSCURO GOLD)</button>
            <button class="mode-btn" onclick="setMode('exec', this)">VISTA PREVIA</button>
        </div>

<form method="POST" id="editor-form" style="display: contents;">
            <div id="view-edit" class="view-container active">
                <div class="toolbar">
                    <input type="text" name="nombre_archivo" id="nombre_archivo" class="filename-input" value="<?php echo $archivo_actual ?: 'radio.html'; ?>">
                    
                    <button type="submit" class="btn btn-save">💾 GUARDAR</button>
                    <button type="button" class="btn btn-upload" onclick="document.getElementById('file-input').click();">⬆ SUBIR</button>
                    
                    <div style="width:1px; height:20px; background:#444; margin:0 5px;"></div>

<select class="config-select" id="editor-theme" onchange="updateStyle()">
                        <option value="monokai">Tema: Monokai</option>
                        <option value="dracula">Tema: Dracula</option>
                        <option value="material-darker">Tema: Material</option>
                        <option value="blackboard">Tema: Blackboard</option>
                        <option value="abbott">Tema: Abyss</option>
                    </select>

<select class="config-select" id="font-family" onchange="updateStyle()">
                        <option value="'Monaco', 'Menlo', 'Consolas', monospace">Monospace</option>
                        <option value="'Courier New', monospace">Courier</option>
                    </select>
                    
                    <select class="config-select" id="font-size" onchange="updateStyle()">
                        <?php 
                        for($i=12; $i<=32; $i+=2) echo "<option value='{$i}px' ".($i==16?'selected':'').">{$i}px</option>"; 
                        ?>
                    </select>

<button type="button" class="btn btn-tool" onclick="editor.undo()">↶</button>
                    <button type="button" class="btn btn-tool" onclick="editor.redo()">↷</button>
                    <button type="button" class="btn btn-tool" onclick="toggleSearch()">🔍 BUSCAR</button>
                    
                    <button type="button" class="btn btn" onclick="insertarPlayer()" style="background:#000; color:var(--gold); border:1px solid var(--gold); margin-left:auto;">+ REPRO RADIO</button>
                </div>

function updateStyle() {
        const size = document.getElementById('font-size').value;
        const family = document.getElementById('font-family').value;
        const theme = document.getElementById('editor-theme').value;
        const cm = document.querySelector('.CodeMirror');
        
        cm.style.fontSize = size;
        cm.style.fontFamily = family;
        editor.setOption("theme", theme);
        editor.refresh();
    }
    updateStyle();

function subirArchivo() {
        const fileInput = document.getElementById('file-input');
        if(fileInput.files.length > 0) {
            const form = document.getElementById('upload-form');
            // Añadimos el nombre del archivo a la URL para que PHP lo cargue al recargar
            form.action = "?edit=" + fileInput.files[0].name;
            form.submit();
        }
    }

function toggleSearch() {
        const b = document.getElementById('search-box');
        b.style.display = (b.style.display === 'flex') ? 'none' : 'flex';
        if(b.style.display === 'flex') document.getElementById('find-input').focus();
    }

function doSearch() {
        let txt = document.getElementById('find-input').value;
        let cur = editor.getSearchCursor(txt, editor.getCursor());
        if (!cur.findNext()) cur = editor.getSearchCursor(txt, {line: 0, ch: 0});
        if (cur.findNext()) editor.setSelection(cur.from(), cur.to());
    }

</body>
</html>