<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200 leading-tight">
                    <i class="fas fa-sync-alt mr-2"></i>{{ __('DynDNS Clients') }}
                </h2>
                <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                    <a href="{{ route('dashboard') }}" class="text-blue-600 dark:text-blue-400 hover:underline">Dashboard</a>
                    <span class="mx-2">/</span>
                    <span>DynDNS</span>
                </p>
            </div>
            <div class="flex items-center gap-3">
                <a href="{{ route('dyndns.create') }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-lg transition">
                    <i class="fas fa-plus mr-2"></i>Creează Client DynDNS
                </a>
                <a href="{{ route('dashboard') }}" class="inline-flex items-center justify-center w-10 h-10 text-gray-600 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition" title="Înapoi la Dashboard">
                    <i class="fas fa-arrow-left"></i>
                </a>
            </div>
        </div>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">

            <!-- Statistici DynDNS -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4 mb-6">
                <!-- Total Clienți -->
                <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
                    <div class="flex items-center">
                        <div class="flex-shrink-0 bg-purple-100 dark:bg-purple-900/30 p-3 rounded-lg">
                            <i class="fas fa-sync-alt text-purple-500 text-xl"></i>
                        </div>
                        <div class="ml-4">
                            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Clienți</p>
                            <p class="text-2xl font-semibold text-gray-900 dark:text-white">{{ $stats['total'] }}</p>
                        </div>
                    </div>
                </div>

                <!-- Activi -->
                <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
                    <div class="flex items-center">
                        <div class="flex-shrink-0 bg-green-100 dark:bg-green-900/30 p-3 rounded-lg">
                            <i class="fas fa-check-circle text-green-500 text-xl"></i>
                        </div>
                        <div class="ml-4">
                            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Activi</p>
                            <p class="text-2xl font-semibold text-gray-900 dark:text-white">{{ $stats['active'] }}</p>
                        </div>
                    </div>
                </div>

                <!-- Inactivi -->
                <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
                    <div class="flex items-center">
                        <div class="flex-shrink-0 bg-gray-100 dark:bg-gray-700 p-3 rounded-lg">
                            <i class="fas fa-pause-circle text-gray-500 text-xl"></i>
                        </div>
                        <div class="ml-4">
                            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Inactivi</p>
                            <p class="text-2xl font-semibold text-gray-900 dark:text-white">{{ $stats['inactive'] }}</p>
                        </div>
                    </div>
                </div>

                <!-- Total Actualizări -->
                <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
                    <div class="flex items-center">
                        <div class="flex-shrink-0 bg-blue-100 dark:bg-blue-900/30 p-3 rounded-lg">
                            <i class="fas fa-history text-blue-500 text-xl"></i>
                        </div>
                        <div class="ml-4">
                            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Updates</p>
                            <p class="text-2xl font-semibold text-gray-900 dark:text-white">{{ number_format($stats['total_updates']) }}</p>
                        </div>
                    </div>
                </div>

                <!-- Actualizări Azi -->
                <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
                    <div class="flex items-center">
                        <div class="flex-shrink-0 bg-orange-100 dark:bg-orange-900/30 p-3 rounded-lg">
                            <i class="fas fa-calendar-day text-orange-500 text-xl"></i>
                        </div>
                        <div class="ml-4">
                            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Updates Azi</p>
                            <p class="text-2xl font-semibold text-gray-900 dark:text-white">{{ $stats['updated_today'] }}</p>
                        </div>
                    </div>
                </div>

                <!-- Actualizări Săptămâna Asta -->
                <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
                    <div class="flex items-center">
                        <div class="flex-shrink-0 bg-indigo-100 dark:bg-indigo-900/30 p-3 rounded-lg">
                            <i class="fas fa-calendar-week text-indigo-500 text-xl"></i>
                        </div>
                        <div class="ml-4">
                            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Updates Săpt.</p>
                            <p class="text-2xl font-semibold text-gray-900 dark:text-white">{{ $stats['updated_this_week'] }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Plan Quota Info + Bară de căutare pe același rând -->
            <div class="mb-6 flex flex-col lg:flex-row gap-4">
                <!-- Plan Quota Info -->
                @if (auth()->user()->plan)
                    @php
                        $plan = auth()->user()->plan;
                        $remaining = $plan->getRemainingDynDnsClients(auth()->user());
                        $current = auth()->user()->dynamicDnsClients()->count();
                        $max = $plan->dyndns_max_clients;
                    @endphp

                    @if ($plan->hasDynDns())
                        <div class="flex-shrink-0 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
                            <div class="flex items-center">
                                <i class="fas fa-info-circle text-blue-600 mr-3"></i>
                                <div>
                                    <p class="text-sm font-medium text-blue-900 dark:text-blue-300">
                                        Plan: <strong>{{ $plan->name }}</strong>
                                    </p>
                                    <p class="text-xs text-blue-700 dark:text-blue-400">
                                        @if ($max === 0)
                                            Clienți DynDNS: <strong>{{ $current }}</strong> (nelimitat)
                                        @else
                                            Clienți DynDNS: <strong>{{ $current }}/{{ $max }}</strong>
                                            @if ($remaining > 0)
                                                · <span class="text-green-600 dark:text-green-400">{{ $remaining }} disponibili</span>
                                            @elseif ($remaining === 'nelimitat')
                                                · <span class="text-green-600 dark:text-green-400">nelimitat</span>
                                            @else
                                                · <span class="text-red-600 dark:text-red-400">limită atinsă</span>
                                            @endif
                                        @endif
                                    </p>
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="flex-shrink-0 p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
                            <div class="flex items-center">
                                <i class="fas fa-exclamation-triangle text-yellow-600 mr-3"></i>
                                <p class="text-sm text-yellow-900 dark:text-yellow-300">
                                    Planul <strong>{{ $plan->name }}</strong> nu include DynDNS.
                                </p>
                            </div>
                        </div>
                    @endif
                @endif

                <!-- Bară de căutare și filtrare -->
                <div class="flex-1 bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4">
                    <form action="{{ route('dyndns.index') }}" method="GET" class="flex flex-col md:flex-row gap-4">
                        <div class="flex-1">
                            <div class="relative">
                                <input type="text"
                                       name="search"
                                       value="{{ request('search') }}"
                                       placeholder="Caută după hostname, IP sau domeniu..."
                                       class="w-full pl-10 pr-4 py-2 rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-200">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fas fa-search text-gray-400"></i>
                                </div>
                            </div>
                        </div>
                        <div class="flex gap-2">
                            <select name="status"
                                    class="rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-200">
                                <option value="">Toate statusurile</option>
                                <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Active</option>
                                <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Inactive</option>
                            </select>
                            <button type="submit"
                                    class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition">
                                <i class="fas fa-filter mr-1"></i>Filtrează
                            </button>
                            @if (request('search') || request('status'))
                                <a href="{{ route('dyndns.index') }}"
                                   class="px-4 py-2 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 rounded-lg transition">
                                    <i class="fas fa-times mr-1"></i>Resetează
                                </a>
                            @endif
                        </div>
                    </form>
                </div>
            </div>

            @if (session('success'))
                <div class="mb-4 p-4 bg-green-100 dark:bg-green-900 border border-green-400 dark:border-green-700 text-green-700 dark:text-green-300 rounded-lg">
                    <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
                </div>
            @endif

            @if (session('error'))
                <div class="mb-4 p-4 bg-red-100 dark:bg-red-900 border border-red-400 dark:border-red-700 text-red-700 dark:text-red-300 rounded-lg">
                    <i class="fas fa-exclamation-circle mr-2"></i>{{ session('error') }}
                </div>
            @endif

            @if ($clients->isEmpty())
                <!-- Empty State -->
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-12 text-center">
                    <div class="text-gray-400 mb-4">
                        <i class="fas fa-sync-alt text-6xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-2">
                        Nu există clienți DynDNS configurați
                    </h3>
                    <p class="text-gray-500 dark:text-gray-400 mb-6">
                        Configurează primul tău client DynDNS pentru a actualiza automat IP-ul dinamic.
                    </p>
                    <a href="{{ route('dyndns.create') }}" class="inline-flex items-center px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition">
                        <i class="fas fa-plus mr-2"></i>Creează Primul Client
                    </a>
                </div>
            @else
                <!-- Clients List -->
                <div class="space-y-4">
                    @foreach ($clients as $client)
                        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden border border-gray-200 dark:border-gray-700 hover:shadow-md transition">
                            <div class="p-6">
                                <div class="flex items-center justify-between">
                                    <!-- Client Info -->
                                    <div class="flex items-center space-x-4 flex-1">
                                        <!-- Icon -->
                                        <div class="flex-shrink-0">
                                            <div class="w-10 h-10 bg-gradient-to-br from-purple-500 to-purple-700 rounded-lg flex items-center justify-center text-white font-bold text-lg">
                                                <i class="fas fa-sync-alt"></i>
                                            </div>
                                        </div>

                                        <!-- Details -->
                                        <div class="flex-1">
                                            <div class="flex items-center space-x-3 mb-1">
                                                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                                                    {{ $client->hostname }}
                                                </h3>
                                            </div>

                                            <div class="flex items-center space-x-6 text-sm text-gray-500 dark:text-gray-400">
                                                <!-- Current IP -->
                                                <div class="flex items-center">
                                                    <i class="fas fa-network-wired mr-2 text-gray-400"></i>
                                                    <span class="font-mono">{{ $client->current_ip ?? 'N/A' }}</span>
                                                </div>

                                                <!-- Zone -->
                                                <div class="flex items-center">
                                                    <i class="fas fa-globe mr-2 text-gray-400"></i>
                                                    <span>{{ $client->dnsZone->domain }}</span>
                                                </div>

                                                <!-- Last Update -->
                                                <div class="flex items-center">
                                                    <i class="far fa-clock mr-2 text-gray-400"></i>
                                                    <span>{{ $client->getTimeSinceUpdate() }}</span>
                                                </div>

                                                <!-- Stats -->
                                                <div class="flex items-center">
                                                    <i class="fas fa-history mr-2 text-gray-400"></i>
                                                    <span>{{ $client->update_count }} actualizări</span>
                                                </div>

                                                <!-- Owner (doar pentru admin) -->
                                                @if (auth()->user()->isAdmin())
                                                    <div class="flex items-center">
                                                        <i class="fas fa-user mr-2 text-gray-400"></i>
                                                        <span class="text-blue-600 dark:text-blue-400">{{ $client->user->name ?? $client->user->email }}</span>
                                                    </div>
                                                @endif

                                                <!-- Status Badge -->
                                                <div class="flex items-center">
                                                    @if ($client->is_active)
                                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-green-500 text-white">
                                                            <svg class="mr-1.5 h-2 w-2 text-white" fill="currentColor" viewBox="0 0 8 8">
                                                                <circle cx="4" cy="4" r="3" />
                                                            </svg>
                                                            Activ
                                                        </span>
                                                    @else
                                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-gray-500 text-white">
                                                            <svg class="mr-1.5 h-2 w-2 text-white" fill="currentColor" viewBox="0 0 8 8">
                                                                <circle cx="4" cy="4" r="3" />
                                                            </svg>
                                                            Inactiv
                                                        </span>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Actions -->
                                    <div class="flex items-center space-x-2">
                                        <!-- View Details -->
                                        <a href="{{ route('dyndns.show', $client) }}"
                                           class="p-2 text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-lg transition"
                                           title="Vezi detalii">
                                            <i class="fas fa-eye"></i>
                                        </a>

                                        <!-- Sync/Refresh -->
                                        <a href="{{ route('dyndns.show', $client) }}"
                                           class="p-2 text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300 bg-purple-50 dark:bg-purple-900/20 hover:bg-purple-100 dark:hover:bg-purple-900/30 border border-purple-200 dark:border-purple-800 rounded-lg transition"
                                           title="Sincronizare">
                                            <i class="fas fa-sync-alt"></i>
                                        </a>

                                        <!-- Toggle Active/Inactive -->
                                        <button onclick="toggleClient({{ $client->id }}, this)"
                                                class="p-2 {{ $client->is_active ? 'text-green-600 hover:text-green-700 dark:text-green-400 bg-green-50 dark:bg-green-900/20 hover:bg-green-100 dark:hover:bg-green-900/30 border-green-200 dark:border-green-800' : 'text-gray-400 hover:text-gray-600 dark:text-gray-500 bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 border-gray-200 dark:border-gray-600' }} border rounded-lg transition"
                                                title="{{ $client->is_active ? 'Dezactivează' : 'Activează' }}"
                                                data-active="{{ $client->is_active ? '1' : '0' }}">
                                            <i class="fas fa-{{ $client->is_active ? 'toggle-on' : 'toggle-off' }}"></i>
                                        </button>

                                        <!-- Delete -->
                                        <form action="{{ route('dyndns.destroy', $client) }}"
                                              method="POST"
                                              class="inline"
                                              onsubmit="return confirm('Ești sigur că vrei să ștergi acest client DynDNS?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit"
                                                    class="p-2 text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 bg-red-50 dark:bg-red-900/20 hover:bg-red-100 dark:hover:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg transition"
                                                    title="Șterge">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Pagination -->
                @if ($clients->hasPages())
                    <div class="mt-6">
                        {{ $clients->links() }}
                    </div>
                @endif
            @endif
        </div>
    </div>

    @push('scripts')
    <script>
        function toggleClient(clientId, button) {
            const isActive = button.dataset.active === '1';
            const newState = !isActive;
            const url = '{{ route("dyndns.toggle", ":id") }}'.replace(':id', clientId);

            // Update UI immediately
            const icon = button.querySelector('i');
            if (newState) {
                // Remove gray classes
                button.classList.remove('text-gray-400', 'hover:text-gray-600', 'dark:text-gray-500',
                    'bg-gray-50', 'dark:bg-gray-700', 'hover:bg-gray-100', 'dark:hover:bg-gray-600',
                    'border-gray-200', 'dark:border-gray-600');
                // Add green classes
                button.classList.add('text-green-600', 'hover:text-green-700', 'dark:text-green-400',
                    'bg-green-50', 'dark:bg-green-900/20', 'hover:bg-green-100', 'dark:hover:bg-green-900/30',
                    'border-green-200', 'dark:border-green-800');
                icon.classList.remove('fa-toggle-off');
                icon.classList.add('fa-toggle-on');
                button.title = 'Dezactivează';
            } else {
                // Remove green classes
                button.classList.remove('text-green-600', 'hover:text-green-700', 'dark:text-green-400',
                    'bg-green-50', 'dark:bg-green-900/20', 'hover:bg-green-100', 'dark:hover:bg-green-900/30',
                    'border-green-200', 'dark:border-green-800');
                // Add gray classes
                button.classList.add('text-gray-400', 'hover:text-gray-600', 'dark:text-gray-500',
                    'bg-gray-50', 'dark:bg-gray-700', 'hover:bg-gray-100', 'dark:hover:bg-gray-600',
                    'border-gray-200', 'dark:border-gray-600');
                icon.classList.remove('fa-toggle-on');
                icon.classList.add('fa-toggle-off');
                button.title = 'Activează';
            }
            button.dataset.active = newState ? '1' : '0';

            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showToast(data.message, 'success');
                } else {
                    checkbox.checked = !isActive;
                    showToast(data.message || 'Eroare la actualizare', 'error');
                }
            })
            .catch(error => {
                checkbox.checked = !isActive;
                showToast('Eroare la comunicarea cu serverul', 'error');
            });
        }

        function showToast(message, type = 'info') {
            const toast = document.createElement('div');
            toast.className = `fixed top-4 right-4 px-6 py-4 rounded-lg shadow-lg z-50 transition-opacity ${
                type === 'success' ? 'bg-green-500' : 'bg-red-500'
            } text-white`;
            toast.innerHTML = `<i class="fas fa-${type === 'success' ? 'check' : 'exclamation'}-circle mr-2"></i>${message}`;
            document.body.appendChild(toast);

            setTimeout(() => {
                toast.style.opacity = '0';
                setTimeout(() => toast.remove(), 300);
            }, 3000);
        }
    </script>
    @endpush
</x-app-layout>
