import { describe, it, expect, vi, beforeEach } from 'vitest';
import React from 'react';

// Mock IntersectionObserver
class MockIntersectionObserver {
  observe = vi.fn();
  unobserve = vi.fn();
  disconnect = vi.fn();
}
vi.stubGlobal('IntersectionObserver', MockIntersectionObserver);

import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { AudioPlayer } from './AudioPlayer';
import { LayoutProvider } from '../../../contexts/LayoutContext';

// Mock useLayout since it's used inside AudioPlayer
vi.mock('../../../contexts/LayoutContext', async () => {
  const actual = await vi.importActual('../../../contexts/LayoutContext');
  return {
    ...actual,
    useLayout: vi.fn(() => ({
      sidebarExpanded: true,
      sidebarWidth: 280,
      assistenteExpanded: false,
    })),
  };
});

// Mock HTMLAudioElement
beforeEach(() => {
  vi.clearAllMocks();
  window.HTMLMediaElement.prototype.play = vi.fn().mockResolvedValue(undefined);
  window.HTMLMediaElement.prototype.pause = vi.fn();
  window.HTMLMediaElement.prototype.load = vi.fn();
});

describe('AudioPlayer (Unified)', () => {
  describe('Bar Variant', () => {
    it('renders nothing when isOpen is false', () => {
      const { container } = render(
        <LayoutProvider>
          <AudioPlayer variant="bar" isOpen={false} onClose={vi.fn()} />
        </LayoutProvider>
      );
      expect(container.firstChild).toBeNull();
    });

    it('renders correctly when open', () => {
      render(
        <LayoutProvider>
          <AudioPlayer variant="bar" isOpen={true} onClose={vi.fn()} title="Test Track" />
        </LayoutProvider>
      );
      expect(screen.getByText('Test Track')).toBeInTheDocument();
    });

    it('calls onClose when close button is clicked', () => {
      const onClose = vi.fn();
      render(
        <LayoutProvider>
          <AudioPlayer variant="bar" isOpen={true} onClose={onClose} />
        </LayoutProvider>
      );

      const closeButton = screen.getByLabelText('Fechar player');
      fireEvent.click(closeButton);
      expect(onClose).toHaveBeenCalled();
    });
  });

  describe('Card Variant', () => {
    it('renders card layout by default', () => {
      render(
        <LayoutProvider>
          <AudioPlayer title="Card Track" />
        </LayoutProvider>
      );
      expect(screen.getByText('Card Track')).toBeInTheDocument();
      // Should NOT have fixed position by default
      const player = screen.getByText('Card Track').closest('.fixed');
      expect(player).toBeNull();
    });
  });

  describe('Functionality', () => {
    it('toggles playback status icons', async () => {
      render(
        <LayoutProvider>
          <AudioPlayer title="Functional Track" variant="bar" src="test.mp3" />
        </LayoutProvider>
      );

      const playButton = screen.getByRole('button', { name: /Reproduzir/i });
      fireEvent.click(playButton);

      // The 'bar' variant uses createPortal into document.body, so we must
      // search the entire document for the audio element, not just the container.
      const audio = document.body.querySelector('audio');
      if (audio) fireEvent(audio, new Event('play'));

      await waitFor(() => {
        expect(screen.getByRole('button', { name: /Pausar/i })).toBeInTheDocument();
      });
    });
  });
});