import { FollowUpCard } from '@agent/components/FollowUpCard';
import { Rating } from '@agent/components/Rating';
import { decodeEntities } from '@wordpress/html-entities';
import { __ } from '@wordpress/i18n';

// Note: this used to have more status like joined, cancelled, transferred etc.
export const WorkflowMessage = ({ message, latest }) => {
	const { status, label } = message.details;

	if (status === 'canceled') {
		return (
			<>
				<WorkflowToolCanceled label={label} />
				<WorkflowFooter message={message} latest={latest} />
			</>
		);
	}

	return (
		<>
			{/* No label on a static-component finish — its own message shows the result. */}
			{label && <WorkflowToolCompleted label={label} />}
			<WorkflowFooter message={message} latest={latest} />
		</>
	);
};

const WorkflowFooter = ({ message, latest }) => {
	const { answerId, followUp, followUpClosed } = message.details;
	const showCard = latest && followUp && !followUpClosed;
	if (!answerId && !showCard) return null;

	return (
		<div className="flex flex-col gap-px p-2">
			{answerId && <Rating answerId={answerId} />}
			{showCard && <FollowUpCard message={message} />}
		</div>
	);
};

const WorkflowToolCompleted = ({ label }) => {
	return (
		<div className="flex w-full items-start px-2.5 py-2">
			<div className="flex min-w-0 flex-1 flex-col gap-1">
				<div className="flex items-center gap-2 border-l-4 border-l-wp-alert-green bg-wp-notice-success p-3 text-gray-900">
					<div className="h-6 w-6 leading-none text-wp-alert-green">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							fill="none"
							viewBox="0 0 24 24"
							strokeWidth={1.5}
							stroke="currentColor"
							className="size-6"
						>
							<title>{__('Success icon', 'extendify-local')}</title>
							<path
								strokeLinecap="round"
								strokeLinejoin="round"
								d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
							/>
						</svg>
					</div>
					<div className="text-sm">
						{decodeEntities(label) ||
							__('Your site was updated', 'extendify-local')}
					</div>
				</div>
			</div>
		</div>
	);
};

const WorkflowToolCanceled = ({ label }) => {
	return (
		<div className="flex w-full items-start px-2.5 py-2">
			<div className="flex min-w-0 flex-1 flex-col gap-1">
				<div className="flex items-center gap-2 border-l-4 border-l-wp-notice-neutral bg-gray-50 p-3 text-gray-900">
					<div className="text-sm">
						{decodeEntities(label) ||
							__('Canceled — nothing was changed', 'extendify-local')}
					</div>
				</div>
			</div>
		</div>
	);
};