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

export const CompletedView = ({
	issueCount,
	reportUrl,
	title,
	submittedAt,
	onNewAnalysis,
}: CompletedViewProps) => {
	const handleOpenReport = () => {
		if (reportUrl) {
			window.open(reportUrl, '_blank', 'noopener,noreferrer');
		}
	};

	return (
		<div className={CSS_STATE_CONTENT}>
			<h2 className={CSS_HEADING}>
				{__('Legal Review Completed', 'cleardraft')}
			</h2>
			<p className={CSS_SUBTEXT}>
				{__(
					'Some statements in your article could present legal risks.',
					'cleardraft',
				)}
			</p>
			<span className={CSS_ISSUE_BADGE}>
				{sprintf(
					/* translators: %d: number of potential issues */
					_n(
						'%d Potential Issue Total',
						'%d Potential Issues Total',
						issueCount,
						'cleardraft',
					),
					issueCount,
				)}
			</span>
			<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_PRIMARY_BUTTON}
				onClick={handleOpenReport}
				disabled={!reportUrl}
				icon={external}
				iconPosition="right"
			>
				{__('Open Full Report', 'cleardraft')}
			</Button>
			<Button
				className={CSS_SECONDARY_BUTTON}
				onClick={onNewAnalysis}
				icon={<Icon icon={search} size={18} />}
			>
				{__('New Analysis', 'cleardraft')}
			</Button>
		</div>
	);
};

interface CompletedViewProps {
	issueCount: number;
	reportUrl: string | null;
	title: string;
	submittedAt: string;
	onNewAnalysis: () => void;
}