@using AliasVault.Client.Main.Models
@using AliasClientDb.Models
@using ItemTypeClass = AliasClientDb.Models.ItemType
@using Microsoft.Extensions.Localization

@inject IStringLocalizerFactory LocalizerFactory

<div class="relative mb-4">
    <div class="w-full px-4 py-3 bg-primary-50 dark:bg-primary-900/20 border border-primary-200 dark:border-primary-800 rounded-lg flex items-center gap-2">
        <button type="button"
                @onclick="ToggleDropdown"
                @onclick:preventDefault="true"
                class="flex-1 flex items-center justify-between hover:opacity-80 transition-opacity">
            <div class="flex items-center gap-2">
                <span class="text-primary-600 dark:text-primary-400">
                    @GetTypeIcon(SelectedType)
                </span>
                <span class="text-primary-700 dark:text-primary-300 font-medium text-sm">
                    @(IsEditMode ? Localizer["Editing"] : Localizer["Creating"]) @GetTypeDisplayName(SelectedType)
                </span>
            </div>
            <svg class="w-4 h-4 text-primary-500 transition-transform @(ShowDropdown ? "rotate-180" : "")"
                 fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg>
        </button>
        @if (SelectedType == ItemType.Alias && !IsEditMode && OnRegenerateAlias.HasDelegate)
        {
            <button type="button"
                    @onclick="HandleRegenerate"
                    @onclick:preventDefault="true"
                    class="flex-shrink-0 p-1.5 text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 hover:bg-primary-100 dark:hover:bg-primary-900/40 rounded transition-colors"
                    title="@Localizer["RegenerateAlias"]">
                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M23 4v6h-6"/>
                    <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
                </svg>
            </button>
        }
    </div>

    @if (ShowDropdown)
    {
        <div class="fixed inset-0 z-10" @onclick="CloseDropdown"></div>
        <div class="absolute z-20 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden">
            @foreach (var itemType in ItemType.All)
            {
                <button type="button"
                        id="itemTypeSelector_@itemType"
                        @onclick="() => SelectType(itemType)"
                        @onclick:preventDefault="true"
                        class="w-full px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-gray-700 flex items-center gap-3 border-b border-gray-100 dark:border-gray-700 last:border-b-0 @(SelectedType == itemType ? "bg-primary-50 dark:bg-primary-900/20 text-primary-700 dark:text-primary-300" : "text-gray-900 dark:text-white")">
                    <span class="@(SelectedType == itemType ? "text-primary-600 dark:text-primary-400" : "text-gray-500 dark:text-gray-400")">
                        @GetTypeIcon(itemType)
                    </span>
                    <span class="font-medium">
                        @GetTypeDisplayName(itemType)
                    </span>
                    @if (SelectedType == itemType)
                    {
                        <svg class="w-5 h-5 ml-auto text-primary-600 dark:text-primary-400" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                        </svg>
                    }
                </button>
            }
        </div>
    }
</div>

@code {
    private IStringLocalizer Localizer => LocalizerFactory.Create("Components.Main.Items.ItemTypeSelector", "AliasVault.Client");

    /// <summary>
    /// The currently selected item type.
    /// </summary>
    [Parameter]
    public string SelectedType { get; set; } = ItemTypeClass.Login;

    /// <summary>
    /// Callback when item type changes.
    /// </summary>
    [Parameter]
    public EventCallback<string> SelectedTypeChanged { get; set; }

    /// <summary>
    /// Whether we are in edit mode (disables type switching).
    /// </summary>
    [Parameter]
    public bool IsEditMode { get; set; }

    /// <summary>
    /// Whether the dropdown is currently shown.
    /// </summary>
    [Parameter]
    public bool ShowDropdown { get; set; }

    /// <summary>
    /// Callback when dropdown visibility changes.
    /// </summary>
    [Parameter]
    public EventCallback<bool> ShowDropdownChanged { get; set; }

    /// <summary>
    /// Callback when regenerate alias button is clicked.
    /// </summary>
    [Parameter]
    public EventCallback OnRegenerateAlias { get; set; }

    private async Task ToggleDropdown()
    {
        ShowDropdown = !ShowDropdown;
        await ShowDropdownChanged.InvokeAsync(ShowDropdown);
    }

    private async Task CloseDropdown()
    {
        ShowDropdown = false;
        await ShowDropdownChanged.InvokeAsync(false);
    }

    private async Task SelectType(string itemType)
    {
        if (SelectedType != itemType)
        {
            SelectedType = itemType;
            await SelectedTypeChanged.InvokeAsync(itemType);
        }
        await CloseDropdown();
    }

    private async Task HandleRegenerate()
    {
        await OnRegenerateAlias.InvokeAsync();
    }

    private string GetTypeDisplayName(string itemType)
    {
        return itemType switch
        {
            ItemType.Login => Localizer["TypeLogin"],
            ItemType.Alias => Localizer["TypeAlias"],
            ItemType.CreditCard => Localizer["TypeCreditCard"],
            ItemType.Note => Localizer["TypeNote"],
            _ => itemType
        };
    }

    private static MarkupString GetTypeIcon(string itemType)
    {
        var svg = itemType switch
        {
            ItemType.Login => """<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" /></svg>""",
            ItemType.Alias => """<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>""",
            ItemType.CreditCard => """<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" /></svg>""",
            ItemType.Note => """<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>""",
            _ => """<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>"""
        };
        return new MarkupString(svg);
    }
}
