@using BlazorBootstrap
@using Layout
@using Microsoft.AspNetCore.Mvc
@using Newtonsoft.Json
@using Newtonsoft.Json.Linq
@using GestionaDenunciasAN.Models
@using System.Net.Http.Headers
@using System.Text
@using System.Linq.Expressions
@using Serialize.Linq.Serializers
@using System.Security.Cryptography.X509Certificates
@using System.Security.Cryptography
@using bdAntifraude.db

@rendermode InteractiveServer
@layout EmptyLayout
@page "/"
@inject IHttpClientFactory HttpClientFactory
@inject IHttpContextAccessor HttpContextAccessor
@inject NavigationManager Navigation
@inject UserState UserState
@inject IJSRuntime JSRuntime

<PageTitle>Gestión Denuncias - Oficina Antifraude de Andalucía</PageTitle>

<style>
    /* Contenedor que ocupa toda la altura de la ventana */
    .full-height {
        height: 100vh;
        margin: 0;
        padding: 0;
    }

    /* Columna izquierda con un degradado en azul */
    .left-side {
        background: linear-gradient(135deg, #5a9bd5, #2A5298);
        color: #fff;
    }

    /* Columna derecha con fondo claro */
    .right-side {
        background: linear-gradient(135deg, #ffffff, #dddddd);
    }

    /* Contenedor para centrar contenido en ambas columnas */
    .centered-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        padding: 2rem;
    }

    /* Logo */
    .logo-img {
        max-width: 300px;
        margin-bottom: 2rem;
    }

/* Caja de login con degradado y sombra */
.login-box {
    background: linear-gradient(135deg, #5a9bd5, #2A5298);
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    width: 100%;
    text-align: center;
    color: #fff; /* Para que el texto sea legible sobre el gradiente */
}

.login-box label {
    font-weight: 500;
    display: block;
    text-align: left;
    margin-bottom: 0.3rem;
    color: #fff; /* Aseguramos que la etiqueta se vea bien */
}

.login-box .form-control {
    width: 100%;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
}

    .error-message {
        color: red;
        margin-bottom: 1rem;
    }

    /* Botones personalizados */
    .login-box .btnOAAFAzul {
        background-color: #fff !important; /* Fondo blanco */
        color: #000 !important; /* Texto negro */
        border: none;
        border-radius: 15px;
        padding: 10px;
        width: 100%;
        margin-top: 10px;
        cursor: pointer;
        font-size: 16px;
    }

        .login-box .btnOAAFAzul:hover {
            opacity: 0.8;
        }




    .btnOAAFBlack {
        background-color: #343334;
        border: none;
        border-radius: 15px;
        color: white;
        padding: 10px;
        width: 100%;
        margin-top: 10px;
        cursor: pointer;
        font-size: 16px;
    }

        .btnOAAFBlack:hover {
            opacity: 0.8;
        }

    /* Estilos para el loading */
    .loadingFrame {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.8);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }

    .loadingDiv {
        text-align: center;
    }

    .loadingImg {
        background: url('Content/imagenes/loading.gif') no-repeat center center;
        background-size: contain;
        width: 100px;
        height: 100px;
    }
</style>

<link rel="icon" type="image/x-icon" href="faviconParlamento.ico" />
<link href="~/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="Content/Site.css" rel="stylesheet" />

<!-- Bloque de loading que se muestra mientras 'mostrar' es true -->
@if (mostrar)
{
    <div id="cargando" class="loadingFrame">
        <div class="loadingDiv">
            <div class="loadingImg"></div>
        </div>
    </div>
}

<!-- Estructura en dos columnas -->
<div class="container-fluid full-height px-0">
    <div class="row no-gutters full-height">
        <!-- Columna izquierda (más ancha) -->
        <div class="col-md-7 left-side">
            <div class="centered-content">
                <!-- Tu logo en grande -->
                <img src="Content/imagenes/logo-oaaf-negativo-transparente.svg" alt="Logo Oficina Antifraude" class="logo-img" />
                <h1>Oficina Antifraude de Andalucía</h1>
                <p style="max-width: 500px; text-align: center;">
                    Bienvenido/a a la plataforma de gestión de denuncias.
                    Aquí podrás autenticarte para revisar y tramitar las denuncias recibidas.
                </p>
            </div>
        </div>

        <!-- Columna derecha (más estrecha) -->
        <div class="col-md-5 right-side">
            <div class="centered-content">
                <form class="login-box">
                    <h3 class="mb-4">Iniciar Sesión</h3>

                    <p id="mensajeError" class="error-message">@mensaje</p>

                    <div class="form-group text-left">
                        <label for="Usu">Usuario</label>
                        <input id="Usu" type="text" class="form-control" @bind="Usu" />
                    </div>

                    <div class="form-group text-left">
                        <label for="Contrasena">Contraseña</label>
                        <input id="Contrasena" type="password" class="form-control" @bind="pass" />
                    </div>

                    <button class="btnOAAFAzul" type="button" @onclick="LogIn">ENTRAR</button>
                    <button class="btnOAAFBlack" type="button" @onclick="IniciarSesionConCertificado">INICIAR SESIÓN CON CERTIFICADO</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Iframe oculto para la autenticación con certificado -->
<iframe id="authCertIframe" style="display:none;"></iframe>

@code {
    public string? Usu { get; set; }
    public string? pass { get; set; }
    private string? mensaje { get; set; }
    public bool mostrar { get; set; } = false;
    private DotNetObjectReference<Login>? dotNetRef;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // Se crea una referencia a este componente para que JS pueda invocar SetToken
            dotNetRef = DotNetObjectReference.Create(this);
            await JSRuntime.InvokeVoidAsync("registerTokenReceiver", dotNetRef);
        }
    }

    protected override void OnInitialized()
    {
        LimpiarEstadoUsuario();
    }

    private void LimpiarEstadoUsuario()
    {
        UserState.Token = "";
        UserState.NombreUsu = "";
        HttpContextAccessor?.HttpContext?.Session?.Clear();
    }

    public async Task LogIn()
    {
        mostrar = true;
        await Task.Delay(1);

        if (string.IsNullOrWhiteSpace(Usu) || string.IsNullOrWhiteSpace(pass))
        {
            mostrar = false;
            mensaje = "Por favor, ingrese su usuario y contraseña.";
            return;
        }

        try
        {
            var client = HttpClientFactory.CreateClient();
            client.BaseAddress = new Uri(Utilidades.urlSwagger());
            var loginPayload = new { NombreUsuario = Usu, Contraseña = pass, Origen = "Denuncias" };
            var loginContent = new StringContent(JsonConvert.SerializeObject(loginPayload), Encoding.UTF8, "application/json");
            var loginResponse = await client.PostAsync("Auth/login", loginContent);
            await ProcesarRespuesta(loginResponse);
        }
        catch (Exception ex)
        {
            mostrar = false;
            mensaje = $"Error inesperado: {ex.Message}";
        }
    }

    private async Task IniciarSesionConCertificado()
    {
        mostrar = true;
        var url = Utilidades.urlSwagger() + "Auth/login-cert?iframe=true";
        await JSRuntime.InvokeVoidAsync("iniciarSesionConCertificado", url);
    }

    private async Task ProcesarRespuesta(HttpResponseMessage response)
    {
        var responseContent = await response.Content.ReadAsStringAsync();
        if (response.IsSuccessStatusCode)
        {
            var parsedJson = JObject.Parse(responseContent);
            UserState.Token = parsedJson["token"]?.ToString() ?? "";
            // Actualizamos el nombre del usuario (formateado como "APELLIDOS, NOMBRE")
            UserState.NombreUsu = $"{parsedJson["user"]?["apellidos"]?.ToString()}, {parsedJson["user"]?["nombre"]?.ToString()}";
            Navigation.NavigateTo("/GestionZip", true);
        }
        else
        {
            mostrar = false;
            mensaje = "Error de autenticación. Verifique sus credenciales o el certificado.";
        }
    }

    [JSInvokable]
    public Task SetToken(string token, string userJson)
    {
        // Actualizamos el token en UserState
        UserState.Token = token;
        try
        {
            var userObj = JObject.Parse(userJson);
            UserState.NombreUsu = $"{userObj["APELLIDOS"]?.ToString()}, {userObj["NOMBRE"]?.ToString()}";
        }
        catch
        {
            UserState.NombreUsu = "";
        }
        Navigation.NavigateTo("/GestionZip", true);
        return Task.CompletedTask;
    }
}

<script>
    function registerTokenReceiver(dotnetRef) {
        window.dotnetTokenReceiver = dotnetRef;
    }

    window.iniciarSesionConCertificado = function(url) {
        console.log("Se llamó iniciarSesionConCertificado con URL:", url);
        var iframe = document.getElementById("authCertIframe");
        if (iframe) {
            iframe.src = url;
        } else {
            console.error("No se encontró el iframe con id 'authCertIframe'");
        }
    };

    window.addEventListener("message", function(event) {
        var data = event.data;
        if (data && data.token) {
            console.log("Mensaje recibido con token:", data.token);
            if (window.dotnetTokenReceiver) {
                window.dotnetTokenReceiver.invokeMethodAsync("SetToken", data.token, JSON.stringify(data.user));
            } else {
                localStorage.setItem("token", data.token);
                localStorage.setItem("user", JSON.stringify(data.user));
                window.location.href = "/GestionZip";
            }
        }
    });
</script>
