import React from 'react';
import { renderInAppContext } from '@theorchard/suite-testing';
import ArtworkValidationPopover from 'src/components/artworkValidation/artworkValidationPopover';
import type { ArtworkComplianceMatch } from 'src/data/queries/product/types';

const mockArtworkComplianceMatches: ArtworkComplianceMatch[] = [
    {
        metadata_field: 'artist_name',
        metadata_value: 'The Beatles',
        fuzzy_matches_found: ['The Beet les', 'Beatles'],
    },
    {
        metadata_field: 'album_title',
        metadata_value: 'Abbey Road',
        fuzzy_matches_found: ['Abbey Rd'],
    },
];

describe('<ArtworkValidationPopover>', () => {
    const renderComponent = (matches: ArtworkComplianceMatch[]) =>
        renderInAppContext(
            <ArtworkValidationPopover artworkComplianceMatches={matches} />
        );

    test('renders the title', () => {
        const { getByText } = renderComponent(mockArtworkComplianceMatches);
        expect(getByText('Coverart Metadata Mismatch')).toBeInTheDocument();
    });

    test('renders the subtitle', () => {
        const { getByText } = renderComponent(mockArtworkComplianceMatches);
        expect(
            getByText('A mismatch has been found for the following metadata:')
        ).toBeInTheDocument();
    });

    test('renders formatted field name (underscores replaced with spaces and capitalised)', () => {
        const matches: ArtworkComplianceMatch[] = [
            {
                metadata_field: 'artist_name',
                metadata_value: 'The Beatles',
                fuzzy_matches_found: ['Beatles'],
            },
        ];
        const { getByText } = renderComponent(matches);
        expect(getByText('Artist name')).toBeInTheDocument();
    });

    test('renders metadata_value in the product metadata cell', () => {
        const { getByText } = renderComponent(mockArtworkComplianceMatches);
        expect(getByText('The Beatles')).toBeInTheDocument();
        expect(getByText('Abbey Road')).toBeInTheDocument();
    });

    test('renders fuzzy_matches_found joined by ", " in artwork cell', () => {
        const { getByText } = renderComponent(mockArtworkComplianceMatches);
        expect(getByText('The Beet les, Beatles')).toBeInTheDocument();
        expect(getByText('Abbey Rd')).toBeInTheDocument();
    });

    test('renders empty char when metadata_field is null', () => {
        const matches: ArtworkComplianceMatch[] = [
            {
                metadata_field: null,
                metadata_value: 'Some Value',
                fuzzy_matches_found: ['match'],
            },
        ];
        // capitalize(undefined) → empty string, which falls back to EMPTY_CHAR (–)
        const { getAllByText } = renderComponent(matches);
        // EMPTY_CHAR is typically '–' or similar; just assert no crash
        expect(getAllByText('Some Value')[0]).toBeInTheDocument();
    });

    test('renders empty char when metadata_value is null', () => {
        const matches: ArtworkComplianceMatch[] = [
            {
                metadata_field: 'artist_name',
                metadata_value: null,
                fuzzy_matches_found: ['match'],
            },
        ];
        const { getByText } = renderComponent(matches);
        expect(getByText('Artist name')).toBeInTheDocument();
    });

    test('renders empty char when fuzzy_matches_found is null', () => {
        const matches: ArtworkComplianceMatch[] = [
            {
                metadata_field: 'artist_name',
                metadata_value: 'Some Artist',
                fuzzy_matches_found: null,
            },
        ];
        const { getByText } = renderComponent(matches);
        expect(getByText('Some Artist')).toBeInTheDocument();
    });

    test('renders a row for each compliance match', () => {
        const { getByText } = renderComponent(mockArtworkComplianceMatches);
        expect(getByText('Artist name')).toBeInTheDocument();
        expect(getByText('Album title')).toBeInTheDocument();
    });

    test('renders with an empty matches array without crashing', () => {
        const { container } = renderComponent([]);
        expect(container).toBeTruthy();
    });
});