CONNECTING (0) → OPEN (1) → CLOSING (2) → CLOSED (3)

type WsState =
  | { status: 'idle' }
  | { status: 'connecting' }
  | { status: 'open'; socket: WebSocket }
  | { status: 'closed'; code: number; reason: string }
  | { status: 'error'; error: Event }

// A robust WebSocket hook with exponential backoff reconnection
function useWebSocket(url: string) {
  const [state, setState] = useState<WsState>({ status: 'idle' })
  const reconnectDelay = useRef(1000)
  const socketRef = useRef<WebSocket | null>(null)
  const isMounted = useRef(true)

  const connect = useCallback(() => {
    setState({ status: 'connecting' })
    const ws = new WebSocket(url)
    socketRef.current = ws

    ws.onopen = () => {
      if (!isMounted.current) return
      reconnectDelay.current = 1000  // reset backoff on successful connect
      setState({ status: 'open', socket: ws })
    }

    ws.onclose = (event) => {
      if (!isMounted.current) return
      setState({ status: 'closed', code: event.code, reason: event.reason })

      // Exponential backoff reconnect — only for abnormal closures
      if (event.code !== 1000) {
        const delay = reconnectDelay.current
        reconnectDelay.current = Math.min(delay * 2, 30_000)  // cap at 30 seconds
        setTimeout(connect, delay)
      }
    }

    ws.onerror = (error) => {
      if (!isMounted.current) return
      setState({ status: 'error', error })
    }
  }, [url])

  useEffect(() => {
    isMounted.current = true
    connect()
    return () => {
      isMounted.current = false
      socketRef.current?.close(1000, 'Component unmounted')
    }
  }, [connect])

  return { state, socket: socketRef.current }
}

function useServerSentEvents<T>(url: string, onMessage: (data: T) => void) {
  useEffect(() => {
    const source = new EventSource(url, { withCredentials: true })

    source.onmessage = (event) => {
      try {
        onMessage(JSON.parse(event.data) as T)
      } catch {
        console.error('Failed to parse SSE payload:', event.data)
      }
    }

    source.onerror = () => {
      // EventSource automatically attempts reconnection — log but don't intervene
      console.warn('SSE connection error — browser will reconnect automatically')
    }

    return () => source.close()
  }, [url, onMessage])
}

// Usage — live notification feed
function NotificationBell({ userId }: { userId: string }) {
  const [notifications, setNotifications] = useState<Notification[]>([])

  const handleNotification = useCallback((notif: Notification) => {
    setNotifications((prev) => [notif, ...prev].slice(0, 50))  // keep last 50
  }, [])

  useServerSentEvents(`/api/notifications/stream?userId=${userId}`, handleNotification)

  return <Bell count={notifications.filter((n) => !n.read).length} />
}

// MERGE — appropriate for chat messages (append to list)
ws.onmessage = (event) => {
  const newMessage: Message = JSON.parse(event.data)
  queryClient.setQueryData<Message[]>(['messages', roomId], (prev = []) => [
    ...prev,
    newMessage,
  ])
}

// INVALIDATE — appropriate for inventory counts (server is source of truth)
ws.onmessage = (event) => {
  const { productId } = JSON.parse(event.data)
  queryClient.invalidateQueries({ queryKey: ['products', productId] })
}

// The logout-everywhere pattern — fewer than 10 lines
const AUTH_CHANNEL = 'auth-events'

// In the auth logic (fires after logout):
function broadcastLogout() {
  const channel = new BroadcastChannel(AUTH_CHANNEL)
  channel.postMessage({ type: 'LOGGED_OUT' })
  channel.close()
}

// In the app root (every tab listens):
function useAuthSync() {
  useEffect(() => {
    const channel = new BroadcastChannel(AUTH_CHANNEL)

    channel.onmessage = (event) => {
      if (event.data.type === 'LOGGED_OUT') {
        // Clear local auth state and redirect to login
        queryClient.clear()
        router.push('/login')
      }
    }

    return () => channel.close()
  }, [])
}

useEffect(() => {
  const handleStorageChange = (e: StorageEvent) => {
    if (e.key === 'auth-session' && e.newValue === null) {
      // Another tab cleared the session — logout here too
      handleLogout()
    }
  }
  window.addEventListener('storage', handleStorageChange)
  return () => window.removeEventListener('storage', handleStorageChange)
}, [])

import { create } from 'zustand'
import { persist, createJSONStorage } from 'zustand/middleware'

type PreferenceStore = {
  theme: 'light' | 'dark'
  sidebarCollapsed: boolean
  setTheme: (t: 'light' | 'dark') => void
  toggleSidebar: () => void
}

const usePreferenceStore = create<PreferenceStore>()(
  persist(
    (set) => ({
      theme: 'dark',
      sidebarCollapsed: false,
      setTheme: (theme) => set({ theme }),
      toggleSidebar: () => set((s) => ({ sidebarCollapsed: !s.sidebarCollapsed })),
    }),
    {
      name: 'app-preferences',     // localStorage key
      version: 2,                  // increment when store shape changes
      storage: createJSONStorage(() => localStorage),

      // Migration function — handles shape changes between versions
      migrate: (persistedState: unknown, version: number) => {
        if (version === 1) {
          // Version 1 had `darkMode: boolean` instead of `theme: 'light' | 'dark'`
          const old = persistedState as { darkMode: boolean }
          return {
            theme: old.darkMode ? 'dark' : 'light',
            sidebarCollapsed: false,
          }
        }
        return persistedState as PreferenceStore
      },
    }
  )
)

// A simple offline mutation queue using IndexedDB (via idb library)
import { openDB } from 'idb'

const db = await openDB('offline-queue', 1, {
  upgrade(db) {
    db.createObjectStore('mutations', { keyPath: 'id', autoIncrement: true })
  },
})

// Queue a mutation when offline
async function queueMutation(mutation: { type: string; payload: unknown }) {
  await db.add('mutations', { ...mutation, createdAt: Date.now() })
}

// Drain the queue when back online
async function drainQueue() {
  const mutations = await db.getAll('mutations')
  for (const mutation of mutations) {
    try {
      await applyMutation(mutation)
      await db.delete('mutations', mutation.id)
    } catch {
      break  // stop on first failure — maintain ordering
    }
  }
}

// Listen for network restoration
window.addEventListener('online', drainQueue)