<script lang="ts">
    import { supabase } from "$lib/supabaseClient";
    import { goto } from "$app/navigation";
    import logo from "$lib/images/villa.png"; // Confirm this path and image is suitable

    let email = "";
    let password = "";
    let error = "";
    let isLoading = false;
    let showPassword = false; // New state for password visibility

    const togglePasswordVisibility = () => {
        showPassword = !showPassword;
    };

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

            if (loginError) {
                if (
                    loginError.message.includes("Invalid login credentials") ||
                    loginError.message.includes("Email not confirmed")
                ) {
                    error = "Incorrect email or password. Please try again.";
                } else if (loginError.message.includes("network")) {
                    error =
                        "Network error. Please check your internet connection and try again.";
                } else {
                    error = `Login failed: ${loginError.message}`;
                }
            } else {
                const { data: dataUser, error: userDataError } = await supabase
                    .from("vb_users")
                    .select("*")
                    .eq("id", data.user.id)
                    .single();

                if (userDataError) {
                    error =
                        "Failed to fetch user data. Please contact support if the issue persists.";
                    console.error("User data fetch error:", userDataError);
                    return; // Stop execution if user data fetch fails
                } else {
                    localStorage.setItem("user", JSON.stringify(dataUser));
                }

                goto("/backoffice");
            }
        } catch (err) {
            error = "An unexpected error occurred. Please try again.";
            console.error("Login process error:", err);
        } finally {
            isLoading = false;
        }
    };
</script>

<div
    class="min-h-screen flex flex-col md:flex-row items-center justify-center bg-gradient-to-br from-blue-50 to-purple-100 px-6 py-12 animate-fade-in"
>
    <div class="hidden md:flex w-1/2 justify-center items-center p-8">
        <img
            src={logo}
            alt="Login Illustration - Your App's Purpose"
            class="w-full max-w-sm object-contain animate-float"
        />
    </div>

    <div
        class="w-full max-w-md bg-white rounded-3xl shadow-2xl p-10 space-y-7 transform transition-transform duration-500 ease-out animate-slide-up"
    >
        <h2
            class="text-4xl font-extrabold text-center text-gray-900 leading-tight"
        >
            Welcome Back <span class="wave-emoji">👋</span>
        </h2>
        <p class="text-center text-md text-gray-600">
            Securely access your account to manage everything.
        </p>

        {#if error}
            <div
                role="alert"
                aria-live="assertive"
                class="bg-red-50 border border-red-300 text-red-700 text-sm p-4 rounded-xl transition-all duration-300 ease-in-out transform opacity-100 scale-100 shadow-sm"
            >
                <div class="flex items-center">
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="h-5 w-5 mr-2"
                        viewBox="0 0 20 20"
                        fill="currentColor"
                    >
                        <path
                            fill-rule="evenodd"
                            d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                            clip-rule="evenodd"
                        />
                    </svg>
                    {error}
                </div>
            </div>
        {/if}

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

            <div>
                <label
                    for="password"
                    class="block text-sm font-medium text-gray-700 mb-2"
                    >Password</label
                >
                <div class="relative">
                    <input
                        id="password"
                        type={showPassword ? "text" : "password"}
                        bind:value={password}
                        placeholder="••••••••"
                        class="w-full px-5 py-3 border border-gray-300 rounded-xl focus:ring-3 focus:ring-blue-400 focus:outline-none shadow-sm transition-all duration-200 pr-12"
                        required
                        autocomplete="current-password"
                    />
                    <button
                        type="button"
                        class="absolute inset-y-0 right-0 pr-4 flex items-center text-gray-500 hover:text-gray-700 transition"
                        on:click={togglePasswordVisibility}
                        aria-label={showPassword
                            ? "Hide password"
                            : "Show password"}
                    >
                        {#if showPassword}
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                class="h-5 w-5"
                                fill="none"
                                viewBox="0 0 24 24"
                                stroke="currentColor"
                            >
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.249-.756A10.05 10.05 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.158 5.447M12 12a3 3 0 11-6 0 3 3 0 016 0z"
                                />
                            </svg>
                        {:else}
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                class="h-5 w-5"
                                fill="none"
                                viewBox="0 0 24 24"
                                stroke="currentColor"
                            >
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                                />
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                                />
                            </svg>
                        {/if}
                    </button>
                </div>
                <a
                    href="/forgot-password"
                    class="text-sm text-blue-600 hover:underline font-medium mt-2 block text-right"
                    >Forgot password?</a
                >
            </div>

            <button
                type="submit"
                class="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl transition duration-300 shadow-lg hover:shadow-xl flex items-center justify-center transform hover:-translate-y-0.5"
                disabled={isLoading}
            >
                {#if isLoading}
                    <svg
                        class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                    >
                        <circle
                            class="opacity-25"
                            cx="12"
                            cy="12"
                            r="10"
                            stroke="currentColor"
                            stroke-width="4"
                        ></circle>
                        <path
                            class="opacity-75"
                            fill="currentColor"
                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                        ></path>
                    </svg>
                    Authenticating...
                {:else}
                    Login
                {/if}
            </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-bold ml-1"
                >Sign Up Now</a
            >
        </p>
    </div>
</div>

<style>
    /* Tailwind CSS animations or custom keyframes */
    @keyframes fade-in {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    @keyframes slide-up {
        from {
            transform: translateY(20px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes float {
        0% {
            transform: translateY(0px);
        }
        50% {
            transform: translateY(-10px);
        }
        100% {
            transform: translateY(0px);
        }
    }

    @keyframes wave {
        0% {
            transform: rotate(0deg);
        }
        10% {
            transform: rotate(14deg);
        }
        20% {
            transform: rotate(-8deg);
        }
        30% {
            transform: rotate(14deg);
        }
        40% {
            transform: rotate(-4deg);
        }
        50% {
            transform: rotate(10deg);
        }
        60% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(0deg);
        }
    }

    .animate-fade-in {
        animation: fade-in 0.8s ease-out forwards;
    }

    .animate-slide-up {
        animation: slide-up 0.7s ease-out forwards;
        animation-delay: 0.2s; /* Delay form animation slightly */
    }

    .animate-float {
        animation: float 3s ease-in-out infinite;
    }

    .wave-emoji {
        display: inline-block;
        animation: wave 2.5s infinite;
        transform-origin: 70% 70%;
    }
</style>
