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

export function DownloadTester() {
	const { serverUrl, getFileInfo } = useTusUpload();
	const [fileId, setFileId] = useState('2025/05/28/1mVGC8r6jy');
	const [testResults, setTestResults] = useState<any>(null);
	const [loading, setLoading] = useState(false);

	const runTests = async () => {
		setLoading(true);
		const results: any = {
			fileId,
			serverUrl,
			timestamp: new Date().toISOString(),
		};

		try {
			// 测试1: 检查资源信息
			console.log('Testing resource info...');
			const resourceInfo = await getFileInfo(fileId);
			results.resourceInfo = resourceInfo;

			// 测试2: 测试下载端点
			console.log('Testing download endpoint...');
			const downloadUrl = `${serverUrl}/download/${fileId}`;
			results.downloadUrl = downloadUrl;

			const response = await fetch(downloadUrl, { method: 'HEAD' });
			results.downloadResponse = {
				status: response.status,
				statusText: response.statusText,
				headers: Object.fromEntries(response.headers.entries()),
			};

			// 测试3: 测试API端点
			console.log('Testing API endpoint...');
			const apiUrl = `${serverUrl}/api/storage/resource/${fileId}`;
			results.apiUrl = apiUrl;

			const apiResponse = await fetch(apiUrl);
			const apiData = await apiResponse.json();
			results.apiResponse = {
				status: apiResponse.status,
				data: apiData,
			};
		} catch (error) {
			results.error = error instanceof Error ? error.message : String(error);
		}

		setTestResults(results);
		setLoading(false);
	};

	return (
		<div className="p-6 bg-white rounded-lg shadow-md">
			<h3 className="text-lg font-semibold mb-4">🔧 下载功能测试</h3>

			<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)}
						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={runTests}
						disabled={loading}
						className="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 disabled:opacity-50"
					>
						{loading ? '测试中...' : '开始测试'}
					</button>
				</div>
			</div>

			{testResults && (
				<div className="space-y-4">
					<div className="p-4 bg-gray-50 rounded-md">
						<h4 className="font-medium mb-2">测试结果</h4>
						<pre className="text-xs text-gray-600 overflow-auto max-h-96 bg-white p-3 rounded border">
							{JSON.stringify(testResults, null, 2)}
						</pre>
					</div>
				</div>
			)}
		</div>
	);
}