import { HTTPSTATUS } from '@/const';
import {
  apiDeletePhoto,
  apiGetPhoto,
  apiGetTagsPhoto,
  apiUploadPhoto,
} from '@/services/slave/sgw/PhotoController';
import { ModalForm, ProFormUploadButton } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import { Divider, message } from 'antd';
import { UploadFile } from 'antd/lib';
import { useState } from 'react';

type PhotoActionModalProps = {
  isOpen?: boolean;
  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
  type: SgwModel.PhotoGetParams['type'];
  id: string | number;
  hasSubPhotos?: boolean;
};
const PhotoActionModal = ({
  isOpen,
  setIsOpen,
  type,
  id,
  hasSubPhotos = true,
}: PhotoActionModalProps) => {
  const [imageMain, setImageMain] = useState<UploadFile[]>([]);
  const [imageSubs, setImageSubs] = useState<UploadFile[]>([]);
  const [messageApi, contextHolder] = message.useMessage();
  const intl = useIntl();
  const fetchImageByTag = async (tag: string): Promise<UploadFile | null> => {
    try {
      const resp = await apiGetPhoto(type, id, tag);
      if (resp.status !== HTTPSTATUS.HTTP_SUCCESS) {
        return null;
      }
      const objectUrl = URL.createObjectURL(
        new Blob([resp.data], { type: 'image/jpeg' }),
      );
      return {
        uid: `-${tag}`,
        name: `${tag}.jpg`,
        status: 'done',
        url: objectUrl,
      };
    } catch {
      return null;
    }
  };

  const handleUploadPhoto = async (
    file: UploadFile,
    tag: string,
  ): Promise<boolean> => {
    try {
      const resp = await apiUploadPhoto(
        type,
        String(id),
        file.originFileObj as File,
        tag,
      );
      if (resp.status === HTTPSTATUS.HTTP_SUCCESS) {
        return true;
      }
      throw new Error('Upload photo failed');
    } catch (error) {
      console.error('Error when upload image: ', error);
      return false;
    }
  };
  const handleDeletePhoto = async (tag: string): Promise<boolean> => {
    try {
      const resp = await apiDeletePhoto(type, String(id), tag);
      if (resp.status === HTTPSTATUS.HTTP_SUCCESS) {
        return true;
      }
      throw new Error('Delete photo failed');
    } catch (error) {
      console.error('Error when delete image: ', error);
      return false;
    }
  };

  return (
    <ModalForm
      open={isOpen}
      submitter={false}
      onOpenChange={setIsOpen}
      layout="vertical"
      request={async () => {
        // 1. Lấy ảnh chính (tag 'main')
        const mainImage = await fetchImageByTag('main');
        setImageMain(mainImage ? [mainImage] : []);

        if (hasSubPhotos) {
          // 2. Lấy danh sách tags
          try {
            const tagsResp = await apiGetTagsPhoto(type, id);
            if (tagsResp?.tags && Array.isArray(tagsResp.tags)) {
              // Lọc bỏ tag 'main' và lấy các tag còn lại
              const subTags = tagsResp.tags.filter(
                (tag: string) => tag !== 'main',
              );

              // 3. Lấy ảnh cho từng tag phụ
              const subImages: UploadFile[] = [];
              for (const tag of subTags) {
                const img = await fetchImageByTag(tag);
                if (img) {
                  subImages.push(img);
                }
              }
              setImageSubs(subImages);
            }
          } catch {
            // Không có tags hoặc lỗi
          }
        }

        return {};
      }}
    >
      {contextHolder}
      <Divider>
        {intl.formatMessage({ id: 'photo.main', defaultMessage: 'Ảnh chính' })}
      </Divider>
      <div
        style={{
          display: 'flex',
          justifyContent: 'center',
          marginBottom: 16,
        }}
      >
        <ProFormUploadButton
          name="main-picture"
          label={null}
          title={intl.formatMessage({
            id: 'photo.upload',
            defaultMessage: 'Chọn ảnh',
          })}
          accept="image/*"
          max={1}
          transform={(value) => ({ upload: value })}
          fieldProps={{
            onChange: async (info) => {
              if (info.file.status !== 'removed') {
                const isSuccess = await handleUploadPhoto(info.file, 'main');
                if (!isSuccess) {
                  messageApi.error(
                    intl.formatMessage({
                      id: 'photo.update_fail',
                      defaultMessage: 'Cập nhật ảnh thất bại',
                    }),
                  );
                  setImageMain([]);
                } else {
                  messageApi.success(
                    intl.formatMessage({
                      id: 'photo.update_success',
                      defaultMessage: 'Cập nhật ảnh thành công',
                    }),
                  );
                  // Dùng luôn file local để tạo URL, đỡ gọi API
                  const objectUrl = URL.createObjectURL(
                    info.file.originFileObj as File,
                  );
                  setImageMain([
                    {
                      uid: info.file.uid,
                      name: info.file.name,
                      status: 'done',
                      url: objectUrl,
                    },
                  ]);
                }
              }
            },
            listType: 'picture-card',
            fileList: imageMain,
            maxCount: 1,
            onRemove: async () => {
              const isSuccess = await handleDeletePhoto('main');
              if (!isSuccess) {
                messageApi.error(
                  intl.formatMessage({
                    id: 'photo.delete_fail',
                    defaultMessage: 'Xóa ảnh thất bại',
                  }),
                );
              } else {
                messageApi.success(
                  intl.formatMessage({
                    id: 'photo.delete_success',
                    defaultMessage: 'Xóa ảnh thành công',
                  }),
                );
                setImageMain([]);
              }
            },
          }}
        />
      </div>
      {hasSubPhotos && (
        <>
          <Divider>
            {intl.formatMessage({ id: 'photo.sub', defaultMessage: 'Ảnh phụ' })}
          </Divider>
          <div
            style={{
              display: 'flex',
              justifyContent: imageSubs.length > 0 ? 'flex-start' : 'center',
              marginBottom: 16,
            }}
          >
            <ProFormUploadButton
              name="sub-picture"
              label={null}
              title={intl.formatMessage({
                id: 'photo.upload',
                defaultMessage: 'Chọn ảnh',
              })}
              accept="image/*"
              max={10}
              transform={(value) => ({ upload: value })}
              fieldProps={{
                onChange: async (info) => {
                  // Tìm file mới được thêm (so sánh với imageSubs hiện tại)
                  const existingUids = new Set(imageSubs.map((f) => f.uid));
                  const newFiles = info.fileList.filter(
                    (f) => !existingUids.has(f.uid) && f.originFileObj,
                  );

                  for (const file of newFiles) {
                    // Tạo tag random
                    const randomTag = `sub_${Date.now()}_${Math.random()
                      .toString(36)
                      .substring(2, 9)}`;
                    const isSuccess = await handleUploadPhoto(file, randomTag);
                    if (!isSuccess) {
                      messageApi.error(
                        intl.formatMessage({
                          id: 'photo.update_fail',
                          defaultMessage: 'Cập nhật ảnh thất bại',
                        }),
                      );
                      setImageSubs(imageSubs); // Revert về state cũ
                      return;
                    }
                    messageApi.success(
                      intl.formatMessage({
                        id: 'photo.update_success',
                        defaultMessage: 'Thêm ảnh thành công',
                      }),
                    );
                    // Cập nhật file với tag
                    (file as any).tag = randomTag;
                    file.url = URL.createObjectURL(file.originFileObj as File);
                    file.status = 'done';
                  }
                  setImageSubs(info.fileList);
                },
                listType: 'picture-card',
                fileList: imageSubs,
                onRemove: async (file) => {
                  // Lấy tag từ file (được lưu khi fetch hoặc upload)
                  const tag = (file as any).tag || file.uid?.replace(/^-/, '');
                  const isSuccess = await handleDeletePhoto(tag);
                  if (!isSuccess) {
                    messageApi.error(
                      intl.formatMessage({
                        id: 'photo.delete_fail',
                        defaultMessage: 'Xóa ảnh thất bại',
                      }),
                    );
                    return false;
                  }
                  messageApi.success(
                    intl.formatMessage({
                      id: 'photo.delete_success',
                      defaultMessage: 'Xóa ảnh thành công',
                    }),
                  );
                  setImageSubs((prev) =>
                    prev.filter((f) => f.uid !== file.uid),
                  );
                  return true;
                },
              }}
            />
          </div>
        </>
      )}
    </ModalForm>
  );
};

export default PhotoActionModal;
