import { __, sprintf } from '@wordpress/i18n';
import type { JSX } from 'react';
import type { LinksQuery } from '../../shared/api/types/links';
import type { Counts } from '../../shared/api/types/status';
import { useLinks } from '../../shared/api/useLinks';
import { formatNumber } from '../../shared/lib/numbers';
import { navigate } from '../../shared/lib/router';
import { Button } from '../../shared/ui/Button';
import { Empty } from '../../shared/ui/Empty';
import { FixFirstItem } from './FixFirstItem';
import { problemCount } from './ringGeometry';

const MOST_USED_BROKEN_LINKS: LinksQuery = {
	status: 'broken',
	orderby: 'uses',
	order: 'desc',
	per_page: 5,
};

export function FixFirst( { counts }: { counts: Counts } ): JSX.Element {
	const linksQuery = useLinks( MOST_USED_BROKEN_LINKS );
	const firstLinks = linksQuery.data?.items ?? [];

	return (
		<div className="panel work">
			<div className="work-head">
				<h2 className="title">
					{ __( 'Fix these first', 'aiplaz-link-checkup' ) }
				</h2>
				{ counts.broken > 0 && (
					<Button
						variant="quiet"
						size="sm"
						onClick={ () => {
							navigate( 'links' );
						} }
					>
						{ sprintf(
							/* translators: %s: number of links that need attention */
							__( 'See all %s', 'aiplaz-link-checkup' ),
							formatNumber( problemCount( counts ) )
						) }
					</Button>
				) }
			</div>
			{ firstLinks.map( ( link ) => (
				<FixFirstItem key={ link.id } link={ link } />
			) ) }
			{ linksQuery.data !== undefined && firstLinks.length === 0 && (
				<Empty title={ __( 'Nothing to fix', 'aiplaz-link-checkup' ) }>
					{ __(
						'We keep checking in the background and tell you when a link breaks.',
						'aiplaz-link-checkup'
					) }
				</Empty>
			) }
		</div>
	);
}