User Profile

const user = gately.getUser()

interface User {
  id: string
  email: string
  full_name: string | null
  avatar_url: string | null
  plan_id: string
  status: 'active' | 'inactive' | 'pending'
  metadata: Record<string, any>
  created_at: string
  last_login_at: string | null
}

const profile = await gately.getUserProfile()

interface UserProfile extends User {
  subscription?: {
    plan_id: string
    status: string
    current_period_end: string
  }
  stats?: {
    login_count: number
    last_activity: string
  }
}

import { useAuth } from '@gately/sdk'

function UserProfile() {
  const { user, isLoading } = useAuth()

  if (isLoading) {
    return <Spinner />
  }

  if (!user) {
    return <p>Please log in</p>
  }

  return (
    <div className="profile">
      {user.avatar_url && (
        <img src={user.avatar_url} alt={user.full_name} />
      )}
      <h2>{user.full_name || 'Anonymous'}</h2>
      <p>{user.email}</p>
      <span className="plan-badge">{user.plan_id}</span>
    </div>
  )
}

const avatarUrl = gately.getAvatarUrl()

// Returns avatar_url from user or metadata
// Returns null if no avatar set

const user = gately.getUser()

// Access custom fields
const company = user.metadata?.company
const role = user.metadata?.role
const preferences = user.metadata?.preferences

function ProfileCard() {
  const { user } = useAuth()

  if (!user) return null

  return (
    <div className="profile-card">
      <Avatar 
        src={user.avatar_url} 
        fallback={user.full_name?.[0] || user.email[0]} 
      />
      <div className="info">
        <h3>{user.full_name || 'User'}</h3>
        <p>{user.email}</p>
      </div>
      <PlanBadge plan={user.plan_id} />
    </div>
  )
}

function ProfileDropdown() {
  const { user, logout } = useAuth()
  const [open, setOpen] = useState(false)

  if (!user) return null

  return (
    <div className="dropdown">
      <button onClick={() => setOpen(!open)}>
        <Avatar src={user.avatar_url} />
        <span>{user.full_name || user.email}</span>
      </button>
      
      {open && (
        <div className="dropdown-menu">
          <Link to="/profile">Profile</Link>
          <Link to="/settings">Settings</Link>
          <Link to="/billing">Billing</Link>
          <hr />
          <button onClick={logout}>Log Out</button>
        </div>
      )}
    </div>
  )
}

const user = gately.getUser()

// Check plan
if (user.plan_id === 'pro') {
  // Show pro features
}

// Check if paid user
const isPaid = ['pro', 'business', 'enterprise'].includes(user.plan_id)

const user = gately.getUser()

switch (user.status) {
  case 'active':
    // Normal access
    break
  case 'pending':
    // Email verification pending
    showVerificationPrompt()
    break
  case 'inactive':
    // Account disabled
    showReactivationPrompt()
    break
}