import * as React from "react";
const { useState, useRef, useEffect } = React;
import type { IAcpClient } from "../../adapters/acp/acp.adapter";
import { getLogger } from "../../shared/logger";
import type AgentClientPlugin from "../../plugin";

interface TerminalRendererProps {
	terminalId: string;
	acpClient: IAcpClient | null;
	plugin: AgentClientPlugin;
}

export function TerminalRenderer({
	terminalId,
	acpClient,
	plugin,
}: TerminalRendererProps) {
	const logger = getLogger();
	const [output, setOutput] = useState("");
	const [exitStatus, setExitStatus] = useState<{
		exitCode: number | null;
		signal: string | null;
	} | null>(null);
	const [isRunning, setIsRunning] = useState(true);
	const [isCancelled, setIsCancelled] = useState(false);
	const intervalRef = useRef<number | null>(null);

	logger.log(
		`[TerminalRenderer] Component rendered for terminal ${terminalId}, acpClient: ${!!acpClient}`,
	);

	useEffect(() => {
		logger.log(
			`[TerminalRenderer] useEffect triggered for ${terminalId}, acpClient: ${!!acpClient}`,
		);
		if (!terminalId || !acpClient) return;

		const pollOutput = async () => {
			try {
				const result = await acpClient.terminalOutput({
					terminalId,
					sessionId: "",
				});
				logger.log(
					`[TerminalRenderer] Poll result for ${terminalId}:`,
					result,
				);
				setOutput(result.output);
				if (result.exitStatus) {
					setExitStatus({
						exitCode: result.exitStatus.exitCode ?? null,
						signal: result.exitStatus.signal ?? null,
					});
					setIsRunning(false);
					if (intervalRef.current) {
						window.clearInterval(intervalRef.current);
						intervalRef.current = null;
					}
				}
			} catch (error) {
				const errorMessage =
					error instanceof Error ? error.message : String(error);

				logger.log(
					`[TerminalRenderer] Polling error for terminal ${terminalId}: ${errorMessage}`,
				);

				// If terminal not found and no exit status was captured, it was likely cancelled
				if (errorMessage.includes("not found") && !exitStatus) {
					setIsCancelled(true);
				}

				setIsRunning(false);
				if (intervalRef.current) {
					window.clearInterval(intervalRef.current);
					intervalRef.current = null;
				}
			}
		};

		// Start polling immediately
		void pollOutput();

		// Set up polling interval with shorter interval to catch fast commands
		intervalRef.current = window.setInterval(() => {
			void pollOutput();
		}, 100);

		return () => {
			if (intervalRef.current) {
				window.clearInterval(intervalRef.current);
				intervalRef.current = null;
			}
		};
	}, [terminalId, acpClient, logger]); // Include acpClient and logger in dependencies

	// Separate effect to stop polling when no longer running
	useEffect(() => {
		if (!isRunning && intervalRef.current) {
			window.clearInterval(intervalRef.current);
			intervalRef.current = null;
		}
	}, [isRunning]);

	const showEmojis = plugin.settings.displaySettings.showEmojis;

	return (
		<div className="agent-client-terminal-renderer">
			<div className="agent-client-terminal-renderer-header">
				{showEmojis && "🖥️ "}Terminal {terminalId.slice(0, 8)}
				{isRunning ? (
					<span className="agent-client-terminal-status agent-client-running">
						● RUNNING
					</span>
				) : isCancelled ? (
					<span className="agent-client-terminal-status agent-client-cancelled">
						● CANCELLED
					</span>
				) : (
					<span className="agent-client-terminal-status agent-client-finished">
						● FINISHED
					</span>
				)}
			</div>

			<div className="agent-client-terminal-renderer-output">
				{output || (isRunning ? "Waiting for output..." : "No output")}
			</div>

			{exitStatus && (
				<div
					className={`agent-client-terminal-renderer-exit ${exitStatus.exitCode === 0 ? "agent-client-success" : "agent-client-error"}`}
				>
					Exit Code: {exitStatus.exitCode}
					{exitStatus.signal && ` | Signal: ${exitStatus.signal}`}
				</div>
			)}
		</div>
	);
}
