@extends('layouts.app')

@section('title', _lang('Support Chat'))

@push('styles')
<style>
    .chat-thread { height: 60vh; overflow-y: auto; background: #f7f8fa; border-radius: 12px; padding: 16px; }
    .chat-row { display: flex; margin-bottom: 12px; }
    .chat-row.mine { justify-content: flex-end; }
    .chat-bubble { max-width: 72%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.5; word-break: break-word; }
    .chat-row.theirs .chat-bubble { background: #fff; border: 1px solid #e6e8ec; border-bottom-left-radius: 4px; }
    .chat-row.mine .chat-bubble { background: #3b5bfd; color: #fff; border-bottom-right-radius: 4px; }
    .chat-meta { font-size: 11px; opacity: .7; margin-top: 3px; }
    .chat-gap { text-align: center; font-size: 11px; color: #98a2b3; margin: 10px 0; }
</style>
@endpush

@section('content')
    <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
        <div>
            <h4 class="mb-0">{{ $conversation->user->name ?? _lang('User') }}</h4>
            <p class="mb-0 text-muted">
                {{ $conversation->user->phone ?? $conversation->user->email ?? '—' }}
                @if ($conversation->organization) · {{ $conversation->organization->name }} @endif
            </p>
        </div>
        <a href="{{ route('admin.support.index') }}" class="btn btn-sm btn-light">&larr; {{ _lang('Back to inbox') }}</a>
    </div>

    <div class="row">
        <div class="col-xl-9">
            <div class="card custom-card">
                <div class="card-body">
                    <div id="chatThread" class="chat-thread" data-after="{{ $pollAfterId }}">
                        @foreach ($messages as $m)
                            @if (!empty($m['gap_human']))
                                <div class="chat-gap">{{ $m['gap_human'] }} {{ _lang('later') }}</div>
                            @endif
                            <div class="chat-row {{ $m['is_mine'] ? 'mine' : 'theirs' }}" data-id="{{ $m['id'] }}">
                                <div class="chat-bubble">
                                    <div>{!! nl2br(e($m['body'])) !!}</div>
                                    <div class="chat-meta">
                                        {{ $m['sender_label'] }} · {{ \Illuminate\Support\Carbon::parse($m['created_at'])->format('d M, H:i') }}
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <form id="replyForm" class="mt-3 d-flex gap-2">
                        @csrf
                        <textarea name="body" id="replyBody" class="form-control" rows="2" maxlength="5000"
                                  placeholder="{{ _lang('Type your reply…') }}" required></textarea>
                        <button type="submit" class="btn btn-primary px-4" id="replyBtn">{{ _lang('Send') }}</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-xl-3">
            <div class="card custom-card">
                <div class="card-header"><div class="card-title">{{ _lang('Stats') }}</div></div>
                <div class="card-body">
                    <p class="mb-2"><span class="text-muted">{{ _lang('Avg reply') }}:</span>
                        <span id="statAvg" class="fw-semibold">{{ $stats['avg_reply_human'] ?? '—' }}</span></p>
                    <p class="mb-2"><span class="text-muted">{{ _lang('Admin replies') }}:</span>
                        <span id="statReplies" class="fw-semibold">{{ $stats['admin_reply_count'] }}</span></p>
                    <p class="mb-0"><span class="text-muted">{{ _lang('Total messages') }}:</span>
                        <span id="statTotal" class="fw-semibold">{{ $stats['total_messages'] }}</span></p>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
(function () {
    const thread   = document.getElementById('chatThread');
    const form     = document.getElementById('replyForm');
    const bodyEl   = document.getElementById('replyBody');
    const btn      = document.getElementById('replyBtn');
    const csrf     = document.querySelector('meta[name="csrf-token"]').content;
    const pollUrl  = "{{ route('admin.support.poll', $conversation->id) }}";
    const sendUrl  = "{{ route('admin.support.messages.store', $conversation->id) }}";

    const scrollBottom = () => { thread.scrollTop = thread.scrollHeight; };
    scrollBottom();

    function fmtTime(iso) {
        const d = new Date(iso);
        return d.toLocaleString('en-GB', { day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit' });
    }

    function appendMessage(m) {
        if (thread.querySelector('[data-id="' + m.id + '"]')) return;
        if (m.gap_human) {
            const g = document.createElement('div');
            g.className = 'chat-gap';
            g.textContent = m.gap_human + ' {{ _lang('later') }}';
            thread.appendChild(g);
        }
        const row = document.createElement('div');
        row.className = 'chat-row ' + (m.is_mine ? 'mine' : 'theirs');
        row.dataset.id = m.id;
        const safe = (m.body || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>');
        row.innerHTML = '<div class="chat-bubble"><div>' + safe + '</div>'
            + '<div class="chat-meta">' + (m.sender_label || '') + ' · ' + fmtTime(m.created_at) + '</div></div>';
        thread.appendChild(row);
        thread.dataset.after = m.id;
    }

    function applyStats(s) {
        if (!s) return;
        document.getElementById('statAvg').textContent = s.avg_reply_human || '—';
        document.getElementById('statReplies').textContent = s.admin_reply_count;
        document.getElementById('statTotal').textContent = s.total_messages;
    }

    async function poll() {
        try {
            const res = await fetch(pollUrl + '?after_id=' + (thread.dataset.after || 0), {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
            });
            if (!res.ok) return;
            const json = await res.json();
            const data = json.data || {};
            (data.messages || []).forEach(appendMessage);
            applyStats(data.stats);
            if ((data.messages || []).length) scrollBottom();
        } catch (e) { /* ignore transient poll errors */ }
    }

    form.addEventListener('submit', async function (e) {
        e.preventDefault();
        const body = bodyEl.value.trim();
        if (!body) return;
        btn.disabled = true;
        try {
            const res = await fetch(sendUrl, {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrf,
                    'X-Requested-With': 'XMLHttpRequest',
                },
                body: JSON.stringify({ body }),
            });
            if (res.ok) {
                const json = await res.json();
                if (json.data) appendMessage(json.data);
                bodyEl.value = '';
                scrollBottom();
            }
        } catch (e) { /* ignore */ }
        btn.disabled = false;
        bodyEl.focus();
    });

    // Enter sends; Shift+Enter inserts a newline.
    bodyEl.addEventListener('keydown', function (e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            form.requestSubmit();
        }
    });

    setInterval(poll, 10000);
})();
</script>
@endpush