import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { PlaylistCard } from './PlaylistCard';
import { Playlist } from '../services/playlistService';
import { vi } from 'vitest';

vi.mock('react-router-dom', () => ({
  Link: ({ children, to }: { children: React.ReactNode; to: string }) => (
    <a href={to}>{children}</a>
  ),
}));

const mockPlaylist: Playlist = {
  id: 1,
  user_id: 1,
  title: 'My Playlist',
  description: 'A test playlist',
  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('PlaylistCard', () => {
  it('should render playlist information', () => {
    render(<PlaylistCard playlist={mockPlaylist} />);

    expect(screen.getByText('My Playlist')).toBeInTheDocument();
    expect(screen.getByText('A test playlist')).toBeInTheDocument();
    expect(screen.getByText('5 tracks')).toBeInTheDocument();
    expect(screen.getByText('par testuser')).toBeInTheDocument();
  });

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

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

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

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

  it('should handle singular track count', () => {
    const singleTrackPlaylist = { ...mockPlaylist, track_count: 1 };
    render(<PlaylistCard playlist={singleTrackPlaylist} />);

    expect(screen.getByText('1 track')).toBeInTheDocument();
  });

  it('should render cover image if provided', () => {
    const playlistWithCover = {
      ...mockPlaylist,
      cover_url: 'https://example.com/cover.jpg',
    };
    render(<PlaylistCard playlist={playlistWithCover} />);

    const img = screen.getByAltText('My Playlist');
    expect(img).toHaveAttribute('src', 'https://example.com/cover.jpg');
  });

  it('should render default music icon if no cover', () => {
    render(<PlaylistCard playlist={mockPlaylist} />);

    // Should have music icon (from lucide-react)
    const card = screen.getByText('My Playlist').closest('a');
    expect(card).toBeInTheDocument();
  });

  it('should link to playlist detail page', () => {
    render(<PlaylistCard playlist={mockPlaylist} />);

    const link = screen.getByText('My Playlist').closest('a');
    expect(link).toHaveAttribute('href', '/playlists/1');
  });
});
