<template>
  <div 
    :class="['player-list-item flex items-center justify-between p-3 my-2 rounded-lg shadow cursor-pointer transition-all duration-200 ease-in-out', 
            itemStateClasses,
            { 'opacity-50 filter grayscale contrast-75': player.isSkipped }, 
            { 'opacity-75': !player.isTimerRunning && !player.isSkipped }
            ]"
    @click="handleTap"
  >
    <div class="flex items-center">
      <img 
        v-if="player.avatar"
        :src="player.avatar" 
        alt="Player Avatar" 
        class="w-12 h-12 rounded-full object-cover mr-3 border-2"
        :class="player.isSkipped ? 'border-gray-400 dark:border-gray-600' : 
                 player.isTimerRunning ? 'border-green-400 dark:border-green-500' : 
                 'border-yellow-400 dark:border-yellow-500'"
      />
      <DefaultAvatarIcon
        v-else
        class="w-12 h-12 rounded-full object-cover mr-3 border-2 p-1"
        :class="player.isSkipped ? 'text-gray-400 bg-gray-200 border-gray-400 dark:text-gray-600 dark:bg-gray-700 dark:border-gray-600' : 
                 player.isTimerRunning ? 'text-green-600 bg-green-100 border-green-400 dark:text-green-300 dark:bg-green-800 dark:border-green-500' :
                 'text-yellow-600 bg-yellow-50 border-yellow-400 dark:text-yellow-300 dark:bg-yellow-800 dark:border-yellow-500'"
      />
      <div>
        <h3 class="text-lg font-medium" :class="{'text-gray-500 dark:text-gray-400': !player.isTimerRunning && !player.isSkipped}">
          {{ player.name }}
        </h3>
        <p v-if="player.isSkipped" class="text-xs text-red-500 dark:text-red-400">SKIPPED</p>
        <p v-else-if="!player.isTimerRunning" class="text-xs text-yellow-600 dark:text-yellow-400">Paused</p>
      </div>
    </div>
    <div class="flex flex-col items-end">
      <TimerDisplay 
        :seconds="player.currentTimerSec" 
        :is-negative="player.currentTimerSec < 0"
        :is-pulsating="player.isTimerRunning"
        class="text-2xl"
        :class="{'opacity-80': !player.isTimerRunning && !player.isSkipped}"
      />
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import TimerDisplay from './TimerDisplay.vue';
import DefaultAvatarIcon from './DefaultAvatarIcon.vue';

const props = defineProps({
  player: {
    type: Object,
    required: true
  }
});

const emit = defineEmits(['tapped']);

const handleTap = () => {
  // Allow tapping only if not skipped, to pause/resume their timer
  if (!props.player.isSkipped) {
    emit('tapped');
  }
};

const itemStateClasses = computed(() => {
  if (props.player.isSkipped) {
    return 'bg-gray-200 dark:bg-gray-800 border border-gray-300 dark:border-gray-700';
  }
  if (props.player.isTimerRunning) {
    return props.player.currentTimerSec < 0 
      ? 'bg-red-100 dark:bg-red-900/80 border border-red-400 dark:border-red-600 animate-pulsePositive' // Pulsate background if running positive
      : 'bg-green-50 dark:bg-green-900/70 border border-green-400 dark:border-green-600 animate-pulsePositive';
  }
  // Paused state
  return 'bg-yellow-50 dark:bg-yellow-900/50 border border-yellow-300 dark:border-yellow-700 hover:bg-yellow-100 dark:hover:bg-yellow-900/70';
});
</script>