import Sprite from '../base/sprite';
import { SCREEN_WIDTH, SCREEN_HEIGHT, SAFE_AREA_TOP, IS_PAD } from '../render';

// ─── 泡泡大小与列数适配 ─────────────────────────────────────
// 手机：R = SW/22，11 列泡泡刚好铺满（与原始效果完全一致）
// iPad：R 保持与手机相同的视觉大小（基于高度换算），
//       屏幕更宽所以能容纳更多列泡泡，自动铺满
//
// 手机基准：R/SH = 1/22 * SW/SH ≈ 1/22 * 9/16 ≈ 1/39
// iPad 上用 SH/40 保证泡泡不会太大（略小于手机，体验更佳）
export const BUBBLE_RADIUS = IS_PAD
  ? SCREEN_HEIGHT / 40
  : SCREEN_WIDTH / 22;
const ROW_HEIGHT = BUBBLE_RADIUS * Math.sqrt(3);

// 偶数行列数 = 屏幕宽度能容纳多少个泡泡
// 手机：floor(SW / (2 * SW/22)) = 11 ← 不变
// iPad：floor(SW / (2 * SH/40)) ≈ 14~15 列
export const EVEN_ROW_COLS = Math.floor(SCREEN_WIDTH / (BUBBLE_RADIUS * 2));
// 奇数行比偶数行少 1 列（六边形交错排列）
export const ODD_ROW_COLS = EVEN_ROW_COLS - 1;

// 网格水平偏移量，让泡泡居中（处理除不尽的余量）
export const GRID_OFFSET_X = (SCREEN_WIDTH - EVEN_ROW_COLS * 2 * BUBBLE_RADIUS) / 2;

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

/**
 * 精灵图 bubble.png（1400×1400）中每个球的裁剪区域。
 * 3×3 排列，从左上按行序编号 1-9：
 *   1=红  2=橙  3=黄
 *   4=黄绿 5=绿 6=青蓝
 *   7=紫  8=粉  9=奶白
 *
 * SPRITE_REGIONS 的索引对应 colorIdx，映射到精灵图中正确的球：
 *   colorIdx 1=蓝    → 精灵图位置6(右中)
 *   colorIdx 2=绿    → 精灵图位置5(中中)
 *   colorIdx 3=奶白  → 精灵图位置9(右下)
 *   colorIdx 4=紫    → 精灵图位置7(左下)
 *   colorIdx 5=黄绿  → 精灵图位置4(左中)
 *   colorIdx 6=黄    → 精灵图位置3(右上)
 *   colorIdx 7=粉    → 精灵图位置8(中下)
 *   colorIdx 8=橙    → 精灵图位置2(中上)
 *   colorIdx 9=红    → 精灵图位置1(左上)
 */
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(左上)
];

// 精灵图（模块级单例，只加载一次）
const _spriteImg = wx.createImage();
_spriteImg.src = 'images/bubble.png';

/**
 * 使用精灵图绘制泡泡，圆形裁剪确保显示完美圆形。
 *
 * @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;
  const [sx, sy, sw, sh] = region;

  // 裁剪为圆形，防止精灵图白色背景溢出
  ctx.save();
  ctx.beginPath();
  ctx.arc(cx, cy, R, 0, Math.PI * 2);
  ctx.clip();

  ctx.drawImage(_spriteImg, sx, sy, sw, sh, cx - R, cy - R, R * 2, R * 2);

  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();
}

/**
 * 根据当前得分动态返回可用颜色种类数，分数越高颜色越多，难度递增：
 *   0     ~ 9999  → 3 种（蓝、绿、奶白）
 *   10000 ~ 19999 → 4 种（+ 紫）
 *   20000 ~ 29999 → 5 种（+ 黄绿）
 *   30000 ~ 39999 → 6 种（+ 黄）
 *   40000 ~ 49999 → 7 种（+ 粉）
 *   50000 ~ 59999 → 8 种（+ 橙）
 *   60000+        → 9 种（+ 红）
 */
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)
 * 偶数行(0,2,4...)：11 个泡泡，x = col * 2R + R
 * 奇数行(1,3,5...)：10 个泡泡，x = col * 2R + 2R（右移一个 R）
 */
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 * ROW_HEIGHT + R + SAFE_AREA_TOP;
  return { x, y };
}

/**
 * 单个泡泡类，继承 Sprite
 * color: 1-9 代表不同颜色，0 表示空格
 */
export default class Bubble extends Sprite {
  constructor(row, col, color) {
    super('', BUBBLE_RADIUS * 2, BUBBLE_RADIUS * 2, 0, 0);

    this.row = row;
    this.col = col;
    this.color = color;

    this._syncPosition();
  }

  /**
   * 根据网格坐标同步屏幕坐标（x, y 为圆心）
   */
  _syncPosition() {
    const { x, y } = gridToScreen(this.row, this.col);
    this.x = x;
    this.y = y;
  }

  /**
   * 移动到新的网格位置
   */
  moveTo(row, col) {
    this.row = row;
    this.col = col;
    this._syncPosition();
  }

  /**
   * 用 Canvas 绘制 3D 光泽泡泡
   */
  render(ctx) {
    if (!this.visible || this.color === 0) return;
    drawBubble3D(ctx, this.x, this.y, BUBBLE_RADIUS, this.color);
  }
}
