import React, { useState, useRef, useEffect } from 'react';
import { Upload, Button, Switch, Space, message } from 'antd';
import { PlusOutlined, RotateLeftOutlined, RotateRightOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
import { useSearchParams } from '@umijs/max';
import { getToken } from '@/utils/auth';
import './scanUpload.less';

/**
 * 扫码上传页面
 */
const ScanUpload: React.FC = () => {
  const [searchParams] = useSearchParams();
  const [imgSrc, setImgSrc] = useState<string>('');
  const [isCrop, setIsCrop] = useState(false);
  const [uploading, setUploading] = useState(false);
  
  const classId = searchParams.get('id') || '0';
  const token = searchParams.get('token') || getToken() || '';

  // 获取上传地址
  const getUploadUrl = () => {
    const baseUrl = process.env.NODE_ENV === 'development' ? '/api' : '';
    return `${baseUrl}/fileUploadAndDownload/upload`;
  };

  // 文件选择处理
  const handleFileChange = (info: any) => {
    const file = info.file?.originFileObj || info.file;
    if (!file) return;

    const isImage = file.type?.includes('image');
    if (!isImage) {
      message.error('请选择图片文件');
      return;
    }

    if (file.size / 1024 / 1024 > 8) {
      message.error('文件大小不能超过8MB!');
      return;
    }

    const reader = new FileReader();
    reader.onload = (e) => {
      setImgSrc(e.target?.result as string);
    };
    reader.readAsDataURL(file);
  };

  // 上传处理
  const handleUpload = () => {
    if (!imgSrc) {
      message.warning('请先选择图片');
      return;
    }
    setUploading(true);
    // 模拟上传
    setTimeout(() => {
      setUploading(false);
      setImgSrc('');
      message.success('上传成功');
    }, 1500);
  };

  // 上传成功回调
  const handleUploadSuccess = (res: any) => {
    if (res?.data) {
      setImgSrc('');
      setUploading(false);
      message.success('上传成功');
    }
  };

  return (
    <div className="scan-upload-container">
      <div className="upload-area">
        <Upload
          accept="image/*"
          showUploadList={false}
          beforeUpload={() => false}
          onChange={handleFileChange}
        >
          <PlusOutlined />
        </Upload>
      </div>

      <div className="preview-area">
        {imgSrc ? (
          isCrop ? (
            <div className="cropper-wrapper">
              {/* 裁剪组件占位 - 需要集成 react-cropper */}
              <img src={imgSrc} alt="preview" className="preview-image" />
            </div>
          ) : (
            <img src={imgSrc} alt="preview" className="preview-image" />
          )
        ) : (
          <span style={{ color: '#999' }}>请选择图片</span>
        )}
      </div>

      <div className="toolbar">
        {isCrop && (
          <Space.Compact>
            <Button icon={<RotateLeftOutlined />} title="向左旋转" />
            <Button icon={<RotateRightOutlined />} title="向右旋转" />
            <Button icon={<ZoomInOutlined />} title="放大" />
            <Button icon={<ZoomOutOutlined />} title="缩小" />
          </Space.Compact>
        )}
        <Switch checked={isCrop} onChange={setIsCrop} checkedChildren="裁剪" unCheckedChildren="裁剪" />
        <Button type="primary" loading={uploading} onClick={handleUpload}>
          {uploading ? '上传中...' : '上传'}
        </Button>
      </div>
    </div>
  );
};

export default ScanUpload;
