import { __, sprintf } from '@wordpress/i18n';
import type { JSX } from 'react';
import type { Status } from '../../shared/api/types/status';
import { ResponseMeter } from '../../shared/database/ResponseMeter';
import { formatBytes, formatNumber } from '../../shared/lib/numbers';
import { millisecondsPhrase } from '../../shared/text/countedPhrases';
import { Icon } from '../../shared/ui/Icon';
import { BoxHead } from './BoxHead';

export function DatabaseBox( { status }: { status: Status } ): JSX.Element {
	const { database } = status;

	return (
		<section className="stat">
			<BoxHead
				icon="db"
				title={ __( 'Database', 'aiplaz-link-checkup' ) }
			>
				<span className="pill pill-ok">
					<Icon name="shield" />
					{ __( 'Protected', 'aiplaz-link-checkup' ) }
				</span>
			</BoxHead>
			<div className="kv">
				<span className="k">
					{ __( 'Response time now', 'aiplaz-link-checkup' ) }
				</span>
				<span className="v num">
					{ millisecondsPhrase( database.response_ms ) }
				</span>
			</div>
			<ResponseMeter
				responseMilliseconds={ database.response_ms }
				pauseAtMilliseconds={ database.pause_at_ms }
			/>
			<div className="meter-scale num">
				<span>0</span>
				<span>
					{ sprintf(
						/* translators: %s: number of milliseconds */
						__( 'Jobs pause at %s ms', 'aiplaz-link-checkup' ),
						formatNumber( database.pause_at_ms )
					) }
				</span>
			</div>
			<div className="kv">
				<span className="k">
					{ __( 'Plugin data', 'aiplaz-link-checkup' ) }
				</span>
				<span className="v num">
					{ formatBytes( database.size_bytes ) }
				</span>
			</div>
		</section>
	);
}