import { Spinner } from '@wordpress/components';
import { useEffect, useState } from '@wordpress/element';
import { api } from '../api';
import type { ProtectionSummary, ProtectionSummaryResponse } from '../types';

/** How often to re-poll the summary while AUTO jobs are still running. */
const POLL_INTERVAL_MS = 5000;

/**
 * Dashboard banner summarizing auto-protect progress (an X-of-Y rollup of AUTO
 * jobs since auto-protect was enabled). Renders nothing until there's queued
 * AUTO work to report, and polls while jobs are active.
 */
export default function AutoProtectBanner(): JSX.Element | null {
	const [summary, setSummary] = useState<ProtectionSummary | null>(null);

	useEffect(() => {
		loadSummary();
	}, []);

	// Keep the counts fresh while the backend is still working AUTO jobs.
	useEffect(() => {
		if (!summary || summary.active_jobs <= 0) return;
		const timer = setInterval(loadSummary, POLL_INTERVAL_MS);
		return () => clearInterval(timer);
	}, [summary]);

	const loadSummary = async (): Promise<void> => {
		try {
			const data = await api.get<ProtectionSummaryResponse>('/protection/summary');
			setSummary(data.auto_protect ? data.summary : null);
		} catch {
			setSummary(null);
		}
	};

	// Nothing worth showing until auto-protect has queued some work.
	if (!summary || summary.total_queued <= 0) return null;

	const { total_queued, total_done, total_failed, active_jobs } = summary;
	const percent = Math.min(100, Math.round((total_done / total_queued) * 100));
	const done = active_jobs <= 0 && total_done + total_failed >= total_queued;

	return (
		<div className="mintall-card">
			<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 }}>
				<h2 style={{ margin: 0 }}>Auto-protect</h2>
				{active_jobs > 0 && <Spinner style={{ margin: 0 }} />}
			</div>

			<p style={{ color: '#50575e', margin: '0 0 12px' }}>
				{total_done} of {total_queued} images protected
				{active_jobs > 0 ? ` · ${active_jobs} in progress` : done ? ' · complete' : ''}
				{total_failed > 0 && <span style={{ color: '#d63638' }}> · {total_failed} need attention</span>}
			</p>

			<div
				style={{
					background: '#f0f0f0',
					borderRadius: 4,
					height: 8,
					overflow: 'hidden',
				}}
			>
				<div
					style={{
						width: `${percent}%`,
						background: '#2271b1',
						height: '100%',
						transition: 'width 0.3s',
					}}
				/>
			</div>
		</div>
	);
}