/**
 * Tests responsive pour PlaylistList
 * T0504: Create Playlist Mobile Responsive
 */

import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import { PlaylistList } from './PlaylistList';
import type { Playlist } from '../types';

// Mock usePlaylists hook
vi.mock('../hooks/usePlaylist', () => ({
  usePlaylists: vi.fn(() => ({
    data: {
      playlists: [
        {
          id: '1',
          title: 'Test Playlist',
          description: 'Test Description',
          track_count: 5,
          is_public: true,
          created_at: '2024-01-01',
          updated_at: '2024-01-01',
          user_id: 1,
          user: { id: 1, username: 'testuser' },
          cover_url: '',
        } as unknown as Playlist,
      ],
      total: 1,
    },
    isLoading: false,
    error: null,
  })),
}));

describe('PlaylistList - Responsive', () => {
  it('should render grid layout on mobile (2 columns)', () => {
    // Mock window.matchMedia for mobile
    Object.defineProperty(window, 'matchMedia', {
      writable: true,
      value: vi.fn().mockImplementation((query) => ({
        matches: query === '(max-width: 640px)',
        media: query,
        onchange: null,
        addListener: vi.fn(),
        removeListener: vi.fn(),
        addEventListener: vi.fn(),
        removeEventListener: vi.fn(),
        dispatchEvent: vi.fn(),
      })),
    });

    const { container } = render(<PlaylistList view="grid" />);
    const gridContainer = container.querySelector('[role="list"]');

    expect(gridContainer).toHaveClass('grid');
    expect(gridContainer).toHaveClass('grid-cols-2');
  });

  it('should hide view toggle on mobile', () => {
    Object.defineProperty(window, 'matchMedia', {
      writable: true,
      value: vi.fn().mockImplementation((query) => ({
        matches: query === '(max-width: 640px)',
        media: query,
        onchange: null,
        addListener: vi.fn(),
        removeListener: vi.fn(),
        addEventListener: vi.fn(),
        removeEventListener: vi.fn(),
        dispatchEvent: vi.fn(),
      })),
    });

    const { container } = render(<PlaylistList />);
    const viewToggle = container.querySelector('[role="group"]');

    expect(viewToggle?.parentElement).toHaveClass('hidden');
  });

  it('should show full pagination text on desktop', () => {
    Object.defineProperty(window, 'matchMedia', {
      writable: true,
      value: vi.fn().mockImplementation((query) => ({
        matches: query === '(min-width: 640px)',
        media: query,
        onchange: null,
        addListener: vi.fn(),
        removeListener: vi.fn(),
        addEventListener: vi.fn(),
        removeEventListener: vi.fn(),
        dispatchEvent: vi.fn(),
      })),
    });

    render(<PlaylistList limit={1} />);

    const prevButton = screen.getByLabelText('Page précédente');
    expect(prevButton.textContent).toContain('Précédent');
  });

  it('should have touch-manipulation class on buttons', () => {
    render(<PlaylistList limit={1} />);

    const prevButton = screen.getByLabelText('Page précédente');
    expect(prevButton).toHaveClass('touch-manipulation');
  });

  it('should have minimum height on mobile buttons', () => {
    render(<PlaylistList limit={1} />);

    const prevButton = screen.getByLabelText('Page précédente');
    expect(prevButton).toHaveClass('min-h-[44px]');
  });
});
