@extends('layouts.omd.omd') {{-- or whatever your admin layout is --}}

@section('title', 'Project Chat - OMD')

@section('content')
    <div class="container-fluid py-3">

        <h4>OMD Chat for Project #{{ $quotationId }}</h4>
        <p class="text-muted mb-2">
            Logged in as <strong>{{ $userName }}</strong>
            <span class="badge bg-danger text-uppercase ms-1">{{ $userRole }}</span>
        </p>

        <div class="card">
            <div class="card-body" id="chat-box" style="height: 450px; overflow-y:auto;">
                <ul id="messages" class="list-unstyled mb-0"></ul>
            </div>
        </div>

        <form id="chat-form" class="mt-3 d-flex gap-2">
            <input
                type="text"
                id="message"
                class="form-control"
                placeholder="Type a message..."
                autocomplete="off"
            >
            <button class="btn btn-primary" type="submit">Send</button>
        </form>

    </div>

    <script>
        window.QUOTATION_ID      = @json($quotationId);
        window.USER_NAME       = @json($userName);
        window.USER_ROLE       = @json($userRole);
        window.FIREBASE_CONFIG = @json($firebaseConfig);
    </script>

    <script type="module">
        import { initializeApp } from "https://www.gstatic.com/firebasejs/11.0.1/firebase-app.js";
        import {
            getDatabase,
            ref,
            push,
            onChildAdded,
            serverTimestamp
        } from "https://www.gstatic.com/firebasejs/11.0.1/firebase-database.js";

        const firebaseConfig = {
        apiKey: "test",
        databaseURL: "https://mekingtest-default-rtdb.asia-southeast1.firebasedatabase.app/",
    };
        const app = initializeApp(firebaseConfig);
        // console.log('🔥 RAW FIREBASE_CONFIG from window:', window.FIREBASE_CONFIG);
        // console.log('🔥 databaseURL inside config:', window.FIREBASE_CONFIG?.databaseURL);
        // console.log('🔥 type of databaseURL:', typeof window.FIREBASE_CONFIG?.databaseURL);  

        const db  = getDatabase(app);

        const QUOTATION_ID = window.QUOTATION_ID;
        const USER_NAME  = window.USER_NAME;
        const USER_ROLE  = window.USER_ROLE;

        const form         = document.getElementById("chat-form");
        const messageInput = document.getElementById("message");
        const messagesList = document.getElementById("messages");
        const chatBox      = document.getElementById("chat-box");

        const messagesRef = ref(db, "chats/" + QUOTATION_ID + "/messages");

        form.addEventListener("submit", (e) => {
            e.preventDefault();

            const text = messageInput.value.trim();
            if (!text) return;

            push(messagesRef, {
                user_name: USER_NAME,
                role: USER_ROLE,
                text: text,
                time: serverTimestamp()
            });

            messageInput.value = "";
        });

        onChildAdded(messagesRef, (snapshot) => {
            const data = snapshot.val();
            if (!data) return;

            const li = document.createElement("li");
            const isMe = data.user_name === USER_NAME;

            li.style.display = 'flex';
            li.style.marginBottom = '6px';
            li.style.justifyContent = isMe ? 'flex-end' : 'flex-start';

            const bubble = document.createElement('div');
            bubble.style.padding = '8px 12px';
            bubble.style.borderRadius = '12px';
            bubble.style.maxWidth = '70%';
            bubble.style.fontSize = '14px';
            bubble.style.whiteSpace = 'pre-wrap';
            bubble.style.background = isMe ? '#cfe2ff' : '#f0f0f0';

            const header = document.createElement('div');
            header.style.fontSize = '11px';
            header.style.fontWeight = '600';
            header.style.marginBottom = '2px';
            header.textContent = `${data.user_name} (${String(data.role || '').toUpperCase()})`;

            const textDiv = document.createElement('div');
            textDiv.textContent = data.text ?? '';

            bubble.appendChild(header);
            bubble.appendChild(textDiv);
            li.appendChild(bubble);
            messagesList.appendChild(li);

            chatBox.scrollTop = chatBox.scrollHeight;
        });
    </script>
@endsection