'use client'

// ── Online / offline detection ───────────────────────────────────────────────
// React context + hook for app-wide connection state.
// Uses navigator.onLine + window events + optional Supabase ping.

import {
  createContext,
  useContext,
  useEffect,
  useState,
  useCallback,
  type ReactNode,
} from 'react'
import type { ConnectionState } from './types'

const ConnectionContext = createContext<ConnectionState>({
  isOnline:      true,
  lastOnlineAt:  null,
  lastOfflineAt: null,
})

// ── Provider ──────────────────────────────────────────────────────────────────

interface ProviderProps { children: ReactNode }

export function OnlineStatusProvider({ children }: ProviderProps) {
  const [state, setState] = useState<ConnectionState>(() => ({
    isOnline:      typeof navigator !== 'undefined' ? navigator.onLine : true,
    lastOnlineAt:  typeof navigator !== 'undefined' && navigator.onLine ? new Date().toISOString() : null,
    lastOfflineAt: null,
  }))

  const handleOnline = useCallback(() => {
    setState((prev) => ({
      isOnline:     true,
      lastOnlineAt: new Date().toISOString(),
      lastOfflineAt: prev.lastOfflineAt,
    }))
  }, [])

  const handleOffline = useCallback(() => {
    setState((prev) => ({
      isOnline:      false,
      lastOnlineAt:  prev.lastOnlineAt,
      lastOfflineAt: new Date().toISOString(),
    }))
  }, [])

  useEffect(() => {
    window.addEventListener('online',  handleOnline)
    window.addEventListener('offline', handleOffline)
    return () => {
      window.removeEventListener('online',  handleOnline)
      window.removeEventListener('offline', handleOffline)
    }
  }, [handleOnline, handleOffline])

  return (
    <ConnectionContext.Provider value={state}>
      {children}
    </ConnectionContext.Provider>
  )
}

// ── Hook ──────────────────────────────────────────────────────────────────────

export function useOnlineStatus(): ConnectionState {
  return useContext(ConnectionContext)
}

/** Convenience boolean hook for components that only need isOnline */
export function useIsOnline(): boolean {
  return useContext(ConnectionContext).isOnline
}