export class Renderer {
  private canvas: HTMLCanvasElement;
  private ctx: CanvasRenderingContext2D;
  private dpr: number;

  constructor(canvasId: string, width: number, height: number) {
    this.canvas = document.getElementById(canvasId) as HTMLCanvasElement;
    this.dpr = window.devicePixelRatio || 1;
    this.canvas.width = width * this.dpr;
    this.canvas.height = height * this.dpr;
    this.canvas.style.width = `${width}px`;
    this.canvas.style.height = `${height}px`;
    this.ctx = this.canvas.getContext('2d')!;
    this.ctx.scale(this.dpr, this.dpr);
  }

  render(root: Node) {
    this.clear();
    this.drawNode(root);
  }

  private clear() {
    this.ctx.clearRect(0, 0, this.canvas.width/this.dpr, this.canvas.height/this.dpr);
  }

  private drawNode(node: Node) {
    if (!node.visible) return;
    this.ctx.save();
    this.ctx.translate(node.x, node.y);
    this.ctx.rotate(node.rotation);
    this.ctx.scale(node.scaleX, node.scaleY);
    if (node.alpha < 1) this.ctx.globalAlpha = node.alpha;
    if (node.sprite) node.sprite.draw(this.ctx);
    for (const child of node.children) this.drawNode(child);
    this.ctx.restore();
  }
}

export class Node {
  id: string; x=0; y=0; rotation=0; scaleX=1; scaleY=1; alpha=1;
  visible=true; zIndex=0;
  parent: Node|null=null;
  children: Node[]=[];
  sprite: Sprite|null=null;
  components: Component[]=[];

  addChild(child: Node) { child.parent=this; this.children.push(child); this.children.sort((a,b)=>a.zIndex-b.zIndex); }
  removeChild(child: Node) { this.children=this.children.filter(c=>c!==child); child.parent=null; }
  addComponent<T extends Component>(comp: T): T { comp.node=this; this.components.push(comp); comp.onStart?.(); return comp; }
  update(delta: number) { for (const c of this.components) c.onUpdate?.(delta); for (const c of this.children) c.update(delta); }
}

export abstract class Component {
  node: Node|null=null; enabled=true;
  onStart?(): void; onUpdate?(delta: number): void;
}

export class Sprite extends Component {
  image: HTMLImageElement|null=null; srcRect={x:0,y:0,w:0,h:0};
  draw(ctx: CanvasRenderingContext2D) {
    if (!this.image) return;
    ctx.drawImage(this.image, this.srcRect.x, this.srcRect.y, this.srcRect.w, this.srcRect.h,
      -this.srcRect.w/2, -this.srcRect.h/2, this.srcRect.w, this.srcRect.h);
  }
}

export class Collider extends Component {
  width=0; height=0;
  intersects(other: Collider): boolean {
    if (!this.node||!other.node) return false;
    const a=this.node, b=other.node;
    return a.x-this.width/2 < b.x+other.width/2 && a.x+this.width/2 > b.x-other.width/2 &&
           a.y-this.height/2 < b.y+other.height/2 && a.y+this.height/2 > b.y-other.height/2;
  }
}

export class AssetManager {
  private cache = new Map<string, HTMLImageElement|HTMLAudioElement>();
  async loadImage(src: string): Promise<HTMLImageElement> {
    if (this.cache.has(src)) return this.cache.get(src) as HTMLImageElement;
    return new Promise((resolve, reject)=>{
      const img=new Image();
      img.onload=()=>{this.cache.set(src,img); resolve(img);};
      img.onerror=reject; img.src=src;
    });
  }
  preloadAll(manifest: Record<string,string>): Promise<void[]> {
    return Promise.all(Object.entries(manifest).map(([_,src])=>
      src.endsWith('.png')||src.endsWith('.jpg') ? this.loadImage(src).then(()=>{}) : Promise.resolve()));
  }
}

export interface PlatformSDK {
  showAd(slotId: string): Promise<void>;
  pay(params: {amount:number; productId:string}): Promise<string>;
  submitScore(leaderboard: string, score: number): Promise<void>;
  getUserInfo(): Promise<{userId:string; nickName:string}>;
}

export class WechatSDK implements PlatformSDK {
  async showAd(slotId: string): Promise<void> {
    return new Promise((resolve,reject)=>{
      wx.createRewardedVideoAd({adUnitId:slotId}).show().then(resolve).catch(reject);
    });
  }
  async pay(params: any) {
    const res = await wx.requestPayment({...params});
    return res.transactionId;
  }
  async submitScore(l: string, s: number) {
    wx.setUserCloudStorage({KVDataList:[{key:l,value:String(s)}]});
  }
  async getUserInfo() {
    return wx.getUserInfo({withCredentials:false});
  }
}

export class WebMockSDK implements PlatformSDK {
  async showAd(slotId: string) { console.log('[Mock Ad]', slotId); }
  async pay(params: any) { return 'mock-'+Date.now(); }
  async submitScore(l: string, s: number) { console.log('[Mock]', l, s); }
  async getUserInfo() { return {userId:'web-test', nickName:'TestUser'}; }
}

async function main() {
  const renderer = new Renderer('gameCanvas', 720, 1280);
  const assets = new AssetManager();
  await assets.preloadAll({hero:'https://cdn.example.com/hero.png', bg:'https://cdn.example.com/bg.png'});

  const root = new Node();
  const hero = new Node();
  hero.x = 360; hero.y = 640;
  const sp = new Sprite();
  sp.image = (await assets.loadImage('https://cdn.example.com/hero.png'));
  sp.srcRect = {x:0,y:0,w:64,h:64};
  hero.addComponent(sp);
  root.addChild(hero);

  const platform = typeof wx !== 'undefined' ? new WechatSDK() : new WebMockSDK();
  await platform.showAd('ad-slot-001');

  let last = performance.now();
  function loop(now:number) {
    root.update((now-last)/1000); last=now;
    renderer.render(root);
    requestAnimationFrame(loop);
  }
  requestAnimationFrame(loop);
}
main();