<template>
  <div class="team-card" :class="{ active }" @click="$emit('edit')">
    <div class="team-header">
      <div class="team-header-copy">
        <h4>{{ team.name }}</h4>
        <span class="team-league-inline">{{ leagueName }}</span>
        <span class="team-open-hint">{{ $t('teamManagement.openInWorkspace') }}</span>
      </div>
      <div class="team-actions">
        <button @click.stop="$emit('delete')" class="btn-delete" :title="$t('teamManagement.delete')">
          🗑️
        </button>
      </div>
    </div>

    <div class="team-card-badges">
      <span v-if="status.complete" class="status-badge complete" :title="status.tooltip">
        ✓ {{ $t('teamManagement.fullyConfigured') }}
      </span>
      <span v-else-if="status.partial" class="status-badge partial" :title="status.tooltip">
        ⚠ {{ $t('teamManagement.partiallyConfigured') }}
      </span>
      <span v-else class="status-badge missing" :title="status.tooltip">
        ✗ {{ $t('teamManagement.notConfigured') }}
      </span>
      <span class="status-badge neutral">{{ seasonLabel }}</span>
    </div>

    <div class="team-card-meta">
      <span class="team-card-meta-item">{{ $t('teamManagement.created') }}: {{ createdText }}</span>
      <span class="team-card-meta-item">{{ $t('teamManagement.lastUpdated') }}: {{ lastUpdatedText }}</span>
    </div>

    <div class="team-documents">
      <div class="documents-label">{{ $t('teamManagement.documents') }}</div>
      <div class="document-icons">
        <button
          v-if="hasCodeList"
          @click.stop="$emit('show-code-list')"
          class="document-icon code-list-icon"
          :title="$t('teamManagement.showCodeList')"
        >
          📋
        </button>
        <button
          v-if="hasPinList"
          @click.stop="$emit('show-pin-list')"
          class="document-icon pin-list-icon"
          :title="$t('teamManagement.showPinList')"
        >
          🔐
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TeamListCard',
  props: {
    team: { type: Object, required: true },
    active: { type: Boolean, default: false },
    status: { type: Object, required: true },
    leagueName: { type: String, required: true },
    seasonLabel: { type: String, required: true },
    createdText: { type: String, required: true },
    lastUpdatedText: { type: String, required: true },
    hasCodeList: { type: Boolean, default: false },
    hasPinList: { type: Boolean, default: false }
  },
  emits: ['edit', 'delete', 'show-code-list', 'show-pin-list']
};
</script>
