@*
    EN: Dark-themed auth input with label, prefix icon, and action button (e.g., password toggle).
    VI: Input xác thực dark theme với label, icon prefix, và action button (VD: toggle mật khẩu).
*@

<div class="auth-field">
    @if (Label != null || ForgotPasswordLink != null)
    {
        <div class="auth-label-row">
            @if (Label != null)
            {
                <label class="auth-label" for="@InputId">@Label</label>
            }
            @if (ForgotPasswordLink != null)
            {
                <a href="@ForgotPasswordLink" class="auth-label-link">@ForgotPasswordText</a>
            }
        </div>
    }
    <div class="auth-input-wrapper">
        @if (PrefixIcon != null)
        {
            <span class="auth-input-icon">
                <i data-lucide="@PrefixIcon"></i>
            </span>
        }
        <input id="@InputId"
               type="@_currentType"
               class="auth-input @(PrefixIcon == null ? "auth-input--no-icon" : "")"
               placeholder="@Placeholder"
               value="@Value"
               autocomplete="@AutoComplete"
               @oninput="OnInput"
               @onchange="OnChange" />
        @if (InputType == "password")
        {
            <button type="button" class="auth-input-action" @onclick="TogglePassword" title="Toggle password visibility">
                <i data-lucide="@(_showPassword ? "eye-off" : "eye")"></i>
            </button>
        }
    </div>
</div>

@code {
    private bool _showPassword = false;
    private string _currentType => InputType == "password" && _showPassword ? "text" : InputType;

    [Parameter] public string? Label { get; set; }
    [Parameter] public string InputType { get; set; } = "text";
    [Parameter] public string? Placeholder { get; set; }
    [Parameter] public string? Value { get; set; }
    [Parameter] public string? PrefixIcon { get; set; }
    [Parameter] public string? InputId { get; set; }
    [Parameter] public string? AutoComplete { get; set; }
    [Parameter] public string? ForgotPasswordLink { get; set; }
    [Parameter] public string ForgotPasswordText { get; set; } = "Quên mật khẩu?";
    [Parameter] public EventCallback<ChangeEventArgs> ValueChanged { get; set; }

    private async Task OnInput(ChangeEventArgs e)
    {
        Value = e.Value?.ToString();
        await ValueChanged.InvokeAsync(e);
    }

    private async Task OnChange(ChangeEventArgs e)
    {
        Value = e.Value?.ToString();
        await ValueChanged.InvokeAsync(e);
    }

    private void TogglePassword()
    {
        _showPassword = !_showPassword;
    }
}