import Taro from "@tarojs/taro";
import { View, Canvas } from "@tarojs/components";
import { forwardRef, useImperativeHandle } from "react";
import shareLogoSvg from "@/static/ntrp/ntrp_share_logo.png";
import docCopyPng from "@/static/ntrp/ntrp_doc_copy.png";
import { OSS_BASE_URL } from "@/config/api";

interface RadarChartV2Props {
  data: [string, number][];
  title?: string;
  ntrpLevel?: string;
  levelDescription?: string;
  avatarUrl?: string;
  qrCodeUrl?: string;
  bottomText?: string;
}

export interface RadarChartV2Ref {
  generateImage: () => Promise<string>;
  generateFullImage: (options: {
    title?: string;
    ntrpLevel?: string;
    levelDescription?: string;
    avatarUrl?: string;
    qrCodeUrl?: string;
    bottomText?: string;
    width?: number;
    height?: number;
  }) => Promise<string>;
}

const RadarChartV2 = forwardRef<RadarChartV2Ref, RadarChartV2Props>((props, ref) => {
  const { data } = props;

  const maxValue = 100;
  const levels = 5;

  // 在 exportCanvasV2 中绘制雷达图的函数
  function drawRadarChart(ctx: CanvasRenderingContext2D, radarX: number, radarY: number, radarSize: number) {
    // 雷达图中心点位置（radarSize 已经是2倍图尺寸）
    const center = { 
      x: radarX + radarSize / 2,
      y: radarY + radarSize / 2
    };
    
    // 计算实际半径（radarSize 是直径，半径是直径的一半）
    const radius = radarSize / 2;
    
    // 启用抗锯齿
    ctx.imageSmoothingEnabled = true;
    ctx.imageSmoothingQuality = 'high';
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';

    // 解析数据
      const { texts, vals } = data.reduce(
        (res, item) => {
          const [text, val] = item;
          return {
            texts: [...res.texts, text],
            vals: [...res.vals, val],
          };
        },
        { texts: [], vals: [] }
      );

        // === 绘制圆形网格 ===
        for (let i = levels; i >= 1; i--) {
          const r = (radius / levels) * i;
          ctx.beginPath();
          ctx.arc(center.x, center.y, r, 0, Math.PI * 2);
          if (i % 2 === 1) {
            ctx.fillStyle = "#fff";
            ctx.fill();
          } else {
            ctx.fillStyle = "#CAFCF0";
            ctx.fill();
          }
      // 根据层级设置不同的线条颜色
          if (i === 1) {
            ctx.strokeStyle = "#E5E5E5";
          } else if (i <= 3) {
            ctx.strokeStyle = "#E0E0E0";
          } else {
            ctx.strokeStyle = "#D5D5D5";
          }
          ctx.lineWidth = 1 * (radarSize / 200); // 根据2倍图调整线宽
          ctx.stroke();
        }

        // === 坐标轴 & 标签 ===
    texts.forEach((label, i) => {
      const angle = ((Math.PI * 2) / texts.length) * i - Math.PI / 2;
          const x = center.x + radius * Math.cos(angle);
          const y = center.y + radius * Math.sin(angle);

          // 坐标轴
          ctx.beginPath();
          ctx.moveTo(center.x, center.y);
          ctx.lineTo(x, y);
          ctx.strokeStyle = "#E0E0E0";
          ctx.lineWidth = 1 * (radarSize / 200); // 根据2倍图调整线宽
          ctx.stroke();

      // 标签：沿轴线外侧延伸，文字中心对齐轴线端点（与 index.tsx 一致）
          const labelOffset = 28 * (radarSize / 200); // 文字距离圆圈的偏移量（2倍图）
          const textX = center.x + (radius + labelOffset) * Math.cos(angle);
          const textY = center.y + (radius + labelOffset) * Math.sin(angle);

          ctx.font = `${12 * (radarSize / 200)}px sans-serif`; // 根据2倍图调整字体大小
          ctx.fillStyle = "#333";
          ctx.textBaseline = "middle";
          ctx.textAlign = "center";

          ctx.fillText(label, textX, textY);
        });

        // === 数据区域 ===
        const baseRadius = (radius / levels) * 1; // 第二个环为起点
        const usableRadius = radius - baseRadius;

        ctx.beginPath();
    vals.forEach((val, i) => {
      const angle = ((Math.PI * 2) / texts.length) * i - Math.PI / 2;
          const r = baseRadius + (val / maxValue) * usableRadius;
          const x = center.x + r * Math.cos(angle);
          const y = center.y + r * Math.sin(angle);

          if (i === 0) ctx.moveTo(x, y);
          else ctx.lineTo(x, y);
        });
        ctx.closePath();
        ctx.fillStyle = "rgba(0,200,180,0.3)";
        ctx.fill();
        ctx.strokeStyle = "#00c8b4";
        ctx.lineWidth = 3 * (radarSize / 200); // 根据2倍图调整线宽
        ctx.stroke();
  }

  // 加载图片工具函数
  function loadImage(canvas: any, src: string): Promise<any> {
    return new Promise((resolve, reject) => {
      const img = canvas.createImage();
      img.onload = () => resolve(img);
      img.onerror = (err) => reject(err);
      img.src = src;
    });
  }

  // 获取图片信息（宽高）
  function getImageInfo(src: string): Promise<{ width: number; height: number }> {
    return new Promise((resolve, reject) => {
      (Taro as any).getImageInfo({
        src,
        success: (res: any) => resolve({ width: res.width, height: res.height }),
        fail: reject,
      });
    });
  }


  // 绘制圆角矩形
  function roundRect(ctx: any, x: number, y: number, width: number, height: number, radius: number) {
    ctx.beginPath();
    ctx.moveTo(x + radius, y);
    ctx.lineTo(x + width - radius, y);
    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
    ctx.lineTo(x + width, y + height - radius);
    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
    ctx.lineTo(x + radius, y + height);
    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
    ctx.lineTo(x, y + radius);
    ctx.quadraticCurveTo(x, y, x + radius, y);
    ctx.closePath();
  }

  // 格式化 NTRP 显示
  function formatNtrpDisplay(level: string): string {
    if (!level) return "";
    // 检查是否包含 + 号
    const hasPlus = level.includes("+");
    const num = parseFloat(level);
    if (isNaN(num)) return level;
    const formatted = num % 1 === 0 ? num.toFixed(0) : num.toFixed(1);
    return hasPlus ? `${formatted}+` : formatted;
  }

  useImperativeHandle(ref, () => ({
    // 生成原始雷达图（已废弃，现在直接在 exportCanvasV2 中绘制）
    generateImage: () =>
      Promise.resolve(""),
    
    // 生成完整图片（包含标题、雷达图、底部文字和二维码）
    generateFullImage: async (options: {
      title?: string;
      ntrpLevel?: string;
      levelDescription?: string;
      avatarUrl?: string;
      qrCodeUrl?: string;
      bottomText?: string;
      width?: number;
      height?: number;
    }) => {
      return new Promise(async (resolve, reject) => {
        try {
          // 使用2倍图提高图片质量
          const scale = 2; // 2倍图
          const baseWidth = 350; // 基础宽度
          const baseHeight = 600; // 基础高度
          const width = baseWidth * scale; // 实际宽度 700
          const height = baseHeight * scale; // 实际高度 1200

          // 创建导出画布
          const query = Taro.createSelectorQuery();
          query
            .select("#exportCanvasV2")
            .fields({ node: true, size: true })
            .exec(async (res) => {
              if (!res || !res[0]) {
                reject(new Error("Canvas not found"));
                return;
              }

              const canvas = res[0].node;
              const ctx = canvas.getContext("2d");
              // 使用2倍图尺寸
              canvas.width = width;
              canvas.height = height;

              // 启用抗锯齿
              ctx.imageSmoothingEnabled = true;
              ctx.imageSmoothingQuality = 'high';

              // 绘制背景 - 使用 share_bg.png 背景图，撑满整个画布（从 OSS 动态加载）
              try {
                const shareBgUrl = `${OSS_BASE_URL}/images/share_bg.png`;
                const bgImg = await loadImage(canvas, shareBgUrl);
                ctx.drawImage(bgImg, 0, 0, width, height);
              } catch (error) {
                console.error("Failed to load background image:", error);
                // 如果加载失败，使用白色背景作为兜底
                ctx.fillStyle = "#FFFFFF";
                ctx.fillRect(0, 0, width, height);
              }

              // 根据设计稿调整内边距和布局（2倍图）
              const topPadding = 24 * scale; // 设计稿顶部内边距
              const sidePadding = 28 * scale; // 设计稿左右内边距（Frame 1912055062 的 x: 28）
              
              let currentY = topPadding;

              // 绘制用户头像和装饰图片 - 根据设计稿尺寸（2倍图）
              if (options.avatarUrl) {
                try {
                  const avatarSize = 43.46 * scale; // 设计稿头像尺寸
                  const avatarImg = await loadImage(canvas, options.avatarUrl);
                  const avatarInfo = await getImageInfo(options.avatarUrl);
                  
                  // 头像区域总宽度（头像 + 装饰图片重叠部分）
                  const avatarWrapWidth = 84.7 * scale; // 设计稿 Frame 1912055063 宽度
                  const avatarX = sidePadding + (294 * scale - avatarWrapWidth) / 2; // 294 是 Frame 1912055062 宽度，居中
                  const avatarY = currentY;
                  
                  // 绘制头像圆形背景
                  ctx.save();
                  ctx.beginPath();
                  ctx.arc(avatarX + avatarSize / 2, avatarY + avatarSize / 2, avatarSize / 2, 0, Math.PI * 2);
                  ctx.fillStyle = "#FFFFFF";
                  ctx.fill();
                  ctx.strokeStyle = "#EFEFEF";
                  ctx.lineWidth = 1 * scale;
                  ctx.stroke();
                  
                  // 计算头像绘制尺寸，保持宽高比
                  const innerSize = avatarSize - 1.94 * scale; // 内部可用尺寸
                  const avatarAspectRatio = avatarInfo.width / avatarInfo.height;
                  let drawWidth = innerSize;
                  let drawHeight = innerSize;
                  let drawX = avatarX + 0.97 * scale;
                  let drawY = avatarY + 0.97 * scale;
                  
                  // 根据宽高比调整尺寸，保持比例不变形
                  if (avatarAspectRatio > 1) {
                    // 图片更宽，以高度为准
                    drawWidth = innerSize * avatarAspectRatio;
                    drawX = avatarX + avatarSize / 2 - drawWidth / 2;
                  } else {
                    // 图片更高或正方形，以宽度为准
                    drawHeight = innerSize / avatarAspectRatio;
                    drawY = avatarY + avatarSize / 2 - drawHeight / 2;
                  }
                  
                  // 绘制头像（圆形裁剪）
                  ctx.beginPath();
                  ctx.arc(avatarX + avatarSize / 2, avatarY + avatarSize / 2, avatarSize / 2 - 0.97 * scale, 0, Math.PI * 2);
                  ctx.clip();
                  ctx.drawImage(avatarImg, drawX, drawY, drawWidth, drawHeight);
                  ctx.restore();
                  
                  // 绘制装饰图片（DocCopy）- 在头像右侧
                  const addonSize = 42 * scale; // 装饰图片和头像一样大
                  const addonX = avatarX + avatarSize - 5 * scale; // 重叠部分
                  const addonY = avatarY;
                  const addonRotation = 8 * (Math.PI / 180); // 旋转 8 度
                  
                  try {
                    const docCopyImg = await loadImage(canvas, docCopyPng);
                    ctx.save();
                    
                    // 移动到旋转中心
                    const centerX = addonX + addonSize / 2;
                    const centerY = addonY + addonSize / 2;
                    ctx.translate(centerX, centerY);
                    ctx.rotate(addonRotation);
                    
                    // 绘制装饰图片背景（圆角矩形，带渐变）
                    const borderRadius = 9.66 * scale; // 设计稿圆角
                    ctx.fillStyle = "#FFFFFF";
                    ctx.beginPath();
                    roundRect(ctx, -addonSize / 2, -addonSize / 2, addonSize, addonSize, borderRadius);
                    ctx.fill();
                    
                    // 添加渐变背景色
                    ctx.globalAlpha = 0.2;
                    ctx.fillStyle = "rgba(89, 255, 214, 1)";
                    ctx.fill();
                    ctx.globalAlpha = 1.0;
                    
                    ctx.strokeStyle = "#FFFFFF";
                    ctx.lineWidth = 1.93 * scale; // 设计稿 strokeWeight
                    ctx.stroke();
                    
                    // 绘制装饰图片
                    const docSize = 26.18 * scale; // 设计稿内部图片尺寸
                    const docRotation = -7 * (Math.PI / 180); // 内部旋转 -7 度
                    ctx.rotate(docRotation);
                    ctx.drawImage(docCopyImg, -docSize / 2, -docSize / 2, docSize, docSize);
                    ctx.restore();
                  } catch (error) {
                    console.error("Failed to load docCopy image:", error);
                  }
                  
                  currentY += (48 + 20) * scale; // 头像区域高度 + gap
                } catch (error) {
                  console.error("Failed to load avatar image:", error);
                }
              }

              // 绘制文字区域 - 根据设计稿样式，居中对齐（2倍图）
              const textCenterX = sidePadding + (294 * scale) / 2; // Frame 1912055062 的中心
              const textGap = 6 * scale; // 设计稿 gap: 6px
              
              // 绘制标题 - 14px, font-weight: 300, line-height: 1.2（2倍图）
              if (options.title) {
                ctx.fillStyle = "#000000";
                ctx.font = `300 ${14 * scale}px Noto Sans SC, sans-serif`;
                ctx.textAlign = "center";
                ctx.textBaseline = "top";
                ctx.fillText(options.title, textCenterX, currentY);
                currentY += 14 * 1.2 * scale + textGap; // line-height: 1.2 + gap
              }

              // 绘制 NTRP 等级 - 36px, font-weight: 900, "NTRP" 黑色，等级数字 #00E5AD（2倍图）
              if (options.ntrpLevel) {
                ctx.font = `900 ${36 * scale}px Noto Sans SC, sans-serif`;
                ctx.textBaseline = "top";
                
                const ntrpText = "NTRP";
                const levelText = formatNtrpDisplay(options.ntrpLevel);
                const ntrpWidth = ctx.measureText(ntrpText).width;
                const levelWidth = ctx.measureText(levelText).width;
                const totalWidth = ntrpWidth + levelWidth; // 设计稿中紧挨着
                const startX = textCenterX - totalWidth / 2;
                
                // 绘制 "NTRP"（黑色）
                ctx.fillStyle = "#000000";
                ctx.textAlign = "left";
                ctx.fillText(ntrpText, startX, currentY);
                
                // 绘制等级数字（#00E5AD）
                ctx.fillStyle = "#00E5AD";
                ctx.fillText(levelText, startX + ntrpWidth, currentY);
                
                currentY += 36 * 1.222 * scale + textGap; // line-height: 1.222 + gap
              }

              // 绘制描述文本 - 16px, font-weight: 600, line-height: 1.4（2倍图）
              if (options.levelDescription) {
                ctx.fillStyle = "#000000";
                ctx.font = `600 ${16 * scale}px PingFang SC, sans-serif`;
                ctx.textAlign = "center";
                ctx.textBaseline = "top";
                ctx.fillText(options.levelDescription, textCenterX, currentY);
                // 计算到雷达图的间距：雷达图 y: 252 - 当前 Y
                const radarY = 252 * scale; // 设计稿雷达图位置
                currentY = radarY; // 直接设置到雷达图位置
              }

              // 直接绘制雷达图 - 根据设计稿调整尺寸和位置（2倍图）
              const radarSize = 200 * scale; // 固定雷达图尺寸为 200*200
              const radarX = 75 * scale; // 设计稿雷达图 x 位置
              const radarY = currentY;
              // 直接在 exportCanvasV2 中绘制雷达图
              drawRadarChart(ctx, radarX, radarY, radarSize);
              currentY += radarSize; // 雷达图高度

              // 绘制底部区域 - 根据设计稿调整（2倍图）
              const qrSize = 64 * scale; // 设计稿二维码尺寸：64*64
              const qrX = 276 * scale; // 设计稿二维码 x 位置
              const qrY = 523 * scale; // 设计稿二维码 y 位置
              
              const bottomTextContent = options.bottomText || "长按识别二维码，快来加入，有你就有场！";
              
              // 绘制底部文字 - 设计稿：fontSize: 12, fontWeight: 400, line-height: 1.5（2倍图）
              ctx.fillStyle = "rgba(0, 0, 0, 0.45)";
              ctx.font = `400 ${12 * scale}px Noto Sans SC, sans-serif`;
              ctx.textAlign = "left";
              ctx.textBaseline = "top";
              
              const textX = 20 * scale; // 设计稿文字 x 位置
              const maxTextWidth = qrX - textX - 10 * scale; // 到二维码的间距
              
              // 计算文字行数
              const bottomWords = bottomTextContent.split("");
              let bottomLine = "";
              let textLines: string[] = [];
              const lineHeight = 12 * 1.5 * scale; // fontSize * line-height
              
              for (let i = 0; i < bottomWords.length; i++) {
                const testBottomLine = bottomLine + bottomWords[i];
                const metrics = ctx.measureText(testBottomLine);
                if (metrics.width > maxTextWidth && i > 0) {
                  textLines.push(bottomLine);
                  bottomLine = bottomWords[i];
                } else {
                  bottomLine = testBottomLine;
                }
              }
              if (bottomLine) {
                textLines.push(bottomLine);
              }
              
              // 计算文字总高度
              const textTotalHeight = textLines.length * lineHeight;
              // 计算二维码底部位置
              const qrBottomY = qrY + qrSize;
              // 让文字底部和二维码底部对齐
              const textY = qrBottomY - textTotalHeight;
              
              // 绘制顶部标题和图标 - 设计稿 Frame 2036081426（2倍图）
              // 图标应该在文字上方，gap: 4px
              const iconGap = 4 * scale; // 图标和文字之间的间距
              const topTitleX = textX;
              
              // 绘制上面的标题 logo
              try {
                const iconSize = 28 * scale;
                const iconImg = await loadImage(canvas, shareLogoSvg);
                // 图标位置：文字顶部上方 iconSize + gap
                const iconY = textY - iconSize - iconGap;
                ctx.drawImage(iconImg, topTitleX, iconY, 235 * scale, iconSize);
              } catch (error) {
                console.error("Failed to load icon:", error);
              }
              
              // 绘制底部文字
              textLines.forEach((lineText, index) => {
                ctx.fillText(lineText, textX, textY + index * lineHeight);
              });
              
              
              // 绘制二维码 - 设计稿位置（带白色背景、边框、阴影和圆角）
              
              if (options.qrCodeUrl) {
                try {
                  const qrImg = await loadImage(canvas, options.qrCodeUrl);
                  
                  // 二维码样式参数（2倍图）
                  const borderWidth = 2 * scale; // 边框宽度 2px
                  const borderRadius = 10 * scale; // 圆角 10px
                  const shadowOffsetX = 0; // 阴影 X 偏移
                  const shadowOffsetY = 1.04727 * scale; // 阴影 Y 偏移 1.04727px
                  const shadowBlur = 9.42545 * scale; // 阴影模糊 9.42545px
                  const shadowColor = "rgba(0, 0, 0, 0.12)"; // 阴影颜色
                  
                  // 二维码实际绘制区域（留出边框空间）
                  const qrInnerSize = qrSize - borderWidth * 2;
                  const qrInnerX = qrX + borderWidth;
                  const qrInnerY = qrY + borderWidth;
                  
                  // 保存上下文状态
                  ctx.save();
                  
                  // 设置阴影
                  ctx.shadowOffsetX = shadowOffsetX;
                  ctx.shadowOffsetY = shadowOffsetY;
                  ctx.shadowBlur = shadowBlur;
                  ctx.shadowColor = shadowColor;
                  
                  // 绘制白色背景（圆角矩形）
                  ctx.fillStyle = "#FFFFFF";
                  roundRect(ctx, qrX, qrY, qrSize, qrSize, borderRadius);
                  ctx.fill();
                  
                  // 绘制白色边框
                  ctx.strokeStyle = "#FFFFFF";
                  ctx.lineWidth = borderWidth;
                  roundRect(ctx, qrX, qrY, qrSize, qrSize, borderRadius);
                  ctx.stroke();
                  
                  // 清除阴影（二维码图片不需要阴影）
                  ctx.shadowOffsetX = 0;
                  ctx.shadowOffsetY = 0;
                  ctx.shadowBlur = 0;
                  ctx.shadowColor = "transparent";
                  
                  // 绘制二维码图片（在圆角矩形内）
                  ctx.save();
                  // 创建圆角裁剪区域
                  roundRect(ctx, qrInnerX, qrInnerY, qrInnerSize, qrInnerSize, borderRadius - borderWidth);
                  ctx.clip();
                  // 绘制二维码图片
                  ctx.drawImage(qrImg, qrInnerX, qrInnerY, qrInnerSize, qrInnerSize);
                  ctx.restore();
                  
                  // 恢复上下文状态
                  ctx.restore();
                } catch (error) {
                  console.error("Failed to load QR code:", error);
                }
              }

              // 导出图片
              Taro.canvasToTempFilePath({
                canvas,
                fileType: 'png',
                quality: 1,
                success: (res) => {
                  resolve(res.tempFilePath);
                },
                fail: (err) => {
                  reject(err);
                },
              });
            });
        } catch (error) {
          reject(error);
        }
      });
    },
  }));

  return (
    <View>
      {/* 隐藏的导出画布 - 2倍图尺寸 */}
      <Canvas
        type="2d"
        id="exportCanvasV2"
        style={{ position: "fixed", top: "-9999px", left: "-9999px", width: "700px", height: "1200px" }}
      />
    </View>
  );
});

RadarChartV2.displayName = "RadarChartV2";

export default RadarChartV2;