import type { Metadata } from "next";
import { Brand } from "@/components/brand/Brand";
import { LoginForm } from "./LoginForm";

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

type Search = { [key: string]: string | string[] | undefined };

export default async function LoginPage({
  searchParams,
}: {
  searchParams: Promise<Search>;
}) {
  const sp = await searchParams;
  const raw = typeof sp.callbackUrl === "string" ? sp.callbackUrl : "/dashboard";
  const callbackUrl = raw.startsWith("/") && !raw.startsWith("//") ? raw : "/dashboard";

  return (
    <div className="card animate-in" style={{ padding: "clamp(28px, 4vw, 48px)" }}>
      {/* Dekorativer Glow im Hintergrund der Karte */}
      <div
        aria-hidden
        className="pointer-events-none absolute -z-10"
        style={{
          inset: 0,
          background:
            "radial-gradient(120px 120px at 15% 0%, rgba(158,215,255,.18), transparent 70%), radial-gradient(140px 120px at 100% 10%, rgba(255,159,215,.14), transparent 70%)",
          borderRadius: "var(--radius)",
        }}
      />

      <div className="flex flex-col items-center text-center gap-5">
        <Brand size={46} />

        <div className="flex flex-col gap-2">
          <span className="eyebrow justify-center">Avaria Team OS</span>
          <h1>Willkommen zurück</h1>
          <p className="text-muted text-sm max-w-[34ch] mx-auto">
            Melde dich an, um auf das interne Betriebssystem von Avaria Media
            zuzugreifen.
          </p>
        </div>
      </div>

      <div className="mt-7">
        <LoginForm callbackUrl={callbackUrl} />
      </div>

      <div
        className="mt-6 rounded-2xl border px-4 py-3 text-xs text-muted flex items-start gap-2"
        style={{ borderColor: "var(--line)", background: "rgba(13,19,42,.4)" }}
      >
        <span
          className="mt-[3px] inline-block h-2 w-2 rounded-full"
          style={{ background: "var(--cyan)", boxShadow: "0 0 10px 1px rgba(56,189,248,.7)" }}
        />
        <span>
          Zugänge werden durch die Administration vergeben. Bei Problemen wende
          dich an dein Avaria-Team.
        </span>
      </div>
    </div>
  );
}