import { describe, it, expect, afterEach } from 'vitest';
import { render, screen, cleanup } from '@testing-library/svelte';
import MangaCard from './MangaCard.svelte';
import type { Manga } from '$lib/api/client';

afterEach(() => cleanup());

const baseManga: Manga = {
    id: 'm1',
    title: 'Berserk',
    status: 'ongoing',
    alt_titles: [],
    description: null,
    cover_image_path: null,
    created_at: '2026-01-01T00:00:00Z',
    updated_at: '2026-01-01T00:00:00Z'
};

describe('MangaCard badges & overlays', () => {
    it('does not render an unread badge when unreadCount is omitted', () => {
        render(MangaCard, { props: { manga: baseManga } });
        expect(screen.queryByTestId('unread-badge')).toBeNull();
    });

    it('does not render an unread badge when unreadCount is 0', () => {
        render(MangaCard, { props: { manga: baseManga, unreadCount: 0 } });
        expect(screen.queryByTestId('unread-badge')).toBeNull();
    });

    it('renders the unread badge with the count when unreadCount > 0', () => {
        render(MangaCard, { props: { manga: baseManga, unreadCount: 7 } });
        const badge = screen.getByTestId('unread-badge');
        expect(badge.textContent?.trim()).toBe('7');
    });

    it('caps the unread badge at 99+ for very large counts', () => {
        render(MangaCard, { props: { manga: baseManga, unreadCount: 250 } });
        const badge = screen.getByTestId('unread-badge');
        expect(badge.textContent?.trim()).toBe('99+');
    });

    it('does not render a progress bar when progress is omitted', () => {
        render(MangaCard, { props: { manga: baseManga } });
        expect(screen.queryByTestId('cover-progress')).toBeNull();
    });

    it('does not render a progress bar at exactly 0 (no reads yet)', () => {
        render(MangaCard, { props: { manga: baseManga, progress: 0 } });
        expect(screen.queryByTestId('cover-progress')).toBeNull();
    });

    it('renders the progress overlay clamped to 0..1 and reflects the value as a width style', () => {
        const { rerender } = render(MangaCard, {
            props: { manga: baseManga, progress: 0.4 }
        });
        const bar = screen.getByTestId('cover-progress-fill');
        expect((bar as HTMLElement).style.width).toBe('40%');

        rerender({ manga: baseManga, progress: 1.5 });
        expect((screen.getByTestId('cover-progress-fill') as HTMLElement).style.width).toBe('100%');

        rerender({ manga: baseManga, progress: -0.2 });
        expect(screen.queryByTestId('cover-progress')).toBeNull();
    });
});