"use client";

import { useState } from "react";
import type { SubmitEvent } from "react";
import { useRouter } from "next/navigation";
import LanguageSwitcher from "@/app/language-switcher";
import { getLocale, LOCALE_COOKIE, t, type Locale } from "@/lib/i18n";

export default function LoginPage() {
    const router = useRouter();
    const [locale, setLocale] = useState<Locale>(() => {
        if (typeof document === "undefined") return "nl";
        const value = document.cookie
            .split("; ")
            .find((cookie) => cookie.startsWith(`${LOCALE_COOKIE}=`))
            ?.split("=")[1];
        return getLocale(value);
    });
    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");
    const [error, setError] = useState("");
    const [loading, setLoading] = useState(false);

    async function handleSubmit(event: SubmitEvent<HTMLFormElement>) {
        event.preventDefault();
        setError("");
        setLoading(true);

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

            if (!response.ok) {
                const data = await response.json();
                setError(
                    data.error === "invalid_credentials"
                        ? t(locale, "login.invalidCredentials")
                        : t(locale, "login.unexpectedError"),
                );
                return;
            }

            router.replace("/");
            router.refresh();
        } catch {
            setError(t(locale, "login.unexpectedError"));
        } finally {
            setLoading(false);
        }
    }

    return (
        <main className="flex min-h-screen items-center justify-center bg-slate-100 px-6">
            <div className="w-full max-w-md rounded-2xl bg-white p-8 shadow-xl ring-1 ring-slate-200">
                <div className="mb-8">
                    <div className="flex items-start justify-between gap-4">
                        <div>
                            <p className="text-sm font-semibold uppercase tracking-wider text-cyan-700">
                                {t(locale, "appName")}
                            </p>
                            <h1 className="mt-2 text-3xl font-bold text-slate-900">{t(locale, "login.title")}</h1>
                        </div>
                        <LanguageSwitcher
                            locale={locale}
                            label={t(locale, "language.label")}
                            onChange={setLocale}
                        />
                    </div>
                    <p className="mt-2 text-slate-500">{t(locale, "login.description")}</p>
                    <p className="mt-2 text-slate-500">{t(locale, "login.demoCredentials")}</p>
                </div>

                <form onSubmit={handleSubmit} className="space-y-5">
                    <label className="block">
                        <span className="mb-2 block text-sm font-medium text-slate-700">{t(locale, "login.username")}</span>
                        <input
                            required
                            value={username}
                            onChange={(event) => setUsername(event.target.value)}
                            className="w-full rounded-lg border border-slate-300 px-4 py-3 text-slate-900 outline-none transition focus:border-cyan-600 focus:ring-2 focus:ring-cyan-100"
                            autoComplete="username"
                        />
                    </label>

                    <label className="block">
                        <span className="mb-2 block text-sm font-medium text-slate-700">{t(locale, "login.password")}</span>
                        <input
                            required
                            type="password"
                            value={password}
                            onChange={(event) => setPassword(event.target.value)}
                            className="w-full rounded-lg border border-slate-300 px-4 py-3 text-slate-900 outline-none transition focus:border-cyan-600 focus:ring-2 focus:ring-cyan-100"
                            autoComplete="current-password"
                        />
                    </label>

                    {error && <p className="rounded-lg bg-red-50 p-3 text-sm text-red-700">{error}</p>}

                    <button
                        type="submit"
                        disabled={loading}
                        className="w-full rounded-lg bg-cyan-700 px-4 py-3 font-semibold text-white transition hover:bg-cyan-800 disabled:cursor-not-allowed disabled:opacity-60"
                    >
                        {loading ? t(locale, "login.submitting") : t(locale, "login.submit")}
                    </button>
                </form>
            </div>
        </main>
    );
}