@using Commerce.Contracts.DTOs

<div class="category-tree-node mb-2">
    <!-- Category Card -->
    <div
        class="flex items-center gap-3 bg-base-100 hover:bg-base-200 border border-base-300 rounded-xl p-2 transition-all shadow-sm group flex-shrink-0 w-80">
        <!-- Square Image -->
        <div class="w-10 h-10 rounded-lg bg-base-300 flex-shrink-0 overflow-hidden shadow-inner">
            @if (Category.Photos?.Any() == true)
            {
                <img src="@Category.Photos[0]" alt="@Category.Translations?.FirstOrDefault()?.Info?.Name ?? string.Empty)" class="w-full h-full object-cover" />
            }
            else
            {
                <div class="flex items-center justify-center h-full opacity-20">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>
                </div>
            }
        </div>

        <!-- Name and Badge -->
        <div class="flex-grow flex items-center justify-between">
            <div class="flex flex-col">
                <span class="font-bold text-sm text-base-content tracking-tight">@Category.Translations?.FirstOrDefault()?.Info?.Name ?? string.Empty)</span>
                @if (Category.IsBundle)
                {
                    <span class="text-[9px] uppercase font-black text-primary tracking-widest leading-none">Bundle</span>
                }
            </div>

            <!-- Actions -->
            <div class="flex items-center gap-1">
                @if (IsAdmin)
                {
                    <button type="button" @onclick="() => OnEdit.InvokeAsync(Category)"
                        class="btn btn-ghost btn-xs btn-circle opacity-0 group-hover:opacity-100 transition-opacity">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                        </svg>
                    </button>
                }
                else
                {
                    <a href="/shop?categoryId=@Category.Id"
                        class="btn btn-primary btn-xs rounded-lg group-hover:shadow-md transition-all">
                        Visit
                    </a>
                }

                @if (Category.ChildCategories?.Any() == true)
                {
                    <button type="button" @onclick="ToggleExpand"
                        class="btn btn-ghost btn-xs btn-circle transition-transform duration-300 @(_expanded ? "rotate-90" : "")">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                    </button>
                }
                else
                {
                    <div class="w-6 h-6"></div> @* Spacer to align cards *@
                }
            </div>
        </div>
    </div>

    <!-- Recursive Children -->
    @if (_expanded && Category.ChildCategories?.Any() == true)
    {
        <div class="ml-10 mt-2 border-l-2 border-base-300 pl-4 animate-in slide-in-from-left-2 duration-200">
            @foreach (var child in Category.ChildCategories)
            {
                <CategoryTreeItem Category="child" OnEdit="OnEdit" IsAdmin="IsAdmin" />
            }
        </div>
    }
</div>

@code {
    [Parameter] public CategoryVM Category { get; set; } = new();
    [Parameter] public EventCallback<CategoryVM> OnEdit { get; set; }
    [Parameter] public bool IsAdmin { get; set; } = true;

    private bool _expanded = false;

    private void ToggleExpand() => _expanded = !_expanded;
}