<script>
    import favicon from "$lib/assets/favicon.png";
    import {toast} from "$lib/toast.svelte.js";
    import {PUBLIC_API_URL} from "$env/static/public";
    import {goto} from "$app/navigation";

    let email = $state("");
    let password = $state("");

    const submit = async ()=>{
        const body = {
            email: email,
            password: password
        };

        const response = await fetch(`${PUBLIC_API_URL}/user/login`, {
            method: "POST",
            headers: {"Content-Type": "application/json"},
            credentials: "include",
            body: JSON.stringify(body)
        });

        const responseBody = await response.json();
        if(!response.ok){
            toast(responseBody.error.message, "error");
        }else{
            goto("/dashboard");
        }
    }
</script>

<main>
    <a href="/" class="logo">
        <span class="logo-icon">
            <img src={favicon} alt="ChatRPG logo" width="35" height="35" />
        </span>
        <span class="logo-text">ChatRPG</span>
    </a>

    <div class="form-glow">
        <form class="standardForm" onsubmit={submit}>
            <h2>Welcome Back</h2>

            <label>Email
                <!-- svelte-ignore a11y_autofocus -->
                <input bind:value={email} type="email" required autofocus>
            </label>

            <label>Password
                <input bind:value={password} type="password" required>
            </label>

            <button type="submit">Log In</button>

            <p>Don't have an account? <a href="/register">Sign up</a></p>
        </form>
    </div>
</main>

<style>
    main {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1.75rem;
        padding: 2rem 1rem;
    }

    a.logo {
        display: flex;
        align-items: center;
        gap: 14px;
        text-decoration: none;
        color: #e5e5ea;
        font-weight: 700;
        font-size: 32px;
        letter-spacing: -0.5px;
    }

    a.logo img {
        width: 48px;
        height: 48px;
    }

    a.logo .logo-icon {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    h2 {
        text-align: center;
    }

    .form-glow {
        position: relative;
        border-radius: 14px;
        width: min(660px, 100%);
        box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.2),
                    0 0 40px rgba(192, 132, 252, 0.08),
                    0 0 80px rgba(90, 90, 255, 0.05);
        animation: glow-pulse 4s ease-in-out infinite alternate;
    }

    .form-glow .standardForm {
        max-width: 660px;
        border-color: transparent;
        overflow: hidden;
        position: relative;
    }

    .form-glow .standardForm::before {
        content: "";
        position: absolute;
        top: 0;
        left: -75%;
        width: 50%;
        height: 100%;
        background: linear-gradient(
            105deg,
            transparent 20%,
            rgba(255, 255, 255, 0.045) 50%,
            transparent 80%
        );
        transform: skewX(-10deg);
        animation: shimmer 6s ease-in-out infinite;
        pointer-events: none;
        z-index: 10;
    }

    @keyframes shimmer {
        0%   { left: -75%; }
        25%  { left: 125%; }
        100% { left: 125%; }
    }

    @keyframes glow-pulse {
        from {
            box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.15),
                        0 0 30px rgba(192, 132, 252, 0.06),
                        0 0 60px rgba(90, 90, 255, 0.04);
        }
        to {
            box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.35),
                        0 0 50px rgba(192, 132, 252, 0.14),
                        0 0 100px rgba(90, 90, 255, 0.08);
        }
    }
</style>
