@extends('layouts.app')
@section('title', 'Chat - ' . $pengajuan->nomor_pengajuan)

@section('styles')
<style>
    .chat-container {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 240px);
        min-height: 400px;
    }

    .chat-header-info {
        background: linear-gradient(135deg, var(--primary), var(--primary-light));
        color: #fff;
        border-radius: 16px 16px 0 0;
        padding: 20px 24px;
    }

    .chat-header-info .chat-with {
        font-size: 18px;
        font-weight: 700;
    }

    .chat-header-info .chat-pengajuan {
        font-size: 13px;
        opacity: 0.85;
    }

    .chat-messages {
        flex: 1;
        overflow-y: auto;
        padding: 24px;
        background: #f7fafc;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .chat-messages::-webkit-scrollbar {
        width: 6px;
    }
    .chat-messages::-webkit-scrollbar-track {
        background: transparent;
    }
    .chat-messages::-webkit-scrollbar-thumb {
        background: #cbd5e0;
        border-radius: 3px;
    }

    .chat-date-divider {
        text-align: center;
        margin: 12px 0;
    }

    .chat-date-divider span {
        background: #e2e8f0;
        color: #718096;
        font-size: 11px;
        font-weight: 600;
        padding: 4px 16px;
        border-radius: 12px;
    }

    .chat-bubble {
        max-width: 70%;
        padding: 12px 16px;
        border-radius: 16px;
        position: relative;
        animation: bubbleIn 0.3s ease;
    }

    @keyframes bubbleIn {
        from { opacity: 0; transform: translateY(10px) scale(0.95); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .chat-bubble.mine {
        align-self: flex-end;
        background: linear-gradient(135deg, var(--primary), var(--primary-light));
        color: #fff;
        border-bottom-right-radius: 4px;
    }

    .chat-bubble.theirs {
        align-self: flex-start;
        background: #fff;
        color: #2d3748;
        border-bottom-left-radius: 4px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }

    .chat-bubble .bubble-sender {
        font-size: 11px;
        font-weight: 700;
        margin-bottom: 4px;
        opacity: 0.85;
    }

    .chat-bubble.theirs .bubble-sender {
        color: var(--primary);
    }

    .chat-bubble .bubble-text {
        font-size: 14px;
        line-height: 1.5;
        word-wrap: break-word;
        white-space: pre-wrap;
    }

    .chat-bubble .bubble-time {
        font-size: 10px;
        opacity: 0.6;
        text-align: right;
        margin-top: 4px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
    }

    .read-receipt {
        font-size: 12px;
        letter-spacing: -2px;
        display: inline-flex;
    }
    .read-receipt.sent { opacity: 0.5; }
    .read-receipt.read { opacity: 1; color: #90cdf4; }

    .chat-input-area {
        padding: 16px 24px;
        background: #fff;
        border-top: 1px solid #e2e8f0;
        border-radius: 0 0 16px 16px;
    }

    .chat-input-wrapper {
        display: flex;
        gap: 12px;
        align-items: flex-end;
    }

    .chat-input-wrapper textarea {
        flex: 1;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        padding: 10px 16px;
        font-size: 14px;
        resize: none;
        max-height: 100px;
        transition: border-color 0.2s;
        font-family: 'Inter', sans-serif;
    }

    .chat-input-wrapper textarea:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
    }

    .chat-send-btn {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        border: none;
        background: linear-gradient(135deg, var(--primary), var(--primary-light));
        color: #fff;
        font-size: 18px;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .chat-send-btn:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(30, 58, 95, 0.3);
    }

    .chat-send-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
    }

    .chat-empty {
        text-align: center;
        padding: 60px 20px;
        color: #a0aec0;
    }

    .chat-empty i {
        font-size: 48px;
        margin-bottom: 16px;
        display: block;
    }

    .chat-empty .empty-title {
        font-size: 16px;
        font-weight: 700;
        color: #718096;
        margin-bottom: 4px;
    }

    .chat-typing {
        display: none;
        align-self: flex-start;
        padding: 8px 16px;
        background: #e2e8f0;
        border-radius: 12px;
        font-size: 12px;
        color: #718096;
    }

    .online-dot {
        width: 8px;
        height: 8px;
        background: #48bb78;
        border-radius: 50%;
        display: inline-block;
        margin-right: 6px;
    }
</style>
@endsection

@section('content')
<div class="page-header mb-4">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h2><i class="bi bi-chat-dots me-2"></i>Chat</h2>
            <p>Komunikasi terkait pengajuan {{ $pengajuan->nomor_pengajuan }}</p>
        </div>
        <a href="{{ url()->previous() }}" class="btn btn-outline-secondary" style="border-radius:10px;">
            <i class="bi bi-arrow-left me-1"></i> Kembali
        </a>
    </div>
</div>

<div class="content-card">
    <div class="chat-container">
        {{-- Chat Header --}}
        <div class="chat-header-info">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="chat-with">
                        <span class="online-dot"></span>
                        {{ $otherUser ? $otherUser->name : 'Belum ditugaskan' }}
                    </div>
                    <div class="chat-pengajuan">
                        {{ $otherUser ? $otherUser->role_label : '' }} &bull;
                        {{ $pengajuan->nama_bangunan }} &bull;
                        <span class="badge" style="background:rgba(255,255,255,0.2); font-size:11px;">{{ $pengajuan->status_label }}</span>
                    </div>
                </div>
                <div style="text-align:right;">
                    <div style="font-size:12px; opacity:0.7;">No. Pengajuan</div>
                    <div style="font-size:14px; font-weight:600;">{{ $pengajuan->nomor_pengajuan }}</div>
                </div>
            </div>
        </div>

        {{-- Chat Messages --}}
        <div class="chat-messages" id="chatMessages">
            <div class="chat-empty" id="chatEmpty">
                <i class="bi bi-chat-square-text"></i>
                <div class="empty-title">Belum ada pesan</div>
                <div>Mulai percakapan dengan mengirim pesan pertama</div>
            </div>
        </div>

        {{-- Chat Input --}}
        <div class="chat-input-area">
            <div class="chat-input-wrapper">
                <textarea id="chatInput"
                    rows="1"
                    placeholder="Ketik pesan..."
                    maxlength="2000"
                    {{ !$otherUser ? 'disabled' : '' }}></textarea>
                <button class="chat-send-btn" id="chatSendBtn" {{ !$otherUser ? 'disabled' : '' }}>
                    <i class="bi bi-send-fill"></i>
                </button>
            </div>
            @if(!$otherUser)
            <div class="text-muted mt-2" style="font-size:12px;">
                <i class="bi bi-info-circle me-1"></i>Chat belum tersedia karena pengajuan belum ditugaskan ke pemeriksa.
            </div>
            @endif
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
(function() {
    const pengajuanId = {{ $pengajuan->id }};
    const messagesUrl = "{{ route('chat.messages', $pengajuan->id) }}";
    const storeUrl = "{{ route('chat.store', $pengajuan->id) }}";
    const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

    const chatMessages = document.getElementById('chatMessages');
    const chatInput = document.getElementById('chatInput');
    const chatSendBtn = document.getElementById('chatSendBtn');
    const chatEmpty = document.getElementById('chatEmpty');

    let lastMessageId = 0;
    let isPolling = true;
    let lastDate = '';

    // Auto-resize textarea
    chatInput.addEventListener('input', function() {
        this.style.height = 'auto';
        this.style.height = Math.min(this.scrollHeight, 100) + 'px';
    });

    // Send on Enter (Shift+Enter for new line)
    chatInput.addEventListener('keydown', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            sendMessage();
        }
    });

    chatSendBtn.addEventListener('click', sendMessage);

    function sendMessage() {
        const msg = chatInput.value.trim();
        if (!msg) return;

        chatSendBtn.disabled = true;

        fetch(storeUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json',
            },
            body: JSON.stringify({ message: msg }),
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                chatInput.value = '';
                chatInput.style.height = 'auto';
                appendMessage(data.message);
                scrollToBottom();
            }
        })
        .catch(err => console.error('Send error:', err))
        .finally(() => {
            chatSendBtn.disabled = false;
            chatInput.focus();
        });
    }

    function appendMessage(msg) {
        chatEmpty.style.display = 'none';

        // Date divider
        if (msg.date !== lastDate) {
            const divider = document.createElement('div');
            divider.className = 'chat-date-divider';
            divider.innerHTML = '<span>' + msg.date + '</span>';
            chatMessages.appendChild(divider);
            lastDate = msg.date;
        }

        const bubble = document.createElement('div');
        bubble.className = 'chat-bubble ' + (msg.is_mine ? 'mine' : 'theirs');
        bubble.dataset.id = msg.id;

        let html = '';
        if (!msg.is_mine) {
            html += '<div class="bubble-sender">' + escapeHtml(msg.user_name) + ' <small>(' + escapeHtml(msg.user_role) + ')</small></div>';
        }
        html += '<div class="bubble-text">' + escapeHtml(msg.message) + '</div>';
        html += '<div class="bubble-time">';
        html += '<span>' + msg.time + '</span>';
        if (msg.is_mine) {
            const readClass = msg.is_read ? 'read' : 'sent';
            const ticks = msg.is_read ? '✓✓' : '✓';
            html += '<span class="read-receipt ' + readClass + '" id="receipt-' + msg.id + '">' + ticks + '</span>';
        }
        html += '</div>';

        bubble.innerHTML = html;
        chatMessages.appendChild(bubble);

        if (msg.id > lastMessageId) {
            lastMessageId = msg.id;
        }
    }

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

    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    function loadMessages() {
        const url = messagesUrl + (lastMessageId > 0 ? '?after=' + lastMessageId + '&check_read=1' : '?check_read=1');

        fetch(url, {
            headers: { 'Accept': 'application/json' }
        })
        .then(r => r.json())
        .then(data => {
            if (data.messages && data.messages.length > 0) {
                data.messages.forEach(msg => {
                    // Avoid duplicates
                    if (!document.querySelector('.chat-bubble[data-id="' + msg.id + '"]')) {
                        appendMessage(msg);
                    }
                });
                scrollToBottom();
            }

            // Update read receipts on own messages
            if (data.read_status) {
                Object.keys(data.read_status).forEach(id => {
                    const receipt = document.getElementById('receipt-' + id);
                    if (receipt && data.read_status[id]) {
                        receipt.className = 'read-receipt read';
                        receipt.textContent = '✓✓';
                    }
                });
            }
        })
        .catch(err => console.error('Poll error:', err));
    }

    // Initial load
    loadMessages();

    // Poll every 5 seconds
    setInterval(() => {
        if (isPolling) {
            loadMessages();
        }
    }, 5000);

    // Pause polling when tab is hidden
    document.addEventListener('visibilitychange', () => {
        isPolling = !document.hidden;
        if (!document.hidden) {
            loadMessages();
        }
    });
})();
</script>
@endsection