@page "/login"
@using FinControl.Web.Services
@inject AuthStateProvider AuthStateProvider
@inject INotificationService NotificationService
@inject NavigationManager NavigationManager

<PageTitle>Login - FinControl</PageTitle>

<div class="login-container">
    <div class="login-box">
        <div class="login-header text-center mb-4">
            <div class="logo-circle mb-3">
                <i class="bi bi-wallet2"></i>
            </div>
            <h2>FinControl</h2>
            <p class="text-muted">Gestão Financeira Inteligente</p>
        </div>

        <form @onsubmit="HandleLogin">
            <div class="mb-3">
                <label class="form-label">Email</label>
                <input type="email"
                       class="form-control form-control-lg @(HasError(nameof(email)) ? "is-invalid" : "")"
                       placeholder="seu@email.com"
                       @bind="email"
                       @bind:event="oninput"
                       @onchange="() => ValidateEmail()"
                       disabled="@isLoading"
                       required />
                @if (HasError(nameof(email)))
                {
                    <div class="invalid-feedback d-block">
                        @GetError(nameof(email))
                    </div>
                }
            </div>

            <div class="mb-3">
                <label class="form-label">Senha</label>
                <input type="password"
                       class="form-control form-control-lg @(HasError(nameof(senha)) ? "is-invalid" : "")"
                       placeholder="Digite sua senha"
                       @bind="senha"
                       @bind:event="oninput"
                       @onchange="() => ValidateSenha()"
                       disabled="@isLoading"
                       required />
                @if (HasError(nameof(senha)))
                {
                    <div class="invalid-feedback d-block">
                        @GetError(nameof(senha))
                    </div>
                }
            </div>

            <div class="mb-3 form-check">
                <input type="checkbox" class="form-check-input" id="lembrar" disabled="@isLoading" />
                <label class="form-check-label" for="lembrar">
                    Lembrar-me neste computador
                </label>
            </div>

            <button type="submit"
                    class="btn btn-primary btn-lg w-100 mb-3"
                    disabled="@(!IsFormValid() || isLoading)">
                @if (isLoading)
                {
                    <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                    <span>Entrando...</span>
                }
                else
                {
                    <i class="bi bi-box-arrow-in-right"></i>
                    <span>Entrar</span>
                }
            </button>
        </form>

        <div class="divider">ou</div>

        <a href="/cadastro" class="btn btn-outline-primary btn-lg w-100 mb-3" @onclick:preventDefault="@isLoading">
            <i class="bi bi-person-plus"></i> Criar Conta
        </a>

        <div class="text-center mt-4">
            <small class="text-muted">
                Demo: joao@example.com / senha123
            </small>
        </div>
    </div>
</div>

<style>
    body {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
    }

    .login-container {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .login-box {
        background: white;
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
        padding: 40px;
        width: 100%;
        max-width: 400px;
    }

    .logo-circle {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 40px;
        margin: 0 auto;
    }

    .login-header h2 {
        font-weight: 700;
        color: #333;
        margin-bottom: 5px;
    }

    .divider {
        text-align: center;
        margin: 20px 0;
        color: #999;
        font-size: 14px;
        position: relative;
    }

    .divider::before,
    .divider::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 45%;
        height: 1px;
        background: #ddd;
    }

    .divider::before {
        left: 0;
    }

    .divider::after {
        right: 0;
    }

    .form-label {
        font-weight: 600;
        color: #333;
        margin-bottom: 8px;
    }

    .form-control-lg {
        border-radius: 8px;
        border: 2px solid #e0e0e0;
        padding: 12px 16px;
        transition: all 0.3s ease;
    }

    .form-control-lg:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }

    .form-control-lg.is-invalid {
        border-color: #dc3545;
    }

    .form-control-lg:disabled {
        background-color: #f5f5f5;
        cursor: not-allowed;
    }

    .invalid-feedback {
        color: #dc3545;
        font-size: 13px;
        margin-top: 5px;
    }

    .btn-primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .btn-primary:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
    }

    .btn-primary:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .btn-outline-primary {
        border-radius: 8px;
        border: 2px solid #667eea;
        color: #667eea;
        font-weight: 600;
    }

    .btn-outline-primary:hover {
        background: #667eea;
        border-color: #667eea;
    }

    .form-check-input:disabled {
        cursor: not-allowed;
        opacity: 0.5;
    }
</style>

@code {
    private string email = "joao@example.com";
    private string senha = "senha123";
    private bool isLoading = false;
    private Dictionary<string, string> errors = new();

    private void ValidateEmail()
    {
        errors.Remove(nameof(email));

        if (string.IsNullOrWhiteSpace(email))
        {
            errors[nameof(email)] = "Email é obrigatório";
        }
        else if (!IsValidEmail(email))
        {
            errors[nameof(email)] = "Email inválido";
        }
    }

    private void ValidateSenha()
    {
        errors.Remove(nameof(senha));

        if (string.IsNullOrWhiteSpace(senha))
        {
            errors[nameof(senha)] = "Senha é obrigatória";
        }
        else if (senha.Length < 3)
        {
            errors[nameof(senha)] = "Senha muito curta";
        }
    }

    private bool IsFormValid()
    {
        ValidateEmail();
        ValidateSenha();
        return errors.Count == 0 && !string.IsNullOrEmpty(email) && !string.IsNullOrEmpty(senha);
    }

    private bool HasError(string field) => errors.ContainsKey(field);

    private string GetError(string field) => errors.ContainsKey(field) ? errors[field] : "";

    private bool IsValidEmail(string email)
    {
        try
        {
            var addr = new System.Net.Mail.MailAddress(email);
            return addr.Address == email;
        }
        catch
        {
            return false;
        }
    }

    private async Task HandleLogin()
    {
        if (!IsFormValid())
        {
            NotificationService.ShowError("Corrija os erros no formulário");
            return;
        }

        isLoading = true;

        try
        {
            await AuthStateProvider.Login(email, senha);
            NotificationService.ShowSuccess("Login realizado com sucesso!");
            NavigationManager.NavigateTo("/");
        }
        catch (Exception ex)
        {
            NotificationService.ShowError("Email ou senha inválidos");
        }
        finally
        {
            isLoading = false;
        }
    }
}