'use client'

import { useEffect } from 'react'
import { useUserSettingsStore } from '@/stores/user-settings/store'
import type { UserSettings } from '@/lib/user-settings'

interface Props {
  initial: UserSettings
  isDemo: boolean
}

/**
 * PBI-76: hydrates the user-settings Zustand store with server-rendered prefs
 * and opens an SSE subscription so other tabs/devices of the same user
 * immediately see changes. Demo accounts skip the SSE subscription — their
 * settings live only in-memory.
 */
export function UserSettingsBridge({ initial, isDemo }: Props) {
  const hydrate = useUserSettingsStore((s) => s.hydrate)
  const applyServerPatch = useUserSettingsStore((s) => s.applyServerPatch)

  useEffect(() => {
    hydrate(initial, isDemo)
  }, [hydrate, initial, isDemo])

  useEffect(() => {
    if (isDemo) return
    const es = new EventSource('/api/realtime/user-settings')
    es.onmessage = (e) => {
      try {
        const patch = JSON.parse(e.data) as Partial<UserSettings>
        applyServerPatch(patch)
      } catch {
        // ignore malformed event
      }
    }
    return () => es.close()
  }, [applyServerPatch, isDemo])

  return null
}