@extends('layouts.app')

@section('content')
<div class="max-w-4xl mx-auto px-4 py-8">
    {{-- Page Header --}}
    <div class="mb-8">
        <h1 class="text-3xl font-black text-slate-800 italic uppercase tracking-tighter">Support Center</h1>
        <p class="text-slate-500 font-medium">Contact management or report an issue directly.</p>
    </div>

    {{-- Admin/Employee Cards List --}}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
        @foreach($admins as $admin)
        {{-- ✅ AUTO ROUTE LOGIC: Admin hai to admin link, employee hai to employee link --}}
        @php 
            $route = auth()->user()->role === 'admin' ? 'admin.messages.chat' : 'employee.messages.chat';
        @endphp
        
        <a href="{{ route($route, $admin->id) }}" 
           class="group relative bg-white p-8 rounded-[2.5rem] border {{ isset($adminToChat) && $adminToChat->id == $admin->id ? 'border-emerald-500 ring-2 ring-emerald-100' : 'border-slate-100' }} shadow-sm hover:shadow-xl hover:border-emerald-200 transition-all duration-300">
            
            <div class="relative z-10">
                <div class="w-16 h-16 bg-emerald-900 rounded-2xl flex items-center justify-center text-white text-2xl font-black italic mb-6">
                    {{ strtoupper(substr($admin->name, 0, 1)) }}
                </div>
                <h3 class="text-xl font-black text-slate-800 uppercase italic tracking-tighter">{{ $admin->name }}</h3>
                <p class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4">
                    {{ $admin->role === 'admin' ? 'Official Support' : 'Team Member' }}
                </p>
                
                {{-- Unread Count Badge --}}
                @if(isset($admin->unread_count) && $admin->unread_count > 0)
                    <span class="absolute top-0 right-0 bg-red-500 text-white text-[10px] px-2 py-1 rounded-full font-bold">
                        {{ $admin->unread_count }}
                    </span>
                @endif
            </div>
        </a>
        @endforeach
    </div>

    {{-- ✅ CHAT INTERFACE --}}
    @if(isset($adminToChat))
    <div class="bg-white rounded-[2.5rem] border border-slate-100 shadow-2xl overflow-hidden animate-in fade-in slide-in-from-bottom-4 duration-500">
        {{-- Chat Header --}}
        <div class="bg-emerald-900 p-6 flex justify-between items-center">
            <h3 class="text-white font-black uppercase italic tracking-tighter">Chatting with {{ $adminToChat->name }}</h3>
            <span class="text-emerald-300 text-xs font-bold">ACTIVE CONNECTION</span>
        </div>

        {{-- Messages Window --}}
        <div class="h-96 overflow-y-auto p-8 bg-slate-50 flex flex-col gap-4" id="chatWindow">
            @forelse($messages as $msg)
                <div class="flex {{ $msg->sender_id == Auth::id() ? 'justify-end' : 'justify-start' }}">
                    <div class="max-w-[80%] p-4 rounded-2xl {{ $msg->sender_id == Auth::id() ? 'bg-emerald-600 text-white rounded-tr-none' : 'bg-white text-slate-800 shadow-sm rounded-tl-none' }}">
                        <p class="text-sm font-medium">{{ $msg->message }}</p>
                        <span class="text-[10px] opacity-60 block mt-1 uppercase font-bold">
                            {{ \Carbon\Carbon::parse($msg->created_at)->diffForHumans() }}
                        </span>
                    </div>
                </div>
            @empty
                <div class="text-center py-20 text-slate-400 italic">No messages yet. Start the conversation!</div>
            @endforelse
        </div>

        {{-- Send Message Form --}}
        {{-- ✅ DYNAMIC SEND ROUTE --}}
        @php 
            $sendRoute = auth()->user()->role === 'admin' ? route('admin.messages.send') : route('employee.messages.send');
        @endphp
        
        <form action="{{ $sendRoute }}" method="POST" class="p-6 bg-white border-t border-slate-100">
            @csrf
            <input type="hidden" name="receiver_id" value="{{ $adminToChat->id }}">
            <div class="flex gap-3">
                <input type="text" name="message" required autocomplete="off" placeholder="Type your message..." 
                       class="flex-1 bg-slate-100 border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-emerald-500 outline-none font-medium">
                <button type="submit" class="bg-emerald-900 text-white px-8 py-4 rounded-2xl font-black uppercase italic hover:bg-emerald-800 transition-all shadow-lg shadow-emerald-200">
                    Send
                </button>
            </div>
        </form>
    </div>

    {{-- Auto-scroll script --}}
    <script>
        window.onload = function() {
            var objDiv = document.getElementById("chatWindow");
            if(objDiv) {
                objDiv.scrollTop = objDiv.scrollHeight;
            }
        };
    </script>
    @endif
</div>
@endsection