/**
 * 图形涂色方法
 * 根据图形类型绘制到Canvas
 *
 * 支持的图形类型：
 * - circle：圆形
 * - ellipse：椭圆
 * - square：正方形
 * - rectangle：矩形
 * - triangle：三角形
 * - parallelogram：平行四边形
 * - diamond：菱形
 * - trapezoid：梯形
 * - pentagon：五边形
 * - hexagon：六边形
 * - pentagram：五角星
 * - heart：心形
 * - semicircle：半圆
 * - sector：扇形
 * - ring：圆环
 */
import { ShapeCard } from '../constants/shapes';

// 绘制各种图形的辅助函数

// 绘制圆形
function drawCircle(
    ctx: RenderingContext,
    x: number,
    y: number,
    radius: number,
    fillColor: string,
) {
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2);
    if (fillColor !== 'transparent') {
        ctx.fillStyle = fillColor;
        ctx.fill();
    }
    ctx.strokeStyle = '#141414';
    ctx.lineWidth = 2;
    ctx.stroke();
}

// 绘制椭圆形
function drawEllipse(
    ctx: RenderingContext,
    x: number,
    y: number,
    rx: number,
    ry: number,
    fillColor: string,
) {
    ctx.beginPath();
    ctx.ellipse(x, y, rx, ry, 0, 0, Math.PI * 2);
    if (fillColor !== 'transparent') {
        ctx.fillStyle = fillColor;
        ctx.fill();
    }
    ctx.strokeStyle = '#141414';
    ctx.lineWidth = 2;
    ctx.stroke();
}

// 绘制正方形
function drawSquare(
    ctx: RenderingContext,
    x: number,
    y: number,
    size: number,
    fillColor: string,
) {
    if (fillColor !== 'transparent') {
        ctx.fillStyle = fillColor;
        ctx.fillRect(x - size / 2, y - size / 2, size, size);
    }
    ctx.strokeStyle = '#141414';
    ctx.lineWidth = 2;
    ctx.strokeRect(x - size / 2, y - size / 2, size, size);
}

// 绘制矩形
function drawRectangle(
    ctx: RenderingContext,
    x: number,
    y: number,
    width: number,
    height: number,
    fillColor: string,
) {
    if (fillColor !== 'transparent') {
        ctx.fillStyle = fillColor;
        ctx.fillRect(x - width / 2, y - height / 2, width, height);
    }
    ctx.strokeStyle = '#141414';
    ctx.lineWidth = 2;
    ctx.strokeRect(x - width / 2, y - height / 2, width, height);
}

// 绘制三角形（可指定类型：钝角、直角、锐角）
function drawTriangle(
    ctx: RenderingContext,
    x: number,
    y: number,
    size: number,
    type: string,
    fillColor: string,
) {
    ctx.beginPath();

    switch (type) {
        case 'obtuse':
            ctx.moveTo(x - size * 0.6, y - size * 0.4);
            ctx.lineTo(x + size * 0.8, y + size * 0.6);
            ctx.lineTo(x - size * 0.2, y + size * 0.4);
            break;
        case 'right':
            ctx.moveTo(x - size * 0.4, y - size * 0.4);
            ctx.lineTo(x - size * 0.4, y + size * 0.6);
            ctx.lineTo(x + size * 0.6, y + size * 0.6);
            break;
        case 'acute':
        default:
            ctx.moveTo(x, y - size * 0.5);
            ctx.lineTo(x - size * 0.5, y + size * 0.5);
            ctx.lineTo(x + size * 0.5, y + size * 0.5);
            break;
    }

    ctx.closePath();
    if (fillColor !== 'transparent') {
        ctx.fillStyle = fillColor;
        ctx.fill();
    }
    ctx.strokeStyle = '#141414';
    ctx.lineWidth = 2;
    ctx.stroke();
}

// 绘制平行四边形
function drawParallelogram(
    ctx: RenderingContext,
    x: number,
    y: number,
    width: number,
    height: number,
    fillColor: string,
) {
    const offset = width * 0.2;
    ctx.beginPath();
    ctx.moveTo(x - width / 2 + offset, y - height / 2);
    ctx.lineTo(x + width / 2 + offset, y - height / 2);
    ctx.lineTo(x + width / 2 - offset, y + height / 2);
    ctx.lineTo(x - width / 2 - offset, y + height / 2);
    ctx.closePath();
    if (fillColor !== 'transparent') {
        ctx.fillStyle = fillColor;
        ctx.fill();
    }
    ctx.strokeStyle = '#141414';
    ctx.lineWidth = 2;
    ctx.stroke();
}

// 绘制菱形
function drawDiamond(
    ctx: RenderingContext,
    x: number,
    y: number,
    size: number,
    fillColor: string,
) {
    // 参考SVG: <polygon points="50,15 70,50 50,85 30,50"/>
    // 以(x, y)为中心，size为半高，按SVG比例映射四个点
    // SVG中心(50,50)，顶点(50,15)，右(70,50)，下(50,85)，左(30,50)
    // 计算比例
    // 顶点: (0, -0.7*size)
    // 右:   (0.4*size, 0)
    // 下:   (0, 0.7*size)
    // 左:   (-0.4*size, 0)
    const topY = y - size * 0.7;
    const rightX = x + size * 0.4;
    const bottomY = y + size * 0.7;
    const leftX = x - size * 0.4;

    ctx.beginPath();
    ctx.moveTo(x, topY); // 顶点
    ctx.lineTo(rightX, y); // 右
    ctx.lineTo(x, bottomY); // 下
    ctx.lineTo(leftX, y); // 左
    ctx.closePath();
    if (fillColor !== 'transparent') {
        ctx.fillStyle = fillColor;
        ctx.fill();
    }
    ctx.strokeStyle = '#141414';
    ctx.lineWidth = 2;
    ctx.stroke();
}

// 绘制梯形
// 保证绘制的是等腰梯形：上下底居中，左右腰等长
function drawTrapezoid(
    ctx: RenderingContext,
    x: number,
    y: number,
    width: number,
    height: number,
    fillColor: string,
) {
    // topWidth 为上底宽度，width 为下底宽度
    const topWidth = width * 0.6; // 上底
    const bottomWidth = width; // 下底
    const halfHeight = height / 2;

    // 上底中心点与下底中心点重合，左右对称
    ctx.beginPath();
    // 上底左点
    ctx.moveTo(x - topWidth / 2, y - halfHeight);
    // 上底右点
    ctx.lineTo(x + topWidth / 2, y - halfHeight);
    // 下底右点
    ctx.lineTo(x + bottomWidth / 2, y + halfHeight);
    // 下底左点
    ctx.lineTo(x - bottomWidth / 2, y + halfHeight);
    ctx.closePath();
    if (fillColor !== 'transparent') {
        ctx.fillStyle = fillColor;
        ctx.fill();
    }
    ctx.strokeStyle = '#141414';
    ctx.lineWidth = 2;
    ctx.stroke();
}

// 绘制多边形
function drawPolygon(
    ctx: RenderingContext,
    x: number,
    y: number,
    radius: number,
    sides: number,
    fillColor: string,
) {
    ctx.beginPath();
    for (let i = 0; i < sides; i++) {
        const angle = (i * 2 * Math.PI) / sides - Math.PI / 2;
        const px = x + Math.cos(angle) * radius;
        const py = y + Math.sin(angle) * radius;
        if (i === 0) ctx.moveTo(px, py);
        else ctx.lineTo(px, py);
    }
    ctx.closePath();
    if (fillColor !== 'transparent') {
        ctx.fillStyle = fillColor;
        ctx.fill();
    }
    ctx.strokeStyle = '#141414';
    ctx.lineWidth = 2;
    ctx.stroke();
}

// 绘制星形（五角星等）
// 按SVG <polygon points="50,20 61,42 85,44 67,60 71,85 50,75 29,85 33,60 15,44 39,42"> 路径绘制五角星
function drawStar(
    ctx: RenderingContext,
    x: number,
    y: number,
    radius: number,
    points: number,
    fillColor: string,
) {
    // SVG原始点
    const svgPoints = [
        [50, 20],
        [61, 42],
        [85, 44],
        [67, 60],
        [71, 85],
        [50, 75],
        [29, 85],
        [33, 60],
        [15, 44],
        [39, 42],
    ];
    // SVG中心(50,50)，最大半径约为35（从50,50到15,44的距离），SVG坐标范围大致为[15,85]
    // 归一化到以(x, y)为中心，radius为最大半径
    const svgCenterX = 50;
    const svgCenterY = 50;
    const svgRadius = 35; // 50-15=35
    ctx.beginPath();
    svgPoints.forEach(([px, py], idx) => {
        const nx = x + ((px - svgCenterX) / svgRadius) * radius;
        const ny = y + ((py - svgCenterY) / svgRadius) * radius;
        if (idx === 0) ctx.moveTo(nx, ny);
        else ctx.lineTo(nx, ny);
    });
    ctx.closePath();
    if (fillColor !== 'transparent') {
        ctx.fillStyle = fillColor;
        ctx.fill();
    }
    ctx.strokeStyle = '#141414';
    ctx.lineWidth = 2;
    ctx.stroke();
}

// 绘制爱心
function drawHeart(
    ctx: RenderingContext,
    x: number,
    y: number,
    size: number,
    fillColor: string,
) {
    // 放大爱心：将原本的缩放比例从60缩小为50，使爱心整体变大
    // 以SVG路径为参考，原始SVG中心为(50,50)，宽高约为60x60
    // 这里size为整体缩放，x,y为中心点
    // SVG关键点：M50,35 C35,20 20,35 25,50 C30,65 50,80 50,80 C50,80 70,65 75,50 C80,35 65,20 50,35Z
    // 归一化函数
    const scale = 40; // 原来是60，改为50，放大
    function tx(px: number) {
        return x + ((px - 50) / scale) * size;
    }
    function ty(py: number) {
        return y + ((py - 50) / scale) * size;
    }
    ctx.beginPath();
    ctx.moveTo(tx(50), ty(35));
    ctx.bezierCurveTo(tx(35), ty(20), tx(20), ty(35), tx(25), ty(50));
    ctx.bezierCurveTo(tx(30), ty(65), tx(50), ty(80), tx(50), ty(80));
    ctx.bezierCurveTo(tx(50), ty(80), tx(70), ty(65), tx(75), ty(50));
    ctx.bezierCurveTo(tx(80), ty(35), tx(65), ty(20), tx(50), ty(35));
    ctx.closePath();
    if (fillColor !== 'transparent') {
        ctx.fillStyle = fillColor;
        ctx.fill();
    }
    ctx.strokeStyle = '#141414';
    ctx.lineWidth = 2;
    ctx.stroke();
}

// 绘制半圆
function drawSemicircle(
    ctx: RenderingContext,
    x: number,
    y: number,
    radius: number,
    fillColor: string,
) {
    const verticalOffset = radius * 0.5;
    y = y + verticalOffset;
    ctx.beginPath();
    // ctx.moveTo(x, y + verticalOffset);
    // 圆弧从左（180°，Math.PI）到右（0°），逆时针画半圆，圆弧在正上方
    ctx.arc(x, y, radius, Math.PI, 0, false);
    ctx.closePath();
    if (fillColor !== 'transparent') {
        ctx.fillStyle = fillColor;
        ctx.fill();
    }
    ctx.strokeStyle = '#141414';
    ctx.lineWidth = 2;
    ctx.stroke();
}

// 绘制扇形，圆弧在正上方
function drawSector(
    ctx: RenderingContext,
    x: number,
    y: number,
    radius: number,
    fillColor: string,
) {
    // 为了让扇形垂直方向居中，需要将整个扇形向下平移一定距离
    // 扇形的质心大约在半径的 0.6 倍处（120°扇形），这里经验值调整
    const verticalOffset = radius * 0.5;
    ctx.beginPath();
    ctx.moveTo(x, y + verticalOffset);
    // 扇形圆弧从左上(-135°)到右上(-45°)，即从 -3/4π 到 -1/4π，圆弧在正上方
    ctx.arc(
        x,
        y + verticalOffset,
        radius,
        (-3 * Math.PI) / 4,
        -Math.PI / 4,
        false,
    );
    ctx.closePath();
    if (fillColor !== 'transparent') {
        ctx.fillStyle = fillColor;
        ctx.fill();
    }
    ctx.strokeStyle = '#141414';
    ctx.lineWidth = 2;
    ctx.stroke();
}

// 绘制圆环（修正避免中间出现一条线）
function drawRing(
    ctx: RenderingContext,
    x: number,
    y: number,
    radius: number,
    fillColor: string,
) {
    const innerRadius = radius * 0.5;
    ctx.save();
    ctx.beginPath();
    // 外圆，顺时针
    ctx.arc(x, y, radius, 0, Math.PI * 2, false);
    // 关键：移动到内圆起点，避免连接线
    ctx.moveTo(x + innerRadius, y);
    // 内圆，逆时针
    ctx.arc(x, y, innerRadius, 0, Math.PI * 2, true);
    ctx.closePath();
    if (fillColor !== 'transparent') {
        ctx.fillStyle = fillColor;
        ctx.fill('evenodd');
    }
    ctx.strokeStyle = '#141414';
    ctx.lineWidth = 2;
    ctx.stroke();
    ctx.restore();
}
/**
 * 根据图形类型绘制到Canvas
 * @param ctx Canvas上下文
 * @param shape 图形对象
 * @param x 起始x坐标
 * @param y 起始y坐标
 * @param size 图形大小
 * @param fillColor 填充颜色
 */
export function drawShape(
    ctx: RenderingContext,
    shape: ShapeCard,
    x: number,
    y: number,
    size: number,
    fillColor: string,
) {
    ctx.save();
    ctx.translate(x, y);

    const radius = size / 2;
    const shouldFill = fillColor !== 'transparent';

    switch (shape.id) {
        case 'circle':
            drawCircle(
                ctx,
                0,
                0,
                radius,
                shouldFill ? fillColor : 'transparent',
            );
            break;
        case 'ellipse':
            drawEllipse(
                ctx,
                0,
                0,
                radius * 0.8,
                radius * 0.5,
                shouldFill ? fillColor : 'transparent',
            );
            break;
        case 'square':
            drawSquare(
                ctx,
                0,
                0,
                radius * 1.6,
                shouldFill ? fillColor : 'transparent',
            );
            break;
        case 'rectangle':
            drawRectangle(
                ctx,
                0,
                0,
                radius * 1.8,
                radius * 1.2,
                shouldFill ? fillColor : 'transparent',
            );
            break;
        case 'obtuse-triangle':
            drawTriangle(
                ctx,
                0,
                0,
                radius,
                'obtuse',
                shouldFill ? fillColor : 'transparent',
            );
            break;
        case 'right-triangle':
            drawTriangle(
                ctx,
                0,
                0,
                radius,
                'right',
                shouldFill ? fillColor : 'transparent',
            );
            break;
        case 'acute-triangle':
            drawTriangle(
                ctx,
                0,
                0,
                radius,
                'acute',
                shouldFill ? fillColor : 'transparent',
            );
            break;
        case 'parallelogram':
            drawParallelogram(
                ctx,
                0,
                0,
                radius * 1.6,
                radius * 1.2,
                shouldFill ? fillColor : 'transparent',
            );
            break;
        case 'diamond':
            drawDiamond(
                ctx,
                0,
                0,
                radius,
                shouldFill ? fillColor : 'transparent',
            );
            break;
        case 'trapezoid':
            drawTrapezoid(
                ctx,
                0,
                0,
                radius * 1.6,
                radius * 1.2,
                shouldFill ? fillColor : 'transparent',
            );
            break;
        case 'pentagon':
            drawPolygon(
                ctx,
                0,
                0,
                radius,
                5,
                shouldFill ? fillColor : 'transparent',
            );
            break;
        case 'hexagon':
            drawPolygon(
                ctx,
                0,
                0,
                radius,
                6,
                shouldFill ? fillColor : 'transparent',
            );
            break;
        case 'pentagram':
            drawStar(
                ctx,
                0,
                0,
                radius,
                5,
                shouldFill ? fillColor : 'transparent',
            );
            break;
        case 'heart':
            drawHeart(
                ctx,
                0,
                0,
                radius,
                shouldFill ? fillColor : 'transparent',
            );
            break;
        case 'semicircle':
            drawSemicircle(
                ctx,
                0,
                0,
                radius,
                shouldFill ? fillColor : 'transparent',
            );
            break;
        case 'sector':
            drawSector(
                ctx,
                0,
                0,
                radius,
                shouldFill ? fillColor : 'transparent',
            );
            break;
        case 'ring':
            drawRing(ctx, 0, 0, radius, shouldFill ? fillColor : 'transparent');
            break;
        default:
            // 默认绘制圆形
            drawCircle(
                ctx,
                0,
                0,
                radius,
                shouldFill ? fillColor : 'transparent',
            );
    }

    ctx.restore();
}