/**
 * OfflineIndicator Component
 *
 * Story 3.3: Displays offline/sync status badge
 *
 * Architecture Compliance:
 * - Uses atomic selectors from OfflineStore
 * - Follows Logic Sandwich: UI -> Store (no direct DB access)
 * - Self-contained feature component
 */

'use client';

import { WifiOff, Cloud, Loader2 } from 'lucide-react';
import { useOfflineStore } from '../../../lib/store/offline-store';

/**
 * Offline status indicator component
 *
 * Shows a subtle badge when offline or syncing:
 * - Offline: "Offline - Saved locally" badge
 * - Syncing: "Syncing..." badge with spinner
 * - Online & synced: No badge (clean UX)
 */
export function OfflineIndicator() {
  const isOnline = useOfflineStore(s => s.isOnline);
  const pendingCount = useOfflineStore(s => s.pendingCount);
  const syncing = useOfflineStore(s => s.syncing);

  // Show nothing when online and synced
  if (isOnline && pendingCount === 0) {
    return null;
  }

  return (
    <div className="fixed top-4 left-1/2 -translate-x-1/2 z-50">
      <div
        className={`
          px-4 py-2 rounded-full shadow-lg text-sm font-medium flex items-center gap-2
          ${isOnline ? 'bg-blue-100 text-blue-700' : 'bg-slate-800 text-white'}
        `}
        role="status"
        aria-live="polite"
      >
        {!isOnline && (
          <>
            <WifiOff className="w-4 h-4" aria-hidden="true" />
            <span>Offline - Saved locally</span>
          </>
        )}

        {isOnline && pendingCount > 0 && !syncing && (
          <>
            <Cloud className="w-4 h-4" aria-hidden="true" />
            <span>{pendingCount} items to sync</span>
          </>
        )}

        {syncing && (
          <>
            <Loader2 className="w-4 h-4 animate-spin" aria-hidden="true" />
            <span>Syncing...</span>
          </>
        )}
      </div>
    </div>
  );
}
