app.component('navbar', {
    created() {
        this.load_def();
        this.initSeenNotifications();
        this.startPolling();
    },
    beforeUnmount() {
        this.stopPolling();
    },
    template: `<div id="top" class="no-print">

    <nav class="navbar navbar-inverse navbar-dark fixed-top navbar-fixed-top" style="padding-top: 10px;">
        <a data-bs-original-title="Show/Hide Menu" data-bs-placement="bottom" class="accordion-toggle btn btn-primary btn-sm visible-xs d-md-none" data-bs-toggle="collapse" data-bs-target="#menu" href="#menu" id="menu-toggle">
            <i class="icon-align-justify"></i>
        </a>

        <!-- LOGO SECTION -->
        <header class="navbar-header">
            <a href="/" class="navbar-brand">
                <img :src="logo" />
            </a>
        </header>
        <!-- END LOGO SECTION -->

        <ul class="nav navbar-top-links navbar-right ms-auto">

            <!-- NOTIFICATIONS -->
            <li id="alert_notificatoin_bar" class="dropdown">
                <a data-bs-toggle="dropdown" class="dropdown-toggle" href="#" @click="primeAudio">
                    <span class="badge bg-important">{{notify.length}}</span>&nbsp;<i class="icon-chevron-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-menu-end extended notification">
                    <div class="notify-arrow notify-arrow-blue"></div>
                    <li v-for="(v,k) in notify" :key="v.id">
                        <a href="javascript:;" @click="readnotify(v,k)">
                            <span class="label label-primary" style="word-wrap:break-word;">new</span>
                            <span class="small italic float-end pull-right"><em>{{v.stamp}}</em></span>
                            <div>{{v.msg}}</div>
                        </a>
                    </li>
                    <li v-if="notify.length == 0">
                        <a href="javascript:;">no new notifications</a>
                    </li>
                </ul>
            </li>
            <!-- END NOTIFICATIONS -->

            <!-- REQUESTS -->
            <li v-if="isnotify" class="dropdown">
                <a class="dropdown-toggle" data-bs-toggle="dropdown" href="#" @click="primeAudio">
                    <span class="label label-success">{{request.length}}</span>&nbsp;<i class="icon-chevron-down"></i>
                </a>

                <ul class="dropdown-menu dropdown-menu-end dropdown-messages">
                    <li v-if="request.length == 0">
                        <a href="javascript:;">no new requests</a>
                    </li>
                    <template v-else>
                        <li v-for="(v,i) in request" :key="i">
                            <a :href="v.url">
                                <div>
                                    <strong>{{v.uid}}</strong>
                                    <span class="float-end pull-right text-muted">
                                        <em>{{v.stamp}}</em>
                                    </span>
                                </div>
                                <div>{{v.name}}
                                    <br />
                                    <span class="label label-primary">Important</span>
                                </div>
                            </a>
                            <div class="divider"></div>
                        </li>
                    </template>
                    <li><a href="/request">view all</a></li>
                </ul>
            </li>
            <!-- END REQUESTS -->

            <!-- USER MENU -->
            <li class="dropdown">
                <a class="dropdown-toggle" data-bs-toggle="dropdown" href="#">
                    <i class="icon-user"></i>&nbsp; <i class="icon-chevron-down"></i>
                </a>

                <ul class="dropdown-menu dropdown-menu-end dropdown-user">
                    <li><a href="/myprofile"><i class="icon-user"></i> User Profile </a></li>
                    <li><a href="/mysettings"><i class="icon-gear"></i> Profile Settings </a></li>
                    <li class="divider"></li>
                    <li><a href="javascript:;" @click="logout"><i class="icon-signout"></i> Logout </a></li>
                </ul>
            </li>
            <!-- END USER MENU -->
        </ul>

    </nav>

</div>`,
    data() {
        return {
            poller:        null,
            pollingDelay:  10000,
            isnotify:      false,
            request:       [],
            notify:        [],
            seenNotifyIds: new Set(),
            logo:          "/assets/img/logo3.png",
            audioPrimed:   false,
            audioCtx:      null,
        };
    },
    methods: {

        // --- INIT ----------------------------------------------------------

        async load_def() {
            try {
                const res = await api.get('settings/requests_config.php');
                this.isnotify = res.data.notify || false;
            } catch(err) {
                console.error("load_def failed:", err.message);
            }
        },

        async initSeenNotifications() {
            try {
                const res = await api.get('settings/requests.php');
                this.notify = res.data.notify || [];
                this.request = res.data.json || [];
                // Mark all current notifications as already seen so they
                // don't trigger a sound on first load.
                this.notify.forEach(n => {
                    if(n.id) this.seenNotifyIds.add(n.id);
                });
            } catch(err) {
                console.error("initSeenNotifications failed:", err.message);
            }
        },

        // --- POLLING -------------------------------------------------------

        startPolling() {
            const poll = async () => {
                // Only fetch when the tab is visible.
                if(!document.hidden) {
                    await this.get();
                }
                // Always reschedule so polling continues after a network error.
                this.poller = setTimeout(poll, this.pollingDelay);
            };
            poll();
        },

        stopPolling() {
            clearTimeout(this.poller);
            this.poller = null;
        },

        // --- FETCH ---------------------------------------------------------

        async get() {
            try {
                const res      = await api.get('settings/requests.php');
                const incoming = res.data.notify || [];

                // Only notifications not seen on init or in a previous poll.
                const newOnes = incoming.filter(n => !this.seenNotifyIds.has(n.id));

                if(newOnes.length) {
                    this.onNewNotifications(newOnes);
                }

                incoming.forEach(n => {
                    if(n.id) this.seenNotifyIds.add(n.id);
                });

                this.notify  = incoming;
                this.request = res.data.json || [];
            } catch(err) {
                console.error("Notification fetch failed:", err.message);
            }
        },

        // --- NEW NOTIFICATION HANDLER --------------------------------------

        onNewNotifications(newItems) {
            this.playSound();
        },

        primeAudio() {
            if(this.audioPrimed) return;
            try {
                this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
                if(this.audioCtx.state === "suspended") {
                    this.audioCtx.resume();
                }
                this.audioPrimed = true;
            } catch(err) {
                console.warn("Web Audio API not available:", err.message);
            }
        },

        playSound() {
            try {
                const ctx = this.audioCtx || new (window.AudioContext || window.webkitAudioContext)();

                if(ctx.state === "suspended") {
                    ctx.resume();
                }

                // Oscillator generates the tone.
                const oscillator = ctx.createOscillator();
                oscillator.type            = "sine";
                oscillator.frequency.value = 880; // Hz

                // Gain node controls volume and fade-out.
                const gain = ctx.createGain();
                gain.gain.setValueAtTime(0.3, ctx.currentTime);
                gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.4);

                oscillator.connect(gain);
                gain.connect(ctx.destination);

                oscillator.start(ctx.currentTime);
                oscillator.stop(ctx.currentTime + 0.4);
            } catch(err) {
                console.warn("playSound failed:", err.message);
            }
        },

        // --- NOTIFICATIONS -------------------------------------------------

        readnotify(obj, k) {
            api.post('settings/read.php', { index: obj.id })
                .catch(err => console.error("readnotify failed:", err.message));
            this.notify.splice(k, 1);
        },

        // --- AUTH ----------------------------------------------------------

        logout() {
            api.get('/logout/logout.php')
                .then(() => {
                    this.stopPolling();
                    window.location.reload();
                })
                .catch(err => {
                    console.error("Logout failed:", err.message);
                });
        },
    },

    computed: {
        notifyCount() {
            return this.notify.length || 0;
        },
        hasNotifications() {
            return this.notify.length > 0;
        },
        hasRequests() {
            return this.request.length > 0;
        },
    },
});