/**
 * 单泡泡绘制 + 颜色常量（移植自 minigame-1/js/bubble/bubble.js）
 * 去除 wx.createImage，使用浏览器 new Image()
 */
import { SCREEN_WIDTH, SAFE_AREA_TOP } from '../constants.js'

// ─── 动态列数适配 ────────────────────────────────────────────
// 默认 11 列（手机端），iPad 端可能 14~15 列
// 大屏端从收到的 grid 数据推算列数，动态调整泡泡大小
export let BUBBLE_RADIUS = SCREEN_WIDTH / 22
let ROW_HEIGHT = BUBBLE_RADIUS * Math.sqrt(3)
let GRID_OFFSET_X = 0
let _evenCols = 11

/**
 * 根据偶数行列数重新计算泡泡大小和网格偏移
 * 在每帧渲染前调用，从 grid 数据推算列数
 * @param {number} evenCols 偶数行列数
 */
export function configureBubbleLayout(evenCols) {
  if (evenCols === _evenCols) return
  _evenCols = evenCols
  BUBBLE_RADIUS = SCREEN_WIDTH / (evenCols * 2)
  ROW_HEIGHT = BUBBLE_RADIUS * Math.sqrt(3)
  GRID_OFFSET_X = (SCREEN_WIDTH - evenCols * 2 * BUBBLE_RADIUS) / 2
}

/** 获取当前泡泡半径（供需要实时值的模块使用） */
export function getBubbleRadius() { return BUBBLE_RADIUS }
/** 获取当前网格偏移 */
export function getGridOffsetX() { return GRID_OFFSET_X }

/**
 * 9 种泡泡颜色（颜色索引 1-9），用于爆炸粒子效果取色。
 * 当前统一顺序：
 *   1 蓝
 *   2 绿
 *   3 奶白
 *   4 紫
 *   5 黄绿
 *   6 黄
 *   7 粉
 *   8 橙
 *   9 红
 */
export const BUBBLE_COLORS = [
  '',
  '#2BC8E8',    // 1 蓝
  '#1DB85A',    // 2 绿
  '#D8D0B0',    // 3 奶白
  '#8B35E0',    // 4 紫
  '#80C020',    // 5 黄绿
  '#E8C000',    // 6 黄
  '#E060A0',    // 7 粉
  '#F07820',    // 8 橙
  '#E83030',    // 9 红
]

/**
 * 精灵图 bubble.png（1400×1400）中每个球的裁剪区域
 * 索引对应 colorIdx，映射到精灵图中正确的球
 */
const SPRITE_REGIONS = [
  null,
  [1004, 562, 297, 296],   // 1 蓝     ← 精灵图位置6(右中)
  [581,  562, 297, 296],   // 2 绿     ← 精灵图位置5(中中)
  [1004, 965, 297, 297],   // 3 奶白   ← 精灵图位置9(右下)
  [159,  965, 296, 297],   // 4 紫     ← 精灵图位置7(左下)
  [159,  562, 296, 296],   // 5 黄绿   ← 精灵图位置4(左中)
  [1004, 158, 297, 297],   // 6 黄     ← 精灵图位置3(右上)
  [581,  965, 297, 297],   // 7 粉     ← 精灵图位置8(中下)
  [581,  158, 297, 297],   // 8 橙     ← 精灵图位置2(中上)
  [159,  158, 296, 297],   // 9 红     ← 精灵图位置1(左上)
]

// 浏览器端：使用 new Image() 加载精灵图
const spriteImg = new Image()
spriteImg.src = '/images/bubble.png'

/**
 * 使用精灵图绘制泡泡，圆形裁剪确保显示完美圆形
 * 若图片未加载则用 BUBBLE_COLORS 绘制实心圆作为回退
 *
 * @param {CanvasRenderingContext2D} ctx
 * @param {number} cx 圆心 x
 * @param {number} cy 圆心 y
 * @param {number} R 半径
 * @param {number} colorIdx 颜色索引 1-9
 */
export function drawBubble3D(ctx, cx, cy, R, colorIdx) {
  const region = SPRITE_REGIONS[colorIdx]
  if (!region) return

  ctx.save()
  ctx.beginPath()
  ctx.arc(cx, cy, R, 0, Math.PI * 2)
  ctx.clip()

  if (spriteImg.complete && spriteImg.naturalWidth > 0) {
    const [sx, sy, sw, sh] = region
    ctx.drawImage(spriteImg, sx, sy, sw, sh, cx - R, cy - R, R * 2, R * 2)
  } else {
    ctx.fillStyle = BUBBLE_COLORS[colorIdx] || '#ccc'
    ctx.fill()
  }

  ctx.restore()

  ctx.save()
  ctx.beginPath()
  ctx.arc(cx, cy, R - 0.5, 0, Math.PI * 2)
  ctx.strokeStyle = 'rgba(0,0,0,0.15)'
  ctx.lineWidth = 1.0
  ctx.stroke()
  ctx.restore()
}

/**
 * 根据当前得分动态返回可用颜色种类数
 */
export function getActiveColorCount(score) {
  if (score >= 60000) return 9
  if (score >= 50000) return 8
  if (score >= 40000) return 7
  if (score >= 30000) return 6
  if (score >= 20000) return 5
  if (score >= 10000) return 4
  return 3
}

/**
 * 将网格坐标 (row, col) 转换为屏幕中心坐标 (x, y)
 */
export function gridToScreen(row, col) {
  const R = BUBBLE_RADIUS
  const x = GRID_OFFSET_X + (row % 2 === 0 ? col * 2 * R + R : col * 2 * R + 2 * R)
  const y = ROW_HEIGHT * row + R + SAFE_AREA_TOP
  return { x, y }
}
