<?php
/**
 * PWA Base Layout
 * Mobile-first responsive layout with bottom navigation
 */

// Check if user is authenticated
if (!isAuthenticated()) {
    redirect(BASE_URL . '/login');
}

$currentUser = (new User())->findById($_SESSION['user_id']);
$currentPage = $_GET['page'] ?? 'home';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="theme-color" content="#667eea">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="Birthday Reminder">
    
    <title><?= $pageTitle ?? 'Birthday Reminder' ?> - PWA</title>
    
    <!-- Manifest -->
    <link rel="manifest" href="<?= PUBLIC_URL ?>/manifest.json">
    
    <!-- Icons -->
    <link rel="icon" type="image/png" sizes="192x192" href="<?= PUBLIC_URL ?>/images/icons/icon-192x192.png">
    <link rel="apple-touch-icon" href="<?= PUBLIC_URL ?>/images/icons/icon-192x192.png">
    
    <!-- Styles -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    <link href="<?= PUBLIC_URL ?>/css/pwa.css" rel="stylesheet">
    
    <?php if (isset($additionalCSS)): ?>
        <?= $additionalCSS ?>
    <?php endif; ?>
</head>
<body>
    <!-- Header -->
    <header class="pwa-header">
        <div class="pwa-header-title">
            <i class="bi bi-cake2-fill"></i>
            <span><?= $headerTitle ?? 'Birthday Reminder' ?></span>
        </div>
        <div class="pwa-header-actions">
            <?php if (isset($showSearch) && $showSearch): ?>
                <button class="pwa-header-btn" onclick="toggleSearch()">
                    <i class="bi bi-search"></i>
                </button>
            <?php endif; ?>
            
            <button class="pwa-header-btn" onclick="showMenu()">
                <i class="bi bi-three-dots-vertical"></i>
            </button>
        </div>
    </header>

    <!-- Main Content -->
    <main class="pwa-content">
        <?php
        // Include the page content
        if (isset($contentFile) && file_exists($contentFile)) {
            include $contentFile;
        }
        ?>
    </main>

    <!-- Bottom Navigation -->
    <nav class="pwa-nav">
        <a href="<?= BASE_URL ?>/home" class="pwa-nav-item <?= $currentPage === 'home' ? 'active' : '' ?>">
            <i class="bi bi-house-fill"></i>
            <span>Home</span>
        </a>
        
        <a href="<?= BASE_URL ?>/add-contact" class="pwa-nav-item <?= $currentPage === 'add-contact' ? 'active' : '' ?>">
            <i class="bi bi-person-plus-fill"></i>
            <span>Add Contact</span>
        </a>
        
        <a href="<?= BASE_URL ?>/templates" class="pwa-nav-item <?= $currentPage === 'templates' ? 'active' : '' ?>">
            <i class="bi bi-file-text-fill"></i>
            <span>Templates</span>
        </a>
        
        <a href="<?= BASE_URL ?>/search" class="pwa-nav-item <?= $currentPage === 'search' ? 'active' : '' ?>">
            <i class="bi bi-search"></i>
            <span>Search</span>
        </a>
        
        <a href="<?= BASE_URL ?>/notes" class="pwa-nav-item <?= $currentPage === 'add-note' ? 'active' : '' ?>">
            <i class="bi bi-sticky-fill"></i>
            <span>Notes</span>
        </a>
    </nav>

    <!-- Menu Modal -->
    <div id="menuModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 2000;" onclick="hideMenu()">
        <div style="position: absolute; top: 60px; right: 20px; background: white; border-radius: 15px; padding: 10px; min-width: 200px; box-shadow: 0 4px 20px rgba(0,0,0,0.2);" onclick="event.stopPropagation()">
            <a href="<?= BASE_URL ?>/profile" style="display: block; padding: 12px 16px; color: #333; text-decoration: none; border-radius: 8px; transition: background 0.2s;" onmouseover="this.style.background='#f8f9fa'" onmouseout="this.style.background='transparent'">
                <i class="bi bi-person-circle"></i> Profile
            </a>
            <a href="<?= BASE_URL ?>/settings" style="display: block; padding: 12px 16px; color: #333; text-decoration: none; border-radius: 8px; transition: background 0.2s;" onmouseover="this.style.background='#f8f9fa'" onmouseout="this.style.background='transparent'">
                <i class="bi bi-gear-fill"></i> Settings
            </a>
            <a href="<?= BASE_URL ?>/admin/dashboard" style="display: block; padding: 12px 16px; color: #333; text-decoration: none; border-radius: 8px; transition: background 0.2s;" onmouseover="this.style.background='#f8f9fa'" onmouseout="this.style.background='transparent'">
                <i class="bi bi-speedometer2"></i> Admin Panel
            </a>
            <hr style="margin: 8px 0; border: none; border-top: 1px solid #e9ecef;">
            <a href="<?= BASE_URL ?>/admin/logout" style="display: block; padding: 12px 16px; color: #dc3545; text-decoration: none; border-radius: 8px; transition: background 0.2s;" onmouseover="this.style.background='#f8f9fa'" onmouseout="this.style.background='transparent'" onclick="return confirm('Are you sure you want to logout?')">
                <i class="bi bi-box-arrow-right"></i> Logout
            </a>
        </div>
    </div>

    <!-- Install Prompt -->
    <div id="installPrompt" class="install-prompt">
        <div class="install-prompt-title">Install Birthday Reminder</div>
        <div class="install-prompt-text">Install this app on your home screen for quick and easy access!</div>
        <div class="install-prompt-actions">
            <button class="pwa-btn pwa-btn-primary" id="install-pwa-button" style="flex: 1;">Install</button>
            <button class="pwa-btn pwa-btn-outline" onclick="hideInstallPrompt()" style="flex: 1;">Later</button>
        </div>
    </div>

    <!-- Scripts -->
    <script>
        // Menu functions
        function showMenu() {
            document.getElementById('menuModal').style.display = 'block';
        }
        
        function hideMenu() {
            document.getElementById('menuModal').style.display = 'none';
        }
        
        // Search toggle
        function toggleSearch() {
            window.location.href = '<?= BASE_URL ?>/search';
        }
        
        // Install prompt
        function hideInstallPrompt() {
            document.getElementById('installPrompt').classList.remove('show');
            localStorage.setItem('installPromptDismissed', 'true');
        }
        
        // Show install prompt if not dismissed
        window.addEventListener('beforeinstallprompt', (e) => {
            if (!localStorage.getItem('installPromptDismissed')) {
                setTimeout(() => {
                    document.getElementById('installPrompt').classList.add('show');
                }, 3000);
            }
        });
        
        // Hide menu on escape key
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                hideMenu();
            }
        });
    </script>
    
    <!-- PWA Script -->
    <script src="<?= PUBLIC_URL ?>/js/pwa.js"></script>
    
    <?php if (isset($additionalJS)): ?>
        <?= $additionalJS ?>
    <?php endif; ?>
</body>
</html>
