@extends('layouts.client')
@section('title', 'Support')

@section('content')
<div class="support-page">
    <div class="support-page-header">
        <h1 class="client-page-title">Support</h1>
        <p class="client-page-sub">Chat with our team here in the app. Messages are answered by support staff.</p>
    </div>

    <div class="client-card support-chat-card">
        <div class="support-chat-card__header">
            <span>Live Chat</span>
            <span class="support-chat-status">Support Team</span>
        </div>
        <div class="support-chat-messages" id="supportMessages" aria-live="polite">
            @forelse($messages as $msg)
            <div class="support-chat-bubble {{ $msg->is_admin ? 'support-chat-bubble--admin' : 'support-chat-bubble--client' }}"
                 data-message-id="{{ $msg->id }}">
                <p class="support-chat-bubble__body">{{ $msg->body }}</p>
                <span class="support-chat-bubble__meta">
                    {{ $msg->is_admin ? 'Support' : 'You' }} · {{ $msg->created_at->format('M d, H:i') }}
                </span>
            </div>
            @empty
            <p class="support-chat-empty" id="supportEmptyState">No messages yet. Say hello and our team will respond.</p>
            @endforelse
        </div>
        <form class="support-chat-compose" id="supportComposeForm">
            @csrf
            <input type="text" name="body" id="supportMessageInput" class="client-input"
                   placeholder="Type your message..." maxlength="5000" required autocomplete="off">
            <button type="submit" class="client-btn client-btn-primary client-btn-sm">Send</button>
        </form>
    </div>

    @if($whatsapp || $telegram)
    <div class="client-card support-alt-channels">
        <p class="support-alt-channels__label">Other ways to reach us</p>
        <p class="support-alt-channels__hint">These open WhatsApp or Telegram in a separate app — not the live chat above.</p>
        <div class="support-alt-channels__list">
            @if($whatsapp)
            <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $whatsapp) }}"
               target="_blank" rel="noopener noreferrer"
               class="support-alt-channel support-alt-channel--whatsapp">
                <span class="support-alt-channel__icon" aria-hidden="true">💬</span>
                <span class="support-alt-channel__text">
                    <strong>WhatsApp</strong>
                    <small>Opens in WhatsApp</small>
                </span>
                <span class="support-alt-channel__arrow" aria-hidden="true">↗</span>
            </a>
            @endif
            @if($telegram)
            <a href="https://t.me/{{ ltrim($telegram, '@') }}"
               target="_blank" rel="noopener noreferrer"
               class="support-alt-channel support-alt-channel--telegram">
                <span class="support-alt-channel__icon support-alt-channel__icon--brand">
                    @include('partials.icon-telegram', ['size' => 28, 'class' => 'support-alt-channel__icon-img'])
                </span>
                <span class="support-alt-channel__text">
                    <strong>Telegram</strong>
                    <small>Opens in Telegram</small>
                </span>
                <span class="support-alt-channel__arrow" aria-hidden="true">↗</span>
            </a>
            @endif
        </div>
    </div>
    @endif
</div>
@endsection

@push('scripts')
<script>
(function() {
    const chatConfig = @json($chatConfig);
    const messagesEl = document.getElementById('supportMessages');
    const form = document.getElementById('supportComposeForm');
    const input = document.getElementById('supportMessageInput');
    if (!messagesEl || !form || !input) return;

    function csrfToken() {
        const meta = document.querySelector('meta[name="csrf-token"]');
        return (meta && meta.getAttribute('content')) || chatConfig.csrf || '';
    }

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

    function hideEmptyState() {
        const empty = document.getElementById('supportEmptyState');
        if (empty) empty.remove();
    }

    function renderMessage(msg) {
        if (messagesEl.querySelector('[data-message-id="' + msg.id + '"]')) return;
        hideEmptyState();
        const bubble = document.createElement('div');
        bubble.className = 'support-chat-bubble ' + (msg.is_admin ? 'support-chat-bubble--admin' : 'support-chat-bubble--client');
        bubble.dataset.messageId = String(msg.id);
        bubble.innerHTML =
            '<p class="support-chat-bubble__body"></p>' +
            '<span class="support-chat-bubble__meta"></span>';
        bubble.querySelector('.support-chat-bubble__body').textContent = msg.body;
        bubble.querySelector('.support-chat-bubble__meta').textContent =
            (msg.is_admin ? 'Support' : 'You') + ' · ' + (msg.time_label || '');
        messagesEl.appendChild(bubble);
        scrollToBottom();
    }

    function updateUnreadBadges(count) {
        document.querySelectorAll('[data-support-unread-badge]').forEach(function(el) {
            const n = Number(count) || 0;
            el.textContent = n > 99 ? '99+' : String(n);
            el.hidden = n <= 0;
        });
    }

    function renderAll(messages) {
        const ids = new Set();
        (messages || []).forEach(function(msg) {
            ids.add(msg.id);
            renderMessage(msg);
        });
    }

    async function pollMessages() {
        try {
            const res = await fetch(chatConfig.messagesUrl, {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                credentials: 'same-origin',
            });
            const data = await res.json();
            if (!res.ok) return;
            renderAll(data.messages);
            updateUnreadBadges(data.unread_count);
        } catch (e) { /* ignore */ }
    }

    form.addEventListener('submit', async function(e) {
        e.preventDefault();
        const body = input.value.trim();
        if (!body) return;
        input.disabled = true;
        try {
            const res = await fetch(chatConfig.sendUrl, {
                method: 'POST',
                credentials: 'same-origin',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': csrfToken(),
                    'X-Requested-With': 'XMLHttpRequest',
                },
                body: JSON.stringify({ body: body }),
            });
            const data = await res.json();
            if (!res.ok) throw new Error(data.message || 'Could not send message');
            input.value = '';
            if (data.message) renderMessage(data.message);
            updateUnreadBadges(data.unread_count);
        } catch (err) {
            alert(err.message || 'Could not send message');
        } finally {
            input.disabled = false;
            input.focus();
        }
    });

    scrollToBottom();
    updateUnreadBadges(0);
    setInterval(pollMessages, 5000);
    if (window.SupportNotifications) window.SupportNotifications.refresh();
})();
</script>
@endpush