@page "/account/login"
@using TrueCV.Web.Components.Layout
@layout MainLayout

@using Microsoft.AspNetCore.Identity
@using TrueCV.Infrastructure.Identity

@inject SignInManager<ApplicationUser> SignInManager
@inject NavigationManager NavigationManager

<PageTitle>Login - TrueCV</PageTitle>

<div class="auth-container">
    <!-- Left side - Form -->
    <div class="auth-form-side">
        <div class="auth-form-wrapper">
            <div class="text-center mb-4">
                <a href="/">
                    <img src="images/TrueCV_Logo.png" alt="TrueCV" class="auth-logo" />
                </a>
            </div>

            <h1 class="auth-title">Welcome back</h1>
            <p class="auth-subtitle">Sign in to continue verifying CVs</p>

            @if (!string.IsNullOrEmpty(_errorMessage))
            {
                <div class="alert alert-danger d-flex align-items-center" role="alert">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="me-2 flex-shrink-0" viewBox="0 0 16 16">
                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                        <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
                    </svg>
                    <span>@_errorMessage</span>
                </div>
            }

            <form method="post" action="/account/perform-login">
                <AntiforgeryToken />
                <input type="hidden" name="returnUrl" value="@ReturnUrl" />

                <div class="mb-3">
                    <label for="email" class="form-label">Email address</label>
                    <div class="input-group-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
                            <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z"/>
                        </svg>
                        <input id="email" name="email" type="email" class="form-control form-control-lg"
                               placeholder="name@example.com" autocomplete="email" required />
                    </div>
                </div>

                <div class="mb-3">
                    <label for="password" class="form-label">Password</label>
                    <div class="input-group-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
                            <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/>
                        </svg>
                        <input id="password" name="password" type="password" class="form-control form-control-lg"
                               placeholder="Enter your password" autocomplete="current-password" required />
                    </div>
                </div>

                <div class="mb-4 d-flex justify-content-between align-items-center">
                    <div class="form-check">
                        <input id="rememberMe" name="rememberMe" type="checkbox" class="form-check-input" value="true" />
                        <label class="form-check-label" for="rememberMe">
                            Remember me
                        </label>
                    </div>
                </div>

                <div class="d-grid mb-4">
                    <button type="submit" class="btn btn-primary btn-lg">
                        <span>Sign In</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="ms-2" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
                        </svg>
                    </button>
                </div>
            </form>

            <div class="auth-divider">
                <span>New to TrueCV?</span>
            </div>

            <div class="text-center">
                <a href="/account/register" class="btn btn-outline-secondary btn-lg w-100">
                    Create an account
                </a>
            </div>
        </div>
    </div>

    <!-- Right side - Branding -->
    <div class="auth-brand-side">
        <div class="auth-brand-content">
            <div class="auth-brand-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
                    <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
                    <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
                </svg>
            </div>
            <h2 class="auth-brand-title">CV Verification Made Simple</h2>
            <p class="auth-brand-text">
                Upload any CV and get instant AI-powered verification with detailed analysis of qualifications, experience, and company legitimacy.
            </p>

            <div class="auth-stats">
                <div class="auth-stat">
                    <div class="auth-stat-value">10K+</div>
                    <div class="auth-stat-label">CVs Verified</div>
                </div>
                <div class="auth-stat">
                    <div class="auth-stat-value">98%</div>
                    <div class="auth-stat-label">Accuracy Rate</div>
                </div>
                <div class="auth-stat">
                    <div class="auth-stat-value">&lt;30s</div>
                    <div class="auth-stat-label">Average Time</div>
                </div>
            </div>

            <div class="auth-testimonial">
                <blockquote>
                    "TrueCV has transformed our hiring process. We catch discrepancies we would have missed before."
                </blockquote>
                <cite>- HR Director, Tech Company</cite>
            </div>
        </div>
    </div>
</div>

@code {
    private string? _errorMessage;

    [SupplyParameterFromQuery]
    public string? ReturnUrl { get; set; }

    [SupplyParameterFromQuery(Name = "error")]
    public string? Error { get; set; }

    protected override void OnInitialized()
    {
        _errorMessage = Error;
    }
}