import { redirect } from "next/navigation";
import type { Metadata } from "next";
import { getSessionUser } from "@/lib/auth";
import { getSettings, isRegistrationOpen } from "@/lib/settings";
import { env } from "@/lib/env";
import { AuthSwitch, LoginForm } from "@/components/AuthForm";
import { PasskeyLoginButton } from "@/components/settings/Passkeys";
import { loginAction } from "../actions";

export const metadata: Metadata = { title: "Anmelden" };

export default async function LoginPage({
  searchParams,
}: {
  searchParams: Promise<{ weiter?: string; fehler?: string }>;
}) {
  if (await getSessionUser()) redirect("/");

  const params = await searchParams;
  const [settings, registrationOpen] = await Promise.all([getSettings(), isRegistrationOpen()]);

  return (
    <div className="fl-card p-6 sm:p-8">
      <h1 className="text-2xl font-semibold tracking-tight">Willkommen zurück</h1>
      <p className="mt-1 mb-6 text-sm text-[var(--fl-muted)]">
        Melde dich an, um weiterzuschauen.
      </p>

      {params.fehler && (
        <p
          role="alert"
          className="mb-4 rounded-xl border border-[color-mix(in_oklab,var(--fl-danger)_45%,transparent)] bg-[color-mix(in_oklab,var(--fl-danger)_12%,transparent)] px-3 py-2 text-sm text-[var(--fl-danger)]"
        >
          {params.fehler}
        </p>
      )}

      <LoginForm action={loginAction} weiter={params.weiter} />

      {(env.passkeys.isAvailable || env.oidc.isConfigured) && (
        <>
          <div className="my-5 flex items-center gap-3 text-xs text-[var(--fl-faint)]">
            <span className="h-px flex-1 bg-[var(--fl-border)]" />
            oder
            <span className="h-px flex-1 bg-[var(--fl-border)]" />
          </div>

          <div className="space-y-2">
            {env.passkeys.isAvailable && <PasskeyLoginButton label="Mit Passkey anmelden" />}
            {env.oidc.isConfigured && (
              <a href="/api/auth/oidc/start" className="fl-btn fl-btn-ghost w-full justify-center">
                {env.oidc.buttonLabel}
              </a>
            )}
          </div>
        </>
      )}

      {registrationOpen && (
        <div className="mt-6">
          <AuthSwitch href="/registrieren">Noch kein Konto? Jetzt registrieren</AuthSwitch>
        </div>
      )}

      <p className="mt-6 text-center text-xs text-[var(--fl-faint)]">{settings.instanceName}</p>
    </div>
  );
}