import { useNavigate } from 'react-router-dom';

import { DeviceRegistration } from '../components/DeviceRegistration';
import { useAuth } from '../context/AuthContext';

export function DevicePage() {
  const { session, profile, setDevice } = useAuth();
  const navigate = useNavigate();

  if (!session) return null; // Guarded by RequireAuth, but be defensive.

  const defaultName =
    (profile?.displayName ?? profile?.username ?? 'Desktop') + ' Desktop';

  return (
    <main className="relative flex min-h-screen items-center justify-center overflow-hidden bg-ink-950 px-5 py-10 text-neutral-100 sm:px-8">
      <BackgroundStage />
      <div className="relative z-10 w-full max-w-md">
        <DeviceRegistration
          userId={session.user.id}
          defaultName={defaultName}
          onRegistered={(device) => {
            setDevice(device);
            navigate('/chats', { replace: true });
          }}
        />
      </div>
    </main>
  );
}

function BackgroundStage() {
  return (
    <div aria-hidden="true" className="pointer-events-none absolute inset-0">
      <div className="bg-grid absolute inset-0 opacity-[0.28]" />
      <div className="absolute -left-32 top-1/4 h-[460px] w-[460px] rounded-full bg-brand-500/25 blur-3xl" />
      <div className="absolute -right-32 bottom-0 h-[460px] w-[460px] rounded-full bg-fuchsia-500/15 blur-3xl" />
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,transparent_45%,rgba(5,5,7,0.65)_100%)]" />
    </div>
  );
}
