/**
 * React hook for sync engine
 * Provides sync status, pending count, and manual sync trigger
 */

import { useEffect, useState } from 'react';
import { syncEngine, type SyncStatusSnapshot } from '../lib/sync-engine';

export function useSync() {
  const [status, setStatus] = useState<SyncStatusSnapshot>(() => syncEngine.getStatus());

  useEffect(() => {
    const unsubscribe = syncEngine.subscribe((snapshot) => {
      setStatus(snapshot);
    });

    void syncEngine.refreshStatus();

    return unsubscribe;
  }, []);

  const syncNow = async () => {
    const result = await syncEngine.syncNow();
    await syncEngine.refreshStatus();
    return result;
  };

  return {
    ...status,
    syncNow,
    refresh: () => syncEngine.refreshStatus(),
  };
}