@php
    $iconMappings = [
        'ubuntu' => 'ubuntu',
        'debian' => 'debian',
        'centos' => 'centos',
        'alpine' => 'alpine',
        'freebsd' => 'freebsd',
        'openbsd' => 'openbsd',
        'fedora' => 'fedora',
        'arch' => 'archlinux',
        'opensuse' => 'opensuse',
        'suse' => 'opensuse',
        'gentoo' => 'gentoo',
        'oracle' => null,
        'alma' => 'almalinux',
        'rocky' => 'rocky-linux',
        'clear' => null,
        'rhel' => 'redhat',
        'red hat' => 'redhat',
        'open cloud' => null,
        'nethserver' => null,
        'alt linux' => null,
        'amazon' => null,
        'windows' => null,
    ];

    $iconOverrides = [
        'proxmox' => asset('assets/os/proxmox.png'),
        'amazon linux' => asset('assets/os/amazonlinux.png'),
        'amazonlinux' => asset('assets/os/amazonlinux.png'),
        'windows' => asset('assets/os/WIN.png'),
        'oracle' => asset('assets/os/tux.svg'),
        'clear' => asset('assets/os/tux.svg'),
        'nethserver' => asset('assets/os/tux.svg'),
        'open cloud' => asset('assets/os/tux.svg'),
        'alt linux' => asset('assets/os/tux.svg'),
    ];

    $badgeLabels = [
        'ubuntu 24.04 (recommended)' => 'Recommended',
    ];

    $defaultIcon = asset('assets/os/tux.svg');

    $categoryDefinitions = [
        'Ubuntu' => ['ubuntu'],
        'Debian' => ['debian'],
        'CentOS' => ['centos'],
        'Enterprise / RHEL Family' => ['rhel', 'alma', 'rocky', 'oracle'],
        'Community & Rolling' => ['fedora', 'arch', 'opensuse', 'gentoo', 'clear', 'alt linux'],
        'Cloud & Appliances' => ['amazon', 'open cloud', 'nethserver'],
        'Lightweight' => ['alpine'],
        'BSD Family' => ['freebsd', 'netbsd', 'openbsd', 'dragonfly'],
        'Proxmox Hypervisor' => ['proxmox'],
        'Windows Server' => ['windows'],
        'Other OS' => [],
    ];

    $sortedOs = $osList->sortBy(fn ($os) => strtolower($os->name), SORT_NATURAL);

    $groupedOs = [];
    foreach ($categoryDefinitions as $label => $keywords) {
        $groupedOs[$label] = [];
    }

    foreach ($sortedOs as $template) {
        $normalized = \Illuminate\Support\Str::lower($template->name);
        $matchedLabel = 'Other OS';
        foreach ($categoryDefinitions as $label => $keywords) {
            foreach ($keywords as $keyword) {
                if ($keyword && \Illuminate\Support\Str::contains($normalized, $keyword)) {
                    $matchedLabel = $label;
                    break 2;
                }
            }
        }
        $groupedOs[$matchedLabel][] = $template;
    }

    $groupedOs = collect($groupedOs)->filter(fn ($items) => count($items) > 0);
@endphp

<div x-data="{
        open: false,
        activeSection: null,
        pendingSection: null,
        transitionDelay: 220,
        osSearch: '',
        toggleSection(key) {
            if (this.activeSection === key) {
                this.activeSection = null;
                return;
            }

            if (this.activeSection) {
                this.pendingSection = key;
                this.activeSection = null;
                this.$nextTick(() => {
                    setTimeout(() => {
                        this.activeSection = this.pendingSection;
                        this.pendingSection = null;
                    }, this.transitionDelay);
                });

                return;
            }

            this.activeSection = key;
        },
        matchesSearch(name) {
            if (!this.osSearch.trim()) return true;
            return name.toLowerCase().includes(this.osSearch.trim().toLowerCase());
        },
        categoryHasMatch(categoryEl) {
            if (!this.osSearch.trim()) return true;
            const labels = categoryEl.querySelectorAll('[data-os-name]');
            return Array.from(labels).some(el => this.matchesSearch(el.dataset.osName));
        }
    }">
    @if($isProtected)
        <x-button.danger 
            @click="open = true"
            disabled
            title="Reinstall is disabled: This server is protected in Proxmox">
            Reinstall
        </x-button.danger>
    @else
        <x-button.danger @click="open = true">
            Reinstall
        </x-button.danger>
    @endif

    <template x-if="open">
        <div class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 overflow-y-auto">
            <div class="relative bg-background-secondary rounded-2xl p-6 w-full max-w-4xl shadow-2xl border border-neutral/30 my-8">
                <div class="flex flex-col gap-2 mb-6">
                    <h2 class="text-2xl font-semibold text-base">Reinstall Server</h2>
                    @if($isProtected)
                        <div class="bg-warning/10 border border-warning/30 rounded-lg p-3 mb-2">
                            <p class="text-sm text-warning font-semibold flex items-center gap-2">
                                <x-ri-error-warning-line class="size-4" />
                                This server has the ability to reinstall disabled. Please contact support to enable reinstall.
                            </p>
                        </div>
                    @endif
                    <p class="text-sm text-base/70">Choose a new operating system. The selected template will be installed from scratch.</p>
                </div>

                <!-- OS Search Filter -->
                <div class="relative mb-4">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <x-ri-search-line class="size-4 text-base/40" />
                    </div>
                    <input type="text"
                           x-model="osSearch"
                           placeholder="Search operating systems..."
                           class="w-full pl-10 pr-4 py-2.5 text-sm rounded-lg border border-neutral bg-background focus:ring-2 focus:ring-primary/25 focus:border-primary transition-colors"
                           @if($isProtected) disabled @endif />
                    <div x-show="osSearch.length > 0" x-transition class="absolute inset-y-0 right-0 pr-3 flex items-center">
                        <button @click="osSearch = ''" type="button" class="text-base/40 hover:text-base/60 transition-colors">
                            <x-ri-close-line class="size-4" />
                        </button>
                    </div>
                </div>

                <div class="space-y-3 max-h-[460px] overflow-y-auto pr-1" @if($isProtected) style="pointer-events: none; opacity: 0.6;" @endif>
                    @if($groupedOs->isEmpty())
                        <div class="flex flex-col items-center justify-center py-12 text-center">
                            <div class="w-16 h-16 rounded-full bg-warning/10 flex items-center justify-center mb-4">
                                <x-ri-error-warning-line class="size-8 text-warning" />
                            </div>
                            <h3 class="text-lg font-semibold text-base/90 mb-2">No Templates Available</h3>
                            <p class="text-sm text-base/60 max-w-md">
                                No operating system templates are configured for this server type. 
                                Please contact support to have templates added.
                            </p>
                        </div>
                    @else
                    @foreach($groupedOs as $categoryLabel => $templates)
                        @php
                            $categoryKey = \Illuminate\Support\Str::slug($categoryLabel);
                        @endphp
                        <div class="border border-neutral/40 rounded-xl overflow-hidden" wire:key="os-category-{{ $categoryKey }}"
                             x-ref="category_{{ $categoryKey }}"
                             x-show="categoryHasMatch($refs.category_{{ $categoryKey }})"
                             x-init="$watch('osSearch', () => { if (osSearch.trim() && categoryHasMatch($refs.category_{{ $categoryKey }})) { activeSection = '{{ $categoryKey }}'; } })">
                            <button type="button" class="w-full flex items-center justify-between px-4 py-3 bg-background-secondary/60 hover:bg-background-secondary transition"
                                @click="toggleSection('{{ $categoryKey }}')">
                                <div class="flex items-center gap-3">
                                    <x-ri-stack-line class="size-4 text-primary" />
                                    <span class="font-semibold text-base">{{ $categoryLabel }}</span>
                                    <span class="text-xs text-base/60">({{ count($templates) }})</span>
                                </div>
                                <x-ri-arrow-down-s-line class="size-5 transition-transform duration-200"
                                    x-bind:class="{ 'rotate-180': activeSection === '{{ $categoryKey }}' }"></x-ri-arrow-down-s-line>
                            </button>

                            <div class="px-4 pb-4 pt-2 bg-background-secondary"
                                x-show="activeSection === '{{ $categoryKey }}'"
                                x-collapse.duration.200ms>
                                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                        @foreach($templates as $template)
                            @php
                                $normalized = \Illuminate\Support\Str::lower($template->name);
                                $iconCode = null;
                                foreach ($iconMappings as $keyword => $code) {
                                    if (\Illuminate\Support\Str::contains($normalized, $keyword)) {
                                        $iconCode = $code;
                                        break;
                                    }
                                }
                                $iconPath = $defaultIcon;
                                $iconOverridePath = null;
                                foreach ($iconOverrides as $keyword => $path) {
                                    if (\Illuminate\Support\Str::contains($normalized, $keyword)) {
                                        $iconOverridePath = $path;
                                        break;
                                    }
                                }
                                if ($iconOverridePath) {
                                    $iconPath = $iconOverridePath;
                                } elseif ($iconCode) {
                                    $iconPath = asset('assets/os/' . $iconCode . '.svg');
                                }
                                $badge = $badgeLabels[$normalized] ?? null;
                                $isSelected = (string) $template->id === (string) ($os ?? '');
                            @endphp
                            <label wire:key="os-card-{{ $template->id }}"
                                data-os-name="{{ $template->name }}"
                                x-show="matchesSearch('{{ addslashes($template->name) }}')"
                                x-transition
                                class="relative flex items-center gap-4 rounded-xl border p-4 cursor-pointer transition-all duration-150
                                    @if($isSelected) border-primary bg-primary/5 ring-2 ring-primary/40 shadow-lg @else border-neutral/60 hover:border-primary/60 @endif">
                                <input type="radio" class="sr-only" wire:model.live="os" value="{{ $template->id }}">
                                <div class="shrink-0">
                                    <img src="{{ $iconPath ?? $defaultIcon }}" alt="{{ $template->name }} logo"
                                        class="size-12 rounded-lg border border-neutral/30 bg-background-secondary object-contain p-1">
                                </div>
                                <div class="flex flex-col">
                                    <span class="font-semibold text-base">{{ $template->name }}</span>
                                    <span class="text-xs text-base/60">Template ID: {{ $template->id }}</span>
                                    @if($badge)
                                        <span class="mt-1 inline-flex items-center gap-1 text-[11px] font-semibold uppercase tracking-wide text-secondary">
                                            <x-ri-star-smile-fill class="size-3" /> {{ $badge }}
                                        </span>
                                    @endif
                                </div>
                                @if($isSelected)
                                    <x-ri-check-line class="absolute top-3 right-3 size-5 text-primary" />
                                @endif
                            </label>
                        @endforeach
                                </div>
                            </div>
                        </div>
                    @endforeach
                    @endif
                </div>

                <div class="mt-4 pt-4 border-t border-neutral/30">
                    @if($isProtected)
                        <x-form.checkbox
                            label="I confirm that I want to proceed with reinstalling this server, which will permanently erase all existing data, configurations, and applications. This action is irreversible and cannot be undone."
                            wire:model="confirmReinstall"
                            name="confirmReinstall"
                            required
                            disabled
                        />
                    @else
                        <x-form.checkbox
                            label="I confirm that I want to proceed with reinstalling this server, which will permanently erase all existing data, configurations, and applications. This action is irreversible and cannot be undone."
                            wire:model="confirmReinstall"
                            name="confirmReinstall"
                            required
                        />
                    @endif
                </div>

                <div class="flex flex-row gap-4 mt-6">
                    <x-button.secondary @click="open = false">Cancel</x-button.secondary>

                    @if($isProtected)
                        <x-button.danger
                            wire:click="reinstall"
                            wire:loading.attr="disabled"
                            wire:loading.class="opacity-50"
                            wire:target="reinstall"
                            disabled
                            title="Reinstall is disabled: This server is protected in Proxmox"
                        >
                            <x-loading target="reinstall" />
                            <div wire:loading.remove wire:target="reinstall">Reinstall</div>
                        </x-button.danger>
                    @else
                        <x-button.danger
                            wire:click="reinstall"
                            wire:loading.attr="disabled"
                            wire:loading.class="opacity-50"
                            wire:target="reinstall"
                        >
                            <x-loading target="reinstall" />
                            <div wire:loading.remove wire:target="reinstall">Reinstall</div>
                        </x-button.danger>
                    @endif
                </div>

                <!-- Reinstall Progress Overlay -->
                <div wire:loading wire:target="reinstall" class="absolute inset-0 bg-background-secondary/90 backdrop-blur-sm rounded-2xl z-10 flex flex-col items-center justify-center gap-4">
                    <div class="flex items-center justify-center w-16 h-16 rounded-2xl bg-primary/10">
                        <x-ri-loader-4-line class="size-8 text-primary animate-spin" />
                    </div>
                    <div class="text-center">
                        <h3 class="text-base font-semibold text-base/90">Installing Operating System</h3>
                        <p class="text-sm text-base/60 mt-1">This may take a few minutes. Please do not close this window.</p>
                    </div>
                </div>
            </div>
        </div>
    </template>
</div>