import { SCREEN_WIDTH, SCREEN_HEIGHT, UI_BASE } from '../render';

/**
 * 等待其他玩家完成游戏的画面
 * 游戏结束后、最终结果出来前显示
 */
export default class WaitingResultScreen {
  constructor({ myScore, finishedCount, totalCount }) {
    this.myScore = myScore || 0;
    this.finishedCount = finishedCount || 1;
    this.totalCount = totalCount || 2;
    this.visible = true;
    this._frame = 0;
    this._dotCount = 0;
    this._dotTimer = 0;
  }

  /**
   * 更新进度（收到 room:playerFinished 时调用）
   */
  updateProgress(finishedCount, totalCount) {
    this.finishedCount = finishedCount;
    this.totalCount = totalCount;
  }

  destroy() {
    this.visible = false;
  }

  render(ctx) {
    if (!this.visible) return;
    this._frame++;
    this._dotTimer++;
    if (this._dotTimer >= 30) {
      this._dotTimer = 0;
      this._dotCount = (this._dotCount + 1) % 4;
    }

    this._drawBg(ctx);
    this._drawContent(ctx);
  }

  _drawBg(ctx) {
    // 深色渐变背景
    const g = ctx.createLinearGradient(0, 0, 0, SCREEN_HEIGHT);
    g.addColorStop(0, '#1a0f2e');
    g.addColorStop(0.5, '#251240');
    g.addColorStop(1, '#1a0f2e');
    ctx.fillStyle = g;
    ctx.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);

    // 装饰星点
    ctx.fillStyle = 'rgba(139,92,246,0.12)';
    for (let i = 0; i < 30; i++) {
      const x = (i * 79 + this._frame * 0.1) % SCREEN_WIDTH;
      const y = (i * 53 + 60) % SCREEN_HEIGHT;
      const r = 1 + (i % 3);
      ctx.beginPath();
      ctx.arc(x, y, r, 0, Math.PI * 2);
      ctx.fill();
    }
  }

  _drawContent(ctx) {
    const cx = SCREEN_WIDTH / 2;
    const cy = SCREEN_HEIGHT / 2;

    // 你的分数
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    ctx.font = `${UI_BASE * 0.035}px Arial`;
    ctx.fillStyle = 'rgba(196,181,253,0.7)';
    ctx.fillText('你的得分', cx, cy - SCREEN_HEIGHT * 0.15);

    ctx.font = `bold ${UI_BASE * 0.12}px Arial`;
    const sg = ctx.createLinearGradient(cx - 50, cy - 80, cx + 50, cy - 40);
    sg.addColorStop(0, '#FDE68A');
    sg.addColorStop(0.5, '#FCD34D');
    sg.addColorStop(1, '#F59E0B');
    ctx.fillStyle = sg;
    ctx.shadowColor = 'rgba(251,191,36,0.5)';
    ctx.shadowBlur = 20;
    ctx.fillText(String(this.myScore), cx, cy - SCREEN_HEIGHT * 0.06);
    ctx.shadowBlur = 0;

    // 等待动画 - 旋转圆环
    const ringY = cy + SCREEN_HEIGHT * 0.06;
    const ringR = UI_BASE * 0.05;
    const angle = (this._frame * 0.05) % (Math.PI * 2);

    ctx.save();
    ctx.strokeStyle = 'rgba(139,92,246,0.3)';
    ctx.lineWidth = 3;
    ctx.beginPath();
    ctx.arc(cx, ringY, ringR, 0, Math.PI * 2);
    ctx.stroke();

    ctx.strokeStyle = '#8B5CF6';
    ctx.lineWidth = 3;
    ctx.lineCap = 'round';
    ctx.beginPath();
    ctx.arc(cx, ringY, ringR, angle, angle + Math.PI * 0.8);
    ctx.stroke();
    ctx.restore();

    // 等待文字
    const dots = '.'.repeat(this._dotCount);
    ctx.font = `${UI_BASE * 0.04}px Arial`;
    ctx.fillStyle = 'rgba(196,181,253,0.9)';
    ctx.fillText(`等待其他玩家完成${dots}`, cx, ringY + SCREEN_HEIGHT * 0.08);

    // 进度
    ctx.font = `bold ${UI_BASE * 0.035}px Arial`;
    ctx.fillStyle = 'rgba(139,92,246,0.8)';
    ctx.fillText(`${this.finishedCount} / ${this.totalCount} 已完成`, cx, ringY + SCREEN_HEIGHT * 0.14);

    // 进度条
    const barW = UI_BASE * 0.5;
    const barH = 6;
    const barX = cx - barW / 2;
    const barY = ringY + SCREEN_HEIGHT * 0.18;

    // 背景
    ctx.fillStyle = 'rgba(139,92,246,0.2)';
    this._rr(ctx, barX, barY, barW, barH, barH / 2);
    ctx.fill();

    // 填充
    const progress = this.totalCount > 0 ? this.finishedCount / this.totalCount : 0;
    const fillW = barW * progress;
    if (fillW > 0) {
      const pg = ctx.createLinearGradient(barX, barY, barX + fillW, barY);
      pg.addColorStop(0, '#8B5CF6');
      pg.addColorStop(1, '#A78BFA');
      ctx.fillStyle = pg;
      this._rr(ctx, barX, barY, fillW, barH, barH / 2);
      ctx.fill();
    }
  }

  _rr(ctx, x, y, w, h, r) {
    ctx.beginPath();
    ctx.moveTo(x + r, y);
    ctx.lineTo(x + w - r, y);
    ctx.quadraticCurveTo(x + w, y, x + w, y + r);
    ctx.lineTo(x + w, y + h - r);
    ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
    ctx.lineTo(x + r, y + h);
    ctx.quadraticCurveTo(x, y + h, x, y + h - r);
    ctx.lineTo(x, y + r);
    ctx.quadraticCurveTo(x, y, x + r, y);
    ctx.closePath();
  }
}
