<script lang="ts">
    import { supabase } from "$lib/supabaseClient";
    import { goto } from "$app/navigation";
    import logo from "$lib/images/villa.png";

    let email = "";
    let password = "";
    let error = "";

    const handleLogin = async () => {
        error = "";
        const { data, error: loginError } =
            await supabase.auth.signInWithPassword({ email, password });

        if (loginError) {
            error = loginError.message;
        } else {
            const { data: dataUser, error: eror } = await supabase
                .from("vb_users")
                .select("*")
                .eq("id", data.user.id)
                .single();

            if (eror) {
                error = "Failed to fetch user data.";
                return;
            } else {
                // Set user data in local storage or a store
                localStorage.setItem("user", JSON.stringify(dataUser));
            }

            goto("/backoffice");
        }
    };
</script>

<div
    class="min-h-screen flex flex-col md:flex-row items-center justify-center bg-gradient-to-br from-gray-50 to-gray-200 px-6 py-12"
>
    <!-- Ilustrasi -->
    <div class="hidden md:flex w-1/2 justify-center items-center">
        <img src={logo} alt="Login Illustration" class="w-full max-w-sm" />
    </div>

    <!-- Form Login -->
    <div class="w-full max-w-md bg-white rounded-3xl shadow-2xl p-10 space-y-6">
        <h2 class="text-4xl font-bold text-center text-gray-800">
            Welcome Back 👋
        </h2>
        <p class="text-center text-sm text-gray-500">
            Please enter your login credentials
        </p>

        {#if error}
            <div
                class="bg-red-100 border border-red-300 text-red-700 text-sm p-3 rounded-lg animate-pulse"
            >
                {error}
            </div>
        {/if}

        <form on:submit|preventDefault={handleLogin} class="space-y-5">
            <div>
                <label
                    for="email"
                    class="block text-sm font-medium text-gray-700 mb-1"
                    >Email</label
                >
                <input
                    id="email"
                    type="email"
                    bind:value={email}
                    placeholder="you@example.com"
                    class="w-full px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:outline-none shadow-sm transition"
                    required
                />
            </div>

            <div>
                <label
                    for="password"
                    class="block text-sm font-medium text-gray-700 mb-1"
                    >Password</label
                >
                <input
                    id="password"
                    type="password"
                    bind:value={password}
                    placeholder="••••••••"
                    class="w-full px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:outline-none shadow-sm transition"
                    required
                />
            </div>

            <button
                type="submit"
                class="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl transition duration-200 shadow-md"
            >
                Login
            </button>
        </form>

        <p class="text-center text-sm text-gray-500">
            Don’t have an account?
            <a
                href="/register"
                class="text-blue-600 hover:underline font-medium">Sign up</a
            >
        </p>
    </div>
</div>
