import { useEffect, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { fetchDiagnostics } from '../../shared/settings-api';

export default function DiagnosticsPanel() {
	const [ data, setData ] = useState( null );
	const [ error, setError ] = useState( null );

	useEffect( () => {
		fetchDiagnostics()
			.then( setData )
			.catch( ( err ) => setError( err.message || __( 'Could not run diagnostics.', 'rt-gift-wrap-for-woocommerce' ) ) );
	}, [] );

	if ( error ) {
		return <p className="rtgw-diagnostics__error">{ error }</p>;
	}

	if ( ! data ) {
		return <p className="rtgw-diagnostics__loading">{ __( 'Checking block checkout compatibility…', 'rt-gift-wrap-for-woocommerce' ) }</p>;
	}

	const allPass = data.checks.every( ( check ) => check.pass );

	return (
		<div className="rtgw-diagnostics">
			<ul className="rtgw-diagnostics__list">
				{ data.checks.map( ( check ) => (
					<li key={ check.id } className={ `rtgw-diagnostics__item ${ check.pass ? 'is-pass' : 'is-fail' }` }>
						<span className="rtgw-diagnostics__icon">{ check.pass ? '✓' : '✕' }</span>
						<span>
							<strong>{ check.label }</strong>
							<span className="rtgw-diagnostics__detail">{ check.detail }</span>
						</span>
					</li>
				) ) }
			</ul>

			{ data.checkout_page_edit_url && (
				<p className="rtgw-diagnostics__link">
					<a href={ data.checkout_page_edit_url } target="_blank" rel="noreferrer">
						{ __( 'Open your Checkout page in the editor →', 'rt-gift-wrap-for-woocommerce' ) }
					</a>
				</p>
			) }

			<p className={ `rtgw-diagnostics__note ${ allPass ? '' : 'is-warning' }` }>{ data.note }</p>
		</div>
	);
}