import React, { useState } from "react";
import { Button, Card, Space, Divider, Toast, Switch } from "antd-mobile";
import Layout from "@/components/Layout/Layout";
import NavCommon from "@/components/NavCommon";
import ImageUpload from "@/components/Upload/ImageUpload";
import AvatarUpload from "@/components/Upload/AvatarUpload";
import VideoUpload from "@/components/Upload/VideoUpload";
import styles from "./upload.module.scss";

// 错误边界组件
class ErrorBoundary extends React.Component<
  { children: React.ReactNode },
  { hasError: boolean; error: Error | null }
> {
  constructor(props: { children: React.ReactNode }) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error: Error) {
    return { hasError: true, error };
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    console.error("Error caught by boundary:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div style={{ padding: 20, textAlign: "center" }}>
          <h3>组件出现错误</h3>
          <p>错误信息: {this.state.error?.message}</p>
          <Button
            onClick={() => this.setState({ hasError: false, error: null })}
          >
            重试
          </Button>
        </div>
      );
    }

    return this.props.children;
  }
}

const UploadTestPage: React.FC = () => {
  // 搜索状态
  const [searchQuery, setSearchQuery] = useState("");
  const [loading, setLoading] = useState(false);

  // 图片上传状态
  const [imageUrls, setImageUrls] = useState<string[]>([]);
  const [imageCount, setImageCount] = useState(9);
  const [imageDisabled, setImageDisabled] = useState(false);

  // 头像上传状态
  const [avatarUrl, setAvatarUrl] = useState<string>("");
  const [avatarSize, setAvatarSize] = useState(100);
  const [avatarDisabled, setAvatarDisabled] = useState(false);

  // 视频上传状态
  const [videoUrl, setVideoUrl] = useState<string>("");
  const [videoDisabled, setVideoDisabled] = useState(false);

  return (
    <Layout header={<NavCommon title="上传组件功能测试" />} loading={loading}>
      <div className={styles.container}>
        {/* 图片上传测试 */}
        <ErrorBoundary>
          <Card className={styles.testSection}>
            <h3>图片上传组件测试</h3>
            <p>支持多图片上传，可设置数量限制</p>

            <ImageUpload
              value={imageUrls}
              onChange={setImageUrls}
              count={imageCount}
              accept="image/*"
              disabled={imageDisabled}
            />

            <div className={styles.result}>
              <h4>当前图片URLs:</h4>
              <div className={styles.urlList}>
                {imageUrls.length > 0 ? (
                  imageUrls.map((url, index) => (
                    <div key={index} className={styles.urlItem}>
                      <span>{index + 1}.</span>
                      <span className={styles.url}>
                        {typeof url === "string" ? url : "无效URL"}
                      </span>
                    </div>
                  ))
                ) : (
                  <span className={styles.emptyText}>暂无图片</span>
                )}
              </div>
            </div>
          </Card>
        </ErrorBoundary>

        {/* 头像上传测试 */}
        <ErrorBoundary>
          <Card className={styles.testSection}>
            <h3>头像上传组件测试</h3>
            <p>支持单张图片上传，圆形显示</p>

            <AvatarUpload
              value={avatarUrl}
              onChange={setAvatarUrl}
              disabled={avatarDisabled}
              size={avatarSize}
            />

            <div className={styles.result}>
              <h4>当前头像URL:</h4>
              <div className={styles.urlList}>
                <div className={styles.urlItem}>
                  {avatarUrl ? (
                    <div className={styles.url}>
                      {typeof avatarUrl === "string" ? avatarUrl : "无效URL"}
                    </div>
                  ) : (
                    <span className={styles.emptyText}>暂无头像</span>
                  )}
                </div>
              </div>
            </div>
          </Card>
        </ErrorBoundary>

        {/* 视频上传测试 */}
        <ErrorBoundary>
          <Card className={styles.testSection}>
            <h3>视频上传组件测试</h3>
            <p>支持视频文件上传，最大50MB，支持预览功能</p>

            <VideoUpload
              value={videoUrl}
              onChange={setVideoUrl}
              disabled={videoDisabled}
              maxSize={50}
              showPreview={true}
            />

            <div className={styles.result}>
              <h4>当前视频URL:</h4>
              <div className={styles.urlList}>
                <div className={styles.urlItem}>
                  {videoUrl ? (
                    <div className={styles.url}>
                      {typeof videoUrl === "string" ? videoUrl : "无效URL"}
                    </div>
                  ) : (
                    <span className={styles.emptyText}>暂无视频</span>
                  )}
                </div>
              </div>
            </div>
          </Card>
        </ErrorBoundary>
      </div>
    </Layout>
  );
};

export default UploadTestPage;