import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import type { JSX } from 'react';
import type { FixAction } from '../../shared/api/types/fixes';
import type { LinkDetail } from '../../shared/api/types/links';
import { useFixActions } from '../../shared/fixes/useFixActions';
import { isHttpUrl, looksValid } from '../../shared/lib/url';
import { placesPhrase } from '../../shared/text/countedPhrases';
import { useCloseOverlay } from '../../shared/ui/overlayClose';
import { AddressSection } from './AddressSection';
import { FixPanelFoot } from './FixPanelFoot';
import { FixSummary } from './FixSummary';
import { fixPlanOf, fixRequestOf, primaryFixOf } from './fixPlan';
import { OpenLinkSection } from './OpenLinkSection';
import { Proof } from './Proof';
import { useAddressTest } from './useAddressTest';
import { Uses } from './Uses';

export function FixContent( { link }: { link: LinkDetail } ): JSX.Element {
	const closeOverlay = useCloseOverlay();
	const { apply } = useFixActions();
	const plan = fixPlanOf( link );
	const placesText = placesPhrase( link.uses_count );
	const [ address, setAddress ] = useState( plan.prefilledAddress );
	const [ runningAction, setRunningAction ] = useState< FixAction | null >(
		null
	);
	const [ hasFixFailed, setHasFixFailed ] = useState( false );
	const addressTest = useAddressTest( plan.problem );

	const runFix = async ( action: FixAction ) => {
		setRunningAction( action );
		setHasFixFailed( false );

		const fix = await apply( fixRequestOf( action, link.id, address ) );

		setRunningAction( null );

		if ( fix === null ) {
			setHasFixFailed( true );
			return;
		}

		closeOverlay();
	};

	return (
		<>
			<div className="drawer-body">
				{ hasFixFailed && (
					<div className="alert" role="alert">
						{ __(
							'The fix did not go through. Nothing was changed.',
							'aiplaz-link-checkup'
						) }
					</div>
				) }
				<FixSummary link={ link } problem={ plan.problem } />
				<Proof link={ link } problem={ plan.problem } />
				<Uses link={ link } />
				{ plan.needsAddress && (
					<AddressSection
						linkId={ link.id }
						plan={ plan }
						placesText={ placesText }
						address={ address }
						addressTest={ addressTest }
						onAddressChange={ setAddress }
					/>
				) }
				{ ! plan.needsAddress && isHttpUrl( link.url ) && (
					<OpenLinkSection url={ link.url } />
				) }
			</div>
			<FixPanelFoot
				plan={ plan }
				primaryFix={ primaryFixOf( plan, address, placesText ) }
				placesText={ placesText }
				isAddressValid={ looksValid( address ) }
				runningAction={ runningAction }
				onRun={ ( action ) => {
					void runFix( action );
				} }
			/>
		</>
	);
}