"use client";

import { signIn } from "next-auth/react";
import { useTranslations, useLocale } from "next-intl";
import { Link, getPathname } from "@/i18n/navigation";

export default function LoginPage() {
  const t = useTranslations("login");
  const locale = useLocale();

  return (
    <div className="fixed inset-0 flex items-center justify-center bg-surface-0">
      {/* Background grid pattern */}
      <div
        className="absolute inset-0 opacity-[0.04]"
        style={{
          backgroundImage: `
            linear-gradient(var(--color-accent) 1px, transparent 1px),
            linear-gradient(90deg, var(--color-accent) 1px, transparent 1px)
          `,
          backgroundSize: "60px 60px",
        }}
      />

      <div className="relative z-10 w-full max-w-sm px-5 animate-in">
        {/* Logo mark */}
        <div className="flex justify-center mb-8">
          <div className="relative h-12 w-12">
            <div className="absolute inset-0 rounded-lg bg-accent/15" />
            <div className="absolute inset-[5px] rounded-md bg-accent" />
          </div>
        </div>

        <div className="bg-surface-1 rounded-2xl border border-border p-8 shadow-2xl shadow-black/40">
          <h1 className="font-display text-xl font-semibold text-center mb-1">
            {t("title")}
          </h1>
          <p className="text-text-secondary text-sm text-center mb-8">
            {t("subtitle")}
          </p>

          <button
            onClick={() =>
              signIn("zitadel", {
                // Preserve the active locale across the OIDC round-trip.
                // A bare "/dashboard" would resolve to the default (de)
                // locale on return; getPathname prefixes it as needed.
                callbackUrl: getPathname({ href: "/dashboard", locale }),
              })
            }
            className="
              w-full py-3 px-4 rounded-lg font-medium text-sm
              bg-accent text-surface-0 cursor-pointer
              hover:bg-accent-dim active:scale-[0.98]
              transition-all duration-150
              shadow-lg shadow-accent/20
            "
          >
            {t("button")}
          </button>

          <p className="text-xs text-text-muted text-center mt-5">
            {t("noAccount")}{" "}
            <Link
              href="/register"
              className="text-accent hover:text-accent-dim transition-colors"
            >
              {t("register")}
            </Link>
          </p>
        </div>

        <p className="text-center text-text-muted text-[11px] mt-6 tracking-wide uppercase">
          {t("footer")}
        </p>
      </div>
    </div>
  );
}