<x-app-layout>
    <x-slot name="title">Dispositivos OLT</x-slot>
    <x-slot name="breadcrumb">
        <span class="text-gray-400">Dispositivos OLT</span>
    </x-slot>

    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-xl font-bold text-gray-900 dark:text-white">Dispositivos OLT</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">Gestiona tus equipos ZTE C300</p>
        </div>
        <a href="{{ route('devices.create') }}" class="btn-primary">
            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4"/>
            </svg>
            Agregar Dispositivo
        </a>
    </div>

    <div class="card">
        <div class="table-wrapper rounded-xl overflow-hidden">
            <table class="table">
                <thead>
                    <tr>
                        <th>Dispositivo</th>
                        <th>Host / IP</th>
                        <th>SSH</th>
                        <th>Puertos</th>
                        <th>Estado</th>
                        <th class="text-right">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($devices as $device)
                        <tr>
                            <td>
                                <div class="flex items-center gap-3">
                                    <div class="w-9 h-9 rounded-xl bg-primary-100 dark:bg-primary-900/30
                                                flex items-center justify-center flex-shrink-0">
                                        <svg class="w-4 h-4 text-primary-600 dark:text-primary-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2"/>
                                        </svg>
                                    </div>
                                    <div>
                                        <a href="{{ route('devices.show', $device) }}"
                                           class="font-semibold text-gray-900 dark:text-gray-100 hover:text-primary-600 dark:hover:text-primary-400 transition-colors">
                                            {{ $device->name }}
                                        </a>
                                        @if($device->description)
                                            <div class="text-xs text-gray-400 mt-0.5">{{ $device->description }}</div>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            <td>
                                <code class="text-xs bg-gray-100 dark:bg-white/5 text-gray-700 dark:text-gray-300
                                             px-2 py-1 rounded-md font-mono">{{ $device->host }}</code>
                            </td>
                            <td class="text-sm text-gray-500 dark:text-gray-400">:{{ $device->port }}</td>
                            <td>
                                <span class="badge-purple">{{ $device->ports_count }}</span>
                            </td>
                            <td>
                                <span class="flex items-center gap-1.5">
                                    <span class="w-1.5 h-1.5 rounded-full {{ $device->active ? 'bg-accent-400 animate-pulse-slow' : 'bg-red-400' }}"></span>
                                    <span class="text-xs {{ $device->active ? 'text-accent-600 dark:text-accent-400' : 'text-red-500' }}">
                                        {{ $device->active ? 'Activo' : 'Inactivo' }}
                                    </span>
                                </span>
                            </td>
                            <td>
                                <div class="flex items-center justify-end gap-1">
                                    <a href="{{ route('devices.show', $device) }}"
                                       class="btn btn-ghost btn-sm" title="Ver">
                                        <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                                        </svg>
                                    </a>
                                    <a href="{{ route('devices.edit', $device) }}"
                                       class="btn btn-ghost btn-sm" title="Editar">
                                        <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                                        </svg>
                                    </a>
                                    <button onclick="testConnection({{ $device->id }}, this)"
                                            class="btn btn-ghost btn-sm text-accent-600 dark:text-accent-400 hover:bg-accent-50 dark:hover:bg-accent-900/20"
                                            title="Probar SSH">
                                        <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0"/>
                                        </svg>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="py-16 text-center">
                                <div class="flex flex-col items-center gap-3 text-gray-400">
                                    <svg class="w-10 h-10 opacity-30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                              d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2"/>
                                    </svg>
                                    <p class="text-sm">No hay dispositivos registrados.</p>
                                    <a href="{{ route('devices.create') }}" class="btn-primary btn-sm">Agregar el primero</a>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($devices->hasPages())
            <div class="px-6 py-4 border-t border-gray-100 dark:border-white/5">
                {{ $devices->links() }}
            </div>
        @endif
    </div>

    <script>
    function testConnection(deviceId, btn) {
        const original = btn.innerHTML;
        const spinner  = '<svg class="w-3.5 h-3.5 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>';
        btn.innerHTML = spinner + ' Probando...';
        btn.disabled  = true;

        fetch(`{{ url('/') }}/devices/${deviceId}/test-connection`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json',
            }
        })
        .then(r => r.json())
        .then(data => {
            showModal({
                type:    data.success ? 'success' : 'error',
                title:   data.success ? 'Conexión exitosa' : 'Error de conexión SSH',
                message: data.message,
            });
        })
        .catch(err => {
            showModal({
                type:    'error',
                title:   'Error inesperado',
                message: 'No se pudo completar la prueba de conexión.',
                detail:  err.message ?? '',
            });
        })
        .finally(() => { btn.innerHTML = original; btn.disabled = false; });
    }
    </script>
</x-app-layout>
