<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title || 'WhatsApp Multi-Session Bot' %></title>
    <% if (typeof csrfToken !== 'undefined' && csrfToken) { %>
    <meta name="csrf-token" content="<%= csrfToken %>">
    <% } %>
    <% if (typeof user !== 'undefined' && user && user.id) { %>
    <meta name="user-id" content="<%= user.id %>">
    <% } %>
    <link rel="icon" type="image/png" href="/uploads/favicon.png">
    <link rel="shortcut icon" type="image/png" href="/uploads/favicon.png">
    <link rel="apple-touch-icon" href="/uploads/favicon.png">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" />
    <link href="/css/style.css" rel="stylesheet">
</head>
<body>
    <% if (typeof user !== 'undefined' && user) { %>
    <!-- Sidebar -->
    <div class="sidebar" id="sidebar">
        <div class="sidebar-header">
            <a href="/dashboard" class="sidebar-brand-info">
                <img src="/uploads/logo.png" alt="Wavvy Logo" class="brand-logo">
            </a>
            <button class="sidebar-close d-md-none" id="sidebarClose">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </div>

        <nav class="sidebar-nav">
            <!-- Main Section Heading -->
            <div class="sidebar-section-heading">
                <span>Main</span>
            </div>

            <!-- Dashboard - Single Item -->
            <a href="/dashboard" class="nav-item <%= typeof currentPage !== 'undefined' && currentPage === 'dashboard' ? 'active' : '' %>">
                <i class="fas fa-th-large"></i>
                <span>Dashboard</span>
            </a>

            <!-- Marketing - Accordion Group -->
            <div class="nav-group <%= typeof currentPage !== 'undefined' && ['campaigns', 'contacts', 'templates'].includes(currentPage) ? 'open' : '' %>">
                <div class="nav-group-header">
                    <span><i class="fas fa-bullhorn me-2"></i>Marketing</span>
                    <i class="fas fa-chevron-down chevron"></i>
                </div>
                <div class="nav-group-items">
                    <a href="/campaigns" class="nav-subitem <%= typeof currentPage !== 'undefined' && currentPage === 'campaigns' ? 'active' : '' %>">
                        <i class="fas fa-paper-plane"></i>
                        <span>Campaigns</span>
                    </a>
                    <a href="/contacts" class="nav-subitem <%= typeof currentPage !== 'undefined' && currentPage === 'contacts' ? 'active' : '' %>">
                        <i class="fas fa-address-book"></i>
                        <span>Contacts</span>
                    </a>
                    <a href="/templates" class="nav-subitem <%= typeof currentPage !== 'undefined' && currentPage === 'templates' ? 'active' : '' %>">
                        <i class="fas fa-file-alt"></i>
                        <span>Templates</span>
                    </a>
                </div>
            </div>

            <!-- Tools - Accordion Group -->
            <div class="nav-group <%= typeof currentPage !== 'undefined' && ['number-checker', 'usage'].includes(currentPage) ? 'open' : '' %>">
                <div class="nav-group-header">
                    <span><i class="fas fa-tools me-2"></i>Tools</span>
                    <i class="fas fa-chevron-down chevron"></i>
                </div>
                <div class="nav-group-items">
                    <a href="/number-checker" class="nav-subitem <%= typeof currentPage !== 'undefined' && currentPage === 'number-checker' ? 'active' : '' %>">
                        <i class="fab fa-whatsapp"></i>
                        <span>Number Checker</span>
                    </a>
                    <a href="/usage" class="nav-subitem <%= typeof currentPage !== 'undefined' && currentPage === 'usage' ? 'active' : '' %>">
                        <i class="fas fa-chart-line"></i>
                        <span>Usage & Limits</span>
                    </a>
                </div>
            </div>

            <!-- Resources Section Heading -->
            <div class="sidebar-section-heading">
                <span>Resources</span>
            </div>

            <!-- Single Items -->
            <a href="/pricing" class="nav-item <%= typeof currentPage !== 'undefined' && currentPage === 'pricing' ? 'active' : '' %>">
                <i class="fas fa-crown"></i>
                <span>Pricing</span>
            </a>
            <a href="/api-docs" class="nav-item <%= typeof currentPage !== 'undefined' && currentPage === 'api-docs' ? 'active' : '' %>">
                <i class="fas fa-code"></i>
                <span>API Docs</span>
            </a>

            <% if (user.is_admin) { %>
            <!-- Admin Section Heading -->
            <div class="sidebar-section-heading">
                <span>Admin</span>
            </div>

            <!-- Admin - Accordion Group -->
            <div class="nav-group <%= typeof currentPage !== 'undefined' && ['users', 'admin-plans', 'assign-plans', 'settings'].includes(currentPage) ? 'open' : '' %>">
                <div class="nav-group-header">
                    <span><i class="fas fa-shield-alt me-2"></i>Administration</span>
                    <i class="fas fa-chevron-down chevron"></i>
                </div>
                <div class="nav-group-items">
                    <a href="/users" class="nav-subitem <%= typeof currentPage !== 'undefined' && currentPage === 'users' ? 'active' : '' %>">
                        <i class="fas fa-users"></i>
                        <span>Users</span>
                    </a>
                    <a href="/admin/plans" class="nav-subitem <%= typeof currentPage !== 'undefined' && currentPage === 'admin-plans' ? 'active' : '' %>">
                        <i class="fas fa-tags"></i>
                        <span>Plan Management</span>
                    </a>
                    <a href="/admin/assign-plans" class="nav-subitem <%= typeof currentPage !== 'undefined' && currentPage === 'assign-plans' ? 'active' : '' %>">
                        <i class="fas fa-user-tag"></i>
                        <span>Assign Plans</span>
                    </a>
                    <a href="/settings" class="nav-subitem <%= typeof currentPage !== 'undefined' && currentPage === 'settings' ? 'active' : '' %>">
                        <i class="fas fa-cog"></i>
                        <span>Settings</span>
                    </a>
                </div>
            </div>
            <% } %>
        </nav>
    </div>

    <!-- Main Content -->
    <div class="main-content" id="mainContent">
        <!-- Top Bar -->
        <div class="topbar">
            <button class="mobile-toggle" id="mobileToggle">
                <span></span>
                <span></span>
                <span></span>
            </button>
            <div class="topbar-title"></div>
            <div class="topbar-actions">
                <!-- Profile Dropdown -->
                <div class="dropdown">
                    <button class="topbar-btn profile-btn" id="profileDropdown" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                        <i class="fas fa-user-circle"></i>
                        <span class="profile-name"><%= user.fullname || user.username %></span>
                        <i class="fas fa-chevron-down ms-1"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end profile-dropdown" aria-labelledby="profileDropdown">
                        <li class="dropdown-header">
                            <div class="profile-dropdown-header">
                                <i class="fas fa-user-circle fa-2x"></i>
                                <div>
                                    <strong><%= user.fullname || user.username %></strong>
                                    <small class="d-block">
                                        <span class="user-id-text">ID: <%= user.id %></span>
                                        <button type="button" class="copy-email-btn" onclick="copyToClipboard(event, '<%= user.id %>')" title="Copy ID">
                                            <i class="fas fa-copy"></i>
                                        </button>
                                    </small>
                                    <small class="d-block">
                                        <span class="user-email-text"><%= user.email || (user.is_admin ? 'Administrator' : 'User') %></span>
                                        <% if (user.email) { %>
                                        <button type="button" class="copy-email-btn" onclick="copyToClipboard(event, '<%= user.email %>')" title="Copy email">
                                            <i class="fas fa-copy"></i>
                                        </button>
                                        <% } %>
                                    </small>
                                </div>
                            </div>
                        </li>
                        <li><hr class="dropdown-divider"></li>
                        <li>
                            <a class="dropdown-item" href="/api-management">
                                <i class="fas fa-key me-2"></i>API Management
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="/change-password">
                                <i class="fas fa-lock me-2"></i>Change Password
                            </a>
                        </li>
                        <li><hr class="dropdown-divider"></li>
                        <li>
                            <form method="POST" action="/logout" class="m-0">
                                <% if (typeof csrfToken !== 'undefined' && csrfToken) { %>
                                <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                                <% } %>
                                <button type="submit" class="dropdown-item text-danger">
                                    <i class="fas fa-sign-out-alt me-2"></i>Logout
                                </button>
                            </form>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Page Content -->
        <div class="page-content">
            <!-- Phone Verification Banner (hide if: user is verified OR has a plan assigned) -->
            <% if (user && !user.phone_verified && !user.tier && process.env.WABA_OTP_ENABLED === 'true' && currentPage !== 'verify-phone') { %>
                <div class="verify-banner">
                    <div class="verify-banner-content">
                        <div class="verify-banner-icon">
                            <i class="fab fa-whatsapp"></i>
                        </div>
                        <div class="verify-banner-text">
                            <span class="verify-banner-title">Verify to activate free plan</span>
                            <span class="verify-banner-desc">Get all basic features via WhatsApp verification</span>
                        </div>
                        <a href="/verify-phone" class="verify-banner-btn">
                            <i class="fas fa-arrow-right"></i>
                            <span>Verify</span>
                        </a>
                    </div>
                    <button type="button" class="verify-banner-close" onclick="this.parentElement.remove()">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            <% } %>
            
            <%- body %>
        </div>
    </div>

    <!-- Mobile Overlay -->
    <div class="sidebar-overlay" id="sidebarOverlay"></div>
    <% } else { %>
    <!-- Login page without sidebar -->
    <%- body %>
    <% } %>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/js/app.js"></script>
    <script src="/js/confirmation-modal.js"></script>
    <% if (typeof additionalScripts !== 'undefined') { %>
        <% additionalScripts.forEach(script => { %>
            <script src="<%= script %>"></script>
        <% }); %>
    <% } %>
    
    <!-- Copy Email Function -->
    <script>
    function copyToClipboard(event, text) {
        event.preventDefault();
        event.stopPropagation();
        const btn = event.currentTarget;
        const icon = btn.querySelector('i');
        navigator.clipboard.writeText(text).then(function() {
            icon.classList.remove('fa-copy');
            icon.classList.add('fa-check');
            btn.style.color = '#059669';
            Toast.success('Copied to clipboard!');
            setTimeout(function() {
                icon.classList.remove('fa-check');
                icon.classList.add('fa-copy');
                btn.style.color = '';
            }, 1500);
        }).catch(function() {
            Toast.error('Failed to copy');
        });
    }
    // Alias for backward compatibility
    function copyEmail(event, email) { copyToClipboard(event, email); }
    </script>

    <!-- Global Modal Backdrop Cleanup -->
    <script>
    // Fix for stuck modal backdrops (black overlay issue)
    (function() {
        // Clean up on page load
        function cleanupModalBackdrops() {
            document.querySelectorAll('.modal-backdrop').forEach(el => el.remove());
            document.body.classList.remove('modal-open');
            document.body.style.removeProperty('overflow');
            document.body.style.removeProperty('padding-right');
        }
        
        // Clean up on page load
        window.addEventListener('load', cleanupModalBackdrops);
        
        // Clean up when any modal is hidden
        document.addEventListener('hidden.bs.modal', cleanupModalBackdrops);
        
        // Clean up on page visibility change (when tab becomes visible)
        document.addEventListener('visibilitychange', function() {
            if (!document.hidden) {
                cleanupModalBackdrops();
            }
        });
        
        // Make cleanup function globally available
        window.cleanupModalBackdrops = cleanupModalBackdrops;
    })();
    </script>
</body>
</html>
