<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= e($pageTitle ?? 'Admin Dashboard') ?> | TellerPro SaaS Platform</title>
    <meta name="csrf-token" content="<?= Security::generateCsrfToken() ?>">
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    
    <link rel="stylesheet" href="<?= APP_URL ?>/assets/css/app.css">
    <link rel="stylesheet" href="<?= APP_URL ?>/assets/css/superadmin.css">
</head>
<body class="superadmin">
    <div class="app-wrapper">
        <aside class="sa-sidebar">
            <div class="sa-logo-area">
                <div class="sa-logo-icon">TP</div>
                <div class="sa-logo-text">
                    <span class="sa-logo-brand">TellerPro</span>
                    <span class="sa-logo-sub">Platform Panel</span>
                </div>
            </div>

            <nav class="flex-1">
                <div class="sa-nav-section">
                    <div class="sa-nav-header">Overview</div>
                    <a href="<?= APP_URL ?>/superadmin" class="sa-nav-item <?= str_contains($_SERVER['REQUEST_URI'], '/superadmin') && !str_contains($_SERVER['REQUEST_URI'], '/tenants') && !str_contains($_SERVER['REQUEST_URI'], '/plans') && !str_contains($_SERVER['REQUEST_URI'], '/subscriptions') ? 'active' : '' ?>">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="9"></rect><rect x="14" y="3" width="7" height="5"></rect><rect x="14" y="12" width="7" height="9"></rect><rect x="3" y="16" width="7" height="5"></rect></svg>
                        Dashboard
                    </a>
                </div>
                
                <div class="sa-nav-section">
                    <div class="sa-nav-header">SaaS Management</div>
                    <a href="<?= APP_URL ?>/superadmin/tenants" class="sa-nav-item <?= str_contains($_SERVER['REQUEST_URI'], '/tenants') ? 'active' : '' ?>">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
                        Tenants
                    </a>
                    <a href="<?= APP_URL ?>/superadmin/plans" class="sa-nav-item <?= str_contains($_SERVER['REQUEST_URI'], '/plans') ? 'active' : '' ?>">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect><line x1="1" y1="10" x2="23" y2="10"></line></svg>
                        Plans
                    </a>
                    <a href="<?= APP_URL ?>/superadmin/subscriptions" class="sa-nav-item <?= str_contains($_SERVER['REQUEST_URI'], '/subscriptions') ? 'active' : '' ?>">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20"></path><path d="m17 5-5-3-5 3"></path><path d="m17 19-5 3-5-3"></path><path d="M2 12h20"></path></svg>
                        Subscriptions
                    </a>
                </div>
                
                <div class="sa-nav-section">
                    <div class="sa-nav-header">System Settings</div>
                    <a href="<?= APP_URL ?>/superadmin/paystack" class="sa-nav-item <?= str_contains($_SERVER['REQUEST_URI'], '/paystack') ? 'active' : '' ?>">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px; height:16px;">
                            <rect x="2" y="4" width="20" height="16" rx="2" ry="2"></rect>
                            <line x1="2" y1="10" x2="22" y2="10"></line>
                            <circle cx="8" cy="14" r="2"></circle>
                            <path d="M16 14h2"></path>
                        </svg>
                        Paystack Settings
                    </a>
                </div>
            </nav>

            <div class="sa-footer">
                <div class="sa-user-card">
                    <div class="sa-user-avatar"><?= substr(SuperAuth::user()['name'], 0, 1) ?></div>
                    <div class="flex-1 overflow-hidden">
                        <div class="text-sm font-bold truncate"><?= e(SuperAuth::user()['name']) ?></div>
                        <div class="text-xs text-muted">Platform Admin</div>
                    </div>
                </div>
                <a href="<?= APP_URL ?>/superadmin/logout" class="sa-nav-item text-danger" style="margin-bottom: 0;">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
                    Logout
                </a>
            </div>
        </aside>
        <script>
            // Instant sidebar scroll restoration
            (function() {
                const sidebar = document.querySelector('.sa-sidebar');
                const scrollPos = sessionStorage.getItem('saSidebarScrollTop');
                if (scrollPos) {
                    sidebar.scrollTop = parseInt(scrollPos);
                }
            })();
        </script>

        <main class="sa-main">
            <?php if ($err = getFlash('error')): ?>
                <div class="alert alert-error mb-6"><?= e($err) ?></div>
            <?php endif; ?>
            <?php if ($succ = getFlash('success')): ?>
                <div class="alert alert-success mb-6"><?= e($succ) ?></div>
            <?php endif; ?>
            <?php if ($warn = getFlash('warning')): ?>
                <div class="alert alert-warning mb-6"><?= e($warn) ?></div>
            <?php endif; ?>

            <div class="sa-page-header">
                <h1 class="sa-page-title"><?= e($pageTitle) ?></h1>
                <p class="text-muted">TellerPro SaaS Ecosystem Control Panel</p>
            </div>

            <div class="sa-content-body">
                <?= $content ?>
            </div>
        </main>
    </div>
    <script>
        // Prevent scroll-to-top behavior on sidebar navigation clicks
        (function() {
            const sidebar = document.querySelector('.sa-sidebar');
            document.querySelectorAll('.sa-nav-item').forEach(function(link) {
                link.addEventListener('click', function(e) {
                    sessionStorage.setItem('saSidebarScrollTop', sidebar.scrollTop);
                });
            });

            // Clear after load
            window.addEventListener('load', function() {
                setTimeout(() => {
                    sessionStorage.removeItem('saSidebarScrollTop');
                }, 100);
            });
        })();
    </script>
</body>
</html>
