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

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

export function DevicePage() {
  const { session, userKeyState, refreshUserKeyState } = useAuth();
  const navigate = useNavigate();
  if (!session) return null;
  const onComplete = async () => {
    await refreshUserKeyState();
    navigate('/chats', { replace: true });
  };
  return (
    <main className="flex min-h-screen items-center justify-center bg-ink-950 p-6">
      <div className="w-full max-w-md">
        {userKeyState.status === 'needs-setup' && (
          <UserKeySetup userId={session.user.id} onComplete={onComplete} />
        )}
        {userKeyState.status === 'needs-unlock' && (
          <UserKeyUnlock
            userId={session.user.id}
            hasRecovery={userKeyState.hasRecovery}
            lockedUntil={userKeyState.lockedUntil}
            onUnlocked={onComplete}
          />
        )}
      </div>
    </main>
  );
}