/**
 * Tests for PlaylistHeader Component
 * FE-TEST-007: Test playlist header component
 */

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

// Mock PlaylistFollowButton
vi.mock('./PlaylistFollowButton', () => ({
  PlaylistFollowButton: ({ playlistId }: any) => (
    <button data-testid="follow-button">Follow</button>
  ),
}));

const mockPlaylist: Playlist = {
  id: '1',
  user_id: '1',
  title: 'Test Playlist',
  description: 'Test Description',
  is_public: true,
  track_count: 5,
  created_at: '2024-01-01T00:00:00Z',
  updated_at: '2024-01-01T00:00:00Z',
  user: {
    id: '1',
    username: 'testuser',
  },
};

describe('PlaylistHeader', () => {
  it('should render playlist title', () => {
    render(<PlaylistHeader playlist={mockPlaylist} />);

    expect(screen.getByText('Test Playlist')).toBeInTheDocument();
  });

  it('should render playlist description', () => {
    render(<PlaylistHeader playlist={mockPlaylist} />);

    expect(screen.getByText('Test Description')).toBeInTheDocument();
  });

  it('should render public badge for public playlist', () => {
    render(<PlaylistHeader playlist={mockPlaylist} />);

    expect(screen.getByText('Public')).toBeInTheDocument();
  });

  it('should render private badge for private playlist', () => {
    const privatePlaylist = {
      ...mockPlaylist,
      is_public: false,
    };

    render(<PlaylistHeader playlist={privatePlaylist} />);

    expect(screen.getByText('Privé')).toBeInTheDocument();
  });

  it('should display track count', () => {
    render(<PlaylistHeader playlist={mockPlaylist} />);

    expect(screen.getByText(/5 track/i)).toBeInTheDocument();
  });

  it('should display creator username', () => {
    render(<PlaylistHeader playlist={mockPlaylist} />);

    expect(screen.getByText(/par testuser/i)).toBeInTheDocument();
  });

  it('should display creation date', () => {
    render(<PlaylistHeader playlist={mockPlaylist} />);

    expect(screen.getByText(/créée le/i)).toBeInTheDocument();
  });

  it('should render follow button', () => {
    render(<PlaylistHeader playlist={mockPlaylist} />);

    expect(screen.getByTestId('follow-button')).toBeInTheDocument();
  });

  it('should render cover image when available', () => {
    const playlistWithCover = {
      ...mockPlaylist,
      cover_url: 'https://example.com/cover.jpg',
    };

    render(<PlaylistHeader playlist={playlistWithCover} />);

    const coverImage = screen.getByAltText(/couverture de la playlist/i);
    expect(coverImage).toBeInTheDocument();
    expect(coverImage).toHaveAttribute('src', 'https://example.com/cover.jpg');
  });

  it('should render default cover when no cover_url', () => {
    render(<PlaylistHeader playlist={mockPlaylist} />);

    // Should have a placeholder for cover
    const coverPlaceholder = screen.getByLabelText(
      /pas de couverture pour la playlist/i,
    );
    expect(coverPlaceholder).toBeInTheDocument();
  });

  it('should apply custom className', () => {
    const { container } = render(
      <PlaylistHeader playlist={mockPlaylist} className="custom-class" />,
    );

    const card = container.querySelector('.custom-class');
    expect(card).toBeInTheDocument();
  });

  it('should handle playlist without description', () => {
    const playlistWithoutDesc = {
      ...mockPlaylist,
      description: undefined,
    };

    render(<PlaylistHeader playlist={playlistWithoutDesc} />);

    expect(screen.getByText('Test Playlist')).toBeInTheDocument();
    expect(screen.queryByText('Test Description')).not.toBeInTheDocument();
  });

  it('should handle playlist without user', () => {
    const playlistWithoutUser = {
      ...mockPlaylist,
      user: undefined,
    };

    render(<PlaylistHeader playlist={playlistWithoutUser} />);

    expect(screen.getByText('Test Playlist')).toBeInTheDocument();
    expect(screen.queryByText(/par testuser/i)).not.toBeInTheDocument();
  });

  it('should display singular track count', () => {
    const singleTrackPlaylist = {
      ...mockPlaylist,
      track_count: 1,
    };

    render(<PlaylistHeader playlist={singleTrackPlaylist} />);

    expect(screen.getByText(/1 track$/)).toBeInTheDocument();
  });

  it('should display plural track count', () => {
    render(<PlaylistHeader playlist={mockPlaylist} />);

    expect(screen.getByText(/5 tracks/)).toBeInTheDocument();
  });
});
