"use client";

import { useEffect } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { useAuth } from "@/lib/auth";
import { Loader2 } from "lucide-react";
import { Suspense } from "react";

function CallbackInner() {
  const router = useRouter();
  const params = useSearchParams();
  const { login } = useAuth();

  useEffect(() => {
    const token = params.get("token");
    if (token) {
      login(token);
      router.replace("/dashboard");
    } else {
      router.replace("/login");
    }
  }, [params, login, router]);

  return (
    <div className="min-h-screen flex items-center justify-center bg-dark">
      <div className="text-center">
        <Loader2 size={40} className="mx-auto text-primary animate-spin mb-4" />
        <p className="text-muted">Memproses login...</p>
      </div>
    </div>
  );
}

export default function AuthCallbackPage() {
  return (
    <Suspense fallback={
      <div className="min-h-screen flex items-center justify-center bg-dark">
        <Loader2 size={40} className="mx-auto text-primary animate-spin" />
      </div>
    }>
      <CallbackInner />
    </Suspense>
  );
}