import Phaser from 'phaser';
import type { SocketClient } from '../network/SocketClient.js';
import { CharacterCompositor } from '../sprites/CharacterCompositor.js';
import type { WorldState, StateUpdate, EntityState, Appearance } from '@dflike/shared';
import { TILE_SIZE, SPRITE_FRAME_WIDTH, SPRITE_FRAME_HEIGHT, SPRITE_COLS, Direction } from '@dflike/shared';

interface EntitySprite {
  sprite: Phaser.GameObjects.Sprite;
  lastState: EntityState;
}

export class GameScene extends Phaser.Scene {
  private client!: SocketClient;
  private compositor!: CharacterCompositor;
  private worldState!: WorldState;
  private entitySprites: Map<number, EntitySprite> = new Map();
  private cursors!: Phaser.Types.Input.Keyboard.CursorKeys;
  private wasd!: Record<string, Phaser.Input.Keyboard.Key>;
  private mode: 'avatar' | 'camera' = 'camera';
  private modeText!: Phaser.GameObjects.Text;
  private moveThrottle = 0;

  constructor() {
    super({ key: 'GameScene' });
  }

  init(data: { client: SocketClient; worldState: WorldState }): void {
    this.client = data.client;
    this.worldState = data.worldState;
  }

  create(): void {
    this.compositor = new CharacterCompositor(this);

    // Draw tile grid
    this.drawWorld();

    // Setup camera
    const worldPixelW = this.worldState.worldWidth * TILE_SIZE;
    const worldPixelH = this.worldState.worldHeight * TILE_SIZE;
    this.cameras.main.setBounds(0, 0, worldPixelW, worldPixelH);

    // Input
    this.cursors = this.input.keyboard!.createCursorKeys();
    this.wasd = {
      W: this.input.keyboard!.addKey('W'),
      A: this.input.keyboard!.addKey('A'),
      S: this.input.keyboard!.addKey('S'),
      D: this.input.keyboard!.addKey('D'),
    };

    // Tab to toggle mode
    this.input.keyboard!.addKey('TAB').on('down', () => {
      this.mode = this.mode === 'avatar' ? 'camera' : 'avatar';
      this.client.sendInput({ type: 'toggle-mode' });
      this.updateModeText();
    });

    // UI text
    this.modeText = this.add.text(10, 10, '', {
      fontSize: '16px', color: '#ffffff', backgroundColor: '#000000aa',
      padding: { x: 8, y: 4 },
    }).setScrollFactor(0).setDepth(1000);
    this.updateModeText();

    // Spawn initial entities
    this.spawnEntities(this.worldState.entities);

    // Listen for state updates
    this.client.onStateUpdate = (update: StateUpdate) => {
      this.handleStateUpdate(update);
    };

    this.client.onPlayerLeft = (_data) => {
      // Entity removal will be handled by next state update
    };
  }

  private drawWorld(): void {
    const { worldWidth, worldHeight, obstacles, pointsOfInterest } = this.worldState;

    // Ground tiles
    const graphics = this.add.graphics();
    for (let x = 0; x < worldWidth; x++) {
      for (let y = 0; y < worldHeight; y++) {
        const shade = ((x + y) % 2 === 0) ? 0x2d5a27 : 0x326b2e;
        graphics.fillStyle(shade, 1);
        graphics.fillRect(x * TILE_SIZE, y * TILE_SIZE, TILE_SIZE, TILE_SIZE);
      }
    }

    // Obstacles
    for (const obs of obstacles) {
      graphics.fillStyle(0x555555, 1);
      graphics.fillRect(obs.x * TILE_SIZE, obs.y * TILE_SIZE, TILE_SIZE, TILE_SIZE);
    }

    // Points of interest
    for (const poi of pointsOfInterest) {
      const color = poi.type === 'food' ? 0xcc8833 : 0x3355cc;
      graphics.fillStyle(color, 1);
      graphics.fillRect(
        poi.position.x * TILE_SIZE + 8,
        poi.position.y * TILE_SIZE + 8,
        TILE_SIZE - 16,
        TILE_SIZE - 16,
      );
    }
  }

  private async spawnEntities(entities: EntityState[]): Promise<void> {
    for (const entity of entities) {
      if (!this.entitySprites.has(entity.id) && entity.appearance) {
        await this.createEntitySprite(entity);
      }
    }
  }

  private async createEntitySprite(entity: EntityState): Promise<void> {
    const textureKey = await this.compositor.preloadAppearance(entity.appearance);

    // Create animations for this texture
    this.createAnimations(textureKey);

    const sprite = this.add.sprite(
      entity.position.x * TILE_SIZE + TILE_SIZE / 2,
      entity.position.y * TILE_SIZE + TILE_SIZE / 2,
      textureKey,
      0,
    );

    this.entitySprites.set(entity.id, { sprite, lastState: entity });
    this.playAnimation(sprite, textureKey, entity.movement.direction, entity.movement.state);
  }

  private createAnimations(textureKey: string): void {
    const dirNames = ['down', 'left', 'right', 'up'];
    for (let dir = 0; dir < 4; dir++) {
      const walkKey = `${textureKey}_walk_${dirNames[dir]}`;
      const idleKey = `${textureKey}_idle_${dirNames[dir]}`;

      if (!this.anims.exists(walkKey)) {
        this.anims.create({
          key: walkKey,
          frames: this.anims.generateFrameNumbers(textureKey, {
            start: dir * SPRITE_COLS + 1,
            end: dir * SPRITE_COLS + SPRITE_COLS - 1,
          }),
          frameRate: 8,
          repeat: -1,
        });
      }
      if (!this.anims.exists(idleKey)) {
        this.anims.create({
          key: idleKey,
          frames: [{ key: textureKey, frame: dir * SPRITE_COLS }],
          frameRate: 1,
          repeat: 0,
        });
      }
    }
  }

  private playAnimation(sprite: Phaser.GameObjects.Sprite, textureKey: string, direction: number, state: string): void {
    const dirNames = ['down', 'left', 'right', 'up'];
    const dirName = dirNames[direction] ?? 'down';
    const animKey = state === 'walking'
      ? `${textureKey}_walk_${dirName}`
      : `${textureKey}_idle_${dirName}`;
    if (sprite.anims.currentAnim?.key !== animKey) {
      sprite.play(animKey);
    }
  }

  private handleStateUpdate(update: StateUpdate): void {
    const activeIds = new Set<number>();

    for (const entity of update.entities) {
      activeIds.add(entity.id);
      const existing = this.entitySprites.get(entity.id);

      if (existing) {
        // Interpolation target
        const targetX = entity.position.x * TILE_SIZE + TILE_SIZE / 2;
        const targetY = entity.position.y * TILE_SIZE + TILE_SIZE / 2;

        // Smooth movement via tween
        const dx = Math.abs(existing.sprite.x - targetX);
        const dy = Math.abs(existing.sprite.y - targetY);
        if (dx > 1 || dy > 1) {
          this.tweens.add({
            targets: existing.sprite,
            x: targetX,
            y: targetY,
            duration: 200,
            ease: 'Linear',
          });
        }

        // Update animation
        const textureKey = this.compositor.getKey(entity.appearance);
        this.playAnimation(existing.sprite, textureKey, entity.movement.direction, entity.movement.state);
        existing.lastState = entity;
      } else if (entity.appearance) {
        this.createEntitySprite(entity);
      }
    }

    // Remove entities no longer in update
    for (const [id, es] of this.entitySprites) {
      if (!activeIds.has(id)) {
        es.sprite.destroy();
        this.entitySprites.delete(id);
      }
    }
  }

  update(_time: number, delta: number): void {
    this.handleCameraAndMovement(delta);
  }

  private handleCameraAndMovement(delta: number): void {
    const cam = this.cameras.main;
    const speed = 5; // tiles per second for camera pan

    const left = this.cursors.left?.isDown || this.wasd.A.isDown;
    const right = this.cursors.right?.isDown || this.wasd.D.isDown;
    const up = this.cursors.up?.isDown || this.wasd.W.isDown;
    const down = this.cursors.down?.isDown || this.wasd.S.isDown;

    if (this.mode === 'camera') {
      // Pan camera freely
      const panSpeed = speed * TILE_SIZE;
      if (left) cam.scrollX -= panSpeed * delta / 1000;
      if (right) cam.scrollX += panSpeed * delta / 1000;
      if (up) cam.scrollY -= panSpeed * delta / 1000;
      if (down) cam.scrollY += panSpeed * delta / 1000;
    } else {
      // Avatar mode — send movement input (throttled)
      this.moveThrottle -= delta;
      if (this.moveThrottle <= 0) {
        let dx = 0, dy = 0;
        if (left) dx = -1;
        else if (right) dx = 1;
        else if (up) dy = -1;
        else if (down) dy = 1;

        if (dx !== 0 || dy !== 0) {
          this.client.sendInput({ type: 'move', direction: { dx, dy } });
          this.moveThrottle = 150; // ms between moves
        }
      }

      // Follow own entity
      const myEntityId = this.client.entityId;
      if (myEntityId != null) {
        const mySprite = this.entitySprites.get(myEntityId);
        if (mySprite) {
          cam.centerOn(mySprite.sprite.x, mySprite.sprite.y);
        }
      }
    }
  }

  private updateModeText(): void {
    this.modeText.setText(
      `Mode: ${this.mode.toUpperCase()} [TAB to toggle]`
    );
  }
}