src/app/handler/[...stack]/page.tsx

import { StackHandler } from "@stackframe/stack"
import { stackServerApp } from "@/lib/stack-server"

// Custom loading component for OAuth callbacks
function CustomLoading() {
    return (
        <div className="min-h-screen flex items-center justify-center bg-background px-4">
            <div className="text-center space-y-6 max-w-md">
                {/* Logo */}
                <div className="flex justify-center">
                    <div className="h-16 w-16 rounded-2xl bg-gradient-to-br from-primary to-purple-500 flex items-center justify-center shadow-lg shadow-primary/25 animate-pulse">
                        <svg className="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
                        </svg>
                    </div>
                </div>
                
                {/* Loading spinner */}
                <div className="flex justify-center">
                    <div className="relative">
                        <div className="h-12 w-12 rounded-full border-4 border-muted"></div>
                        <div className="absolute top-0 left-0 h-12 w-12 rounded-full border-4 border-primary border-t-transparent animate-spin"></div>
                    </div>
                </div>
                
                {/* Text */}
                <div className="space-y-2">
                    <h2 className="text-xl font-semibold text-foreground">
                        Signing you in...
                    </h2>
                    <p className="text-muted-foreground text-sm">
                        Please wait while we complete your authentication
                    </p>
                </div>
                
                {/* Fallback link */}
                <p className="text-xs text-muted-foreground pt-4">
                    Taking too long?{" "}
                    <a href="/" className="text-primary hover:underline font-medium">
                        Return to homepage
                    </a>
                </p>
            </div>
        </div>
    )
}

// Using type assertion for Next.js 16 compatibility
export default function Handler(props: {
    params: Promise<{ stack: string[] }>
    searchParams: Promise<Record<string, string | string[] | undefined>>
}) {
    return (
        <StackHandler 
            app={stackServerApp} 
            routeProps={props}
            fullPage={true}
        />
    )
}