"use client"

import React, { Suspense, lazy, useEffect } from "react";
import { useRouter } from "next/navigation";


// Use lazy loading for the form component
const LoginForm = lazy(() => import('./components/LoginForm'));

// Background Component
const AuthBackground = () => (
  <div className="absolute inset-0 overflow-hidden pointer-events-none">
    <div className="absolute inset-0 bg-black" />
    <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-indigo-500/20 via-purple-500/10 to-transparent" />
    <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500/20 rounded-full blur-3xl opacity-50 animate-pulse" />
    <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-purple-500/20 rounded-full blur-3xl opacity-50 animate-pulse delay-1000" />
  </div>
);

// Loading State
function LoginLoading() {
  return (
    <div className="w-full max-w-md p-8 space-y-8 bg-black/40 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl text-center relative z-10">
      <div className="mt-6 flex flex-col items-center justify-center">
        <div className="w-12 h-12 border-4 border-t-indigo-500 border-b-transparent border-l-transparent border-r-transparent rounded-full animate-spin"></div>
        <p className="mt-4 text-zinc-400">Loading secure login...</p>
      </div>
    </div>
  );
}

// Main page component
export default function LoginPage() {
  const router = useRouter();

  useEffect(() => {
    router.prefetch("/dashboard");
  }, [router]);

  return (
    <div className="relative flex items-center justify-center min-h-screen overflow-hidden">
      <AuthBackground />
      <div className="flex flex-col items-center w-full px-4">
        <Suspense fallback={<LoginLoading />}>
          <LoginForm />
        </Suspense>
      </div>
    </div>
  );
}