import "../../app/css/ImageUpload.scss"
import { Button, Row, Upload } from "antd";
import { UploadFile } from "antd/lib/upload/interface";
import CloseIcon from "@/icons/Closeicon";
import React, { useEffect, useState } from "react";
import classNames from "classnames";
import { Paragraph } from "@/components/Typography/Paragraph";

// ✅ Dummy Fallbacks
interface MediaUpload {
  id?: number;
  fileName?: string;
  url?: string;
  loading?: boolean;
  percent?: number;
}

const AddIcon = () => <span style={{ fontSize: "32px" }}>+</span>;

const Progress = ({ value }: { value?: number }) => (
  <div className="progress-bar" style={{ textAlign: "center", padding: "20px" }}>
    Uploading... {value || 0}%
  </div>
);

const ImageCrop = ({ children }: { children: React.ReactNode }) => <>{children}</>;

const resizeFile = async (file: File) => {
  return file; // mock
};

const pushImageToS3 = async (
  file: UploadFile<any>,
  progressCallback: (percent: number) => void
): Promise<string> => {
  return new Promise((resolve) => {
    let percent = 0;
    const interval = setInterval(() => {
      percent += 20;
      progressCallback(percent);
      if (percent >= 100) {
        clearInterval(interval);
        resolve("https://via.placeholder.com/369");
      }
    }, 200);
  });
};

const onBeforeUpload = (file: File) => {
  return true;
};

const API_URL = "https://example.com/api/upload";

interface Props {
  className?: string;
  photoIndex?: number;
  photo: MediaUpload;
  onUploadSuccess: (file: MediaUpload) => void;
  onRemove: (file: MediaUpload) => void;
  children?: any;
  content?: React.ReactNode;
  dropAspect?: number;
  hideRemove?: boolean;
  hideUpdate?: boolean;
  replace?: boolean;
}

const DropContainer: React.FC<any> = ({ dropAspect, children }) => {
  return <>{children}</>;
};

const ImageUpload: React.FC<Props> = ({
  photoIndex = 1,
  photo,
  className,
  children,
  onUploadSuccess,
  onRemove,
  dropAspect,
  hideRemove,
  content,
  hideUpdate,
  replace,
}) => {
  const [isHover, setIsHover] = useState(false);
  const [photoUpload, setPhotoUpload] = useState<MediaUpload>();

  useEffect(() => {
    if (photo) setPhotoUpload(photo);
  }, [photo]);

  const removePhoto = () => {
    onRemove(photoUpload as MediaUpload);
    setPhotoUpload({});
  };

  const handleChange = async (file: UploadFile<any>, index: number) => {
    let photo: MediaUpload = {};

    if (file.status === "uploading") {
      photo.loading = true;
      photo.fileName = file.name;
    }

    if (file.status === "done" || file.status === "error") {
      const transformFile = await resizeFile(file.originFileObj);
      file.originFileObj = transformFile;

      const url = await pushImageToS3(file, (value: number) =>
        setPhotoUpload({ percent: value })
      );

      photo = {
        id: index,
        fileName: file.name,
        url,
        loading: false,
      };
    }

    onUploadSuccess({ ...photoUpload, ...photo });
    setPhotoUpload({ ...photoUpload, ...photo });
  };

  const photoUploadClass = classNames({
    "photo-upload-item": true,
    [className || ""]: true,
  });

  return (
    <div className={photoUploadClass}>
      <DropContainer dropAspect={dropAspect}>
        <span className="ant-upload-picture-card-wrapper">
          <div className="ant-upload ant-upload-select ant-upload-select-picture-card">
            <Upload
              className="ant-upload"
              style={photoUpload?.url && !replace ? { display: "block" } : undefined}
              accept="image/png,image/jpeg,image/webp"
              listType="picture-card"
              action={API_URL}
              showUploadList={false}
              beforeUpload={onBeforeUpload}
              onChange={({ file }) => handleChange(file, photoIndex)}
            >
              <span tabIndex={0} role="button" className="ant-upload">
                <input type="file" accept="image/png,image/jpeg,image/webp" style={{ display: "none" }} />
                {photoUpload?.url && !replace ? (
                  
                  <svg
                    width={32}
                    height={32}
                    viewBox="0 0 32 32"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    data-testid="media-upload--add"
                  >
                    <path
                      d="M15.9997 26.6666C21.8907 26.6666 26.6663 21.891 26.6663 16C26.6663 10.1089 21.8907 5.33331 15.9997 5.33331C10.1086 5.33331 5.33301 10.1089 5.33301 16C5.33301 21.891 10.1086 26.6666 15.9997 26.6666Z"
                      fill="#257FFC"
                      stroke="#257FFC"
                      strokeWidth={2}
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                    <path
                      d="M16 11.9999V19.9999"
                      stroke="white"
                      strokeWidth={2}
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                    <path
                      d="M20 15.9999L12 15.9999"
                      stroke="white"
                      strokeWidth={2}
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>

                ) : (
                  
                  <img
                    //src={photoUpload.url}
                    alt="avatar"
                    style={{ width: "100%" }}
                    data-testid="media-upload--image-card"
                  />

                )}
              </span>
            </Upload>
          </div>
        </span>
      </DropContainer>
    </div>
  );
  
};

export default ImageUpload;
