State Management

// src/lib/query-client.ts
import { QueryClient } from '@tanstack/react-query'

const defaultQueryOptions = {
  queries: {
    staleTime: 5 * 60 * 1000,        // 5 minutes
    gcTime: 10 * 60 * 1000,          // 10 minutes (formerly cacheTime)
    retry: 1,
    retryDelay: (attemptIndex: number) => Math.min(1000 * 2 ** attemptIndex, 30000),
    refetchOnWindowFocus: process.env.NODE_ENV === 'production',
    refetchOnReconnect: true,
    refetchOnMount: false,
  },
  mutations: {
    retry: 1,
  },
}

export function createQueryClient(): QueryClient {
  return new QueryClient({
    defaultOptions: defaultQueryOptions,
  })
}

let browserQueryClient: QueryClient | undefined = undefined

export function getQueryClient(): QueryClient {
  // Server: always create new client
  if (typeof window === 'undefined') {
    return createQueryClient()
  }

  // Browser: reuse existing client
  if (!browserQueryClient) {
    browserQueryClient = createQueryClient()
  }

  return browserQueryClient
}

import { useMutation, useQueryClient } from '@tanstack/react-query'

export function useCreateOrganization() {
  const queryClient = useQueryClient()

  return useMutation({
    mutationFn: async (data: CreateOrganizationRequest) => {
      const response = await apiClient.post<CreateOrganizationResponse>(
        '/v1/organizations',
        data
      )
      return response.data
    },
    onSuccess: () => {
      // Invalidate and refetch user data (includes organizations list)
      setTimeout(() => {
        queryClient.invalidateQueries({ queryKey: authKeys.me })
      }, 500)
    },
  })
}

// Usage in component
function CreateOrgForm() {
  const createOrg = useCreateOrganization()
  
  const handleSubmit = async (data: FormData) => {
    try {
      await createOrg.mutateAsync(data)
      toast.success('Organization created!')
    } catch (error) {
      toast.error('Failed to create organization')
    }
  }
  
  return (
    <form onSubmit={handleSubmit}>
      <Button type="submit" disabled={createOrg.isPending}>
        {createOrg.isPending ? 'Creating...' : 'Create'}
      </Button>
    </form>
  )
}

export function useUpdateProfile() {
  const queryClient = useQueryClient()

  return useMutation({
    mutationFn: async (data: UpdateProfileRequest) => {
      const res = await apiClient.patch<UpdateProfileResponse>(
        '/v1/auth/profile',
        data
      )
      if (!res.success || !res.data) {
        throw new Error(res.error?.message || 'Failed to update profile')
      }
      return res.data
    },
    onSuccess: () => {
      // Invalidate user query to refetch with updated data
      queryClient.invalidateQueries({ queryKey: authKeys.me })
    },
  })
}

export function useCancelInvitation() {
  const queryClient = useQueryClient()

  return useMutation({
    mutationFn: async ({ organizationId, invitationId }) => {
      await apiClient.delete(
        `/v1/organizations/${organizationId}/invitations/${invitationId}`
      )
    },
    onSuccess: (_data, variables) => {
      // Invalidate only the specific invitations list
      setTimeout(() => {
        queryClient.invalidateQueries({
          queryKey: [ORGANIZATIONS_KEY, variables.organizationId, INVITATIONS_KEY],
        })
      }, 100)
    },
  })
}

'use client'

import { createContext, useContext, useState, useEffect, useMemo, useCallback } from 'react'
import { useUser } from '@/modules/auth/hooks/use-auth-api'
import type { OrganizationMembership } from '@/lib/api/types'

interface OrganizationContextValue {
  activeOrganization: OrganizationMembership | null
  setActiveOrganization: (org: OrganizationMembership | null) => void
  organizations: OrganizationMembership[]
  isLoading: boolean
  subdomain: string | null
}

const OrganizationContext = createContext<OrganizationContextValue | undefined>(undefined)

const ACTIVE_ORG_KEY = 'ryva:active-org-id'

export function OrganizationProvider({ children }: { children: React.ReactNode }) {
  const { data: user, isLoading: isUserLoading } = useUser()
  const [activeOrganization, setActiveOrganizationState] = useState<OrganizationMembership | null>(null)
  const subdomain = useMemo(() => getSubdomain(), [])

  // Memoize organizations to prevent re-renders
  const organizations = useMemo(() => user?.organizations || [], [user])

  // Initialize state based on subdomain and localStorage
  useEffect(() => {
    if (isUserLoading || !user) return

    if (subdomain) {
      const matchedOrg = organizations.find(
        org => org.organization_slug?.toLowerCase() === subdomain.toLowerCase()
      )
      if (matchedOrg) {
        setActiveOrganizationState(matchedOrg)
        localStorage.setItem(ACTIVE_ORG_KEY, matchedOrg.organization_id)
        return
      }
    }

    // Fallback to localStorage or first org
    const savedOrgId = localStorage.getItem(ACTIVE_ORG_KEY)
    const savedOrg = organizations.find(org => org.organization_id === savedOrgId)
    
    if (savedOrg) {
      setActiveOrganizationState(savedOrg)
    } else if (organizations.length > 0) {
      setActiveOrganizationState(organizations[0])
      localStorage.setItem(ACTIVE_ORG_KEY, organizations[0].organization_id)
    }
  }, [user, organizations, isUserLoading, subdomain])

  const setActiveOrganization = useCallback((org: OrganizationMembership | null) => {
    if (org === null) {
      setActiveOrganizationState(null)
      localStorage.removeItem(ACTIVE_ORG_KEY)
    } else {
      setActiveOrganizationState(org)
      localStorage.setItem(ACTIVE_ORG_KEY, org.organization_id)
    }
  }, [])

  const value = {
    activeOrganization,
    setActiveOrganization,
    organizations,
    isLoading: isUserLoading,
    subdomain,
  }

  return <OrganizationContext.Provider value={value}>{children}</OrganizationContext.Provider>
}

export function useOrganization() {
  const context = useContext(OrganizationContext)
  if (context === undefined) {
    throw new Error('useOrganization must be used within an OrganizationProvider')
  }
  return context
}