'use client';

import { usePathname, useRouter } from 'next/navigation';
import { useSession, signOut } from '@/lib/auth-client';

export function Topbar(): React.ReactElement {
  const { data: session } = useSession();
  const router = useRouter();
  const pathname = usePathname();

  if (pathname.startsWith('/chat')) {
    return <></>;
  }

  async function handleSignOut(): Promise<void> {
    await signOut();
    router.replace('/login');
  }

  return (
    <header className="sticky top-0 z-20 flex h-14 items-center justify-between border-b border-surface-border bg-surface-card/80 px-6 backdrop-blur-sm">
      <div />

      <div className="flex items-center gap-4">
        {session?.user ? (
          <>
            <span className="text-sm text-text-secondary">
              {session.user.name ?? session.user.email}
            </span>
            <button
              type="button"
              onClick={handleSignOut}
              className="rounded-md px-3 py-1.5 text-sm text-text-muted transition-colors hover:bg-surface-elevated hover:text-text-primary"
            >
              Sign out
            </button>
          </>
        ) : (
          <span className="text-sm text-text-muted">Not signed in</span>
        )}
      </div>
    </header>
  );
}