<?php
/**
 * Cincinnati Fire Department Portal - Dashboard Shell
 * All modules load inside this shell via ?page= parameter.
 */
require_once __DIR__ . '/config/auth.php';

$user = requireLogin();
$csrf = generateCsrfToken();
$shifts = getUpcomingShifts();

// Sanitize page parameter
$validPages = ['home', 'office-dashboard', 'overtime-taskforce', 'scheduling-deficit', 'ot-intelligence', 'ot-executive', 'ot-simulator', 'meeting-agenda', 'powerbi', 'calendar', 'incidents', 'eso', 'eso-ems', 'eso-fire', 'eso-fire-briefing', 'eso-personnel', 'target-solutions', 'traffic-cameras', 'local-48', 'admin', 'admin-users', 'admin-roles'];
$page = preg_replace('/[^a-z0-9\-]/', '', $_GET['page'] ?? 'home');
if (!in_array($page, $validPages)) $page = 'home';

// Admin pages require admin role
if (strpos($page, 'admin') === 0 && !hasRole('captain')) {
    $page = 'home';
}

$pageTitle = [
    'home' => 'Dashboard',
    'office-dashboard' => 'Office Dashboard',
    'overtime-taskforce' => 'Overtime Taskforce',
    'scheduling-deficit' => 'Scheduling At A Deficit',
    'ot-intelligence' => 'OT Intelligence Center',
    'ot-executive' => 'OT Executive Brief',
    'ot-simulator' => 'Staffing Impact Simulator',
    'meeting-agenda' => 'Meeting Agenda',
    'powerbi' => 'City of Cincinnati | Power BI',
    'calendar' => 'Department Calendar',
    'incidents' => 'Active Incidents',
    'eso' => 'ESO',
    'target-solutions' => 'Target Solutions',
    'traffic-cameras' => 'Traffic Cameras',
    'local-48' => 'Contract Language',
    'admin' => 'Admin Panel',
    'admin-users' => 'Manage Users',
    'admin-roles' => 'Manage Roles',
][$page] ?? 'Dashboard';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="theme-color" content="#0B2240">
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="manifest" href="manifest.json">
    <title><?= htmlspecialchars($pageTitle) ?> — Cincinnati Fire Portal</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon-32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicon-16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="assets/img/apple-touch-icon.png">
    <link rel="stylesheet" href="assets/css/app.css">
    <link rel="stylesheet" href="assets/css/ticker.css">
    <link rel="stylesheet" href="assets/css/toasts.css">
    <?php if ($page === 'overtime-taskforce' || $page === 'office-dashboard' || $page === 'eso'): ?>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
    <?php endif; ?>
    <?php if (in_array($page, ['office-dashboard', 'incidents', 'home'])): ?>
    <script src="https://maps.googleapis.com/maps/api/js?key=<?= htmlspecialchars(GOOGLE_MAPS_API_KEY) ?>&libraries=visualization"></script>
    <?php endif; ?>
</head>
<body>
    <!-- HEADER -->
    <header class="header">
        <div class="header-left">
            <button class="sidebar-toggle" id="sidebarToggle" aria-label="Toggle menu">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                    <path d="M3 5h14M3 10h14M3 15h14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                </svg>
            </button>
            <img src="assets/img/city-logo.png" alt="City of Cincinnati" class="header-logo" style="height:28px; width:auto;">
            <span class="header-title">Cincinnati Fire Department</span>
            <span class="header-sep">|</span>
            <div class="weather-widget" id="weatherWidget">
                <span class="weather-loading">Loading weather...</span>
            </div>
        </div>

        <?php $today = $shifts[0]; ?>
        <div class="header-center">
            <div class="shift-today-badge">
                <span class="shift-today-dot" style="background: <?= $today['color'] ?>;"></span>
                <span class="shift-today-unit"><?= $today['unit'] ?></span>
            </div>
            <div class="header-datetime">
                <span class="header-date" id="headerDate"></span>
                <span class="header-time" id="headerTime"></span>
            </div>
            <span class="header-holiday" id="headerHoliday"></span>
        </div>

        <div class="header-right">
            <div class="river-level" id="riverLevel" title="Ohio River at Cincinnati">
                <svg class="river-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M2 12c2-2 4-2 6 0s4 2 6 0 4-2 6 0"/>
                    <path d="M2 18c2-2 4-2 6 0s4 2 6 0 4-2 6 0"/>
                </svg>
                <span class="river-value" id="riverValue">--</span>
                <span class="river-label">ft</span>
            </div>
            <button class="radio-toggle" id="toastToggle" title="Toggle Incident Alerts" onclick="toggleToastMute()" style="position:relative;">
                <svg id="toastBellOn" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>
                </svg>
                <svg id="toastBellOff" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:none;">
                    <path d="M13.73 21a2 2 0 0 1-3.46 0"/><path d="M18.63 13A17.89 17.89 0 0 1 18 8"/><path d="M6.26 6.26A5.86 5.86 0 0 0 6 8c0 7-3 9-3 9h14"/><path d="M18 8a6 6 0 0 0-9.33-5"/><line x1="1" y1="1" x2="23" y2="23"/>
                </svg>
            </button>
            <button class="radio-toggle" id="radioToggle" title="Toggle Live Radio">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M11 5L6 9H2v6h4l5 4V5z"/>
                    <path class="radio-waves" d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"/>
                </svg>
            </button>
            <span class="header-sep">|</span>
            <div class="user-menu" id="userMenu">
                <button class="user-menu-trigger" id="userMenuTrigger">
                    <span class="user-avatar"><?= strtoupper(substr($user['first_name'], 0, 1) . substr($user['last_name'], 0, 1)) ?></span>
                    <span class="user-name"><?= htmlspecialchars($user['first_name']) ?></span>
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor"><path d="M3 5l3 3 3-3"/></svg>
                </button>
                <div class="user-dropdown" id="userDropdown">
                    <div class="dropdown-header">
                        <strong><?= htmlspecialchars($user['first_name'] . ' ' . $user['last_name']) ?></strong>
                        <span class="role-badge"><?= htmlspecialchars(ROLES[$user['role']]['label'] ?? $user['role']) ?></span>
                    </div>
                    <div class="dropdown-divider"></div>
                    <?php if (hasRole('captain')): ?>
                    <a href="dashboard.php?page=admin" class="dropdown-item">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
                        Admin Panel
                    </a>
                    <?php endif; ?>
                    <a href="logout.php" class="dropdown-item dropdown-item--danger">
                        <svg width="16" height="16" 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"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
                        Sign Out
                    </a>
                </div>
            </div>
        </div>
    </header>

    <!-- NEWS TICKER BAR -->
    <div class="ticker-bar" id="tickerBar">
        <div class="ticker-bar-label">
            <span class="ticker-bar-dot"></span>
            NEWS
        </div>
        <div class="news-ticker" id="newsTicker">
            <div class="ticker-track" id="tickerTrack">
                <span class="ticker-placeholder">Loading headlines...</span>
            </div>
        </div>
    </div>

    <!-- SIDEBAR -->
    <aside class="sidebar" id="sidebar">
        <nav class="sidebar-nav" style="padding-top:20px;">
            <a href="dashboard.php?page=home" class="nav-item <?= $page === 'home' ? 'active' : '' ?>">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
                <span>Dashboard</span>
            </a>
            <a href="dashboard.php?page=office-dashboard" class="nav-item <?= $page === 'office-dashboard' ? 'active' : '' ?>">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
                <span>Office Dashboard</span>
            </a>
            <a href="dashboard.php?page=overtime-taskforce" class="nav-item <?= $page === 'overtime-taskforce' ? 'active' : '' ?>">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                <span>Overtime Taskforce</span>
            </a>
            <a href="dashboard.php?page=calendar" class="nav-item <?= $page === 'calendar' ? 'active' : '' ?>">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                <span>Department Calendar</span>
            </a>
            <a href="dashboard.php?page=incidents" class="nav-item <?= $page === 'incidents' ? 'active' : '' ?>">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></svg>
                <span>Active Incidents</span>
            </a>
            <a href="dashboard.php?page=eso" class="nav-item <?= $page === 'eso' ? 'active' : '' ?>">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>
                <span>ESO</span>
            </a>
            <a href="dashboard.php?page=target-solutions" class="nav-item <?= $page === 'target-solutions' ? 'active' : '' ?>">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>
                <span>Target Solutions</span>
            </a>
            <a href="dashboard.php?page=traffic-cameras" class="nav-item <?= $page === 'traffic-cameras' ? 'active' : '' ?>">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
                <span>Traffic Cameras</span>
            </a>
            <a href="dashboard.php?page=local-48" class="nav-item <?= $page === 'local-48' ? 'active' : '' ?>">
                <svg width="20" height="20" 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"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                <span>Contract Language</span>
            </a>

            <div class="nav-divider"></div>

            <?php if (hasRole('captain')): ?>
            <a href="dashboard.php?page=admin" class="nav-item <?= strpos($page, 'admin') === 0 ? 'active' : '' ?>">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
                <span>Admin</span>
            </a>
            <?php endif; ?>
        </nav>

        <div class="sidebar-footer">
            <div class="sidebar-user">
                <span class="user-avatar-sm"><?= strtoupper(substr($user['first_name'], 0, 1) . substr($user['last_name'], 0, 1)) ?></span>
                <div>
                    <div class="sidebar-user-name"><?= htmlspecialchars($user['first_name'] . ' ' . $user['last_name']) ?></div>
                    <div class="sidebar-user-role"><?= htmlspecialchars(ROLES[$user['role']]['label'] ?? $user['role']) ?></div>
                </div>
            </div>
        </div>
    </aside>

    <!-- SIDEBAR OVERLAY (mobile) -->
    <div class="sidebar-overlay" id="sidebarOverlay"></div>

    <!-- MAIN CONTENT -->
    <main class="main-content">
        <?php if (isset($_GET['error']) && $_GET['error'] === 'forbidden'): ?>
        <div class="alert alert-error" style="margin-bottom:20px;">You do not have permission to access that page.</div>
        <?php endif; ?>

        <?php
        // Load the requested module
        switch ($page) {
            case 'office-dashboard':
                include __DIR__ . '/modules/office-dashboard/index.php';
                break;
            case 'overtime-taskforce':
                include __DIR__ . '/modules/under-construction.php';
                break;
            case 'scheduling-deficit':
                include __DIR__ . '/modules/scheduling-deficit/index.php';
                break;
            case 'ot-intelligence':
                include __DIR__ . '/modules/ot-intelligence/index.php';
                break;
            case 'ot-executive':
                include __DIR__ . '/modules/ot-executive/index.php';
                break;
            case 'ot-simulator':
                include __DIR__ . '/modules/ot-simulator/index.php';
                break;
            case 'meeting-agenda':
                include __DIR__ . '/modules/meeting-agenda/index.php';
                break;
            case 'powerbi':
                include __DIR__ . '/modules/powerbi/index.php';
                break;
            case 'calendar':
                include __DIR__ . '/modules/calendar/index.php';
                break;
            case 'incidents':
                include __DIR__ . '/modules/incidents/index.php';
                break;
            case 'eso':
                include __DIR__ . '/modules/eso/index.php';
                break;
            case 'eso-ems':
                include __DIR__ . '/modules/eso/ems/index.php';
                break;
            case 'eso-fire':
                include __DIR__ . '/modules/eso/fire/index.php';
                break;
            case 'eso-fire-briefing':
                include __DIR__ . '/modules/eso/fire/briefing.php';
                break;
            case 'eso-personnel':
                include __DIR__ . '/modules/eso/personnel/index.php';
                break;
            case 'target-solutions':
                include __DIR__ . '/modules/under-construction.php';
                break;
            case 'traffic-cameras':
                include __DIR__ . '/modules/traffic-cameras/index.php';
                break;
            case 'local-48':
                include __DIR__ . '/modules/local-48/index.php';
                break;
            case 'admin':
                include __DIR__ . '/admin/index.php';
                break;
            case 'admin-users':
                include __DIR__ . '/admin/users.php';
                break;
            case 'admin-roles':
                include __DIR__ . '/admin/roles.php';
                break;
            default:
                include __DIR__ . '/modules/home.php';
                break;
        }
        ?>
    </main>

    <!-- FOOTER -->
    <footer class="footer">
        <span>&copy; <?= date('Y') ?> Cincinnati Fire Department &middot; cincinnatifire.ai</span>
        <span>Powered by ResponseIQ</span>
    </footer>

    <!-- TOAST CONTAINER -->
    <div class="toast-container" id="toastContainer"></div>

    <!-- RADIO PLAYER (hidden by default) -->
    <div class="radio-player" id="radioPlayer" style="display:none;">
        <div class="radio-player-inner">
            <span class="radio-label">Cincinnati Fire Dispatch</span>
            <iframe id="radioIframe" src="" width="280" height="150" frameborder="0" allowfullscreen
                    style="border-radius:8px;"></iframe>
            <a href="https://www.broadcastify.com/webPlayer/<?= BROADCASTIFY_PLAYER_ID ?>" target="_blank"
               class="radio-fallback-link" id="radioFallbackLink" style="display:none;">
                Open Radio Player in New Tab
            </a>
        </div>
    </div>

    <!-- Portal config for JS -->
    <script>
        window.CFD_PORTAL = {
            csrfToken: '<?= $csrf ?>',
            user: <?= json_encode($user, JSON_HEX_TAG | JSON_HEX_APOS) ?>,
            page: '<?= $page ?>',
            basePath: '<?= rtrim(dirname($_SERVER['SCRIPT_NAME']), '/') ?>',
            apiPath: '<?= rtrim(dirname($_SERVER['SCRIPT_NAME']), '/') ?>/api',
            weatherKey: '<?= OPENWEATHER_API_KEY ?>',
            mapsKey: '<?= GOOGLE_MAPS_API_KEY ?>',
            geminiKey: '<?= env('GOOGLE_GEMINI_API_KEY', '') ?>',
            broadcastifyId: '<?= BROADCASTIFY_PLAYER_ID ?>',
            incidentRefresh: <?= INCIDENT_REFRESH ?>,
            weatherRefresh: <?= WEATHER_REFRESH ?>,
            newsRefresh: <?= NEWS_REFRESH ?>
        };
    </script>
    <script src="assets/js/app.js"></script>
    <script src="assets/js/weather.js"></script>
    <script src="assets/js/ticker.js"></script>
    <script src="assets/js/toasts.js"></script>
    <script src="assets/js/radio.js"></script>
    <!-- iOS Bottom Tab Bar (mobile only) -->
    <nav class="mobile-tab-bar" id="mobileTabBar">
        <a href="dashboard.php?page=home" class="mobile-tab <?= $page === 'home' ? 'active' : '' ?>">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
            <span>Home</span>
        </a>
        <a href="dashboard.php?page=incidents" class="mobile-tab <?= $page === 'incidents' ? 'active' : '' ?>">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
            <span>Incidents</span>
        </a>
        <a href="dashboard.php?page=calendar" class="mobile-tab <?= $page === 'calendar' ? 'active' : '' ?>">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
            <span>Calendar</span>
        </a>
        <a href="dashboard.php?page=eso" class="mobile-tab <?= in_array($page, ['eso','eso-ems','eso-fire','eso-fire-briefing','eso-personnel']) ? 'active' : '' ?>">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
            <span>ESO</span>
        </a>
        <a href="#" class="mobile-tab" onclick="event.preventDefault();toggleActionSheet();">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
            <span>More</span>
        </a>
    </nav>

    <!-- iOS Action Sheet (More menu) -->
    <div class="action-sheet-overlay" id="actionSheetOverlay" onclick="if(event.target===this)toggleActionSheet()">
        <div class="action-sheet">
            <div class="action-sheet-group">
                <a href="dashboard.php?page=office-dashboard" class="action-sheet-item">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
                    Office Dashboard
                </a>
                <a href="dashboard.php?page=overtime-taskforce" class="action-sheet-item">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                    Overtime Taskforce
                </a>
                <a href="dashboard.php?page=traffic-cameras" class="action-sheet-item">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
                    Traffic Cameras
                </a>
                <a href="dashboard.php?page=local-48" class="action-sheet-item">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                    Contract Language
                </a>
                <a href="dashboard.php?page=target-solutions" class="action-sheet-item">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>
                    Target Solutions
                </a>
                <a href="dashboard.php?page=admin" class="action-sheet-item">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
                    Admin
                </a>
            </div>
            <button class="action-sheet-cancel" onclick="toggleActionSheet()">Cancel</button>
        </div>
    </div>

    <script>
    function toggleActionSheet() {
        document.getElementById('actionSheetOverlay').classList.toggle('open');
    }
    </script>

    <script>
    // Toast mute toggle
    window.toastsMuted = localStorage.getItem('cfd_toasts_muted') === '1';
    function toggleToastMute() {
        window.toastsMuted = !window.toastsMuted;
        localStorage.setItem('cfd_toasts_muted', window.toastsMuted ? '1' : '0');
        document.getElementById('toastBellOn').style.display = window.toastsMuted ? 'none' : 'block';
        document.getElementById('toastBellOff').style.display = window.toastsMuted ? 'block' : 'none';
        document.getElementById('toastToggle').style.opacity = window.toastsMuted ? '0.4' : '1';
        document.getElementById('toastToggle').title = window.toastsMuted ? 'Alerts Muted (click to unmute)' : 'Toggle Incident Alerts';
    }
    // Set initial state
    if (window.toastsMuted) {
        document.getElementById('toastBellOn').style.display = 'none';
        document.getElementById('toastBellOff').style.display = 'block';
        document.getElementById('toastToggle').style.opacity = '0.4';
        document.getElementById('toastToggle').title = 'Alerts Muted (click to unmute)';
    }
    </script>
    <script src="assets/js/voice-ai.js"></script>

    <!-- Floating Voice Assistant Button -->
    <button class="voice-fab" id="voiceFab" onclick="togglePortalVoice()" title="Voice Assistant">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
    </button>
    <div class="voice-fab-response" id="voiceFabResponse" style="display:none;"></div>

    <style>
    .voice-fab {
        position:fixed; bottom:24px; right:24px; z-index:100;
        width:52px; height:52px; border-radius:50%; border:none; cursor:pointer;
        background:linear-gradient(135deg, var(--primary), var(--accent));
        color:#fff; display:flex; align-items:center; justify-content:center;
        box-shadow:0 4px 20px rgba(11,34,64,0.3); transition:all 0.2s;
    }
    .voice-fab:hover { transform:scale(1.1); box-shadow:0 6px 30px rgba(11,34,64,0.4); }
    .voice-fab.active {
        background:linear-gradient(135deg, #DC2626, #FF6B6B);
        animation:voiceFabPulse 1.5s ease-in-out infinite;
    }
    @keyframes voiceFabPulse { 0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,0.4)} 50%{box-shadow:0 0 0 16px rgba(220,38,38,0)} }
    .voice-fab-response {
        position:fixed; bottom:84px; right:24px; z-index:100;
        max-width:320px; padding:12px 16px; border-radius:12px;
        background:rgba(11,34,64,0.95); backdrop-filter:blur(12px);
        border:1px solid rgba(255,255,255,0.1); color:#fff; font-size:13px; line-height:1.5;
        box-shadow:0 8px 30px rgba(0,0,0,0.3);
        animation:msgIn 0.3s ease;
    }
    @media (max-width: 768px) { .voice-fab { bottom:16px; right:16px; } .voice-fab-response { right:16px; bottom:76px; } }
    </style>

    <script>
    (function() {
        const fab = document.getElementById('voiceFab');
        const responseEl = document.getElementById('voiceFabResponse');
        if (!fab || !window.VoiceAI) return;

        let responseTimer = null;

        VoiceAI.init({
            apiKey: window.CFD_PORTAL?.geminiKey || '',
            systemPrompt: 'You are a voice assistant for the Cincinnati Fire Department portal. Keep answers brief — 1-2 sentences. You can help with: weather, shift schedule, incident counts, contract questions, and general fire department info. Be professional and concise.',
            onResponse: (text) => {
                responseEl.textContent = text;
                responseEl.style.display = 'block';
                if (responseTimer) clearTimeout(responseTimer);
                responseTimer = setTimeout(() => { responseEl.style.display = 'none'; }, 10000);
            },
            onStateChange: (state) => {
                fab.classList.toggle('active', state === 'listening' || state === 'speaking');
            },
            onError: (msg) => {
                responseEl.textContent = 'Voice: ' + msg;
                responseEl.style.display = 'block';
                setTimeout(() => { responseEl.style.display = 'none'; }, 5000);
                fab.classList.remove('active');
            }
        });

        window.togglePortalVoice = function() { VoiceAI.toggle(); };
    })();
    </script>
    <script>if('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js').catch(()=>{});</script>
</body>
</html>
