@extends('layouts.user.user')

@section('title', 'Project Chat')
@section('page', 'Project Chat')

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

        {{-- Header --}}
        <h3>Project Chat #{{ $quotationId }}</h3>

        <p class="text-muted mb-2">
            You are chatting as:
            <strong>{{ $userName }}</strong>
            <span class="badge bg-secondary text-uppercase ms-1">{{ $userRole }}</span>
        </p>

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

        {{-- Chat Form --}}
        <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>

    {{-- Laravel → JS --}}
    <script>
        window.QUOTATION_ID    = @json($quotationId);
        window.USER_NAME       = @json($userName);
        window.USER_ROLE       = @json($userRole);
        window.FIREBASE_CONFIG = @json($firebaseConfig);
    </script>

    {{-- Firebase Chat 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 = window.FIREBASE_CONFIG;
        const app = initializeApp(firebaseConfig);
        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");

        // Send message
        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 = "";
        });

        // Listen for new messages
        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 ? '#c9ffd0' : '#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