/**
 * Tests d'accessibilité pour les composants de playlist
 * T0503: Create Playlist Accessibility Improvements
 */

import { render, screen } from '@testing-library/react';
import { axe, toHaveNoViolations } from 'jest-axe';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { BrowserRouter } from 'react-router-dom';
import { PlaylistCard } from './PlaylistCard';
import { PlaylistForm } from './PlaylistForm';
import { PlaylistSearch } from './PlaylistSearch';
import { PlaylistRecommendations } from './PlaylistRecommendations';
import type { Playlist } from '../types';

expect.extend(toHaveNoViolations);

const mockPlaylist: Playlist = {
  id: 1,
  user_id: 1,
  title: 'Test Playlist',
  description: 'Test Description',
  is_public: true,
  track_count: 5,
  follower_count: 10,
  created_at: new Date().toISOString(),
  updated_at: new Date().toISOString(),
  user: {
    id: 1,
    username: 'testuser',
    email: 'test@example.com',
  },
};

const queryClient = new QueryClient({
  defaultOptions: {
    queries: { retry: false },
    mutations: { retry: false },
  },
});

const TestWrapper = ({ children }: { children: React.ReactNode }) => (
  <QueryClientProvider client={queryClient}>
    <BrowserRouter>{children}</BrowserRouter>
  </QueryClientProvider>
);

describe('PlaylistCard Accessibility', () => {
  it('should have no accessibility violations', async () => {
    const { container } = render(
      <TestWrapper>
        <PlaylistCard playlist={mockPlaylist} />
      </TestWrapper>,
    );
    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });

  it('should have proper ARIA labels', () => {
    render(
      <TestWrapper>
        <PlaylistCard playlist={mockPlaylist} />
      </TestWrapper>,
    );

    const link = screen.getByRole('link');
    expect(link).toHaveAttribute('aria-label');
    expect(link.getAttribute('aria-label')).toContain('Test Playlist');
  });

  it('should have proper alt text for images', () => {
    render(
      <TestWrapper>
        <PlaylistCard playlist={mockPlaylist} />
      </TestWrapper>,
    );

    const image = screen.getByAltText(/Couverture de la playlist/i);
    expect(image).toBeInTheDocument();
  });
});

describe('PlaylistForm Accessibility', () => {
  it('should have no accessibility violations', async () => {
    const { container } = render(
      <TestWrapper>
        <PlaylistForm onSubmit={() => {}} />
      </TestWrapper>,
    );
    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });

  it('should have proper ARIA labels for form fields', () => {
    render(
      <TestWrapper>
        <PlaylistForm onSubmit={() => {}} />
      </TestWrapper>,
    );

    const titleInput = screen.getByLabelText(/titre/i);
    expect(titleInput).toHaveAttribute('aria-required', 'true');
    expect(titleInput).toHaveAttribute('aria-invalid', 'false');

    const descriptionInput = screen.getByLabelText(/description/i);
    expect(descriptionInput).toBeInTheDocument();
  });

  it('should have proper form label', () => {
    render(
      <TestWrapper>
        <PlaylistForm onSubmit={() => {}} />
      </TestWrapper>,
    );

    const form =
      screen.getByRole('form', { hidden: true }) ||
      screen.getByLabelText(/formulaire/i);
    expect(form).toBeInTheDocument();
  });
});

describe('PlaylistSearch Accessibility', () => {
  it('should have no accessibility violations', async () => {
    const { container } = render(
      <TestWrapper>
        <PlaylistSearch />
      </TestWrapper>,
    );
    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });

  it('should have proper ARIA labels for search', () => {
    render(
      <TestWrapper>
        <PlaylistSearch />
      </TestWrapper>,
    );

    const searchRegion = screen.getByRole('search');
    expect(searchRegion).toHaveAttribute(
      'aria-label',
      'Recherche de playlists',
    );

    const searchInput = screen.getByLabelText('Rechercher des playlists');
    expect(searchInput).toBeInTheDocument();
  });

  it('should have accessible filter button', () => {
    render(
      <TestWrapper>
        <PlaylistSearch />
      </TestWrapper>,
    );

    const filterButton = screen.getByLabelText(/afficher.*filtres/i);
    expect(filterButton).toHaveAttribute('aria-expanded', 'false');
  });
});

describe('PlaylistRecommendations Accessibility', () => {
  it('should have no accessibility violations', async () => {
    const { container } = render(
      <TestWrapper>
        <PlaylistRecommendations />
      </TestWrapper>,
    );
    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });

  it('should have proper ARIA labels', () => {
    render(
      <TestWrapper>
        <PlaylistRecommendations />
      </TestWrapper>,
    );

    // Wait for loading state to finish
    const region = screen.queryByRole('region', {
      name: /Playlists recommandées/i,
    });
    if (region) {
      expect(region).toHaveAttribute('aria-label', 'Playlists recommandées');
    }
  });
});
