import { Alert, AlertDescription } from "@/components/ui/alert";
import { Skeleton } from "@/components/ui/skeleton";
import { SectionCard } from "../components/SectionCard";
import { useWidgetData } from "../hooks/useWidgets";
import type { WidgetInstance } from "../types";

interface Props {
	widget: WidgetInstance;
	refreshIntervalMs: number;
	description?: string;
}

type SshTaskResult = {
	exit_status: number;
	stdout: string;
	stderr: string;
};

export function SshTaskWidget({
	widget,
	refreshIntervalMs,
	description,
}: Props) {
	const { data, isLoading } = useWidgetData(widget.id, refreshIntervalMs);
	const result = data?.data as SshTaskResult | undefined;

	return (
		<SectionCard title={widget.title} description={description}>
			{isLoading && !data ? (
				<div className="flex flex-col gap-2">
					<Skeleton className="h-4 w-full" />
					<Skeleton className="h-4 w-3/4" />
				</div>
			) : data?.error ? (
				<Alert variant="destructive">
					<AlertDescription>{data.error}</AlertDescription>
				</Alert>
			) : result ? (
				<div className="flex flex-col gap-3">
					<div className="text-xs text-muted-foreground">
						Exit status:{" "}
						<span
							className={
								result.exit_status === 0 ? "text-green-600" : "text-destructive"
							}
						>
							{result.exit_status}
						</span>
					</div>
					{result.stdout ? (
						<pre className="max-h-64 overflow-auto rounded bg-muted p-2 text-xs">
							{result.stdout}
						</pre>
					) : null}
					{result.stderr ? (
						<pre className="max-h-64 overflow-auto rounded bg-destructive/10 p-2 text-xs text-destructive">
							{result.stderr}
						</pre>
					) : null}
				</div>
			) : null}
		</SectionCard>
	);
}