/**
 * @file AuthCard.tsx
 * @description The card the signed-out screens share (the login page, the
 * first-login password change in `FirstPasswordPage.tsx`): a centred form
 * with the theme's accent glow and grid behind the brand logo, a title and a
 * subtitle. While it shows, the OS's light/dark applies (`applySystemTheme`),
 * since no account's theme has been chosen for it.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { useLayoutEffect, type FormEvent, type ReactNode } from "react";
import { BRAND_LOGO } from "../lib/brand";
import { applySystemTheme } from "../hooks/useTheme";

export function AuthCard({
  title,
  subtitle,
  onSubmit,
  children,
}: {
  title: string;
  subtitle: string;
  onSubmit: (e: FormEvent) => void;
  children: ReactNode;
}) {
  // Follow the OS, live.
  useLayoutEffect(() => {
    applySystemTheme();
    const mq = window.matchMedia?.("(prefers-color-scheme: dark)");
    mq?.addEventListener?.("change", applySystemTheme);
    return () => mq?.removeEventListener?.("change", applySystemTheme);
  }, []);

  return (
    <main className="flex min-h-screen items-center justify-center bg-surface-0 p-4">
      <form
        onSubmit={onSubmit}
        className="card relative w-full max-w-md overflow-hidden px-6 pb-8 pt-12 sm:px-10"
      >
        {/* Accent glow and a grid fading out from the top, drawn from the
            theme's own accent so it holds in every theme. */}
        <div
          aria-hidden
          className="pointer-events-none absolute inset-x-0 top-0 h-56"
          style={{
            backgroundImage:
              "linear-gradient(to right, rgb(var(--accent) / 0.12) 1px, transparent 1px), linear-gradient(to bottom, rgb(var(--accent) / 0.12) 1px, transparent 1px), radial-gradient(ellipse at top, rgb(var(--accent) / 0.16), transparent 70%)",
            backgroundSize: "48px 48px, 48px 48px, 100% 100%",
            backgroundPosition: "center top",
            maskImage: "radial-gradient(ellipse 70% 100% at top, black 30%, transparent 100%)",
          }}
        />
        <div className="relative space-y-5">
          <div className="text-center">
            <img src={BRAND_LOGO} alt="SmartGift" className="block h-auto w-full" />
            <h1 className="mt-5 text-3xl font-semibold tracking-tight text-fg-primary">{title}</h1>
            <p className="mt-2 text-sm text-fg-secondary">{subtitle}</p>
          </div>
          {children}
        </div>
      </form>
    </main>
  );
}