@extends('layouts.app')

@section('title', 'Chat Conversation - Admin')

@section('content')
<div class="container mx-auto px-6 py-8">
    <!-- Header -->
    <div class="bg-white rounded-lg shadow mb-6">
        <div class="px-6 py-4 border-b border-gray-200">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <a href="{{ route('admin.chat.index') }}" class="text-gray-500 hover:text-gray-700 mr-4">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    <div class="flex items-center">
                        <div class="w-12 h-12 rounded-full bg-primary-500 flex items-center justify-center text-white font-semibold text-lg">
                            {{ strtoupper(substr($conversation->user->name ?? 'U', 0, 1)) }}
                        </div>
                        <div class="ml-4">
                            <h1 class="text-xl font-semibold text-gray-800">{{ $conversation->user->name ?? 'Unknown User' }}</h1>
                            <p class="text-sm text-gray-600">{{ $conversation->user->email ?? 'No email' }}</p>
                        </div>
                    </div>
                </div>
                <div class="flex items-center space-x-4">
                    <!-- Status -->
                    <form method="POST" action="{{ route('admin.chat.update-status', $conversation->id) }}" class="inline">
                        @csrf
                        @method('PATCH')
                        <select name="status" onchange="this.form.submit()" 
                                class="border border-gray-300 rounded-md px-3 py-1 text-sm">
                            <option value="active" {{ $conversation->status === 'active' ? 'selected' : '' }}>Active</option>
                            <option value="resolved" {{ $conversation->status === 'resolved' ? 'selected' : '' }}>Resolved</option>
                            <option value="closed" {{ $conversation->status === 'closed' ? 'selected' : '' }}>Closed</option>
                        </select>
                    </form>
                    
                    <!-- Conversation Info -->
                    <div class="text-right text-sm text-gray-500">
                        <div>Created: {{ $conversation->created_at->format('M j, Y g:i A') }}</div>
                        <div>Updated: {{ $conversation->updated_at->diffForHumans() }}</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Conversation Details -->
        <div class="px-6 py-4 bg-gray-50">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
                <div>
                    <span class="font-medium text-gray-700">Status:</span>
                    <span class="ml-2 px-2 py-1 rounded-full text-xs
                        {{ $conversation->status === 'active' ? 'bg-green-100 text-green-800' : '' }}
                        {{ $conversation->status === 'resolved' ? 'bg-blue-100 text-blue-800' : '' }}
                        {{ $conversation->status === 'closed' ? 'bg-gray-100 text-gray-800' : '' }}">
                        {{ ucfirst($conversation->status) }}
                    </span>
                </div>
                <div>
                    <span class="font-medium text-gray-700">Category:</span>
                    <span class="ml-2">{{ $conversation->category ?? 'General' }}</span>
                </div>
                <div>
                    <span class="font-medium text-gray-700">Priority:</span>
                    <span class="ml-2 px-2 py-1 rounded-full text-xs
                        {{ $conversation->priority === 'high' ? 'bg-red-100 text-red-800' : '' }}
                        {{ $conversation->priority === 'medium' ? 'bg-yellow-100 text-yellow-800' : '' }}
                        {{ $conversation->priority === 'low' ? 'bg-green-100 text-green-800' : '' }}">
                        {{ ucfirst($conversation->priority ?? 'normal') }}
                    </span>
                </div>
            </div>
        </div>
    </div>

    <!-- Chat Messages -->
    <div class="bg-white rounded-lg shadow">
        <div class="h-96 overflow-y-auto p-6" id="messagesContainer">
            @forelse($messages as $message)
            <div class="mb-4 {{ $message->sender_type === 'admin' ? 'flex justify-end' : 'flex justify-start' }}">
                <div class="max-w-xs lg:max-w-md">
                    <div class="flex items-center mb-1 {{ $message->sender_type === 'admin' ? 'justify-end' : 'justify-start' }}">
                        <span class="text-xs text-gray-500">
                            @if($message->sender_type === 'user')
                                {{ $message->user->name ?? 'Customer' }}
                            @else
                                {{ $message->admin->name ?? 'Admin' }}
                            @endif
                        </span>
                        <span class="text-xs text-gray-400 ml-2">
                            {{ $message->created_at->format('g:i A') }}
                        </span>
                    </div>
                    <div class="rounded-lg p-3 {{ $message->sender_type === 'admin' ? 'bg-primary-600 text-white' : 'bg-gray-100 text-gray-800' }}">
                        @if($message->message_type === 'text')
                            <p class="text-sm">{{ $message->message }}</p>
                        @elseif($message->message_type === 'file')
                            <div class="flex items-center">
                                <i class="fas fa-file mr-2"></i>
                                <a href="{{ $message->file_url }}" target="_blank" class="text-sm underline">
                                    {{ $message->file_name ?? 'Download File' }}
                                </a>
                            </div>
                        @endif
                        
                        @if($message->sender_type === 'user' && !$message->is_read)
                        <div class="flex justify-end mt-1">
                            <span class="text-xs opacity-75">Unread</span>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
            @empty
            <div class="text-center text-gray-500 py-12">
                <i class="fas fa-comments text-4xl mb-4"></i>
                <p>No messages in this conversation yet.</p>
            </div>
            @endforelse
        </div>

        <!-- Message Input -->
        <div class="border-t border-gray-200 p-6">
            <form method="POST" action="{{ route('admin.chat.send-message', $conversation->id) }}" class="flex items-end space-x-4">
                @csrf
                <div class="flex-1">
                    <textarea name="message" rows="3" 
                              class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent resize-none"
                              placeholder="Type your message..." required></textarea>
                </div>
                <button type="submit" 
                        class="bg-primary-600 text-white px-6 py-2 rounded-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2">
                    <i class="fas fa-paper-plane mr-2"></i>
                    Send
                </button>
            </form>
        </div>
    </div>

    <!-- Conversation Actions -->
    <div class="mt-6 bg-white rounded-lg shadow p-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">Conversation Actions</h3>
        <div class="flex flex-wrap gap-4">
            <!-- Assign to Admin -->
            <form method="POST" action="{{ route('admin.chat.assign', $conversation->id) }}" class="inline">
                @csrf
                @method('PATCH')
                <div class="flex items-center space-x-2">
                    <select name="admin_id" class="border border-gray-300 rounded-md px-3 py-1 text-sm">
                        <option value="">Unassigned</option>
                        @foreach(\App\Models\User::where('role', 'admin')->orWhere('role', 'super_admin')->get() as $admin)
                        <option value="{{ $admin->id }}" {{ $conversation->admin_id == $admin->id ? 'selected' : '' }}>
                            {{ $admin->name }}
                        </option>
                        @endforeach
                    </select>
                    <button type="submit" class="bg-blue-600 text-white px-4 py-1 rounded-md text-sm hover:bg-blue-700">
                        Assign
                    </button>
                </div>
            </form>

            <!-- Quick Actions -->
            <form method="POST" action="{{ route('admin.chat.update-status', $conversation->id) }}" class="inline">
                @csrf
                @method('PATCH')
                <input type="hidden" name="status" value="resolved">
                <button type="submit" class="bg-green-600 text-white px-4 py-1 rounded-md text-sm hover:bg-green-700">
                    <i class="fas fa-check mr-1"></i> Mark Resolved
                </button>
            </form>

            <form method="POST" action="{{ route('admin.chat.update-status', $conversation->id) }}" class="inline">
                @csrf
                @method('PATCH')
                <input type="hidden" name="status" value="closed">
                <button type="submit" class="bg-gray-600 text-white px-4 py-1 rounded-md text-sm hover:bg-gray-700">
                    <i class="fas fa-times mr-1"></i> Close
                </button>
            </form>
        </div>
    </div>
</div>

<script>
// Auto-scroll to bottom of messages
function scrollToBottom() {
    const container = document.getElementById('messagesContainer');
    container.scrollTop = container.scrollHeight;
}

// Scroll to bottom on page load
document.addEventListener('DOMContentLoaded', scrollToBottom);

// Auto-refresh messages every 10 seconds
setInterval(function() {
    // You can implement AJAX refresh here if needed
    // For now, we'll just reload the page every 30 seconds
}, 30000);

// Handle form submission
document.querySelector('form[action*="send-message"]').addEventListener('submit', function() {
    setTimeout(scrollToBottom, 100);
});
</script>
@endsection