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) {
    ctx.beginPath();
    ctx.moveTo(x, y - size);
    ctx.lineTo(x + size, y);
    ctx.lineTo(x, y + size);
    ctx.lineTo(x - size, 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();
}