<template>
  <div class="contenthidden">
    <div class="contentscroll">
      <div class="admin-header">
        <h1>{{ $t('admin.match3.title') }}</h1>
        <p>Verwalte Minigames, Level und Konfigurationen</p>
      </div>

      <SimpleTabs v-model="activeTab" :tabs="tabs" />

      <!-- Match3 Levels Tab -->
      <div v-if="activeTab === 'match3-levels'" class="match3-admin">
        <section class="workflow-hero surface-card">
          <div>
            <span class="workflow-hero__eyebrow">Arbeitsfluss</span>
            <h2>{{ $t('admin.match3.title') }}</h2>
            <p>Erst Level waehlen, dann Spielfeld und Ziele anpassen und erst am Ende speichern.</p>
          </div>
          <div class="workflow-hero__meta">
            <span class="workflow-pill">{{ currentModeLabel }}</span>
            <span class="workflow-pill">{{ levels.length }} Level</span>
          </div>
        </section>

        <section class="workflow-grid">
          <article class="workflow-card surface-card">
            <span class="workflow-card__step">1</span>
            <h3>Level waehlen</h3>
            <p>Bestehendes Level oeffnen oder sofort mit einer neuen Vorlage starten.</p>
          </article>
          <article class="workflow-card surface-card">
            <span class="workflow-card__step">2</span>
            <h3>Spielfeld bauen</h3>
            <p>Groesse, Zuege, Kacheln und Layout zuerst festziehen, bevor Ziele folgen.</p>
          </article>
          <article class="workflow-card surface-card">
            <span class="workflow-card__step">3</span>
            <h3>Ziele speichern</h3>
            <p>Objectives nur dann scharf stellen, wenn Grunddaten und Board bereits stimmen.</p>
          </article>
        </section>

        <div class="section-header">
          <h2>{{ $t('admin.match3.title') }}</h2>
        </div>

        <div class="level-selection">
          <div class="level-count">
            <p>{{ $t('admin.match3.availableLevels', { count: levels.length }) }}</p>
          </div>
          
          <div class="level-dropdown">
            <select v-model="selectedLevelId" @change="onLevelSelect" class="level-select">
              <option value="new">{{ $t('admin.match3.newLevel') }}</option>
              <option 
                v-for="level in levels" 
                :key="level.id" 
                :value="level.id"
                class="level-option"
              >
                {{ $t('admin.match3.levelFormat', { number: level.order, name: level.name }) }}
              </option>
            </select>
            <button type="button" class="btn btn-secondary level-select-action" @click="createLevel">
              {{ $t('admin.match3.newLevel') }}
            </button>
          </div>
          <p class="level-selection__hint">
            {{ isCreatingLevel ? 'Du erstellst gerade ein neues Level.' : 'Du bearbeitest ein bestehendes Level mit allen verbundenen Objectives.' }}
          </p>
        </div>

        <section class="admin-summary-grid">
          <article class="admin-summary-card surface-card">
            <span class="admin-summary-card__label">Modus</span>
            <strong>{{ currentModeLabel }}</strong>
            <p>{{ selectedLevel ? selectedLevel.name : 'Neue Vorlage mit leerem Spielfeld' }}</p>
          </article>
          <article class="admin-summary-card surface-card">
            <span class="admin-summary-card__label">Spielfeld</span>
            <strong>{{ levelForm.boardWidth }} x {{ levelForm.boardHeight }}</strong>
            <p>{{ levelForm.moveLimit }} Zuege, {{ levelForm.tileTypes.length }} aktive Tile-Typen.</p>
          </article>
          <article class="admin-summary-card surface-card">
            <span class="admin-summary-card__label">Objectives</span>
            <strong>{{ objectiveCount }}</strong>
            <p>{{ objectiveCount ? 'Ziele vorhanden und bearbeitbar.' : 'Noch keine Zieldefinition hinterlegt.' }}</p>
          </article>
        </section>

        <!-- Level Details -->
        <div v-if="selectedLevelId !== 'new' && selectedLevel" class="level-details">
          <div class="details-header">
            <h3>{{ selectedLevel.name }}</h3>
            <p>Bestehendes Level anpassen, ohne den Kontext des aktuellen Spielflusses zu verlieren.</p>
          </div>
          <div class="details-content">
            <div class="form-group">
              <label for="levelName">{{ $t('admin.match3.levelName') }}:</label>
              <input 
                id="levelName" 
                v-model="levelForm.name" 
                type="text" 
                required 
                :placeholder="$t('admin.match3.levelName')"
              >
            </div>

            <div class="form-group">
              <label for="levelDescription">{{ $t('admin.match3.levelDescription') }}:</label>
              <textarea 
                id="levelDescription" 
                v-model="levelForm.description" 
                required 
                :placeholder="$t('admin.match3.levelDescription')"
                rows="3"
              ></textarea>
            </div>

            <div class="form-row">
              <div class="form-group">
                <label for="boardWidth">{{ $t('admin.match3.boardWidth') }}:</label>
                <input 
                  id="boardWidth" 
                  v-model.number="levelForm.boardWidth" 
                  type="number" 
                  min="3" 
                  max="12" 
                  required
                  @change="updateBoardMatrix"
                >
              </div>

              <div class="form-group">
                <label for="boardHeight">{{ $t('admin.match3.boardHeight') }}:</label>
                <input 
                  id="boardHeight" 
                  v-model.number="levelForm.boardHeight" 
                  type="number" 
                  min="3" 
                  max="12" 
                  required
                  @change="updateBoardMatrix"
                >
              </div>

              <div class="form-group">
                <label for="moveLimit">{{ $t('admin.match3.moveLimit') }}:</label>
                <input 
                  id="moveLimit" 
                  v-model.number="levelForm.moveLimit" 
                  type="number" 
                  min="5" 
                  max="100" 
                  required
                >
              </div>

              <div class="form-group">
                <label for="levelOrder">{{ $t('admin.match3.levelOrder') }}:</label>
                <input 
                  id="levelOrder" 
                  v-model.number="levelForm.order" 
                  type="number" 
                  min="1" 
                  required
                >
              </div>
            </div>

            <div class="form-group">
              <label>{{ $t('admin.match3.boardLayout') }}:</label>
              <div class="board-editor">
                <div class="board-matrix" :style="boardMatrixStyle">
                  <div 
                    v-for="(cell, index) in boardMatrix" 
                    :key="index"
                    class="board-cell"
                    :class="{ 
                      'active': cell.active, 
                      'inactive': !cell.active,
                      'random': cell.tileType === 'r',
                      'empty': cell.tileType === 'o',
                      'selected': selectedCellIndex === index
                    }"
                    @click="selectCell(index)"
                  >
                    <span v-if="cell.tileType === 'o'" class="cell-status">⬜</span>
                    <span v-else-if="cell.tileType === 'r'" class="cell-status">🎲</span>
                    <span v-else class="cell-status">{{ getTileSymbol(cell.tileType) }}</span>
                  </div>
                </div>
                
                <!-- Minimale Tile-Auswahl -->
                <div v-if="selectedCellIndex !== null" class="tile-selection-minimal">
                  <span class="selection-label">Position {{ selectedCellIndex }}:</span>
                  <div class="tile-options-minimal">
                    <span class="tile-option-mini" @click="setTileType(selectedCellIndex, 'o')" title="Leer">⬜</span>
                    <span class="tile-option-mini" @click="setTileType(selectedCellIndex, 'r')" title="Zufällig">🎲</span>
                    <span 
                      v-for="tileType in levelForm.tileTypes" 
                      :key="tileType"
                      class="tile-option-mini"
                      @click="setTileType(selectedCellIndex, tileType)"
                      :title="tileType"
                    >{{ getTileSymbol(tileType) }}</span>
                  </div>
                </div>
                
                <div class="board-controls">
                  <button type="button" class="btn btn-secondary" @click="fillAllActive">
                    {{ $t('admin.match3.boardControls.fillAll') }}
                  </button>
                  <button type="button" class="btn btn-secondary" @click="clearAll">
                    {{ $t('admin.match3.boardControls.clearAll') }}
                  </button>
                  <button type="button" class="btn btn-secondary" @click="invertBoard">
                    {{ $t('admin.match3.boardControls.invert') }}
                  </button>
                </div>
              </div>
            </div>

            <div class="form-group">
              <label>{{ $t('admin.match3.tileTypes') }}:</label>
              <div class="tile-types-selection">
                <label v-for="tileType in availableTileTypes" :key="tileType" class="tile-type-checkbox">
                  <input 
                    type="checkbox" 
                    :value="tileType" 
                    v-model="levelForm.tileTypes"
                  >
                  <span class="tile-symbol">{{ getTileSymbol(tileType) }}</span>
                  <span class="tile-name">{{ tileType }}</span>
                </label>
              </div>
            </div>

            <div class="form-actions">
              <button type="button" class="btn btn-danger" @click="deleteSelectedLevel">
                {{ $t('admin.match3.delete') }}
              </button>
              <button type="button" class="btn btn-primary" :disabled="!isLevelFormValid" @click="saveLevel">
                {{ $t('admin.match3.update') }}
              </button>
            </div>
          </div>
        </div>

        <!-- Level Objectives Section (immer verfügbar) -->
        <div v-if="selectedLevelId !== 'new'" class="objectives-section-container">
          <div class="form-header">
            <h3>{{ $t('admin.match3.levelObjectives') }}</h3>
          </div>
          
          <div class="objectives-section">
            <div class="objectives-header">
              <h4>{{ $t('admin.match3.objectivesTitle') }}</h4>
              <button type="button" class="btn btn-secondary btn-sm" @click="addObjective">
                {{ $t('admin.match3.addObjective') }}
              </button>
            </div>
            
            <div v-if="levelForm.objectives && levelForm.objectives.length > 0" class="objectives-list">
              <div v-for="(objective, index) in levelForm.objectives" :key="index" class="objective-item">
                <div class="objective-header">
                  <span class="objective-number">#{{ index + 1 }}</span>
                  <button type="button" class="btn btn-danger btn-sm" @click="removeObjective(index)">
                    {{ $t('admin.match3.removeObjective') }}
                  </button>
                </div>
                
                <div class="objective-form">
                  <div class="form-row">
                    <div class="form-group">
                      <label>{{ $t('admin.match3.objectiveType') }}:</label>
                      <select v-model="objective.type" class="form-control">
                        <option value="score">{{ $t('admin.match3.objectiveTypeScore') }}</option>
                        <option value="matches">{{ $t('admin.match3.objectiveTypeMatches') }}</option>
                        <option value="moves">{{ $t('admin.match3.objectiveTypeMoves') }}</option>
                        <option value="time">{{ $t('admin.match3.objectiveTypeTime') }}</option>
                        <option value="special">{{ $t('admin.match3.objectiveTypeSpecial') }}</option>
                      </select>
                    </div>
                    
                    <div class="form-group">
                      <label>{{ $t('admin.match3.objectiveOperator') }}:</label>
                      <select v-model="objective.operator" class="form-control">
                        <option value=">=">{{ $t('admin.match3.operatorGreaterEqual') }}</option>
                        <option value="<=">{{ $t('admin.match3.operatorLessEqual') }}</option>
                        <option value="=">{{ $t('admin.match3.operatorEqual') }}</option>
                        <option value=">">{{ $t('admin.match3.operatorGreater') }}</option>
                        <option value="<">{{ $t('admin.match3.operatorLess') }}</option>
                      </select>
                    </div>
                    
                    <div class="form-group">
                      <label>{{ $t('admin.match3.objectiveTarget') }}:</label>
                      <input 
                        v-model.number="objective.target" 
                        type="number" 
                        min="1" 
                        class="form-control"
                        :placeholder="$t('admin.match3.objectiveTargetPlaceholder')"
                      >
                    </div>
                    
                    <div class="form-group">
                      <label>{{ $t('admin.match3.objectiveOrder') }}:</label>
                      <input 
                        v-model.number="objective.order" 
                        type="number" 
                        min="1" 
                        class="form-control"
                        :placeholder="$t('admin.match3.objectiveTargetPlaceholder')"
                      >
                    </div>
                  </div>
                  
                  <div class="form-group">
                    <label>{{ $t('admin.match3.objectiveDescription') }}:</label>
                    <input 
                      v-model="objective.description" 
                      type="text" 
                      class="form-control"
                      :placeholder="$t('admin.match3.objectiveDescriptionPlaceholder')"
                    >
                  </div>
                  
                  <div class="form-group">
                    <label class="checkbox-label">
                      <input 
                        type="checkbox" 
                        v-model="objective.isRequired"
                      >
                      {{ $t('admin.match3.objectiveRequired') }}
                    </label>
                  </div>
                </div>
              </div>
            </div>
            
            <div v-else class="no-objectives">
              <p>{{ $t('admin.match3.noObjectives') }}</p>
            </div>
          </div>
        </div>

        <!-- Level Form (nur für neue Level) -->
        <div v-if="selectedLevelId === 'new'" class="level-form">
          <div class="form-header">
            <h3>{{ $t('admin.match3.newLevel') }}</h3>
          </div>

          <form @submit.prevent="saveLevel">
            <div class="form-group">
              <label for="levelName">{{ $t('admin.match3.levelName') }}:</label>
              <input 
                id="levelName" 
                v-model="levelForm.name" 
                type="text" 
                required 
                :placeholder="$t('admin.match3.levelName')"
              >
            </div>

            <div class="form-group">
              <label for="levelDescription">{{ $t('admin.match3.levelDescription') }}:</label>
              <textarea 
                id="levelDescription" 
                v-model="levelForm.description" 
                required 
                :placeholder="$t('admin.match3.levelDescription')"
                rows="3"
              ></textarea>
            </div>

            <div class="form-row">
              <div class="form-group">
                <label for="boardWidth">{{ $t('admin.match3.boardWidth') }}:</label>
                <input 
                  id="boardWidth" 
                  v-model.number="levelForm.boardWidth" 
                  type="number" 
                  min="3" 
                  max="12" 
                  required
                  @change="updateBoardMatrix"
                >
              </div>

              <div class="form-group">
                <label for="boardHeight">{{ $t('admin.match3.boardHeight') }}:</label>
                <input 
                  id="boardHeight" 
                  v-model.number="levelForm.boardHeight" 
                  type="number" 
                  min="3" 
                  max="12" 
                  required
                  @change="updateBoardMatrix"
                >
              </div>

              <div class="form-group">
                <label for="moveLimit">{{ $t('admin.match3.moveLimit') }}:</label>
                <input 
                  id="moveLimit" 
                  v-model.number="levelForm.moveLimit" 
                  type="number" 
                  min="5" 
                  max="100" 
                  required
                >
              </div>

              <div class="form-group">
                <label for="levelOrder">{{ $t('admin.match3.levelOrder') }}:</label>
                <input 
                  id="levelOrder" 
                  v-model.number="levelForm.order" 
                  type="number" 
                  min="1" 
                  required
                >
              </div>
            </div>

            <div class="form-group">
              <label>{{ $t('admin.match3.boardLayout') }}:</label>
              <div class="board-editor">
                <div class="board-matrix" :style="boardMatrixStyle">
                  <div 
                    v-for="(cell, index) in boardMatrix" 
                    :key="index"
                    class="board-cell"
                    :class="{ 
                      'active': cell.active, 
                      'inactive': !cell.active,
                      'random': cell.tileType === 'r',
                      'empty': cell.tileType === 'o',
                      'selected': selectedCellIndex === index
                    }"
                    @click="selectCell(index)"
                  >
                    <span v-if="cell.tileType === 'o'" class="cell-status">⬜</span>
                    <span v-else-if="cell.tileType === 'r'" class="cell-status">🎲</span>
                    <span v-else class="cell-status">{{ getTileSymbol(cell.tileType) }}</span>
                  </div>
                </div>
                
                <!-- Minimale Tile-Auswahl -->
                <div v-if="selectedCellIndex !== null" class="tile-selection-minimal">
                  <span class="selection-label">Position {{ selectedCellIndex }}:</span>
                  <div class="tile-options-minimal">
                    <span class="tile-option-mini" @click="setTileType(selectedCellIndex, 'o')" title="Leer">⬜</span>
                    <span class="tile-option-mini" @click="setTileType(selectedCellIndex, 'r')" title="Zufällig">🎲</span>
                    <span 
                      v-for="tileType in levelForm.tileTypes" 
                      :key="tileType"
                      class="tile-option-mini"
                      @click="setTileType(selectedCellIndex, tileType)"
                      :title="tileType"
                    >{{ getTileSymbol(tileType) }}</span>
                  </div>
                </div>
                
                <div class="board-controls">
                  <button type="button" class="btn btn-secondary" @click="fillAllActive">
                    {{ $t('admin.match3.boardControls.fillAll') }}
                  </button>
                  <button type="button" class="btn btn-secondary" @click="clearAll">
                    {{ $t('admin.match3.boardControls.clearAll') }}
                  </button>
                  <button type="button" class="btn btn-secondary" @click="invertBoard">
                    {{ $t('admin.match3.boardControls.invert') }}
                  </button>
                </div>
              </div>
            </div>

            <div class="form-group">
              <label>{{ $t('admin.match3.tileTypes') }}:</label>
              <div class="tile-types-selection">
                <label v-for="tileType in availableTileTypes" :key="tileType" class="tile-type-checkbox">
                  <input 
                    type="checkbox" 
                    :value="tileType" 
                    v-model="levelForm.tileTypes"
                  >
                  <span class="tile-symbol">{{ getTileSymbol(tileType) }}</span>
                  <span class="tile-name">{{ tileType }}</span>
                </label>
              </div>
            </div>

            <!-- Level Objectives Section -->
            <div class="form-group">
              <label>{{ $t('admin.match3.levelObjectives') }}:</label>
              <div class="objectives-section">
                <div class="objectives-header">
                  <h4>{{ $t('admin.match3.objectivesTitle') }}</h4>
                  <button type="button" class="btn btn-secondary btn-sm" @click="addObjective">
                    {{ $t('admin.match3.addObjective') }}
                  </button>
                </div>
                
                <div v-if="levelForm.objectives && levelForm.objectives.length > 0" class="objectives-list">
                  <div v-for="(objective, index) in levelForm.objectives" :key="index" class="objective-item">
                    <div class="objective-header">
                      <span class="objective-number">#{{ index + 1 }}</span>
                      <button type="button" class="btn btn-danger btn-sm" @click="removeObjective(index)">
                        {{ $t('admin.match3.removeObjective') }}
                      </button>
                    </div>
                    
                    <div class="objective-form">
                      <div class="form-row">
                        <div class="form-group">
                          <label>{{ $t('admin.match3.objectiveType') }}:</label>
                          <select v-model="objective.type" class="form-control">
                            <option value="score">{{ $t('admin.match3.objectiveTypeScore') }}</option>
                            <option value="matches">{{ $t('admin.match3.objectiveTypeMatches') }}</option>
                            <option value="moves">{{ $t('admin.match3.objectiveTypeMoves') }}</option>
                            <option value="time">{{ $t('admin.match3.objectiveTypeTime') }}</option>
                            <option value="special">{{ $t('admin.match3.objectiveTypeSpecial') }}</option>
                          </select>
                        </div>
                        
                        <div class="form-group">
                          <label>{{ $t('admin.match3.objectiveOperator') }}:</label>
                          <select v-model="objective.operator" class="form-control">
                            <option value=">=">{{ $t('admin.match3.operatorGreaterEqual') }}</option>
                            <option value="<=">{{ $t('admin.match3.operatorLessEqual') }}</option>
                            <option value="=">{{ $t('admin.match3.operatorEqual') }}</option>
                            <option value=">">{{ $t('admin.match3.operatorGreater') }}</option>
                            <option value="<">{{ $t('admin.match3.operatorLess') }}</option>
                          </select>
                        </div>
                        
                        <div class="form-group">
                          <label>{{ $t('admin.match3.objectiveTarget') }}:</label>
                          <input 
                            v-model.number="objective.target" 
                            type="number" 
                            min="1" 
                            class="form-control"
                            :placeholder="$t('admin.match3.objectiveTargetPlaceholder')"
                          >
                        </div>
                        
                        <div class="form-group">
                          <label>{{ $t('admin.match3.objectiveOrder') }}:</label>
                          <input 
                            v-model.number="objective.order" 
                            type="number" 
                            min="1" 
                            class="form-control"
                            :placeholder="$t('admin.match3.objectiveOrderPlaceholder')"
                          >
                        </div>
                      </div>
                      
                      <div class="form-group">
                        <label>{{ $t('admin.match3.objectiveDescription') }}:</label>
                        <input 
                          v-model="objective.description" 
                          type="text" 
                          class="form-control"
                          :placeholder="$t('admin.match3.objectiveDescriptionPlaceholder')"
                        >
                      </div>
                      
                      <div class="form-group">
                        <label class="checkbox-label">
                          <input 
                            type="checkbox" 
                            v-model="objective.isRequired"
                          >
                          {{ $t('admin.match3.objectiveRequired') }}
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
                
                <div v-else class="no-objectives">
                  <p>{{ $t('admin.match3.noObjectives') }}</p>
                </div>
              </div>
            </div>

            <div class="form-actions">
              <button type="button" class="btn btn-secondary" @click="cancelEdit">
                {{ $t('admin.match3.cancel') }}
              </button>
              <button type="submit" class="btn btn-primary" :disabled="!isLevelFormValid">
                {{ $t('admin.match3.create') }}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SimpleTabs from '../../components/SimpleTabs.vue';
import apiClient from '../../utils/axios.js';
import { showError, showSuccess } from '@/utils/feedback.js';

export default {
  name: 'AdminMinigamesView',
  components: {
    SimpleTabs
  },
  data() {
    return {
      activeTab: 'match3-levels',
      tabs: [
        {
          value: 'match3-levels',
          label: this.$t('admin.match3.title')
        }
      ],
      levels: [],
      selectedLevelId: 'new',
      editingLevel: null,
      levelForm: {
        name: '',
        description: '',
        boardWidth: 5,
        boardHeight: 5,
        moveLimit: 15,
        order: 1,
        tileTypes: ['gem', 'star', 'heart'],
        objectives: []
      },
      boardMatrix: [],
      availableTileTypes: ['gem', 'star', 'heart', 'diamond', 'circle', 'square', 'crown', 'rainbow'],
      selectedCellIndex: null
    };
  },
  computed: {
    boardMatrixStyle() {
      return {
        gridTemplateColumns: `repeat(${this.levelForm.boardWidth}, 1fr)`,
        gridTemplateRows: `repeat(${this.levelForm.boardHeight}, 1fr)`
      };
    },
    isCreatingLevel() {
      return this.selectedLevelId === 'new';
    },
    selectedLevel() {
      if (this.selectedLevelId === 'new') return null;
      return this.levels.find(l => l.id === this.selectedLevelId);
    },
    objectiveCount() {
      return this.levelForm.objectives?.length || 0;
    },
    currentModeLabel() {
      return this.isCreatingLevel ? 'Neues Level' : 'Level bearbeiten';
    },
    isLevelFormValid() {
      return Boolean(
        this.levelForm.name?.trim() &&
        this.levelForm.description?.trim() &&
        this.levelForm.boardWidth >= 3 &&
        this.levelForm.boardHeight >= 3 &&
        this.levelForm.moveLimit >= 5 &&
        this.levelForm.order >= 1 &&
        this.levelForm.tileTypes?.length
      );
    }
  },

  watch: {
    selectedLevelId: {
      handler(newValue, oldValue) {
        if (newValue !== oldValue) {
          this.$nextTick(() => {
            this.onLevelSelect();
          });
        }
      },
      immediate: true
    }
  },
  mounted() {
    // Explizite Initialisierung der Daten
    this.levels = [];
    this.editingLevel = null;
    this.boardMatrix = [];
    
    // Warte kurz, bis der Store geladen ist
    this.$nextTick(() => {
      this.loadLevels();
      this.updateBoardMatrix();
    });
  },

  methods: {
    async loadLevels() {
      try {
        // Prüfe ob der Store geladen ist
        const user = this.$store.getters.user;
        if (!user || !user.authCode) {
          setTimeout(() => this.loadLevels(), 100);
          return;
        }

        const response = await apiClient.get('/api/admin/minigames/match3/levels');
        this.levels = response.data;
      } catch (error) {
        console.error('Fehler beim Laden der Level:', error);
      }
    },

    async onLevelSelect() {
      if (this.selectedLevelId === 'new') {
        this.createLevel();
      } else {
        const level = this.selectedLevel;
        
        if (level) {
          await this.editLevel(level);
        } else {
          console.warn('Kein Level gefunden für ID:', this.selectedLevelId);
        }
      }
    },

    createLevel() {
      this.selectedLevelId = 'new';
      this.editingLevel = null;
      this.selectedCellIndex = null;
      this.levelForm = {
        name: '',
        description: '',
        boardWidth: 5,
        boardHeight: 5,
        moveLimit: 15,
        order: 1,
        tileTypes: ['gem', 'star', 'heart'],
        objectives: []
      };
      this.updateBoardMatrix();
    },

    async editLevel(level) {
      this.editingLevel = level;
      this.selectedCellIndex = null;
      this.levelForm = {
        name: level.name,
        description: level.description,
        boardWidth: level.boardWidth,
        boardHeight: level.boardHeight,
        moveLimit: level.moveLimit,
        order: level.order,
        tileTypes: level.tileTypes || ['gem', 'star', 'heart'],
        objectives: level.objectives || []
      };
      
      // Lade Objectives für dieses Level
      try {
        const objectives = await this.loadObjectivesForLevel(level.id);
        this.levelForm.objectives = objectives;
      } catch (error) {
        console.error('Fehler beim Laden der Objectives:', error);
        this.levelForm.objectives = [];
      }
      
      if (level.boardLayout) {
        this.createBoardMatrixFromLayout(level.boardLayout);
      } else {
        this.updateBoardMatrix();
      }
    },

    async deleteSelectedLevel() {
      if (this.selectedLevelId && this.selectedLevelId !== 'new') {
        await this.deleteLevel(this.selectedLevelId);
        this.selectedLevelId = 'new';
      }
    },

    getTileSymbol(type) {
      const symbols = {
        gem: '💎',
        star: '⭐',
        heart: '❤️',
        diamond: '🔷',
        circle: '⭕',
        square: '🟦',
        crown: '👑',
        rainbow: '🌈'
      };
      return symbols[type] || '❓';
    },

    // Neue Methoden für das Tile-Auswahl-System
    selectCell(index) {
      this.selectedCellIndex = this.selectedCellIndex === index ? null : index;
    },

    setTileType(index, tileType) {
      if (tileType === 'o') {
        this.boardMatrix[index] = { active: false, tileType: 'o', index: index };
      } else if (tileType === 'r') {
        this.boardMatrix[index] = { active: true, tileType: 'r', index: index };
      } else {
        this.boardMatrix[index] = { active: true, tileType: tileType, index: index };
      }
      this.selectedCellIndex = null;
    },

    // Mapping für Tile-Typen zu Zeichen
    getTileTypeChar(tileType) {
      const charMap = {
        'gem': 'g',
        'star': 's', 
        'heart': 'h',
        'diamond': 'd',
        'circle': 'c',
        'square': 'q',
        'crown': 'w',
        'rainbow': 'b'
      };
      return charMap[tileType] || 'x';
    },

    // Konvertiert das Board für das Speichern
    convertBoardForSave() {
      return this.boardMatrix.map(cell => {
        if (cell.tileType === 'o') return 'o'; // Leer
        if (cell.tileType === 'r') return 'x'; // Zufällig wird als "x" gespeichert
        return this.getTileTypeChar(cell.tileType); // Spezifischer Tile-Typ
      });
    },

    cancelEdit() {
      this.editingLevel = null;
      this.selectedLevelId = 'new';
      this.selectedCellIndex = null;
      this.levelForm = {
        name: '',
        description: '',
        boardWidth: 5,
        boardHeight: 5,
        moveLimit: 15,
        order: 1,
        tileTypes: ['gem', 'star', 'heart'],
        objectives: []
      };
      this.updateBoardMatrix();
    },

    updateBoardMatrix() {
      const totalCells = this.levelForm.boardWidth * this.levelForm.boardHeight;
      this.boardMatrix = [];
      
      for (let i = 0; i < totalCells; i++) {
        this.boardMatrix.push({ active: false, tileType: 'o', index: i });
      }
    },

    createBoardMatrixFromLayout(layout) {
      const lines = layout.split('\n');
      this.levelForm.boardHeight = lines.length;
      this.levelForm.boardWidth = lines[0]?.length || 5;
      
      this.boardMatrix = [];
      let index = 0;
      
      for (let row = 0; row < lines.length; row++) {
        const line = lines[row];
        for (let col = 0; col < line.length; col++) {
          const char = line[col];
          let tileType = 'o';
          let active = false;
          
          if (char === 'x') {
            active = true;
            tileType = 'r'; // x wird als zufällig interpretiert
          } else if (char === 'r') {
            active = true;
            tileType = 'r';
          } else if (char === 'g') {
            active = true;
            tileType = 'gem';
          } else if (char === 's') {
            active = true;
            tileType = 'star';
          } else if (char === 'h') {
            active = true;
            tileType = 'heart';
          } else if (char === 'd') {
            active = true;
            tileType = 'diamond';
          } else if (char === 'c') {
            active = true;
            tileType = 'circle';
          } else if (char === 'q') {
            active = true;
            tileType = 'square';
          } else if (char === 'w') {
            active = true;
            tileType = 'crown';
          } else if (char === 'b') {
            active = true;
            tileType = 'rainbow';
          }
          
          this.boardMatrix.push({ 
            active: active, 
            tileType: tileType,
            index: index++ 
          });
        }
      }
    },

    fillAllActive() {
      this.boardMatrix.forEach(cell => {
        cell.active = true;
        cell.tileType = 'r'; // Alle auf zufällig setzen
      });
    },

    clearAll() {
      this.boardMatrix.forEach(cell => {
        cell.active = false;
        cell.tileType = 'o';
      });
    },

    invertBoard() {
      this.boardMatrix.forEach(cell => {
        cell.active = !cell.active;
        if (cell.active && cell.tileType === 'o') {
          cell.tileType = 'r'; // Wenn aktiviert, auf zufällig setzen
        } else if (!cell.active) {
          cell.tileType = 'o';
        }
      });
    },

    generateBoardLayout() {
      let layout = '';
      for (let row = 0; row < this.levelForm.boardHeight; row++) {
        for (let col = 0; col < this.levelForm.boardWidth; col++) {
          const index = row * this.levelForm.boardWidth + col;
          const cell = this.boardMatrix[index];
          if (cell.tileType === 'o') {
            layout += 'o'; // Leer
          } else if (cell.tileType === 'r') {
            layout += 'x'; // Zufällig wird als "x" gespeichert
          } else {
            layout += this.getTileTypeChar(cell.tileType); // Spezifischer Tile-Typ
          }
        }
        if (row < this.levelForm.boardHeight - 1) {
          layout += '\n';
        }
      }
      return layout;
    },

    async saveLevel() {
      try {
        const levelData = {
          ...this.levelForm,
          boardLayout: this.generateBoardLayout()
        };
        const wasCreating = this.selectedLevelId === 'new';

        let savedLevel;
        if (this.selectedLevelId !== 'new') {
          // Level aktualisieren
          const response = await apiClient.put(`/api/admin/minigames/match3/levels/${this.selectedLevelId}`, levelData);
          savedLevel = response.data;
        } else {
          // Neues Level erstellen
          const response = await apiClient.post('/api/admin/minigames/match3/levels', levelData);
          savedLevel = response.data;
        }

        // Objectives speichern, falls vorhanden
        if (this.levelForm.objectives && this.levelForm.objectives.length > 0) {
          for (const objective of this.levelForm.objectives) {
            const objectiveData = {
              ...objective,
              levelId: savedLevel.id
            };

            if (objective.id) {
              // Objective aktualisieren
              await apiClient.put(`/api/admin/minigames/match3/objectives/${objective.id}`, objectiveData);
            } else {
              // Neues Objective erstellen
              await apiClient.post('/api/admin/minigames/match3/objectives', objectiveData);
            }
          }
        }

        this.editingLevel = null;
        this.selectedLevelId = 'new';
        this.selectedCellIndex = null;
        this.loadLevels();
        showSuccess(this, wasCreating ? 'Level wurde erstellt.' : 'Level wurde aktualisiert.');
      } catch (error) {
        console.error('Fehler beim Speichern des Levels:', error);
        showError(this, 'Fehler beim Speichern des Levels');
      }
    },

    async deleteLevel(levelId) {
      if (confirm('Möchtest du dieses Level wirklich löschen?')) {
        try {
          await apiClient.delete(`/api/admin/minigames/match3/levels/${levelId}`);
          this.loadLevels();
          showSuccess(this, 'Level wurde geloescht.');
        } catch (error) {
          console.error('Fehler beim Löschen des Levels:', error);
          showError(this, 'Fehler beim Loeschen des Levels');
        }
      }
    },

    // Objectives Management Methods
    addObjective() {
      if (!this.levelForm.objectives) {
        this.levelForm.objectives = [];
      }
      
      const newObjective = {
        type: 'score',
        description: '',
        target: 100,
        operator: '>=',
        order: this.levelForm.objectives.length + 1,
        isRequired: true
      };
      
      this.levelForm.objectives.push(newObjective);
    },

    removeObjective(index) {
      if (confirm('Möchtest du dieses Objective wirklich löschen?')) {
        this.levelForm.objectives.splice(index, 1);
        
        // Aktualisiere die Reihenfolge
        this.levelForm.objectives.forEach((objective, idx) => {
          objective.order = idx + 1;
        });
      }
    },

    async loadObjectivesForLevel(levelId) {
      try {
        // Objectives sind jetzt direkt in den Level-Daten enthalten
        const level = this.levels.find(l => l.id == levelId);
        if (level && level.objectives && Array.isArray(level.objectives)) {
          return level.objectives;
        }
        
        return [];
      } catch (error) {
        console.error('Fehler beim Laden der Objectives:', error);
        return [];
      }
    }
  }
};
</script>

<style scoped>
.admin-header {
  text-align: center;
  margin-bottom: 30px;
}

.admin-header h1 {
  color: #F9A22C;
  margin-bottom: 10px;
}

.admin-header p {
  color: #666;
  font-size: 16px;
}

.match3-admin {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.workflow-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
  margin-bottom: 16px;
}

.workflow-hero h2 {
  margin: 0 0 8px;
}

.workflow-hero p {
  margin: 0;
  color: var(--color-text-secondary);
}

.workflow-hero__eyebrow,
.admin-summary-card__label {
  display: inline-flex;
  margin-bottom: 4px;
  color: var(--color-text-muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.workflow-hero__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.workflow-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(248, 162, 43, 0.12);
  color: #8a5411;
  font-weight: 700;
}

.workflow-grid,
.admin-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.workflow-card,
.admin-summary-card {
  padding: 18px;
}

.workflow-card__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: rgba(248, 162, 43, 0.12);
  color: #8a5411;
  font-weight: 700;
}

.workflow-card h3,
.admin-summary-card strong {
  margin: 0 0 8px;
}

.admin-summary-card strong {
  display: block;
  font-size: 1.2rem;
}

.workflow-card p,
.admin-summary-card p {
  margin: 0;
  color: var(--color-text-secondary);
}

.section-header {
  margin-bottom: 30px;
  text-align: center;
}

.section-header h2 {
  color: #F9A22C;
  font-size: 24px;
  margin-bottom: 10px;
}

/* Level Selection */
.level-selection {
  margin-bottom: 30px;
  text-align: center;
}

.level-count {
  margin-bottom: 15px;
}

.level-count p {
  font-size: 18px;
  color: #333;
  font-weight: 500;
}

.level-dropdown {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.level-select {
  padding: 10px 15px;
  font-size: 16px;
  border: 2px solid #ddd;
  border-radius: 8px;
  background: white;
  min-width: 300px;
  cursor: pointer;
}

.level-select:focus {
  outline: none;
  border-color: #F9A22C;
}

.level-select-action {
  min-width: 180px;
}

.level-selection__hint {
  margin: 12px 0 0;
  color: var(--color-text-secondary);
}

/* Level Details & Form */
.level-details,
.level-form {
  background: white;
  border: 2px solid #ddd;
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 30px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.details-header,
.form-header {
  margin-bottom: 25px;
  text-align: center;
}

.details-header h3,
.form-header h3 {
  color: #F9A22C;
  font-size: 22px;
  margin: 0;
}

.details-header p {
  margin: 8px 0 0;
  color: var(--color-text-secondary);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #333;
  font-size: 16px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #F9A22C;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

/* Board Editor */
.board-editor {
  margin-top: 10px;
}

.board-matrix {
  display: grid;
  gap: 2px;
  margin-bottom: 15px;
  border: 2px solid #333;
  padding: 10px;
  background: #f5f5f5;
}

.board-cell {
  width: 40px;
  height: 40px;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: white;
  transition: all 0.2s ease;
  position: relative;
}

.board-cell:hover {
  border-color: #F9A22C;
  transform: scale(1.05);
}

.board-cell.selected {
  border: 3px solid #ff0000;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

.board-cell.active {
  background: #4CAF50;
  color: white;
  border-color: #45a049;
}

.board-cell.inactive {
  background: #f44336;
  color: white;
  border-color: #da190b;
}

.board-cell.random {
  background: #FF9800;
  color: white;
  border-color: #F57C00;
}

.board-cell.empty {
  background: #9E9E9E;
  color: white;
  border-color: #757575;
}

.cell-status {
  font-size: 16px;
  font-weight: bold;
}

/* Minimale Tile Selection */
.tile-selection-minimal {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 10px 0;
  padding: 10px 15px;
  background: #f0f0f0;
  border-radius: 6px;
  border: 1px solid #ddd;
}

.selection-label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
  white-space: nowrap;
}

.tile-options-minimal {
  display: flex;
  gap: 8px;
  align-items: center;
}

.tile-option-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  cursor: pointer;
  border: 2px solid #ddd;
  border-radius: 4px;
  background: white;
  transition: all 0.2s ease;
  font-size: 18px;
}

.tile-option-mini:hover {
  border-color: #F9A22C;
  transform: scale(1.1);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.board-controls {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.board-controls .btn {
  padding: 8px 16px;
  font-size: 14px;
}

/* Tile Types Selector */
.tile-types-selection {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.tile-type-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #f9f9f9;
  transition: all 0.2s ease;
}

.tile-type-checkbox:hover {
  background: #f0f0f0;
  border-color: #F9A22C;
}

.tile-type-checkbox input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.tile-symbol {
  font-size: 20px;
  margin-right: 8px;
}

.tile-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

/* Objectives Section Container */
.objectives-section-container {
  background: white;
  border: 2px solid #ddd;
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 30px;
}

.objectives-section-container .form-header {
  margin-bottom: 20px;
  text-align: center;
}

.objectives-section-container .form-header h3 {
  color: #F9A22C;
  font-size: 24px;
  margin-bottom: 10px;
}

/* Objectives Section Styles */
.objectives-section {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f9f9f9;
}

.objectives-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ddd;
}

.objectives-header h4 {
  margin: 0;
  color: #F9A22C;
  font-size: 18px;
}

.btn-sm {
  padding: 8px 16px;
  font-size: 14px;
}

.objectives-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.objective-item {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.objective-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.objective-number {
  font-weight: 600;
  color: #F9A22C;
  font-size: 16px;
}

.objective-form .form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin-bottom: 15px;
}

.objective-form .form-group {
  margin-bottom: 15px;
}

.objective-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: #333;
}

.objective-form .form-control {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.objective-form .form-control:focus {
  outline: none;
  border-color: #F9A22C;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.no-objectives {
  text-align: center;
  padding: 30px;
  color: #666;
  font-style: italic;
}

/* Form Actions */
.form-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.btn {
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

.btn-primary {
  background: #F9A22C;
  color: white;
}

.btn-primary:hover {
  background: #e8941f;
  transform: translateY(-2px);
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background: #5a6268;
  transform: translateY(-2px);
}

.btn-danger {
  background: #dc3545;
  color: white;
}

.btn-danger:hover {
  background: #c82333;
  transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 768px) {
  .match3-admin {
    padding: 15px;
  }

  .workflow-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .workflow-grid,
  .admin-summary-grid {
    grid-template-columns: 1fr;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .board-controls {
    flex-direction: column;
    align-items: center;
  }
  
  .form-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .level-select {
    min-width: 250px;
  }
  
  .tile-selection-minimal {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .selection-label {
    font-size: 12px;
  }
  
  .tile-option-mini {
    width: 28px;
    height: 28px;
    font-size: 16px;
  }
}
</style>
