{% extends "base.html" %}

{% block content %}
    <div class="w-full px-4">
        <!-- Device Selection -->
        <div class="mb-12 max-w-6xl mx-auto">
            <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4">
                {% for device_key, device in devices.items() %}
                    <button @click="toggleDevice('{{ device_key }}')"
                            :disabled="isDeviceDisabled('{{ device_key }}')"
                            :aria-pressed="selectedDevices.includes('{{ device_key }}')"
                            title="Supports: {% for command_key in device.commands or [] %}{{ commands[command_key].display_name if command_key in commands else command_key }}{{ ', ' if not loop.last }}{% endfor %}"
                            :class="[
                                'flex flex-row items-center justify-between gap-2 px-4 py-3 min-h-[6rem] rounded-lg border-2 transition-all duration-200 ease-in-out transform hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--colour-primary)] focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900',
                                isDeviceDisabled('{{ device_key }}') ? 'opacity-60 pointer-events-none' : '',
                                selectedDevices.includes('{{ device_key }}')
                                    ? 'bg-gray-100 dark:bg-gray-800 border-[color:var(--colour-primary)] text-gray-700 dark:text-gray-300 shadow-lg scale-[1.02]'
                                    : 'bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-800 hover:border-[color:var(--colour-secondary)] dark:hover:border-[color:var(--colour-secondary)] hover:bg-gray-100 dark:hover:bg-gray-800'
                            ]">
                        <div class="flex-grow min-w-0 text-left">
                            <div class="text-base font-medium text-gray-800 dark:text-gray-200 mb-1 truncate">{{ device.display_name }}</div>
                            {% if device.subtext %}
                                <span class="block text-xs text-gray-600 dark:text-gray-400 truncate">{{ device.subtext }}</span>
                            {% endif %}
                        </div>
                        {% if device.country_code %}
                            <span class="fi fi-{{ device.country_code | lower }} flex-shrink-0 rounded-sm ring-1 ring-gray-900/10 dark:ring-white/10"></span>
                        {% endif %}
                    </button>
                {% endfor %}
            </div>
            {% if max_devices %}
                <p v-show="isDeviceLimitReached"
                   class="mt-4 text-center text-xs text-gray-500 dark:text-gray-400"
                   aria-live="polite">
                    Maximum of ${maxDevices} device${maxDevices === 1 ? '' : 's'} selected
                </p>
            {% endif %}
        </div>

        <!-- Query Type Selection -->
        <transition
            enter-active-class="transition-all ease-in-out duration-200"
            enter-from-class="opacity-0 translate-y-4"
            enter-to-class="opacity-100 translate-y-0"
            leave-active-class="transition-all ease-in-out duration-200"
            leave-from-class="opacity-100"
            leave-to-class="opacity-0">
            <div v-if="selectedDevices.length" class="mb-8 max-w-4xl mx-auto">
                <div class="flex flex-col md:flex-row gap-4">
                    <!-- Query Type Dropdown -->
                    <div class="relative flex-1" data-dropdown>
                        <button type="button"
                                @click.stop="toggleDropdown"
                                @keydown.down.prevent="moveHighlight(1)"
                                @keydown.up.prevent="moveHighlight(-1)"
                                @keydown.enter.prevent="chooseHighlighted"
                                @keydown.space.prevent="chooseHighlighted"
                                @keydown.esc="isOpen = false"
                                :disabled="isLoading"
                                role="combobox"
                                aria-haspopup="listbox"
                                aria-controls="command-listbox"
                                :aria-expanded="isOpen"
                                :aria-activedescendant="isOpen && highlightedIndex >= 0 ? 'command-option-' + highlightedIndex : null"
                                class="relative w-full h-12 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm pl-3 pr-10 text-left cursor-pointer focus:outline-none focus:border-gray-500 dark:focus:border-gray-500 sm:text-sm transition-colors duration-200 ease-in-out hover:border-[color:var(--colour-secondary)] dark:hover:border-[color:var(--colour-secondary)] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:border-gray-300 dark:disabled:hover:border-gray-700">
                            <span class="block truncate text-gray-700 dark:text-gray-300">
                                ${currentCommand ? currentCommand.display_name : (filteredCommands.length ? 'Select query type...' : 'No shared commands')}
                            </span>
                            <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none text-gray-400">
                                <svg class="h-5 w-5 transition-transform duration-200" 
                                     :class="{'rotate-180': isOpen}"
                                     xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
                                </svg>
                            </span>
                        </button>
                        <transition
                            enter-active-class="transition-all ease-in-out duration-200"
                            enter-from-class="transform opacity-0 scale-95 -translate-y-2"
                            enter-to-class="transform opacity-100 scale-100 translate-y-0"
                            leave-active-class="transition-all ease-in-out duration-200"
                            leave-from-class="transform opacity-100 scale-100 translate-y-0"
                            leave-to-class="transform opacity-0 scale-95 -translate-y-2">
                            <div v-if="isOpen"
                                id="command-listbox"
                                role="listbox"
                                class="absolute z-10 mt-1 w-full bg-white dark:bg-gray-800 shadow-lg max-h-60 rounded-lg py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
                                <div v-if="!filteredCommands.length" class="py-2 px-3 text-gray-500 dark:text-gray-400">
                                    No commands are shared by the selected devices
                                </div>
                                <div v-for="(command, index) in filteredCommands" :key="command.key"
                                    :id="'command-option-' + index"
                                    role="option"
                                    :aria-selected="selectedCommand === command.key"
                                    @click.stop.prevent="selectCommand(command.key)"
                                    @mousemove="highlightedIndex = index"
                                    :class="['cursor-pointer select-none relative py-2 pl-3 pr-9 transition-all duration-200 ease-in-out',
                                            highlightedIndex === index
                                                ? 'bg-gray-200 dark:bg-gray-600 text-gray-900 dark:text-white'
                                                : (selectedCommand === command.key ? 'bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white' : 'text-gray-700 dark:text-gray-300')]">
                                    <div class="flex items-center">
                                        <span class="block truncate font-medium">${command.display_name}</span>
                                    </div>
                                    <span v-if="selectedCommand === command.key"
                                        class="absolute inset-y-0 right-0 flex items-center pr-4 text-[color:var(--colour-primary)]">
                                        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                                        </svg>
                                    </span>
                                </div>
                                <div v-if="unavailableCommands.length"
                                     :class="filteredCommands.length ? 'mt-1 pt-1 border-t border-gray-200 dark:border-gray-700' : ''">
                                    <div v-for="command in unavailableCommands" :key="command.key"
                                        role="option"
                                        aria-disabled="true"
                                        :aria-selected="false"
                                        class="select-none relative py-2 px-3 cursor-not-allowed text-gray-400 dark:text-gray-500">
                                        <span class="block truncate font-medium">${command.display_name}</span>
                                        <span class="block truncate text-xs">Not available on ${command.missing.join(', ')}</span>
                                    </div>
                                </div>
                            </div>
                        </transition>
                    </div>

                    <!-- Target Input with Execute Button -->
                    <transition
                        enter-active-class="transition-all ease-in-out duration-200"
                        enter-from-class="transform opacity-0 scale-95"
                        enter-to-class="transform opacity-100 scale-100"
                        leave-active-class="transition-all ease-in-out duration-200"
                        leave-from-class="transform opacity-100 scale-100"
                        leave-to-class="transform opacity-0 scale-95">
                        <div v-if="currentCommand" 
                            class="flex-1 flex items-center gap-2">                            
                            <!-- Target Input Row -->
                            <div class="flex items-center gap-2 w-full">
                                <div class="flex-1 relative">
                                    <input
                                        v-model="targetIp" 
                                        type="text" 
                                        @keyup.enter="isValidInput && executeCommand()"
                                        :disabled="isLoading"
                                        class="w-full h-12 rounded-lg px-3 pr-24 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 hover:border-[color:var(--colour-secondary)] dark:hover:border-[color:var(--colour-secondary)] focus:outline-none focus:border-gray-500 dark:focus:border-gray-500 transition-colors duration-200 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:border-gray-300 dark:disabled:hover:border-gray-700"
                                        :placeholder="currentCommand?.field?.placeholder || 'Enter target'"
                                        :pattern="currentCommand?.field?.validation || '.*'"
                                        required>
                                    <div class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-2">
                                        <button
                                            type="button"
                                            @click="toggleIpVersion"
                                            :disabled="!showIpVersionSelector || isLoading"
                                            class="px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-600 transition-all duration-200 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-gray-100 dark:disabled:hover:bg-gray-700">
                                            ${selectedIpVersion}
                                        </button>
                                    </div>
                                </div>
                                <button 
                                    @click="executeCommand"
                                    :disabled="isLoading || !isValidInput || !targetIp"
                                    class="h-12 px-4 flex-shrink-0 rounded-lg border border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 hover:border-[color:var(--colour-secondary)] dark:hover:border-[color:var(--colour-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--colour-primary)] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent dark:disabled:hover:bg-transparent disabled:hover:border-gray-300 dark:disabled:hover:border-gray-700 flex items-center justify-center transform transition-all duration-200 ease-in-out">
                                    <!-- Fixed icon slot so the crossfading icons overlap instead of widening the button -->
                                    <span class="relative h-5 w-5">
                                        <transition
                                            enter-active-class="transition-all ease-in-out duration-200"
                                            enter-from-class="opacity-0 rotate-180 scale-0"
                                            enter-to-class="opacity-100 rotate-0 scale-100"
                                            leave-active-class="transition-all ease-in-out duration-200"
                                            leave-from-class="transform opacity-100 rotate-0 scale-100"
                                            leave-to-class="transform opacity-0 rotate-180 scale-0">
                                            <!-- Loading Spinner -->
                                            <svg v-if="isLoading" class="animate-spin absolute inset-0 h-5 w-5" xmlns="http://www.w3.org/2000/svg" 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 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                            </svg>
                                            <!-- Execute Icon -->
                                            <svg v-else xmlns="http://www.w3.org/2000/svg" class="absolute inset-0 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                                            </svg>
                                        </transition>
                                    </span>
                                </button>
                            </div>
                        </div>
                    </transition>
                </div>
            </div>
        </transition>

        <!-- Results -->
        <p class="sr-only" role="status" aria-live="polite">${resultStatus}</p>
        <transition
            enter-active-class="transition-opacity ease-in-out duration-200"
            enter-from-class="opacity-0"
            enter-to-class="opacity-100"
            leave-active-class="transition-opacity ease-in-out duration-200"
            leave-from-class="opacity-100"
            leave-to-class="opacity-0">
            <div v-if="expandedDevice"
                 @click="expandedDevice = null"
                 aria-hidden="true"
                 class="fixed inset-0 z-40 bg-gray-900/70 backdrop-blur-sm"></div>
        </transition>
        <div v-if="resultPanels.length"
             ref="results"
             role="region"
             aria-label="Query results"
             class="mb-8 w-full grid grid-cols-1 gap-4 items-start">
            <div v-for="panel in resultPanels" :key="panel.key"
                 :style="expandedDevice === panel.key ? { height: expandedPlaceholder + 'px' } : null">
                <div :data-panel="panel.key"
                     :data-modal="expandedDevice === panel.key ? '' : null"
                     :role="expandedDevice === panel.key ? 'dialog' : null"
                     :aria-modal="expandedDevice === panel.key ? 'true' : null"
                     :class="['bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded overflow-hidden',
                              expandedDevice === panel.key ? 'fixed inset-2 sm:inset-4 z-50 flex flex-col shadow-2xl' : '']">
                    <div class="flex flex-shrink-0 items-stretch">
                        <button type="button"
                                @click="toggleResult(panel.key)"
                                :disabled="expandedDevice === panel.key"
                                :aria-expanded="!panel.collapsed"
                                :class="['flex-1 min-w-0 flex items-center gap-2 px-4 py-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[color:var(--colour-primary)] transition-colors duration-200 ease-in-out',
                                         expandedDevice === panel.key ? 'cursor-default' : 'hover:bg-gray-100 dark:hover:bg-gray-700']">
                            <span v-if="panel.device.country_code"
                                  class="flex-shrink-0 rounded-sm ring-1 ring-gray-900/10 dark:ring-white/10"
                                  :class="'fi fi-' + panel.device.country_code.toLowerCase()"></span>
                            <span class="min-w-0 truncate text-sm font-medium text-gray-800 dark:text-gray-200">${panel.device.display_name || panel.key}</span>
                            <span v-if="panel.device.subtext" class="min-w-0 truncate text-xs text-gray-600 dark:text-gray-400">${panel.device.subtext}</span>
                            <span class="ml-auto flex flex-shrink-0 items-center gap-2 text-gray-500 dark:text-gray-400">
                                <svg v-if="!panel.done" class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" 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 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                                <svg v-else-if="panel.error" class="h-4 w-4 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
                                </svg>
                                <svg v-else class="h-4 w-4 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                                </svg>
                                <svg class="h-4 w-4 transition-transform duration-200"
                                     v-if="expandedDevice !== panel.key"
                                     :class="{'rotate-180': !panel.collapsed}"
                                     xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                                </svg>
                            </span>
                        </button>
                        <button type="button"
                                v-if="panel.output || panel.error"
                                @click="copyResult(panel.key)"
                                :aria-label="'Copy output from ' + (panel.device.display_name || panel.key)"
                                class="px-3 flex items-center text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-gray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[color:var(--colour-primary)] transition-colors duration-200 ease-in-out">
                            <svg v-if="panel.copied" class="h-4 w-4 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                            </svg>
                            <svg v-else class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                            </svg>
                        </button>
                        <button type="button"
                                @click="toggleExpand(panel.key)"
                                :aria-label="(expandedDevice === panel.key ? 'Exit fullscreen view of ' : 'Expand ') + (panel.device.display_name || panel.key)"
                                class="px-3 flex items-center text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-gray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[color:var(--colour-primary)] transition-colors duration-200 ease-in-out">
                            <svg v-if="expandedDevice === panel.key" class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25" />
                            </svg>
                            <svg v-else class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
                            </svg>
                        </button>
                    </div>
                    <div :aria-hidden="panel.collapsed ? 'true' : null"
                         :class="['grid transition-[grid-template-rows] duration-200 ease-in-out',
                                  panel.collapsed ? 'grid-rows-[0fr]' : 'grid-rows-[1fr]',
                                  expandedDevice === panel.key ? 'flex-1 min-h-0' : '']">
                        <div class="overflow-hidden">
                            <pre :class="['p-4 border-t border-gray-200 dark:border-gray-700 text-gray-800 dark:text-gray-300 font-mono text-sm overflow-auto whitespace-pre break-words',
                                          expandedDevice === panel.key ? 'h-full' : 'max-h-96']">${panel.error || panel.output}</pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}