import { __ } from '@wordpress/i18n';
import type { JSX } from 'react';
import type { Status } from '../../shared/api/types/status';
import { useSettings } from '../../shared/api/useSettings';
import { useNow } from '../../shared/lib/clock';
import { Icon } from '../../shared/ui/Icon';
import { DatabaseProtection } from './DatabaseProtection';
import { JobsPanel } from './JobsPanel';
import { QuietHours } from './QuietHours';
import { SchedulerBanner } from './SchedulerBanner';

const SECOND_MILLISECONDS = 1000;
const SECTION_HEADING_STYLE = { fontSize: 18 };

export function ScheduleView( { status }: { status: Status } ): JSX.Element {
	const now = useNow( SECOND_MILLISECONDS );
	const settingsQuery = useSettings();
	const settings = settingsQuery.data;

	return (
		<section
			className="view"
			aria-label={ __( 'Schedule', 'aiplaz-link-checkup' ) }
		>
			<div className="view-head">
				<div>
					<h1 className="display">
						{ __( 'Schedule', 'aiplaz-link-checkup' ) }
					</h1>
					<p className="lede">
						{ __(
							'WordPress runs these jobs on its own. You do not need to keep this page open.',
							'aiplaz-link-checkup'
						) }
					</p>
				</div>
			</div>
			<SchedulerBanner scheduler={ status.scheduler } now={ now } />
			<JobsPanel now={ now } />
			{ settings !== undefined && (
				<QuietHours quietHours={ settings.quiet_hours } />
			) }
			<div className="view-head">
				<div>
					<h2 className="display" style={ SECTION_HEADING_STYLE }>
						{ __( 'Database protection', 'aiplaz-link-checkup' ) }
					</h2>
					<p className="lede">
						{ __(
							'The plugin is built so it cannot overload or damage your database.',
							'aiplaz-link-checkup'
						) }
					</p>
				</div>
				<span className="pill pill-ok">
					<Icon name="shield" />
					{ __( 'Protected', 'aiplaz-link-checkup' ) }
				</span>
			</div>
			<DatabaseProtection
				database={ status.database }
				limits={ settings?.database }
			/>
		</section>
	);
}