<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">
                    {{ __('Gestionează înregistrări DNS') }}: {{ $zone['name'] }}
                </h2>
            </div>
            <div class="flex space-x-2">
                <a href="{{ route('powerdns.user.show', $zoneId) }}"
                   class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
                    ← Înapoi la detalii
                </a>
                <a href="{{ route('powerdns.user.index') }}"
                   class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                    Lista zonelor
                </a>
            </div>
        </div>
    </x-slot>

    <div class="py-12">
        <div class="px-6 lg:px-8">
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900 dark:text-gray-100">
                    @if(session('success'))
                        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
                            {{ session('success') }}
                        </div>
                    @endif

                    @if(session('error'))
                        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                            {{ session('error') }}
                        </div>
                    @endif

                    <!-- Header cu informații -->
                    <div class="mb-6 p-4 bg-blue-50 dark:bg-blue-900 rounded-lg">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <svg class="h-8 w-8 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                </svg>
                            </div>
                            <div class="ml-4">
                                <h3 class="text-lg font-medium text-blue-900 dark:text-blue-100">Gestionare înregistrări DNS</h3>
                                <p class="text-blue-700 dark:text-blue-300">
                                    Poți gestiona înregistrările DNS pentru zona <strong>{{ $zone['name'] }}</strong>.
                                    Modificările se aplică imediat pe serverele PowerDNS.
                                </p>
                            </div>
                        </div>
                    </div>

                    @if($assignment->access_level === 'full')
                        <!-- Informație acces complet -->
                        <div class="mb-4 p-3 bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-700 rounded">
                            <p class="text-sm text-green-700 dark:text-green-300">
                                <strong>Acces complet:</strong> Poți adăuga, modifica și șterge toate tipurile de înregistrări DNS.
                            </p>
                        </div>
                    @elseif($assignment->access_level === 'records_only')
                        <!-- Informație acces limitat -->
                        <div class="mb-4 p-3 bg-blue-50 dark:bg-blue-900 border border-blue-200 dark:border-blue-700 rounded">
                            <p class="text-sm text-blue-700 dark:text-blue-300">
                                <strong>Acces la înregistrări:</strong> Poți gestiona doar înregistrările DNS, nu și configurările zonei.
                            </p>
                        </div>
                    @endif

                    <!-- Lista înregistrărilor cu opțiuni de ștergere -->
                    <div>
                        <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">
                            Înregistrări DNS ({{ count($records) }} total)
                        </h3>

                        @if(count($records) > 0)
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                                    <thead class="bg-gray-50 dark:bg-gray-700">
                                        <tr>
                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                                Nume
                                            </th>
                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                                Tip
                                            </th>
                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                                TTL
                                            </th>
                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                                Valoare
                                            </th>
                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                                Acțiuni
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                                        @foreach($records as $record)
                                            @foreach($record['records'] as $recordData)
                                                <tr class="{{ $record['type'] === 'SOA' ? 'bg-yellow-50 dark:bg-yellow-900' : '' }}">
                                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">
                                                        {{ $record['name'] }}
                                                    </td>
                                                    <td class="px-6 py-4 whitespace-nowrap">
                                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                                            @if($record['type'] === 'A') bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200
                                                            @elseif($record['type'] === 'AAAA') bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200
                                                            @elseif($record['type'] === 'CNAME') bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200
                                                            @elseif($record['type'] === 'MX') bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200
                                                            @elseif($record['type'] === 'TXT') bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200
                                                            @elseif($record['type'] === 'NS') bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200
                                                            @elseif($record['type'] === 'SOA') bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200
                                                            @else bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200
                                                            @endif">
                                                            {{ $record['type'] }}
                                                            @if($record['type'] === 'SOA')
                                                                <svg class="ml-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                                                    <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path>
                                                                </svg>
                                                            @endif
                                                        </span>
                                                    </td>
                                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                                                        {{ $record['ttl'] }}s
                                                    </td>
                                                    <td class="px-6 py-4 text-sm text-gray-900 dark:text-gray-100">
                                                        <div class="max-w-md break-words">
                                                            @if($record['type'] === 'TXT' && strlen($recordData['content']) > 50)
                                                                <div title="{{ $recordData['content'] }}">
                                                                    {{ substr($recordData['content'], 0, 50) }}...
                                                                </div>
                                                            @else
                                                                {{ $recordData['content'] }}
                                                            @endif
                                                        </div>
                                                    </td>
                                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                                        @if($record['type'] === 'SOA')
                                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
                                                                <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                                                    <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path>
                                                                </svg>
                                                                Protejat
                                                            </span>
                                                        @else
                                                            <div class="flex space-x-2">
                                                                <span class="text-gray-400 dark:text-gray-600 cursor-not-allowed" title="Funcția de editare va fi implementată în curând">
                                                                    Editează (în curând)
                                                                </span>
                                                                <form method="POST" action="{{ route('powerdns.user.delete-record', $zoneId) }}" class="inline">
                                                                    @csrf
                                                                    @method('DELETE')
                                                                    <input type="hidden" name="name" value="{{ $record['name'] }}">
                                                                    <input type="hidden" name="type" value="{{ $record['type'] }}">
                                                                    <button type="submit"
                                                                            class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300"
                                                                            onclick="return confirm('Sigur vrei să ștergi această înregistrare DNS?')">
                                                                        Șterge
                                                                    </button>
                                                                </form>
                                                            </div>
                                                        @endif
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                            <!-- Legendă pentru tipuri de înregistrări -->
                            <div class="mt-6 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                                <h4 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">Tipuri de înregistrări DNS:</h4>
                                <div class="grid grid-cols-2 md:grid-cols-4 gap-2 text-xs">
                                    <div><span class="inline-block w-3 h-3 bg-green-500 rounded mr-1"></span> A - Adresă IPv4</div>
                                    <div><span class="inline-block w-3 h-3 bg-blue-500 rounded mr-1"></span> AAAA - Adresă IPv6</div>
                                    <div><span class="inline-block w-3 h-3 bg-purple-500 rounded mr-1"></span> CNAME - Alias</div>
                                    <div><span class="inline-block w-3 h-3 bg-yellow-500 rounded mr-1"></span> MX - Mail Exchange</div>
                                    <div><span class="inline-block w-3 h-3 bg-indigo-500 rounded mr-1"></span> TXT - Text Record</div>
                                    <div><span class="inline-block w-3 h-3 bg-red-500 rounded mr-1"></span> NS - Name Server</div>
                                    <div><span class="inline-block w-3 h-3 bg-gray-500 rounded mr-1"></span> SOA - Start of Authority</div>
                                </div>
                            </div>

                        @else
                            <div class="text-center py-8">
                                <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                </svg>
                                <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-gray-100">Nu există înregistrări</h3>
                                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                                    Această zonă DNS nu conține încă înregistrări.
                                </p>
                            </div>
                        @endif
                    </div>

                    <!-- Informații importante -->
                    <div class="mt-8 p-4 bg-orange-50 dark:bg-orange-900 border border-orange-200 dark:border-orange-700 rounded-lg">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <svg class="h-5 w-5 text-orange-400" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                                </svg>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-sm font-medium text-orange-800 dark:text-orange-200">
                                    Informații importante
                                </h3>
                                <div class="mt-2 text-sm text-orange-700 dark:text-orange-300">
                                    <ul class="list-disc list-inside space-y-1">
                                        <li><strong>Înregistrarea SOA</strong> nu poate fi ștearsă - este esențială pentru funcționarea zonei</li>
                                        <li>Modificările se aplică <strong>imediat</strong> pe serverele PowerDNS</li>
                                        <li>Timpul de propagare DNS poate fi până la <strong>{{ $records[0]['ttl'] ?? 3600 }} secunde</strong></li>
                                        <li>Pentru suport tehnic, contactează administratorul sistemului</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</x-app-layout>
