import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
import { OfflineModeIndicator } from '../OfflineModeIndicator';

// Mock MassiveLibraryManager
vi.mock('../../services/MassiveLibraryManager', () => ({
  default: vi.fn().mockImplementation(() => ({
    initialize: vi.fn().mockResolvedValue(undefined),
    getLibraryStatus: vi.fn().mockResolvedValue({
      totalSize: 1024 * 1024 * 100, // 100MB
      songCount: 50,
      deviceType: { type: 'mobile' },
      cacheStrategy: 'balanced',
      shards: [],
      compressionRatio: 0.8,
      availableSpace: 1024 * 1024 * 1024 // 1GB
    })
  }))
}));

// Mock navigator.onLine
Object.defineProperty(navigator, 'onLine', {
  writable: true,
  value: true
});

// Mock fetch for connection testing
global.fetch = vi.fn();

describe('OfflineModeIndicator', () => {
  beforeEach(() => {
    vi.clearAllMocks();
    (navigator as any).onLine = true;
    (global.fetch as any).mockResolvedValue({
      ok: true,
      status: 200
    });
  });

  afterEach(() => {
    vi.restoreAllMocks();
  });

  it('should create OfflineModeIndicator component', () => {
    expect(OfflineModeIndicator).toBeDefined();
    expect(typeof OfflineModeIndicator).toBe('function');
  });

  it('should handle navigator.onLine property', () => {
    expect(navigator.onLine).toBeDefined();
    expect(typeof navigator.onLine).toBe('boolean');
  });

  it('should handle custom events for cache refresh', () => {
    const mockEventListener = vi.fn();
    window.addEventListener = vi.fn();
    window.removeEventListener = vi.fn();
    
    // Test that event listeners can be added
    window.addEventListener('cache-refresh-start', mockEventListener);
    expect(window.addEventListener).toHaveBeenCalledWith('cache-refresh-start', mockEventListener);
  });

  it('should format cache size correctly', () => {
    // Test the formatCacheSize function logic
    const formatCacheSize = (bytes: number): string => {
      if (bytes === 0) return '0 B';
      const k = 1024;
      const sizes = ['B', 'KB', 'MB', 'GB'];
      const i = Math.floor(Math.log(bytes) / Math.log(k));
      return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
    };

    expect(formatCacheSize(0)).toBe('0 B');
    expect(formatCacheSize(1024)).toBe('1 KB');
    expect(formatCacheSize(1024 * 1024)).toBe('1 MB');
    expect(formatCacheSize(1024 * 1024 * 100)).toBe('100 MB');
  });

  it('should handle connection quality mapping', () => {
    const getConnectionIcon = (quality: string) => {
      switch (quality) {
        case 'excellent':
        case 'good':
        case 'poor':
          return '📶';
        case 'offline':
          return '📵';
        default:
          return '📶';
      }
    };

    expect(getConnectionIcon('excellent')).toBe('📶');
    expect(getConnectionIcon('offline')).toBe('📵');
  });
});