import { __, sprintf } from '@wordpress/i18n';
import type { JSX } from 'react';
import type { Status } from '../../shared/api/types/status';
import { useScanAction } from '../../shared/api/useScanAction';
import { formatNumber } from '../../shared/lib/numbers';
import { navigate, setParams } from '../../shared/lib/router';
import { Button } from '../../shared/ui/Button';

export function HealthActions( { status }: { status: Status } ): JSX.Element {
	const scanAction = useScanAction();
	const brokenCount = status.counts.broken;

	if ( brokenCount === 0 ) {
		return (
			<div className="actions">
				<Button
					icon="scan"
					busy={ scanAction.isPending }
					disabled={ status.scan.state !== 'idle' }
					onClick={ () => {
						scanAction.mutate( 'start' );
					} }
				>
					{ __( 'Scan again', 'aiplaz-link-checkup' ) }
				</Button>
			</div>
		);
	}

	return (
		<div className="actions">
			<Button
				variant="primary"
				icon="tool"
				onClick={ () => {
					setParams( { fixall: 'broken' } );
				} }
			>
				{ sprintf(
					/* translators: %s: number of broken links */
					__( 'Fix all %s', 'aiplaz-link-checkup' ),
					formatNumber( brokenCount )
				) }
			</Button>
			<Button
				onClick={ () => {
					navigate( 'links', { status: 'broken' } );
				} }
			>
				{ __( 'Review one by one', 'aiplaz-link-checkup' ) }
			</Button>
		</div>
	);
}