import { type Interpolation, type Theme, useTheme } from "@emotion/react";
import { visuallyHidden } from "@mui/utils";
import type { Workspace } from "api/typesGenerated";
import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
import { ExternalImage } from "components/ExternalImage/ExternalImage";
import { Stack } from "components/Stack/Stack";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import { ClockIcon, UserIcon } from "lucide-react";
import { type FC, type ReactNode, useState } from "react";
import { getResourceIconPath } from "utils/workspace";

dayjs.extend(relativeTime);

type BatchDeleteStoppedConfirmationProps = {
	stoppedWorkspaces: readonly Workspace[];
	open: boolean;
	isLoading: boolean;
	onClose: () => void;
	onConfirm: () => void;
};

export const BatchDeleteStoppedConfirmation: FC<BatchDeleteStoppedConfirmationProps> = ({
	stoppedWorkspaces,
	open,
	onClose,
	onConfirm,
	isLoading,
}) => {
	const [stage, setStage] = useState<
		"consequences" | "workspaces" | "resources"
	>("consequences");

	const onProceed = () => {
		switch (stage) {
			case "resources":
				onConfirm();
				break;
			case "workspaces":
				setStage("resources");
				break;
			case "consequences":
				setStage("workspaces");
				break;
		}
	};

	const workspaceCount = `${stoppedWorkspaces.length} stopped ${
		stoppedWorkspaces.length === 1 ? "workspace" : "workspaces"
	}`;

	// ... rest of component implementation
	return (
		<ConfirmDialog
			type="delete"
			open={open}
			onClose={handleClose}
			title={`Delete all stopped workspaces`}
			onConfirm={onProceed}
			confirmLoading={isLoading}
			confirmText={
				stage === "consequences"
					? "Next"
					: stage === "workspaces"
						? "Next"
						: "Delete all"
			}
			description={
				<>
					{stage === "consequences" && (
						<ConsequencesStage workspaceCount={workspaceCount} />
					)}
					{stage === "workspaces" && (
						<WorkspacesStage workspaces={stoppedWorkspaces} />
					)}
					{stage === "resources" && (
						<ResourcesStage workspaces={stoppedWorkspaces} />
					)}
				</>
			}
		/>
	);
};

// Add Trash2Icon to imports
import {
	PlayIcon,
	SquareIcon,
	ArrowUpIcon,
	TrashIcon,
	ChevronDownIcon,
	Trash2Icon,
} from "lucide-react";

// Add new prop to interface
interface WorkspacesPageViewProps {
	// ... existing props
	onBatchDeleteStoppedTransition: () => void;
}

// In the dropdown menu, after the existing Delete item:
<DropdownMenuItem
	className="text-content-destructive focus:text-content-destructive"
	onClick={onBatchDeleteTransition}
>
	<TrashIcon /> Delete selected&hellip;
</DropdownMenuItem>
<DropdownMenuItem
	className="text-content-destructive focus:text-content-destructive"
	onClick={onBatchDeleteStoppedTransition}
	disabled={
		!workspaces?.some(
			(w) => w.latest_build.status === "stopped",
		)
	}
>
	<Trash2Icon /> Delete all stopped&hellip;
</DropdownMenuItem>

import { BatchDeleteStoppedConfirmation } from "./BatchDeleteStoppedConfirmation";

// In the component:
const [isBatchDeleteStoppedModalOpen, setIsBatchDeleteStoppedModalOpen] = useState(false);

const stoppedWorkspaces = workspaces?.filter(
	(w) => w.latest_build.status === "stopped",
);

// In the return statement:
<WorkspacesPageView
	// ... existing props
	onBatchDeleteStoppedTransition={() => setIsBatchDeleteStoppedModalOpen(true)}
/>

<BatchDeleteStoppedConfirmation
	isLoading={batchActions.isProcessing}
	stoppedWorkspaces={stoppedWorkspaces || []}
	open={isBatchDeleteStoppedModalOpen}
	onClose={() => setIsBatchDeleteStoppedModalOpen(false)}
	onConfirm={async () => {
		if (stoppedWorkspaces) {
			await batchActions.delete(stoppedWorkspaces);
			setIsBatchDeleteStoppedModalOpen(false);
			setCheckedWorkspaceIds([]);
		}
	}}
/>