<?= $this->extend('layouts/main') ?>
<?= $this->section('content') ?>

<div class="mb-3">
    <h1 class="h3 mb-1">Staff Booking Assistant</h1>
    <p class="text-muted mb-0">Ask about real room availability, rates, or bookings — e.g. "any twin rooms free next weekend under 400 cedis" or "who's checking in today". Read-only: it can't create, change, or cancel a booking.</p>
</div>

<div class="card shadow-sm">
    <div class="card-body">
        <div id="chatMessages" class="mb-3" style="height: 480px; overflow-y: auto;">
            <div class="text-muted small text-center py-5" id="chatEmptyState">
                <i class="bi bi-stars fs-3 d-block mb-2"></i>
                Ask a question to get started.
            </div>
        </div>
        <div class="input-group">
            <input type="text" class="form-control" id="chatInput" placeholder="Ask a question..." autocomplete="off">
            <button type="button" class="btn btn-primary" id="chatSendBtn"><i class="bi bi-send me-1"></i>Ask</button>
        </div>
    </div>
</div>

<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script>
let conversation = [];

function appendBubble(role, text) {
    const emptyState = document.getElementById('chatEmptyState');
    if (emptyState) { emptyState.remove(); }

    const wrap = document.createElement('div');
    wrap.className = 'd-flex mb-3 ' + (role === 'user' ? 'justify-content-end' : 'justify-content-start');

    const bubble = document.createElement('div');
    bubble.className = role === 'user'
        ? 'bg-primary text-white rounded-3 px-3 py-2'
        : 'bg-light border rounded-3 px-3 py-2';
    bubble.style.maxWidth = '75%';
    bubble.style.whiteSpace = 'pre-wrap';
    bubble.textContent = text; // Claude's own text (and the staff member's own input) — never innerHTML.

    wrap.appendChild(bubble);
    const container = document.getElementById('chatMessages');
    container.appendChild(wrap);
    container.scrollTop = container.scrollHeight;

    return bubble;
}

function sendChat() {
    const input = document.getElementById('chatInput');
    const query = input.value.trim();

    if (! query) { return; }

    const btn = document.getElementById('chatSendBtn');
    conversation.push({ role: 'user', content: query });
    appendBubble('user', query);
    input.value = '';
    btn.disabled = true;

    const thinking = appendBubble('assistant', 'Thinking...');

    window.maxyieldsPost('<?= site_url('ai/assistant/ask') ?>', { messages: JSON.stringify(conversation) })
        .then(function (data) {
            if (! data.success) {
                thinking.textContent = data.error;
                thinking.classList.add('text-danger');
                conversation.pop(); // don't keep a failed turn in context
                return;
            }

            thinking.textContent = data.text;
            conversation.push({ role: 'assistant', content: data.text });
        })
        .catch(function () {
            thinking.textContent = 'Could not reach the server — please try again.';
            thinking.classList.add('text-danger');
            conversation.pop();
        })
        .finally(function () {
            btn.disabled = false;
            input.focus();
        });
}

document.getElementById('chatSendBtn').addEventListener('click', sendChat);
document.getElementById('chatInput').addEventListener('keydown', function (e) {
    if (e.key === 'Enter') { e.preventDefault(); sendChat(); }
});
</script>
<?= $this->endSection() ?>
