/**
 * Post-edit "AI readability" panel.
 *
 * Mounts the same audit renderer the Audit screen uses, so there is exactly
 * one place in the plugin that decides how a result looks. The last cached
 * result is handed over in a data attribute, so the panel paints immediately
 * and only fetches when the author asks for a fresh run.
 */

import { useState } from '@wordpress/element';
import { api, errorMessage } from './lib/api';
import { t } from './lib/i18n';
import AuditResult from './ui/AuditResult';
import { Skeleton, ToastProvider, useToast } from './ui/Feedback';
import Button from './ui/Button';
import { IconGauge } from './icons';

/**
 * @param {Object}      props
 * @param {HTMLElement} props.node Mount node, carrying the cached result.
 * @return {Element} Panel.
 */
function Panel( { node } ) {
	const toast = useToast();
	const postId = parseInt( node.dataset.postId, 10 );

	const [ result, setResult ] = useState( () => {
		try {
			return node.dataset.result ? JSON.parse( node.dataset.result ) : null;
		} catch ( err ) {
			return null;
		}
	} );
	const [ running, setRunning ] = useState( false );

	const run = async () => {
		setRunning( true );
		try {
			setResult(
				await api( '/audit/run', {
					method: 'POST',
					data: { post_id: postId, force: true },
				} )
			);
		} catch ( err ) {
			toast( errorMessage( err, t( 'auditFailed', 'Audit failed.' ) ), 'bad' );
		} finally {
			setRunning( false );
		}
	};

	return (
		<div>
			{ running && (
				<div className="tw-space-y-2">
					<Skeleton w="tw-w-20" h="tw-h-7" />
					<Skeleton w="tw-w-full" h="tw-h-1.5" />
					<Skeleton w="tw-w-full" h="tw-h-14" className="tw-mt-3" />
				</div>
			) }

			{ ! running && result && <AuditResult result={ result } compact /> }

			{ ! running && ! result && (
				<p className="c-hint">
					{ t(
						'notAudited',
						'Not audited yet. Run one to see how an AI crawler reads this page.'
					) }
				</p>
			) }

			<div className="tw-mt-4">
				<Button
					size="sm"
					icon={ IconGauge }
					busy={ running }
					onClick={ run }
					className="tw-w-full"
				>
					{ t( 'runAudit', 'Run audit' ) }
				</Button>
			</div>
		</div>
	);
}

/**
 * @param {Object}      props
 * @param {HTMLElement} props.node Mount node.
 * @return {Element} Panel with its own toast viewport.
 */
export default function MetaBox( { node } ) {
	return (
		<ToastProvider>
			<Panel node={ node } />
		</ToastProvider>
	);
}