@extends('layouts.app')
@section('title', 'Chat — ' . $chatThread->order->order_id)
@section('header-left')
<div class="flex items-center gap-3">
    <a href="{{ route('user_dashboard') }}" class="p-2 hover:bg-white/5 rounded-lg text-slate-400 hover:text-white transition-colors">
        <span class="material-symbols-outlined text-sm">arrow_back</span>
    </a>
    <div class="w-9 h-9 rounded-xl bg-primary/10 text-primary flex items-center justify-center">
        <span class="material-symbols-outlined">account_balance_wallet</span>
    </div>
    <div>
        <div class="flex items-center gap-2">
            <h2 class="text-sm font-bold font-mono uppercase">{{ $chatThread->order->order_id }}</h2>
            <span class="material-symbols-outlined text-xs text-green-500">lock</span>
        </div>
        <p class="text-[10px] text-slate-400 uppercase tracking-widest">Secured by Vicdan Shield</p>
    </div>
</div>
@endsection
@section('content')
<div class="-mt-4 -mx-8 h-[calc(100vh-120px)] flex flex-col">
    {{-- Progress --}}
    @php
        $progress = match($chatThread->order->status) {
            'pending' => 15, 'under_review' => 35, 'processing' => 65, 'completed' => 100, default => 0
        };
    @endphp
    <div class="px-8 py-3 bg-white/3 border-b border-white/5 space-y-2">
        <div class="flex justify-between text-xs font-medium">
            <span class="text-slate-400 uppercase tracking-wider">Transaction Progress</span>
            <span class="text-primary">{{ $progress }}% Complete</span>
        </div>
        <div class="h-1.5 w-full bg-white/10 rounded-full overflow-hidden">
            <div class="h-full bg-primary rounded-full transition-all duration-500" style="width:{{ $progress }}%"></div>
        </div>
        <div class="flex justify-between text-[10px] text-slate-500 uppercase tracking-tighter">
            @foreach(['Submitted','Verification','Processing','Completed'] as $step)
            <span class="{{ $progress >= ($loop->index * 33) ? 'text-primary font-bold' : '' }}">{{ $step }}</span>
            @endforeach
        </div>
    </div>

    {{-- Messages --}}
    <div class="flex-1 overflow-y-auto px-8 py-6 space-y-5" id="chatMessages">
        @foreach($messages as $msg)
        @php $isMe = $msg->sender_id === auth()->id(); @endphp
        @if($msg->is_system_message)
        <div class="flex items-center justify-center gap-3">
            <div class="h-px bg-white/5 flex-1"></div>
            <span class="text-[10px] text-slate-600 font-bold uppercase tracking-[0.2em]">System • {{ $msg->created_at->format('h:i A') }}</span>
            <div class="h-px bg-white/5 flex-1"></div>
        </div>
        <div class="flex items-end gap-3 max-w-[80%]">
            <div class="w-8 h-8 rounded-full bg-gradient-to-tr from-slate-700 to-slate-500 flex items-center justify-center border border-white/10 shrink-0">
                <span class="material-symbols-outlined text-xs text-white">support_agent</span>
            </div>
            <div class="bg-white/5 border border-white/5 px-4 py-2.5 rounded-2xl rounded-bl-none text-slate-200 text-sm leading-relaxed">{{ $msg->message }}</div>
        </div>
        @elseif($isMe)
        <div class="flex flex-col items-end space-y-1 max-w-[80%] self-end ml-auto">
            <span class="text-[10px] text-primary/70 font-semibold mr-2">You</span>
            @if($msg->message)
            <div class="bg-primary text-background-dark px-4 py-2.5 rounded-2xl rounded-br-none text-sm font-medium leading-relaxed">{{ $msg->message }}</div>
            @endif
            @if($msg->file_attachment)
            <a href="{{ $msg->file_url }}" target="_blank" class="group bg-background-dark border border-primary/20 rounded-2xl p-3 flex items-center gap-3 hover:border-primary/40 transition-colors">
                <span class="material-symbols-outlined text-primary">{{ $msg->file_type === 'image' ? 'image' : 'description' }}</span>
                <div><p class="text-xs font-bold text-slate-200">{{ $msg->file_name }}</p><p class="text-[10px] text-slate-500">{{ strtoupper($msg->file_type ?? 'file') }}</p></div>
                <span class="material-symbols-outlined text-slate-500 text-sm ml-2">download</span>
            </a>
            @endif
            <div class="flex items-center gap-1 mr-1">
                <span class="text-[10px] text-slate-600">{{ $msg->created_at->format('h:i A') }}</span>
                <span class="material-symbols-outlined text-[11px] text-primary">{{ $msg->is_read ? 'done_all' : 'check' }}</span>
            </div>
        </div>
        @else
        <div class="flex items-end gap-3 max-w-[80%]">
            <div class="w-9 h-9 rounded-full bg-gradient-to-tr from-slate-700 to-slate-500 flex items-center justify-center border border-white/10 shrink-0">
                <span class="material-symbols-outlined text-sm text-white">support_agent</span>
            </div>
            <div class="flex flex-col gap-1">
                <span class="text-[10px] text-slate-500 font-semibold ml-1">{{ $msg->sender->name }}</span>
                @if($msg->message)
                <div class="bg-white/5 border border-white/5 px-4 py-2.5 rounded-2xl rounded-bl-none text-slate-200 text-sm leading-relaxed">{{ $msg->message }}</div>
                @endif
                @if($msg->file_attachment)
                <a href="{{ $msg->file_url }}" target="_blank" class="bg-white/5 border border-white/5 rounded-2xl p-3 flex items-center gap-3 hover:border-primary/20 transition-colors">
                    <span class="material-symbols-outlined text-primary">description</span>
                    <div><p class="text-xs font-bold text-slate-200">{{ $msg->file_name }}</p><p class="text-[10px] text-slate-500">{{ strtoupper($msg->file_type ?? 'file') }}</p></div>
                </a>
                @endif
                <span class="text-[10px] text-slate-600 ml-1">{{ $msg->created_at->format('h:i A') }}</span>
            </div>
        </div>
        @endif
        @endforeach
    </div>

    {{-- Input Dock --}}
    @if($chatThread->status === 'open')
    <div class="border-t border-white/5 px-8 py-4">
        <form method="POST" action="{{ route('chat.send', $chatThread) }}" enctype="multipart/form-data" id="chatForm">
            @csrf
            <div id="filePreview" class="hidden flex gap-2 mb-2"></div>
            <div class="bg-white/5 border border-white/10 rounded-2xl p-2 flex items-center gap-2">
                <label class="flex items-center justify-center w-10 h-10 rounded-xl text-slate-400 hover:text-primary hover:bg-white/5 transition-all cursor-pointer">
                    <span class="material-symbols-outlined">attach_file</span>
                    <input type="file" name="attachment" class="hidden" accept=".jpg,.jpeg,.png,.pdf" onchange="previewFile(this)"/>
                </label>
                <input type="text" name="message" id="messageInput" placeholder="Send a secure message..." autocomplete="off"
                       class="flex-1 bg-transparent border-none focus:ring-0 text-sm text-slate-200 placeholder:text-slate-600 py-2 px-1"/>
                <button type="submit" class="w-10 h-10 rounded-xl bg-primary text-white flex items-center justify-center hover:bg-primary/90 active:scale-95 transition-all">
                    <span class="material-symbols-outlined font-bold text-sm">arrow_upward</span>
                </button>
            </div>
            <p class="text-center text-[10px] text-slate-600 mt-2 flex items-center justify-center gap-1">
                <span class="material-symbols-outlined text-xs">verified_user</span> End-to-end encrypted
            </p>
        </form>
    </div>
    @else
    <div class="border-t border-white/5 px-8 py-4 text-center">
        <p class="text-sm text-slate-500">This chat thread is <span class="font-bold text-slate-400">{{ $chatThread->status }}</span>.</p>
    </div>
    @endif
</div>
@endsection
@push('scripts')
<script>
// Scroll to bottom
const msgs = document.getElementById('chatMessages');
if(msgs) msgs.scrollTop = msgs.scrollHeight;

function previewFile(input) {
    const file = input.files[0];
    if(!file) return;
    const div = document.getElementById('filePreview');
    div.classList.remove('hidden');
    div.innerHTML = `<div class="flex items-center gap-2 bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-xs text-slate-300">
        <span class="material-symbols-outlined text-primary text-sm">attach_file</span>${file.name}
        <button type="button" onclick="this.closest('div').remove(); document.querySelector('[name=attachment]').value=''" class="text-slate-500 hover:text-red-400 ml-1">✕</button>
    </div>`;
}

// Optimistic UI updates
const chatForm = document.getElementById('chatForm');
if(chatForm) {
    chatForm.addEventListener('submit', async function(e) {
        e.preventDefault();
        const formData = new FormData(this);
        const msgInput = document.getElementById('messageInput');
        const fileInput = document.querySelector('[name=attachment]');
        const submitBtn = this.querySelector('button[type=submit]');
        const messageText = msgInput.value.trim();
        const hasFile = fileInput.files.length > 0;
        
        if (!messageText && !hasFile) return;

        // Create optimistic message ID
        const tempId = 'opt-msg-' + Date.now();
        
        // Build optimistic bubble
        let bubbleHtml = `<div class="flex flex-col items-end space-y-1 max-w-[80%] self-end ml-auto" id="${tempId}">
            <span class="text-[10px] text-primary/70 font-semibold mr-2">You</span>`;
            
        if(messageText) {
            bubbleHtml += `<div class="bg-primary text-background-dark px-4 py-2.5 rounded-2xl rounded-br-none text-sm font-medium leading-relaxed opacity-70 border border-transparent shadow-sm">${messageText}</div>`;
        }
        if(hasFile) {
            bubbleHtml += `<div class="bg-background-dark border border-primary/20 rounded-2xl p-3 flex items-center gap-3 opacity-70">
                <span class="material-symbols-outlined text-primary text-sm animate-pulse">cloud_upload</span>
                <div><p class="text-xs font-bold text-slate-200">Uploading file...</p></div>
            </div>`;
        }
        
        bubbleHtml += `<div class="flex items-center gap-1 mr-1">
                <span class="text-[10px] text-slate-600 status-text">Sending...</span>
            </div>
        </div>`;

        // Append optimistic message
        msgs.insertAdjacentHTML('beforeend', bubbleHtml);
        msgs.scrollTop = msgs.scrollHeight;

        // Clear input early for UX
        const formAction = this.action;
        msgInput.value = '';
        if(fileInput) fileInput.value = '';
        const previewDiv = document.getElementById('filePreview');
        if(previewDiv) {
            previewDiv.classList.add('hidden');
            previewDiv.innerHTML = '';
        }
        submitBtn.disabled = true;

        try {
            const response = await fetch(formAction, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                },
                body: formData
            });

            if(!response.ok) throw new Error('Failed to send');

            const result = await response.json();
            
            // Re-render message bubble softly without full flash
            const optNode = document.getElementById(tempId);
            if(optNode) {
                // Remove opacity class from bubble
                const bubbleBox = optNode.querySelector('.bg-primary, .bg-background-dark');
                if(bubbleBox) bubbleBox.classList.remove('opacity-70');
                
                // Update time and status
                const timeStr = new Date(result.message.created_at || Date.now()).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
                const statusBox = optNode.querySelector('.flex.items-center.gap-1.mr-1');
                if(statusBox) {
                    statusBox.innerHTML = `
                        <span class="text-[10px] text-slate-600">${timeStr}</span>
                        <span class="material-symbols-outlined text-[11px] text-primary">check</span>`;
                }
            }
        } catch(err) {
            console.error(err);
            const optNode = document.getElementById(tempId);
            if(optNode) {
                // Visually fail
                const bubbleBox = optNode.querySelector('.bg-primary');
                if(bubbleBox) {
                    bubbleBox.classList.remove('bg-primary', 'text-background-dark');
                    bubbleBox.classList.add('bg-red-500/10', 'text-red-400', 'border-red-500/30');
                }
                const statusBox = optNode.querySelector('.flex.items-center.gap-1.mr-1');
                if(statusBox) {
                    statusBox.innerHTML = `<span class="text-[10px] text-red-500 flex items-center gap-1"><span class="material-symbols-outlined text-[10px]">error</span> Failed to send. Click to remove.</span>`;
                    statusBox.classList.add('cursor-pointer');
                    statusBox.onclick = () => optNode.remove();
                }
                
                // Disappear after a few seconds
                setTimeout(() => { if(optNode.parentNode) optNode.remove(); }, 4000);
            }
        } finally {
            submitBtn.disabled = false;
            msgInput.focus();
        }
    });
}
</script>
@endpush