wulf-pulse/app/auth/setup/page.tsx

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Loader2, ShieldCheck } from "lucide-react";
import { toast } from "sonner";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { MicrosoftButton } from "@/components/auth/microsoft-button";
import { Separator } from "@/components/ui/separator";
import { authClient } from "@/lib/auth-client";

export default function SetupPage() {
  const router = useRouter();
  const [isLoading, setIsLoading] = useState(false);

  async function handleSendMagicLink() {
    setIsLoading(true);
    try {
      // Get current user's email from session
      const session = await authClient.getSession();
      if (!session?.data?.user?.email) {
        toast.error("Unable to get user email");
        return;
      }

      const result = await authClient.signIn.magicLink({
        email: session.data.user.email,
        callbackURL: "/",
      });

      if (result.error) {
        toast.error(result.error.message || "Failed to send magic link");
        return;
      }

      toast.success("Magic link sent! Check your email to complete setup.");
    } catch (error) {
      toast.error("An unexpected error occurred");
    } finally {
      setIsLoading(false);
    }
  }

  return (
    <Card className="border-0 shadow-2xl bg-white/95 dark:bg-slate-900/95 backdrop-blur">
      <CardHeader className="space-y-1 text-center">
        <div className="flex justify-center mb-4">
          <div className="h-12 w-12 rounded-xl bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center">
            <ShieldCheck className="h-6 w-6 text-white" />
          </div>
        </div>
        <CardTitle className="text-2xl font-bold">Complete Your Setup</CardTitle>
        <CardDescription>
          Your account was created by an administrator. Please link an authentication method to secure your account.
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        <div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-4">
          <p className="text-sm text-amber-800 dark:text-amber-200">
            This is a one-time setup. After completing this step, you&apos;ll be able to sign in normally.
          </p>
        </div>

        {/* Microsoft OAuth */}
        <MicrosoftButton callbackURL="/" />

        {/* Divider */}
        <div className="relative">
          <div className="absolute inset-0 flex items-center">
            <Separator className="w-full" />
          </div>
          <div className="relative flex justify-center text-xs uppercase">
            <span className="bg-white dark:bg-slate-900 px-2 text-muted-foreground">
              Or use email
            </span>
          </div>
        </div>

        {/* Magic Link */}
        <Button
          variant="outline"
          className="w-full"
          onClick={handleSendMagicLink}
          disabled={isLoading}
        >
          {isLoading ? (
            <>
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              Sending...
            </>
          ) : (
            "Send Magic Link to My Email"
          )}
        </Button>
      </CardContent>
    </Card>
  );
}