<x-app-layout>
    <x-slot name="header">
        <div class="flex justify-between items-center">
            <div>
                <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200 leading-tight">
                    <i class="fas fa-cloud-download-alt mr-2 text-orange-500"></i>Importă Zone din Cloudflare
                </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>
                    <a href="{{ route('cloudflare.index') }}" class="text-blue-600 dark:text-blue-400 hover:underline">Cloudflare</a>
                    <span class="mx-2">/</span>
                    <span>Importă Zone - {{ $credential->name }}</span>
                </p>
            </div>
            <a href="{{ route('cloudflare.index') }}" 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">
                <i class="fas fa-arrow-left"></i>
            </a>
        </div>
    </x-slot>

    <div class="py-12">
        <div class="px-6 lg:px-8 space-y-6">

            @if (session('error'))
                <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded dark:bg-red-900/30 dark:border-red-600 dark:text-red-300" role="alert">
                    <p class="font-bold">Eroare!</p>
                    <p>{{ session('error') }}</p>
                </div>
            @endif

            @if(count($cloudflareZones) === 0)
                <!-- No zones -->
                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-12 text-center">
                        <i class="fas fa-cloud text-gray-300 dark:text-gray-600 text-6xl mb-4"></i>
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Nu există zone în acest cont Cloudflare</h3>
                        <p class="text-gray-500 dark:text-gray-400 mb-4">
                            Contul Cloudflare asociat cu această credențială nu are zone configurate.
                        </p>
                        <a href="{{ route('cloudflare.index') }}" class="inline-flex items-center px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium rounded-lg transition">
                            <i class="fas fa-arrow-left mr-2"></i>Înapoi la Cloudflare
                        </a>
                    </div>
                </div>
            @else
                <form action="{{ route('cloudflare.credentials.import', $credential) }}" method="POST" id="importForm">
                    @csrf

                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                        <!-- Zone List -->
                        <div class="lg:col-span-2">
                            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                                <div class="p-6 border-b border-gray-200 dark:border-gray-700">
                                    <div class="flex justify-between items-center">
                                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                                            <i class="fas fa-list mr-2 text-blue-500"></i>Zone disponibile în Cloudflare ({{ count($cloudflareZones) }})
                                        </h3>
                                        <label class="inline-flex items-center cursor-pointer">
                                            <input type="checkbox" id="selectAll" class="form-checkbox h-4 w-4 text-orange-500 border-gray-300 rounded focus:ring-orange-500 mr-2">
                                            <span class="text-sm text-gray-700 dark:text-gray-300">Selectează toate</span>
                                        </label>
                                    </div>
                                </div>
                                <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-4 py-3 w-12"></th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Domeniu</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status CF</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Plan</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status Local</th>
                                            </tr>
                                        </thead>
                                        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                                            @foreach($cloudflareZones as $zone)
                                                <tr class="{{ $zone['already_linked'] ? 'bg-blue-50 dark:bg-blue-900/20' : '' }}">
                                                    <td class="px-4 py-4">
                                                        @if($zone['already_linked'])
                                                            <span class="text-blue-500" title="Deja conectat">
                                                                <i class="fas fa-check-circle"></i>
                                                            </span>
                                                        @else
                                                            <input class="zone-checkbox form-checkbox h-4 w-4 text-orange-500 border-gray-300 rounded focus:ring-orange-500"
                                                                   type="checkbox"
                                                                   name="zones[]"
                                                                   value="{{ $zone['id'] }}"
                                                                   id="zone-{{ $zone['id'] }}">
                                                        @endif
                                                    </td>
                                                    <td class="px-6 py-4">
                                                        <label for="zone-{{ $zone['id'] }}" class="font-medium text-gray-900 dark:text-white cursor-pointer">
                                                            {{ $zone['name'] }}
                                                        </label>
                                                        @if(isset($zone['name_servers']) && is_array($zone['name_servers']))
                                                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                                                NS: {{ implode(', ', array_slice($zone['name_servers'], 0, 2)) }}
                                                                @if(count($zone['name_servers']) > 2)...@endif
                                                            </p>
                                                        @endif
                                                    </td>
                                                    <td class="px-6 py-4 whitespace-nowrap">
                                                        @php
                                                            $statusClass = match($zone['status'] ?? 'unknown') {
                                                                'active' => 'green',
                                                                'pending' => 'yellow',
                                                                'initializing' => 'blue',
                                                                'moved' => 'gray',
                                                                'deleted' => 'red',
                                                                default => 'gray'
                                                            };
                                                        @endphp
                                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-{{ $statusClass }}-100 text-{{ $statusClass }}-800 dark:bg-{{ $statusClass }}-900/30 dark:text-{{ $statusClass }}-300">
                                                            {{ ucfirst($zone['status'] ?? 'Unknown') }}
                                                        </span>
                                                    </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 bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
                                                            {{ ucfirst($zone['plan']['name'] ?? 'Free') }}
                                                        </span>
                                                    </td>
                                                    <td class="px-6 py-4 whitespace-nowrap">
                                                        @if($zone['already_linked'])
                                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
                                                                <i class="fas fa-link mr-1"></i>Conectat
                                                            </span>
                                                        @elseif($zone['exists_locally'])
                                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
                                                                <i class="fas fa-check mr-1"></i>Există local
                                                            </span>
                                                        @else
                                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300">
                                                                <i class="fas fa-plus mr-1"></i>Nou
                                                            </span>
                                                        @endif
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                                <div class="p-4 bg-gray-50 dark:bg-gray-700/50 text-sm text-gray-600 dark:text-gray-400">
                                    <i class="fas fa-info-circle mr-1"></i>
                                    Zonele marcate cu <span class="text-green-600 dark:text-green-400 font-medium">Există local</span> vor fi doar conectate la Cloudflare.
                                    Zonele marcate cu <span class="text-yellow-600 dark:text-yellow-400 font-medium">Nou</span> vor fi create în panel și conectate.
                                </div>
                            </div>
                        </div>

                        <!-- Options Sidebar -->
                        <div class="lg:col-span-1">
                            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg sticky top-4">
                                <div class="p-6 border-b border-gray-200 dark:border-gray-700">
                                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                                        <i class="fas fa-cog mr-2 text-gray-500"></i>Opțiuni Import
                                    </h3>
                                </div>
                                <div class="p-6 space-y-4">
                                    <!-- Sync Direction -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            Direcție Sincronizare <span class="text-red-500">*</span>
                                        </label>
                                        <div class="space-y-2">
                                            <label class="flex items-start p-3 border border-gray-200 dark:border-gray-700 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/50 transition">
                                                <input type="radio" name="sync_direction" value="from_cloudflare"
                                                       class="form-radio h-4 w-4 text-orange-500 mt-0.5" checked>
                                                <div class="ml-3">
                                                    <span class="text-sm font-medium text-gray-900 dark:text-white flex items-center">
                                                        <i class="fas fa-cloud-download-alt mr-2 text-orange-500"></i>Din Cloudflare
                                                    </span>
                                                    <span class="text-xs text-gray-500 dark:text-gray-400">
                                                        Sincronizează records din Cloudflare în panel
                                                    </span>
                                                </div>
                                            </label>
                                            <label class="flex items-start p-3 border border-gray-200 dark:border-gray-700 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/50 transition">
                                                <input type="radio" name="sync_direction" value="bidirectional"
                                                       class="form-radio h-4 w-4 text-blue-500 mt-0.5">
                                                <div class="ml-3">
                                                    <span class="text-sm font-medium text-gray-900 dark:text-white flex items-center">
                                                        <i class="fas fa-exchange-alt mr-2 text-blue-500"></i>Bidirecțional
                                                    </span>
                                                    <span class="text-xs text-gray-500 dark:text-gray-400">
                                                        Sincronizare în ambele direcții
                                                    </span>
                                                </div>
                                            </label>
                                        </div>
                                    </div>

                                    <!-- Import Records Toggle -->
                                    <div>
                                        <label class="flex items-start cursor-pointer">
                                            <input type="checkbox" name="import_records" value="1"
                                                   class="form-checkbox h-4 w-4 text-orange-500 border-gray-300 rounded focus:ring-orange-500 mt-0.5" checked>
                                            <div class="ml-3">
                                                <span class="text-sm font-medium text-gray-900 dark:text-white">
                                                    Importă și recordurile DNS
                                                </span>
                                                <span class="text-xs text-gray-500 dark:text-gray-400 block">
                                                    Importă toate recordurile DNS din Cloudflare în panelul local
                                                </span>
                                            </div>
                                        </label>
                                    </div>

                                    <!-- Info Box -->
                                    <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
                                        <div class="flex items-start">
                                            <i class="fas fa-info-circle text-blue-500 mt-0.5 mr-3"></i>
                                            <div class="text-sm text-blue-700 dark:text-blue-300">
                                                <strong>Zone selectate:</strong> <span id="selectedCount" class="font-bold">0</span>
                                                <br>
                                                <span class="text-xs">Zonele vor fi create (dacă nu există) și conectate la Cloudflare.</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="p-6 bg-gray-50 dark:bg-gray-700/50 border-t border-gray-200 dark:border-gray-700">
                                    <button type="submit" id="submitBtn" disabled
                                            class="w-full inline-flex justify-center items-center px-4 py-2 bg-orange-600 hover:bg-orange-700 disabled:bg-gray-400 disabled:cursor-not-allowed text-white text-sm font-medium rounded-lg transition">
                                        <i class="fas fa-cloud-download-alt mr-2"></i>
                                        Importă Zonele Selectate
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            @endif
        </div>
    </div>

    @push('scripts')
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const checkboxes = document.querySelectorAll('.zone-checkbox');
        const selectAll = document.getElementById('selectAll');
        const selectedCount = document.getElementById('selectedCount');
        const submitBtn = document.getElementById('submitBtn');

        function updateCount() {
            const checked = document.querySelectorAll('.zone-checkbox:checked').length;
            if (selectedCount) selectedCount.textContent = checked;
            if (submitBtn) submitBtn.disabled = checked === 0;

            // Update select all state
            if (selectAll) {
                const total = checkboxes.length;
                selectAll.checked = checked === total && total > 0;
                selectAll.indeterminate = checked > 0 && checked < total;
            }
        }

        // Individual checkbox change
        checkboxes.forEach(cb => {
            cb.addEventListener('change', updateCount);
        });

        // Select all
        if (selectAll) {
            selectAll.addEventListener('change', function() {
                checkboxes.forEach(cb => {
                    cb.checked = this.checked;
                });
                updateCount();
            });
        }

        // Initial count
        updateCount();
    });
    </script>
    @endpush
</x-app-layout>
