import {
  ModalForm,
  ProFormDatePicker,
  ProFormDateTimePicker,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { Button, message, Result, Upload, Radio } from 'antd';
import React, { FC, useState } from 'react';
import ImgCrop from 'antd-img-crop';
import type { StoryType } from '../data.d';
import useStyles from '../style.style';
import { defaultIcons } from '@/commonConstant/commonConstant';
import dayjs from 'dayjs';

type OperationModalProps = {
  done: boolean;
  open: boolean;
  current: Partial<StoryType> | undefined;
  onDone: () => void;
  onSubmit: (values: StoryType) => void;
  children?: React.ReactNode;
};

const OperationModal: FC<OperationModalProps> = (props) => {
  const { styles } = useStyles();
  const { done, open, current, onDone, onSubmit, children } = props;

  // 图标状态管理
  const [iconType, setIconType] = useState<'default' | 'upload'>(
    current?.logo ? 'upload' : 'default',
  );
  const [selectedIcon, setSelectedIcon] = useState<string | null>(
    current?.logo || defaultIcons[0],
  );
  const [iconPreview, setIconPreview] = useState<string | null>(
    current?.logo || null,
  );
  const [fileList, setFileList] = useState<any[]>([]); // 控制上传图像展示

  // 图标上传逻辑
  const beforeUpload = (file: File) => {
    const isValidType = file.type === 'image/png' || file.type === 'image/jpeg';

    if (!isValidType) {
      message.error('仅支持 PNG 或 JPEG 格式');
      return false;
    }

    const reader = new FileReader();
    reader.onload = (e) => {
      const img = new Image();
      img.onload = () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        // 强制设置裁剪尺寸为 40x40
        canvas.width = 40;
        canvas.height = 40;
        if (ctx) {
          ctx.drawImage(img, 0, 0, 40, 40);

          // 生成 Base64 图像
          const base64 = canvas.toDataURL('image/png');
          setSelectedIcon(base64);
          setIconPreview(base64);
          setFileList([
            {
              uid: '-1',
              name: 'icon.png',
              status: 'done',
              url: base64,
              originFileObj: new File([dataURLtoBlob(base64)], 'icon.png', {
                type: 'image/png',
              }),
            },
          ]);
        } else {
          message.error('获取 Canvas 绘图上下文失败');
          return;
        }

      };
      img.onerror = () => {
        message.error('图像加载失败');
      };
      img.src = e.target?.result as string;
    };
    reader.onerror = () => {
      message.error('读取图像失败');
    };
    reader.readAsDataURL(file);

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

  // Base64 → Blob 转换工具函数
  const dataURLtoBlob = (dataurl: string) => {
    const arr = dataurl.split(',');
    if (!arr || arr.length < 2) {
      throw new Error('无效的Base64数据');
    }
    const mimeMatch = arr[0]?.match(/:(.*?);/);
    if (!mimeMatch || !mimeMatch[1]) {
      throw new Error('无法解析MIME类型');
    }
    const mime = mimeMatch[1];
    const bstr = atob(arr[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
  };

  if (!open) {
    return null;
  }

  return (
    <ModalForm<StoryType>
      open={open}
      title={done ? null : `故事${current ? '编辑' : '添加'}`}
      className={styles.standardListForm}
      width={640}
      onFinish={async (values) => {
        onSubmit({
          ...values,
          logo: selectedIcon || '',
        });
      }}
      initialValues={{
        ...current,
        logo: current?.logo ? 'upload' : 'default',
      }}
      submitter={{
        render: (_, dom) => (done ? null : dom),
      }}
      trigger={<>{children}</>}
      modalProps={{
        onCancel: () => onDone(),
        destroyOnClose: true,
        bodyStyle: done
          ? {
            padding: '72px 0',
          }
          : {},
      }}
    >
      {!done ? (
        <>
          <ProFormText
            name="title"
            label="故事名称"
            rules={[
              {
                required: true,
                message: '请输入故事名称',
              },
            ]}
            placeholder="请输入"
          />

          {/* 图标选择方式 */}
          <ProFormText
            name="logo"
            label="图标选择"
            hidden
            rules={[{ required: true, message: '请选择图标' }]}
            fieldProps={{
              value: iconType,
            }}
          />

          <div style={{ marginBottom: 16 }}>
            <span style={{ fontWeight: 'bold' }}>图标选择方式</span>
            <Radio.Group
              value={iconType}
              onChange={(e) => {
                const type = e.target.value;
                setIconType(type);
                if (type === 'default') {
                  setSelectedIcon(defaultIcons[0]);
                  setIconPreview(defaultIcons[0]);
                  setFileList([]);
                } else {
                  setSelectedIcon(null);
                  setIconPreview(null);
                }
              }}
              style={{ display: 'flex', gap: 16, marginTop: 8 }}
            >
              <Radio value="default">选择系统图标</Radio>
              <Radio value="upload">上传图标</Radio>
            </Radio.Group>
          </div>

          {/* 默认图标库 */}
          {iconType === 'default' && (
            <div style={{ marginBottom: 16 }}>
              <span style={{ fontWeight: 'bold' }}>选择图标</span>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginTop: 8 }}>
                {defaultIcons.map((icon, index) => (
                  <img
                    key={index}
                    src={icon}
                    alt="icon"
                    style={{
                      width: 40,
                      height: 40,
                      cursor: 'pointer',
                      border: selectedIcon === icon ? '2px solid #1890ff' : 'none',
                      borderRadius: 4,
                    }}
                    onClick={() => {
                      setSelectedIcon(icon);
                      setIconPreview(icon);
                    }}
                  />
                ))}
              </div>
            </div>
          )}

          {/* 图标上传 + 裁剪 */}
          {iconType === 'upload' && (
            <div style={{ marginBottom: 24 }}>
              <span style={{ fontWeight: 'bold' }}>上传图标（40x40）</span>
              <ImgCrop
                rotationSlider
                aspect={1} // 强制 1:1 宽高比
                modalTitle="裁剪图像"
                quality={0.8}
                onModalOk={() => {
                  // 裁剪完成后自动更新 fileList 和 Base64 数据
                  const img = new Image();
                  img.onload = () => {
                    if (img.width !== 40 || img.height !== 40) {
                      message.error('裁剪图像尺寸必须为 40x40 像素');
                      setIconPreview(null);
                      setFileList([]);
                      return;
                    }
                    const canvas = document.createElement('canvas');
                    canvas.width = 40;
                    canvas.height = 40;
                    const ctx = canvas.getContext('2d');
                    ctx?.drawImage(img, 0, 0, 40, 40);
                    const base64 = canvas.toDataURL('image/png');
                    setSelectedIcon(base64);
                    setIconPreview(base64);
                    setFileList([
                      {
                        uid: '-1',
                        name: 'icon.png',
                        status: 'done',
                        url: base64,
                        originFileObj: new File([dataURLtoBlob(base64)], 'icon.png', {
                          type: 'image/png',
                        }),
                      },
                    ]);
                  };
                  img.src = iconPreview ?? '';
                }}
              >
                <Upload
                  name="icon"
                  listType="picture-card"
                  showUploadList={false}
                  beforeUpload={beforeUpload}
                  onChange={({ fileList }) => {
                    setFileList(fileList);
                  }}
                  fileList={fileList}
                  style={{ marginTop: 8 }}
                >
                  {iconPreview ? (
                    <img
                      src={iconPreview}
                      alt="icon"
                      style={{ width: '100%', height: '100%' }}
                    />
                  ) : (
                    <div style={{ fontSize: 20 }}>+</div>
                  )}
                </Upload>
              </ImgCrop>
            </div>
          )}

          {/* 其他表单项 */}
          <ProFormDatePicker
            name="storyTime"
            label="开始时间"
            rules={[
              {
                required: true,
                message: '请选择开始时间',
              },
            ]}
            fieldProps={{
              style: {
                width: '100%',
              },
              maxDate: dayjs().endOf('day'),
            }}
            placeholder="请选择"
          />

          <ProFormTextArea
            name="description"
            label="故事描述"
            placeholder="可以简单描述当前故事"
          />
        </>
      ) : (
        <Result
          status="success"
          title="操作成功"
          subTitle={`${current?.instanceId ? '编辑' : '创建'}成功`}
          extra={
            <Button type="primary" onClick={onDone}>
              知道了
            </Button>
          }
          className={styles.formResult}
        />
      )}
    </ModalForm>
  );
};

export default OperationModal;
