<?php
// layout/header.php
$currentPage = basename($_SERVER['PHP_SELF'], '.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= htmlspecialchars($pageTitle ?? 'Admin Panel') ?> — CMS Admin</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.3/tinymce.min.js" referrerpolicy="origin"></script>
    <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
            --bg:        #0a0a0f;
            --surface:   #111118;
            --surface2:  #1a1a24;
            --border:    #222230;
            --border2:   #2e2e40;
            --accent:    #6c63ff;
            --accent2:   #a78bfa;
            --success:   #10b981;
            --warning:   #f59e0b;
            --danger:    #ef4444;
            --text:      #e8e8f0;
            --text2:     #9090a8;
            --text3:     #5a5a70;
            --sidebar-w: 260px;
            --header-h:  60px;
            --radius:    10px;
            --radius-sm: 6px;
        }

        html, body {
            height: 100%;
            font-family: 'DM Sans', sans-serif;
            background: var(--bg);
            color: var(--text);
            font-size: 14px;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

        a { color: inherit; text-decoration: none; }

        /* ── SCROLLBAR ── */
        ::-webkit-scrollbar { width: 5px; height: 5px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; }

        /* ── LAYOUT ── */
        .layout { display: flex; min-height: 100vh; }

        /* ── SIDEBAR ── */
        .sidebar {
            width: var(--sidebar-w);
            background: var(--surface);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 0; left: 0; bottom: 0;
            z-index: 100;
            transition: transform .25s ease;
        }

        .sidebar-logo {
            padding: 0 22px;
            height: var(--header-h);
            display: flex;
            align-items: center;
            gap: 10px;
            border-bottom: 1px solid var(--border);
            font-family: 'Syne', sans-serif;
            font-weight: 800;
            font-size: 16px;
            letter-spacing: -.3px;
        }
        .sidebar-logo .logo-icon {
            width: 30px; height: 30px;
            background: var(--accent);
            border-radius: 8px;
            display: grid; place-items: center;
            font-size: 14px;
        }
        .sidebar-logo .logo-text { color: var(--text); }
        .sidebar-logo .logo-text span { color: var(--accent2); }

        .sidebar-nav {
            flex: 1;
            overflow-y: auto;
            padding: 14px 12px;
        }

        .nav-section-label {
            font-family: 'DM Mono', monospace;
            font-size: 10px;
            font-weight: 500;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--text3);
            padding: 10px 10px 6px;
            margin-top: 8px;
        }
        .nav-section-label:first-child { margin-top: 0; }

        .nav-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 10px;
            border-radius: var(--radius-sm);
            color: var(--text2);
            font-size: 13.5px;
            font-weight: 400;
            cursor: pointer;
            transition: background .15s, color .15s;
            margin-bottom: 1px;
        }
        .nav-item:hover { background: var(--surface2); color: var(--text); }
        .nav-item.active {
            background: rgba(108,99,255,.15);
            color: var(--accent2);
            font-weight: 500;
        }
        .nav-item .nav-icon {
            width: 18px; height: 18px;
            opacity: .7;
            flex-shrink: 0;
        }
        .nav-item.active .nav-icon { opacity: 1; }
        .nav-badge {
            margin-left: auto;
            background: var(--accent);
            color: #fff;
            font-family: 'DM Mono', monospace;
            font-size: 10px;
            padding: 1px 7px;
            border-radius: 99px;
        }

        .sidebar-footer {
            padding: 14px 12px;
            border-top: 1px solid var(--border);
        }
        .sidebar-user {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 10px;
            border-radius: var(--radius-sm);
        }
        .user-avatar {
            width: 32px; height: 32px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--accent), var(--accent2));
            display: grid; place-items: center;
            font-size: 12px;
            font-weight: 700;
            color: #fff;
            flex-shrink: 0;
        }
        .user-info { flex: 1; overflow: hidden; }
        .user-name { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .user-role { font-size: 11px; color: var(--text3); }

        /* ── MAIN ── */
        .main {
            margin-left: var(--sidebar-w);
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        /* ── TOPBAR ── */
        .topbar {
            height: var(--header-h);
            background: var(--surface);
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            padding: 0 28px;
            gap: 16px;
            position: sticky;
            top: 0;
            z-index: 50;
        }
        .topbar-breadcrumb {
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: 'DM Mono', monospace;
            font-size: 12px;
            color: var(--text3);
        }
        .topbar-breadcrumb .crumb-current { color: var(--text2); }
        .topbar-breadcrumb .sep { color: var(--border2); }
        .topbar-spacer { flex: 1; }
        .topbar-actions { display: flex; gap: 8px; align-items: center; }

        /* ── CONTENT ── */
        .content {
            flex: 1;
            padding: 28px;
        }

        /* ── PAGE HEADER ── */
        .page-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: 28px;
            gap: 16px;
        }
        .page-title-wrap {}
        .page-title {
            font-family: 'Syne', sans-serif;
            font-size: 22px;
            font-weight: 700;
            color: var(--text);
            letter-spacing: -.4px;
            line-height: 1.2;
        }
        .page-subtitle {
            font-size: 13px;
            color: var(--text3);
            margin-top: 4px;
        }

        /* ── BUTTONS ── */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            border-radius: var(--radius-sm);
            font-size: 13px;
            font-weight: 500;
            font-family: 'DM Sans', sans-serif;
            cursor: pointer;
            border: none;
            transition: opacity .15s, transform .1s, box-shadow .15s;
            white-space: nowrap;
        }
        .btn:hover { opacity: .88; }
        .btn:active { transform: scale(.98); }
        .btn-primary { background: var(--accent); color: #fff; }
        .btn-primary:hover { box-shadow: 0 0 20px rgba(108,99,255,.35); opacity: 1; }
        .btn-secondary { background: var(--surface2); color: var(--text2); border: 1px solid var(--border2); }
        .btn-secondary:hover { color: var(--text); border-color: var(--border2); opacity: 1; }
        .btn-danger { background: rgba(239,68,68,.12); color: var(--danger); border: 1px solid rgba(239,68,68,.2); }
        .btn-danger:hover { background: rgba(239,68,68,.2); opacity: 1; }
        .btn-success { background: var(--success); color: #fff; }
        .btn-sm { padding: 5px 12px; font-size: 12px; }
        .btn-icon { padding: 7px; }
        .btn-icon svg { display: block; }

        /* ── ALERTS ── */
        .alert {
            padding: 12px 16px;
            border-radius: var(--radius-sm);
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
            border: 1px solid transparent;
        }
        .alert-success { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.2); color: #10b981; }
        .alert-error   { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.2); color: #ef4444; }

        /* ── TABLE ── */
        .table-wrap {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            overflow: hidden;
        }
        .table-toolbar {
            padding: 14px 18px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .search-box {
            display: flex;
            align-items: center;
            gap: 8px;
            background: var(--bg);
            border: 1px solid var(--border2);
            border-radius: var(--radius-sm);
            padding: 7px 12px;
            flex: 1;
            max-width: 320px;
        }
        .search-box input {
            background: none;
            border: none;
            color: var(--text);
            font-size: 13px;
            font-family: inherit;
            width: 100%;
            outline: none;
        }
        .search-box input::placeholder { color: var(--text3); }
        .search-box svg { color: var(--text3); flex-shrink: 0; }

        table { width: 100%; border-collapse: collapse; }
        thead th {
            padding: 11px 18px;
            text-align: left;
            font-family: 'DM Mono', monospace;
            font-size: 11px;
            font-weight: 500;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--text3);
            border-bottom: 1px solid var(--border);
            white-space: nowrap;
        }
        tbody tr {
            border-bottom: 1px solid var(--border);
            transition: background .12s;
        }
        tbody tr:last-child { border-bottom: none; }
        tbody tr:hover { background: var(--surface2); }
        tbody td {
            padding: 13px 18px;
            color: var(--text2);
            vertical-align: middle;
        }
        .td-title { color: var(--text); font-weight: 500; }
        .td-slug {
            font-family: 'DM Mono', monospace;
            font-size: 12px;
            color: var(--accent2);
        }
        .td-actions { display: flex; align-items: center; gap: 6px; }
        .td-date { font-size: 12px; font-family: 'DM Mono', monospace; color: var(--text3); }

        /* ── STATUS BADGE ── */
        .badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 3px 9px;
            border-radius: 99px;
            font-size: 11px;
            font-weight: 500;
            font-family: 'DM Mono', monospace;
        }
        .badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; }
        .badge-published { background: rgba(16,185,129,.12); color: #10b981; }
        .badge-published::before { background: #10b981; }
        .badge-draft     { background: rgba(245,158,11,.12); color: #f59e0b; }
        .badge-draft::before { background: #f59e0b; }
        .badge-archived  { background: rgba(144,144,168,.1); color: var(--text3); }
        .badge-archived::before { background: var(--text3); }

        /* ── FORM ── */
        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
        .form-group { display: flex; flex-direction: column; gap: 6px; }
        .form-group.full { grid-column: 1 / -1; }
        .form-label {
            font-size: 12px;
            font-weight: 500;
            color: var(--text2);
            font-family: 'DM Mono', monospace;
            letter-spacing: .04em;
        }
        .form-label .req { color: var(--accent2); margin-left: 2px; }
        .form-control {
            background: var(--bg);
            border: 1px solid var(--border2);
            border-radius: var(--radius-sm);
            padding: 10px 14px;
            color: var(--text);
            font-size: 13.5px;
            font-family: inherit;
            transition: border-color .15s, box-shadow .15s;
            outline: none;
            width: 100%;
        }
        .form-control:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(108,99,255,.15);
        }
        .form-control::placeholder { color: var(--text3); }
        textarea.form-control { resize: vertical; min-height: 90px; line-height: 1.6; }
        select.form-control { cursor: pointer; }
        .form-hint { font-size: 11px; color: var(--text3); margin-top: 2px; }
        .form-error { font-size: 11px; color: var(--danger); margin-top: 2px; }

        /* ── CARD ── */
        .card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            overflow: hidden;
        }
        .card-header {
            padding: 16px 22px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }
        .card-title {
            font-family: 'Syne', sans-serif;
            font-size: 14px;
            font-weight: 600;
            color: var(--text);
        }
        .card-body { padding: 22px; }

        /* ── FORM LAYOUT ── */
        .form-layout {
            display: grid;
            grid-template-columns: 1fr 300px;
            gap: 22px;
            align-items: start;
        }

        /* ── STAT CARDS ── */
        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
        .stat-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 18px 20px;
        }
        .stat-label { font-size: 11px; font-family: 'DM Mono', monospace; color: var(--text3); letter-spacing: .08em; text-transform: uppercase; }
        .stat-value { font-family: 'Syne', sans-serif; font-size: 28px; font-weight: 800; color: var(--text); margin-top: 6px; line-height: 1; }
        .stat-value.accent { color: var(--accent2); }
        .stat-value.success { color: var(--success); }
        .stat-value.warning { color: var(--warning); }

        /* ── TINYMCE DARK ── */
        .tox { border-radius: var(--radius-sm) !important; overflow: hidden; }
        .tox .tox-toolbar__group { border-color: var(--border) !important; }

        /* ── EMPTY STATE ── */
        .empty-state { text-align: center; padding: 60px 20px; }
        .empty-icon { font-size: 40px; margin-bottom: 12px; opacity: .4; }
        .empty-title { font-family: 'Syne', sans-serif; font-size: 16px; font-weight: 600; color: var(--text2); }
        .empty-text { font-size: 13px; color: var(--text3); margin-top: 6px; }

        /* ── MOBILE TOGGLE ── */
        .mobile-toggle {
            display: none;
            background: none;
            border: none;
            color: var(--text2);
            cursor: pointer;
            padding: 6px;
        }

        @media (max-width: 900px) {
            .sidebar { transform: translateX(-100%); }
            .sidebar.open { transform: translateX(0); }
            .main { margin-left: 0; }
            .mobile-toggle { display: flex; }
            .form-layout { grid-template-columns: 1fr; }
            .form-grid { grid-template-columns: 1fr; }
        }
    </style>
</head>
<body>
<div class="layout">

<!-- SIDEBAR -->
<aside class="sidebar" id="sidebar">
    <div class="sidebar-logo">
        <div class="logo-icon">⚡</div>
        <div class="logo-text">CMS<span>Admin</span></div>
    </div>

    <nav class="sidebar-nav">
        <div class="nav-section-label">Main</div>
        <a href="index.php" class="nav-item <?= $currentPage === 'index' ? 'active' : '' ?>">
            <svg class="nav-icon" viewBox="0 0 20 20" fill="currentColor"><path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z"/></svg>
            Dashboard
        </a>

        <div class="nav-section-label">Content</div>
        <a href="pages.php" class="nav-item <?= $currentPage === 'pages' ? 'active' : '' ?>">
            <svg class="nav-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"/></svg>
            Pages
            <?php
            if (in_array($currentPage, ['pages', 'index', 'create', 'edit'])) {
                try {
                    $db = getDB();
                    $cnt = $db->query("SELECT COUNT(*) FROM pages")->fetchColumn();
                    echo '<span class="nav-badge">'.$cnt.'</span>';
                } catch(Exception $e) {}
            }
            ?>
        </a>
        <a href="create.php" class="nav-item <?= $currentPage === 'create' ? 'active' : '' ?>">
            <svg class="nav-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"/></svg>
            New Page
        </a>

        <div class="nav-section-label">System</div>
        <a href="setup.php" class="nav-item <?= $currentPage === 'setup' ? 'active' : '' ?>">
            <svg class="nav-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"/></svg>
            DB Setup
        </a>
    </nav>

    <div class="sidebar-footer">
        <div class="sidebar-user">
            <div class="user-avatar">A</div>
            <div class="user-info">
                <div class="user-name">Administrator</div>
                <div class="user-role">Super Admin</div>
            </div>
        </div>
    </div>
</aside>

<!-- MAIN -->
<div class="main">
    <header class="topbar">
        <button class="mobile-toggle" onclick="document.getElementById('sidebar').classList.toggle('open')">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>
        </button>
        <div class="topbar-breadcrumb">
            <span>CMS</span>
            <span class="sep">/</span>
            <span class="crumb-current"><?= htmlspecialchars($pageTitle ?? 'Dashboard') ?></span>
        </div>
        <div class="topbar-spacer"></div>
        <div class="topbar-actions">
            <a href="create.php" class="btn btn-primary btn-sm">
                <svg width="14" height="14" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"/></svg>
                New Page
            </a>
        </div>
    </header>
    <div class="content">