{{--
    resources/views/components/category-tree-accordion.blade.php

    Recursive accordion for AdvertiseType::buildTree() output.
    Requires --color-primary-50 ... --color-primary-900 defined in app.css
    and mapped in tailwind.config as colors.primary.{50..900} (or Tailwind v4
    @theme with --color-primary-*, which works out of the box).

    Usage:
        <x-category-tree-accordion :categories="\App\Models\AdvertiseType::buildTree()" />

    Listening for a selection (e.g. in a parent Alpine/Livewire component):
        <div x-data @category-selected.window="console.log($event.detail)">
            <x-category-tree-accordion :categories="$tree" />
        </div>

    Or with Livewire:
        <div x-on:category-selected.window="$wire.set('category_id', $event.detail.id)">
            <x-category-tree-accordion :categories="$tree" />
        </div>

    Links:
        Each node links to a filtered listing:
            /?filter[category_id]={id}
        Change the base path via the `base-url` prop if you don't want it on `/`.
        <x-category-tree-accordion :categories="$tree" base-url="/ads" />
--}}

@props([
    'categories' => [],
    'level' => 0,
    'baseUrl' => '/',
])

<ul
    {{ $attributes->merge(['class' => $level === 0 ? 'w-full text-sm select-none' : 'w-full']) }}
    @if($level === 0) dir="rtl" @endif
>
    @foreach ($categories as $category)
        @php
            $hasChildren = !empty($category['children']);
            $indent = $level * 16; // px, applied as padding-inline-start
            $href = rtrim($baseUrl, '/') . '/?' . http_build_query(['filter' => ['category_id' => $category['id']]]);
        @endphp

        <li
            x-data="{ open: false }"
            class="border-b border-primary-100 last:border-b-0"
        >
            <div
                @if ($hasChildren) @click="open = !open" @endif
            :class="open ? 'bg-primary-50 text-primary-700' : 'text-gray-700 hover:bg-primary-50/60 hover:text-primary-600'"
                class="flex items-center gap-2 py-2.5 pe-3 {{ $hasChildren ? 'cursor-pointer' : '' }} transition-colors duration-150 rounded-md"
                style="padding-inline-start: {{ $indent + 12 }}px"
            >
                {{-- Chevron (only for parents, toggles accordion) --}}
                @if ($hasChildren)
                    <svg
                        class="w-4 h-4 shrink-0 text-primary-400 transition-transform duration-200"
                        :style="open ? 'transform: rotate(-90deg)' : 'transform: rotate(90deg)'"
                        fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"
                    >
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5"/>
                    </svg>
                @else
                    <span class="w-4 h-4 shrink-0"></span>
                @endif

                {{-- Icon / image --}}
                @if (!empty($category['image']))
                    <img
                        src="{{ $category['image'] }}"
                        alt="{{ $category['name'] }}"
                        class="w-6 h-6 rounded-md object-cover shrink-0 bg-primary-50 ring-1 ring-primary-100"
                        loading="lazy"
                    />
                @else
                    @if ($hasChildren)
                        <span class="w-6 h-6 rounded-md shrink-0 bg-primary-100 flex items-center justify-center text-primary-400 text-xs">
                            {{ mb_substr($category['name'], 0, 1) }}
                        </span>
                    @else
                        <a href="{{ $href }}" class="w-6 h-6 rounded-md shrink-0 bg-primary-100 flex items-center justify-center text-primary-400 text-xs">
                            {{ mb_substr($category['name'], 0, 1) }}
                        </a>
                    @endif
                @endif

                @if($hasChildren)
                    {{-- Name — always a real link, doesn't trigger the toggle --}}
                    <span class="flex-1 truncate font-medium hover:text-primary-600">
                        {{ $category['name'] }}
                    </span>
                @else
                    <a href="{{ $href }}" class="flex-1 truncate font-medium hover:text-primary-600">
                        {{ $category['name'] }}
                    </a>
                @endif

                {{-- Children count badge + "see all" link --}}
                @if ($hasChildren)
                    <a
                        href="{{ $href }}"
                        @click.stop
                        :class="open ? 'text-primary-700' : 'text-primary-500'"
                        class="text-xs font-medium hover:underline underline-offset-2 whitespace-nowrap"
                    >
                        مشاهده همه
                    </a>
                    <span
                        :class="open ? 'bg-primary-200 text-primary-800' : 'bg-primary-100 text-primary-600'"
                        class="text-xs font-semibold rounded-full px-2 py-0.5 transition-colors duration-150"
                    >
                        {{ count($category['children']) }}
                    </span>
                @endif
            </div>

            {{-- Children (recursive) --}}
            @if ($hasChildren)
                <ul
                    x-show="open"
                    x-collapse
                    x-cloak
                    class="border-t border-primary-50"
                >
                    <x-alizam.category-tree-accordion
                        :categories="$category['children']"
                        :level="$level + 1"
                        :base-url="$baseUrl"
                    />
                </ul>
            @endif
        </li>
    @endforeach
</ul>