fenghuo/apps/web/components/AdvancedFileDownload.tsx

import React, { useState } from 'react';
import { useFileDownload } from '../hooks/useFileDownload';
import { useTusUpload } from '../hooks/useTusUpload';

export function AdvancedFileDownload() {
	const { getFileInfo } = useTusUpload();
	const {
		downloadProgress,
		isDownloading,
		downloadError,
		downloadFile,
		downloadFileWithProgress,
		previewFile,
		copyFileLink,
		canPreview,
		getFileIcon,
	} = useFileDownload();

	const [fileId, setFileId] = useState('');
	const [fileInfo, setFileInfo] = useState<any>(null);
	const [loading, setLoading] = useState(false);
	const [error, setError] = useState<string | null>(null);

	// 获取文件信息
	const handleGetFileInfo = async () => {
		if (!fileId.trim()) {
			setError('请输入文件ID');
			return;
		}

		setLoading(true);
		setError(null);

		try {
			const info = await getFileInfo(fileId);
			if (info) {
				setFileInfo(info);
			} else {
				setError('文件不存在或未准备好');
			}
		} catch (err) {
			setError('获取文件信息失败');
		} finally {
			setLoading(false);
		}
	};

	// 简单下载
	const handleSimpleDownload = () => {
		downloadFile(fileId, fileInfo?.title);
	};

	// 带进度的下载
	const handleProgressDownload = async () => {
		try {
			await downloadFileWithProgress(fileId, fileInfo?.title);
		} catch (error) {
			console.error('Download with progress failed:', error);
		}
	};

	// 预览文件
	const handlePreview = () => {
		previewFile(fileId);
	};

	// 复制链接
	const handleCopyLink = async () => {
		try {
			await copyFileLink(fileId);
			alert('链接已复制到剪贴板！');
		} catch (error) {
			alert('复制失败');
		}
	};

	return (
		<div className="p-6 bg-white rounded-lg shadow-md">
			<h3 className="text-lg font-semibold mb-4">高级文件下载</h3>

			{/* 文件ID输入 */}
			<div className="mb-4">
				<label className="block text-sm font-medium text-gray-700 mb-2">文件ID</label>
				<div className="flex gap-2">
					<input
						type="text"
						value={fileId}
						onChange={(e) => setFileId(e.target.value)}
						placeholder="输入文件ID"
						className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
					/>
					<button
						onClick={handleGetFileInfo}
						disabled={loading}
						className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
					>
						{loading ? '查询中...' : '查询'}
					</button>
				</div>
			</div>

			{/* 错误信息 */}
			{(error || downloadError) && (
				<div className="mb-4 p-3 bg-red-100 border border-red-300 text-red-700 rounded-md">
					{error || downloadError}
				</div>
			)}

			{/* 下载进度 */}
			{isDownloading && downloadProgress && (
				<div className="mb-4 p-4 bg-blue-50 rounded-md">
					<div className="flex items-center justify-between mb-2">
						<span className="text-sm font-medium text-blue-900">下载进度</span>
						<span className="text-sm text-blue-600">{downloadProgress.percentage}%</span>
					</div>
					<div className="w-full bg-blue-200 rounded-full h-2">
						<div
							className="bg-blue-600 h-2 rounded-full transition-all duration-300"
							style={{ width: `${downloadProgress.percentage}%` }}
						/>
					</div>
					<div className="mt-1 text-xs text-blue-600">
						{formatFileSize(downloadProgress.loaded)} / {formatFileSize(downloadProgress.total)}
					</div>
				</div>
			)}

			{/* 文件信息 */}
			{fileInfo && (
				<div className="mb-6 p-4 bg-gray-50 rounded-md">
					<div className="flex items-center gap-3 mb-3">
						<span className="text-2xl">{getFileIcon(fileInfo.type || '')}</span>
						<div>
							<h4 className="font-medium">{fileInfo.title || '未知文件'}</h4>
							<p className="text-sm text-gray-600">{fileInfo.type || '未知类型'}</p>
						</div>
					</div>

					<div className="grid grid-cols-2 gap-4 text-sm">
						<div>
							<span className="font-medium">状态:</span>
							<span
								className={`ml-2 px-2 py-1 rounded text-xs ${
									fileInfo.status === 'UPLOADED' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'
								}`}
							>
								{fileInfo.status || '未知'}
							</span>
						</div>
						{fileInfo.meta?.size && (
							<div>
								<span className="font-medium">大小:</span> {formatFileSize(fileInfo.meta.size)}
							</div>
						)}
						<div>
							<span className="font-medium">创建时间:</span> {new Date(fileInfo.createdAt).toLocaleString()}
						</div>
						<div>
							<span className="font-medium">存储类型:</span> {fileInfo.storageType || '未知'}
						</div>
					</div>
				</div>
			)}

			{/* 操作按钮 */}
			{fileInfo && (
				<div className="space-y-3">
					<div className="flex gap-2 flex-wrap">
						<button
							onClick={handleSimpleDownload}
							disabled={isDownloading}
							className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:opacity-50"
						>
							快速下载
						</button>
						<button
							onClick={handleProgressDownload}
							disabled={isDownloading}
							className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
						>
							进度下载
						</button>
						{canPreview(fileInfo.type || '') && (
							<button
								onClick={handlePreview}
								className="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700"
							>
								预览文件
							</button>
						)}
						<button onClick={handleCopyLink} className="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700">
							复制链接
						</button>
					</div>

					{/* 文件预览提示 */}
					{canPreview(fileInfo.type || '') && (
						<div className="p-3 bg-purple-50 border border-purple-200 rounded-md">
							<p className="text-sm text-purple-700">💡 此文件支持在线预览，点击"预览文件"可以在浏览器中直接查看</p>
						</div>
					)}
				</div>
			)}

			{/* 使用说明 */}
			<div className="mt-6 p-4 bg-gray-50 rounded-md">
				<h4 className="text-sm font-medium text-gray-900 mb-2">功能说明：</h4>
				<ul className="text-xs text-gray-600 space-y-1">
					<li>
						• <strong>快速下载</strong>：直接通过浏览器下载文件
					</li>
					<li>
						• <strong>进度下载</strong>：显示下载进度，适合大文件
					</li>
					<li>
						• <strong>预览文件</strong>：图片、PDF、视频等可在线预览
					</li>
					<li>
						• <strong>复制链接</strong>：复制文件访问链接到剪贴板
					</li>
				</ul>
			</div>
		</div>
	);
}

// 格式化文件大小
function formatFileSize(bytes: number): string {
	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 / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}