<?php
/**
 * Floating Chat Include
 * Injects Firebase SDKs and real-time notification logic.
 */
$is_admin_path = (strpos($_SERVER['PHP_SELF'], '/admin/') !== false);
$is_driver_path = (strpos($_SERVER['PHP_SELF'], '/driver/') !== false);
$base_path = ($is_admin_path) ? '' : (($is_driver_path) ? '../admin/' : '../admin/');

// Cache busting with timestamp
$version = time();
?>

<!-- Firebase SDK (Compat) -->
<script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-database-compat.js"></script>

<!-- Firebase Config -->
<script src="<?= $base_path ?>includes/firebase_config.js?v=<?= $version ?>"></script>

<!-- Floating Chat Logic -->
<script src="<?= $base_path ?>includes/floating_chat.js?v=<?= $version ?>"></script>

<style>
    /* Critical UI styles to ensure visibility even if CSS files fail to load */
    #floating-chat-container {
        position: fixed !important;
        z-index: 2147483647 !important; /* Max z-index */
    }
    #floating-chat-button {
        box-shadow: 0 0 20px rgba(19, 127, 236, 0.6) !important;
        animation: float-pulse 3s infinite ease-in-out;
    }
    #floating-chat-badge {
        animation: badge-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    @keyframes float-pulse {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-5px); }
        100% { transform: translateY(0px); }
    }

    @keyframes badge-pop {
        0% { transform: scale(0); }
        100% { transform: scale(1); }
    }

    @keyframes chathead-pop-in {
        0% { transform: scale(0.5) translateY(20px); opacity: 0; }
        100% { transform: scale(1) translateY(0); opacity: 1; }
    }

    #chat-notification-bubble:hover {
        transform: scale(1.02);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -6px rgba(0, 0, 0, 0.1);
    }

    .dark #chat-notification-bubble {
        background-color: #1e293b !important;
        border-color: #334155 !important;
        color: white !important;
    }
    .dark #chat-notification-bubble div {
        color: white !important;
    }
    .dark #chat-notification-bubble div:nth-child(2) div:last-child {
        color: #94a3b8 !important;
    }

    .dark #floating-chat-menu {
        background-color: #1e293b !important;
        border-color: #334155 !important;
        color: white !important;
    }
    .dark #floating-chat-menu h3 {
        color: white !important;
    }
</style>
