import React, { useState } from "react";
import { Upload, message } from "antd";
import { LoadingOutlined, PlusOutlined } from "@ant-design/icons";
import type { UploadProps, UploadFile } from "antd/es/upload/interface";
import request from "@/api/request";
import style from "./index.module.scss";

interface VideoUploadProps {
  value?: string;
  onChange?: (url: string) => void;
  disabled?: boolean;
  className?: string;
}

const VideoUpload: React.FC<VideoUploadProps> = ({
  value = "",
  onChange,
  disabled = false,
  className,
}) => {
  const [loading, setLoading] = useState(false);
  const [fileList, setFileList] = useState<UploadFile[]>([]);

  // 将value转换为fileList格式
  React.useEffect(() => {
    if (value) {
      const file: UploadFile = {
        uid: "-1",
        name: "video",
        status: "done",
        url: value,
      };
      setFileList([file]);
    } else {
      setFileList([]);
    }
  }, [value]);

  // 文件验证
  const beforeUpload = (file: File) => {
    const isVideo = file.type.startsWith("video/");
    if (!isVideo) {
      message.error("只能上传视频文件！");
      return false;
    }

    const isLt50M = file.size / 1024 / 1024 < 50;
    if (!isLt50M) {
      message.error("视频大小不能超过50MB！");
      return false;
    }

    return false; // 阻止自动上传
  };

  // 处理文件变化
  const handleChange: UploadProps["onChange"] = info => {
    if (info.file.status === "uploading") {
      setLoading(true);
      return;
    }
    if (info.file.status === "done") {
      setLoading(false);
      // 更新fileList
      setFileList([info.file]);
      // 调用onChange
      onChange?.(info.file.url || "");
    }
  };

  // 自定义上传请求
  const customRequest: UploadProps["customRequest"] = async ({
    file,
    onSuccess,
    onError,
  }) => {
    try {
      setLoading(true);
      const formData = new FormData();
      formData.append("file", file as File);

      const response = await request("/v1/attachment/upload", formData, "POST");

      if (response) {
        const uploadedUrl =
          typeof response === "string" ? response : response.url || response;
        onSuccess?.(uploadedUrl);
      } else {
        throw new Error("上传失败");
      }
    } catch (error) {
      console.error("上传失败:", error);
      onError?.(error as Error);
      message.error("上传失败，请重试");
    } finally {
      setLoading(false);
    }
  };

  // 删除文件
  const handleRemove = () => {
    setFileList([]);
    onChange?.("");
    return true;
  };

  const uploadButton = (
    <div className={style["upload-button"]}>
      {loading ? (
        <div className={style["uploading"]}>
          <LoadingOutlined className={style["upload-icon"]} />
          <div className={style["upload-text"]}>上传中...</div>
        </div>
      ) : (
        <>
          <PlusOutlined className={style["upload-icon"]} />
          <div className={style["upload-text"]}>上传视频</div>
        </>
      )}
    </div>
  );

  return (
    <div className={`${style["upload-container"]} ${className || ""}`}>
      <Upload
        name="file"
        multiple={false}
        fileList={fileList}
        accept="video/*"
        listType="text"
        showUploadList={true}
        disabled={disabled || loading}
        beforeUpload={beforeUpload}
        customRequest={customRequest}
        onChange={handleChange}
        onRemove={handleRemove}
      >
        {fileList.length >= 1 ? null : uploadButton}
      </Upload>
    </div>
  );
};

export default VideoUpload;