import { useState } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import type { JSX } from 'react';
import type { LinkDetail } from '../../shared/api/types/links';
import type { Problem } from '../../shared/links/problem';
import { useNow } from '../../shared/lib/clock';
import { formatNumber } from '../../shared/lib/numbers';
import { dayAndMonth, timeAgo } from '../../shared/lib/timeAgo';
import { Button } from '../../shared/ui/Button';
import { useCloseOverlay } from '../../shared/ui/overlayClose';
import { answerText } from './answerText';
import { useRecheck } from './linkDetailQueries';
import { RecheckOutcome } from './RecheckOutcome';
import { sinceLabel, stillText } from './problemTexts';

const SLOW_REFRESH_MILLISECONDS = 30000;

type ProofProps = {
	link: LinkDetail;
	problem: Problem;
};

export function Proof( { link, problem }: ProofProps ): JSX.Element {
	const now = useNow( SLOW_REFRESH_MILLISECONDS );
	const recheck = useRecheck();
	const closeOverlay = useCloseOverlay();
	const [ wasRechecked, setRechecked ] = useState( false );

	const runRecheck = () => {
		recheck.mutate( link.id, {
			onSuccess: ( freshLink ) => {
				setRechecked( true );

				if ( freshLink.verdict === 'working' ) {
					closeOverlay();
				}
			},
		} );
	};

	const lastCheckedText = sprintf(
		/* translators: %s: how long ago, for example "2 hours ago" */
		__( 'Last checked %s.', 'aiplaz-link-checkup' ),
		timeAgo( link.checked_at, now )
	);

	return (
		<div className="proof">
			<div className="kv">
				<span className="k">{ sinceLabel( problem ) }</span>
				<span className="v">{ dayAndMonth( link.since ) }</span>
			</div>
			<div className="kv">
				<span className="k">
					{ __( 'Checks with this result', 'aiplaz-link-checkup' ) }
				</span>
				<span className="v num">
					{ sprintf(
						/* translators: %s: number of checks */
						__( '%s in a row', 'aiplaz-link-checkup' ),
						formatNumber( link.streak )
					) }
				</span>
			</div>
			<div className="kv">
				<span className="k">
					{ __( 'Last answer', 'aiplaz-link-checkup' ) }
				</span>
				<span className="v">{ answerText( link ) }</span>
			</div>
			<div className="proof-foot">
				<RecheckOutcome
					isChecking={ recheck.isPending }
					error={ recheck.error }
					outcomeText={
						wasRechecked ? stillText( problem ) : lastCheckedText
					}
				/>
				<Button
					variant="quiet"
					size="sm"
					icon="scan"
					disabled={ recheck.isPending }
					onClick={ runRecheck }
				>
					{ __( 'Check again', 'aiplaz-link-checkup' ) }
				</Button>
			</div>
		</div>
	);
}