@extends('layouts.app')

@section('title', 'Ticket #' . $ticket->reference)

@push('styles')
<style>
    .chat-page {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--topbar-height) - 4rem);
        max-height: 800px;
    }

    /* ===== Header ===== */
    .chat-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem 1.5rem;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        border-bottom: none;
    }

    .chat-header .back-btn {
        background: var(--bg-hover);
        border: 1px solid var(--border);
        color: var(--text-secondary);
        width: 36px;
        height: 36px;
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all var(--transition);
        text-decoration: none;
        flex-shrink: 0;
    }

    .chat-header .back-btn:hover {
        color: var(--accent);
        border-color: var(--accent);
    }

    .chat-header-info { flex: 1; min-width: 0; }

    .chat-header-info h2 {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 0.2rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .chat-header-meta {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 0.78rem;
        color: var(--text-muted);
        flex-wrap: wrap;
    }

    .chat-header-meta .ref {
        font-family: monospace;
        color: var(--text-secondary);
    }

    .status-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.15rem 0.5rem;
        border-radius: var(--radius-pill);
        font-size: 0.65rem;
        font-weight: 600;
        text-transform: capitalize;
    }

    .status-pill.open { background: var(--accent-light); color: var(--accent); }
    .status-pill.awaiting_reply { background: var(--warning-light); color: var(--warning); }
    .status-pill.in_progress { background: var(--accent-light); color: var(--accent); }
    .status-pill.resolved { background: var(--success-light); color: var(--success); }
    .status-pill.closed { background: rgba(255,255,255,0.08); color: var(--text-muted); }

    .chat-header-actions { flex-shrink: 0; }

    .btn-close-ticket {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.5rem 1rem;
        background: transparent;
        border: 1px solid var(--danger);
        border-radius: var(--radius-sm);
        color: var(--danger);
        font-family: inherit;
        font-size: 0.78rem;
        font-weight: 600;
        cursor: pointer;
        transition: all var(--transition);
    }

    .btn-close-ticket:hover {
        background: var(--danger);
        color: #fff;
    }

    /* ===== Chat Messages ===== */
    .chat-messages {
        flex: 1;
        overflow-y: auto;
        padding: 1.5rem;
        background: var(--bg-primary);
        border-left: 1px solid var(--border);
        border-right: 1px solid var(--border);
        display: flex;
        flex-direction: column;
        gap: 1rem;
        scroll-behavior: smooth;
    }

    /* Message row: wrapper for avatar + bubble */
    .msg-row {
        display: flex;
        gap: 0.6rem;
        max-width: 75%;
        animation: bubble-in 0.25s ease-out;
    }

    .msg-row.sent {
        align-self: flex-end;
        flex-direction: row-reverse;
    }

    .msg-row.received { align-self: flex-start; }

    @keyframes bubble-in {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Avatar */
    .msg-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: 700;
        flex-shrink: 0;
        margin-top: 0.2rem;
    }

    .msg-row.sent .msg-avatar {
        background: var(--accent);
        color: #fff;
    }

    .msg-row.received .msg-avatar {
        background: var(--bg-card-solid);
        border: 1px solid var(--border);
        color: var(--accent);
    }

    /* Bubble */
    .msg-bubble {
        padding: 0.75rem 1rem;
        border-radius: var(--radius-md);
        font-size: 0.875rem;
        line-height: 1.6;
        word-wrap: break-word;
        word-break: break-word;
    }

    .msg-row.sent .msg-bubble {
        background: var(--accent);
        color: #fff;
        border-bottom-right-radius: 4px;
    }

    .msg-row.received .msg-bubble {
        background: var(--bg-card);
        border: 1px solid var(--border);
        color: var(--text-primary);
        border-bottom-left-radius: 4px;
    }

    .msg-content {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .msg-meta {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .msg-row.sent .msg-meta { flex-direction: row-reverse; }

    .msg-sender {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-secondary);
    }

    .msg-time-meta {
        font-size: 0.7rem;
        color: var(--text-muted);
    }

    .msg-body { white-space: pre-wrap; }

    .msg-attachment {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        margin-top: 0.5rem;
        padding: 0.35rem 0.65rem;
        border-radius: var(--radius-sm);
        font-size: 0.8rem;
        text-decoration: none;
        transition: opacity var(--transition);
    }

    .msg-attachment:hover { opacity: 0.8; }

    .msg-row.sent .msg-attachment {
        background: rgba(255,255,255,0.15);
        color: #fff;
    }

    .msg-row.received .msg-attachment {
        background: var(--bg-hover);
        color: var(--accent);
    }

    .msg-attachment img {
        max-width: 200px;
        max-height: 150px;
        border-radius: var(--radius-sm);
        margin-top: 0.35rem;
        display: block;
    }

    /* Date separator */
    .date-separator {
        align-self: center;
        padding: 0.3rem 0.85rem;
        background: var(--bg-card);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-pill);
        font-size: 0.7rem;
        color: var(--text-muted);
        font-weight: 500;
    }

    /* Typing indicator */
    .typing-indicator {
        display: none;
        align-self: flex-start;
        align-items: center;
        gap: 0.5rem;
        padding: 0.6rem 1rem;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        border-bottom-left-radius: 4px;
        font-size: 0.8rem;
        color: var(--text-muted);
    }

    .typing-indicator.visible { display: flex; }

    .typing-dots {
        display: flex;
        gap: 3px;
        align-items: center;
    }

    .typing-dots span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--text-muted);
        animation: typing-bounce 1.4s infinite ease-in-out;
    }

    .typing-dots span:nth-child(1) { animation-delay: 0s; }
    .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
    .typing-dots span:nth-child(3) { animation-delay: 0.4s; }

    @keyframes typing-bounce {
        0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
        30% { transform: translateY(-4px); opacity: 1; }
    }

    /* Empty state */
    .empty-chat {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: var(--text-muted);
        gap: 0.75rem;
        text-align: center;
    }

    .empty-chat i { font-size: 2.5rem; opacity: 0.3; }
    .empty-chat p { font-size: 0.85rem; }

    /* ===== Reply Input ===== */
    .chat-input-area {
        display: flex;
        gap: 0.5rem;
        padding: 1rem 1.5rem;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        border-top: none;
        align-items: flex-end;
    }

    .chat-input-wrap {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
    }

    .file-preview {
        display: none;
        align-items: center;
        gap: 0.4rem;
        padding: 0.3rem 0.6rem;
        background: var(--accent-light);
        border-radius: var(--radius-sm);
        font-size: 0.75rem;
        color: var(--accent);
    }

    .file-preview.visible { display: inline-flex; }

    .file-preview .remove-file {
        background: none;
        border: none;
        color: var(--danger);
        cursor: pointer;
        font-size: 0.7rem;
        padding: 0;
        margin-left: 0.25rem;
    }

    .chat-input-wrap textarea {
        width: 100%;
        padding: 0.75rem 1rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        color: var(--text-primary);
        font-family: inherit;
        font-size: 0.9rem;
        outline: none;
        transition: border-color var(--transition);
        resize: none;
        min-height: 44px;
        max-height: 120px;
        line-height: 1.5;
    }

    .chat-input-wrap textarea::placeholder { color: var(--text-muted); }
    .chat-input-wrap textarea:focus { border-color: var(--accent); }

    .btn-attach {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        color: var(--text-muted);
        cursor: pointer;
        transition: all var(--transition);
        flex-shrink: 0;
    }

    .btn-attach:hover {
        border-color: var(--accent);
        color: var(--accent);
    }

    .btn-send {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        background: var(--accent);
        border: none;
        border-radius: var(--radius-sm);
        color: #fff;
        cursor: pointer;
        transition: all var(--transition);
        flex-shrink: 0;
    }

    .btn-send:hover { background: var(--accent-hover); }
    .btn-send:disabled { opacity: 0.4; cursor: not-allowed; }

    /* Closed bar */
    .closed-bar {
        padding: 1rem 1.5rem;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        border-top: none;
        text-align: center;
        font-size: 0.85rem;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

    .closed-bar i { color: var(--text-muted); }

    @media (max-width: 640px) {
        .chat-page { height: calc(100vh - var(--topbar-height) - 2rem); max-height: none; }
        .chat-header { padding: 0.75rem 1rem; gap: 0.75rem; }
        .chat-header-info h2 { font-size: 0.9rem; }
        .chat-messages { padding: 1rem; }
        .msg-row { max-width: 88%; }
        .chat-input-area { padding: 0.75rem 1rem; }
        .btn-close-ticket span { display: none; }
    }
</style>
@endpush

@section('content')
    <div class="chat-page">
        {{-- Header --}}
        <div class="chat-header">
            <a href="{{ route('escrow.support') }}" class="back-btn" title="Back to tickets">
                <i class="fas fa-arrow-left"></i>
            </a>

            <div class="chat-header-info">
                <h2>{{ $ticket->subject }}</h2>
                <div class="chat-header-meta">
                    <span class="ref">#{{ $ticket->reference }}</span>
                    <span class="status-pill {{ $ticket->status }}">
                        @switch($ticket->status)
                            @case('open') <i class="fas fa-circle" style="font-size: 0.3rem;"></i> Open @break
                            @case('awaiting_reply') <i class="fas fa-clock" style="font-size: 0.5rem;"></i> Awaiting Reply @break
                            @case('in_progress') <i class="fas fa-spinner" style="font-size: 0.5rem;"></i> In Progress @break
                            @case('resolved') <i class="fas fa-check-circle" style="font-size: 0.5rem;"></i> Resolved @break
                            @case('closed') <i class="fas fa-lock" style="font-size: 0.45rem;"></i> Closed @break
                        @endswitch
                    </span>
                    <span style="text-transform: capitalize;">{{ $ticket->category }}</span>
                </div>
            </div>

            @if(!in_array($ticket->status, ['resolved', 'closed']))
                <div class="chat-header-actions">
                    <form method="POST" action="{{ route('escrow.support.close', $ticket->id) }}" id="closeForm">
                        @csrf
                        <button type="button" class="btn-close-ticket" onclick="confirmClose()">
                            <i class="fas fa-times-circle"></i> <span>Close Ticket</span>
                        </button>
                    </form>
                </div>
            @endif
        </div>

        {{-- Messages --}}
        <div class="chat-messages" id="chatMessages">
            @forelse($ticket->messages as $message)
                @php
                    $isSent = !$message->is_admin && $message->user_id === auth()->id();
                    $senderName = $message->is_admin ? ($message->user->name ?? 'Support') : ($message->user->name ?? 'You');
                    $initial = strtoupper(substr($senderName, 0, 1));
                    $isImage = $message->attachment && preg_match('/\.(jpg|jpeg|png|gif|webp)$/i', $message->attachment);
                @endphp

                <div class="msg-row {{ $isSent ? 'sent' : 'received' }}" data-msg-id="{{ $message->id }}">
                    <div class="msg-avatar">{{ $initial }}</div>
                    <div class="msg-content">
                        <div class="msg-meta">
                            <span class="msg-sender">
                                {{ $isSent ? 'You' : $senderName }}
                                @if($message->is_admin)
                                    <span style="font-size: 0.6rem; color: var(--warning); margin-left: 0.25rem;">Support</span>
                                @endif
                            </span>
                            <span class="msg-time-meta">{{ $message->created_at->format('M d, g:i A') }}</span>
                        </div>
                        <div class="msg-bubble">
                            <div class="msg-body">{{ $message->body }}</div>

                            @if($message->attachment)
                                @if($isImage)
                                    <a href="{{ asset('storage/' . $message->attachment) }}" target="_blank" class="msg-attachment" style="flex-direction: column;">
                                        <img src="{{ asset('storage/' . $message->attachment) }}" alt="Attachment">
                                    </a>
                                @else
                                    <a href="{{ asset('storage/' . $message->attachment) }}" target="_blank" class="msg-attachment">
                                        <i class="fas fa-paperclip"></i> {{ basename($message->attachment) }}
                                    </a>
                                @endif
                            @endif
                        </div>
                    </div>
                </div>
            @empty
                <div class="empty-chat" id="emptyChat">
                    <i class="fas fa-comments"></i>
                    <p>No messages yet. Start the conversation below.</p>
                </div>
            @endforelse

            {{-- Typing indicator --}}
            <div class="typing-indicator" id="typingIndicator">
                <div class="typing-dots">
                    <span></span><span></span><span></span>
                </div>
                Support is typing...
            </div>
        </div>

        {{-- Reply form or closed bar --}}
        @if(in_array($ticket->status, ['resolved', 'closed']))
            <div class="closed-bar">
                <i class="fas fa-lock"></i>
                This ticket is {{ $ticket->status }}. You can no longer reply.
            </div>
        @else
            <form method="POST" action="{{ route('escrow.support.reply', $ticket->id) }}" enctype="multipart/form-data" id="replyForm" class="chat-input-area">
                @csrf
                <div class="chat-input-wrap">
                    <div class="file-preview" id="filePreview">
                        <i class="fas fa-paperclip"></i>
                        <span id="fileName"></span>
                        <button type="button" class="remove-file" onclick="clearAttachment()"><i class="fas fa-times"></i></button>
                    </div>
                    <textarea name="message" id="replyInput" placeholder="Type your message..." rows="1" required></textarea>
                </div>
                <button type="button" class="btn-attach" onclick="document.getElementById('replyFile').click()" title="Attach file">
                    <i class="fas fa-paperclip"></i>
                </button>
                <input type="file" id="replyFile" name="attachment" style="display:none;" accept="image/*,.pdf,.doc,.docx,.zip">
                <button type="submit" class="btn-send" id="sendBtn" title="Send">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </form>
        @endif
    </div>
@endsection

@push('scripts')
<script>
(function() {
    const CSRF = document.querySelector('meta[name="csrf-token"]').content;
    const CURRENT_USER = @json(auth()->id());
    const POLL_URL = @json(route('escrow.support.poll', $ticket->id));
    const TYPING_URL = @json(route('escrow.support.typing', $ticket->id));
    const TICKET_STATUS = @json($ticket->status);

    const chatContainer = document.getElementById('chatMessages');
    const replyInput = document.getElementById('replyInput');
    const replyForm = document.getElementById('replyForm');
    const fileInput = document.getElementById('replyFile');
    const filePreview = document.getElementById('filePreview');
    const fileNameSpan = document.getElementById('fileName');
    const typingIndicator = document.getElementById('typingIndicator');
    const emptyChat = document.getElementById('emptyChat');
    const sendBtn = document.getElementById('sendBtn');

    let lastMessageId = 0;
    let typingTimeout = null;
    let isTyping = false;
    let pollTimer = null;

    // Closed tickets don't need polling/input
    if (['resolved', 'closed'].includes(TICKET_STATUS)) {
        scrollToBottom();
        return;
    }

    // Init last message ID
    function initLastId() {
        const msgs = chatContainer.querySelectorAll('[data-msg-id]');
        if (msgs.length > 0) {
            lastMessageId = parseInt(msgs[msgs.length - 1].dataset.msgId) || 0;
        }
    }

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

    function escHtml(str) {
        const d = document.createElement('div');
        d.textContent = str;
        return d.innerHTML;
    }

    function isImageFile(path) {
        return /\.(jpg|jpeg|png|gif|webp)$/i.test(path);
    }

    function createMessageRow(msg) {
        const isSent = !msg.is_admin && msg.user_id === CURRENT_USER;
        const row = document.createElement('div');
        row.className = 'msg-row ' + (isSent ? 'sent' : 'received');
        row.dataset.msgId = msg.id;

        const initial = msg.user_initial || '?';
        const senderName = isSent ? 'You' : (msg.user_name || 'Support');

        let attachHtml = '';
        if (msg.attachment) {
            if (isImageFile(msg.attachment)) {
                attachHtml = '<a href="' + msg.attachment + '" target="_blank" class="msg-attachment" style="flex-direction:column;">' +
                    '<img src="' + msg.attachment + '" alt="Attachment"></a>';
            } else {
                const fname = msg.attachment.split('/').pop();
                attachHtml = '<a href="' + msg.attachment + '" target="_blank" class="msg-attachment">' +
                    '<i class="fas fa-paperclip"></i> ' + escHtml(fname) + '</a>';
            }
        }

        let adminBadge = msg.is_admin ? '<span style="font-size:0.6rem;color:var(--warning);margin-left:0.25rem;">Support</span>' : '';

        row.innerHTML =
            '<div class="msg-avatar">' + escHtml(initial) + '</div>' +
            '<div class="msg-content">' +
                '<div class="msg-meta">' +
                    '<span class="msg-sender">' + escHtml(senderName) + adminBadge + '</span>' +
                    '<span class="msg-time-meta">' + escHtml(msg.time) + '</span>' +
                '</div>' +
                '<div class="msg-bubble">' +
                    '<div class="msg-body">' + escHtml(msg.body) + '</div>' +
                    attachHtml +
                '</div>' +
            '</div>';

        return row;
    }

    // Polling
    async function poll() {
        try {
            const res = await fetch(POLL_URL + '?after=' + lastMessageId, {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
            });

            if (!res.ok) { schedulePoll(); return; }
            const data = await res.json();

            if (data.messages && data.messages.length > 0) {
                if (emptyChat) emptyChat.remove();

                data.messages.forEach(function(msg) {
                    if (chatContainer.querySelector('[data-msg-id="' + msg.id + '"]')) return;
                    const row = createMessageRow(msg);
                    chatContainer.insertBefore(row, typingIndicator);
                    lastMessageId = Math.max(lastMessageId, msg.id);
                });

                scrollToBottom();
            }

            // Typing indicator
            if (data.typing) {
                typingIndicator.classList.add('visible');
                scrollToBottom();
            } else {
                typingIndicator.classList.remove('visible');
            }

            // Status change — reload if ticket was closed/resolved
            if (data.status && ['resolved', 'closed'].includes(data.status)) {
                location.reload();
            }

        } catch (e) {
            // Silent fail, retry on next poll
        }

        schedulePoll();
    }

    function schedulePoll() {
        if (pollTimer) clearTimeout(pollTimer);
        pollTimer = setTimeout(poll, 3000);
    }

    // Typing indicator
    async function sendTypingStatus() {
        try {
            await fetch(TYPING_URL, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': CSRF,
                    'X-Requested-With': 'XMLHttpRequest',
                },
                body: JSON.stringify({}),
            });
        } catch (e) {}
    }

    function onKeypress() {
        if (!isTyping) {
            isTyping = true;
            sendTypingStatus();
        }
        if (typingTimeout) clearTimeout(typingTimeout);
        typingTimeout = setTimeout(function() {
            isTyping = false;
        }, 4000);
    }

    // Auto-resize textarea
    if (replyInput) {
        replyInput.addEventListener('input', function() {
            this.style.height = 'auto';
            this.style.height = Math.min(this.scrollHeight, 120) + 'px';
            if (this.value.trim().length > 0) onKeypress();
        });

        replyInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                if (this.value.trim()) replyForm.submit();
            }
        });
    }

    // File input
    if (fileInput) {
        fileInput.addEventListener('change', function() {
            if (this.files.length) {
                if (this.files[0].size > 5 * 1024 * 1024) {
                    TensealModal.notice({
                        type: 'warning',
                        title: 'File too large',
                        message: 'Attachments can be up to 5MB. Pick a smaller file and try again.',
                    });
                    this.value = '';
                    return;
                }
                fileNameSpan.textContent = this.files[0].name;
                filePreview.classList.add('visible');
            } else {
                filePreview.classList.remove('visible');
            }
        });
    }

    window.clearAttachment = function() {
        if (fileInput) fileInput.value = '';
        if (filePreview) filePreview.classList.remove('visible');
        if (fileNameSpan) fileNameSpan.textContent = '';
    };

    // Close ticket confirmation
    window.confirmClose = function() {
        TensealModal.confirm({
            title: 'Close Ticket?',
            message: 'Are you sure you want to close this ticket? You won\'t be able to reply after closing.',
            type: 'warning',
            confirmText: 'Yes, Close Ticket',
            onConfirm: function() {
                document.getElementById('closeForm').submit();
            }
        });
    };

    // Init
    initLastId();
    scrollToBottom();
    schedulePoll();
})();
</script>
@endpush