/**
 * 灵感图智能拆图器
 *
 * 支持两种布局格式：
 * 1. 紧凑网格布局（新）：等大小图片 + 细白线分割，用于生产图
 * 2. 不规则布局（旧）：不同大小图片 + 灰色背景间隔
 *
 * 检测策略：
 * 1. 优先尝试网格检测（检测横竖白线分割）
 * 2. 如果网格检测失败，回退到边缘 Flood Fill 算法
 *
 * 网格检测算法：
 * 1. 扫描图像查找连续的白色横线和竖线
 * 2. 根据线的位置计算网格结构
 * 3. 直接按网格分割图片
 *
 * 边缘 Flood Fill 算法（用于不规则布局）：
 * 1. 计算图片梯度（Sobel 边缘检测）
 * 2. 从四角采样检测背景颜色
 * 3. 从图片边缘开始 Flood Fill，标记背景区域
 * 4. 连通区域标记，找到各个图片区域
 */

import type { ImageElement } from '../types/photo-wall.types';
import {
  loadImage,
  isBackgroundPixel,
  isWhiteBorderPixel,
  removeWhiteBorder,
} from '@aitu/utils';
import { mergeSplitLines } from './image-split-core';

/** 检测时的最大尺寸，超过此尺寸会降采样（降低此值可提升性能） */
const MAX_DETECTION_SIZE = 800;

/** 每处理多少像素后 yield 一次（降低此值可提升 UI 响应性） */
const YIELD_INTERVAL = 100000;

/** 白线检测阈值 */
const WHITE_LINE_THRESHOLD = 240;

/** 最小白线长度比例（相对于图片宽/高） */
const MIN_LINE_RATIO = 0.8;

/**
 * 让出主线程，避免阻塞 UI
 */
function yieldToMain(): Promise<void> {
  return new Promise((resolve) => setTimeout(resolve, 0));
}

/**
 * 网格检测结果
 */
interface GridDetectionResult {
  success: boolean;
  rows?: number;
  cols?: number;
  horizontalLines?: number[];
  verticalLines?: number[];
}

/**
 * 检测图片中的网格结构（基于白色分割线）
 * 用于处理紧凑网格布局的生产图
 */
function detectGridStructure(imageData: ImageData): GridDetectionResult {
  const { width, height, data } = imageData;

  // console.log('[GridDetection] Starting grid detection...');

  // 扫描横向白线（y 位置）
  const horizontalWhiteRows: number[] = [];
  for (let y = 0; y < height; y++) {
    let whiteCount = 0;
    for (let x = 0; x < width; x++) {
      const idx = (y * width + x) * 4;
      const r = data[idx];
      const g = data[idx + 1];
      const b = data[idx + 2];
      if (r >= WHITE_LINE_THRESHOLD && g >= WHITE_LINE_THRESHOLD && b >= WHITE_LINE_THRESHOLD) {
        whiteCount++;
      }
    }
    // 如果这一行超过 80% 是白色，认为是分割线
    if (whiteCount / width >= MIN_LINE_RATIO) {
      horizontalWhiteRows.push(y);
    }
  }

  // 扫描纵向白线（x 位置）
  const verticalWhiteCols: number[] = [];
  for (let x = 0; x < width; x++) {
    let whiteCount = 0;
    for (let y = 0; y < height; y++) {
      const idx = (y * width + x) * 4;
      const r = data[idx];
      const g = data[idx + 1];
      const b = data[idx + 2];
      if (r >= WHITE_LINE_THRESHOLD && g >= WHITE_LINE_THRESHOLD && b >= WHITE_LINE_THRESHOLD) {
        whiteCount++;
      }
    }
    // 如果这一列超过 80% 是白色，认为是分割线
    if (whiteCount / height >= MIN_LINE_RATIO) {
      verticalWhiteCols.push(x);
    }
  }

  // console.log(`[GridDetection] Found ${horizontalWhiteRows.length} horizontal white rows`);
  // console.log(`[GridDetection] Found ${verticalWhiteCols.length} vertical white cols`);

  // 合并连续的白线为单一分割线（取中点）
  // 使用共享的 mergeSplitLines 函数，允许 3px 间隔
  const horizontalLines = mergeSplitLines(horizontalWhiteRows, 3);
  const verticalLines = mergeSplitLines(verticalWhiteCols, 3);

  // console.log(`[GridDetection] Merged to ${horizontalLines.length} horizontal lines:`, horizontalLines);
  // console.log(`[GridDetection] Merged to ${verticalLines.length} vertical lines:`, verticalLines);

  // 验证是否构成有效网格
  // 需要至少 1 条横线和 1 条竖线（形成 2x2 网格）
  // 或者 0 条横线但有竖线（1 行多列），或者 0 条竖线但有横线（多行 1 列）
  const hasValidGrid =
    (horizontalLines.length >= 1 && verticalLines.length >= 0) ||
    (horizontalLines.length >= 0 && verticalLines.length >= 1);

  if (!hasValidGrid) {
    // console.log('[GridDetection] No valid grid structure found');
    return { success: false };
  }

  // 计算行列数
  const rows = horizontalLines.length + 1;
  const cols = verticalLines.length + 1;

  // 验证网格是否合理（2-12 个单元格）
  const cellCount = rows * cols;
  if (cellCount < 2 || cellCount > 16) {
    // console.log(`[GridDetection] Invalid cell count: ${cellCount}`);
    return { success: false };
  }

  // console.log(`[GridDetection] Detected ${rows}x${cols} grid (${cellCount} cells)`);

  return {
    success: true,
    rows,
    cols,
    horizontalLines,
    verticalLines,
  };
}

// 使用 image-split-core.ts 中的 mergeSplitLines 函数

/**
 * 根据网格结构生成区域
 */
function generateGridRegions(
  width: number,
  height: number,
  horizontalLines: number[],
  verticalLines: number[]
): Array<{ x: number; y: number; width: number; height: number }> {
  const regions: Array<{ x: number; y: number; width: number; height: number }> = [];

  // 添加边界
  const yPositions = [0, ...horizontalLines, height];
  const xPositions = [0, ...verticalLines, width];

  // 生成每个单元格的区域
  for (let row = 0; row < yPositions.length - 1; row++) {
    for (let col = 0; col < xPositions.length - 1; col++) {
      const x = xPositions[col];
      const y = yPositions[row];
      const nextX = xPositions[col + 1];
      const nextY = yPositions[row + 1];

      // 跳过分割线（取内部区域）
      const padding = 2; // 跳过分割线的像素
      const regionX = x + (col === 0 ? padding : padding);
      const regionY = y + (row === 0 ? padding : padding);
      const regionWidth = nextX - x - padding * 2;
      const regionHeight = nextY - y - padding * 2;

      if (regionWidth > 20 && regionHeight > 20) {
        regions.push({
          x: regionX,
          y: regionY,
          width: regionWidth,
          height: regionHeight,
        });
      }
    }
  }

  return regions;
}

/**
 * 检测结果
 */
export interface PhotoWallDetectionResult {
  /** 检测到的图片数量 */
  count: number;
  /** 每个图片的边界矩形 */
  regions: Array<{
    x: number;
    y: number;
    width: number;
    height: number;
  }>;
}

/**
 * 计算像素的灰度值
 */
function getGrayValue(r: number, g: number, b: number): number {
  return 0.299 * r + 0.587 * g + 0.114 * b;
}

/**
 * 计算图片的梯度幅值（用于边缘检测，异步版本）
 * 使用 Sobel 算子
 */
async function computeGradientMagnitude(imageData: ImageData): Promise<Float32Array> {
  const { width, height, data } = imageData;
  const gradient = new Float32Array(width * height);
  let processedPixels = 0;

  // 预计算灰度值以提升性能
  const grayValues = new Float32Array(width * height);
  for (let i = 0; i < width * height; i++) {
    const idx = i * 4;
    grayValues[i] = getGrayValue(data[idx], data[idx + 1], data[idx + 2]);
  }

  for (let y = 1; y < height - 1; y++) {
    for (let x = 1; x < width - 1; x++) {
      const idx = y * width + x;

      // Sobel 算子 - 使用预计算的灰度值
      // Gx = [-1 0 1; -2 0 2; -1 0 1]
      const gx =
        -grayValues[idx - width - 1] + grayValues[idx - width + 1] +
        -2 * grayValues[idx - 1] + 2 * grayValues[idx + 1] +
        -grayValues[idx + width - 1] + grayValues[idx + width + 1];

      // Gy = [-1 -2 -1; 0 0 0; 1 2 1]
      const gy =
        -grayValues[idx - width - 1] - 2 * grayValues[idx - width] - grayValues[idx - width + 1] +
        grayValues[idx + width - 1] + 2 * grayValues[idx + width] + grayValues[idx + width + 1];

      gradient[idx] = Math.sqrt(gx * gx + gy * gy);

      // 定期 yield 给浏览器
      processedPixels++;
      if (processedPixels % YIELD_INTERVAL === 0) {
        await yieldToMain();
      }
    }
  }

  return gradient;
}

/**
 * 检测背景颜色（从图片四角采样）
 */
function detectBackgroundColor(imageData: ImageData): { r: number; g: number; b: number } {
  const { width, height, data } = imageData;
  const samples: Array<{ r: number; g: number; b: number }> = [];
  const sampleSize = Math.min(20, Math.floor(Math.min(width, height) / 10));

  // 从四角采样
  const corners = [
    { startX: 0, startY: 0 },
    { startX: width - sampleSize, startY: 0 },
    { startX: 0, startY: height - sampleSize },
    { startX: width - sampleSize, startY: height - sampleSize },
  ];

  for (const corner of corners) {
    for (let dy = 0; dy < sampleSize; dy++) {
      for (let dx = 0; dx < sampleSize; dx++) {
        const x = corner.startX + dx;
        const y = corner.startY + dy;
        if (x >= 0 && x < width && y >= 0 && y < height) {
          const idx = (y * width + x) * 4;
          samples.push({
            r: data[idx],
            g: data[idx + 1],
            b: data[idx + 2],
          });
        }
      }
    }
  }

  // 计算平均值
  const avg = samples.reduce(
    (acc, s) => ({ r: acc.r + s.r, g: acc.g + s.g, b: acc.b + s.b }),
    { r: 0, g: 0, b: 0 }
  );
  const count = samples.length;

  return {
    r: Math.round(avg.r / count),
    g: Math.round(avg.g / count),
    b: Math.round(avg.b / count),
  };
}

/**
 * 检查像素是否与背景色相似
 */
function isSimilarToBackground(
  r: number, g: number, b: number,
  bgColor: { r: number; g: number; b: number },
  colorThreshold: number = 30
): boolean {
  const dr = Math.abs(r - bgColor.r);
  const dg = Math.abs(g - bgColor.g);
  const db = Math.abs(b - bgColor.b);
  return dr <= colorThreshold && dg <= colorThreshold && db <= colorThreshold;
}

/**
 * 使用边缘 Flood Fill 创建二值化遮罩（增强版）
 * 从图片边缘开始填充，使用梯度作为边界
 * 背景 = 0，前景（图片区域）= 1
 *
 * 性能优化：
 * - 使用 Uint32Array 存储队列，避免对象创建开销
 * - 使用索引代替 shift()，避免 O(n) 操作
 * - 预先标记已入队像素，避免重复入队
 *
 * 关键改进：白色边框也被视为可穿透区域，因为它属于照片的外围
 */
async function createBinaryMaskWithEdgeFloodFill(
  imageData: ImageData,
  gradient: Float32Array,
  bgColor: { r: number; g: number; b: number }
): Promise<Uint8Array> {
  const { width, height, data } = imageData;
  const mask = new Uint8Array(width * height);
  const inQueue = new Uint8Array(width * height); // 标记是否已入队

  // 梯度阈值（边缘检测）- 提高阈值以穿过白色边框
  const gradientThreshold = 50;
  // 颜色相似度阈值
  const colorThreshold = 50;

  // 初始化：所有像素默认为前景 (1)
  mask.fill(1);

  // 使用 Uint32Array 存储队列（每个元素 = y * width + x）
  // 预估最大队列大小为图片面积的一半
  const maxQueueSize = Math.ceil((width * height) / 2);
  const queue = new Uint32Array(maxQueueSize);
  let queueHead = 0;
  let queueTail = 0;

  // 入队辅助函数
  const enqueue = (x: number, y: number) => {
    if (x < 0 || x >= width || y < 0 || y >= height) return;
    const idx = y * width + x;
    if (inQueue[idx]) return;
    inQueue[idx] = 1;
    queue[queueTail % maxQueueSize] = idx;
    queueTail++;
  };

  // 添加四边的像素到队列
  for (let x = 0; x < width; x++) {
    enqueue(x, 0);
    enqueue(x, height - 1);
  }
  for (let y = 1; y < height - 1; y++) {
    enqueue(0, y);
    enqueue(width - 1, y);
  }

  let processedPixels = 0;

  while (queueHead < queueTail) {
    const idx = queue[queueHead % maxQueueSize];
    queueHead++;

    const x = idx % width;
    const y = Math.floor(idx / width);

    const pixelIdx = idx * 4;
    const r = data[pixelIdx];
    const g = data[pixelIdx + 1];
    const b = data[pixelIdx + 2];
    const grad = gradient[idx];

    // 判断是否为背景/可穿透区域：
    const isBgColor = isSimilarToBackground(r, g, b, bgColor, colorThreshold);
    const isGenericBg = isBackgroundPixel(r, g, b);
    const isWhiteBorder = isWhiteBorderPixel(r, g, b, 240); // 白色边框
    const isLowGradient = grad < gradientThreshold;

    // 关键改进：白色边框区域即使梯度较高也应该被穿透
    // 因为白色边框是照片的外围，不是照片的内容
    const canPassThrough =
      // 背景色且低梯度 - 可以穿透
      ((isBgColor || isGenericBg) && isLowGradient) ||
      // 白色边框 - 无论梯度如何都可以穿透（但需要与已知背景相邻）
      isWhiteBorder;

    if (canPassThrough) {
      // 标记为背景
      mask[idx] = 0;

      // 继续扩展到邻居（4-连通）
      enqueue(x + 1, y);
      enqueue(x - 1, y);
      enqueue(x, y + 1);
      enqueue(x, y - 1);
    }

    // 定期 yield 给浏览器
    processedPixels++;
    if (processedPixels % YIELD_INTERVAL === 0) {
      await yieldToMain();
    }
  }

  return mask;
}

/**
 * 创建二值化遮罩（原始颜色匹配版本，作为后备）
 * 背景 = 0，前景（图片区域）= 1
 */
async function createBinaryMaskByColor(imageData: ImageData): Promise<Uint8Array> {
  const { width, height, data } = imageData;
  const mask = new Uint8Array(width * height);
  let processedPixels = 0;

  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      const idx = (y * width + x) * 4;
      const r = data[idx];
      const g = data[idx + 1];
      const b = data[idx + 2];

      // 背景（灰色）或纯白（边框外围）标记为 0
      if (isBackgroundPixel(r, g, b) || isWhiteBorderPixel(r, g, b)) {
        mask[y * width + x] = 0;
      } else {
        mask[y * width + x] = 1;
      }

      // 定期 yield 给浏览器
      processedPixels++;
      if (processedPixels % YIELD_INTERVAL === 0) {
        await yieldToMain();
      }
    }
  }

  return mask;
}

/**
 * 形态学操作：膨胀（异步版本）
 * 用于连接相邻的前景像素
 */
async function dilate(mask: Uint8Array, width: number, height: number, radius: number = 2): Promise<Uint8Array> {
  const result = new Uint8Array(mask.length);
  let processedPixels = 0;

  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      let hasNeighbor = false;

      // 检查邻域
      for (let dy = -radius; dy <= radius && !hasNeighbor; dy++) {
        for (let dx = -radius; dx <= radius && !hasNeighbor; dx++) {
          const nx = x + dx;
          const ny = y + dy;
          if (nx >= 0 && nx < width && ny >= 0 && ny < height) {
            if (mask[ny * width + nx] === 1) {
              hasNeighbor = true;
            }
          }
        }
      }

      result[y * width + x] = hasNeighbor ? 1 : 0;

      // 定期 yield 给浏览器
      processedPixels++;
      if (processedPixels % YIELD_INTERVAL === 0) {
        await yieldToMain();
      }
    }
  }

  return result;
}

/**
 * 连通区域标记（使用 Flood Fill，异步版本）
 * 返回每个像素的标签（0 = 背景，1+ = 不同的连通区域）
 */
async function labelConnectedComponents(
  mask: Uint8Array,
  width: number,
  height: number
): Promise<{ labels: Int32Array; count: number }> {
  const labels = new Int32Array(mask.length);
  let currentLabel = 0;
  let processedPixels = 0;

  const queue: Array<{ x: number; y: number }> = [];

  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      const idx = y * width + x;

      // 跳过背景和已标记的像素
      if (mask[idx] === 0 || labels[idx] !== 0) {
        continue;
      }

      // 开始新的连通区域
      currentLabel++;
      queue.push({ x, y });

      while (queue.length > 0) {
        const { x: cx, y: cy } = queue.shift()!;
        const cidx = cy * width + cx;

        if (cx < 0 || cx >= width || cy < 0 || cy >= height) continue;
        if (mask[cidx] === 0 || labels[cidx] !== 0) continue;

        labels[cidx] = currentLabel;

        // 8-连通邻域
        queue.push({ x: cx + 1, y: cy });
        queue.push({ x: cx - 1, y: cy });
        queue.push({ x: cx, y: cy + 1 });
        queue.push({ x: cx, y: cy - 1 });
        queue.push({ x: cx + 1, y: cy + 1 });
        queue.push({ x: cx - 1, y: cy - 1 });
        queue.push({ x: cx + 1, y: cy - 1 });
        queue.push({ x: cx - 1, y: cy + 1 });

        // 定期 yield 给浏览器
        processedPixels++;
        if (processedPixels % YIELD_INTERVAL === 0) {
          await yieldToMain();
        }
      }
    }
  }

  return { labels, count: currentLabel };
}

/**
 * 计算每个连通区域的边界矩形
 */
function computeBoundingBoxes(
  labels: Int32Array,
  width: number,
  height: number,
  count: number
): Array<{ x: number; y: number; width: number; height: number; area: number }> {
  // 初始化边界
  const boxes: Array<{
    minX: number;
    maxX: number;
    minY: number;
    maxY: number;
    pixelCount: number;
  }> = [];

  for (let i = 0; i < count; i++) {
    boxes.push({
      minX: Infinity,
      maxX: -Infinity,
      minY: Infinity,
      maxY: -Infinity,
      pixelCount: 0,
    });
  }

  // 遍历标签，更新边界
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      const label = labels[y * width + x];
      if (label > 0) {
        const box = boxes[label - 1];
        box.minX = Math.min(box.minX, x);
        box.maxX = Math.max(box.maxX, x);
        box.minY = Math.min(box.minY, y);
        box.maxY = Math.max(box.maxY, y);
        box.pixelCount++;
      }
    }
  }

  // 转换为标准格式
  return boxes
    .map((box) => ({
      x: box.minX,
      y: box.minY,
      width: box.maxX - box.minX + 1,
      height: box.maxY - box.minY + 1,
      area: box.pixelCount,
    }))
    .filter((box) => box.width > 0 && box.height > 0);
}

/**
 * 合并重叠或相邻的矩形
 */
function mergeOverlappingBoxes(
  boxes: Array<{ x: number; y: number; width: number; height: number; area: number }>,
  overlapThreshold: number = 0.3,
  proximityThreshold: number = 20
): Array<{ x: number; y: number; width: number; height: number }> {
  if (boxes.length === 0) return [];

  // 按面积降序排序
  const sorted = [...boxes].sort((a, b) => b.area - a.area);
  const merged: Array<{ x: number; y: number; width: number; height: number }> = [];
  const used = new Set<number>();

  for (let i = 0; i < sorted.length; i++) {
    if (used.has(i)) continue;

    let box = { ...sorted[i] };
    used.add(i);

    // 尝试合并其他矩形
    let changed = true;
    while (changed) {
      changed = false;
      for (let j = 0; j < sorted.length; j++) {
        if (used.has(j)) continue;

        const other = sorted[j];

        // 检查是否重叠或相邻
        const overlapX = Math.max(
          0,
          Math.min(box.x + box.width, other.x + other.width) - Math.max(box.x, other.x)
        );
        const overlapY = Math.max(
          0,
          Math.min(box.y + box.height, other.y + other.height) - Math.max(box.y, other.y)
        );
        const overlapArea = overlapX * overlapY;
        const otherArea = other.width * other.height;

        // 检查是否需要合并
        const isOverlapping = overlapArea > otherArea * overlapThreshold;
        const isProximate =
          Math.abs(box.x - other.x - other.width) < proximityThreshold ||
          Math.abs(other.x - box.x - box.width) < proximityThreshold ||
          Math.abs(box.y - other.y - other.height) < proximityThreshold ||
          Math.abs(other.y - box.y - box.height) < proximityThreshold;

        if (isOverlapping || (overlapArea > 0 && isProximate)) {
          // 合并
          const newX = Math.min(box.x, other.x);
          const newY = Math.min(box.y, other.y);
          const newRight = Math.max(box.x + box.width, other.x + other.width);
          const newBottom = Math.max(box.y + box.height, other.y + other.height);

          box = {
            x: newX,
            y: newY,
            width: newRight - newX,
            height: newBottom - newY,
            area: (newRight - newX) * (newBottom - newY),
          };

          used.add(j);
          changed = true;
        }
      }
    }

    merged.push({
      x: box.x,
      y: box.y,
      width: box.width,
      height: box.height,
    });
  }

  return merged;
}


/**
 * 检测灵感图中的图片区域
 * 优先使用网格检测（适用于紧凑网格布局），失败时回退到边缘 Flood Fill
 */
export async function detectPhotoWallRegions(
  imageUrl: string,
  options: {
    minRegionSize?: number; // 最小区域大小（像素）
    minRegionRatio?: number; // 最小区域占比（相对于图片面积）
  } = {}
): Promise<PhotoWallDetectionResult> {
  const { minRegionSize = 5000, minRegionRatio = 0.01 } = options;

  const img = await loadImage(imageUrl);
  const { naturalWidth: originalWidth, naturalHeight: originalHeight } = img;
  const totalArea = originalWidth * originalHeight;

  // console.log(`[PhotoWallSplitter] Image size: ${originalWidth}x${originalHeight}`);

  // 计算是否需要降采样
  const maxDimension = Math.max(originalWidth, originalHeight);
  const scale = maxDimension > MAX_DETECTION_SIZE ? MAX_DETECTION_SIZE / maxDimension : 1;
  const width = Math.round(originalWidth * scale);
  const height = Math.round(originalHeight * scale);

  // if (scale < 1) {
  //   console.log(`[PhotoWallSplitter] Downscaling to ${width}x${height} (scale: ${scale.toFixed(2)})`);
  // }

  // 创建 Canvas 获取像素数据（可能是降采样后的）
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d', { willReadFrequently: true });
  if (!ctx) {
    throw new Error('Failed to get canvas context');
  }

  // 绘制图片
  ctx.drawImage(img, 0, 0, width, height);
  const originalImageData = ctx.getImageData(0, 0, width, height);

  // =============================================
  // 策略 1：优先尝试网格检测（适用于紧凑网格布局）
  // =============================================
  // console.log('[PhotoWallSplitter] Trying grid detection first...');
  const gridResult = detectGridStructure(originalImageData);

  if (gridResult.success && gridResult.horizontalLines && gridResult.verticalLines) {
    // console.log(`[PhotoWallSplitter] Grid detection succeeded! ${gridResult.rows}x${gridResult.cols} grid`);

    // 根据网格结构生成区域
    const gridRegions = generateGridRegions(
      width,
      height,
      gridResult.horizontalLines,
      gridResult.verticalLines
    );

    // 映射回原始尺寸
    const finalRegions = gridRegions.map((region) => {
      if (scale < 1) {
        return {
          x: Math.round(region.x / scale),
          y: Math.round(region.y / scale),
          width: Math.round(region.width / scale),
          height: Math.round(region.height / scale),
        };
      }
      return region;
    });

    // console.log(`[PhotoWallSplitter] Grid detection found ${finalRegions.length} regions`);
    return {
      count: finalRegions.length,
      regions: finalRegions,
    };
  }

  // =============================================
  // 策略 2：回退到边缘 Flood Fill 算法
  // =============================================
  // console.log('[PhotoWallSplitter] Grid detection failed, falling back to flood fill...');

  // 添加灰色边框，确保 Flood Fill 能从边缘正确开始
  const borderSize = Math.max(10, Math.round(Math.min(width, height) * 0.02));
  const paddedWidth = width + borderSize * 2;
  const paddedHeight = height + borderSize * 2;

  const paddedCanvas = document.createElement('canvas');
  paddedCanvas.width = paddedWidth;
  paddedCanvas.height = paddedHeight;
  const paddedCtx = paddedCanvas.getContext('2d', { willReadFrequently: true });
  if (!paddedCtx) {
    throw new Error('Failed to get padded canvas context');
  }

  // 填充灰色背景
  paddedCtx.fillStyle = '#E0E0E0';
  paddedCtx.fillRect(0, 0, paddedWidth, paddedHeight);

  // 绘制原图到中心
  paddedCtx.drawImage(canvas, borderSize, borderSize);

  const imageData = paddedCtx.getImageData(0, 0, paddedWidth, paddedHeight);
  // console.log(`[PhotoWallSplitter] Added ${borderSize}px gray border, detection size: ${paddedWidth}x${paddedHeight}`);

  await yieldToMain();

  // 1. 计算梯度（边缘检测）
  // console.log('[PhotoWallSplitter] Computing gradient...');
  const gradient = await computeGradientMagnitude(imageData);

  await yieldToMain();

  // 2. 检测背景颜色
  const bgColor = detectBackgroundColor(imageData);
  // console.log(`[PhotoWallSplitter] Detected background color: RGB(${bgColor.r}, ${bgColor.g}, ${bgColor.b})`);

  // 3. 使用边缘 Flood Fill 创建二值化遮罩
  // console.log('[PhotoWallSplitter] Creating binary mask with edge flood fill...');
  let mask = await createBinaryMaskWithEdgeFloodFill(imageData, gradient, bgColor);

  await yieldToMain();

  // 统计前景像素数量，判断是否检测有效
  const foregroundCount = mask.reduce((sum, val) => sum + val, 0);
  const totalPaddedPixels = paddedWidth * paddedHeight;
  const foregroundRatio = foregroundCount / totalPaddedPixels;
  // console.log(`[PhotoWallSplitter] Foreground ratio: ${(foregroundRatio * 100).toFixed(1)}%`);

  // 如果前景占比过高（>95%）或过低（<5%），说明边缘检测可能失效，回退到颜色匹配
  if (foregroundRatio > 0.95 || foregroundRatio < 0.05) {
    // console.log('[PhotoWallSplitter] Edge flood fill ineffective, falling back to color matching...');
    mask = await createBinaryMaskByColor(imageData);
  }

  await yieldToMain();

  // 4. 膨胀操作，连接相邻区域
  // console.log('[PhotoWallSplitter] Dilating mask...');
  mask = await dilate(mask, paddedWidth, paddedHeight, 3);

  await yieldToMain();

  // 5. 连通区域标记
  // console.log('[PhotoWallSplitter] Labeling connected components...');
  const { labels, count } = await labelConnectedComponents(mask, paddedWidth, paddedHeight);
  // console.log(`[PhotoWallSplitter] Found ${count} raw regions`);

  await yieldToMain();

  // 6. 计算边界矩形
  const rawBoxes = computeBoundingBoxes(labels, paddedWidth, paddedHeight, count);

  // 7. 过滤太小的区域（注意：面积阈值也需要按比例缩放）
  const scaledMinArea = Math.max(minRegionSize * scale * scale, totalArea * scale * scale * minRegionRatio);
  const filteredBoxes = rawBoxes.filter((box) => box.area >= scaledMinArea);
  // console.log(`[PhotoWallSplitter] After filtering: ${filteredBoxes.length} regions`);

  // 8. 合并重叠的矩形
  const mergedBoxes = mergeOverlappingBoxes(filteredBoxes);
  // console.log(`[PhotoWallSplitter] After merging: ${mergedBoxes.length} regions`);

  // 9. 不再扩展边界（之前会扩展太多白色区域）
  // 后续 splitPhotoWall 会使用 removeWhiteBorder 裁剪白边

  // 10. 将坐标映射回原始尺寸（需要减去边框偏移，添加少量 padding）
  const smallPadding = 2; // 添加 2px padding 确保不会裁掉边缘
  const finalBoxes = mergedBoxes.map((box) => {
    // 先减去边框偏移，添加少量 padding
    const x = Math.max(0, box.x - borderSize - smallPadding);
    const y = Math.max(0, box.y - borderSize - smallPadding);
    // 限制在原图范围内
    const right = Math.min(width, box.x + box.width - borderSize + smallPadding);
    const bottom = Math.min(height, box.y + box.height - borderSize + smallPadding);
    const w = Math.max(0, right - x);
    const h = Math.max(0, bottom - y);

    // 如果有降采样，按比例放大
    if (scale < 1) {
      return {
        x: Math.round(x / scale),
        y: Math.round(y / scale),
        width: Math.round(w / scale),
        height: Math.round(h / scale),
      };
    }
    return { x, y, width: w, height: h };
  }).filter((box) => box.width > 0 && box.height > 0);

  return {
    count: finalBoxes.length,
    regions: finalBoxes,
  };
}

/**
 * 递归拆分单个区域
 * 如果区域内还能检测到多个子区域，继续递归拆分
 * @param imageUrl 当前区域的图片 URL
 * @param depth 当前递归深度
 * @param maxDepth 最大递归深度
 * @param offsetX 当前区域相对于原始图片的 X 偏移量
 * @param offsetY 当前区域相对于原始图片的 Y 偏移量
 */
async function splitRegionRecursively(
  imageUrl: string,
  depth = 0,
  maxDepth = 5,
  offsetX = 0,
  offsetY = 0
): Promise<ImageElement[]> {
  // 防止无限递归
  if (depth >= maxDepth) {
    const img = await loadImage(imageUrl);
    return [{
      id: `photo-wall-${Date.now()}-${Math.random().toString(36).substring(2, 6)}`,
      imageData: imageUrl,
      originalIndex: 0,
      width: img.naturalWidth,
      height: img.naturalHeight,
      sourceX: offsetX,
      sourceY: offsetY,
    }];
  }

  // 检测当前图片中的区域
  const detection = await detectPhotoWallRegions(imageUrl);

  // 如果检测到 0 或 1 个区域，说明无法继续拆分，返回当前图片
  if (detection.count <= 1) {

    // 去白边后返回
    const trimmedImageData = await removeWhiteBorder(imageUrl, { borderRatio: 0.3 });
    const trimmedImg = await loadImage(trimmedImageData);
    const trimmedWidth = trimmedImg.naturalWidth;
    const trimmedHeight = trimmedImg.naturalHeight;

    // 过滤太小的图片
    if (trimmedWidth < 50 || trimmedHeight < 50) {
      return [];
    }

    return [{
      id: `photo-wall-${Date.now()}-${Math.random().toString(36).substring(2, 6)}`,
      imageData: trimmedImageData,
      originalIndex: 0,
      width: trimmedWidth,
      height: trimmedHeight,
      sourceX: offsetX,
      sourceY: offsetY,
    }];
  }

  // 检测到多个区域，提取每个区域并递归处理
  const img = await loadImage(imageUrl);
  const allElements: ImageElement[] = [];

  for (let i = 0; i < detection.regions.length; i++) {
    const region = detection.regions[i];

    // 提取区域
    const regionCanvas = document.createElement('canvas');
    regionCanvas.width = region.width;
    regionCanvas.height = region.height;
    const regionCtx = regionCanvas.getContext('2d');
    if (!regionCtx) continue;

    regionCtx.drawImage(
      img,
      region.x,
      region.y,
      region.width,
      region.height,
      0,
      0,
      region.width,
      region.height
    );

    const regionImageUrl = regionCanvas.toDataURL('image/jpeg', 0.92);

    // 递归拆分这个区域，累积位置偏移
    const subElements = await splitRegionRecursively(
      regionImageUrl,
      depth + 1,
      maxDepth,
      offsetX + region.x,  // 累积 X 偏移
      offsetY + region.y   // 累积 Y 偏移
    );
    allElements.push(...subElements);
  }

  return allElements;
}

/**
 * 拆分灵感图图片（递归版本）
 * 会递归拆分直到每个区域都无法再拆分为止
 */
export async function splitPhotoWall(imageUrl: string): Promise<ImageElement[]> {
  const elements = await splitRegionRecursively(imageUrl, 0, 5);

  // 重新分配 ID 和 index
  const finalElements = elements.map((el, index) => ({
    ...el,
    id: `photo-wall-${Date.now()}-${index}`,
    originalIndex: index,
  }));

  // 按面积降序排序（大图在前）
  finalElements.sort((a, b) => b.width * b.height - a.width * a.height);
  
  return finalElements;
}