@page "/login"
@layout AuthLayout
@using BudgetApp.Data.Entities
@using Microsoft.AspNetCore.Authentication
@using Microsoft.AspNetCore.Identity
@inject SignInManager<ApplicationUser> SignInManager
@inject NavigationManager Navigation
@inject IAuthenticationSchemeProvider SchemeProvider

<PageTitle>Budgeteer Beta — Sign In</PageTitle>

<div class="text-center mb-4">
    <span style="font-size: 3rem;">💰</span>
    <h2 class="mt-2 mb-0 fw-bold">Budgeteer <span class="badge bg-warning text-dark" style="font-size: 0.45em; vertical-align: middle;">beta</span></h2>
    <p class="text-muted">Sign in to your account</p>
</div>

<EditForm Model="Model" OnValidSubmit="HandleLogin" FormName="login">
    <DataAnnotationsValidator />

    @if (!string.IsNullOrEmpty(_errorMessage))
    {
        <div class="alert alert-danger">@_errorMessage</div>
    }

    <div class="mb-3">
        <label class="form-label">Email</label>
        <InputText @bind-Value="Model.Email" class="form-control" placeholder="you@example.com" />
        <ValidationMessage For="() => Model.Email" />
    </div>

    <div class="mb-3">
        <label class="form-label">Password</label>
        <InputText @bind-Value="Model.Password" type="password" class="form-control" />
        <ValidationMessage For="() => Model.Password" />
    </div>

    <button type="submit" class="btn btn-primary w-100">Sign In</button>
</EditForm>

@if (_externalProviders.Count > 0)
{
    <hr class="my-4" />
    <p class="text-center text-muted mb-3">Or sign in with</p>
    <div class="d-flex flex-column gap-2">
        @foreach (var provider in _externalProviders)
        {
            <form method="post" action="/api/auth/external-login">
                <input type="hidden" name="provider" value="@provider.Name" />
                <input type="hidden" name="returnUrl" value="/" />
                <input type="hidden" name="__RequestVerificationToken" value="@_antiforgeryToken" />
                <button type="submit" class="btn btn-outline-secondary w-100 d-flex align-items-center justify-content-center gap-2">
                    @GetProviderIcon(provider.DisplayName ?? provider.Name)
                    <span>@(provider.DisplayName ?? provider.Name)</span>
                </button>
            </form>
        }
    </div>
}

<p class="text-center mt-3">
    Don't have an account? <a href="/register">Register</a>
</p>