"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { Eye, EyeOff } from "lucide-react";

export default function LoginForm() {
    const router = useRouter();

    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");
    const [showPassword, setShowPassword] = useState(false);
    const [error, setError] = useState("");

    useEffect(() => {
        const hash = new URLSearchParams(
            window.location.hash.replace(/^#/, ""),
        );
        const token = hash.get("sso_token");
        const serializedUser = hash.get("sso_user");

        if (token && serializedUser) {
            try {
                const user = JSON.parse(serializedUser) as {
                    username: string;
                    role: string;
                };

                localStorage.setItem("token", token);
                localStorage.setItem("user", JSON.stringify(user));
                window.history.replaceState(
                    null,
                    "",
                    `${window.location.pathname}${window.location.search}`,
                );
                router.replace("/dashboard");
                return;
            } catch {
                setError("La session Microsoft reçue est invalide.");
            }
        }

        const ssoReason = new URLSearchParams(
            window.location.search,
        ).get("sso");

        if (ssoReason === "unauthorized") {
            setError(
                "Ce compte Microsoft n’est pas autorisé à accéder à RH Connect.",
            );
        } else if (ssoReason === "cancelled") {
            setError("La connexion Microsoft a été annulée.");
        } else if (ssoReason) {
            setError(
                "La connexion Microsoft a échoué. Réessaie ou contacte un administrateur.",
            );
        }
    }, [router]);

    async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
        event.preventDefault();
        setError("");

        if (!username.trim()) {
            setError("Veuillez saisir un identifiant.");
            return;
        }

        if (!password.trim()) {
            setError("Veuillez saisir un mot de passe.");
            return;
        }

        const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/auth/login`, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ username, password }),
        });

        if (!response.ok) {
            setError("Identifiant ou mot de passe incorrect.");
            return;
        }

        const data = await response.json();
        localStorage.setItem(
            "user",
            JSON.stringify(data.user)
        );
        localStorage.setItem("token", data.token);

        router.push("/dashboard");
    }

    function handleMicrosoftLogin() {
        setError("");
        window.location.href = `${process.env.NEXT_PUBLIC_API_URL}/api/auth/sso/login`;
    }

    return (
        <form onSubmit={handleSubmit} className="space-y-4">
            <div>
                <label className="mb-1 block text-sm font-medium text-slate-700">
                    Identifiant
                </label>
                <input
                    type="text"
                    value={username}
                    onChange={(event) => setUsername(event.target.value)}
                    className="w-full rounded-md border border-slate-300 px-3 py-2 text-sm text-black outline-none focus:border-sky-500 focus:ring-2 focus:ring-sky-100"
                />
            </div>

            <div>
                <label className="mb-1 block text-sm font-medium text-slate-700">
                    Mot de passe
                </label>

                <div className="relative">
                    <input
                        type={showPassword ? "text" : "password"}
                        value={password}
                        onChange={(event) => setPassword(event.target.value)}
                        className="w-full rounded-md border border-slate-300 px-3 py-2 pr-10 text-sm text-black outline-none focus:border-sky-500 focus:ring-2 focus:ring-sky-100"
                    />

                    <button
                        type="button"
                        onClick={() => setShowPassword((value) => !value)}
                        className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-500 hover:text-slate-800"
                        aria-label={showPassword ? "Masquer le mot de passe" : "Afficher le mot de passe"}
                    >
                        {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
                    </button>
                </div>
            </div>

            {error && (
                <p className="text-sm font-medium text-red-600">
                    {error}
                </p>
            )}

            <button
                type="submit"
                disabled={!username.trim() || !password.trim()}
                className="w-full rounded-md bg-sky-600 px-4 py-2 text-sm font-semibold text-white hover:bg-sky-700"
            >
                Connexion
            </button>
            <div className="flex items-center gap-3">
                <div className="h-px flex-1 bg-slate-200" />
                <span className="text-xs text-slate-400">ou</span>
                <div className="h-px flex-1 bg-slate-200" />
            </div>

            <button
                type="button"
                onClick={handleMicrosoftLogin}
                className="w-full rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50"
            >
                Se connecter avec Microsoft
            </button>
        </form>
    );
}