import type { RetryState } from "../../types/events";
import styles from "./RunStatusBar.module.css";

interface RunStatusBarProps {
	isStreaming: boolean;
	isCompacting: boolean;
	retryState: RetryState | null;
	onAbort: () => void;
	onAbortRetry: () => void;
}

export function RunStatusBar({
	isStreaming,
	isCompacting,
	retryState,
	onAbort,
	onAbortRetry,
}: RunStatusBarProps) {
	const retryActive = retryState?.active;
	if (!isStreaming && !isCompacting && !retryActive) return null;

	let label = "";
	if (retryActive) {
		const attempt = retryState?.attempt ?? 1;
		const max = retryState?.maxAttempts ?? attempt;
		label = `自动重试中 (${attempt}/${max})`;
	} else if (isCompacting) {
		label = "整理上下文中…";
	} else {
		label = "生成中…";
	}

	return (
		<div className={styles.bar}>
			<div className={styles.statusText}>
				<span className={styles.dot} aria-hidden="true" />
				<span>{label}</span>
				{retryActive && retryState?.errorMessage ? (
					<span className={styles.retryMeta}>{retryState.errorMessage.slice(0, 80)}</span>
				) : null}
			</div>
			<div className={styles.actions}>
				{retryActive ? (
					<button type="button" className={styles.cancelBtn} onClick={onAbortRetry}>
						取消重试
					</button>
				) : null}
				{isStreaming || isCompacting ? (
					<button type="button" className={styles.cancelBtn} onClick={onAbort}>
						中止
					</button>
				) : null}
			</div>
		</div>
	);
}
