/**
 * 连连看绘制服务
 */

import { BaseDrawService } from '../../../service/baseDraw';
import { getImage } from '../../../utils/index';

/**
 * 连连看数据
 */
export interface MatchConnectData {
    /** 参考序列：5张图片的索引数组 */
    referenceSequence: number[];
    /** 6个框，每个框包含5张图片的索引（位置由绘制服务随机生成） */
    boxes: Array<{
        imageIndices: number[];
    }>;
}

/**
 * 连连看绘制服务
 */
class MatchConnectDraw extends BaseDrawService {
    matchData: MatchConnectData | null = null;

    constructor(
        canvas: Canvas,
        ctx: RenderingContext,
        options?: Record<string, any>,
    ) {
        super(canvas, ctx, options);
    }

    /**
     * 绘制连连看内容
     */
    async draw(matchData: MatchConnectData) {
        if (!matchData || !matchData.referenceSequence || !matchData.boxes) {
            return;
        }

        this.setPrintConfig();
        this.matchData = matchData;
        this.clear();
        this.setPaper();

        // 绘制Header
        if (this.headerType !== 'minimal') {
            await this.drawHeader();
        } else {
            this.drawMiniHeader();
        }

        // 绘制内容区域
        this.drawDivider();
        await this.drawContent({
            canvas: this.canvas,
            ctx: this.ctx,
            matchData: this.matchData,
            canvasWidth: this.canvasWidth,
            startY: this.currentY,
        });
    }

    /**
     * 生成不重叠的图片位置
     * @param count 图片数量
     * @param contentWidth 内容区域宽度
     * @param contentHeight 内容区域高度
     * @param imageSize 图片大小
     * @param imagePadding 图片padding
     * @returns 图片位置数组，每个位置包含x和y（相对于内容区域的坐标）
     */
    private generateNonOverlappingPositions(
        count: number,
        contentWidth: number,
        contentHeight: number,
        imageSize: number,
        imagePadding: number,
    ): Array<{ x: number; y: number }> {
        // 计算最大可放置位置（图片左上角的位置）
        const maxX = contentWidth - imageSize;
        const maxY = contentHeight - imageSize;
        const positions: Array<{ x: number; y: number }> = [];
        const placedRects: Array<{
            left: number;
            top: number;
            right: number;
            bottom: number;
        }> = [];

        /**
         * 检查两个矩形是否重叠
         */
        const isRectOverlap = (
            rect1: {
                left: number;
                top: number;
                right: number;
                bottom: number;
            },
            rect2: {
                left: number;
                top: number;
                right: number;
                bottom: number;
            },
        ): boolean => {
            return !(
                rect1.right < rect2.left ||
                rect1.left > rect2.right ||
                rect1.bottom < rect2.top ||
                rect1.top > rect2.bottom
            );
        };

        // 计算图片的实际占用大小（包含padding）
        const occupiedSize = imageSize + imagePadding * 2;

        // 生成候选位置网格，然后随机打乱
        // 这样可以确保位置分布更均匀，同时保持随机性
        const gridCols = Math.max(3, Math.floor(contentWidth / occupiedSize));
        const gridRows = Math.max(2, Math.floor(contentHeight / occupiedSize));
        const cellWidth = maxX / Math.max(1, gridCols - 1);
        const cellHeight = maxY / Math.max(1, gridRows - 1);

        // 生成所有可能的网格位置
        const candidatePositions: Array<{ x: number; y: number }> = [];
        for (let row = 0; row < gridRows; row++) {
            for (let col = 0; col < gridCols; col++) {
                const x = col * cellWidth;
                const y = row * cellHeight;
                candidatePositions.push({ x, y });
            }
        }

        // 随机打乱候选位置
        const shuffledCandidates = [...candidatePositions].sort(
            () => Math.random() - 0.5,
        );

        // 从打乱的候选位置中选择不重叠的位置
        for (let i = 0; i < count; i++) {
            let found = false;

            // 先尝试从网格候选位置中选择
            for (const candidate of shuffledCandidates) {
                const x = candidate.x;
                const y = candidate.y;

                // 计算当前图片的实际占用区域（包含padding）
                const currentRect = {
                    left: x - imagePadding,
                    top: y - imagePadding,
                    right: x + imageSize + imagePadding,
                    bottom: y + imageSize + imagePadding,
                };

                // 确保不超出内容区域的范围
                if (
                    currentRect.left < 0 ||
                    currentRect.top < 0 ||
                    currentRect.right > contentWidth ||
                    currentRect.bottom > contentHeight
                ) {
                    continue;
                }

                // 检查是否与已放置的图片重叠
                let overlaps = false;
                for (const placedRect of placedRects) {
                    if (isRectOverlap(currentRect, placedRect)) {
                        overlaps = true;
                        break;
                    }
                }

                if (!overlaps) {
                    // 存储实际占用区域
                    placedRects.push({
                        left: x - imagePadding,
                        top: y - imagePadding,
                        right: x + imageSize + imagePadding,
                        bottom: y + imageSize + imagePadding,
                    });

                    positions.push({ x, y });
                    found = true;
                    break;
                }
            }

            // 如果网格位置都不行，尝试完全随机的位置
            if (!found) {
                let attempts = 0;
                const maxAttempts = 1000;

                while (attempts < maxAttempts) {
                    // 生成随机位置，添加一些随机偏移
                    const randomOffsetX =
                        (Math.random() - 0.5) * cellWidth * 0.5;
                    const randomOffsetY =
                        (Math.random() - 0.5) * cellHeight * 0.5;
                    const baseX = Math.random() * maxX;
                    const baseY = Math.random() * maxY;
                    const x = Math.max(
                        0,
                        Math.min(maxX, baseX + randomOffsetX),
                    );
                    const y = Math.max(
                        0,
                        Math.min(maxY, baseY + randomOffsetY),
                    );

                    // 计算当前图片的实际占用区域（包含padding）
                    const currentRect = {
                        left: x - imagePadding,
                        top: y - imagePadding,
                        right: x + imageSize + imagePadding,
                        bottom: y + imageSize + imagePadding,
                    };

                    // 确保不超出内容区域的范围
                    if (
                        currentRect.left < 0 ||
                        currentRect.top < 0 ||
                        currentRect.right > contentWidth ||
                        currentRect.bottom > contentHeight
                    ) {
                        attempts++;
                        continue;
                    }

                    // 检查是否与已放置的图片重叠
                    let overlaps = false;
                    for (const placedRect of placedRects) {
                        if (isRectOverlap(currentRect, placedRect)) {
                            overlaps = true;
                            break;
                        }
                    }

                    if (!overlaps) {
                        // 存储实际占用区域
                        placedRects.push({
                            left: x - imagePadding,
                            top: y - imagePadding,
                            right: x + imageSize + imagePadding,
                            bottom: y + imageSize + imagePadding,
                        });

                        positions.push({ x, y });
                        found = true;
                        break;
                    }

                    attempts++;
                }
            }

            // 最后的后备方案：使用网格布局，但添加随机偏移
            if (!found) {
                const gridCols = 3;
                const gridRows = 2;
                const gridCellWidth = maxX / Math.max(1, gridCols - 1);
                const gridCellHeight = maxY / Math.max(1, gridRows - 1);
                const baseX = (i % gridCols) * gridCellWidth;
                const baseY = Math.floor(i / gridCols) * gridCellHeight;
                // 添加随机偏移，但确保不重叠
                const offsetX = (Math.random() - 0.5) * gridCellWidth * 0.3;
                const offsetY = (Math.random() - 0.5) * gridCellHeight * 0.3;
                const x = Math.max(0, Math.min(maxX, baseX + offsetX));
                const y = Math.max(0, Math.min(maxY, baseY + offsetY));
                positions.push({ x, y });
            }
        }

        // 最后再次随机打乱位置顺序，增加随机性
        return positions.sort(() => Math.random() - 0.5);
    }

    /**
     * 绘制箭头
     */
    private drawArrow(
        ctx: RenderingContext,
        x1: number,
        y1: number,
        x2: number,
        y2: number,
    ) {
        ctx.strokeStyle = '#FF69B4'; // 粉色
        ctx.lineWidth = 2;
        ctx.setLineDash([]); // 实线

        // 绘制箭头线
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.stroke();

        // 绘制箭头头部
        const angle = Math.atan2(y2 - y1, x2 - x1);
        const arrowLength = 8;
        const arrowAngle = Math.PI / 6; // 30度

        ctx.beginPath();
        ctx.moveTo(x2, y2);
        ctx.lineTo(
            x2 - arrowLength * Math.cos(angle - arrowAngle),
            y2 - arrowLength * Math.sin(angle - arrowAngle),
        );
        ctx.moveTo(x2, y2);
        ctx.lineTo(
            x2 - arrowLength * Math.cos(angle + arrowAngle),
            y2 - arrowLength * Math.sin(angle + arrowAngle),
        );
        ctx.stroke();
    }

    /**
     * 绘制内容区域
     */
    private async drawContent(params: {
        canvas: WechatMiniprogram.Canvas;
        ctx: RenderingContext;
        matchData: MatchConnectData;
        canvasWidth: number;
        startY: number;
    }): Promise<void> {
        const { ctx, matchData, canvasWidth } = params;
        let { startY } = params;

        startY = startY + 25;

        const margin = 40; // 左右边距
        const imageSize = 50; // 图片大小
        const arrowLength = 30; // 箭头长度
        const arrowSpacing = 8; // 箭头左右间距

        // 计算参考序列的总宽度
        // 总宽度 = 所有图片宽度 + 所有箭头长度 + 所有箭头间距（左右各8px）
        const arrowCount = matchData.referenceSequence.length - 1;
        const referenceWidth =
            matchData.referenceSequence.length * imageSize +
            arrowCount * arrowLength +
            arrowCount * arrowSpacing * 2; // 每个箭头左右各8px

        // 绘制参考序列（上面部分）- 居中显示
        const referenceStartX =
            margin + (canvasWidth - margin * 2 - referenceWidth) / 2;
        const referenceY = startY;

        // 绘制参考序列的图片和箭头
        let currentX = referenceStartX;
        for (let i = 0; i < matchData.referenceSequence.length; i++) {
            const imageIndex = matchData.referenceSequence[i];

            // 绘制图片
            try {
                const imagePath = `/focusPages/shared/aeests/material/${imageIndex}.png`;
                const image = await getImage(this.canvas, imagePath);
                ctx.drawImage(
                    image,
                    currentX,
                    referenceY,
                    imageSize,
                    imageSize,
                );
            } catch (error) {
                console.error(`加载参考图片失败: ${imageIndex}`, error);
            }

            // 如果不是最后一张，绘制箭头
            if (i < matchData.referenceSequence.length - 1) {
                // 箭头左边间距8px
                const arrowStartX = currentX + imageSize + arrowSpacing;
                const arrowEndX = arrowStartX + arrowLength;
                const arrowY = referenceY + imageSize / 2;
                this.drawArrow(ctx, arrowStartX, arrowY, arrowEndX, arrowY);
                // 箭头右边间距8px，然后开始下一张图片
                currentX = arrowEndX + arrowSpacing;
            } else {
                currentX += imageSize;
            }
        }

        // 绘制虚线分割线
        const dividerY = referenceY + imageSize + 30;
        this.drawDashedDivider(dividerY, margin);

        // 绘制下面的6个框（3行2列）
        const boxStartY = dividerY + 30;
        const boxWidth = (canvasWidth - margin * 2 - 20) / 2; // 减去列间距
        const boxHeight = 165; // 框的高度
        const boxSpacingX = 20; // 列间距
        const boxSpacingY = 30; // 行间距
        const boxPadding = 10; // 框内边距
        const boxImageSize = 35; // 框内图片大小
        const imagePadding = 20; // 每张图片的内边距（padding）

        for (let row = 0; row < 3; row++) {
            for (let col = 0; col < 2; col++) {
                const boxIndex = row * 2 + col;
                const box = matchData.boxes[boxIndex];
                if (!box || !box.imageIndices) continue;

                const boxX = margin + col * (boxWidth + boxSpacingX);
                const boxY = boxStartY + row * (boxHeight + boxSpacingY);

                // 绘制框（圆角实线）
                this.drawRoundedRect(boxX, boxY, boxWidth, boxHeight, {
                    isDashed: false,
                    radius: 16,
                    color: '#000',
                    lineWidth: 1,
                });

                // 计算框内可用的内容区域
                const contentWidth = boxWidth - boxPadding * 2;
                const contentHeight = boxHeight - boxPadding * 2;

                // 为这个框的图片随机分配位置，确保图片+padding不重叠
                const imagePositions = this.generateNonOverlappingPositions(
                    box.imageIndices.length,
                    contentWidth,
                    contentHeight,
                    boxImageSize,
                    imagePadding,
                );

                // 绘制框内的图片
                for (let i = 0; i < box.imageIndices.length; i++) {
                    const imageIndex = box.imageIndices[i];
                    const position = imagePositions[i];

                    try {
                        const imagePath = `/focusPages/shared/aeests/material/${imageIndex}.png`;
                        const image = await getImage(this.canvas, imagePath);

                        // 计算图片位置
                        const imageX = boxX + boxPadding + position.x;
                        const imageY = boxY + boxPadding + position.y;

                        ctx.drawImage(
                            image,
                            imageX,
                            imageY,
                            boxImageSize,
                            boxImageSize,
                        );
                    } catch (error) {
                        console.error(`加载框内图片失败: ${imageIndex}`, error);
                    }
                }
            }
        }
    }
}

export default MatchConnectDraw;