ExportPage.tsx

import { Button } from "@cap/ui-solid";
import { debounce } from "@solid-primitives/scheduled";
import { makePersisted } from "@solid-primitives/storage";
import { createMutation } from "@tanstack/solid-query";
import { Channel } from "@tauri-apps/api/core";
import { CheckMenuItem, Menu } from "@tauri-apps/api/menu";
import { ask } from "@tauri-apps/plugin-dialog";
import { remove } from "@tauri-apps/plugin-fs";
import { type as ostype } from "@tauri-apps/plugin-os";
import { cx } from "cva";
import {
	createEffect,
	createSignal,
	For,
	Match,
	mergeProps,
	on,
	onCleanup,
	Show,
	Suspense,
	Switch,
} from "solid-js";
import { createStore, produce, reconcile } from "solid-js/store";
import toast from "solid-toast";
import { SignInButton } from "~/components/SignInButton";
import Tooltip from "~/components/Tooltip";
import CaptionControlsWindows11 from "~/components/titlebar/controls/CaptionControlsWindows11";
import { authStore } from "~/store";
import { trackEvent } from "~/utils/analytics";
import { createSignInMutation } from "~/utils/auth";
import {
	beginExportSessionGuard,
	createExportTask,
	createExportToFileTask,
} from "~/utils/export";
import { createSelectedOrganization } from "~/utils/organization-branding";
import {
	commands,
	type ExportCompression,
	type ExportSettings,
	type FramesRendered,
	type UploadProgress,
} from "~/utils/tauri";
import { type RenderState, useEditorContext } from "./context";
import { RESOLUTION_OPTIONS } from "./Header";
import { Dialog, Field } from "./ui";

class SilentError extends Error {}

export const COMPRESSION_OPTIONS: Array<{
	label: string;
	value: ExportCompression;
	bpp: number;
}> = [
	{ label: "Maximum", value: "Maximum", bpp: 0.3 },
	{ label: "Social Media", value: "Social", bpp: 0.15 },
	{ label: "Web", value: "Web", bpp: 0.08 },
	{ label: "Potato", value: "Potato", bpp: 0.04 },
];

const COMPRESSION_TO_BPP: Record<ExportCompression, number> = {
	Maximum: 0.3,
	Social: 0.15,
	Web: 0.08,
	Potato: 0.04,
};

export const FPS_OPTIONS = [
	{ label: "15 FPS", value: 15 },
	{ label: "30 FPS", value: 30 },
	{ label: "60 FPS", value: 60 },
] satisfies Array<{ label: string; value: number }>;

export const GIF_FPS_OPTIONS = [
	{ label: "10 FPS", value: 10 },
	{ label: "15 FPS", value: 15 },
	{ label: "20 FPS", value: 20 },
	{ label: "25 FPS", value: 25 },
	{ label: "30 FPS", value: 30 },
] satisfies Array<{ label: string; value: number }>;

export const EXPORT_TO_OPTIONS = [
	{
		label: "File",
		value: "file",
		icon: IconCapFile,
		description: "Save to your computer",
	},
	{
		label: "Clipboard",
		value: "clipboard",
		icon: IconCapCopy,
		description: "Copy to paste anywhere",
	},
	{
		label: "Shareable Link",
		value: "link",
		icon: IconCapLink,
		description: "Share via Cap cloud",
	},
] as const;

type ExportFormat = ExportSettings["format"];

const FORMAT_OPTIONS = [
	{ label: "MP4", value: "Mp4" },
	{ label: "GIF", value: "Gif" },
] as { label: string; value: ExportFormat; disabled?: boolean }[];

type ExportToOption = (typeof EXPORT_TO_OPTIONS)[number]["value"];

interface Settings {
	format: ExportFormat;
	fps: number;
	exportTo: ExportToOption;
	resolution: { label: string; value: string; width: number; height: number };
	compression: ExportCompression;
	optimizeFilesize: boolean;
	organizationId?: string | null;
}

function buildExportSettings(
	settings: Settings,
	cursorOnly: boolean,
	compressionBpp: number | null,
	forceFfmpegDecoder: boolean,
): ExportSettings {
	const resolutionBase = {
		x: settings.resolution.width,
		y: settings.resolution.height,
	};

	if (cursorOnly) {
		return {
			format: "Mov",
			fps: settings.fps,
			resolution_base: resolutionBase,
			cursor_only: true,
		};
	}

	if (settings.format === "Mp4") {
		return {
			format: "Mp4",
			fps: settings.fps,
			resolution_base: resolutionBase,
			compression: settings.compression,
			custom_bpp: compressionBpp,
			force_ffmpeg_decoder: forceFfmpegDecoder,
			optimize_filesize: settings.optimizeFilesize,
		};
	}

	return {
		format: "Gif",
		fps: settings.fps,
		resolution_base: resolutionBase,
		quality: null,
	};
}

export function ExportPage() {
	const {
		setDialog,
		editorInstance,
		editorState,
		setExportState,
		exportState,
		meta,
		refetchMeta,
	} = useEditorContext();

	const projectPath = editorInstance.path;

	const auth = authStore.createQuery();
	const organizationSelection = createSelectedOrganization();
	const organisations = organizationSelection.organizations;

	const hasTransparentBackground = () => {
		const backgroundSource =
			editorInstance.savedProjectConfig.background.source;
		return (
			backgroundSource.type === "color" &&
			backgroundSource.alpha !== undefined &&
			backgroundSource.alpha < 255
		);
	};

	const isCancellationError = (error: unknown) =>
		error instanceof SilentError ||
		error === "Export cancelled" ||
		error === "Save dialog cancelled" ||
		(error instanceof Error &&
			(error.message === "Export cancelled" ||
				error.message === "Save dialog cancelled"));

	const [_settings, setSettings] = makePersisted(
		createStore<Settings>({
			format: "Mp4",
			fps: 30,
			exportTo: "file",
			resolution: { label: "720p", value: "720p", width: 1280, height: 720 },
			compression: "Maximum",
			optimizeFilesize: false,
		}),
		{ name: "export_settings" },
	);

	const VALID_COMPRESSIONS: ExportCompression[] = [
		"Maximum",
		"Social",
		"Web",
		"Potato",
	];
	const [cursorOnly, setCursorOnly] = createSignal(false);

	const requiresTransparentExport = () => hasTransparentBackground();
	const disablesLinkExport = () => hasTransparentBackground() || cursorOnly();
	const shouldUseGifMode = () =>
		!cursorOnly() &&
		(hasTransparentBackground() ||
			(_settings.format === "Gif" && _settings.exportTo !== "link"));
	const isMovCursorOnlyExport = () => cursorOnly();
	const resetTransientExportOptions = () => {
		setCursorOnly(false);
	};
	const handleBack = () => {
		resetTransientExportOptions();
		setDialog((d) => ({ ...d, open: false }));
	};

	const settings = mergeProps(_settings, () => {
		const ret: Partial<Settings> = {};
		if (!["Mp4", "Gif"].includes(_settings.format)) ret.format = "Mp4";
		else if (!cursorOnly()) {
			if (requiresTransparentExport() && _settings.format === "Mp4")
				ret.format = "Gif";
			else if (
				!requiresTransparentExport() &&
				_settings.format === "Gif" &&
				_settings.exportTo === "link"
			)
				ret.format = "Mp4";
		}

		if (disablesLinkExport() && _settings.exportTo === "link")
			ret.exportTo = "file";

		if (shouldUseGifMode()) {
			if (!["720p", "1080p"].includes(_settings.resolution.value)) {
				ret.resolution = { ...RESOLUTION_OPTIONS._720p };
			}
			if (GIF_FPS_OPTIONS.every((option) => option.value !== _settings.fps)) {
				ret.fps = 15;
			}
		} else if (FPS_OPTIONS.every((option) => option.value !== _settings.fps)) {
			ret.fps = 30;
		}

		if (!VALID_COMPRESSIONS.includes(_settings.compression))
			ret.compression = "Maximum";

		Object.defineProperty(ret, "organizationId", {
			get() {
				const selectedOrganizationId =
					organizationSelection.selectedOrganizationId();
				if (!_settings.organizationId) return selectedOrganizationId;
				if (
					organisations().some(
						(organization) => organization.id === _settings.organizationId,
					)
				) {
					return _settings.organizationId;
				}

				return selectedOrganizationId;
			},
		});

		return ret;
	});

	const [previewUrl, setPreviewUrl] = createSignal<string | null>(null);
	const [previewLoading, setPreviewLoading] = createSignal(false);
	const [previewUnavailable, setPreviewUnavailable] = createSignal(false);
	const [renderEstimate, setRenderEstimate] = createSignal<{
		frameRenderTimeMs: number;
		totalFrames: number;
		estimatedSizeMb: number;
	} | null>(null);

	type EstimateCacheKey = string;
	const estimateCache = new Map<
		EstimateCacheKey,
		{ frameRenderTimeMs: number; totalFrames: number; estimatedSizeMb: number }
	>();

	const getEstimateCacheKey = (
		fps: number,
		width: number,
		height: number,
		bpp: number,
		mode: "video" | "gif" | "cursor",
	): EstimateCacheKey => `${fps}-${width}-${height}-${bpp}-${mode}`;

	const updateSettings: typeof setSettings = ((
		...args: Parameters<typeof setSettings>
	) => {
		setPreviewLoading(true);
		return (setSettings as (...args: Parameters<typeof setSettings>) => void)(
			...args,
		);
	}) as typeof setSettings;
	const [previewDialogOpen, setPreviewDialogOpen] = createSignal(false);
	const [compressionBpp, setCompressionBpp] = createSignal(
		COMPRESSION_TO_BPP[_settings.compression] ?? 0.15,
	);
	const [advancedMode, setAdvancedMode] = createSignal(false);
	const [forceFfmpegDecoder, setForceFfmpegDecoder] = createSignal(false);

	const isCustomBpp = () => {
		const currentBpp = compressionBpp();
		return !COMPRESSION_OPTIONS.some(
			(opt) => Math.abs(opt.bpp - currentBpp) < 0.001,
		);
	};

	const _matchingPreset = () => {
		const currentBpp = compressionBpp();
		return COMPRESSION_OPTIONS.find(
			(opt) => Math.abs(opt.bpp - currentBpp) < 0.001,
		);
	};

	createEffect(
		on(
			() => _settings.compression,
			(compression) => {
				const bpp = COMPRESSION_TO_BPP[compression];
				if (bpp !== undefined && !advancedMode()) setCompressionBpp(bpp);
			},
		),
	);

	type PreviewRequest = {
		frameTime: number;
		fps: number;
		resWidth: number;
		resHeight: number;
		bpp: number;
	};

	let previewInFlight = false;
	let pendingPreviewRequest: PreviewRequest | null = null;

	const runPreviewRequest = async (request: PreviewRequest, retryCount = 0) => {
		const { frameTime, fps, resWidth, resHeight, bpp } = request;
		const cacheKey = getEstimateCacheKey(
			fps,
			resWidth,
			resHeight,
			bpp,
			isMovCursorOnlyExport() ? "cursor" : shouldUseGifMode() ? "gif" : "video",
		);
		const cachedEstimate = estimateCache.get(cacheKey);

		if (cachedEstimate) {
			setRenderEstimate(cachedEstimate);
		}

		const maxRetries = 2;

		try {
			const result = await commands.generateExportPreviewFast(frameTime, {
				fps,
				resolution_base: { x: resWidth, y: resHeight },
				compression_bpp: bpp,
				cursor_only: cursorOnly(),
			});

			const oldUrl = previewUrl();
			if (oldUrl) URL.revokeObjectURL(oldUrl);

			const byteArray = Uint8Array.from(atob(result.jpeg_base64), (c) =>
				c.charCodeAt(0),
			);
			const blob = new Blob([byteArray], { type: "image/jpeg" });
			setPreviewUrl(URL.createObjectURL(blob));

			const newEstimate = {
				frameRenderTimeMs: result.frame_render_time_ms,
				totalFrames: result.total_frames,
				estimatedSizeMb: result.estimated_size_mb,
			};

			if (!cachedEstimate) {
				estimateCache.set(cacheKey, newEstimate);
			}
			setPreviewUnavailable(false);
			setRenderEstimate(newEstimate);
		} catch (e) {
			console.error("Failed to generate preview:", e);
			if (retryCount < maxRetries) {
				await new Promise((resolve) =>
					setTimeout(resolve, 200 * (retryCount + 1)),
				);
				return runPreviewRequest(request, retryCount + 1);
			}
			setPreviewUnavailable(true);
		}
	};

	const fetchPreview = async (
		frameTime: number,
		fps: number,
		resWidth: number,
		resHeight: number,
		bpp: number,
	) => {
		setPreviewUnavailable(false);
		pendingPreviewRequest = { frameTime, fps, resWidth, resHeight, bpp };
		if (previewInFlight) return;

		previewInFlight = true;
		try {
			while (pendingPreviewRequest) {
				const request = pendingPreviewRequest;
				pendingPreviewRequest = null;
				await runPreviewRequest(request);
			}
		} finally {
			previewInFlight = false;
			setPreviewLoading(false);
		}
	};

	const debouncedFetchPreview = debounce(fetchPreview, 300);

	setPreviewLoading(true);
	fetchPreview(
		editorState.playbackTime ?? 0,
		settings.fps,
		settings.resolution.width,
		settings.resolution.height,
		compressionBpp(),
	);

	createEffect(
		on(
			[
				() => settings.format,
				() => settings.fps,
				() => settings.resolution.width,
				() => settings.resolution.height,
				cursorOnly,
				compressionBpp,
			],
			() => {
				const frameTime = editorState.playbackTime ?? 0;
				setPreviewLoading(true);
				debouncedFetchPreview(
					frameTime,
					settings.fps,
					settings.resolution.width,
					settings.resolution.height,
					compressionBpp(),
				);
			},
			{ defer: true },
		),
	);

	onCleanup(() => {
		const url = previewUrl();
		if (url) URL.revokeObjectURL(url);
	});

	let cancelCurrentExport: (() => void) | null = null;

	onCleanup(() => {
		cancelCurrentExport?.();
		cancelCurrentExport = null;
	});

	const exportWithSettings = (
		onProgress: (progress: FramesRendered) => void,
	) => {
		const customBpp = advancedMode() && isCustomBpp() ? compressionBpp() : null;
		const exportSettings = buildExportSettings(
			settings,
			isMovCursorOnlyExport(),
			customBpp,
			forceFfmpegDecoder(),
		);
		const { promise, cancel } = createExportTask(
			projectPath,
			exportSettings,
			onProgress,
		);
		cancelCurrentExport = cancel;
		return promise.finally(() => {
			if (cancelCurrentExport === cancel) cancelCurrentExport = null;
		});
	};

	const [outputPath, setOutputPath] = createSignal<string | null>(null);
	const [isCancelled, setIsCancelled] = createSignal(false);
	const exportFileExtension = () =>
		isMovCursorOnlyExport() ? "mov" : settings.format === "Gif" ? "gif" : "mp4";
	const exportedAssetLabel = () =>
		isMovCursorOnlyExport()
			? "Cursor track"
			: settings.format === "Gif"
				? "GIF"
				: "Recording";
	const exportMediumLabel = () =>
		isMovCursorOnlyExport()
			? "cursor track"
			: settings.format === "Gif"
				? "GIF"
				: "video";

	const handleCancel = async () => {
		if (
			await ask("Are you sure you want to cancel the export?", {
				title: "Cancel Export",
				kind: "warning",
			})
		) {
			setIsCancelled(true);
			cancelCurrentExport?.();
			cancelCurrentExport = null;
			setExportState({ type: "idle" });
			const path = outputPath();
			if (path) {
				try {
					await remove(path);
				} catch (e) {
					console.error("Failed to delete cancelled file", e);
				}
			}
		}
	};

	const copy = createMutation(() => ({
		mutationFn: async () => {
			setIsCancelled(false);
			if (exportState.type !== "idle") return;
			const releaseExportSession = await beginExportSessionGuard();
			try {
				setExportState(reconcile({ action: "copy", type: "starting" }));

				const outputPath = await exportWithSettings((progress) => {
					if (isCancelled()) throw new SilentError("Cancelled");
					setExportState({ type: "rendering", progress });
				});

				if (isCancelled()) throw new SilentError("Cancelled");

				setExportState({ type: "copying" });

				await commands.copyVideoToClipboard(outputPath);
			} finally {
				await releaseExportSession();
			}
		},
		onError: (error) => {
			if (isCancelled() || isCancellationError(error)) {
				setExportState(reconcile({ type: "idle" }));
				return;
			}
			commands.globalMessageDialog(
				error instanceof Error ? error.message : "Failed to copy recording",
			);
			setExportState(reconcile({ type: "idle" }));
		},
		onSuccess() {
			setExportState({ type: "done" });
			toast.success(`${exportedAssetLabel()} exported to clipboard`);
		},
	}));

	const save = createMutation(() => ({
		mutationFn: async () => {
			setIsCancelled(false);
			if (exportState.type !== "idle") return;
			const extension = exportFileExtension();
			const customBpp =
				advancedMode() && isCustomBpp() ? compressionBpp() : null;
			const exportSettings = buildExportSettings(
				settings,
				isMovCursorOnlyExport(),
				customBpp,
				forceFfmpegDecoder(),
			);
			const task = createExportToFileTask(
				projectPath,
				exportSettings,
				`${meta().prettyName}.${extension}`,
				extension,
				(progress) => {
					if (isCancelled()) throw new SilentError("Cancelled");
					setExportState({ type: "rendering", progress });
				},
				() => {
					setExportState(reconcile({ action: "save", type: "starting" }));
				},
				() => {
					setExportState({ action: "save", type: "copying" });
				},
			);
			cancelCurrentExport = task.cancel;
			const savePath = await task.promise.finally(() => {
				if (cancelCurrentExport === task.cancel) cancelCurrentExport = null;
			});

			if (isCancelled()) throw new SilentError("Cancelled");

			setOutputPath(savePath);
			setExportState({ type: "done" });
		},
		onError: (error) => {
			if (isCancelled() || isCancellationError(error)) {
				setExportState({ type: "idle" });
				return;
			}
			commands.globalMessageDialog(
				error instanceof Error
					? error.message
					: `Failed to export recording: ${error}`,
			);
			setExportState({ type: "idle" });
		},
		onSuccess() {
			toast.success(`${exportedAssetLabel()} exported to file`);
		},
	}));

	const upload = createMutation(() => ({
		mutationFn: async () => {
			setIsCancelled(false);
			if (exportState.type !== "idle") return;
			const releaseExportSession = await beginExportSessionGuard();
			try {
				setExportState(reconcile({ action: "upload", type: "starting" }));

				const existingAuth = await authStore.get();
				if (!existingAuth) createSignInMutation();
				trackEvent("create_shareable_link_clicked", {
					resolution: settings.resolution,
					fps: settings.fps,
					has_existing_auth: !!existingAuth,
				});

				const metadata = await commands.getVideoMetadata(projectPath);
				const plan = await commands.checkUpgradedAndUpdate();
				const canShare = {
					allowed: plan || metadata.duration < 300,
					reason: !plan && metadata.duration >= 300 ? "upgrade_required" : null,
				};

				if (!canShare.allowed) {
					if (canShare.reason === "upgrade_required") {
						await commands.showWindow("Upgrade");
						await new Promise((resolve) => setTimeout(resolve, 1000));
						throw new SilentError();
					}
				}

				const uploadChannel = new Channel<UploadProgress>((progress) => {
					console.log("Upload progress:", progress);
					setExportState(
						produce((state) => {
							if (state.type !== "uploading") return;

							state.progress = Math.round(progress.progress * 100);
						}),
					);
				});

				await exportWithSettings((progress) => {
					if (isCancelled()) throw new SilentError("Cancelled");
					setExportState({ type: "rendering", progress });
				});

				if (isCancelled()) throw new SilentError("Cancelled");

				setExportState({ type: "uploading", progress: 0 });

				console.log({ organizationId: settings.organizationId });

				const result = meta().sharing
					? await commands.uploadExportedVideo(
							projectPath,
							"Reupload",
							uploadChannel,
							settings.organizationId ?? null,
						)
					: await commands.uploadExportedVideo(
							projectPath,
							{ Initial: { pre_created_video: null } },
							uploadChannel,
							settings.organizationId ?? null,
						);

				if (result === "NotAuthenticated")
					throw new Error("You need to sign in to share recordings");
				else if (result === "PlanCheckFailed")
					throw new Error("Failed to verify your subscription status");
				else if (result === "UpgradeRequired")
					throw new Error("This feature requires an upgraded plan");
			} finally {
				await releaseExportSession();
			}
		},
		onSuccess: async () => {
			await refetchMeta();
			setExportState({ type: "done" });
		},
		onError: (error) => {
			if (isCancelled() || isCancellationError(error)) {
				setExportState(reconcile({ type: "idle" }));
				return;
			}
			console.error(error);
			if (!(error instanceof SilentError)) {
				commands.globalMessageDialog(
					error instanceof Error ? error.message : "Failed to upload recording",
				);
			}

			setExportState(reconcile({ type: "idle" }));
		},
	}));

	const formatDuration = (seconds: number) => {
		const hours = Math.floor(seconds / 3600);
		const minutes = Math.floor((seconds % 3600) / 60);
		const secs = seconds % 60;
		if (hours > 0) {
			return `${hours}:${minutes.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
		}
		return `${minutes}:${secs.toString().padStart(2, "0")}`;
	};

	return (
		<div class="flex flex-col h-full bg-gray-1 overflow-hidden">
			<div
				data-tauri-drag-region
				class="flex relative flex-row items-center w-full h-14 border-b border-gray-3 shrink-0"
			>
				<h1 class="absolute inset-0 flex items-center justify-center text-sm font-medium text-gray-12 pointer-events-none">
					Export
				</h1>
				<div
					data-tauri-drag-region
					class={cx(
						"flex flex-row flex-1 gap-2 items-center px-4 h-full",
						ostype() !== "windows" && "pr-2",
					)}
				>
					{ostype() === "macos" && <div class="h-full w-16" />}
					<div data-tauri-drag-region class="flex-1 h-full" />
					{ostype() === "windows" && <CaptionControlsWindows11 />}
				</div>
			</div>

			<div class="flex-1 min-h-0 flex relative">
				<div class="flex-1 min-h-0 p-5 flex flex-col">
					<div class="flex items-center gap-1.5 mb-2">
						<span class="text-sm font-medium text-gray-11">Preview</span>
						<Tooltip content="This is a rendered frame from your video. Adjust the settings below to see the quality of the final exported video.">
							<IconLucideInfo class="size-3.5 text-gray-9 hover:text-gray-11 cursor-help transition-colors" />
						</Tooltip>
					</div>
					<div class="relative flex-1 min-h-0 rounded-xl overflow-hidden bg-gray-2 border border-gray-3 flex items-center justify-center group">
						<Show
							when={previewUrl()}
							fallback={
								<div class="absolute inset-0 flex items-center justify-center">
									<Show
										when={previewLoading()}
										fallback={
											<div class="flex flex-col items-center gap-3 text-gray-10">
												<IconLucideImage class="size-12 text-gray-8" />
												<span class="text-sm">
													{previewUnavailable()
														? "Preview unavailable"
														: "Generating preview..."}
												</span>
											</div>
										}
									>
										<div class="absolute inset-4 rounded-lg bg-gray-4 overflow-hidden">
											<div class="absolute inset-y-0 w-full animate-shimmer bg-linear-to-r from-transparent from-30% via-gray-6 via-50% to-transparent to-70%" />
										</div>
									</Show>
								</div>
							}
						>
							{(url) => (
								<>
									<img
										src={url()}
										alt="Export preview"
										class="relative z-0 w-full h-full object-contain"
									/>
									<Show when={previewLoading()}>
										<div class="absolute inset-0 z-50 overflow-hidden pointer-events-none">
											<div class="absolute inset-y-0 w-full animate-shimmer bg-linear-to-r from-transparent from-30% via-white/60 via-50% to-transparent to-70%" />
										</div>
									</Show>
									<button
										type="button"
										onClick={() => setPreviewDialogOpen(true)}
										class="absolute bottom-3 right-3 p-2 rounded-lg bg-gray-12/80 hover:bg-gray-12 text-gray-1 opacity-0 group-hover:opacity-100 transition-opacity"
									>
										<IconLucideMaximize2 class="size-4" />
									</button>
								</>
							)}
						</Show>
					</div>

					<Show
						when={
							!previewUnavailable() && !previewLoading() && renderEstimate()
						}
						fallback={
							<div class="flex items-center justify-center gap-4 mt-4 h-4 text-xs text-gray-11">
								<span class="flex items-center gap-1.5">
									<IconLucideClock class="size-3.5" />
									<span class="h-3.5 w-10 bg-gray-4 rounded-sm animate-pulse" />
								</span>
								<span class="flex items-center gap-1.5">
									<IconLucideMonitor class="size-3.5" />
									<span class="h-3.5 w-20 bg-gray-4 rounded-sm animate-pulse" />
								</span>
								<span class="flex items-center gap-1.5">
									<IconLucideHardDrive class="size-3.5" />
									<span class="h-3.5 w-16 bg-gray-4 rounded-sm animate-pulse" />
								</span>
								<span class="flex items-center gap-1.5">
									<IconLucideZap class="size-3.5" />
									<span class="h-3.5 w-12 bg-gray-4 rounded-sm animate-pulse" />
								</span>
							</div>
						}
					>
						{(est) => {
							const data = est();
							const durationSeconds = data.totalFrames / settings.fps;

							const exportSpeedMultiplier = shouldUseGifMode() ? 4 : 10;
							const totalTimeMs =
								(data.frameRenderTimeMs * data.totalFrames) /
								exportSpeedMultiplier;
							const estimatedTimeSeconds = Math.max(1, totalTimeMs / 1000);

							const estimatedSizeMb = data.estimatedSizeMb;

							return (
								<div class="flex items-center justify-center gap-4 mt-4 h-4 text-xs text-gray-11">
									<span class="flex items-center gap-1.5">
										<IconLucideClock class="size-3.5" />
										<span class="min-w-10">
											{formatDuration(Math.round(durationSeconds))}
										</span>
									</span>
									<span class="flex items-center gap-1.5">
										<IconLucideMonitor class="size-3.5" />
										<span class="min-w-20">
											{settings.resolution.width}×{settings.resolution.height}
										</span>
									</span>
									<span class="flex items-center gap-1.5">
										<IconLucideHardDrive class="size-3.5" />
										<span class="min-w-16">
											~{estimatedSizeMb.toFixed(1)} MB
										</span>
									</span>
									<span class="flex items-center gap-1.5">
										<IconLucideZap class="size-3.5" />
										<span class="min-w-12">
											~{formatDuration(Math.round(estimatedTimeSeconds))}
										</span>
									</span>
								</div>
							);
						}}
					</Show>
				</div>

				<div class="w-[400px] border-l border-gray-3 flex flex-col bg-gray-1 dark:bg-gray-2">
					<button
						type="button"
						onClick={handleBack}
						class="flex flex-none gap-2 items-center px-4 w-full h-16 text-sm font-medium border-b transition-colors text-gray-12 border-gray-3 hover:bg-gray-3"
					>
						<IconCapMoveLeft class="size-4 text-gray-11" />
						Back to editor
					</button>
					<div class="flex-1 overflow-y-auto p-4 space-y-5">
						<Field name="Destination" icon={<IconCapUpload class="size-4" />}>
							<div class="flex gap-1.5">
								<For each={EXPORT_TO_OPTIONS}>
									{(option) => {
										const Icon = option.icon;
										const isSelected = () => settings.exportTo === option.value;
										const isDisabled = () =>
											option.value === "link" && disablesLinkExport();
										const disabledReason = () =>
											isDisabled()
												? cursorOnly()
													? "Cursor-only exports can only be saved to a file or clipboard"
													: "Transparent exports can only be saved to a file or clipboard"
												: undefined;
										const button = (
											<button
												type="button"
												class={cx(
													"flex-1 flex flex-col items-center gap-1.5 px-3 py-2.5 rounded-lg border transition-colors",
													isSelected()
														? "bg-gray-3 border-gray-5 text-gray-12"
														: "bg-transparent border-transparent text-gray-11 hover:bg-gray-3 hover:border-gray-4",
													isDisabled() && "opacity-50 cursor-not-allowed",
												)}
												disabled={isDisabled()}
												onClick={() => {
													setSettings(
														produce((newSettings) => {
															newSettings.exportTo =
																option.value as ExportToOption;
															if (
																option.value === "link" &&
																settings.format === "Gif"
															) {
																newSettings.format = "Mp4";
															}
														}),
													);
												}}
											>
												<Icon
													class={cx(
														"size-5",
														isSelected() ? "text-gray-12" : "text-gray-10",
													)}
												/>
												<span class="text-xs font-medium">{option.label}</span>
											</button>
										);

										return disabledReason() ? (
											<Tooltip content={disabledReason()}>{button}</Tooltip>
										) : (
											button
										);
									}}
								</For>
							</div>

							<Suspense>
								<Show
									when={
										settings.exportTo === "link" && organisations().length > 1
									}
								>
									<button
										type="button"
										class="w-full flex items-center justify-between px-3 py-2 mt-3 rounded-lg bg-gray-3 hover:bg-gray-4 transition-colors text-sm"
										onClick={async () => {
											const menu = await Menu.new({
												items: await Promise.all(
													organisations().map((org) =>
														CheckMenuItem.new({
															text: org.name,
															action: () => {
																setSettings("organizationId", org.id);
																void organizationSelection
																	.setSelectedOrganizationId(org.id)
																	.catch(console.error);
															},
															checked: settings.organizationId === org.id,
														}),
													),
												),
											});
											menu.popup();
										}}
									>
										<span class="text-gray-11">Organization</span>
										<span class="flex items-center gap-1 text-gray-12">
											{
												(
													organisations().find(
														(o) => o.id === settings.organizationId,
													) ?? organisations()[0]
												)?.name
											}
											<IconCapChevronDown class="size-4" />
										</span>
									</button>
								</Show>
							</Suspense>
						</Field>

						<Field name="Format" icon={<IconLucideVideo class="size-4" />}>
							<div class="flex gap-1.5">
								<For each={FORMAT_OPTIONS}>
									{(option) => {
										const isDisabled = () =>
											cursorOnly() ||
											(option.value === "Mp4" && requiresTransparentExport()) ||
											(option.value === "Gif" && settings.exportTo === "link");

										const disabledReason = () =>
											cursorOnly()
												? "Cursor-only export always uses transparent MOV"
												: option.value === "Mp4" && requiresTransparentExport()
													? "MP4 doesn't support transparency"
													: option.value === "Gif" &&
															settings.exportTo === "link"
														? "Links require MP4 format"
														: undefined;

										const button = (
											<button
												type="button"
												class={cx(
													"flex-1 py-2 text-sm font-medium rounded-lg border transition-colors",
													settings.format === option.value
														? "bg-gray-3 border-gray-5 text-gray-12"
														: "bg-transparent border-transparent text-gray-11 hover:bg-gray-3 hover:border-gray-4",
													isDisabled() && "opacity-50 cursor-not-allowed",
												)}
												disabled={isDisabled()}
												onClick={() => {
													updateSettings(
														produce((newSettings) => {
															newSettings.format = option.value;
															if (
																option.value === "Gif" &&
																!(
																	settings.resolution.value === "720p" ||
																	settings.resolution.value === "1080p"
																)
															)
																newSettings.resolution = {
																	...RESOLUTION_OPTIONS._720p,
																};
															if (
																option.value === "Gif" &&
																GIF_FPS_OPTIONS.every(
																	(v) => v.value !== settings.fps,
																)
															)
																newSettings.fps = 15;
															if (
																option.value === "Mp4" &&
																FPS_OPTIONS.every(
																	(v) => v.value !== settings.fps,
																)
															)
																newSettings.fps = 30;
														}),
													);
												}}
											>
												{option.label}
											</button>
										);

										return disabledReason() ? (
											<Tooltip content={disabledReason()}>{button}</Tooltip>
										) : (
											button
										);
									}}
								</For>
							</div>
						</Field>

						<Field
							name="Resolution"
							icon={<IconLucideMonitor class="size-4" />}
						>
							<div class="flex gap-1.5">
								<For
									each={
										shouldUseGifMode()
											? [RESOLUTION_OPTIONS._720p, RESOLUTION_OPTIONS._1080p]
											: [
													RESOLUTION_OPTIONS._720p,
													RESOLUTION_OPTIONS._1080p,
													RESOLUTION_OPTIONS._4k,
												]
									}
								>
									{(option) => (
										<button
											type="button"
											class={cx(
												"flex-1 py-2 text-sm font-medium rounded-lg border transition-colors",
												settings.resolution.value === option.value
													? "bg-gray-3 border-gray-5 text-gray-12"
													: "bg-transparent border-transparent text-gray-11 hover:bg-gray-3 hover:border-gray-4",
											)}
											onClick={() => updateSettings("resolution", option)}
										>
											{option.label}
										</button>
									)}
								</For>
							</div>
						</Field>

						<Field name="Frame Rate" icon={<IconLucideGauge class="size-4" />}>
							<div class="flex gap-1.5">
								<For each={shouldUseGifMode() ? GIF_FPS_OPTIONS : FPS_OPTIONS}>
									{(option) => (
										<button
											type="button"
											class={cx(
												"flex-1 py-2 text-sm font-medium rounded-lg border transition-colors",
												settings.fps === option.value
													? "bg-gray-3 border-gray-5 text-gray-12"
													: "bg-transparent border-transparent text-gray-11 hover:bg-gray-3 hover:border-gray-4",
											)}
											onClick={() => {
												trackEvent("export_fps_changed", {
													fps: option.value,
												});
												updateSettings("fps", option.value);
											}}
										>
											{option.value}
										</button>
									)}
								</For>
							</div>
						</Field>

						<Show when={settings.format === "Mp4" && !cursorOnly()}>
							<Field
								name="Quality"
								icon={<IconLucideSparkles class="size-4" />}
							>
								<div class="grid grid-cols-4 gap-1.5">
									<For each={[...COMPRESSION_OPTIONS].reverse()}>
										{(option) => {
											const isSelected = () => {
												if (advancedMode() && isCustomBpp()) return false;
												return settings.compression === option.value;
											};
											return (
												<button
													type="button"
													class={cx(
														"px-2 py-2 text-xs font-medium rounded-lg border transition-colors",
														isSelected()
															? "bg-gray-3 border-gray-5 text-gray-12"
															: "bg-transparent border-transparent text-gray-11 hover:bg-gray-3 hover:border-gray-4",
													)}
													onClick={() => {
														setPreviewLoading(true);
														setCompressionBpp(option.bpp);
														setSettings("compression", option.value);
													}}
												>
													{option.label === "Social Media"
														? "Social"
														: option.label}
												</button>
											);
										}}
									</For>
								</div>
								<div class="flex justify-between text-[10px] text-gray-10 mt-1.5 px-0.5">
									<span>Smaller file</span>
									<span>Larger file</span>
								</div>

								<button
									type="button"
									role="switch"
									aria-checked={settings.optimizeFilesize}
									class="flex items-center gap-2 mt-3 text-xs text-gray-11 hover:text-gray-12 transition-colors w-full"
									onClick={() =>
										updateSettings(
											"optimizeFilesize",
											!settings.optimizeFilesize,
										)
									}
								>
									<div
										class={cx(
											"w-8 h-4 rounded-full transition-colors relative shrink-0",
											settings.optimizeFilesize ? "bg-blue-9" : "bg-gray-5",
										)}
									>
										<div
											class={cx(
												"absolute top-0.5 w-3 h-3 rounded-full bg-white transition-transform",
												settings.optimizeFilesize
													? "translate-x-4"
													: "translate-x-0.5",
											)}
										/>
									</div>
									<div class="text-left">
										<span class="block">Optimize file size</span>
										<span class="text-[10px] text-gray-9">
											Re-encodes with software for much smaller files (slower)
										</span>
									</div>
								</button>
							</Field>
						</Show>

						<Field
							name="Advanced Options"
							icon={<IconLucideSparkles class="size-4" />}
						>
							<button
								type="button"
								class={cx(
									"w-full flex items-center justify-between px-3 py-2 text-sm font-medium rounded-lg border transition-colors",
									advancedMode()
										? "bg-gray-3 border-gray-5 text-gray-12"
										: "bg-transparent border-gray-4 text-gray-11 hover:bg-gray-3 hover:border-gray-5",
								)}
								onClick={() => setAdvancedMode(!advancedMode())}
							>
								<span>{advancedMode() ? "Hide options" : "Show options"}</span>
								<IconCapChevronDown
									class={cx(
										"size-4 transition-transform",
										advancedMode() && "rotate-180",
									)}
								/>
							</button>

							<Show when={advancedMode()}>
								<div class="mt-3 space-y-4">
									<button
										type="button"
										role="switch"
										aria-checked={cursorOnly()}
										class="flex items-center gap-2 text-xs text-gray-11 hover:text-gray-12 transition-colors w-full"
										onClick={() => setCursorOnly(!cursorOnly())}
									>
										<div
											class={cx(
												"w-8 h-4 rounded-full transition-colors relative shrink-0",
												cursorOnly() ? "bg-blue-9" : "bg-gray-5",
											)}
										>
											<div
												class={cx(
													"absolute top-0.5 w-3 h-3 rounded-full bg-white transition-transform",
													cursorOnly() ? "translate-x-4" : "translate-x-0.5",
												)}
											/>
										</div>
										<div class="text-left">
											<span class="block">Export cursor only</span>
											<span class="text-[10px] text-gray-9">
												Keeps the same cursor motion and clicks on a transparent
												background
											</span>
										</div>
									</button>

									<Show when={cursorOnly()}>
										<div class="rounded-lg border border-amber-6 bg-amber-3/30 px-3 py-2.5">
											<div class="flex items-start gap-2">
												<IconLucideAlertTriangle class="mt-0.5 size-4 shrink-0 text-amber-11" />
												<div class="text-left">
													<p class="text-xs font-medium text-amber-11">
														Warning
													</p>
													<p class="text-[10px] text-amber-11">
														Exports as a transparent MOV. Files are large and
														best for compositing or editing.
													</p>
												</div>
											</div>
										</div>
									</Show>

									<Show when={settings.format === "Mp4" && !cursorOnly()}>
										<div class="space-y-2 border-t border-gray-4 pt-3">
											<div class="flex items-center justify-between text-xs">
												<span class="text-gray-11">Bits per pixel</span>
												<span class="text-gray-12 font-medium tabular-nums">
													{compressionBpp().toFixed(2)}
												</span>
											</div>
											<input
												type="range"
												min="0.02"
												max="0.5"
												step="0.01"
												value={compressionBpp()}
												onInput={(e) => {
													const value = Number.parseFloat(
														e.currentTarget.value,
													);
													setPreviewLoading(true);
													setCompressionBpp(value);
													const preset = COMPRESSION_OPTIONS.find(
														(opt) => Math.abs(opt.bpp - value) < 0.001,
													);
													if (preset) {
														setSettings("compression", preset.value);
													}
												}}
												class="w-full h-1.5 bg-gray-4 rounded-full appearance-none [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-blue-9 [&::-webkit-slider-thumb]:transition-transform [&::-webkit-slider-thumb]:hover:scale-110"
											/>
											<div class="flex justify-between text-[10px] text-gray-9">
												<span>0.02 (tiny)</span>
												<span>0.50 (huge)</span>
											</div>
											<Show when={isCustomBpp()}>
												<p class="text-[10px] text-amber-11 mt-1">
													Using custom bitrate
												</p>
											</Show>

											<Show when={ostype() === "macos"}>
												<div class="mt-4 pt-3 border-t border-gray-4">
													<button
														type="button"
														role="switch"
														aria-checked={forceFfmpegDecoder()}
														aria-label="Force FFmpeg decoder"
														class="flex items-center gap-2 text-xs text-gray-11 hover:text-gray-12 transition-colors w-full"
														onClick={() =>
															setForceFfmpegDecoder(!forceFfmpegDecoder())
														}
													>
														<div
															class={cx(
																"w-8 h-4 rounded-full transition-colors relative shrink-0",
																forceFfmpegDecoder()
																	? "bg-blue-9"
																	: "bg-gray-5",
															)}
														>
															<div
																class={cx(
																	"absolute top-0.5 w-3 h-3 rounded-full bg-white transition-transform",
																	forceFfmpegDecoder()
																		? "translate-x-4"
																		: "translate-x-0.5",
																)}
															/>
														</div>
														<div class="text-left">
															<span class="block">Force FFmpeg decoder</span>
															<span class="text-[10px] text-gray-9">
																Skip hardware decoder (auto-fallback enabled)
															</span>
														</div>
													</button>
												</div>
											</Show>
										</div>
									</Show>
								</div>
							</Show>
						</Field>
					</div>

					<div class="p-4 border-t border-gray-3">
						{settings.exportTo === "link" && !auth.data ? (
							<div class="flex flex-col items-center gap-2.5">
								<SignInButton class="w-full justify-center">
									<IconCapLink class="size-4" />
									<span>Sign in to share</span>
								</SignInButton>
							</div>
						) : (
							<div class="flex flex-col items-center gap-2.5">
								<Button
									class="w-full gap-2 h-12 text-base"
									variant="blue"
									size="lg"
									onClick={() => {
										if (settings.exportTo === "file") save.mutate();
										else if (settings.exportTo === "link") upload.mutate();
										else copy.mutate();
									}}
								>
									{settings.exportTo === "file" && (
										<>
											<IconCapFile class="size-5" />
											Export to File
										</>
									)}
									{settings.exportTo === "clipboard" && (
										<>
											<IconCapCopy class="size-5" />
											Export to Clipboard
										</>
									)}
									{settings.exportTo === "link" && (
										<>
											<IconCapLink class="size-5" />
											Export to Link
										</>
									)}
								</Button>
								<Show when={renderEstimate()}>
									{(est) => {
										const sec = Math.max(
											1,
											Math.round(
												(est().frameRenderTimeMs * est().totalFrames) / 1000,
											),
										);
										const timeStr =
											sec < 60
												? `~${sec}s`
												: `~${Math.floor(sec / 60)}m ${sec % 60}s`;
										return (
											<p class="text-xs text-gray-10 text-center mt-0.5">
												Est. size: {est().estimatedSizeMb.toFixed(1)} MB • Est. time: {timeStr}
											</p>
										);
									}}
								</Show>
							</div>
						)}
					</div>
				</div>
			</div>

			<Dialog.Root
				open={previewDialogOpen()}
				onOpenChange={setPreviewDialogOpen}
				size="lg"
				contentClass="max-w-[90vw] w-full"
			>
				<div class="p-4">
					<div class="flex items-center justify-between mb-4">
						<h2 class="text-gray-12 font-medium">Quality Preview</h2>
						<button
							type="button"
							onClick={() => setPreviewDialogOpen(false)}
							class="p-1.5 rounded-md hover:bg-gray-3 text-gray-11 hover:text-gray-12 transition-colors"
						>
							<IconLucideX class="size-5" />
						</button>
					</div>
					<div class="relative aspect-video rounded-lg overflow-hidden bg-gray-4 flex items-center justify-center">
						<Show when={previewUrl()}>
							{(url) => (
								<img
									src={url()}
									alt="Export preview full size"
									class="w-full h-full object-contain"
								/>
							)}
						</Show>
					</div>
					<div class="flex justify-between text-sm text-gray-11 mt-4">
						<span>
							{settings.resolution.width}×{settings.resolution.height}
						</span>
						<Show when={renderEstimate()}>
							{(est) => {
								return (
									<span>
										Estimated size: {est().estimatedSizeMb.toFixed(1)} MB
									</span>
								);
							}}
						</Show>
					</div>
				</div>
			</Dialog.Root>

			<Show when={exportState.type !== "idle" && exportState} keyed>
				{(exportState) => {
					const [copyPressed, setCopyPressed] = createSignal(false);
					const [clipboardCopyPressed, setClipboardCopyPressed] =
						createSignal(false);

					return (
						<div
							class="flex absolute inset-0 z-50 flex-col gap-6 justify-center items-center p-6 backdrop-blur-md text-gray-12"
							style={{
								"background-color":
									"color-mix(in srgb, var(--gray-1) 94%, transparent)",
							}}
						>
							<Switch>
								<Match
									when={exportState.action === "copy" && exportState}
									keyed
								>
									{(copyState) => (
										<Switch>
											<Match
												when={
													(copyState.type === "starting" ||
														copyState.type === "rendering") &&
													copyState
												}
												keyed
											>
												{(renderState) => (
													<ActiveExport
														heading={
															renderState.type === "rendering"
																? `Rendering ${exportMediumLabel()}`
																: "Preparing export"
														}
														state={renderState}
														onCancel={handleCancel}
													/>
												)}
											</Match>
											<Match when={copyState.type === "copying"}>
												<ActiveExport heading="Copying to clipboard" />
											</Match>
											<Match when={copyState.type === "done"}>
												<CompletedExport
													title="Copied to clipboard"
													subtitle={`Your ${exportMediumLabel()} is ready to paste`}
												/>
											</Match>
										</Switch>
									)}
								</Match>

								<Match
									when={exportState.action === "save" && exportState}
									keyed
								>
									{(saveState) => (
										<Switch>
											<Match
												when={
													(saveState.type === "starting" ||
														saveState.type === "rendering") &&
													saveState
												}
												keyed
											>
												{(renderState) => (
													<ActiveExport
														heading={
															renderState.type === "rendering"
																? `Rendering ${exportMediumLabel()}`
																: "Preparing export"
														}
														state={renderState}
														onCancel={handleCancel}
													/>
												)}
											</Match>
											<Match when={saveState.type === "copying"}>
												<ActiveExport heading="Saving to file" />
											</Match>
											<Match when={saveState.type === "done"}>
												<CompletedExport
													title="Export complete"
													subtitle={`Your ${exportMediumLabel()} is ready`}
												/>
											</Match>
										</Switch>
									)}
								</Match>

								<Match
									when={exportState.action === "upload" && exportState}
									keyed
								>
									{(uploadState) => (
										<Switch>
											<Match
												when={uploadState.type === "uploading" && uploadState}
												keyed
											>
												{(uploading) => (
													<ActiveExport
														heading="Uploading"
														percent={uploading.progress}
													/>
												)}
											</Match>
											<Match
												when={
													(uploadState.type === "starting" ||
														uploadState.type === "rendering") &&
													uploadState
												}
												keyed
											>
												{(renderState) => (
													<ActiveExport
														heading={
															renderState.type === "rendering"
																? `Rendering ${exportMediumLabel()}`
																: "Preparing export"
														}
														state={renderState}
														onCancel={handleCancel}
													/>
												)}
											</Match>
											<Match when={uploadState.type === "done"}>
												<CompletedExport
													title="Upload complete"
													subtitle="Your Cap has been uploaded successfully"
												/>
											</Match>
										</Switch>
									)}
								</Match>
							</Switch>

							<Show when={exportState.type === "done"}>
								<div class="flex flex-col gap-3 items-center">
									<Show
										when={
											exportState.action === "upload" && meta().sharing?.link
										}
									>
										{(link) => (
											<div class="flex gap-2">
												<Button
													onClick={() => {
														setCopyPressed(true);
														setTimeout(() => {
															setCopyPressed(false);
														}, 2000);
														navigator.clipboard.writeText(link());
													}}
													variant="dark"
													class="flex gap-2 justify-center items-center"
												>
													{!copyPressed() ? (
														<IconCapCopy class="transition-colors duration-200 text-gray-1 size-4 group-hover:text-gray-12" />
													) : (
														<IconLucideCheck class="transition-colors duration-200 text-gray-1 size-4 svgpathanimation group-hover:text-gray-12" />
													)}
													<p>Copy Link</p>
												</Button>
												<a href={link()} target="_blank" rel="noreferrer">
													<Button
														variant="dark"
														class="flex gap-2 justify-center items-center"
													>
														<IconCapLink class="transition-colors duration-200 text-gray-1 size-4 group-hover:text-gray-12" />
														<p>Open Link</p>
													</Button>
												</a>
											</div>
										)}
									</Show>

									<Show when={exportState.action === "save"}>
										<div class="flex gap-3">
											<Button
												variant="dark"
												class="flex gap-2 items-center"
												onClick={() => {
													const path = outputPath();
													if (path) {
														commands.openFilePath(path);
													}
												}}
											>
												<IconCapFile class="size-4" />
												Open File
											</Button>
											<Button
												variant="dark"
												class="flex gap-2 items-center"
												onClick={async () => {
													const path = outputPath();
													if (path) {
														setClipboardCopyPressed(true);
														setTimeout(() => {
															setClipboardCopyPressed(false);
														}, 2000);
														await commands.copyVideoToClipboard(path);
														toast.success(
															`${exportedAssetLabel()} copied to clipboard`,
														);
													}
												}}
											>
												{!clipboardCopyPressed() ? (
													<IconCapCopy class="size-4" />
												) : (
													<IconLucideCheck class="size-4 svgpathanimation" />
												)}
												Copy to Clipboard
											</Button>
										</div>
									</Show>

									<Button
										variant="gray"
										class="flex gap-1.5 items-center"
										onClick={() => {
											setExportState({ type: "idle" });
											handleBack();
										}}
									>
										<IconCapMoveLeft class="size-4" />
										Back to editor
									</Button>
								</div>
							</Show>

							<Show when={exportState.type !== "done"}>
								<p class="max-w-sm text-xs leading-relaxed text-center text-gray-11">
									<span class="font-semibold text-gray-12">Tip:</span> Use
									Instant Mode for your next recording to record and upload on
									the fly, with no exporting required.
								</p>
							</Show>
						</div>
					);
				}}
			</Show>
		</div>
	);
}

function ProgressRing(props: { percent?: number; indeterminate?: boolean }) {
	const pct = () => Math.max(0, Math.min(100, props.percent ?? 0));

	return (
		<div class="relative size-20">
			<svg
				class={cx("size-20 -rotate-90", props.indeterminate && "animate-spin")}
				viewBox="0 0 64 64"
				fill="none"
			>
				<circle
					cx="32"
					cy="32"
					r="28"
					stroke="currentColor"
					stroke-width="4"
					class="text-gray-4"
				/>
				<circle
					cx="32"
					cy="32"
					r="28"
					stroke="currentColor"
					stroke-width="4"
					stroke-linecap="round"
					stroke-dasharray={
						props.indeterminate ? "44 176" : `${pct() * 1.76} 176`
					}
					class="transition-all duration-300 text-blue-9"
				/>
			</svg>
			<Show when={!props.indeterminate}>
				<div class="flex absolute inset-0 justify-center items-center">
					<span class="text-base font-semibold tabular-nums text-gray-12">
						{Math.round(pct())}%
					</span>
				</div>
			</Show>
		</div>
	);
}

function ActiveExport(props: {
	heading: string;
	state?: RenderState;
	percent?: number;
	onCancel?: () => void;
}) {
	const frames = () =>
		props.state?.type === "rendering" ? props.state.progress : null;

	const percent = () => {
		const rendered = frames();
		if (rendered) return (rendered.renderedCount / rendered.totalFrames) * 100;
		return props.percent;
	};

	return (
		<div class="flex flex-col gap-5 items-center w-72 text-center">
			<ProgressRing
				percent={percent()}
				indeterminate={percent() === undefined}
			/>
			<div class="flex flex-col gap-1 items-center">
				<h2 class="text-lg font-medium text-gray-12">{props.heading}</h2>
				<Show when={frames()}>
					{(rendered) => (
						<p class="text-sm tabular-nums text-gray-11">
							{rendered().renderedCount.toLocaleString()} /{" "}
							{rendered().totalFrames.toLocaleString()} frames
						</p>
					)}
				</Show>
			</div>
			<Show when={props.onCancel}>
				<Button variant="gray" size="sm" onClick={() => props.onCancel?.()}>
					Cancel
				</Button>
			</Show>
		</div>
	);
}

function CompletedExport(props: { title: string; subtitle: string }) {
	return (
		<div class="flex flex-col gap-4 items-center text-center">
			<div class="flex justify-center items-center rounded-full size-16 bg-blue-3">
				<IconLucideCheck class="size-8 text-blue-9" />
			</div>
			<div class="flex flex-col gap-1 items-center">
				<h2 class="text-lg font-medium text-gray-12">{props.title}</h2>
				<p class="text-sm text-gray-11">{props.subtitle}</p>
			</div>
		</div>
	);
}