@props(['items' => [], 'theme' => 'light'])

@php
$resolveUrl = function (?string $route): string {
    if (! $route) {
        return '#';
    }

    if (str_starts_with($route, 'http://') || str_starts_with($route, 'https://')) {
        return $route;
    }

    if (str_contains($route, '/')) {
        return url($route);
    }

    return \Illuminate\Support\Facades\Route::has($route) ? route($route) : url($route);
};

$isItemActive = function (array $item) {
    $route = $item['route'] ?? null;
    $active = false;

    if ($route) {
        if (str_contains($route, '/')) {
            $active = request()->is(trim($route, '/').'*');
        } else {
            $active = request()->routeIs($route) || request()->routeIs($route.'.*');
        }
    }

    foreach (($item['children'] ?? []) as $child) {
        $childRoute = $child['route'] ?? null;
        if (! $childRoute) {
            continue;
        }

        if (str_contains($childRoute, '/')) {
            $active = $active || request()->is(trim($childRoute, '/').'*');
        } else {
            $active = $active || request()->routeIs($childRoute) || request()->routeIs($childRoute.'.*');
        }
    }

    return $active;
};

$isDark = $theme === 'dark';
$isAdaptive = $theme === 'adaptive';

$mobileButtonClass = $isAdaptive
    ? 'mb-4 inline-flex h-10 w-10 items-center justify-center rounded-xl border border-slate-200 text-slate-600 md:hidden dark:border-slate-700 dark:text-slate-200'
    : ($isDark
        ? 'mb-4 inline-flex h-10 w-10 items-center justify-center rounded-xl border border-slate-700 text-slate-200 md:hidden'
        : 'mb-4 inline-flex h-10 w-10 items-center justify-center rounded-xl border border-slate-200 text-slate-600 md:hidden');

$sidebarShellClass = $isAdaptive
    ? 'fixed inset-y-0 left-0 z-50 w-72 -translate-x-full transform border-r border-slate-200 bg-white p-4 transition-transform duration-300 dark:border-slate-800 dark:bg-slate-900 md:static md:w-full md:translate-x-0 md:border-r-0 md:bg-transparent md:p-0'
    : ($isDark
        ? 'fixed inset-y-0 left-0 z-50 w-72 -translate-x-full transform border-r border-slate-800 bg-slate-900 p-4 transition-transform duration-300 md:static md:w-full md:translate-x-0 md:border-r-0 md:bg-transparent md:p-0'
        : 'fixed inset-y-0 left-0 z-50 w-72 -translate-x-full transform border-r border-slate-200 bg-white p-4 transition-transform duration-300 md:static md:w-full md:translate-x-0 md:border-r-0 md:bg-transparent md:p-0');

$mobileTitleClass = $isAdaptive
    ? 'text-sm font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-300'
    : ($isDark
        ? 'text-sm font-semibold uppercase tracking-wide text-slate-300'
        : 'text-sm font-semibold uppercase tracking-wide text-slate-500');

$mobileCloseClass = $isAdaptive
    ? 'rounded-lg p-2 text-slate-500 dark:text-slate-300'
    : ($isDark
        ? 'rounded-lg p-2 text-slate-300'
        : 'rounded-lg p-2 text-slate-500');

$activeItemClass = $isAdaptive
    ? 'border-primary-500 bg-primary-50 text-primary-700 dark:border-primary-400 dark:bg-slate-800 dark:text-primary-300'
    : ($isDark
        ? 'border-primary-400 bg-slate-800 text-primary-300'
        : 'border-primary-500 bg-primary-50 text-primary-700');

$inactiveItemClass = $isAdaptive
    ? 'border-transparent text-slate-600 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-white'
    : ($isDark
        ? 'border-transparent text-slate-300 hover:bg-slate-800 hover:text-white'
        : 'border-transparent text-slate-600 hover:bg-slate-100 hover:text-slate-900');

$activeChildClass = $isAdaptive
    ? 'bg-primary-100 text-primary-700 dark:bg-slate-800 dark:text-primary-300'
    : ($isDark
        ? 'bg-slate-800 text-primary-300'
        : 'bg-primary-100 text-primary-700');

$inactiveChildClass = $isAdaptive
    ? 'text-slate-500 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-white'
    : ($isDark
        ? 'text-slate-300 hover:bg-slate-800 hover:text-white'
        : 'text-slate-500 hover:bg-slate-100 hover:text-slate-900');
@endphp

<div x-data="{ mobileOpen: false }" class="h-full">
    <button
        type="button"
        class="{{ $mobileButtonClass }}"
        x-on:click="mobileOpen = true"
        aria-label="Open menu"
    >
        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
    </button>

    <div x-show="mobileOpen" x-transition class="fixed inset-0 z-40 bg-black/50 md:hidden" x-on:click="mobileOpen = false"></div>

    <aside
        class="{{ $sidebarShellClass }}"
        :class="mobileOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'"
    >
        <div class="mb-4 flex items-center justify-between md:hidden">
            <span class="{{ $mobileTitleClass }}">Navigation</span>
            <button type="button" class="{{ $mobileCloseClass }}" x-on:click="mobileOpen = false">
                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>

        <nav class="space-y-1">
            @foreach($items as $item)
                @php
                    $children = $item['children'] ?? [];
                    $active = $isItemActive($item);
                    $itemUrl = $resolveUrl($item['route'] ?? null);
                @endphp

                @if(empty($children))
                    <a
                        href="{{ $itemUrl }}"
                        class="group flex items-center gap-3 rounded-xl border-l-4 px-3 py-2 text-sm font-medium transition-colors {{ $active ? $activeItemClass : $inactiveItemClass }}"
                    >
                        <span class="h-5 w-5 text-current">{!! $item['icon'] ?? '' !!}</span>
                        <span class="flex-1">{{ $item['label'] ?? 'Item' }}</span>
                        @if(!empty($item['badge']))
                            <x-badge variant="info">{{ $item['badge'] }}</x-badge>
                        @endif
                    </a>
                @else
                    <div x-data="{ open: {{ $active ? 'true' : 'false' }} }">
                        <button
                            type="button"
                            class="group flex w-full items-center gap-3 rounded-xl border-l-4 px-3 py-2 text-left text-sm font-medium transition-colors {{ $active ? $activeItemClass : $inactiveItemClass }}"
                            x-on:click="open = !open"
                        >
                            <span class="h-5 w-5 text-current">{!! $item['icon'] ?? '' !!}</span>
                            <span class="flex-1">{{ $item['label'] ?? 'Item' }}</span>
                            <svg class="h-4 w-4 transition-transform" :class="open ? 'rotate-180' : ''" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
                            </svg>
                        </button>

                        <div x-show="open" x-transition class="mt-1 space-y-1 pl-9">
                            @foreach($children as $child)
                                @php
                                    $childRoute = $child['route'] ?? null;
                                    $childActive = $childRoute
                                        ? (str_contains($childRoute, '/')
                                            ? request()->is(trim($childRoute, '/').'*')
                                            : (request()->routeIs($childRoute) || request()->routeIs($childRoute.'.*')))
                                        : false;
                                @endphp
                                <a
                                    href="{{ $resolveUrl($childRoute) }}"
                                    class="block rounded-lg px-3 py-2 text-sm transition-colors {{ $childActive ? $activeChildClass : $inactiveChildClass }}"
                                >
                                    {{ $child['label'] ?? 'Sub Item' }}
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif
            @endforeach
        </nav>
    </aside>
</div>