panel/src/components/FileUploadBox.js

"use client";

import { useState, useRef, useCallback } from "react";
import Button from "@/components/ui/Button";

export default function FileUploadBox({ projectId, onFileUploaded }) {
	const [uploading, setUploading] = useState(false);
	const [dragOver, setDragOver] = useState(false);
	const fileInputRef = useRef(null);

	const acceptedTypes = ".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.txt,.dwg,.zip";

	const uploadFiles = async (files) => {
		const validFiles = Array.from(files).filter(file => {
			const isValidType = acceptedTypes.split(',').some(type => 
				file.name.toLowerCase().endsWith(type.replace('*', ''))
			);
			const isValidSize = file.size <= 10 * 1024 * 1024; // 10MB limit
			return isValidType && isValidSize;
		});

		if (validFiles.length === 0) {
			alert('No valid files selected (invalid type or size > 10MB)');
			return;
		}

		if (validFiles.length !== files.length) {
			alert('Some files were skipped due to invalid type or size (max 10MB)');
		}

		setUploading(true);
		const uploadPromises = validFiles.map(async (file) => {
			const formData = new FormData();
			formData.append("file", file);
			formData.append("entityType", "project");
			formData.append("entityId", projectId.toString());

			try {
				const response = await fetch("/api/files", {
					method: "POST",
					body: formData,
				});

				if (response.ok) {
					const uploadedFile = await response.json();
					onFileUploaded?.(uploadedFile);
					return { success: true };
				} else {
					const error = await response.json();
					return { success: false, error: error.error || "Upload failed" };
				}
			} catch (error) {
				return { success: false, error: "Network error" };
			}
		});

		const results = await Promise.all(uploadPromises);
		const failed = results.filter(r => !r.success);

		if (failed.length > 0) {
			alert(`Failed to upload ${failed.length} file(s)`);
		}

		setUploading(false);
	};

	const handleInputChange = (e) => {
		if (e.target.files.length > 0) {
			uploadFiles(e.target.files);
		}
		e.target.value = ''; // Reset input
	};

	const handleDrop = useCallback((e) => {
		e.preventDefault();
		setDragOver(false);
		if (e.dataTransfer.files.length > 0) {
			uploadFiles(e.dataTransfer.files);
		}
	}, []);

	const handleDragOver = useCallback((e) => {
		e.preventDefault();
		setDragOver(true);
	}, []);

	const handleDragLeave = useCallback((e) => {
		e.preventDefault();
		setDragOver(false);
	}, []);

	const handleClick = () => {
		fileInputRef.current?.click();
	};

	return (
		<div className="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:border-gray-400 transition-colors cursor-pointer">
			<input
				ref={fileInputRef}
				type="file"
				multiple
				className="hidden"
				onChange={handleInputChange}
				accept={acceptedTypes}
				disabled={uploading}
			/>

			{uploading ? (
				<div className="flex flex-col items-center">
					<svg className="animate-spin h-6 w-6 text-blue-600 mb-2" fill="none" viewBox="0 0 24 24">
						<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
						<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
					</svg>
					<span className="text-xs text-gray-600">Przesyłanie plików...</span>
				</div>
			) : (
				<div 
					className={`flex flex-col items-center ${dragOver ? 'scale-105' : ''} transition-transform`}
					onDrop={handleDrop}
					onDragOver={handleDragOver}
					onDragLeave={handleDragLeave}
					onClick={handleClick}
				>
					<svg className="w-8 h-8 text-gray-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
					</svg>
					<span className="text-sm font-medium text-gray-900 mb-1">
						{dragOver ? 'Upuść pliki tutaj' : 'Przeciągnij pliki lub kliknij'}
					</span>
					<span className="text-xs text-gray-500">
						PDF, DOC, XLS, obrazki, DWG, ZIP
					</span>
				</div>
			)}
		</div>
	);
}