@using Microsoft.AspNetCore.Components.Forms

<div class="create-product-container">
    <EditForm Model="@ProductModel" OnValidSubmit="HandleValidSubmit" class="form-entry-canvas">
        <DataAnnotationsValidator />

        <div class="form-scroll-viewport">
            <div class="form-section-header">
                <span class="panel-title-lbl field-accent-tag">Initialization Sequence</span>
                <p class="text-muted">Register a new asset node into the core product catalog matrix.</p>
            </div>

            <div class="form-grid-layout">

                <div class="form-column">
                    <div class="console-field-group">
                        <label class="console-field-label">Product Name</label>
                        <InputText @bind-Value="ProductModel.Name" placeholder="e.g., Quantum Link Core Subsystem" class="console-input" />
                    </div>

                    <div class="console-field-group">
                        <label class="console-field-label">Telemetry Short Summary</label>
                        <InputText @bind-Value="ProductModel.Summary" placeholder="Brief technical summary tooltip description..." class="console-input" />
                    </div>

                    <div class="console-field-group">
                        <label class="console-field-label">Deep System Description</label>
                        <InputTextArea @bind-Value="ProductModel.Description" rows="5" placeholder="Provide raw configuration guidelines, catalog notes, or full logistical parameters..." class="console-textarea" />
                    </div>
                </div>

                <div class="form-column">
                    <div class="console-field-group">
                        <label class="console-field-label">Primary Engine Asset (Image URL)</label>
                        <div class="input-asset-addon">
                            <InputText @bind-Value="ProductModel.ImageUrl" placeholder="https://assets.litecharms.internal/nodes/primary.png" class="console-input asset-path-input" />
                            <div class="asset-preview-stub">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2" /><circle cx="8.5" cy="8.5" r="1.5" /><polyline points="21 15 16 10 5 21" /></svg>
                            </div>
                        </div>
                    </div>

                    <div class="console-field-group spacing-top-modifier">
                        <label class="console-field-label">
                            Telemetry Media Thumbnails <span class="text-mono node-dim-label">(Max 5 Slots)</span>
                        </label>

                        <div class="thumbnail-deck-grid">
                            @for (int i = 0; i < 5; i++)
                            {
                                var index = i;
                                <div class="thumbnail-slot-node @(HasAssetAt(index) ? "populated" : "empty")">
                                    @if (HasAssetAt(index))
                                    {
                                        <img src="@ProductModel.Thumbnails[index]" alt="Slot @(index + 1)" />
                                        <button type="button" class="btn-clear-slot" @onclick="() => RemoveThumbnailAt(index)">✕</button>
                                    }
                                    else
                                    {
                                        <div class="empty-slot-blueprint">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
                                            <span class="text-mono">0@(index + 1)</span>
                                        </div>
                                    }
                                </div>
                            }
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="form-action-footer">
            <button type="button" class="btn-console-flat">Abort Registers</button>
            <button type="submit" class="btn-apply-filters">Commit Node to Ledger</button>
        </div>
    </EditForm>
</div>

@code {
    private Product ProductModel { get; set; } = new();

    protected override void OnInitialized()
    {
        ProductModel.Active = true;
        ProductModel.Thumbnails ??= new string[0];
    }

    private bool HasAssetAt(int index) =>
        ProductModel.Thumbnails != null && index < ProductModel.Thumbnails.Length && !string.IsNullOrWhiteSpace(ProductModel.Thumbnails[index]);

    private void RemoveThumbnailAt(int index)
    {
        if (ProductModel.Thumbnails == null) return;
        var list = ProductModel.Thumbnails.ToList();
        if (index < list.Count)
        {
            list.RemoveAt(index);
            ProductModel.Thumbnails = list.ToArray();
        }
    }

    private void HandleValidSubmit()
    {
        // Save operation business logic goes here
    }

    public class Product
    {
        public Guid Id { get; set; } = Guid.NewGuid();
        public string? Name { get; set; }
        public string? Summary { get; set; }
        public string? Description { get; set; }
        public string? ImageUrl { get; set; }
        public string[]? Thumbnails { get; set; }
        public bool Active { get; set; }
    }
}