<template>
  <div
    class="min-h-screen bg-linear-to-br from-green-700 via-green-800 to-green-900 grid grid-rows-[auto_auto_1fr_auto] grid-cols-[1fr_3fr_1fr] gap-6 p-8"
  >
    <!-- Score Display (Top Left) -->
    <div class="col-start-1 col-end-4 row-start-1 flex justify-start items-start">
      <ScoreDisplay
        :player-score="playerScore"
        :opponent-score="opponentScore"
        :current-turn="currentTurn"
        :round-number="1"
      />
    </div>

    <!-- Opponent Hand -->
    <div class="col-start-2 col-end-3 row-start-2 flex justify-center">
      <PlayerHand
        :cards="opponentHand"
        :face-down="true"
        :max-cards="maxCards"
        :playable-cards="[]"
      />
    </div>

    <!-- Play Area -->
    <div class="col-start-2 col-end-3 row-start-3 flex items-center justify-center">
      <PlayArea
        :player-card="currentTrick.playerCard"
        :opponent-card="currentTrick.opponentCard"
        :winner="currentTrick.winner"
      />
    </div>

    <!-- Deck Area -->
    <div class="col-start-3 col-end-4 row-start-3 flex items-center justify-center">
      <DeckArea :trump-card="trumpCard" :cards-remaining="cardsRemaining" :is-empty="deckIsEmpty" />
    </div>

    <!-- Player Hand -->
    <div class="col-start-2 col-end-3 row-start-4 flex justify-center">
      <PlayerHand
        :cards="playerHand"
        :face-down="false"
        :max-cards="maxCards"
        :playable-cards="playableCardIndices"
        @card-clicked="handleCardClick"
      />
    </div>
  </div>
</template>

<script setup>
import PlayerHand from './PlayerHand.vue'
import PlayArea from './PlayArea.vue'
import DeckArea from './DeckArea.vue'
import ScoreDisplay from './ScoreDisplay.vue'

// Props for testing - in real implementation, these come from Pinia store
const props = defineProps({
  playerHand: {
    type: Array,
    default: () => [],
  },
  opponentHand: {
    type: Array,
    default: () => [],
  },
  currentTrick: {
    type: Object,
    default: () => ({
      playerCard: null,
      opponentCard: null,
      winner: null,
    }),
  },
  trumpCard: {
    type: Object,
    required: true,
  },
  cardsRemaining: {
    type: Number,
    default: 0,
  },
  deckIsEmpty: {
    type: Boolean,
    default: false,
  },
  maxCards: {
    type: Number,
    default: 3,
  },
  playableCardIndices: {
    type: Array,
    default: () => [],
  },
  playerScore: {
    type: Number,
    default: 45,
  },
  opponentScore: {
    type: Number,
    default: 23,
  },
  currentTurn: {
    type: String,
    default: 'player',
    validator: (value) => ['player', 'opponent'].includes(value),
  },
})

const emit = defineEmits(['card-clicked'])

const handleCardClick = (payload) => {
  emit('card-clicked', payload)
}
</script>
