import { BaseDrawService } from '../core/draw/baseDraw';
import { POSITION_TEMPLATES } from './findWordTemplate';

// ==================== Debug 开关 ====================
// 设置为 true 时，其他文字会显示坐标系的索引值（第几个位置），方便手动调整坐标系
const DEBUG = false;
// ====================================================

/**
 * 从固定模板中获取位置
 * @param centerX 中心X坐标
 * @param centerY 中心Y坐标
 * @param count 需要的位置数量
 * @param padding 边距
 * @param canvasWidth 画布宽度
 * @param canvasHeight 画布高度
 * @param radius 字符圆半径
 * @returns 位置数组
 */
/**
 * 随机选择一个模板并返回模板的实际位置数量
 * @returns 模板索引和模板的实际位置数量
 */
function selectTemplate(): { templateIndex: number } {
    const templateIndex = Math.floor(Math.random() * POSITION_TEMPLATES.length);
    return {
        templateIndex,
    };
}

/**
 * 从指定模板中获取位置
 * @param templateIndex 模板索引
 * @param centerX 中心X坐标（逻辑像素）
 * @param centerY 中心Y坐标（逻辑像素）
 * @returns 位置数组（逻辑像素）
 *
 * 注意：POSITION_TEMPLATES 中的坐标是基于原始像素的，需要转换为逻辑像素（除以3）
 */
function getPositionsFromTemplate(
    templateIndex: number,
    centerX: number,
    centerY: number,
): Array<{ x: number; y: number }> {
    const template = POSITION_TEMPLATES[templateIndex];

    // 转换为绝对坐标（模板坐标除以3转换为逻辑像素）
    const positions: Array<{ x: number; y: number }> = [];
    for (const pos of template) {
        const x = centerX + pos.x / 3; // 转换为逻辑像素
        const y = centerY + pos.y / 3; // 转换为逻辑像素

        positions.push({ x, y });
    }
    return positions;
}

class FindWordDrawService extends BaseDrawService {
    colors: string[];
    characters: string[];
    debug: boolean = false; // Debug模式开关

    constructor(
        canvas: Canvas,
        ctx: RenderingContext,
        options?: Record<string, any>,
    ) {
        options = options || {};
        super(canvas, ctx, {
            title: '找一找  涂  色',
            subTitle: '找出相同的文字涂色',
            ...options,
        });
        // 从options中读取debug参数，如果没有则使用全局DEBUG常量
        this.debug = options.debug === true || DEBUG;
        this.colors = ['#000'];
        this.characters = ['王'];
    }

    async draw(list: Array<{ color: string; word: string }>) {
        this.setPrintConfig();

        this.colors = list.map((item) => item.color || '#000');
        this.characters = list.map((item) => item.word || '日');
        this.clear();
        this.setPaper();

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

        // 找字模板没有 drawLegend 部分
        this.drawDivider();
        this.drawContent();
    }

    drawContent() {
        const { ctx, characters, colors } = this;
        if (characters.length <= 0) return;

        // 第一个字作为中心大字
        const firstChar = characters[0];
        const firstColor = colors[0];

        // 计算内容区域（逻辑像素）
        const contentTop = this.currentY + 17; // 50/3≈17
        const contentBottom = this.canvasHeight - 27; // 80/3≈27
        const contentHeight = contentBottom - contentTop;

        // 中心大字的参数
        const centerX = this.canvasWidth / 2;
        const centerY = contentTop + contentHeight / 2;

        // 普通圆的参数（逻辑像素）
        const radius = 27; // 80/3≈27
        const fontSize = 24; // 72/3=24

        // 先选择模板，获取模板的实际位置数量
        const { templateIndex } = selectTemplate();
        // 从固定模板中获取位置
        const positions = getPositionsFromTemplate(
            templateIndex,
            centerX,
            centerY,
        );
        const targetCount = positions.length; // 使用模板的实际位置数量（中心字已单独绘制）

        // 生成所有要绘制的字符列表（包括第一个字和其他字）
        const allChars: Array<{ char: string; color: string }> = [];

        // 如果只有一个字符，全部使用第一个字符
        if (characters.length === 1) {
            for (let i = 0; i < targetCount; i++) {
                allChars.push({ char: firstChar, color: firstColor });
            }
        } else {
            // 第一个字出现多次（根据总字符数决定，确保有足够的第一个字）
            const firstCharCount = Math.max(
                Math.floor(targetCount * 0.4),
                Math.floor(characters.length * 2),
            );
            for (let i = 0; i < firstCharCount; i++) {
                allChars.push({ char: firstChar, color: firstColor });
            }

            // 其他字符各出现几次
            const remainingCount = targetCount - firstCharCount;
            const otherCharCount = Math.max(
                1,
                Math.floor(remainingCount / (characters.length - 1)),
            );
            for (let i = 1; i < characters.length; i++) {
                for (let j = 0; j < otherCharCount; j++) {
                    allChars.push({ char: characters[i], color: colors[i] });
                }
            }

            // 如果生成的字符数量还不够，用第一个字符补齐
            while (allChars.length < targetCount) {
                allChars.push({ char: firstChar, color: firstColor });
            }
        }

        // 打乱顺序
        for (let i = allChars.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [allChars[i], allChars[j]] = [allChars[j], allChars[i]];
        }

        // 根据实际生成的位置数量来截取字符（确保数量匹配）
        const charsToDraw = allChars.slice(0, positions.length);

        // 绘制中心大字（去掉圆圈border，只绘制文字）
        ctx.fillStyle = '#333';
        ctx.font = `bold ${fontSize * 3}px "Microsoft Yahei"`; // 中心字是其他字的3倍
        ctx.textBaseline = 'middle';
        ctx.textAlign = 'center';
        ctx.fillText(firstChar, centerX, centerY);

        // 绘制四周的字符
        positions.forEach((pos, index) => {
            const item = charsToDraw[index];
            const y = pos.y; // 已经是绝对坐标

            // 绘制圆
            ctx.fillStyle = '#fff';
            ctx.strokeStyle = '#000';
            ctx.lineWidth = 1; // 4/3≈1
            ctx.beginPath();
            ctx.arc(pos.x, y, radius, 0, Math.PI * 2);
            ctx.fill();
            ctx.stroke();
            ctx.closePath();

            // 绘制字符
            ctx.fillStyle = '#333';
            ctx.font = `bold ${fontSize}px "Microsoft Yahei"`;
            ctx.textBaseline = 'middle';
            ctx.textAlign = 'center';
            // Debug模式：显示坐标系索引值，否则显示文字
            const displayText = this.debug ? String(index) : item.char;
            ctx.fillText(displayText, pos.x, y, radius * 2);
        });
    }

    // drawLine 已由基类的 drawDivider 替代，保留此方法以保持兼容
    drawLine(linY: number) {
        this.drawDivider();
    }
}

export default FindWordDrawService;
