import { PAPER_SIZE } from '../../constants/colors';
import { checkAndSaveImage } from '../../utils/saveImage';
import { shouldShowShareGuide } from '../../utils/shareGuide';
import AdditionDraw from '../service/additionDraw';
import {
    MATH_FUNCTION_TYPES,
    MathFunctionType,
} from '../../constants/mathFunctions';

Page({
    canvas: null as Canvas | null,
    ctx: null as RenderingContext | null,
    boxHeight: 0,
    boxWidth: 0,
    drawService: null as AdditionDraw | null,
    calculationData: null as {
        problems: Array<{
            type: 'addition' | 'subtraction';
            left: number;
            right: number;
            result: number;
        }>;
    } | null,

    data: {
        pageTitle: '加减法计算',
        functionId: '',
        hasContent: false,
        showShareDialog: false,
        currentType: 'addition-5', // 'addition-5', 'addition-10', 'subtraction-10', 'addition-subtraction-10'
        currentTypeName: '5以内加法',
        typeActions: [
            { name: '5以内加法', value: 'addition-5' },
            { name: '10以内加法', value: 'addition-10' },
            { name: '10以内减法', value: 'subtraction-10' },
            { name: '10以内加减法', value: 'addition-subtraction-10' },
        ],
        imageType: 'twelve-animals', // 图片类型：twelve-animals 或 fruits
    },

    onLoad(options: { id?: string }) {
        const functionId = options.id || 'addition-5';
        this.setData({ functionId });

        const functionItem = MATH_FUNCTION_TYPES.find(
            (item: MathFunctionType) => item.id === functionId,
        );

        const pageTitle = functionItem?.title || '加减法计算';
        this.setData({ pageTitle });
        wx.setNavigationBarTitle({ title: pageTitle });

        // 根据 functionId 设置默认类型
        if (functionId === 'addition-5') {
            this.setData({
                currentType: 'addition-5',
                currentTypeName: '5以内加法',
            });
        } else if (functionId === 'addition-10') {
            this.setData({
                currentType: 'addition-10',
                currentTypeName: '10以内加法',
            });
        } else if (functionId === 'subtraction-10') {
            this.setData({
                currentType: 'subtraction-10',
                currentTypeName: '10以内减法',
            });
        } else if (functionId === 'addition-subtraction-10') {
            this.setData({
                currentType: 'addition-subtraction-10',
                currentTypeName: '10以内加减法',
            });
        }
    },

    onReady() {
        this.initCanvas();
    },

    /**
     * 初始化Canvas
     */
    initCanvas() {
        const query = wx.createSelectorQuery();
        query
            .select('#canvasWrapper')
            .boundingClientRect((rect) => {
                if (rect) {
                    const { width, height } = PAPER_SIZE['A4'];
                    const boxWidth = rect.width;
                    const boxHeight = boxWidth / (width / height);

                    this.boxHeight = boxHeight;
                    this.boxWidth = boxWidth;

                    this.setData({ boxWidth, boxHeight });

                    const canvas = wx
                        .createSelectorQuery()
                        .select('#canvasContent');
                    canvas.fields({ node: true, size: true }).exec((res) => {
                        if (res[0]) {
                            const canvasNode = res[0].node;
                            const ctx = canvasNode.getContext('2d');
                            const dpr = wx.getSystemInfoSync().pixelRatio;

                            canvasNode.width = boxWidth * dpr;
                            canvasNode.height = boxHeight * dpr;
                            ctx.scale(dpr, dpr);

                            this.canvas = canvasNode;
                            this.ctx = ctx;

                            this.drawService = new AdditionDraw(
                                canvasNode,
                                ctx,
                                {
                                    title: this.data.currentTypeName,
                                    subTitle: '通过图形化方式学习加减法运算',
                                },
                            );

                            // 初始随机生成
                            this.onRandom();
                        }
                    });
                }
            })
            .exec();
    },

    /**
     * 绘制Canvas内容
     */
    async drawCanvas() {
        if (!this.ctx || !this.drawService || !this.calculationData) {
            return;
        }

        try {
            // 更新 Header 的 Title
            if (this.drawService) {
                this.drawService.options.title = this.data.currentTypeName;
            }

            await this.drawService.draw(
                this.calculationData,
                this.data.currentType,
            );
            this.setData({ hasContent: true });
        } catch (error) {
            console.error('绘制失败:', error);
            this.setData({ hasContent: false });
        }
    },

    /**
     * 随机生成
     */
    onRandom() {
        const problems: Array<{
            type: 'addition' | 'subtraction';
            left: number;
            right: number;
            result: number;
        }> = [];

        const type = this.data.currentType;

        // 生成6道题目
        for (let i = 0; i < 5; i++) {
            if (type === 'addition-5') {
                // 5以内加法：和 ≤ 5
                // left >= 1, right >= 1, left + right <= 5
                const maxSum = 5;
                const left = Math.floor(Math.random() * (maxSum - 1)) + 1; // 1 到 4
                const maxRight = maxSum - left; // 确保 left + right <= 5
                const right = Math.floor(Math.random() * maxRight) + 1; // 1 到 maxRight
                const result = left + right;
                problems.push({ type: 'addition', left, right, result });
            } else if (type === 'addition-10') {
                // 10以内加法：和 ≤ 10
                // left >= 1, right >= 1, left + right <= 10
                const maxSum = 10;
                const left = Math.floor(Math.random() * (maxSum - 1)) + 1; // 1 到 9
                const maxRight = maxSum - left; // 确保 left + right <= 10
                const right = Math.floor(Math.random() * maxRight) + 1; // 1 到 maxRight
                const result = left + right;
                problems.push({ type: 'addition', left, right, result });
            } else if (type === 'subtraction-10') {
                // 10以内减法：被减数 ≤ 10
                // left <= 10, left - right = result, result >= 1
                const maxLeft = 10;
                const left = Math.floor(Math.random() * maxLeft) + 1; // 1 到 10
                const maxRight = left - 1; // 确保 result >= 1
                const right = Math.floor(Math.random() * maxRight) + 1; // 1 到 maxRight
                const result = left - right;
                problems.push({ type: 'subtraction', left, right, result });
            } else if (type === 'addition-subtraction-10') {
                // 加减法混合
                if (Math.random() < 0.5) {
                    // 加法：和 ≤ 10
                    const maxSum = 10;
                    const left = Math.floor(Math.random() * (maxSum - 1)) + 1; // 1 到 9
                    const maxRight = maxSum - left; // 确保 left + right <= 10
                    const right = Math.floor(Math.random() * maxRight) + 1; // 1 到 maxRight
                    const result = left + right;
                    problems.push({ type: 'addition', left, right, result });
                } else {
                    // 减法：被减数 ≤ 10
                    const maxLeft = 10;
                    const left = Math.floor(Math.random() * maxLeft) + 1; // 1 到 10
                    const maxRight = left - 1; // 确保 result >= 1
                    const right = Math.floor(Math.random() * maxRight) + 1; // 1 到 maxRight
                    const result = left - right;
                    problems.push({ type: 'subtraction', left, right, result });
                }
            }
        }

        this.calculationData = { problems };
        this.drawCanvas();
    },

    /**
     * 导出打印
     */
    exportToPrint() {
        if (!this.canvas || !this.data.hasContent) {
            return;
        }

        if (shouldShowShareGuide()) {
            this.setData({ showShareDialog: true });
            return;
        }

        checkAndSaveImage(this.canvas);
    },

    /**
     * 分享小程序
     */
    onShareAppMessage() {
        return {
            title: '涂鸦丫-数学学习涂鸦卡',
            path: `/mathPages/addition/addition?id=${this.data.functionId}`,
            imageUrl:
                'https://cdn.joeyone.cn/doodle/share-img/index-share-v2.png',
        };
    },

    onShareTimeline() {
        return {
            title: '涂鸦丫-数学学习涂鸦卡',
            query: `id=${this.data.functionId}`,
            imageUrl:
                'https://cdn.joeyone.cn/doodle/share-img/index-share-v2.png',
        };
    },

    /** 关闭分享引导弹窗 */
    onCloseShareDialog() {
        this.setData({ showShareDialog: false });
    },

    /** 分享成功回调 */
    onShareSuccess() {
        this.setData({ showShareDialog: false });
        if (this.canvas) {
            checkAndSaveImage(this.canvas);
        }
    },

    /** 选择类型 */
    onSelectType(event: any) {
        const { name, value } = event.detail;
        this.setData({
            currentType: value,
            currentTypeName: name,
        });
        // 重新生成数据
        this.onRandom();
    },
});