import Phaser from 'phaser'
import { CardObject } from '../objects/CardObject'

export class GameScene extends Phaser.Scene {
  constructor() {
    super('GameScene')
    this.hand = []
    this.selectedCard = null
    this.playedCards = []
  }

  create() {
    this.socket = this.registry.get('socket')
    this.store = this.registry.get('store')
    this.roomId = this.registry.get('roomId')

    this.createTable()
    this.createHand()
    this.createPlayButton()
    this.setupSocketListeners()

    // Demander l'état initial
    this.socket.emit('request-state', { roomId: this.roomId })
  }

  createTable() {
    const { width, height } = this.scale

    // Zone centrale de jeu
    this.add.rectangle(width / 2, height / 2, width * 0.6, height * 0.4, 0x1a0800, 0.8)
      .setStrokeStyle(1, 0xd4a73240)

    // Label tour
    this.turnText = this.add.text(width / 2, 30, 'Tour 1/10', {
      fontSize: '18px',
      color: '#d4a732',
      fontFamily: 'Georgia'
    }).setOrigin(0.5)

    // Zone cartes jouées (4 emplacements)
    this.playZones = []
    const zoneY = height / 2
    const startX = width / 2 - 180
    for (let i = 0; i < 4; i++) {
      const x = startX + i * 120
      const zone = this.add.rectangle(x, zoneY, 110, 170, 0x000000, 0)
        .setStrokeStyle(1, 0xd4a73250)
      this.playZones.push(zone)

      this.add.text(x, zoneY + 100, `J${i + 1}`, {
        fontSize: '12px',
        color: '#a08060',
        fontFamily: 'Georgia'
      }).setOrigin(0.5)
    }
  }

  createHand() {
    const { width, height } = this.scale
    const handY = height - 110

    // Vider l'ancienne main
    this.hand.forEach(c => c.destroy())
    this.hand = []

    const cards = this.store.hand
    const totalWidth = cards.length * 130
    const startX = width / 2 - totalWidth / 2 + 60

    cards.forEach((cardData, i) => {
      const card = new CardObject(this, startX + i * 130, handY, cardData)
      card.on('select', this.onCardSelected, this)
      this.hand.push(card)
    })
  }

  createPlayButton() {
    const { width, height } = this.scale

    this.playBtn = this.add.text(width / 2, height - 30, '[ JOUER LA CARTE ]', {
      fontSize: '16px',
      color: '#1a0a00',
      backgroundColor: '#d4a732',
      padding: { x: 20, y: 8 },
      fontFamily: 'Georgia'
    })
      .setOrigin(0.5)
      .setInteractive({ cursor: 'pointer' })
      .setAlpha(0.4)
      .on('pointerdown', this.playSelectedCard, this)
      .on('pointerover', () => { if (this.selectedCard) this.playBtn.setAlpha(1) })
      .on('pointerout', () => { if (!this.selectedCard) this.playBtn.setAlpha(0.4) })
  }

  onCardSelected(card) {
    // Désélectionner la précédente
    if (this.selectedCard && this.selectedCard !== card) {
      this.selectedCard.deselect()
    }
    this.selectedCard = card
    this.store.selectCard(card.cardData)
    this.playBtn.setAlpha(1)
  }

  playSelectedCard() {
    if (!this.selectedCard || this.store.phase !== 'selecting') return

    this.socket.emit('play-card', {
      roomId: this.roomId,
      cardId: this.selectedCard.cardData.id
    })

    this.selectedCard.setAlpha(0.5)
    this.selectedCard = null
    this.store.clearSelection()
    this.playBtn.setAlpha(0.4)
  }

  setupSocketListeners() {
    this.socket.on('game-state', (state) => {
      this.store.updateState(state)
      this.turnText.setText(`Tour ${state.currentTurn}/${state.maxTurns}`)

      if (state.phase === 'selecting') {
        this.createHand()
      }

      if (state.phase === 'resolve') {
        this.showPlayedCards(state.playedCards)
      }
    })

    this.socket.on('round-result', (result) => {
      this.showRoundResult(result)
    })
  }

  showPlayedCards(played) {
    played.forEach((entry, i) => {
      if (!this.playZones[i]) return
      const zone = this.playZones[i]
      this.add.text(zone.x, zone.y, entry.cardName, {
        fontSize: '13px',
        color: '#f5e6c8',
        fontFamily: 'Georgia',
        wordWrap: { width: 100 }
      }).setOrigin(0.5).setDepth(10)
    })
  }

  showRoundResult(result) {
    const { width, height } = this.scale
    const txt = this.add.text(width / 2, height / 2 - 100, result.message, {
      fontSize: '20px',
      color: '#d4a732',
      fontFamily: 'Georgia',
      stroke: '#000000',
      strokeThickness: 4
    }).setOrigin(0.5).setDepth(20)

    this.time.delayedCall(2500, () => txt.destroy())
  }

  update() {}
}