@using Microsoft.AspNetCore.Components
@using System.Collections.Generic
@using Microsoft.AspNetCore.Components.Web

<div class="grid grid-cols-[repeat(auto-fill,minmax(110px,1fr))] gap-3 py-4">
    @foreach (var item in Items)
    {
        <MediaItemCard Item="@item" OnRemove="@OnRemove" OnEdit="@OnEdit" OnDragStart="@HandleDragStart"
            OnDragEnter="@HandleDragEnter" OnDragEnd="@HandleDragEnd" @key="item.Id" />
        <!-- Key is crucial for correct blazor diffing during reorder -->
    }

    @if (AppendContent != null)
    {
        <div class="h-full min-h-[9rem]"> <!-- Match Card Height logic -->
            @AppendContent
        </div>
    }
</div>

@code {
    [Parameter] public List<MediaItemModel> Items { get; set; }
    [Parameter] public EventCallback<MediaItemModel> OnRemove { get; set; }
    [Parameter] public EventCallback<MediaItemModel> OnEdit { get; set; }
    [Parameter] public EventCallback<List<MediaItemModel>> OnSort { get; set; }
    [Parameter] public RenderFragment? AppendContent { get; set; }

    private MediaItemModel? _dragPayload;

    private void HandleDragStart(MediaItemModel item)
    {
        _dragPayload = item;
    }

    private void HandleDragEnd()
    {
        _dragPayload = null;
    }

    private void HandleDragEnter(MediaItemModel targetItem)
    {
        if (_dragPayload == null || targetItem == _dragPayload) return;

        var oldIndex = Items.IndexOf(_dragPayload);
        var newIndex = Items.IndexOf(targetItem);

        if (oldIndex != -1 && newIndex != -1)
        {
            // Remove and insert
            Items.RemoveAt(oldIndex);
            Items.Insert(newIndex, _dragPayload);

            // Notify parent
            OnSort.InvokeAsync(Items);
        }
    }
}