origin/apps/web/src/app/main/admin/deptsettingpage/page.tsx

import { useTusUpload } from "@web/src/hooks/useTusUpload";
import { ShareCodeGenerator } from "../sharecode/sharecodegenerator";
import { ShareCodeValidator } from "../sharecode/sharecodevalidator";
import { useState } from "react";
import { message, Progress, Button, Tabs } from "antd";
import { UploadOutlined } from "@ant-design/icons";

const { TabPane } = Tabs;

export default function DeptSettingPage() {
    const [uploadedFileId, setUploadedFileId] = useState<string>('');
    
    // 使用您的 useTusUpload hook
    const { uploadProgress, isUploading, uploadError, handleFileUpload } = useTusUpload({
        onSuccess: (fileId: string) => {
            setUploadedFileId(fileId);
            message.success('文件上传成功');
        },
        onError: (error: Error) => {
            message.error('上传失败：' + error.message);
        }
    });

    // 处理文件上传
    const handleFileSelect = async (file: File) => {
        const fileKey = `file-${Date.now()}`; // 生成唯一的文件标识
        handleFileUpload(
            file,
            (result) => {
                setUploadedFileId(result.fileId);
                message.success('文件上传成功');
            },
            (error) => {
                message.error('上传失败：' + error.message);
            },
            fileKey
        );
    };

    // 处理分享码生成成功
    const handleShareSuccess = (code: string) => {
        message.success('分享码生成成功：' + code);
        // 可以在这里添加其他逻辑，比如保存到历史记录
    };

    // 处理分享码验证成功
    const handleValidSuccess = async (fileId: string) => {
        try {
            // 构建下载URL
            const response = await fetch(`/api/upload/download/${fileId}`);
            if (!response.ok) {
                throw new Error('文件下载失败');
            }

            // 获取文件名
            const contentDisposition = response.headers.get('content-disposition');
            let filename = 'downloaded-file';
            if (contentDisposition) {
                const matches = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/.exec(contentDisposition);
                if (matches != null && matches[1]) {
                    filename = matches[1].replace(/['"]/g, '');
                }
            }

            // 创建下载链接
            const blob = await response.blob();
            const url = window.URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = filename;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(url);

            message.success('文件下载开始');
        } catch (error) {
            console.error('下载失败:', error);
            message.error('文件下载失败');
        }
    };

    return (
        <div style={{ maxWidth: '800px', margin: '0 auto', padding: '20px' }}>
            <h2>文件分享中心</h2>
            
            <Tabs defaultActiveKey="upload">
                <TabPane tab="上传分享" key="upload">
                    {/* 文件上传区域 */}
                    <div style={{ marginBottom: '40px' }}>
                        <h3>第一步：上传文件</h3>
                        <div style={{ 
                            padding: '20px',
                            border: '2px dashed #d9d9d9',
                            borderRadius: '8px',
                            textAlign: 'center'
                        }}>
                            <input
                                type="file"
                                id="file-input"
                                style={{ display: 'none' }}
                                onChange={(e) => {
                                    const file = e.target.files?.[0];
                                    if (file) {
                                        handleFileSelect(file);
                                    }
                                }}
                                disabled={isUploading}
                            />
                            <label 
                                htmlFor="file-input"
                                style={{
                                    display: 'inline-block',
                                    padding: '12px 24px',
                                    backgroundColor: '#1890ff',
                                    color: 'white',
                                    borderRadius: '6px',
                                    cursor: 'pointer',
                                }}
                            >
                                <UploadOutlined /> 选择文件
                            </label>

                            {isUploading && (
                                <div style={{ marginTop: '20px' }}>
                                    <Progress 
                                        percent={Object.values(uploadProgress)[0] || 0} 
                                        status="active" 
                                    />
                                </div>
                            )}

                            {uploadError && (
                                <div style={{ color: '#ff4d4f', marginTop: '10px' }}>
                                    {uploadError}
                                </div>
                            )}
                        </div>
                    </div>

                    {/* 生成分享码区域 */}
                    {uploadedFileId && (
                        <div style={{ marginBottom: '40px' }}>
                            <h3>第二步：生成分享码</h3>
                            <ShareCodeGenerator
                                fileId={uploadedFileId}
                                onSuccess={handleShareSuccess}
                            />
                        </div>
                    )}
                </TabPane>

                {/* 使用分享码区域 */}
                <TabPane tab="下载文件" key="download">
                    <div>
                        <h3>使用分享码下载文件</h3>
                        <ShareCodeValidator 
                            onValidSuccess={handleValidSuccess}
                        />
                    </div>
                </TabPane>
            </Tabs>
        </div>
    );
}