@extends('layouts.app')

@section('title', 'Voice Hub — Real-Time Calling & Contacts — ' . config('app.name', 'VoxPulse'))

@section('content')
<div class="space-y-8">
    <!-- Header Banner -->
    <div class="rounded-3xl bg-gradient-to-r from-indigo-950/80 via-slate-900 to-cyan-950/70 border border-indigo-500/20 p-8 shadow-2xl relative overflow-hidden">
        <div class="max-w-2xl relative z-10">
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-cyan-500/10 border border-cyan-500/30 text-xs font-semibold text-cyan-300 mb-3">
                <span class="h-2 w-2 rounded-full bg-cyan-400 animate-ping"></span>
                Native WebRTC Peer-to-Peer Voice Mesh (Opus 48kHz HD)
            </span>
            <h1 class="font-heading text-3xl font-extrabold tracking-tight text-white mb-2">
                Real-Time Voice Calls Hub
            </h1>
            <p class="text-slate-300 text-sm leading-relaxed">
                Start an instant audio channel, share screens, or direct dial registered team members with sub-120ms latency.
            </p>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Left: Instant Room Launcher -->
        <div class="space-y-6">
            <!-- Create/Join Room Card -->
            <div class="rounded-2xl bg-slate-900/80 border border-slate-800 p-6 shadow-xl backdrop-blur-sm">
                <div class="flex items-center gap-3 mb-4">
                    <span class="text-2xl">⚡</span>
                    <h2 class="font-heading text-lg font-bold text-white">Instant Voice Room</h2>
                </div>
                <p class="text-xs text-slate-400 mb-5 leading-relaxed">
                    Enter a unique channel name or generate a random one to connect with anyone instantly.
                </p>

                <form id="joinRoomForm" onsubmit="event.preventDefault(); joinCustomRoom();" class="space-y-4">
                    <div>
                        <label for="channelInput" class="block text-xs font-bold text-slate-300 mb-1.5 uppercase tracking-wider">Channel Name</label>
                        <input
                            type="text"
                            id="channelInput"
                            placeholder="e.g. daily-sync-room"
                            required
                            class="w-full px-4 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition font-mono"
                        />
                    </div>

                    <div class="flex gap-2">
                        <button
                            type="submit"
                            class="flex-1 py-2.5 px-4 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-bold shadow-lg shadow-indigo-600/30 transition active:scale-95 flex items-center justify-center gap-2"
                        >
                            <span>🎙️</span> Join Room
                        </button>
                        <button
                            type="button"
                            onclick="generateRandomRoom()"
                            class="py-2.5 px-4 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs font-bold transition"
                            title="Random Code"
                        >
                            🎲 Random
                        </button>
                    </div>
                </form>
            </div>

            <!-- Live Status Info -->
            <div class="rounded-2xl bg-slate-900/60 border border-slate-800 p-5 text-xs text-slate-400 space-y-2.5">
                <div class="flex items-center justify-between">
                    <span class="text-slate-300 font-medium">Codec:</span>
                    <span class="text-emerald-400 font-mono">Opus HD Audio (48kHz)</span>
                </div>
                <div class="flex items-center justify-between">
                    <span class="text-slate-300 font-medium">Latency Target:</span>
                    <span class="text-cyan-400 font-mono">&lt; 120ms Global</span>
                </div>
                <div class="flex items-center justify-between">
                    <span class="text-slate-300 font-medium">Encryption:</span>
                    <span class="text-indigo-400 font-mono">End-to-End DTLS/SRTP</span>
                </div>
            </div>
        </div>

        <!-- Middle: Contacts / Dial User Directly -->
        <div class="lg:col-span-2 space-y-6">
            <div class="rounded-2xl bg-slate-900/80 border border-slate-800 p-6 shadow-xl">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center gap-3">
                        <span class="text-2xl">👥</span>
                        <h2 class="font-heading text-lg font-bold text-white">Registered Users</h2>
                    </div>
                    <span class="text-xs text-slate-400 bg-slate-800 px-2.5 py-1 rounded-full">{{ count($users) }} users available</span>
                </div>

                <div class="divide-y divide-slate-800/80 max-h-96 overflow-y-auto pr-1">
                    @forelse($users as $peer)
                        <div class="py-3.5 flex items-center justify-between gap-4">
                            <div class="flex items-center gap-3 min-w-0">
                                <div class="h-10 w-10 rounded-full bg-gradient-to-tr from-indigo-600 to-purple-600 flex items-center justify-center text-sm font-bold text-white shadow-inner flex-shrink-0">
                                    {{ strtoupper(substr($peer->name, 0, 2)) }}
                                </div>
                                <div class="truncate">
                                    <h3 class="text-sm font-semibold text-slate-200 truncate">{{ $peer->name }}</h3>
                                    <p class="text-xs text-slate-400 font-mono truncate">{{ $peer->email }}</p>
                                </div>
                            </div>

                            <button
                                type="button"
                                onclick="startDirectCall('{{ $peer->id }}', '{{ addslashes($peer->name) }}')"
                                class="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-lg bg-emerald-500/10 border border-emerald-500/30 text-xs font-semibold text-emerald-300 hover:bg-emerald-500 hover:text-white transition active:scale-95 flex-shrink-0"
                            >
                                <span>📞</span> Direct Dial
                            </button>
                        </div>
                    @empty
                        <div class="py-8 text-center text-slate-500 text-sm">
                            No other users registered yet. You can invite friends to register!
                        </div>
                    @endforelse
                </div>
            </div>

            <!-- Recent Call History -->
            <div class="rounded-2xl bg-slate-900/80 border border-slate-800 p-6 shadow-xl">
                <div class="flex items-center gap-3 mb-4">
                    <span class="text-2xl">🕒</span>
                    <h2 class="font-heading text-lg font-bold text-white">Recent Call Logs</h2>
                </div>

                <div class="divide-y divide-slate-800/80">
                    @forelse($recentCalls as $call)
                        <div class="py-3 flex items-center justify-between text-xs">
                            <div class="flex items-center gap-3">
                                <span class="p-2 rounded-lg bg-slate-800 text-slate-300">
                                    {{ $call->caller_id === auth()->id() ? '↗️ Outgoing' : '↙️ Incoming' }}
                                </span>
                                <div>
                                    <p class="font-medium text-slate-200">
                                        {{ $call->caller_id === auth()->id() ? ($call->receiver->name ?? 'Channel: ' . $call->channel_name) : ($call->caller->name ?? 'Unknown') }}
                                    </p>
                                    <p class="text-slate-400 text-[11px]">
                                        {{ $call->created_at->diffForHumans() }} • Duration: {{ $call->duration_seconds }}s
                                    </p>
                                </div>
                            </div>
                            <span class="px-2 py-0.5 rounded text-[10px] font-semibold uppercase {{ $call->status === 'completed' ? 'bg-emerald-500/10 text-emerald-400' : 'bg-amber-500/10 text-amber-400' }}">
                                {{ $call->status }}
                            </span>
                        </div>
                    @empty
                        <p class="text-xs text-slate-500 py-4 text-center">No call history recorded yet.</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function joinCustomRoom() {
        const channel = document.getElementById('channelInput').value.trim();
        if (channel) {
            window.location.href = "{{ url('/calls/room') }}/" + encodeURIComponent(channel);
        }
    }

    function generateRandomRoom() {
        const randomCode = 'room-' + Math.random().toString(36).substring(2, 8);
        document.getElementById('channelInput').value = randomCode;
    }

    function startDirectCall(peerId, peerName) {
        const myId = "{{ auth()->id() }}";
        const minId = Math.min(myId, peerId);
        const maxId = Math.max(myId, peerId);
        const channel = `direct-${minId}-${maxId}`;

        window.location.href = `{{ url('/calls/room') }}/${channel}?receiver_id=${peerId}`;
    }
</script>
@endpush