import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import type { JSX } from 'react';
import { FIXES_PER_PAGE } from '../../shared/api/endpoints';
import { useNow } from '../../shared/lib/clock';
import { Empty } from '../../shared/ui/Empty';
import { LoadError } from '../../shared/ui/LoadError';
import { Skeleton } from '../../shared/ui/Skeleton';
import { HistoryEntry } from './HistoryEntry';
import { HistoryPager } from './HistoryPager';
import { useFixes } from './historyQueries';

const SLOW_REFRESH_MILLISECONDS = 30000;
const FIRST_PAGE = 1;

export function HistoryView(): JSX.Element {
	const now = useNow( SLOW_REFRESH_MILLISECONDS );
	const [ page, setPage ] = useState( FIRST_PAGE );
	const fixesQuery = useFixes( page );
	const fixes = fixesQuery.data?.items ?? [];
	const pageCount = Math.ceil(
		( fixesQuery.data?.total ?? 0 ) / FIXES_PER_PAGE
	);

	return (
		<section
			className="view"
			aria-label={ __( 'History', 'aiplaz-link-checkup' ) }
		>
			<div className="view-head">
				<div>
					<h1 className="display">
						{ __( 'History', 'aiplaz-link-checkup' ) }
					</h1>
					<p className="lede">
						{ __(
							'Every fix is listed here. A revision of each post was saved, so you can undo any of them.',
							'aiplaz-link-checkup'
						) }
					</p>
				</div>
			</div>
			{ fixesQuery.isPending && <Skeleton /> }
			{ fixesQuery.isError && fixesQuery.data === undefined && (
				<LoadError
					error={ fixesQuery.error }
					onRetry={ () => {
						void fixesQuery.refetch();
					} }
				/>
			) }
			{ fixesQuery.data !== undefined && (
				<div className="panel">
					{ fixes.map( ( fix ) => (
						<HistoryEntry key={ fix.id } fix={ fix } now={ now } />
					) ) }
					{ fixes.length === 0 && (
						<Empty
							icon="clock"
							title={ __(
								'No fixes yet',
								'aiplaz-link-checkup'
							) }
						>
							{ __(
								'When you fix or ignore a link, it shows up here.',
								'aiplaz-link-checkup'
							) }
						</Empty>
					) }
					{ pageCount > 1 && (
						<HistoryPager
							page={ page }
							pageCount={ pageCount }
							onPageChange={ setPage }
						/>
					) }
				</div>
			) }
		</section>
	);
}