<?php

declare(strict_types=1);
session_start();

require_once __DIR__ . '/inc/bootstrap.php';

date_default_timezone_set('Europe/Amsterdam');

// Alleen ingelogd
if (!fb_is_logged_in()) {
    fb_redirect('login?redirect=chat');
}

$pdo = fb_db();

// Haal ingelogde e-mail op en valideer
$userEmail = isset($_SESSION['user_email']) ? (string)$_SESSION['user_email'] : '';
if ($userEmail === '') {
    fb_redirect('login?redirect=chat');
}

$stmt = $pdo->prepare("SELECT id, email FROM gebruikers WHERE email = :email LIMIT 1");
$stmt->execute(['email' => $userEmail]);
$row = $stmt->fetch();
if (!$row) {
    fb_redirect('login?redirect=chat');
}

$customerId = (int)$row['id'];

// Bepaal titel op basis van chat mode (bot/human/human_pending)
$chatTitle = 'Evy (chatbot)';
$chatIconName = 'accessibility-outline'; // default voor bot
$chatModeStr = 'bot';
try {
    $st = $pdo->prepare("SELECT mode FROM chats WHERE customer_id = :cid AND status = 'open' ORDER BY id ASC LIMIT 1");
    $st->execute(['cid' => $customerId]);
    $mode = $st->fetchColumn();
    if (is_string($mode)) {
        $mode = strtolower(trim($mode));
        $chatModeStr = $mode;
        if ($mode === 'human' || $mode === 'human_pending') {
            $chatTitle = 'Medewerker';
            $chatIconName = 'rocket-outline';
        } else {
            $chatTitle = 'Evy (chatbot)';
            $chatIconName = 'accessibility-outline';
            $chatModeStr = 'bot';
        }
    }
} catch (Throwable $e) {
    // Laat standaardtitel staan bij fouten
}

?>
<!doctype html>
<html lang="nl">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, 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="#000000">
    <title>FlexBak Aanhangerverhuur | Chat</title>
    <meta name="description" content="Mobilekit HTML Mobile UI Kit">
    <meta name="keywords" content="bootstrap 5, mobile template, cordova, phonegap, mobile, html" />
    <link rel="icon" type="image/png" href="assets/img/favicon.png" sizes="32x32">
    <link rel="apple-touch-icon" sizes="180x180" href="assets/img/icon/192x192.png">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="manifest" href="__manifest.json">
    <style>
        .new-messages-btn {
            position: fixed;
            right: 16px;
            bottom: 80px;
            z-index: 1000;
            border-radius: 50%;
            width: 56px;
            height: 56px;
            border: none;
            background-color: #ff6600; /* FlexBak-ish */
            color: #fff;
            font-size: 10px;
            padding: 4px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        }
        .new-messages-btn.hidden {
            display: none;
        }

        /* Fullscreen image viewer */
        #imageViewerOverlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.9);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 2000;
        }
        #imageViewerOverlay img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        #imageViewerClose {
            position: absolute;
            top: 45px;
            right: 18px;
            z-index: 2001;
        }
    </style>
</head>

<body>

<!-- loader -->
<div id="loader">
    <div class="spinner-border text-primary" role="status"></div>
</div>
<!-- * loader -->

<!-- App Header -->
<div class="appHeader bg-primary text-light">
    <div class="left">
        <a href="/start" class="headerButton">
            <ion-icon name="home-outline"></ion-icon>
        </a>
    </div>
    <div class="pageTitle">Je chat met: <?php echo htmlspecialchars($chatTitle, ENT_QUOTES, 'UTF-8'); ?></div>
    <div class="right">
        <a href="#" id="chatHeaderModeBtn" class="headerButton" data-mode="<?php echo htmlspecialchars($chatModeStr, ENT_QUOTES, 'UTF-8'); ?>">
            <ion-icon name="<?php echo htmlspecialchars($chatIconName, ENT_QUOTES, 'UTF-8'); ?>"></ion-icon>
        </a>
    </div>
</div>
<!-- * App Header -->

<!-- App Capsule -->
<div id="appCapsule">

    <!-- Chat messages container -->
    <div id="chatBox"></div>
    <!-- Hier plakken we de HTML van include/chat_fetch.php in -->

</div>
<!-- * App Capsule -->

<!-- Fullscreen image viewer -->
<div id="imageViewerOverlay">
    <button id="imageViewerClose" class="btn btn-icon btn-light rounded">
        <ion-icon name="close"></ion-icon>
    </button>
    <img id="imageViewerImg" src="" alt="Foto">
</div>

<!-- chat footer -->
<div class="chatFooter">
    <form id="chatForm" class="chat-input-area">
        <!-- Plusknop voor foto/video -->
        <a href="#" id="chatAddMediaBtn" class="btn btn-icon btn-secondary rounded">
            <ion-icon name="add"></ion-icon>
        </a>
        <div class="form-group boxed">
            <div class="input-wrapper">
                <input type="text" class="form-control" name="message" placeholder="Schrijf een bericht" required>
                <i class="clear-input">
                    <ion-icon name="close-circle"></ion-icon>
                </i>
            </div>
        </div>
        <!-- BELANGRIJK: type="submit" zodat Enter én klik werken -->
        <button type="submit" class="btn btn-icon btn-primary rounded">
            <ion-icon name="send"></ion-icon>
        </button>
    </form>

    <!-- Verborgen file input uitsluitend voor foto / video -->
    <input type="file"
           id="chatMediaInput"
           accept="image/*,video/*"
           style="display:none;">
</div>
<!-- * chat footer -->

<!-- Floating knop voor nieuwe berichten -->
<button id="new-messages-btn" class="new-messages-btn hidden">
    Nieuwe berichten
</button>

<!-- ============== Js Files ==============  -->
<!-- Bootstrap -->
<script src="assets/js/lib/bootstrap.min.js"></script>
<!-- Ionicons -->
<script type="module" src="https://cdn.jsdelivr.net/npm/ionicons@latest/dist/ionicons/ionicons.esm.js"></script>
<!-- Splide -->
<script src="assets/js/plugins/splide/splide.min.js"></script>
<!-- ProgressBar js -->
<script src="assets/js/plugins/progressbar-js/progressbar.min.js"></script>
<!-- Base Js File -->
<script src="assets/js/base.js"></script>

<script>
    // Globale variabelen
    let firstLoadDone = false;
    let lastMessageId = 0;
    const POLL_MS = 5000; // elke 5 seconden checken

    const chatBox   = document.getElementById('chatBox');
    const chatForm  = document.getElementById('chatForm');
    const input     = chatForm.querySelector('input[name="message"]');
    const newBtn    = document.getElementById('new-messages-btn');

    const addMediaBtn = document.getElementById('chatAddMediaBtn');
    const mediaInput  = document.getElementById('chatMediaInput');

    const imageOverlay = document.getElementById('imageViewerOverlay');
    const imageViewer  = document.getElementById('imageViewerImg');
    const imageClose   = document.getElementById('imageViewerClose');

    // Dubbele datum-dividers opruimen
    function dedupeDividers() {
        const dividers = chatBox.querySelectorAll('.message-divider');
        let lastText = null;
        dividers.forEach(div => {
            const text = div.textContent.trim();
            if (text === lastText) {
                div.remove();
            } else {
                lastText = text;
            }
        });
    }

    function updateLastMessageIdFromDom() {
        const marker = chatBox.querySelector('#chat-last-id');
        if (marker) {
            const id = parseInt(marker.dataset.lastId || '0', 10);
            if (!isNaN(id) && id > 0) {
                lastMessageId = id;
            }
        }
    }

    function scrollToBottom() {
        chatBox.scrollTop = chatBox.scrollHeight;
    }

    /**
     * Berichten ophalen (laatste 50) + evt bot triggeren
     */
    function loadMessages(runBot = false, scrollBottom = true) {
        const botPromise = runBot
            ? fetch('cron/chat_bot_cron.php').catch(() => {})
            : Promise.resolve();

        botPromise.finally(() => {
            fetch('include/chat_fetch.php', { cache: 'no-store' })
                .then(response => response.text())
                .then(html => {
                    const wasAtBottom = (
                        chatBox.scrollTop + chatBox.clientHeight >= chatBox.scrollHeight - 5
                    );

                    chatBox.innerHTML = html;
                    dedupeDividers();
                    updateLastMessageIdFromDom();

                    if (!firstLoadDone || (scrollBottom && wasAtBottom)) {
                        scrollToBottom();
                    }

                    firstLoadDone = true;
                })
                .catch(err => {
                    console.error('Fout bij ophalen chat:', err);
                });
        });
    }

    /**
     * Oudere berichten laden en bovenaan toevoegen
     */
    function loadOlder(beforeId) {
        if (!beforeId) return;

        const url = 'include/chat_fetch.php?before_id=' + encodeURIComponent(beforeId);
        const prevScrollHeight = chatBox.scrollHeight;

        fetch(url, { cache: 'no-store' })
            .then(response => response.text())
            .then(html => {
                if (!html.trim()) {
                    chatBox.querySelectorAll('.load-more-btn-wrapper').forEach(el => el.remove());
                    return;
                }

                // bestaande "laad meer" wrappers weg
                chatBox.querySelectorAll('.load-more-btn-wrapper').forEach(el => el.remove());

                const temp = document.createElement('div');
                temp.innerHTML = html;
                const newNodes = Array.from(temp.childNodes);

                // Achterstevoren zodat de volgorde (oudste → nieuwere) klopt
                for (let i = newNodes.length - 1; i >= 0; i--) {
                    const node = newNodes[i];
                    chatBox.insertBefore(node, chatBox.firstChild);
                }

                dedupeDividers();

                const newScrollHeight = chatBox.scrollHeight;
                chatBox.scrollTop = newScrollHeight - prevScrollHeight;

                updateLastMessageIdFromDom();
            })
            .catch(err => {
                console.error('Fout bij laden oudere berichten:', err);
            });
    }

    /**
     * Pollen of er nieuwe berichten zijn
     */
    function pollNewMessages() {
        if (!lastMessageId) {
            updateLastMessageIdFromDom();
            if (!lastMessageId) {
                return;
            }
        }

        fetch('include/chat_has_new.php?last_id=' + encodeURIComponent(lastMessageId), { cache: 'no-store' })
            .then(r => r.json())
            .then(data => {
                if (data && data.has_new) {
                    newBtn.classList.remove('hidden');
                    if (data.last_id) {
                        lastMessageId = data.last_id;
                    }
                }
            })
            .catch(err => {
                console.error('chat_has_new error', err);
            });
    }

    /**
     * Media uploaden (foto of video)
     */
    function uploadMedia(file) {
        if (!file) return;

        const formData = new FormData();
        formData.append('media', file);

        fetch('include/chat_upload.php', {
            method: 'POST',
            body: formData
        })
            .then(r => r.json())
            .then(data => {
                if (data.status === 'ok') {
                    // Na upload direct chat verversen
                    loadMessages(false, true);
                } else {
                    console.error('chat_upload error', data);
                    alert(data.message || 'Uploaden van media is mislukt.');
                }
            })
            .catch(err => {
                console.error('chat_upload fetch error', err);
                alert('Uploaden van media is mislukt.');
            });
    }

    document.addEventListener('DOMContentLoaded', function () {
        // Klik op header-knop rechts (mode wissel / verzoek aan medewerker)
        const headerBtn = document.getElementById('chatHeaderModeBtn');
        if (headerBtn) {
            headerBtn.addEventListener('click', function (e) {
                e.preventDefault();
                const mode = (headerBtn.dataset.mode || 'bot').toLowerCase();

                if (mode === 'bot') {
                    // Bevestigen of klant wil overschakelen van Evy (chatbot) naar medewerker
                    const gaNaarHuman = confirm('Wil je overschakelen van Evy (chatbot) naar hulp van een medewerker?');
                    if (!gaNaarHuman) return; // annuleren sluit popup

                    const fd = new FormData();
                    fd.append('mode', 'human');
                    fetch('include/chat_mode.php', { method: 'POST', body: fd })
                        .then(r => r.json())
                        .then(data => {
                            if (data.status === 'ok') {
                                window.location.href = '/chat';
                            } else {
                                console.error('chat_mode to human error', data);
                                alert('Overschakelen is mislukt. Probeer het opnieuw.');
                            }
                        })
                        .catch(err => {
                            console.error('chat_mode to human fetch error', err);
                            alert('Overschakelen is mislukt. Controleer je verbinding.');
                        });
                    return;
                }

                // human of human_pending → bevestigen of terug naar Evy (bot)
                const gaNaarBot = confirm('Wil je overschakelen naar hulp van Evy (chatbot)?');
                if (!gaNaarBot) return; // annuleren sluit popup

                const fd = new FormData();
                fd.append('mode', 'bot');
                fetch('include/chat_mode.php', { method: 'POST', body: fd })
                    .then(r => r.json())
                    .then(data => {
                        if (data.status === 'ok') {
                            window.location.href = '/chat';
                        } else {
                            console.error('chat_mode error', data);
                            alert('Overschakelen is mislukt. Probeer het opnieuw.');
                        }
                    })
                    .catch(err => {
                        console.error('chat_mode fetch error', err);
                        alert('Overschakelen is mislukt. Controleer je verbinding.');
                    });
            });
        }

        // Bericht versturen (tekst)
        chatForm.addEventListener('submit', function (e) {
            e.preventDefault();
            const text = input.value.trim();
            if (!text) return;

            const formData = new FormData();
            formData.append('message', text);

            fetch('include/chat_send.php', {
                method: 'POST',
                body: formData
            })
                .then(r => r.json())
                .then(data => {
                    if (data.status === 'ok') {
                        // Input legen
                        input.value = '';
                        const clearIcon = chatForm.querySelector('.clear-input');
                        if (clearIcon) {
                            const evt = new Event('input', { bubbles: true });
                            input.dispatchEvent(evt);
                        }
                        // Direct opnieuw laden + bot triggeren
                        loadMessages(true, true);
                    } else {
                        console.error('Fout bij versturen:', data);
                    }
                })
                .catch(err => {
                    console.error('Fout bij versturen:', err);
                });
        });

        // JA/NEE-knoppen bij "medewerker"-verzoek (event delegation op #chatBox)
        const chatBoxEl = document.getElementById('chatBox');
        if (chatBoxEl) {
            chatBoxEl.addEventListener('click', function (e) {
                const target = e.target;
                if (!target) return;
                const btn = target.closest('.chat-escalate-yes, .chat-escalate-no');
                if (!btn) return;
                e.preventDefault();

                const choice = btn.classList.contains('chat-escalate-yes') ? 'yes' : 'no';

                // Disable beide knoppen tijdelijk om dubbelklikken te voorkomen
                const yesBtn = chatBoxEl.querySelector('.chat-escalate-yes');
                const noBtn  = chatBoxEl.querySelector('.chat-escalate-no');
                if (yesBtn) yesBtn.disabled = true;
                if (noBtn)  noBtn.disabled  = true;

                const fd = new FormData();
                fd.append('choice', choice);

                fetch('include/chat_escalate_choice.php', { method: 'POST', body: fd })
                    .then(r => r.json())
                    .then(data => {
                        if (data && data.status === 'ok') {
                            // Chat verversen zodat de knoppen verdwijnen en vervolgbericht verschijnt
                            loadMessages(true, true);
                        } else {
                            console.error('chat_escalate_choice error', data);
                            alert((data && data.message) ? data.message : 'Actie mislukt. Probeer het opnieuw.');
                            if (yesBtn) yesBtn.disabled = false;
                            if (noBtn)  noBtn.disabled  = false;
                        }
                    })
                    .catch(err => {
                        console.error('chat_escalate_choice fetch error', err);
                        alert('Actie mislukt. Controleer je verbinding.');
                        if (yesBtn) yesBtn.disabled = false;
                        if (noBtn)  noBtn.disabled  = false;
                    });
            });
        }

        // Plus-knop -> telefoonmenu voor foto/video
        addMediaBtn.addEventListener('click', function (e) {
            e.preventDefault();
            mediaInput.click();
        });

        // File gekozen → upload
        mediaInput.addEventListener('change', function () {
            const file = this.files && this.files[0];
            if (!file) return;
            uploadMedia(file);
            this.value = ''; // reset, zodat dezelfde file opnieuw kan
        });

        // Klik op "Laad meer berichten"
        chatBox.addEventListener('click', function (e) {
            const btn = e.target.closest('.load-more-btn');
            if (!btn) return;

            const beforeId = btn.dataset.beforeId;
            loadOlder(beforeId);
        });

        // Klik op "Nieuwe berichten"
        newBtn.addEventListener('click', function () {
            newBtn.classList.add('hidden');
            loadMessages(false, true);
        });

        // JA/NEE-knoppen voor escalatie
        chatBox.addEventListener('click', function (e) {
            const yesBtn = e.target.closest('.chat-escalate-yes');
            const noBtn  = e.target.closest('.chat-escalate-no');
            if (!yesBtn && !noBtn) return;

            const choice = yesBtn ? 'yes' : 'no';
            const formData = new FormData();
            formData.append('choice', choice);

            fetch('include/chat_escalate_choice.php', {
                method: 'POST',
                body: formData
            })
                .then(r => r.json())
                .then(data => {
                    if (data.status === 'ok') {
                        loadMessages(true, true);
                    } else {
                        console.error('chat_escalate_choice error', data);
                    }
                })
                .catch(err => {
                    console.error('chat_escalate_choice fetch error', err);
                });
        });

        // Fullscreen image viewer
        chatBox.addEventListener('click', function (e) {
            const img = e.target.closest('.chat-image');
            if (!img) return;

            const src = img.dataset.fullsrc || img.src;
            imageViewer.src = src;
            imageOverlay.style.display = 'flex';
        });

        imageClose.addEventListener('click', function () {
            imageOverlay.style.display = 'none';
            imageViewer.src = '';
        });

        imageOverlay.addEventListener('click', function (e) {
            if (e.target === imageOverlay) {
                imageOverlay.style.display = 'none';
                imageViewer.src = '';
            }
        });

        // Initieel laden + interval voor nieuwe berichten
        loadMessages(true, true);
        setInterval(pollNewMessages, POLL_MS);
    });
</script>
<script>
    async function keepScreenAwakeFor(minutes) {
        await keepScreenAwake();

        setTimeout(() => {
            wakeLock?.release();
            wakeLock = null;
            console.log("Wake Lock uitgezet");
        }, minutes * 60 * 1000);
    }

    keepScreenAwakeFor(5);
</script>

</body>
</html>
