import { Application, Text, TextStyle } from 'pixi.js';

const app = new Application();
await app.init({ width: 800, height: 600, background: '#1a1a2e' });
document.body.appendChild(app.canvas);

// 方式一：简洁创建
const simple = new Text({
  text: 'Hello Pixi.js!',
  style: { fontSize: 32, fill: '#ffffff' },
});
simple.position.set(50, 50);
app.stage.addChild(simple);

// 方式二：使用 TextStyle 对象
const style = new TextStyle({
  fontFamily: 'Arial',
  fontSize: 48,
  fontWeight: 'bold',
  fill: '#ff6b6b',
  stroke: { color: '#000000', width: 4 },
  dropShadow: {
    color: '#000000',
    blur: 4,
    angle: Math.PI / 6,
    distance: 6,
  },
});

const rich = new Text({ text: 'Rich Text', style });
rich.position.set(50, 120);
app.stage.addChild(rich);

const shadowStyle = new TextStyle({
  fontSize: 36,
  fill: '#ecf0f1',
  dropShadow: {
    color: '#000000',
    alpha: 0.5,
    blur: 4,
    angle: Math.PI / 4,
    distance: 4,
  },
});

const strokeStyle = new TextStyle({
  fontSize: 48,
  fill: '#3498db',
  stroke: {
    color: '#ffffff',
    width: 5,
    join: 'round',
  },
});

// 方法一：CSS @font-face + document.fonts.ready
// 在 CSS 中定义：
// @font-face { font-family: 'GameFont'; src: url('/font/game.woff2') format('woff2'); }

await document.fonts.load('48px GameFont');
await document.fonts.ready;

const text = new Text({
  text: '自定义字体',
  style: { fontFamily: 'GameFont', fontSize: 48, fill: '#ffffff' },
});

// 方法二：使用 FontFace API
const font = new FontFace('MyFont', 'url(/font/myfont.woff2)');
await font.load();
document.fonts.add(font);

const text2 = new Text({
  text: 'FontFace API',
  style: { fontFamily: 'MyFont', fontSize: 36, fill: '#f1c40f' },
});

import { BitmapFont, BitmapText } from 'pixi.js';

// 注册位图字体
BitmapFont.install({
  name: 'GameFont',
  style: {
    fontFamily: 'Arial',
    fontSize: 32,
    fill: '#ffffff',
  },
  // 可选：指定字符集
  chars: BitmapFont.ASCII,
});

// 创建 BitmapText
const bmpText = new BitmapText({
  text: 'Score: 99999',
  style: {
    fontFamily: 'GameFont',
    fontSize: 32,
  },
});
bmpText.position.set(50, 250);
app.stage.addChild(bmpText);

import { Assets } from 'pixi.js';

// 加载 .fnt 文件（BMFont 格式）
await Assets.load('/font/game.fnt');

const text = new BitmapText({
  text: 'Bitmap Font',
  style: { fontFamily: 'GameFont' },
});

import { HTMLText } from 'pixi.js';

const htmlText = new HTMLText({
  text: `<span style="color: red; font-size: 32px;">Red</span>
         <span style="color: blue; font-size: 24px;">Blue</span>
         <b>Bold</b> and <i>Italic</i>`,
  style: {
    fontFamily: 'Arial',
    fontSize: 28,
    fill: '#ffffff',
  },
});
htmlText.position.set(50, 350);
app.stage.addChild(htmlText);

import { Text, TextStyle } from 'pixi.js';

class TypewriterText {
  text: Text;
  fullText: string;
  currentIndex: number = 0;
  speed: number; // 每帧显示的字符数

  constructor(fullText: string, x: number, y: number, speed: number = 1) {
    this.fullText = fullText;
    this.speed = speed;

    const style = new TextStyle({
      fontFamily: 'Courier New',
      fontSize: 24,
      fill: '#00ff00',
      wordWrap: true,
      wordWrapWidth: 600,
    });

    this.text = new Text({ text: '', style });
    this.text.position.set(x, y);
  }

  update(delta: number): boolean {
    this.currentIndex += this.speed * delta;
    const chars = Math.floor(this.currentIndex);
    if (chars <= this.fullText.length) {
      this.text.text = this.fullText.substring(0, chars);
      return false; // 未完成
    }
    this.text.text = this.fullText;
    return true; // 完成
  }
}

// 使用
const typewriter = new TypewriterText(
  '在遥远的大陆上，一位勇者踏上了冒险之旅...',
  50, 450, 2
);
app.stage.addChild(typewriter.text);

app.ticker.add((ticker) => {
  typewriter.update(ticker.deltaTime);
});

// FPS 显示
const fpsText = new Text({
  text: 'FPS: 0',
  style: { fontSize: 16, fill: '#00ff00', fontFamily: 'monospace' },
});
fpsText.position.set(10, 10);
app.stage.addChild(fpsText);

// 分数（格式化显示）
const scoreText = new Text({
  text: 'SCORE: 0000000',
  style: { fontSize: 28, fill: '#f1c40f', fontFamily: 'monospace' },
});
scoreText.position.set(600, 20);
app.stage.addChild(scoreText);

let score = 0;
app.ticker.add(() => {
  fpsText.text = `FPS: ${Math.round(app.ticker.FPS)}`;
  score += 1;
  scoreText.text = `SCORE: ${String(score).padStart(7, '0')}`;
});

const fallbackStyle = new TextStyle({
  fontFamily: 'GameFont, "PingFang SC", "Microsoft YaHei", sans-serif',
  fontSize: 28,
  fill: '#ffffff',
});

// 更安全的回退：先检测字体是否可用
function isFontAvailable(fontName: string): boolean {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d')!;
  ctx.font = `72px monospace`;
  const baseline = ctx.measureText('test').width;
  ctx.font = `72px '${fontName}', monospace`;
  return ctx.measureText('test').width !== baseline;
}

if (!isFontAvailable('GameFont')) {
  console.warn('GameFont 未安装，使用回退字体');
}

// 低性能需求文字 —— 降低分辨率
const cheapText = new Text({
  text: 'Debug Info',
  style: { fontSize: 12, fill: '#888' },
  resolution: 1, // 始终使用 1x 分辨率
});

interface DialogLine {
  speaker: string;
  content: string;
}

class DialogBox {
  container: Container;
  speakerText: Text;
  contentText: TypewriterText;
  bg: Graphics;
  lines: DialogLine[];
  currentLine: number = 0;
  onComplete?: () => void;

  constructor(lines: DialogLine[]) {
    this.lines = lines;
    this.container = new Container();

    // 对话框背景
    this.bg = new Graphics();
    this.bg.roundRect(0, 0, 760, 150, 12);
    this.bg.fill({ color: 0x000000, alpha: 0.8 });
    this.bg.stroke({ width: 2, color: 0x3498db });
    this.bg.position.set(20, 430);
    this.container.addChild(this.bg);

    // 说话人
    this.speakerText = new Text({
      text: '',
      style: { fontSize: 20, fill: '#f1c40f', fontWeight: 'bold' },
    });
    this.speakerText.position.set(40, 440);
    this.container.addChild(this.speakerText);

    // 内容
    this.contentText = new TypewriterText('', 40, 470, 2);
    this.container.addChild(this.contentText.text);

    this.showLine(0);
  }

  showLine(index: number) {
    const line = this.lines[index];
    this.speakerText.text = line.speaker;
    this.contentText = new TypewriterText(line.content, 40, 470, 2);
  }

  next(): boolean {
    this.currentLine++;
    if (this.currentLine >= this.lines.length) return false;
    this.showLine(this.currentLine);
    return true;
  }
}