import { PAPER_SIZE } from '../constants/colors';
import {
    drawHeader as drawHeaderCommon,
    drawMiniHeader as drawMiniHeaderCommon,
} from './headerDrawService';
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坐标
 * @param padding 边距
 * @param canvasWidth 画布宽度
 * @param canvasHeight 画布高度
 * @param radius 字符圆半径
 * @returns 位置数组
 */
function getPositionsFromTemplate(
    templateIndex: number,
    centerX: number,
    centerY: number,
): Array<{ x: number; y: number }> {
    const template = POSITION_TEMPLATES[templateIndex];

    // 转换为绝对坐标并检查边界
    const positions: Array<{ x: number; y: number }> = [];
    for (const pos of template) {
        const x = centerX + pos.x;
        const y = centerY + pos.y;

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

class FindWordDrawService {
    headerType: PrintHeader = 'wechat';
    canvas: WechatMiniprogram.Canvas;
    ctx: RenderingContext;
    options: Record<string, any>;
    paperSize: PaperSize;
    currentX: number;
    currentY: number;
    colors: string[];
    characters: string[];
    debug: boolean = false; // Debug模式开关

    constructor(
        canvas: Canvas,
        ctx: RenderingContext,
        options?: Record<string, any>,
    ) {
        options = options || {};
        this.canvas = canvas;
        this.ctx = ctx;
        this.paperSize = 'A4';
        this.options = {
            appName: '涂鸦丫小程序',
            appHint: '识字|识图|练字|打印',
            title: '找一找  涂  色',
            subTitle: '找出相同的文字涂色',
            ...options,
        };
        // 从options中读取debug参数，如果没有则使用全局DEBUG常量
        this.debug = options.debug === true || DEBUG;
        this.currentX = 0;
        this.currentY = 0;
        this.colors = ['#000'];
        this.characters = ['王'];
        this.setPrintConfig();
    }

    setPrintConfig() {
        const printConfig = getApp().getPrintConfig();
        this.headerType = printConfig.header;
        this.options.appName = printConfig.appName;
    }

    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();
        if (this.headerType !== 'minimal') {
            await this.drawHeader();
        } else {
            this.drawMiniHeader();
        }

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

    async drawHeader() {
        this.currentX = 80;
        this.currentY = 80;
        await drawHeaderCommon({
            canvas: this.canvas,
            ctx: this.ctx,
            headerType: this.headerType,
            options: {
                appName: this.options.appName || '涂鸦丫小程序',
                appHint: this.options.appHint || '识字|识图|练字|打印',
                title: this.options.title || '找一找  涂  色',
                subTitle: this.options.subTitle || '找出相同的文字涂色',
            },
            onHeaderDrawn: (currentY) => {
                this.currentY = currentY;
                this.drawLine(this.currentY);
            },
        });
    }

    drawMiniHeader() {
        drawMiniHeaderCommon({
            canvas: this.canvas,
            ctx: this.ctx,
            options: {
                appName: this.options.appName || '涂鸦丫小程序',
                title: this.options.title || '找一找  涂  色',
            },
            onHeaderDrawn: (currentY) => {
                this.currentY = currentY;
                this.drawLine(this.currentY);
            },
        });
    }

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

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

        // 计算内容区域
        const contentTop = this.currentY + 50;
        const contentBottom = canvas.height - 80;
        const contentHeight = contentBottom - contentTop;

        // 中心大字的参数
        const centerX = canvas.width / 2;
        const centerY = contentTop + contentHeight / 2; // 内容区域垂直居中

        // 普通圆的参数（和textDrawService一致）
        const radius = 80;
        const fontSize = 72;

        // 先选择模板，获取模板的实际位置数量
        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; // 已经是绝对坐标，不需要再加contentTop

            // 绘制圆
            ctx.fillStyle = '#fff';
            ctx.strokeStyle = '#000';
            ctx.lineWidth = 4;
            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(linY: number) {
        const { canvas, ctx } = this;

        ctx.strokeStyle = '#000';
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(80, linY);
        ctx.lineTo(canvas.width - 80, linY);
        ctx.stroke();
    }

    setPaper() {
        const { ctx, canvas } = this;
        const { pixelRatio: dpr } = wx.getWindowInfo();
        let { width, height } = PAPER_SIZE[this.paperSize];
        width = width * dpr;
        height = height * dpr;

        canvas.width = width;
        canvas.height = height;

        this.clear();
        ctx.fillStyle = '#fff';
        ctx.fillRect(0, 0, width, height);
    }

    clear() {
        const canvas = this.canvas;
        this.ctx.clearRect(0, 0, canvas.width, canvas.height);
    }
}

export default FindWordDrawService;