// frontend/js/tile.js
// Traduction de tile.py en JavaScript

// Enum JS pour familles et valeurs
const Family = {
  MAN: 'man', PIN: 'pin', SOU: 'sou', WIND: 'wind', DRAGON: 'dragon'
};
const Wind = { EAST: 1, SOUTH: 2, WEST: 3, NORTH: 4 };
const Dragon = { RED: 1, GREEN: 2, WHITE: 3 };

class Tile {
  constructor(family, value, id) {
    this.family = family;
    this.value = value;
    this.id = id;
    this.hidden = false;
    this.img = null;
    this.img_back = "Back.svg";
    this.img_front = "Front.svg";
    this.img_shadow = "Gray.svg";
    if (family === Family.MAN) {
      if (value >= 1 && value <= 9) this.img_symbol = `Man${value}.svg`;
      else throw new Error(`Invalid value: ${value}`);
    } else if (family === Family.PIN) {
      if (value >= 1 && value <= 9) this.img_symbol = `Pin${value}.svg`;
      else throw new Error(`Invalid value: ${value}`);
    } else if (family === Family.SOU) {
      if (value >= 1 && value <= 9) this.img_symbol = `Sou${value}.svg`;
      else throw new Error(`Invalid value: ${value}`);
    } else if (family === Family.WIND) {
      if (value === Wind.EAST) this.img_symbol = "Ton.svg";
      else if (value === Wind.SOUTH) this.img_symbol = "Nan.svg";
      else if (value === Wind.WEST) this.img_symbol = "Shaa.svg";
      else if (value === Wind.NORTH) this.img_symbol = "Pei.svg";
      else throw new Error(`Invalid value: ${value}`);
    } else if (family === Family.DRAGON) {
      if (value === Dragon.RED) this.img_symbol = "Chun.svg";
      else if (value === Dragon.GREEN) this.img_symbol = "Hatsu.svg";
      else if (value === Dragon.WHITE) this.img_symbol = "Haku.svg";
      else throw new Error(`Invalid value: ${value}`);
    } else {
      throw new Error(`Invalid family: ${family}`);
    }
  }

  getSVG() {
    if (!this.img) {
      const ratio = 400 / 300;
      const width = 60;
      const height = ratio * width;
      // Utilise <image> pour chaque couche SVG
      const shadow = `<image href="/img/Regular/${this.img_shadow}" x="10" y="10" height="410" width="310"/>`;
      const front = `<image href="/img/Regular/${this.img_front}" x="0" y="0" height="410" width="310"/>`;
      const symbol = `<image href="/img/Regular/${this.img_symbol}" x="12" y="20" height="370" width="285"/>`;
      this.img = `<svg class="tile tile-${this.id}" data-tile-id="${this.id}" viewBox="0 0 310 410" height="${height}" width="${width}">${shadow}${front}${symbol}</svg>`;
    }
    return this.img;
  }

  equals(other) {
    return this.value === other.value && this.family === other.family;
  }

  lessThan(other) {
    if (this.family !== other.family) {
      return this.family < other.family;
    }
    if (typeof this.value === 'object' && 'value' in this.value) {
      return this.value.value < other.value.value;
    }
    return this.value < other.value;
  }

  static generateAll() {
    const tiles = [];
    let id = 0;
    for (let _ = 0; _ < 4; _++) {
      // man
      for (let i = 1; i <= 9; i++) {
        tiles.push(new Tile(Family.MAN, i, id++));
      }
      // pin
      for (let i = 1; i <= 9; i++) {
        tiles.push(new Tile(Family.PIN, i, id++));
      }
      // sou
      for (let i = 1; i <= 9; i++) {
        tiles.push(new Tile(Family.SOU, i, id++));
      }
      // wind
      for (let wind of [Wind.EAST, Wind.SOUTH, Wind.WEST, Wind.NORTH]) {
        tiles.push(new Tile(Family.WIND, wind, id++));
      }
      // dragon
      for (let dragon of [Dragon.RED, Dragon.GREEN, Dragon.WHITE]) {
        tiles.push(new Tile(Family.DRAGON, dragon, id++));
      }
    }
    return tiles;
  }
}

// Expose dans le scope global pour compatibilité avec les scripts HTML classiques
window.Tile = Tile;
window.Family = Family;
window.Wind = Wind;
window.Dragon = Dragon;