@extends('layouts.admin')
@section('title', 'Customer Support')

@section('content')
<div class="page-header support-page-header">
    <div>
        <h1>Customer Support</h1>
        <p>Reply to client messages in real time. Unread chats are marked in the inbox.</p>
    </div>
</div>

<div class="support-inbox">
    <aside class="support-inbox__sidebar">
        <div class="support-inbox__sidebar-top">
            <h2 class="support-inbox__title">Inbox</h2>
            <form method="POST" action="{{ route('admin.support.start') }}" class="support-inbox__new">
                @csrf
                <select name="user_id" class="md-select support-inbox__new-select" required aria-label="Start chat with client">
                    <option value="">New chat…</option>
                    @foreach($clients as $c)
                    <option value="{{ $c->id }}">{{ $c->name }}</option>
                    @endforeach
                </select>
                <button type="submit" class="md-btn md-btn-filled support-inbox__new-btn" title="Open chat">+</button>
            </form>
        </div>

        <form method="GET" action="{{ route('admin.support.index') }}" class="support-inbox__search">
            @if($selected)
                <input type="hidden" name="conversation" value="{{ $selected->id }}">
            @endif
            <input type="search" name="search" class="md-input" placeholder="Search clients…" value="{{ request('search') }}">
        </form>

        <div class="support-inbox__threads">
            @forelse($conversations as $conv)
            @php
                $preview = $conv->latestMessage?->body;
                $isActive = $selected?->id === $conv->id;
            @endphp
            <a href="{{ route('admin.support.index', array_filter(['conversation' => $conv->id, 'search' => request('search')])) }}"
               class="support-thread {{ $isActive ? 'is-active' : '' }} {{ $conv->unread_count > 0 ? 'is-unread' : '' }}">
                <span class="support-thread__avatar" aria-hidden="true">{{ strtoupper(substr($conv->user->name, 0, 1)) }}</span>
                <span class="support-thread__body">
                    <span class="support-thread__row">
                        <strong class="support-thread__name">{{ $conv->user->name }}</strong>
                        @if($conv->last_message_at)
                        <time class="support-thread__time">{{ $conv->last_message_at->diffForHumans(short: true) }}</time>
                        @endif
                    </span>
                    <span class="support-thread__row">
                        <span class="support-thread__preview">
                            @if($preview)
                                {{ $conv->latestMessage?->is_admin ? 'You: ' : '' }}{{ Str::limit($preview, 48) }}
                            @else
                                <em>No messages yet</em>
                            @endif
                        </span>
                        @if($conv->unread_count > 0)
                        <span class="notify-badge notify-badge--inline">{{ $conv->unread_count > 99 ? '99+' : $conv->unread_count }}</span>
                        @endif
                    </span>
                </span>
            </a>
            @empty
            <p class="support-inbox__empty">No conversations yet. Start a chat with a client above.</p>
            @endforelse
        </div>
    </aside>

    <section class="support-inbox__panel">
        @if($selected)
        <header class="support-panel__header">
            <div class="support-panel__client">
                <span class="support-panel__avatar" aria-hidden="true">{{ strtoupper(substr($selected->user->name, 0, 1)) }}</span>
                <div class="support-panel__client-meta">
                    <strong>{{ $selected->user->name }}</strong>
                    <span>{{ $selected->user->email }}</span>
                </div>
            </div>
            <a href="{{ route('admin.users.show', $selected->user) }}" class="md-btn md-btn-tonal md-btn-sm">View profile</a>
        </header>

        <div class="support-panel__messages" id="adminSupportMessages">
            @foreach($messages as $msg)
            <div class="support-msg {{ $msg->is_admin ? 'support-msg--admin' : 'support-msg--client' }}" data-message-id="{{ $msg->id }}">
                <div class="support-msg__bubble">
                    <p class="support-msg__text">{{ $msg->body }}</p>
                    <time class="support-msg__time">{{ $msg->created_at->format('M d, H:i') }}</time>
                </div>
            </div>
            @endforeach
        </div>

        <form class="support-panel__compose" id="adminSupportComposeForm">
            @csrf
            <textarea name="body" id="adminSupportInput" class="md-input support-panel__input" rows="2"
                      placeholder="Write a reply…" required maxlength="5000" autocomplete="off"></textarea>
            <button type="submit" class="md-btn md-btn-filled support-panel__send">Send</button>
        </form>
        @else
        <div class="support-panel__empty">
            <div class="support-panel__empty-icon" aria-hidden="true">💬</div>
            <h3>Select a conversation</h3>
            <p>Choose a client from the inbox or start a new chat to reply.</p>
        </div>
        @endif
    </section>
</div>
@endsection

@if($chatConfig)
@push('scripts')
<script>
(function() {
    const chatConfig = @json($chatConfig);
    const messagesEl = document.getElementById('adminSupportMessages');
    const form = document.getElementById('adminSupportComposeForm');
    const input = document.getElementById('adminSupportInput');
    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 renderMessage(msg) {
        if (messagesEl.querySelector('[data-message-id="' + msg.id + '"]')) return;
        const wrap = document.createElement('div');
        wrap.className = 'support-msg ' + (msg.is_admin ? 'support-msg--admin' : 'support-msg--client');
        wrap.dataset.messageId = String(msg.id);
        wrap.innerHTML =
            '<div class="support-msg__bubble">' +
            '<p class="support-msg__text"></p>' +
            '<time class="support-msg__time"></time>' +
            '</div>';
        wrap.querySelector('.support-msg__text').textContent = msg.body;
        wrap.querySelector('.support-msg__time').textContent = msg.time_label || '';
        messagesEl.appendChild(wrap);
        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;
        });
    }

    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;
            (data.messages || []).forEach(renderMessage);
            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();
        }
    });

    input.addEventListener('keydown', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            form.requestSubmit();
        }
    });

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