import { Button } from '@wordpress/components';
import { Icon, search } from '@wordpress/icons';
import { __ } from '@wordpress/i18n';
import {
	CSS_STATE_CONTENT,
	CSS_HEADING,
	CSS_SUBTEXT,
	CSS_METADATA_CARD,
	CSS_SECONDARY_BUTTON,
} from '../../shared/constants';

export const InReviewView = ({
	title,
	submittedAt,
	onNewAnalysis,
}: InReviewViewProps) => {
	return (
		<div className={CSS_STATE_CONTENT}>
			<h2 className={CSS_HEADING}>
				{__('Legal Review In Process', 'cleardraft')}
			</h2>
			<p className={CSS_SUBTEXT}>
				{__(
					"After your lawyer finishes their review, you'll find a link to your complete report right here!",
					'cleardraft',
				)}
			</p>
			<div className={CSS_METADATA_CARD}>
				<dl>
					<dt>{__('Title', 'cleardraft')}</dt>
					<dd>{title}</dd>
					<dt>{__('Submitted', 'cleardraft')}</dt>
					<dd>
						{(() => {
							if (!submittedAt) {
								return '—';
							}
							const asNum = Number(submittedAt);
							if (Number.isFinite(asNum)) {
								return new Date(asNum).toLocaleString();
							}
							const parsed = Date.parse(submittedAt);
							if (Number.isFinite(parsed)) {
								return new Date(parsed).toLocaleString();
							}
							return '—';
						})()}
					</dd>
				</dl>
			</div>
			<Button
				className={CSS_SECONDARY_BUTTON}
				onClick={onNewAnalysis}
				icon={<Icon icon={search} size={18} />}
			>
				{__('New Analysis', 'cleardraft')}
			</Button>
		</div>
	);
};

interface InReviewViewProps {
	title: string;
	submittedAt: string;
	onNewAnalysis: () => void;
}