SurfSense/surfsense_web/components/sources/DocumentUploadTab.tsx

"use client";

import { useAtom } from "jotai";
import {
	ChevronDown,
	Crown,
	Dot,
	File as FileIcon,
	FolderOpen,
	Upload,
	X,
	Zap,
} from "lucide-react";

import { useTranslations } from "next-intl";
import { type ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useDropzone } from "react-dropzone";
import { toast } from "sonner";
import { uploadDocumentMutationAtom } from "@/atoms/documents/document-mutation.atoms";
import {
	Accordion,
	AccordionContent,
	AccordionItem,
	AccordionTrigger,
} from "@/components/ui/accordion";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuItem,
	DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Progress } from "@/components/ui/progress";
import { Spinner } from "@/components/ui/spinner";
import { Switch } from "@/components/ui/switch";
import type { ProcessingMode } from "@/contracts/types/document.types";
import { useElectronAPI } from "@/hooks/use-platform";
import { documentsApiService } from "@/lib/apis/documents-api.service";
import {
	trackDocumentUploadFailure,
	trackDocumentUploadStarted,
	trackDocumentUploadSuccess,
} from "@/lib/posthog/events";
import {
	getAcceptedFileTypes,
	getSupportedExtensions,
	getSupportedExtensionsSet,
} from "@/lib/supported-extensions";

interface DocumentUploadTabProps {
	searchSpaceId: string;
	onSuccess?: () => void;
	onAccordionStateChange?: (isExpanded: boolean) => void;
}

interface FileWithId {
	id: string;
	file: File;
}

interface FolderEntry {
	id: string;
	file: File;
	relativePath: string;
}

interface FolderUploadData {
	folderName: string;
	entries: FolderEntry[];
}

interface FolderTreeNode {
	name: string;
	isFolder: boolean;
	size?: number;
	children: FolderTreeNode[];
}

function buildFolderTree(entries: FolderEntry[]): FolderTreeNode[] {
	const root: FolderTreeNode = { name: "", isFolder: true, children: [] };

	for (const entry of entries) {
		const parts = entry.relativePath.split("/");
		let current = root;

		for (let i = 0; i < parts.length - 1; i++) {
			let child = current.children.find((c) => c.name === parts[i] && c.isFolder);
			if (!child) {
				child = { name: parts[i], isFolder: true, children: [] };
				current.children.push(child);
			}
			current = child;
		}

		current.children.push({
			name: parts[parts.length - 1],
			isFolder: false,
			size: entry.file.size,
			children: [],
		});
	}

	function sortNodes(node: FolderTreeNode) {
		node.children.sort((a, b) => {
			if (a.isFolder !== b.isFolder) return a.isFolder ? -1 : 1;
			return a.name.localeCompare(b.name);
		});
		for (const child of node.children) sortNodes(child);
	}
	sortNodes(root);

	return root.children;
}

function flattenTree(
	nodes: FolderTreeNode[],
	depth = 0
): { name: string; isFolder: boolean; depth: number; size?: number }[] {
	const items: { name: string; isFolder: boolean; depth: number; size?: number }[] = [];
	for (const node of nodes) {
		items.push({ name: node.name, isFolder: node.isFolder, depth, size: node.size });
		if (node.isFolder && node.children.length > 0) {
			items.push(...flattenTree(node.children, depth + 1));
		}
	}
	return items;
}

const FOLDER_BATCH_SIZE_BYTES = 20 * 1024 * 1024;
const FOLDER_BATCH_MAX_FILES = 10;

const MAX_FILE_SIZE_MB = 500;
const MAX_FILE_SIZE_BYTES = MAX_FILE_SIZE_MB * 1024 * 1024;

const toggleRowClass =
	"flex items-center justify-between rounded-lg bg-slate-400/5 dark:bg-white/5 p-3";

export function DocumentUploadTab({
	searchSpaceId,
	onSuccess,
	onAccordionStateChange,
}: DocumentUploadTabProps) {
	const t = useTranslations("upload_documents");
	const [files, setFiles] = useState<FileWithId[]>([]);
	const [uploadProgress, setUploadProgress] = useState(0);
	const [accordionValue, setAccordionValue] = useState<string>("");
	const [shouldSummarize, setShouldSummarize] = useState(false);
	const [useVisionLlm, setUseVisionLlm] = useState(false);
	const [processingMode, setProcessingMode] = useState<ProcessingMode>("basic");
	const [uploadDocumentMutation] = useAtom(uploadDocumentMutationAtom);
	const { mutate: uploadDocuments, isPending: isUploading } = uploadDocumentMutation;
	const fileInputRef = useRef<HTMLInputElement>(null);
	const folderInputRef = useRef<HTMLInputElement>(null);
	const progressIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
	const [folderUpload, setFolderUpload] = useState<FolderUploadData | null>(null);
	const [isFolderUploading, setIsFolderUploading] = useState(false);

	useEffect(() => {
		return () => {
			if (progressIntervalRef.current) {
				clearInterval(progressIntervalRef.current);
			}
		};
	}, []);

	const electronAPI = useElectronAPI();
	const isElectron = !!electronAPI?.browseFiles;

	const acceptedFileTypes = useMemo(() => getAcceptedFileTypes(), []);
	const supportedExtensions = useMemo(
		() => getSupportedExtensions(acceptedFileTypes),
		[acceptedFileTypes]
	);
	const supportedExtensionsSet = useMemo(
		() => getSupportedExtensionsSet(acceptedFileTypes),
		[acceptedFileTypes]
	);

	const addFiles = useCallback(
		(incoming: File[]) => {
			const oversized = incoming.filter((f) => f.size > MAX_FILE_SIZE_BYTES);
			if (oversized.length > 0) {
				toast.error(t("file_too_large"), {
					description: t("file_too_large_desc", {
						name: oversized[0].name,
						maxMB: MAX_FILE_SIZE_MB,
					}),
				});
			}
			const valid = incoming.filter((f) => f.size <= MAX_FILE_SIZE_BYTES);
			if (valid.length === 0) return;

			setFolderUpload(null);
			setFiles((prev) => {
				const newEntries = valid.map((f) => ({
					id: crypto.randomUUID?.() ?? `file-${Date.now()}-${Math.random().toString(36)}`,
					file: f,
				}));
				return [...prev, ...newEntries];
			});
		},
		[t]
	);

	const onDrop = useCallback(
		(acceptedFiles: File[]) => {
			addFiles(acceptedFiles);
		},
		[addFiles]
	);

	const { getRootProps, getInputProps, isDragActive } = useDropzone({
		onDrop,
		accept: acceptedFileTypes,
		maxSize: MAX_FILE_SIZE_BYTES,
		noClick: isElectron,
	});

	const handleFileInputClick = useCallback((e: React.MouseEvent<HTMLInputElement>) => {
		e.stopPropagation();
	}, []);

	const handleBrowseFiles = useCallback(async () => {
		if (!electronAPI?.browseFiles) return;

		const paths = await electronAPI.browseFiles();
		if (!paths || paths.length === 0) return;

		const fileDataList = await electronAPI.readLocalFiles(paths);
		const filtered = fileDataList.filter(
			(fd: { name: string; data: ArrayBuffer; mimeType: string }) => {
				const ext = fd.name.includes(".") ? `.${fd.name.split(".").pop()?.toLowerCase()}` : "";
				return ext !== "" && supportedExtensionsSet.has(ext);
			}
		);

		if (filtered.length === 0) {
			toast.error(t("no_supported_files_in_folder"));
			return;
		}

		const newFiles: FileWithId[] = filtered.map(
			(fd: { name: string; data: ArrayBuffer; mimeType: string }) => ({
				id: crypto.randomUUID?.() ?? `file-${Date.now()}-${Math.random().toString(36)}`,
				file: new File([fd.data], fd.name, { type: fd.mimeType }),
			})
		);
		setFolderUpload(null);
		setFiles((prev) => [...prev, ...newFiles]);
	}, [electronAPI, supportedExtensionsSet, t]);

	const handleFolderChange = useCallback(
		(e: ChangeEvent<HTMLInputElement>) => {
			const fileList = e.target.files;
			if (!fileList || fileList.length === 0) return;

			const allFiles = Array.from(fileList);
			const firstPath = allFiles[0]?.webkitRelativePath || "";
			const folderName = firstPath.split("/")[0];

			if (!folderName) {
				addFiles(allFiles);
				e.target.value = "";
				return;
			}

			const entries: FolderEntry[] = allFiles
				.filter((f) => {
					const ext = f.name.includes(".") ? `.${f.name.split(".").pop()?.toLowerCase()}` : "";
					return ext !== "" && supportedExtensionsSet.has(ext);
				})
				.map((f) => ({
					id: crypto.randomUUID?.() ?? `file-${Date.now()}-${Math.random().toString(36)}`,
					file: f,
					relativePath: f.webkitRelativePath.substring(folderName.length + 1),
				}));

			if (entries.length === 0) {
				toast.error(t("no_supported_files_in_folder"));
				e.target.value = "";
				return;
			}

			setFiles([]);
			setFolderUpload({ folderName, entries });
			e.target.value = "";
		},
		[addFiles, supportedExtensionsSet, t]
	);

	const formatFileSize = (bytes: number) => {
		if (bytes === 0) return "0 Bytes";
		const k = 1024;
		const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
		const i = Math.floor(Math.log(bytes) / Math.log(k));
		return `${parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`;
	};

	const totalFileSize = folderUpload
		? folderUpload.entries.reduce((total, entry) => total + entry.file.size, 0)
		: files.reduce((total, entry) => total + entry.file.size, 0);

	const fileCount = folderUpload ? folderUpload.entries.length : files.length;
	const hasContent = files.length > 0 || folderUpload !== null;
	const isAnyUploading = isUploading || isFolderUploading;

	const folderTreeItems = useMemo(() => {
		if (!folderUpload) return [];
		return flattenTree(buildFolderTree(folderUpload.entries));
	}, [folderUpload]);

	const handleAccordionChange = useCallback(
		(value: string) => {
			setAccordionValue(value);
			onAccordionStateChange?.(value === "supported-file-types");
		},
		[onAccordionStateChange]
	);

	const handleFolderUpload = async () => {
		if (!folderUpload) return;

		setUploadProgress(0);
		setIsFolderUploading(true);
		const total = folderUpload.entries.length;
		trackDocumentUploadStarted(Number(searchSpaceId), total, totalFileSize);

		try {
			const batches: FolderEntry[][] = [];
			let currentBatch: FolderEntry[] = [];
			let currentSize = 0;

			for (const entry of folderUpload.entries) {
				const size = entry.file.size;

				if (size >= FOLDER_BATCH_SIZE_BYTES) {
					if (currentBatch.length > 0) {
						batches.push(currentBatch);
						currentBatch = [];
						currentSize = 0;
					}
					batches.push([entry]);
					continue;
				}

				if (
					currentBatch.length >= FOLDER_BATCH_MAX_FILES ||
					currentSize + size > FOLDER_BATCH_SIZE_BYTES
				) {
					batches.push(currentBatch);
					currentBatch = [];
					currentSize = 0;
				}

				currentBatch.push(entry);
				currentSize += size;
			}

			if (currentBatch.length > 0) {
				batches.push(currentBatch);
			}

			let rootFolderId: number | null = null;
			let uploaded = 0;

			for (const batch of batches) {
				const result = await documentsApiService.folderUploadFiles(
					batch.map((e) => e.file),
					{
						folder_name: folderUpload.folderName,
						search_space_id: Number(searchSpaceId),
						relative_paths: batch.map((e) => e.relativePath),
						root_folder_id: rootFolderId,
						enable_summary: shouldSummarize,
						use_vision_llm: useVisionLlm,
						processing_mode: processingMode,
					}
				);

				if (result.root_folder_id && !rootFolderId) {
					rootFolderId = result.root_folder_id;
				}

				uploaded += batch.length;
				setUploadProgress(Math.round((uploaded / total) * 100));
			}

			trackDocumentUploadSuccess(Number(searchSpaceId), total);
			toast(t("upload_initiated"), { description: t("upload_initiated_desc") });
			setFolderUpload(null);
			onSuccess?.();
		} catch (error) {
			const message = error instanceof Error ? error.message : "Upload failed";
			trackDocumentUploadFailure(Number(searchSpaceId), message);
			toast(t("upload_error"), {
				description: `${t("upload_error_desc")}: ${message}`,
			});
		} finally {
			setIsFolderUploading(false);
			setUploadProgress(0);
		}
	};

	const handleUpload = async () => {
		if (folderUpload) {
			await handleFolderUpload();
			return;
		}

		setUploadProgress(0);
		trackDocumentUploadStarted(Number(searchSpaceId), files.length, totalFileSize);

		progressIntervalRef.current = setInterval(() => {
			setUploadProgress((prev) => (prev >= 90 ? prev : prev + Math.random() * 10));
		}, 200);

		const rawFiles = files.map((entry) => entry.file);
		uploadDocuments(
			{
				files: rawFiles,
				search_space_id: Number(searchSpaceId),
				should_summarize: shouldSummarize,
				use_vision_llm: useVisionLlm,
				processing_mode: processingMode,
			},
			{
				onSuccess: () => {
					if (progressIntervalRef.current) clearInterval(progressIntervalRef.current);
					setUploadProgress(100);
					trackDocumentUploadSuccess(Number(searchSpaceId), files.length);
					toast(t("upload_initiated"), { description: t("upload_initiated_desc") });
					onSuccess?.();
				},
				onError: (error: unknown) => {
					if (progressIntervalRef.current) clearInterval(progressIntervalRef.current);
					setUploadProgress(0);
					const message = error instanceof Error ? error.message : "Upload failed";
					trackDocumentUploadFailure(Number(searchSpaceId), message);
					toast(t("upload_error"), {
						description: `${t("upload_error_desc")}: ${message}`,
					});
				},
			}
		);
	};

	const renderBrowseButton = (options?: { compact?: boolean; fullWidth?: boolean }) => {
		const { compact, fullWidth } = options ?? {};
		const sizeClass = compact ? "h-7" : "h-8";
		const widthClass = fullWidth ? "w-full" : "";

		if (isElectron) {
			return (
				<DropdownMenu>
					<DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
						<Button
							variant="ghost"
							size="sm"
							className={`text-xs gap-1 bg-neutral-700/50 hover:bg-neutral-600/50 ${sizeClass} ${widthClass}`}
						>
							Browse
							<ChevronDown className="h-3 w-3 opacity-60" />
						</Button>
					</DropdownMenuTrigger>
					<DropdownMenuContent
						align="center"
						className="dark:bg-neutral-800"
						onClick={(e) => e.stopPropagation()}
					>
						<DropdownMenuItem onClick={handleBrowseFiles}>
							<FileIcon className="h-4 w-4 mr-2" />
							Files
						</DropdownMenuItem>
						<DropdownMenuItem onClick={() => folderInputRef.current?.click()}>
							<FolderOpen className="h-4 w-4 mr-2" />
							Folder
						</DropdownMenuItem>
					</DropdownMenuContent>
				</DropdownMenu>
			);
		}

		return (
			<DropdownMenu>
				<DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
					<Button
						variant="ghost"
						size="sm"
						className={`text-xs gap-1 bg-neutral-700/50 hover:bg-neutral-600/50 ${sizeClass} ${widthClass}`}
					>
						Browse
						<ChevronDown className="h-3 w-3 opacity-60" />
					</Button>
				</DropdownMenuTrigger>
				<DropdownMenuContent
					align="center"
					className="dark:bg-neutral-800"
					onClick={(e) => e.stopPropagation()}
				>
					<DropdownMenuItem onClick={() => fileInputRef.current?.click()}>
						<FileIcon className="h-4 w-4 mr-2" />
						{t("browse_files")}
					</DropdownMenuItem>
					<DropdownMenuItem onClick={() => folderInputRef.current?.click()}>
						<FolderOpen className="h-4 w-4 mr-2" />
						{t("browse_folder")}
					</DropdownMenuItem>
				</DropdownMenuContent>
			</DropdownMenu>
		);
	};

	return (
		<div className="space-y-2 w-full mx-auto">
			{/* Hidden file input */}
			<input
				{...getInputProps()}
				ref={fileInputRef}
				className="hidden"
				onClick={handleFileInputClick}
			/>

			{/* Hidden folder input for web folder browsing */}
			<input
				ref={folderInputRef}
				type="file"
				className="hidden"
				onChange={handleFolderChange}
				multiple
				{...({ webkitdirectory: "", directory: "" } as React.InputHTMLAttributes<HTMLInputElement>)}
			/>

			{/* MOBILE DROP ZONE */}
			<div className="sm:hidden">
				{hasContent ? (
					isElectron ? (
						<div className="w-full">{renderBrowseButton({ compact: true, fullWidth: true })}</div>
					) : (
						<button
							type="button"
							className="w-full text-xs h-8 flex items-center justify-center gap-1.5 rounded-md border border-dashed border-muted-foreground/30 text-muted-foreground hover:text-foreground hover:border-foreground/50 transition-colors"
							onClick={() => fileInputRef.current?.click()}
						>
							Add more files
						</button>
					)
				) : (
					// biome-ignore lint/a11y/useSemanticElements: cannot use <button> here because the contents include nested interactive elements (renderBrowseButton renders a Button), which would be invalid HTML.
					<div
						role="button"
						tabIndex={0}
						className="flex flex-col items-center gap-4 py-12 px-4 cursor-pointer w-full bg-transparent outline-none select-none"
						onClick={() => {
							if (!isElectron) fileInputRef.current?.click();
						}}
						onKeyDown={(e) => {
							if (e.key === "Enter" || e.key === " ") {
								e.preventDefault();
								if (!isElectron) fileInputRef.current?.click();
							}
						}}
					>
						<Upload className="h-10 w-10 text-muted-foreground" />
						<div className="text-center space-y-1.5">
							<p className="text-base font-medium">
								{isElectron ? t("select_files_or_folder") : t("tap_select_files_or_folder")}
							</p>
							<p className="text-sm text-muted-foreground">{t("file_size_limit")}</p>
						</div>
						<fieldset
							className="w-full mt-1 border-none p-0 m-0"
							onClick={(e) => e.stopPropagation()}
							onKeyDown={(e) => e.stopPropagation()}
						>
							{renderBrowseButton({ fullWidth: true })}
						</fieldset>
					</div>
				)}
			</div>

			{/* DESKTOP DROP ZONE */}
			<div
				{...getRootProps()}
				className={`hidden sm:block border-2 border-dashed rounded-lg transition-colors border-muted-foreground/30 hover:border-foreground/70 cursor-pointer ${hasContent ? "p-3" : "py-20 px-4"}`}
			>
				{hasContent ? (
					<div className="flex items-center gap-3">
						<Upload className="h-4 w-4 text-muted-foreground shrink-0" />
						<span className="text-xs text-muted-foreground flex-1 truncate">
							{isDragActive ? t("drop_files") : t("drag_drop_more")}
						</span>
						{renderBrowseButton({ compact: true })}
					</div>
				) : (
					<div className="relative">
						{isDragActive && (
							<div className="absolute inset-0 flex flex-col items-center justify-center gap-2">
								<Upload className="h-8 w-8 text-primary" />
								<p className="text-sm font-medium text-primary">{t("drop_files")}</p>
							</div>
						)}
						<div className={`flex flex-col items-center gap-2 ${isDragActive ? "invisible" : ""}`}>
							<Upload className="h-8 w-8 text-muted-foreground" />
							<p className="text-sm font-medium">{t("drag_drop")}</p>
							<p className="text-xs text-muted-foreground">{t("file_size_limit")}</p>
							<div className="mt-1">{renderBrowseButton()}</div>
						</div>
					</div>
				)}
			</div>

			{/* FILES SELECTED */}
			{hasContent && (
				<div className="rounded-lg border border-border p-3 space-y-2">
					<div className="flex items-center justify-between">
						<p className="text-sm font-medium">
							{folderUpload ? (
								<>
									<FolderOpen className="inline h-4 w-4 mr-1 -mt-0.5" />
									{folderUpload.folderName}
									<Dot className="inline h-4 w-4" />
									{folderUpload.entries.length}{" "}
									{folderUpload.entries.length === 1 ? "file" : "files"}
									<Dot className="inline h-4 w-4" />
									{formatFileSize(totalFileSize)}
								</>
							) : (
								<>
									{t("selected_files", { count: files.length })}
									<Dot className="inline h-4 w-4" />
									{formatFileSize(totalFileSize)}
								</>
							)}
						</p>
						<Button
							variant="ghost"
							size="sm"
							className="h-7 text-xs text-muted-foreground hover:text-foreground"
							onClick={() => {
								setFiles([]);
								setFolderUpload(null);
							}}
							disabled={isAnyUploading}
						>
							{t("clear_all")}
						</Button>
					</div>

					<div className="max-h-[160px] sm:max-h-[200px] overflow-y-auto -mx-1">
						{folderUpload
							? folderTreeItems.map((item, i) => (
									<div
										key={`${item.depth}-${i}-${item.name}`}
										className="flex items-center gap-1.5 py-0.5 px-2"
										style={{ paddingLeft: `${item.depth * 16 + 8}px` }}
									>
										{item.isFolder ? (
											<FolderOpen className="h-3.5 w-3.5 text-blue-400 shrink-0" />
										) : (
											<FileIcon className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
										)}
										<span className="text-sm truncate flex-1 min-w-0">{item.name}</span>
										{!item.isFolder && item.size != null && (
											<span className="text-xs text-muted-foreground shrink-0">
												{formatFileSize(item.size)}
											</span>
										)}
									</div>
								))
							: files.map((entry) => (
									<div
										key={entry.id}
										className="flex items-center gap-2 py-1.5 px-2 rounded-md hover:bg-slate-400/5 dark:hover:bg-white/5 group"
									>
										<span className="text-[10px] font-medium uppercase leading-none bg-muted px-1.5 py-0.5 rounded text-muted-foreground shrink-0">
											{entry.file.name.split(".").pop() || "?"}
										</span>
										<span className="text-sm truncate flex-1 min-w-0">{entry.file.name}</span>
										<span className="text-xs text-muted-foreground shrink-0">
											{formatFileSize(entry.file.size)}
										</span>
										<Button
											variant="ghost"
											size="icon"
											className="h-6 w-6 shrink-0"
											onClick={() => setFiles((prev) => prev.filter((e) => e.id !== entry.id))}
											disabled={isAnyUploading}
										>
											<X className="h-3 w-3" />
										</Button>
									</div>
								))}
					</div>

					{isAnyUploading && (
						<div className="space-y-1">
							<div className="flex items-center justify-between text-xs">
								<span>{folderUpload ? t("uploading_folder") : t("uploading_files")}</span>
								<span>{Math.round(uploadProgress)}%</span>
							</div>
							<Progress value={uploadProgress} className="h-1.5" />
						</div>
					)}

					<div className={toggleRowClass}>
						<div className="space-y-0.5">
							<p className="font-medium text-sm">Enable AI Summary</p>
							<p className="text-xs text-muted-foreground">
								Improves search quality but adds latency
							</p>
						</div>
						<Switch checked={shouldSummarize} onCheckedChange={setShouldSummarize} />
					</div>

					<div className={toggleRowClass}>
						<div className="space-y-0.5">
							<p className="font-medium text-sm">Enable Vision LLM</p>
							<p className="text-xs text-muted-foreground">
								Describes images using AI vision (costly, slower)
							</p>
						</div>
						<Switch checked={useVisionLlm} onCheckedChange={setUseVisionLlm} />
					</div>

					<div className="space-y-1.5">
						<p className="font-medium text-sm px-1">{t("processing_mode")}</p>
						<div className="grid grid-cols-2 gap-2">
							<button
								type="button"
								onClick={() => setProcessingMode("basic")}
								className={`flex items-start gap-2.5 rounded-lg border p-3 text-left transition-colors ${
									processingMode === "basic"
										? "border-primary bg-primary/5"
										: "border-border hover:border-muted-foreground/50"
								}`}
							>
								<Zap
									className={`h-4 w-4 mt-0.5 shrink-0 ${processingMode === "basic" ? "text-primary" : "text-muted-foreground"}`}
								/>
								<div className="space-y-0.5 min-w-0">
									<p className="font-medium text-sm">{t("basic_mode")}</p>
									<p className="text-xs text-muted-foreground">{t("basic_mode_desc")}</p>
								</div>
							</button>
							<button
								type="button"
								onClick={() => setProcessingMode("premium")}
								className={`flex items-start gap-2.5 rounded-lg border p-3 text-left transition-colors ${
									processingMode === "premium"
										? "border-amber-500 bg-amber-500/5"
										: "border-border hover:border-muted-foreground/50"
								}`}
							>
								<Crown
									className={`h-4 w-4 mt-0.5 shrink-0 ${processingMode === "premium" ? "text-amber-500" : "text-muted-foreground"}`}
								/>
								<div className="space-y-0.5 min-w-0">
									<p className="font-medium text-sm">{t("premium_mode")}</p>
									<p className="text-xs text-muted-foreground">{t("premium_mode_desc")}</p>
								</div>
							</button>
						</div>
					</div>

					<Button
						className="w-full"
						onClick={handleUpload}
						disabled={isAnyUploading || fileCount === 0}
					>
						{isAnyUploading ? (
							<span className="flex items-center gap-2">
								<Spinner size="sm" />
								{t("uploading")}
							</span>
						) : (
							<span className="flex items-center gap-2">
								{folderUpload
									? t("upload_folder_button", { count: fileCount })
									: t("upload_button", { count: fileCount })}
							</span>
						)}
					</Button>
				</div>
			)}

			{/* SUPPORTED FORMATS */}
			<Accordion
				type="single"
				collapsible
				value={accordionValue}
				onValueChange={handleAccordionChange}
				className="w-full mt-5"
			>
				<AccordionItem value="supported-file-types" className="border border-border rounded-lg">
					<AccordionTrigger className="px-3 py-2.5 hover:no-underline !items-center [&>svg]:!translate-y-0">
						<span className="text-xs sm:text-sm text-muted-foreground font-normal">
							{t("supported_file_types")}
						</span>
					</AccordionTrigger>
					<AccordionContent className="px-3 pb-3">
						<div className="flex flex-wrap gap-1.5">
							{supportedExtensions.map((ext) => (
								<Badge
									key={ext}
									variant="secondary"
									className="rounded border-0 bg-neutral-200/80 dark:bg-neutral-700/60 text-muted-foreground text-[10px] px-2 py-0.5 font-normal"
								>
									{ext}
								</Badge>
							))}
						</div>
					</AccordionContent>
				</AccordionItem>
			</Accordion>
		</div>
	);
}