<!--
  TournamentGrid Component
  
  Displays a grid of tournaments with search, filtering, and pagination.
  
  Features:
  - Tournament card display with state badges
  - Client-side search filtering
  - Pagination support (v2.1 only)
  - Click-to-expand details
  - Empty state messaging
  
  Props:
  - tournaments: Array of tournament objects
  - loading: Boolean for loading state
  - loadingMore: Boolean for pagination loading
  - searchQuery: String for search input (v-model)
  - filteredTournaments: Computed array of filtered results
  - expandedTournamentId: ID of currently expanded tournament
  - hasNextPage: Boolean for pagination availability (v2.1)
  - apiVersion: String ('v1' or 'v2.1')
  
  Events:
  - update:searchQuery: Emitted when search input changes
  - load-more: Emitted when "Load More" button clicked
  - toggle-details: Emitted when tournament details button clicked
-->
<template>
  <div class="tournament-grid">
    <!-- Loading State -->
    <div v-if="loading" class="status loading">⏳ Loading tournaments...</div>

    <!-- Error State -->
    <div v-else-if="error" class="status error">❌ Error: {{ error }}</div>

    <!-- Empty State -->
    <div
      v-else-if="!tournaments || tournaments.length === 0"
      class="status empty"
    >
      No tournaments found. Create one at
      <a href="https://challonge.com" target="_blank">Challonge.com</a>
    </div>

    <!-- Tournament List -->
    <div v-else>
      <!-- Search Filter -->
      <div class="search-box">
        <input
          :value="searchQuery"
          @input="$emit('update:searchQuery', $event.target.value)"
          type="text"
          placeholder="🔍 Search tournaments by name (client-side)..."
          class="search-input"
        />
        <span v-if="searchQuery" class="search-info">
          Showing {{ filteredTournaments.length }} of
          {{ tournaments.length }} tournaments
        </span>
      </div>

      <!-- Tournament Cards -->
      <div class="tournament-list">
        <div
          v-for="tournament in filteredTournaments"
          :key="getTournamentId(tournament)"
          class="tournament-card"
        >
          <div class="tournament-header">
            <h4>{{ getTournamentName(tournament) }}</h4>
            <span
              class="tournament-state"
              :class="getTournamentProp(tournament, 'state')"
            >
              {{ getTournamentProp(tournament, 'state') }}
            </span>
          </div>
          <div class="tournament-details">
            <p>
              <strong>URL:</strong>
              {{ getTournamentProp(tournament, 'url') }}
            </p>
            <p>
              <strong>Type:</strong>
              {{ getTournamentProp(tournament, 'tournament_type') }}
            </p>
            <p>
              <strong>Participants:</strong>
              {{ getTournamentProp(tournament, 'participants_count') }}
            </p>
            <p v-if="getTournamentProp(tournament, 'started_at')">
              <strong>Started:</strong>
              {{ formatDate(getTournamentProp(tournament, 'started_at')) }}
            </p>
          </div>
          <button
            @click="$emit('toggle-details', getTournamentId(tournament))"
            class="btn btn-small"
            :class="{
              'btn-active': expandedTournamentId === getTournamentId(tournament)
            }"
          >
            {{
              expandedTournamentId === getTournamentId(tournament)
                ? 'Hide Details'
                : 'Load Details'
            }}
          </button>

          <!-- Details Slot for expanded content -->
          <slot
            name="tournament-details"
            :tournament="tournament"
            :is-expanded="expandedTournamentId === getTournamentId(tournament)"
          ></slot>
        </div>
      </div>

      <!-- Load More Button (v2.1 only) -->
      <div
        v-if="apiVersion === 'v2.1' && hasNextPage"
        class="load-more-section"
      >
        <button
          @click="$emit('load-more')"
          :disabled="loadingMore"
          class="btn btn-secondary"
        >
          {{ loadingMore ? 'Loading...' : 'Load More Tournaments' }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
/**
 * Props for TournamentGrid component
 */
const props = defineProps({
  tournaments: {
    type: Array,
    default: null
  },
  loading: {
    type: Boolean,
    default: false
  },
  loadingMore: {
    type: Boolean,
    default: false
  },
  error: {
    type: String,
    default: null
  },
  searchQuery: {
    type: String,
    default: ''
  },
  filteredTournaments: {
    type: Array,
    default: () => []
  },
  expandedTournamentId: {
    type: [String, Number],
    default: null
  },
  hasNextPage: {
    type: Boolean,
    default: false
  },
  apiVersion: {
    type: String,
    default: 'v2.1'
  }
});

/**
 * Events emitted by TournamentGrid
 */
defineEmits(['update:searchQuery', 'load-more', 'toggle-details']);

/**
 * Helper to get tournament name (handles both v1 and v2.1 response structures)
 */
function getTournamentName(tournament) {
  return tournament.tournament?.name || tournament.name || '';
}

/**
 * Helper to get tournament ID
 */
function getTournamentId(tournament) {
  return tournament.tournament?.id || tournament.id;
}

/**
 * Helper to get tournament property
 */
function getTournamentProp(tournament, prop) {
  return tournament.tournament?.[prop] || tournament[prop];
}

/**
 * Format date string
 */
function formatDate(dateString) {
  if (!dateString) return '';
  return new Date(dateString).toLocaleString();
}
</script>

<style scoped>
.tournament-grid {
  margin-top: 1.5rem;
}

.status {
  padding: 1.5rem;
  border-radius: 8px;
  text-align: center;
  margin: 1rem 0;
}

.status.loading {
  background: #e3f2fd;
  color: #1976d2;
  font-weight: 500;
}

.status.error {
  background: #ffebee;
  color: #c62828;
  font-weight: 500;
}

.status.empty {
  background: #f5f5f5;
  color: #616161;
  font-weight: 500;
}

.status a {
  color: #667eea;
  text-decoration: underline;
}

.search-box {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.search-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.2s;
}

.search-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.search-info {
  font-size: 0.875rem;
  color: #666;
  font-style: italic;
}

.tournament-list {
  display: grid;
  gap: 1rem;
}

.tournament-card {
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  padding: 1.5rem;
  transition: all 0.2s;
}

.tournament-card:hover {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.tournament-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  gap: 1rem;
}

.tournament-header h4 {
  margin: 0;
  color: #333;
  font-size: 1.25rem;
  flex: 1;
}

.tournament-state {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

.tournament-state.pending {
  background: #fff3cd;
  color: #856404;
}

.tournament-state.underway,
.tournament-state.in_progress {
  background: #d1ecf1;
  color: #0c5460;
}

.tournament-state.complete,
.tournament-state.ended {
  background: #d4edda;
  color: #155724;
}

.tournament-details {
  margin-bottom: 1rem;
}

.tournament-details p {
  margin: 0.5rem 0;
  color: #666;
  font-size: 0.9rem;
}

.tournament-details strong {
  color: #333;
}

.btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-small {
  background: #667eea;
  color: white;
}

.btn-small:hover {
  background: #5568d3;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}

.btn-small.btn-active {
  background: #764ba2;
}

.btn-small.btn-active:hover {
  background: #653c8a;
}

.load-more-section {
  margin-top: 1.5rem;
  text-align: center;
}

.btn-secondary {
  background: #6c757d;
  color: white;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}

.btn-secondary:hover:not(:disabled) {
  background: #5a6268;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

.btn-secondary:disabled {
  background: #adb5bd;
  cursor: not-allowed;
  opacity: 0.6;
}
</style>
