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: '/health-packages' | '/seo' | '/doctors' | '/departments' | '/news' | '/blog' | '/doctor-og';
}

export function BytescaleUploader({ value, onChange, folderPath }: BytescaleUploaderProps) {
	const baseURL = import.meta.env.VITE_API_URL;
	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(`${baseURL}/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>
	);
}