@extends('layouts.customer')

@section('customer-content')
<h2 class="text-2xl font-bold mb-8">Welcome back, {{ auth()->user()->name }}!</h2>

<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
    <div class="royal-card p-6">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-gray-500 text-sm">Total Orders</p>
                <p class="text-3xl font-bold">{{ $totalOrders }}</p>
            </div>
            <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
                <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg>
            </div>
        </div>
    </div>

    <div class="royal-card p-6">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-gray-500 text-sm">Pending Orders</p>
                <p class="text-3xl font-bold">{{ $pendingOrders }}</p>
            </div>
            <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center">
                <svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            </div>
        </div>
    </div>

    <div class="royal-card p-6">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-gray-500 text-sm">Wishlist</p>
                <p class="text-3xl font-bold">{{ $wishlistCount }}</p>
            </div>
            <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
                <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
            </div>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
    {{-- Recent Orders --}}
    <div class="royal-card p-6 lg:col-span-2">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-xl font-semibold">Recent Orders</h3>
            <a href="{{ route('customer.orders') }}" class="text-purple-600 hover:underline text-sm">View All →</a>
        </div>

        @if($recentOrders->count() > 0)
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="border-b">
                        <tr>
                            <th class="text-left py-3">Order #</th>
                            <th class="text-left py-3">Date</th>
                            <th class="text-left py-3">Items</th>
                            <th class="text-left py-3">Total</th>
                            <th class="text-left py-3">Status</th>
                            <th class="py-3"></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($recentOrders as $order)
                            <tr class="border-b">
                                <td class="py-3 font-semibold">{{ $order->order_number }}</td>
                                <td class="py-3">{{ $order->created_at->format('M d, Y') }}</td>
                                <td class="py-3">{{ $order->items->count() }} item(s)</td>
                                <td class="py-3">{{ price($order->total) }}</td>
                                <td class="py-3">
                                    <span class="px-3 py-1 rounded-full text-xs font-semibold
                                        @if($order->status === 'pending') bg-yellow-100 text-yellow-800
                                        @elseif($order->status === 'processing') bg-blue-100 text-blue-800
                                        @elseif($order->status === 'shipped') bg-purple-100 text-purple-800
                                        @elseif($order->status === 'delivered') bg-green-100 text-green-800
                                        @else bg-red-100 text-red-800 @endif">
                                        {{ ucfirst($order->status) }}
                                    </span>
                                </td>
                                <td class="py-3">
                                    <a href="{{ route('customer.orders.show', $order->order_number) }}" class="text-purple-600 hover:underline text-sm">View →</a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <p class="text-gray-500 text-center py-8">No orders yet. <a href="{{ route('products.index') }}" class="text-purple-600 hover:underline">Start shopping →</a></p>
        @endif
    </div>

    {{-- Recent Chats --}}
    <div class="royal-card p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-xl font-semibold">Recent Chats</h3>
            <button onclick="document.getElementById('new-chat-modal').classList.remove('hidden')" class="text-purple-600 hover:underline text-sm">New Chat →</button>
        </div>

        @if($recentChats->count() > 0)
            <div class="space-y-3">
                @foreach($recentChats as $chat)
                    @php
                        $participant = $chat->vendor ?? $chat->promoter ?? $chat->admin;
                        $participantType = $chat->vendor_id ? 'vendor' : ($chat->promoter_id ? 'promoter' : 'admin');
                        $initial = $participant ? substr($participant->name, 0, 1) : '?';
                        $lastMessage = $chat->messages->last();
                        $unreadCount = $chat->messages()->where('is_read', false)->where('sender_id', '!=', auth()->id())->count();
                        $avatarClass = match($participantType) {
                            'vendor' => 'bg-emerald-100 text-emerald-700',
                            'promoter' => 'bg-purple-100 text-purple-700',
                            default => 'bg-red-100 text-red-700',
                        };
                        $badgeClass = match($participantType) {
                            'vendor' => 'bg-emerald-50 text-emerald-700',
                            'promoter' => 'bg-purple-50 text-purple-700',
                            default => 'bg-red-50 text-red-700',
                        };
                    @endphp
                    <a href="{{ route('customer.chats.show', $chat) }}" class="flex items-center gap-3 p-3 rounded-xl hover:bg-gray-50 transition-colors border border-gray-100">
                        <div class="relative flex-shrink-0">
                            <div class="w-10 h-10 rounded-full {{ $avatarClass }} font-semibold flex items-center justify-center text-sm">{{ $initial }}</div>
                            @if($unreadCount > 0)
                                <span class="absolute -top-0.5 -right-0.5 w-3 h-3 bg-red-500 rounded-full border-2 border-white"></span>
                            @endif
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2">
                                <p class="font-medium text-gray-900 text-sm truncate">{{ $participant->name ?? 'Unknown' }}</p>
                                <span class="text-[9px] uppercase tracking-wider font-bold px-1.5 py-0.5 rounded-full {{ $badgeClass }}">{{ $participantType }}</span>
                            </div>
                            <p class="text-xs text-gray-500 truncate mt-0.5">{{ $lastMessage ? Str::limit($lastMessage->message ?: 'Sent an image', 30) : ($chat->product ? 'About: ' . $chat->product->name : 'No messages yet') }}</p>
                        </div>
                        @if($unreadCount > 0)
                            <span class="text-xs font-bold text-white bg-red-500 rounded-full min-w-[20px] h-5 flex items-center justify-center px-1">{{ $unreadCount }}</span>
                        @endif
                    </a>
                @endforeach
            </div>
        @else
            <div class="flex flex-col items-center justify-center py-8 text-center">
                <div class="w-14 h-14 rounded-full bg-gray-100 flex items-center justify-center mb-3">
                    <svg class="w-7 h-7 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
                </div>
                <p class="text-gray-600 font-medium text-sm">No conversations</p>
                <p class="text-gray-400 text-xs mt-1">Start a new chat to begin messaging</p>
            </div>
        @endif
    </div>
</div>

<div id="notification-container" class="fixed top-4 right-4 z-50 space-y-2"></div>

{{-- New Chat Modal --}}
<div id="new-chat-modal" class="hidden fixed inset-0 bg-black/40 backdrop-blur-sm flex items-center justify-center z-50">
    <div class="bg-white rounded-2xl w-full max-w-md p-6 mx-4 shadow-2xl">
        <div class="flex items-center justify-between mb-6">
            <h3 class="text-lg font-bold text-gray-900">New Conversation</h3>
            <button onclick="document.getElementById('new-chat-modal').classList.add('hidden')" class="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>
        <form action="{{ route('customer.chats.start') }}" method="POST">@csrf
            <div class="space-y-4">
                <div>
                    <label class="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-1.5">Chat With</label>
                    <select id="participant-type" name="participant_type" required onchange="updateParticipantOptions()" class="w-full px-3.5 py-2.5 rounded-lg text-sm border border-gray-200 focus:border-purple-500 focus:ring-2 focus:ring-purple-100 outline-none">
                        <option value="">Select role...</option>
                        <option value="vendor">Vendor</option>
                        <option value="promoter">Promoter</option>
                        <option value="admin">Admin</option>
                    </select>
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-1.5">User</label>
                    <select id="participant-id" name="participant_id" required disabled class="w-full px-3.5 py-2.5 rounded-lg text-sm border border-gray-200 focus:border-purple-500 focus:ring-2 focus:ring-purple-100 outline-none disabled:opacity-50">
                        <option value="">Select a role first...</option>
                    </select>
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-1.5">Product <span class="text-gray-400 normal-case font-normal">(optional)</span></label>
                    <select name="product_id" class="w-full px-3.5 py-2.5 rounded-lg text-sm border border-gray-200 focus:border-purple-500 focus:ring-2 focus:ring-purple-100 outline-none">
                        <option value="">No specific product</option>
                        @foreach($products as $product)
                            <option value="{{ $product->id }}">{{ $product->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="flex gap-3 pt-2">
                    <button type="button" onclick="document.getElementById('new-chat-modal').classList.add('hidden')" class="flex-1 px-4 py-2.5 border border-gray-200 text-gray-700 rounded-lg hover:bg-gray-50 text-sm font-medium transition-colors">Cancel</button>
                    <button type="submit" class="flex-1 px-4 py-2.5 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-sm font-semibold transition-colors shadow-sm">Start Chat</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
const participants = @json($participants);
function updateParticipantOptions() {
    const type = document.getElementById('participant-type').value;
    const select = document.getElementById('participant-id');
    select.innerHTML = '';
    select.disabled = true;
    const mapping = { vendor: 'vendors', promoter: 'promoters', admin: 'admins' };
    if (mapping[type]) {
        select.disabled = false;
        select.innerHTML = '<option value="">Select a user...</option>';
        participants[mapping[type]].forEach(user => {
            const opt = document.createElement('option');
            opt.value = user.id;
            opt.textContent = `${user.name} (${user.email})`;
            select.appendChild(opt);
        });
    } else {
        select.innerHTML = '<option value="">Select a role first...</option>';
    }
}

@auth
Echo.private(`customer.{{ auth()->id() }}`)
    .listen('OrderStatusUpdated', (e) => {
        const notification = document.createElement('div');
        notification.className = 'bg-purple-600 text-white px-6 py-4 rounded-lg shadow-lg max-w-sm';
        notification.innerHTML = `
            <p class="font-semibold">${e.message}</p>
            <p class="text-sm text-purple-200">Order #${e.order_number}</p>
        `;
        document.getElementById('notification-container').appendChild(notification);
        setTimeout(() => notification.remove(), 8000);
    });
@endauth
</script>
@endsection