<?php
require_once __DIR__ . '/../functions.php';
require_admin();

refresh_current_admin_session($pdo);

$adminName = current_admin_username() ?: ($_SESSION['admin_username'] ?? 'admin');
$adminRole = current_admin_role();
$adminRoleLabel = role_label($adminRole);
$adminCredits = current_admin_credits();

$configSuccess = null;
$configError = null;

$currentFile = basename($_SERVER['PHP_SELF']);

/*
|--------------------------------------------------------------------------
| ACTUALIZAR ACCESO ACTUAL
|--------------------------------------------------------------------------
*/
if ($_SERVER['REQUEST_METHOD'] === 'POST' && ($_POST['header_action'] ?? '') === 'update_admin_access') {
    $newUsername = trim($_POST['new_username'] ?? '');
    $newPassword = trim($_POST['new_password'] ?? '');
    $confirmPassword = trim($_POST['confirm_password'] ?? '');

    if ($newUsername === '') {
        $configError = 'El usuario no puede estar vacío.';
    } elseif ($newPassword !== '' && strlen($newPassword) < 4) {
        $configError = 'La contraseña debe tener mínimo 4 caracteres.';
    } elseif ($newPassword !== $confirmPassword) {
        $configError = 'Las contraseñas no coinciden.';
    } else {
        try {
            $adminId = current_admin_id();

            if ($adminId <= 0) {
                throw new RuntimeException('Sesión inválida.');
            }

            $check = $pdo->prepare("
                SELECT id
                FROM admins
                WHERE username = ?
                AND id <> ?
                LIMIT 1
            ");
            $check->execute([$newUsername, $adminId]);

            if ($check->fetch()) {
                throw new RuntimeException('Ya existe otro acceso con ese usuario.');
            }

            if ($newPassword !== '') {
                $hash = password_hash($newPassword, PASSWORD_DEFAULT);

                $stmt = $pdo->prepare("
                    UPDATE admins
                    SET username = ?,
                        password_hash = ?
                    WHERE id = ?
                    LIMIT 1
                ");
                $stmt->execute([$newUsername, $hash, $adminId]);
            } else {
                $stmt = $pdo->prepare("
                    UPDATE admins
                    SET username = ?
                    WHERE id = ?
                    LIMIT 1
                ");
                $stmt->execute([$newUsername, $adminId]);
            }

            $_SESSION['admin_username'] = $newUsername;
            $adminName = $newUsername;

            refresh_current_admin_session($pdo);

            $configSuccess = 'Acceso actualizado correctamente.';
        } catch (Throwable $e) {
            $configError = 'Error al actualizar: ' . $e->getMessage();
        }
    }
}

$pageTitleText = e(($pageTitle ?? 'Panel') . ' - Xui_Codex Pro');
?>
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?= $pageTitleText ?></title>

<style>
:root{
    --bg-1:#05070b;
    --bg-2:#090d13;
    --bg-3:#11161f;

    --card-1:rgba(32,36,45,.94);
    --card-2:rgba(20,23,30,.96);
    --card-3:rgba(31,34,42,.98);

    --line:rgba(255,255,255,.10);
    --line-strong:rgba(120,130,150,.24);

    --txt:#c8d0dc;
    --txt-soft:#8e98a7;
    --txt-strong:#eef3fa;

    --success-bg:rgba(20,60,35,.34);
    --success-line:rgba(120,255,160,.25);
    --success-txt:rgba(170,255,195,.95);

    --danger-bg:rgba(127,29,29,.34);
    --danger-line:rgba(255,100,100,.25);
    --danger-txt:rgba(255,180,180,.96);

    --green:#c8ffd7;
    --green-bg:rgba(20,60,35,.20);
    --green-line:rgba(120,255,160,.18);
}

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    min-height:100vh;
}

body{
    color:var(--txt);
    font-family:Arial, Helvetica, sans-serif;
    background:
        radial-gradient(1100px 650px at 12% 15%, rgba(34,48,66,.55), transparent 60%),
        radial-gradient(900px 650px at 85% 88%, rgba(35,41,52,.48), transparent 70%),
        linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 45%, var(--bg-3) 100%);
}

/* HEADER PRO */
.top{
    position:sticky;
    top:0;
    z-index:1000;
    min-height:70px;
    padding:12px 18px;
    display:grid;
    grid-template-columns:210px minmax(0, 1fr) 290px;
    align-items:center;
    gap:12px;
    border-bottom:1px solid rgba(255,255,255,.08);
    background:
        linear-gradient(160deg, rgba(32,36,45,.94), rgba(20,23,30,.97) 48%, rgba(31,34,42,.95));
    box-shadow:
        0 18px 45px rgba(0,0,0,.38),
        inset 0 1px 0 rgba(255,255,255,.055);
    overflow:hidden;
}

.top::before{
    content:"";
    position:absolute;
    inset:-2px;
    background:linear-gradient(
        120deg,
        transparent 30%,
        rgba(255,255,255,.10),
        transparent 68%
    );
    transform:translateX(-75%);
    animation:topShine 7s ease-in-out infinite;
    pointer-events:none;
    z-index:0;
}

.top::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(620px 120px at 50% 0%, rgba(255,255,255,.055), transparent 70%);
    pointer-events:none;
    z-index:0;
}

@keyframes topShine{
    0%{
        transform:translateX(-78%);
        opacity:.20;
    }
    45%{
        transform:translateX(80%);
        opacity:.55;
    }
    100%{
        transform:translateX(80%);
        opacity:0;
    }
}

.brand-left,
.menu-center,
.user-right{
    position:relative;
    z-index:1;
}

.brand-left{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    min-width:0;
}

.brand-logo{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:0 13px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.09);
    background:
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.18));
    color:#cbd4e0;
    font-size:12.5px;
    font-weight:900;
    letter-spacing:2.1px;
    text-transform:uppercase;
    text-decoration:none;
    white-space:nowrap;
    text-shadow:0 1px 0 rgba(255,255,255,.08);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 10px 24px rgba(0,0,0,.20);
}

.brand-logo:hover{
    color:#fff;
    border-color:rgba(190,200,215,.28);
    background:rgba(255,255,255,.045);
}

.menu-center{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    flex-wrap:wrap;
    min-width:0;
    width:100%;
}

.nav-link,
.config-btn,
.logout-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:36px;
    padding:0 12px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.09);
    background:rgba(0,0,0,.16);
    color:#b8c2cf;
    font-size:11.5px;
    font-weight:900;
    letter-spacing:.6px;
    text-transform:uppercase;
    text-decoration:none;
    cursor:pointer;
    transition:
        transform .16s ease,
        filter .16s ease,
        background .16s ease,
        border-color .16s ease,
        color .16s ease;
}

.nav-link:hover,
.config-btn:hover,
.logout-link:hover{
    color:#fff;
    filter:brightness(1.08);
    border-color:rgba(190,200,215,.28);
    background:rgba(255,255,255,.055);
}

.nav-link.active{
    color:var(--green);
    border-color:var(--green-line);
    background:var(--green-bg);
}

.nav-link:active,
.config-btn:active,
.logout-link:active{
    transform:translateY(1px);
}

.config-btn{
    font-family:inherit;
}

.user-right{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    min-width:0;
}

.admin-box{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    max-width:215px;
    height:36px;
    padding:0 11px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(0,0,0,.14);
    color:#d7deea;
    font-size:11.5px;
    font-weight:800;
    white-space:nowrap;
    overflow:hidden;
}

.admin-name{
    max-width:82px;
    overflow:hidden;
    text-overflow:ellipsis;
}

.admin-role{
    color:var(--green);
}

.admin-credits{
    color:#b8c2cf;
}

.logout-link{
    background:linear-gradient(180deg, rgba(89,96,110,.90), rgba(42,47,58,.90));
    color:#fff;
}

/* CONTENEDOR */
.container{
    width:min(1280px, 96%);
    margin:0 auto;
    padding:22px 0 28px;
}

/* ALERTAS */
.message,
.error,
.header-alert{
    overflow:hidden;
    position:relative;
    z-index:20;
    padding:12px 14px;
    border-radius:14px;
    margin:0 0 16px;
    font-size:14px;
    border:1px solid transparent;
    animation:alertIn .18s ease-out forwards, alertOut .25s ease-in forwards 5s;
}

.message,
.header-alert.success{
    background:var(--success-bg);
    color:var(--success-txt);
    border-color:var(--success-line);
}

.error,
.header-alert.error{
    background:var(--danger-bg);
    color:var(--danger-txt);
    border-color:var(--danger-line);
}

@keyframes alertIn{
    from{
        opacity:0;
        transform:translateY(-5px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes alertOut{
    to{
        opacity:0;
        max-height:0;
        padding-top:0;
        padding-bottom:0;
        margin-bottom:0;
        border-width:0;
        transform:translateY(-5px);
    }
}

input,
select,
textarea,
button{
    font:inherit;
}

/* MODAL */
.modal-overlay{
    position:fixed;
    inset:0;
    z-index:3000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:22px;
    background:rgba(0,0,0,.68);
    backdrop-filter:blur(10px);
}

.modal-overlay.show{
    display:flex;
}

.config-modal{
    position:relative;
    overflow:hidden;
    width:min(470px, 94vw);
    border-radius:20px;
    border:1px solid var(--line-strong);
    background:
        linear-gradient(160deg, var(--card-1), var(--card-2) 45%, var(--card-3));
    box-shadow:
        0 40px 95px rgba(0,0,0,.65),
        inset 0 1px 0 rgba(255,255,255,.055);
}

.config-modal::before{
    content:"";
    position:absolute;
    inset:-2px;
    background:linear-gradient(
        120deg,
        transparent 30%,
        rgba(255,255,255,.12),
        transparent 68%
    );
    transform:translateX(-75%);
    animation:topShine 7s ease-in-out infinite;
    pointer-events:none;
    z-index:0;
}

.config-modal-inner{
    position:relative;
    z-index:1;
    padding:24px;
}

.modal-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:18px;
}

.modal-title{
    margin:0;
    color:#aeb8c6;
    font-size:20px;
    font-weight:900;
    letter-spacing:3px;
    text-transform:uppercase;
}

.modal-close{
    width:38px;
    height:38px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(0,0,0,.18);
    color:#fff;
    cursor:pointer;
}

.modal-close:hover{
    filter:brightness(1.1);
}

.modal-label{
    display:block;
    margin:0 0 8px;
    color:#b5bfcd;
    font-size:12px;
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase;
}

.modal-field{
    margin-bottom:14px;
}

.modal-input{
    width:100%;
    height:48px;
    padding:0 14px;
    border-radius:14px;
    border:1px solid rgba(95,103,116,.36);
    outline:none;
    background:linear-gradient(180deg, #0b0d11, #0f1117);
    color:#e7edf7;
    font-size:15px;
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,.48),
        0 1px 0 rgba(255,255,255,.035);
}

.modal-input:focus{
    border-color:rgba(150,165,185,.60);
    box-shadow:
        0 0 0 3px rgba(120,135,155,.14),
        inset 0 2px 4px rgba(0,0,0,.48);
}

.modal-help{
    margin:5px 0 0;
    color:#8e98a7;
    font-size:12px;
}

.modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:18px;
}

.btn-cancel,
.btn-save{
    height:44px;
    padding:0 16px;
    border-radius:13px;
    cursor:pointer;
    font-weight:900;
    letter-spacing:.9px;
    text-transform:uppercase;
}

.btn-cancel{
    border:1px solid rgba(255,255,255,.10);
    background:rgba(0,0,0,.18);
    color:#c8d0dc;
}

.btn-save{
    border:1px solid rgba(142,151,166,.46);
    background:
        linear-gradient(180deg, rgba(89,96,110,.98) 0%, rgba(57,63,75,.98) 50%, rgba(42,47,58,.98) 100%);
    color:#fff;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 18px 38px rgba(0,0,0,.34);
}

.btn-cancel:hover,
.btn-save:hover{
    filter:brightness(1.08);
}

/* RESPONSIVE */
@media (max-width:1120px){
    .top{
        grid-template-columns:1fr;
        justify-items:center;
        gap:11px;
        padding:13px 14px;
    }

    .brand-left,
    .user-right{
        justify-content:center;
        width:100%;
    }

    .menu-center{
        order:2;
        justify-content:center;
        width:min(760px, 100%);
    }

    .user-right{
        order:3;
    }

    .admin-box{
        max-width:100%;
    }
}

@media (max-width:620px){
    .top{
        padding:13px 10px;
    }

    .brand-logo{
        font-size:12px;
        letter-spacing:1.8px;
        min-height:36px;
        padding:0 12px;
    }

    .menu-center{
        gap:7px;
    }

    .nav-link,
    .config-btn,
    .logout-link{
        height:35px;
        padding:0 10px;
        font-size:10.5px;
    }

    .admin-box{
        max-width:100%;
        width:100%;
    }

    .admin-credits{
        display:none;
    }

    .modal-actions{
        flex-direction:column;
    }

    .btn-cancel,
    .btn-save{
        width:100%;
    }
}
</style>
</head>

<body>

<header class="top">
    <div class="brand-left">
        <a class="brand-logo" href="dashboard.php">CODEX DIGITAL</a>
    </div>

    <nav class="menu-center">
        <a class="nav-link <?= $currentFile === 'dashboard.php' ? 'active' : '' ?>" href="dashboard.php">
            Dashboard
        </a>

        <?php if (menu_can_see('users')): ?>
            <a class="nav-link <?= $currentFile === 'lineas.php' ? 'active' : '' ?>" href="lineas.php">
                Líneas
            </a>
        <?php endif; ?>

        <?php if (menu_can_see('admins')): ?>
            <a class="nav-link <?= $currentFile === 'access.php' ? 'active' : '' ?>" href="access.php">
                Access
            </a>
        <?php endif; ?>

        <?php if (menu_can_see('credits')): ?>
            <a class="nav-link <?= $currentFile === 'credits.php' ? 'active' : '' ?>" href="credits.php">
                Créditos
            </a>
        <?php endif; ?>

        <?php if (menu_can_see('channels')): ?>
            <a class="nav-link <?= $currentFile === 'channels.php' ? 'active' : '' ?>" href="channels.php">
                Canales
            </a>
        <?php endif; ?>

        <?php if (menu_can_see('import_m3u')): ?>
            <a class="nav-link <?= $currentFile === 'import_m3u.php' ? 'active' : '' ?>" href="import_m3u.php">
                Importar M3U
            </a>
        <?php endif; ?>

        <button type="button" class="config-btn" id="openConfigModal">
            Configurar
        </button>
    </nav>

    <div class="user-right">
        <div class="admin-box" title="<?= e($adminName . ' · ' . $adminRoleLabel) ?>">
            <span class="admin-name"><?= e($adminName) ?></span>
            <span class="admin-role">· <?= e($adminRoleLabel) ?></span>
            <span class="admin-credits">· Créditos: <?= is_master_admin() ? '∞' : (int)$adminCredits ?></span>
        </div>

        <a class="logout-link" href="logout.php">Salir</a>
    </div>
</header>

<div class="modal-overlay" id="configModal">
    <div class="config-modal">
        <div class="config-modal-inner">
            <div class="modal-head">
                <h2 class="modal-title">Configurar</h2>
                <button type="button" class="modal-close" id="closeConfigModal">✕</button>
            </div>

            <form method="post">
                <input type="hidden" name="header_action" value="update_admin_access">

                <div class="modal-field">
                    <label class="modal-label" for="new_username">Usuario de acceso</label>
                    <input
                        class="modal-input"
                        id="new_username"
                        type="text"
                        name="new_username"
                        value="<?= e($adminName) ?>"
                        autocomplete="username"
                        required
                    >
                </div>

                <div class="modal-field">
                    <label class="modal-label" for="new_password">Nueva contraseña</label>
                    <input
                        class="modal-input"
                        id="new_password"
                        type="password"
                        name="new_password"
                        autocomplete="new-password"
                        placeholder="Dejar vacío para no cambiar"
                    >
                    <p class="modal-help">Solo escribe una contraseña si deseas cambiarla.</p>
                </div>

                <div class="modal-field">
                    <label class="modal-label" for="confirm_password">Confirmar contraseña</label>
                    <input
                        class="modal-input"
                        id="confirm_password"
                        type="password"
                        name="confirm_password"
                        autocomplete="new-password"
                        placeholder="Repetir nueva contraseña"
                    >
                </div>

                <div class="modal-actions">
                    <button type="button" class="btn-cancel" id="cancelConfigModal">Cancelar</button>
                    <button type="submit" class="btn-save">Guardar cambios</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="container">

<?php if ($configSuccess): ?>
    <div class="header-alert success"><?= e($configSuccess) ?></div>
<?php endif; ?>

<?php if ($configError): ?>
    <div class="header-alert error"><?= e($configError) ?></div>
<?php endif; ?>

<?php if ($msg = flash_get('success')): ?>
    <div class="message"><?= e($msg) ?></div>
<?php endif; ?>

<?php if ($msg = flash_get('error')): ?>
    <div class="error"><?= e($msg) ?></div>
<?php endif; ?>

<script>
const configModal = document.getElementById('configModal');
const openConfigModal = document.getElementById('openConfigModal');
const closeConfigModal = document.getElementById('closeConfigModal');
const cancelConfigModal = document.getElementById('cancelConfigModal');

function openModal(){
    if (!configModal) return;
    configModal.classList.add('show');
    document.body.style.overflow = 'hidden';
}

function closeModal(){
    if (!configModal) return;
    configModal.classList.remove('show');
    document.body.style.overflow = '';
}

if (openConfigModal) {
    openConfigModal.addEventListener('click', openModal);
}

if (closeConfigModal) {
    closeConfigModal.addEventListener('click', closeModal);
}

if (cancelConfigModal) {
    cancelConfigModal.addEventListener('click', closeModal);
}

if (configModal) {
    configModal.addEventListener('click', function(e){
        if (e.target === configModal) {
            closeModal();
        }
    });
}

document.addEventListener('keydown', function(e){
    if (e.key === 'Escape' && configModal && configModal.classList.contains('show')) {
        closeModal();
    }
});

setTimeout(() => {
    document.querySelectorAll('.message, .error, .header-alert').forEach((alert) => {
        alert.remove();
    });
}, 5300);

<?php if ($configError): ?>
openModal();
<?php endif; ?>
</script>