gg-backend/frontend/src/components/BytescaleUploader/BytescaleUploader.tsx

import {useState, useRef} from "react";
import {Button} from "@/components/ui/button";
import {User, X, Loader2} from "lucide-react";
import axios from "axios";

interface BytescaleUploaderProps {
	value: string;
	onChange: (url: string) => void;
	folderPath: "/doctors" | "/departments" | "/news";
}

export function BytescaleUploader({
	value,
	onChange,
	folderPath,
}: BytescaleUploaderProps) {
	const [isUploading, setIsUploading] = useState(false);
	const fileInputRef = useRef<HTMLInputElement>(null);

	const onFileSelected = async (event: React.ChangeEvent<HTMLInputElement>) => {
		const file = event.target.files?.[0];
		if (!file) return;

		if (file.size > 5 * 1024 * 1024) {
			alert("File is too large (Max 5MB)");
			return;
		}

		setIsUploading(true);

		const formData = new FormData();
		formData.append("file", file);
		formData.append("folderPath", folderPath);

		try {
			const response = await axios.post(
				"http://localhost:3000/api/upload",
				formData,
				{
					headers: {
						"Content-Type": "multipart/form-data",
					},
				},
			);

			const {fileUrl} = response.data;
			onChange(fileUrl);
		} catch (e: any) {
			console.error("Upload Error:", e);
			const errorMessage =
				e.response?.data?.error || e.message || "Upload failed";
			alert(`Upload Error: ${errorMessage}`);
		} finally {
			setIsUploading(false);
			if (fileInputRef.current) fileInputRef.current.value = "";
		}
	};

	return (
		<div className="flex flex-col gap-2 p-3 border rounded-md bg-muted/5">
			<div className="flex items-center gap-4">
				<div className="relative">
					{value ? (
						<>
							<img
								src={value}
								className="w-16 h-16 rounded-full object-cover border-2 border-primary/20"
								alt="Preview"
							/>
							<button
								type="button"
								onClick={() => onChange("")}
								className="absolute -top-1 -right-1 bg-destructive text-white rounded-full p-0.5 shadow-sm hover:scale-110 transition-transform"
							>
								<X className="w-3 h-3" />
							</button>
						</>
					) : (
						<div className="w-16 h-16 rounded-full bg-muted flex items-center justify-center">
							{isUploading ? (
								<Loader2 className="w-8 h-8 animate-spin text-primary" />
							) : (
								<User className="w-8 h-8 text-muted-foreground" />
							)}
						</div>
					)}
				</div>

				<input
					type="file"
					ref={fileInputRef}
					onChange={onFileSelected}
					accept="image/jpeg,image/png,image/webp"
					className="hidden"
				/>

				<Button
					type="button"
					variant="outline"
					size="sm"
					disabled={isUploading}
					onClick={() => fileInputRef.current?.click()}
				>
					{isUploading ? (
						<>
							<Loader2 className="mr-2 h-4 w-4 animate-spin" />
							Uploading...
						</>
					) : value ? (
						"Change Photo"
					) : (
						"Upload Photo"
					)}
				</Button>
			</div>

			{value && (
				<p className="text-xs text-amber-600 pl-[72px]">
					⚠️ Make sure to save the changes by clicking the "Save Changes"
					button.
				</p>
			)}
		</div>
	);
}