import { ShareCodeGenerator } from "../sharecode/sharecodegenerator";
import { ShareCodeValidator } from "../sharecode/sharecodevalidator";
import { message, Tabs, Form, Spin } from "antd";
import { env } from '../../../env'
import { TusUploader } from "@web/src/components/common/uploader/TusUploader";
import { useState } from "react";
const { TabPane } = Tabs;
export default function DeptSettingPage() {
    const [form] = Form.useForm();
    const uploadFileId = Form.useWatch(["file"], form)?.[0]
    const [isGetingFileId, setIsGetingFileId] = useState(false);
    // 处理分享码生成成功
    const handleShareSuccess = (code: string) => {
        message.success('分享码生成成功：' + code);
        // 可以在这里添加其他逻辑，比如保存到历史记录
    }
    // 处理分享码验证成功
    const handleValidSuccess = async (fileUrl: string, fileName: string) => {
        setIsGetingFileId(true);
        try {
            // 构建下载URL（包含文件名参数）
            console.log('文件url:', fileUrl);
            const downloadUrl = `http://${env.SERVER_IP}:${env.FILE_PORT}/uploads/${fileUrl}`;
            console.log('下载URL:', downloadUrl);
            const link = document.createElement('a');
            link.href = downloadUrl;

            // 直接使用传入的 fileName
            link.download = fileName;
            link.target = '_blank'; // 在新标签页中打开
            // 触发下载
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);

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


    return (
        <>
            {
                isGetingFileId ?
                    (<Spin spinning={isGetingFileId} fullscreen />) :
                    (<div style={{ maxWidth: '800px', margin: '0 auto', padding: '20px' }}>
                        <span className="text-2xl py-4">文件分享中心</span>
                        <Tabs defaultActiveKey="upload">
                            <TabPane tab="上传分享" key="upload">
                                {/* 文件上传区域 */}
                                <div style={{ marginBottom: '40px' }}>
                                    <span className="text-lg block text-zinc-700 py-2">第一步：上传文件</span>
                                    {/* 如果没有已上传文件，显示上传区域 */}
                                    <Form form={form}>
                                        <Form.Item name="file">
                                            <TusUploader
                                                multiple={false}
                                                style={"w-full py-4"}
                                            ></TusUploader>
                                        </Form.Item>
                                    </Form>
                                </div>

                                {/* 生成分享码区域 */}
                                <div style={{ marginBottom: '40px' }}>
                                    <span className="text-lg block text-zinc-700 py-4">第二步：生成分享码</span>
                                    <ShareCodeGenerator
                                        fileId={uploadFileId}
                                        onSuccess={handleShareSuccess}
                                    />
                                </div>
                            </TabPane>

                            {/* 使用分享码区域 */}
                            <TabPane tab="下载文件" key="download">
                                <div>
                                    <span className="text-lg block text-zinc-700 py-4">使用分享码下载文件</span>
                                    <ShareCodeValidator
                                        onValidSuccess={handleValidSuccess}
                                    />
                                </div>
                            </TabPane>
                        </Tabs>
                    </div>)
            }
        </>
    )

}