/**
 * OfflineIndicator Component Tests
 */

import { describe, it, expect, beforeEach } from 'vitest';
import { render } from '@testing-library/react';
import { OfflineIndicator } from './OfflineIndicator';
import { useOfflineStore } from '../../../lib/store/offline-store';

describe('Story 3.3: OfflineIndicator Component', () => {
  beforeEach(() => {
    // Reset store state before each test
    useOfflineStore.setState({
      isOnline: true,
      pendingCount: 0,
      lastSyncAt: null,
      syncing: false,
    });
  });

  describe('when online and synced', () => {
    it('should render nothing', () => {
      const { container } = render(<OfflineIndicator />);
      expect(container.firstChild).toBe(null);
    });
  });

  describe('when offline', () => {
    it('should show offline badge', () => {
      useOfflineStore.setState({ isOnline: false, pendingCount: 0 });

      const { getByRole, getByText } = render(<OfflineIndicator />);

      expect(getByRole('status')).toBeInTheDocument();
      expect(getByText('Offline - Saved locally')).toBeInTheDocument();
    });

    it('should have correct styling for offline state', () => {
      useOfflineStore.setState({ isOnline: false, pendingCount: 0 });

      const { getByRole } = render(<OfflineIndicator />);
      const badge = getByRole('status');

      expect(badge).toHaveClass('bg-slate-800');
      expect(badge).toHaveClass('text-white');
    });

    it('should include WifiOff icon', () => {
      useOfflineStore.setState({ isOnline: false, pendingCount: 0 });

      const { container } = render(<OfflineIndicator />);
      const svg = container.querySelector('svg');

      expect(svg).toBeInTheDocument();
    });
  });

  describe('when online with pending items', () => {
    it('should show pending count badge', () => {
      useOfflineStore.setState({ isOnline: true, pendingCount: 3 });

      const { getByRole, getByText } = render(<OfflineIndicator />);

      expect(getByRole('status')).toBeInTheDocument();
      expect(getByText('3 items to sync')).toBeInTheDocument();
    });

    it('should have correct styling for pending state', () => {
      useOfflineStore.setState({ isOnline: true, pendingCount: 3 });

      const { getByRole } = render(<OfflineIndicator />);
      const badge = getByRole('status');

      expect(badge).toHaveClass('bg-blue-100');
      expect(badge).toHaveClass('text-blue-700');
    });
  });

  describe('when syncing', () => {
    it('should show syncing badge with spinner', () => {
      useOfflineStore.setState({ isOnline: true, pendingCount: 3, syncing: true });

      const { getByRole, getByText } = render(<OfflineIndicator />);

      expect(getByRole('status')).toBeInTheDocument();
      expect(getByText('Syncing...')).toBeInTheDocument();
    });

    it('should include Loader2 icon with animation', () => {
      useOfflineStore.setState({ isOnline: true, pendingCount: 3, syncing: true });

      const { container } = render(<OfflineIndicator />);
      const svg = container.querySelector('svg');

      expect(svg).toBeInTheDocument();
      expect(svg).toHaveClass('animate-spin');
    });
  });

  describe('positioning', () => {
    it('should be fixed at top center of screen', () => {
      useOfflineStore.setState({ isOnline: false, pendingCount: 0 });

      const { container } = render(<OfflineIndicator />);
      const wrapper = container.firstChild as HTMLElement;

      expect(wrapper).toBeInTheDocument();
      expect(wrapper).toHaveClass('fixed');
      expect(wrapper).toHaveClass('top-4');
      expect(wrapper).toHaveClass('left-1/2');
      expect(wrapper).toHaveClass('-translate-x-1/2');
    });

    it('should have high z-index', () => {
      useOfflineStore.setState({ isOnline: false, pendingCount: 0 });

      const { container } = render(<OfflineIndicator />);
      const wrapper = container.firstChild as HTMLElement;

      expect(wrapper).toHaveClass('z-50');
    });
  });

  describe('accessibility', () => {
    it('should have role="status"', () => {
      useOfflineStore.setState({ isOnline: false, pendingCount: 0 });

      const { getByRole } = render(<OfflineIndicator />);
      expect(getByRole('status')).toBeInTheDocument();
    });

    it('should have aria-live="polite"', () => {
      useOfflineStore.setState({ isOnline: false, pendingCount: 0 });

      const { getByRole } = render(<OfflineIndicator />);
      expect(getByRole('status')).toHaveAttribute('aria-live', 'polite');
    });
  });
});
