<template>
  <div class="enhancer-modal-container">
    <AFlex class="enhancer-modal-content" :vertical="false" align="center" justify="space-between">
      <!-- 左侧控制面板 -->
      <div class="enhancer-modal-left">
        <ACard class="enhancer-modal-left-container" :bordered="false">
          <!-- 上传区域 -->
          <div class="enhancer-modal-upload">
            <Spin :spinning="enhancer.uploading" indicator="magic-ring">
              <AUploadDragger
                name="image"
                accept="image/*"
                :multiple="false"
                :directory="false"
                :maxCount="1"
                :beforeUpload="enhancer.beforeUpload"
                :custom-request="enhancer.customUploadRequest"
                :disabled="enhancer.uploading || enhancer.isProcessing"
                :showUploadList="false">
                <div class="enhancer-modal-upload-content">
                  <ABadge :offset="[-10, 10]">
                    <template #count>
                      <AAvatar :size="22" :src="successIcon" v-if="enhancer.imageData"/>
                      <AAvatar :size="22" :src="warnIcon" v-if="!enhancer.imageData"/>
                    </template>
                    <AAvatar shape="square" :size="60" :src="fileIcon"/>
                  </ABadge>
                  <span class="enhancer-modal-upload-text">
                    点击或拖拽上传图片
                  </span>
                </div>
              </AUploadDragger>
            </Spin>
          </div>

          <!-- 功能选择区 -->
          <ADivider orientation="center" :plain="true">
            <span class="enhancer-modal-divider-title">增强功能</span>
          </ADivider>

          <div class="enhancer-modal-function-selector">
            <ARadioGroup v-model:value="enhancer.selectedFunction" button-style="solid" size="small"
                         style="width: 100%">
              <ARadioButton value="upscale">图像升级</ARadioButton>
              <ARadioButton value="deblur">去模糊</ARadioButton>
              <ARadioButton value="denoise">去噪</ARadioButton>
              <ARadioButton value="lowlight">弱光增强</ARadioButton>
            </ARadioGroup>
          </div>

          <!-- 参数设置区 -->
          <ADivider orientation="center" :plain="true">
            <span class="enhancer-modal-divider-title">参数设置</span>
          </ADivider>

          <!-- 图像升级参数 -->
          <div v-if="enhancer.selectedFunction === 'upscale'" class="enhancer-modal-params">
            <div class="enhancer-modal-params-item">
              <div class="enhancer-modal-params-item-content">
                <span class="enhancer-modal-params-title">模型:</span>
                <ASelect style="width: 100%" size="middle"
                         v-model:value="enhancer.upscaleParams.model"
                         :options="enhancer.upscaleModels">
                </ASelect>
              </div>
              <div class="enhancer-modal-params-item-content">
                <span class="enhancer-modal-params-title">比例:</span>
                <ASelect style="width: 100%" size="middle"
                         v-model:value="enhancer.upscaleParams.scale"
                         :options="enhancer.upscaleScales">
                </ASelect>
              </div>
            </div>
          </div>

          <!-- 去模糊参数 -->
          <div v-if="enhancer.selectedFunction === 'deblur'" class="enhancer-modal-params">
            <div class="enhancer-modal-params-item">
              <div class="enhancer-modal-params-item-content">
                <span class="enhancer-modal-params-title">强度:</span>
                <ASlider v-model:value="enhancer.deblurParams.strength" :min="0" :max="100" :step="1"/>
              </div>
            </div>
          </div>

          <!-- 去噪参数 -->
          <div v-if="enhancer.selectedFunction === 'denoise'" class="enhancer-modal-params">
            <div class="enhancer-modal-params-item">
              <div class="enhancer-modal-params-item-content">
                <span class="enhancer-modal-params-title">强度:</span>
                <ASlider v-model:value="enhancer.denoiseParams.strength" :min="0" :max="100" :step="1"/>
              </div>
              <div class="enhancer-modal-params-item-content">
                <span class="enhancer-modal-params-title">保留细节:</span>
                <ASlider v-model:value="enhancer.denoiseParams.preserveDetail" :min="0" :max="100" :step="1"/>
              </div>
            </div>
          </div>

          <!-- 弱光增强参数 -->
          <div v-if="enhancer.selectedFunction === 'lowlight'" class="enhancer-modal-params">
            <div class="enhancer-modal-params-item">
              <div class="enhancer-modal-params-item-content">
                <span class="enhancer-modal-params-title">亮度:</span>
                <ASlider v-model:value="enhancer.lowlightParams.brightness" :min="0" :max="100" :step="1"/>
              </div>
              <div class="enhancer-modal-params-item-content">
                <span class="enhancer-modal-params-title">对比度:</span>
                <ASlider v-model:value="enhancer.lowlightParams.contrast" :min="0" :max="100" :step="1"/>
              </div>
            </div>
          </div>

          <!-- 处理按钮 -->
          <ADivider></ADivider>
          <AButton style="width: 100%;" size="middle" shape="default" type="primary" :loading="enhancer.isProcessing"
                   :disabled="!enhancer.imageData"
                   @click="startEnhance">
            <template #icon>
              <AAvatar shape="square" :size="20" :src="runIcon"/>
            </template>
            <span class="enhancer-modal-params-btn">开始处理</span>
          </AButton>
        </ACard>
      </div>

      <!-- 右侧图像预览区 -->
      <div class="enhancer-modal-right">
        <div
            ref="canvasContainer"
            class="canvas-container"
            @mousedown="startDragging"
            @mouseup="stopDragging"
            @mouseleave="stopDragging"
            @mousemove="dragImage"
            @wheel="resizeImage"
            @touchstart="touchStart"
            @touchmove="touchMove"
            @touchend="touchEnd"
        >
          <!-- 进度条 -->
          <div class="canvas-progressbar">
            <span class="canvas-progressbar-text">
              {{ enhancer.msg }}
            </span>
            <AProgress
                v-if="enhancer.isProcessing"
                :stroke-color="{
                '0%': '#108ee9',
                '100%': '#87d068',}"
                :percent="enhancer.progressBar"
                :showInfo="false"
                status="active"
            />
          </div>

          <!-- 图片 -->
          <canvas ref="canvas"></canvas>

          <!-- 拖动条 -->
          <div
              class="dragLine"
              v-if="enhancer.isDone"
              ref="dragLine">
            <div class="dragBall"
                 @mousedown.stop="startDraggingLine"
                 @mousemove.stop="dragLineFn"
                 @mouseup.stop="stopDraggingLine"
            >
              <svg width="24" viewBox="0 0 27 20">
                <path fill="#ff3484" d="M9.6 0L0 9.6l9.6 9.6z"></path>
                <path fill="#5fb3e5" d="M17 19.2l9.5-9.6L16.9 0z"></path>
              </svg>
            </div>
          </div>

          <!-- 菜单 -->
          <div class="floating-menu" @mousedown.stop v-if="enhancer.isDone && enhancer.processedImg">
            <AFlex :vertical="false" align="center" justify="space-between" :gap="8">
              <ATooltip placement="top" title="下载图片">
                <AButton type="text" size="small" @click="downloadImage" class="menu-btn">
                  <template #icon>
                    <AAvatar :src="downloadIcon" class="menu-icon" :size="20"/>
                  </template>
                </AButton>
              </ATooltip>
              <ATooltip placement="top" title="保存图片">
                <AButton type="text" size="small" class="menu-btn" @click="saveImage">
                  <template #icon>
                    <AAvatar :src="saveIcon" :size="20" class="menu-icon"/>
                  </template>
                </AButton>
              </ATooltip>
              <ATooltip placement="top" title="删除图片">
                <AButton type="text" size="small" danger class="menu-btn" @click="deleteImage">
                  <template #icon>
                    <AAvatar :src="deleteIcon" :size="20" class="menu-icon"/>
                  </template>
                </AButton>
              </ATooltip>
            </AFlex>
          </div>

          <!-- 图片信息 -->
          <div class="image-info">
            <ATag color="cyan" :bordered="false" v-if="enhancer.imageData">原图: {{ originalImageSize }}</ATag>
            <ATag color="purple" :bordered="false" v-if="enhancer.processedImg">处理后: {{ processedImageSize }}</ATag>
          </div>
        </div>
      </div>
    </AFlex>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, onUnmounted, defineEmits } from 'vue';
import { message } from "ant-design-vue";
import Spin from "@/components/MyUI/Spin/Spin.vue";
import Upscaler from 'upscaler';

// 图标导入
import fileIcon from "@/assets/svgs/file.svg";
import successIcon from '@/assets/svgs/success.svg';
import warnIcon from '@/assets/svgs/warn.svg';
import runIcon from '@/assets/svgs/run.svg';
import downloadIcon from '@/assets/svgs/download.svg';
import saveIcon from '@/assets/svgs/save.svg';
import deleteIcon from '@/assets/svgs/deleted.svg';

// 定义事件
const emit = defineEmits(['save-image', 'close']);

// DOM引用
const canvasContainer = ref<HTMLDivElement | null>(null);
const canvas = ref<HTMLCanvasElement | null>(null);
const dragLine = ref<HTMLDivElement | null>(null);

// 图像处理实例
let upscaler: any = null;

// 状态管理
const enhancer = reactive({
  // 基本状态
  uploading: false,
  isProcessing: false,
  isDone: false,
  msg: "",
  progressBar: 0,

  // 图像数据
  imageData: "",
  fileData: "",
  processedImg: "",
  input: null as any,

  // 拖拽状态
  dragging: false,
  linePosition: 0,
  draggingLine: false,

  // 功能选择
  selectedFunction: "upscale",

  // 图像升级参数
  upscaleParams: {
    model: "x4",
    scale: 4
  },
  upscaleModels: [
    {label: "通用模型 x2", value: "x2"},
    {label: "通用模型 x4", value: "x4"},
    {label: "照片增强", value: "photo"},
    {label: "动漫风格", value: "anime"}
  ],
  upscaleScales: [
    {label: "2x", value: 2},
    {label: "4x", value: 4}
  ],

  // 去模糊参数
  deblurParams: {
    strength: 50,
    radius: 5
  },

  // 去噪参数
  denoiseParams: {
    strength: 50,
    preserveDetail: 70
  },

  // 弱光增强参数
  lowlightParams: {
    brightness: 60,
    contrast: 50
  },

  // 图片上传前的校验
  async beforeUpload(file: File) {
    enhancer.uploading = true;
    const urlData = URL.createObjectURL(file);
    const image = new Image();
    image.src = urlData;

    // 等待图片加载完成
    await new Promise(resolve => {
      image.onload = resolve;
    });

    await clear();
    enhancer.fileData = urlData;
    enhancer.uploading = false;
    return true;
  },

  // 自定义上传图片请求
  async customUploadRequest(_file: any) {
    enhancer.imageData = enhancer.fileData;
    await loadImage();
  }
});

// 图片尺寸信息
const originalImageSize = computed(() => {
  if (!enhancer.imageData) return "";
  const img = new Image();
  img.src = enhancer.imageData;
  return `${img.width}x${img.height}`;
});

const processedImageSize = computed(() => {
  if (!enhancer.processedImg) return "";
  const img = new Image();
  img.src = enhancer.processedImg;
  return `${img.width}x${img.height}`;
});

// 清空数据
async function clear() {
  enhancer.imageData = "";
  enhancer.processedImg = "";
  enhancer.isDone = false;
  enhancer.msg = "";
  enhancer.progressBar = 0;
  enhancer.isProcessing = false;
  enhancer.dragging = false;
  enhancer.linePosition = 0;
  enhancer.draggingLine = false;
  enhancer.input = null;
}

// 加载图片
async function loadImage() {
  if (!canvas.value || !enhancer.imageData) return;

  const ctx = canvas.value.getContext('2d');
  if (!ctx) return;

  const img = new Image();
  img.src = enhancer.imageData;

  await new Promise(resolve => {
    img.onload = resolve;
  });

  canvas.value.width = img.width;
  canvas.value.height = img.height;
  ctx.drawImage(img, 0, 0);

  // 初始化拖动线位置
  enhancer.linePosition = img.width / 2;

  // 初始化Upscaler
  if (!upscaler) {
    upscaler = new Upscaler();
  }
}

// 开始图像增强处理
async function startEnhance() {
  if (!enhancer.imageData || !canvas.value) {
    message.warning("请先上传图片");
    return;
  }

  enhancer.isProcessing = true;
  enhancer.msg = "正在处理图片...";
  const start = Date.now();

  try {
    const img = new Image();
    img.src = enhancer.imageData;

    await new Promise(resolve => {
      img.onload = resolve;
    });

    let processedImage;

    // 根据选择的功能进行不同的处理
    switch (enhancer.selectedFunction) {
      case 'upscale':
        enhancer.msg = "正在进行图像升级...";
        processedImage = await upscaler.upscale(img, {
          model: enhancer.upscaleParams.model,
          scale: enhancer.upscaleParams.scale,
          progress: (progress: number) => {
            enhancer.progressBar = Math.round(progress * 100);
          }
        });
        break;

      case 'deblur':
        enhancer.msg = "正在进行去模糊处理...";
        // 使用upscaler的去模糊功能
        processedImage = await simulateImageProcessing(img, 'deblur');
        break;

      case 'denoise':
        enhancer.msg = "正在进行去噪处理...";
        processedImage = await simulateImageProcessing(img, 'denoise');
        break;

      case 'lowlight':
        enhancer.msg = "正在进行弱光增强...";
        processedImage = await simulateImageProcessing(img, 'lowlight');
        break;
    }

    if (processedImage) {
      enhancer.processedImg = processedImage.src || processedImage;
      enhancer.isDone = true;
      enhancer.msg = `处理完成! 用时: ${((Date.now() - start) / 1000).toFixed(2)}秒`;

      // 更新画布显示处理后的图片
      updateCanvasWithProcessedImage();
    }
  } catch (error) {
    console.error("图像处理失败", error);
    message.error("图像处理失败，请重试");
    enhancer.msg = "处理失败";
  } finally {
    enhancer.isProcessing = false;
  }
}

// 模拟图像处理（在实际实现中应替换为真实的处理逻辑）
async function simulateImageProcessing(img: HTMLImageElement, _type: string) {
  // 模拟进度
  let progress = 0;
  const interval = setInterval(() => {
    progress += Math.random() * 5;
    enhancer.progressBar = Math.min(Math.round(progress), 99);
    if (progress >= 100) {
      clearInterval(interval);
    }
  }, 200);

  // 这里应该是实际的图像处理逻辑
  // 目前使用upscaler的基本功能模拟其他处理效果
  try {
    const result = await upscaler.upscale(img, {
      model: 'x2',
      scale: 1.5,
      progress: (p: number) => {
        enhancer.progressBar = Math.round(p * 100);
      }
    });
    clearInterval(interval);
    return result;
  } catch (error) {
    clearInterval(interval);
    throw error;
  }
}

// 更新画布显示处理后的图片
function updateCanvasWithProcessedImage() {
  if (!canvas.value || !enhancer.processedImg) return;

  const ctx = canvas.value.getContext('2d');
  if (!ctx) return;

  const img = new Image();
  img.src = enhancer.processedImg;

  img.onload = () => {
    canvas.value!.width = img.width;
    canvas.value!.height = img.height;
    ctx.drawImage(img, 0, 0);

    // 重置拖动线位置
    enhancer.linePosition = img.width / 2;

    // 绘制对比效果
    drawComparisonView();
  };
}

// 绘制对比视图
function drawComparisonView() {
  if (!canvas.value || !enhancer.imageData || !enhancer.processedImg || !enhancer.isDone) return;

  const ctx = canvas.value.getContext('2d');
  if (!ctx) return;

  const originalImg = new Image();
  originalImg.src = enhancer.imageData;

  const processedImg = new Image();
  processedImg.src = enhancer.processedImg;

  originalImg.onload = () => {
    processedImg.onload = () => {
      // 清除画布
      ctx.clearRect(0, 0, canvas.value!.width, canvas.value!.height);

      // 绘制处理后的图片
      ctx.drawImage(processedImg, 0, 0, canvas.value!.width, canvas.value!.height);

      // 绘制原图（左侧部分）
      ctx.drawImage(
          originalImg,
          0, 0, originalImg.width, originalImg.height,
          0, 0, enhancer.linePosition, canvas.value!.height
      );

      // 绘制分割线
      ctx.beginPath();
      ctx.moveTo(enhancer.linePosition, 0);
      ctx.lineTo(enhancer.linePosition, canvas.value!.height);
      ctx.strokeStyle = '#ffffff';
      ctx.lineWidth = 2;
      ctx.stroke();
    };
  };
}

// 拖动相关函数
function startDragging(_e: MouseEvent) {
  enhancer.dragging = true;
}

function stopDragging() {
  enhancer.dragging = false;
}

function dragImage(e: MouseEvent) {
  if (!enhancer.dragging || !canvasContainer.value) return;

  if (enhancer.isDone) {
    // 更新拖动线位置
    const rect = canvasContainer.value.getBoundingClientRect();
    const x = e.clientX - rect.left;
    enhancer.linePosition = Math.max(0, Math.min(canvas.value?.width || 0, x));
    drawComparisonView();
  }
}

function startDraggingLine(e: MouseEvent) {
  e.preventDefault();
  enhancer.draggingLine = true;
}

function stopDraggingLine() {
  enhancer.draggingLine = false;
}

function dragLineFn(e: MouseEvent) {
  if (!enhancer.draggingLine || !canvas.value || !canvasContainer.value) return;

  const rect = canvasContainer.value.getBoundingClientRect();
  const x = e.clientX - rect.left;

  // 限制拖动范围在画布内
  enhancer.linePosition = Math.max(0, Math.min(canvas.value.width, x));

  // 重新绘制对比视图
  drawComparisonView();
}

// 缩放相关函数
function resizeImage(e: WheelEvent) {
  e.preventDefault();
  // 实现简单的缩放功能
  if (!canvas.value || !enhancer.isDone) return;

  // 这里可以实现缩放逻辑
}

// 触摸事件处理
function touchStart(e: TouchEvent) {
  if (e.touches.length === 1) {
    enhancer.dragging = true;
  }
}

function touchMove(e: TouchEvent) {
  if (!enhancer.dragging || !canvasContainer.value || e.touches.length !== 1) return;

  const touch = e.touches[0];
  const rect = canvasContainer.value.getBoundingClientRect();
  const x = touch.clientX - rect.left;

  if (enhancer.isDone) {
    // 更新拖动线位置
    enhancer.linePosition = Math.max(0, Math.min(canvas.value?.width || 0, x));
    drawComparisonView();
  }
}

function touchEnd() {
  enhancer.dragging = false;
}

// 下载图片
function downloadImage() {
  if (!enhancer.processedImg) return;

  const link = document.createElement('a');
  link.href = enhancer.processedImg;
  link.download = `enhanced_image_${Date.now()}.png`;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);

  message.success('图片下载成功');
}

// 保存图片
function saveImage() {
  if (!enhancer.processedImg) return;
  emit('save-image', enhancer.processedImg);
  message.success('图片已保存');
}

// 删除图片
function deleteImage() {
  clear();
  message.success('图片已删除');
}

// 组件挂载和卸载
onMounted(() => {
  // 初始化Upscaler
  upscaler = new Upscaler();
});

onUnmounted(() => {
  // 清理资源
  if (enhancer.processedImg) {
    URL.revokeObjectURL(enhancer.processedImg);
  }
  if (enhancer.imageData) {
    URL.revokeObjectURL(enhancer.imageData);
  }
});
</script>

<style scoped lang="scss">
.enhancer-modal-container {
  width: 100%;
  height: 100%;
  padding: 10px;

  .enhancer-modal-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;

    .enhancer-modal-left {
      width: 35%;
      height: 100%;

      .enhancer-modal-left-container {
        width: 100%;
        height: 100%;
        overflow: auto;
        border-radius: 8px;
        background-color: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        padding: 15px;

        .enhancer-modal-divider-title {
          font-size: 13px;
          color: rgba(80, 80, 90, 0.9);
          font-weight: 500;
        }
      }
    }

    .enhancer-modal-right {
      width: 65%;
      height: 100%;
      border-radius: 8px;
      overflow: hidden;
      background-color: rgba(245, 245, 245, 0.5);
      backdrop-filter: blur(5px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }
  }
}

.enhancer-modal-upload {
  width: 100%;
  margin-bottom: 15px;

  .enhancer-modal-upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    gap: 10px;

    .enhancer-modal-upload-text {
      font-size: 14px;
      color: rgba(80, 80, 90, 0.8);
      margin-top: 8px;
    }
  }
}

.enhancer-modal-function-selector {
  margin-bottom: 15px;
}

.enhancer-modal-params {
  margin-bottom: 15px;

  .enhancer-modal-params-item {
    display: flex;
    flex-direction: column;
    gap: 12px;

    .enhancer-modal-params-item-content {
      display: flex;
      flex-direction: column;
      gap: 5px;

      .enhancer-modal-params-title {
        font-size: 13px;
        color: rgba(80, 80, 90, 0.9);
        margin-bottom: 2px;
      }
    }
  }
}

.enhancer-modal-params-btn {
  margin-left: 5px;
}

.canvas-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.02);
  border-radius: 8px;

  canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .canvas-progressbar {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 8px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    .canvas-progressbar-text {
      font-size: 13px;
      color: rgba(80, 80, 90, 0.9);
      margin-bottom: 5px;
      display: block;
    }
  }

  .dragLine {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #ffffff;
    z-index: 5;

    .dragBall {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      cursor: ew-resize;
      background-color: rgba(255, 255, 255, 0.9);
      border-radius: 50%;
      padding: 2px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    }
  }

  .floating-menu {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    border-radius: 8px;
    padding: 5px 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10;

    .menu-btn {
      margin: 0 2px;
    }

    .menu-icon {
      opacity: 0.8;
      transition: all 0.2s;

      &:hover {
        opacity: 1;
      }
    }
  }

  .image-info {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 10;
  }
}
</style>
