<template>
  <div class="contenthidden">
    <div class="contentscroll">
      <div class="admin-header">
        <h1>{{ $t('admin.taxiTools.title') }}</h1>
        <p>{{ $t('admin.taxiTools.description') }}</p>
      </div>

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

      <!-- {{ $t('admin.taxiTools.mapEditor.title') }} Tab -->
      <div v-if="activeTab === 'map-editor'" class="taxi-tools-admin">
        <div class="section-header">
          <h2>{{ $t('admin.taxiTools.mapEditor.title') }}</h2>
        </div>

        <div class="map-selection">
          <div class="map-count">
            <p>{{ $t('admin.taxiTools.mapEditor.availableMaps', { count: maps.length }) }}</p>
          </div>
          
          <div class="map-dropdown">
            <select v-model="selectedMapId" @change="onMapSelect" class="map-select">
              <option value="new">{{ $t('admin.taxiTools.mapEditor.newMap') }}</option>
              <option 
                v-for="map in maps" 
                :key="map.id" 
                :value="map.id"
                class="map-option"
              >
                {{ map.name }}
              </option>
            </select>
          </div>
        </div>

        <!-- Map Details -->
        <div v-if="selectedMapId !== 'new' && selectedMap" class="map-details">
          <div class="details-header">
            <h3>{{ selectedMap.name }}</h3>
          </div>
          <div class="details-content">
            <div class="form-group">
              <label for="mapName">{{ $t('admin.taxiTools.mapEditor.mapName') }}:</label>
              <input 
                id="mapName" 
                v-model="mapForm.name" 
                type="text" 
                required 
                :placeholder="$t('admin.taxiTools.mapEditor.mapName')"
              >
            </div>

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


            <div class="form-group">
              <label>{{ $t('admin.taxiTools.mapEditor.mapLayout') }}:</label>
              <div class="map-editor-container">
                <!-- Spielbrett (links) -->
                <div class="game-board">
                  <div class="board-grid" :style="boardGridStyle">
                    <div 
                      v-for="y in range(minY, maxY)" 
                      :key="`row-${y}`"
                      class="board-row"
                    >
                      <div 
                        v-for="x in range(minX, maxX)" 
                        :key="`${x},${y}`"
                        class="board-cell"
                        :class="getCellClasses(getCellAtPosition(x, y), `${x},${y}`)"
                        @click="selectCell(`${x},${y}`)"
                        :title="`Position: (${x}, ${y})`"
                      >
                        <img 
                          v-if="getCellAtPosition(x, y)?.tileType"
                          :src="`/images/taxi/map-${getCellAtPosition(x, y).tileType}.svg`"
                          :alt="getCellAtPosition(x, y).tileType"
                          class="tile-image"
                        />
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Tile-Palette (rechts) -->
                <div class="tile-palette">
                  <h4>{{ $t('admin.taxiTools.mapEditor.tilePalette') }}</h4>
                  <div class="tile-grid">
                    <div 
                      v-for="tileType in availableTileTypes" 
                      :key="tileType"
                      class="tile-option"
                      :class="{ 'selected': selectedTileType === tileType }"
                      @click="selectTileType(tileType)"
                      :title="tileType"
                    >
                      <img 
                        :src="`/images/taxi/map-${tileType}.svg`"
                        :alt="tileType"
                        class="tile-image"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="form-actions">
              <button type="button" class="btn btn-danger" @click="deleteSelectedMap">
                {{ $t('admin.taxiTools.mapEditor.delete') }}
              </button>
              <button type="button" class="btn btn-primary" @click="saveMap">
                {{ $t('admin.taxiTools.mapEditor.update') }}
              </button>
            </div>
          </div>
        </div>

        <!-- Map Form (nur für neue Maps) -->
        <div v-if="selectedMapId === 'new'" class="map-form">
          <div class="form-header">
            <h3>{{ $t('admin.taxiTools.mapEditor.newMap') }}</h3>
          </div>

          <form @submit.prevent="saveMap">
            <div class="form-group">
              <label for="mapName">{{ $t('admin.taxiTools.mapEditor.mapName') }}:</label>
              <input 
                id="mapName" 
                v-model="mapForm.name" 
                type="text" 
                required 
                :placeholder="$t('admin.taxiTools.mapEditor.mapName')"
              >
            </div>

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


            <div class="form-group">
              <label>{{ $t('admin.taxiTools.mapEditor.mapLayout') }}:</label>
              <div class="map-editor-container">
                <!-- Spielbrett (links) -->
                <div class="game-board">
                  <div class="board-grid" :style="boardGridStyle">
                    <div 
                      v-for="y in range(minY, maxY)" 
                      :key="`row-${y}`"
                      class="board-row"
                    >
                      <div 
                        v-for="x in range(minX, maxX)" 
                        :key="`${x},${y}`"
                        class="board-cell"
                        :class="getCellClasses(getCellAtPosition(x, y), `${x},${y}`)"
                        @click="selectCell(`${x},${y}`)"
                        :title="`Position: (${x}, ${y})`"
                      >
                        <img 
                          v-if="getCellAtPosition(x, y)?.tileType"
                          :src="`/images/taxi/map-${getCellAtPosition(x, y).tileType}.svg`"
                          :alt="getCellAtPosition(x, y).tileType"
                          class="tile-image"
                        />
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Tile-Palette (rechts) -->
                <div class="tile-palette">
                  <h4>{{ $t('admin.taxiTools.mapEditor.tilePalette') }}</h4>
                  <div class="tile-grid">
                    <div 
                      v-for="tileType in availableTileTypes" 
                      :key="tileType"
                      class="tile-option"
                      :class="{ 'selected': selectedTileType === tileType }"
                      @click="selectTileType(tileType)"
                      :title="tileType"
                    >
                      <img 
                        :src="`/images/taxi/map-${tileType}.svg`"
                        :alt="tileType"
                        class="tile-image"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="form-actions">
              <button type="button" class="btn btn-secondary" @click="cancelEdit">
                {{ $t('admin.taxiTools.mapEditor.cancel') }}
              </button>
              <button type="submit" class="btn btn-primary">
                {{ $t('admin.taxiTools.mapEditor.create') }}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
    
    <!-- Message Dialog -->
    <MessageDialog ref="messageDialog" />
  </div>
</template>

<script>
import SimpleTabs from '../../components/SimpleTabs.vue';
import MessageDialog from '../../dialogues/standard/MessageDialog.vue';
import apiClient from '../../utils/axios.js';

export default {
  name: 'AdminTaxiToolsView',
  components: {
    SimpleTabs,
    MessageDialog
  },
  data() {
    return {
      activeTab: 'map-editor',
      tabs: [
        {
          value: 'map-editor',
          label: this.$t('admin.taxiTools.mapEditor.title')
        }
      ],
      maps: [],
      selectedMapId: 'new',
      editingMap: null,
      mapForm: {
        name: '',
        description: '',
        mapData: []
      },
      boardCells: {}, // { "x,y": { tileType: "horizontal", x: 0, y: 0 } }
      availableTileTypes: [
        // 1. Zeile: bottomright, tdown, horizontal, bottomleft
        'cornerbottomright', 'tdown', 'horizontal', 'cornerbottomleft',
        // 2. Zeile: topright, tup, fuelhorizontal, topleft
        'cornertopright', 'tup', 'fuelhorizontal', 'cornertopleft',
        // 3. Zeile: tright, tleft, vertical, fuelvertical
        'tright', 'tleft', 'vertical', 'fuelvertical',
        // 4. Zeile: cross
        'cross'
      ],
      selectedCellKey: null,
      selectedTileType: null
    };
  },
  computed: {
    selectedMap() {
      if (this.selectedMapId === 'new') return null;
      return this.maps.find(m => m.id === this.selectedMapId);
    },
    
    boardWidth() {
      if (Object.keys(this.boardCells).length === 0) return 0;
      return this.maxX - this.minX + 1;
    },
    
    boardHeight() {
      if (Object.keys(this.boardCells).length === 0) return 0;
      return this.maxY - this.minY + 1;
    },
    
    minX() {
      if (Object.keys(this.boardCells).length === 0) return 0;
      return Math.min(...Object.values(this.boardCells).map(cell => cell.x));
    },
    
    maxX() {
      if (Object.keys(this.boardCells).length === 0) return 0;
      return Math.max(...Object.values(this.boardCells).map(cell => cell.x));
    },
    
    minY() {
      if (Object.keys(this.boardCells).length === 0) return 0;
      return Math.min(...Object.values(this.boardCells).map(cell => cell.y));
    },
    
    maxY() {
      if (Object.keys(this.boardCells).length === 0) return 0;
      return Math.max(...Object.values(this.boardCells).map(cell => cell.y));
    },
    
    boardGridStyle() {
      if (this.boardWidth === 0 || this.boardHeight === 0) {
        return {
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          minHeight: '200px',
          border: '2px dashed #ccc',
          background: '#f9f9f9'
        };
      }
      
      return {
        display: 'grid',
        gridTemplateColumns: `repeat(${this.boardWidth}, 50px)`,
        gridTemplateRows: `repeat(${this.boardHeight}, 50px)`,
        gap: '2px'
      };
    }
  },

  watch: {
    selectedMapId: {
      handler(newValue, oldValue) {
        if (newValue !== oldValue) {
          this.$nextTick(() => {
            this.onMapSelect();
          });
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.maps = [];
    this.editingMap = null;
    this.boardCells = {};
    
    this.$nextTick(() => {
      this.loadMaps();
      this.initializeBoard();
    });
  },

  methods: {
    async loadMaps() {
      try {
        const user = this.$store.getters.user;
        if (!user || !user.authCode) {
          setTimeout(() => this.loadMaps(), 100);
          return;
        }

        const response = await apiClient.get('/api/taxi-maps/maps');
        this.maps = response.data.data || [];
      } catch (error) {
        console.error('Fehler beim Laden der Maps:', error);
      }
    },


    async onMapSelect() {
      if (this.selectedMapId === 'new') {
        this.createMap();
      } else {
        const map = this.selectedMap;
        
        if (map) {
          await this.editMap(map);
        } else {
          console.warn('Keine Map gefunden für ID:', this.selectedMapId);
        }
      }
    },

    createMap() {
      this.selectedMapId = 'new';
      this.editingMap = null;
      this.selectedCellKey = null;
      this.selectedTileType = null;
      this.mapForm = {
        name: '',
        description: '',
        mapData: []
      };
      this.initializeBoard();
    },

    async editMap(map) {
      this.editingMap = map;
      this.selectedCellKey = null;
      this.selectedTileType = null;
      this.mapForm = {
        name: map.name,
        description: map.description,
        mapData: map.mapData || []
      };
      
      if (map.mapData && map.mapData.length > 0) {
        this.createBoardFromData(map.mapData);
      } else {
        this.initializeBoard();
      }
    },

    async deleteSelectedMap() {
      if (this.selectedMapId && this.selectedMapId !== 'new') {
        await this.deleteMap(this.selectedMapId);
        this.selectedMapId = 'new';
      }
    },

    selectCell(key) {
      // Wähle Position aus (Platzhalter)
      this.selectedCellKey = this.selectedCellKey === key ? null : key;
      // Setze Tile-Auswahl zurück
      this.selectedTileType = null;
    },

    selectTileType(tileType) {
      // Wähle Tile-Typ aus
      this.selectedTileType = this.selectedTileType === tileType ? null : tileType;
      
      // Wenn eine Position ausgewählt ist, platziere das Tile
      if (this.selectedCellKey !== null) {
        this.placeTile(this.selectedCellKey, tileType);
        // Setze Auswahl zurück nach dem Platzieren
        this.selectedCellKey = null;
        this.selectedTileType = null;
      }
    },

    getCellPosition(cellKey) {
      const [x, y] = cellKey.split(',').map(Number);
      return { x, y };
    },

    placeTile(cellKey, tileType) {
      const [x, y] = cellKey.split(',').map(Number);
      
      this.boardCells[cellKey] = { 
        tileType: tileType, 
        x: x, 
        y: y 
      };
      
      // Erweitere das Board um benachbarte leere Zellen falls nötig
      this.expandBoardIfNeeded(x, y, tileType);
    },

    expandBoardIfNeeded(x, y, tileType) {
      // Füge nur relevante Nachbarzellen basierend auf dem Tile-Typ hinzu
      const neighborsToAdd = this.getRelevantNeighbors(x, y, tileType);
      
      neighborsToAdd.forEach(neighbor => {
        const key = `${neighbor.x},${neighbor.y}`;
        if (!this.boardCells[key]) {
          this.boardCells[key] = { 
            tileType: null, 
            x: neighbor.x, 
            y: neighbor.y 
          };
        }
      });
    },

    getRelevantNeighbors(x, y, tileType) {
      const neighbors = [];
      
      switch (tileType) {
        case 'cornertopleft':
          // Nur links und oben (Kurve von oben nach links)
          neighbors.push({ x: x-1, y: y }, { x: x, y: y-1 });
          break;
        case 'cornertopright':
          // Nur rechts und oben (Kurve von oben nach rechts)
          neighbors.push({ x: x+1, y: y }, { x: x, y: y-1 });
          break;
        case 'cornerbottomleft':
          // Nur links und unten (Kurve von unten nach links)
          neighbors.push({ x: x-1, y: y }, { x: x, y: y+1 });
          break;
        case 'cornerbottomright':
          // Nur rechts und unten (Kurve von unten nach rechts)
          neighbors.push({ x: x+1, y: y }, { x: x, y: y+1 });
          break;
        case 'horizontal':
          // Nur links und rechts (horizontal = nur horizontal anschließbar)
          neighbors.push({ x: x-1, y: y }, { x: x+1, y: y });
          break;
        case 'vertical':
          // Nur oben und unten (vertical = nur vertikal anschließbar)
          neighbors.push({ x: x, y: y-1 }, { x: x, y: y+1 });
          break;
        case 'cross':
          // Alle vier Richtungen (cross = überall anschließbar)
          neighbors.push({ x: x-1, y: y }, { x: x+1, y: y }, { x: x, y: y-1 }, { x: x, y: y+1 });
          break;
        case 'fuelhorizontal':
          // Nur links und rechts (wie horizontal)
          neighbors.push({ x: x-1, y: y }, { x: x+1, y: y });
          break;
        case 'fuelvertical':
          // Nur oben und unten (wie vertical)
          neighbors.push({ x: x, y: y-1 }, { x: x, y: y+1 });
          break;
        case 'tup':
          // Nur oben, links und rechts (T nach oben = 3 Anschlüsse)
          neighbors.push({ x: x, y: y-1 }, { x: x-1, y: y }, { x: x+1, y: y });
          break;
        case 'tdown':
          // Nur unten, links und rechts (T nach unten = 3 Anschlüsse)
          neighbors.push({ x: x, y: y+1 }, { x: x-1, y: y }, { x: x+1, y: y });
          break;
        case 'tleft':
          // Nur links, oben und unten (T nach links = 3 Anschlüsse)
          neighbors.push({ x: x-1, y: y }, { x: x, y: y-1 }, { x: x, y: y+1 });
          break;
        case 'tright':
          // Nur rechts, oben und unten (T nach rechts = 3 Anschlüsse)
          neighbors.push({ x: x+1, y: y }, { x: x, y: y-1 }, { x: x, y: y+1 });
          break;
        default:
          // Fallback: keine Nachbarn
          return [];
      }
      
      return neighbors;
    },

    getCellClasses(cell, key) {
      const classes = [];
      
      if (this.selectedCellKey === key) {
        classes.push('selected');
      }
      
      if (cell.tileType) {
        classes.push('has-tile');
        
        // Prüfe Tile-Kompatibilität
        const compatibility = this.checkTileCompatibility(key, cell.tileType);
        classes.push(compatibility);
      } else {
        classes.push('empty');
      }
      
      return classes;
    },

    checkTileCompatibility(cellKey, tileType) {
      const [x, y] = cellKey.split(',').map(Number);
      
      // Prüfe umgebende Tiles
      const neighbors = {
        top: this.getTileAt(x, y - 1),
        right: this.getTileAt(x + 1, y),
        bottom: this.getTileAt(x, y + 1),
        left: this.getTileAt(x - 1, y)
      };
      
      // Wenn alle Nachbarn leer sind
      if (Object.values(neighbors).every(tile => !tile)) {
        return 'orange'; // Orange für leere Nachbarn
      }
      
      // Prüfe Kompatibilität mit vorhandenen Tiles
      const isCompatible = this.isTileCompatible(tileType, neighbors);
      
      return isCompatible ? 'green' : 'red';
    },

    getTileAt(x, y) {
      const key = `${x},${y}`;
      return this.boardCells[key]?.tileType;
    },

    getCellAtPosition(x, y) {
      const key = `${x},${y}`;
      const cell = this.boardCells[key];
      if (cell) {
        return cell;
      }
      // Erstelle leere Zelle für Grid-Position
      return { tileType: null, x, y };
    },

    range(start, end) {
      const result = [];
      for (let i = start; i <= end; i++) {
        result.push(i);
      }
      return result;
    },

    isTileCompatible(tileType, neighbors) {
      // Vereinfachte Kompatibilitätsprüfung
      // In der Realität würde hier die komplexe Logik aus streetCoordinates verwendet
      return true; // Für jetzt immer kompatibel
    },

    initializeBoard() {
      // Starte mit einem leeren Tile in der Mitte (0,0)
      this.boardCells = {
        '0,0': {
          tileType: null,
          x: 0,
          y: 0
        }
      };
    },

    createBoardFromData(mapData) {
      this.boardCells = {};
      
      // Konvertiere 2D Array zu Board-Zellen
      for (let row = 0; row < mapData.length; row++) {
        for (let col = 0; col < mapData[row].length; col++) {
          const tileType = mapData[row][col];
          if (tileType) {
            const key = `${col},${row}`;
            this.boardCells[key] = {
              tileType: tileType,
              x: col,
              y: row
            };
          }
        }
      }
      
      // Erweitere Board um leere Nachbarzellen
      Object.keys(this.boardCells).forEach(key => {
        const [x, y] = key.split(',').map(Number);
        const cell = this.boardCells[key];
        if (cell.tileType) {
          this.expandBoardIfNeeded(x, y, cell.tileType);
        }
      });
    },

    generateMapData() {
      if (Object.keys(this.boardCells).length === 0) {
        return [];
      }
      
      const mapData = [];
      for (let y = this.minY; y <= this.maxY; y++) {
        const row = [];
        for (let x = this.minX; x <= this.maxX; x++) {
          const key = `${x},${y}`;
          const cell = this.boardCells[key];
          row.push(cell?.tileType || null);
        }
        mapData.push(row);
      }
      return mapData;
    },


    cancelEdit() {
      this.editingMap = null;
      this.selectedMapId = 'new';
      this.selectedCellKey = null;
      this.selectedTileType = null;
      this.mapForm = {
        name: '',
        description: '',
        mapData: []
      };
      this.initializeBoard();
    },

    async saveMap() {
      try {
        const mapData = {
          ...this.mapForm,
          width: this.boardWidth,
          height: this.boardHeight,
          tileSize: 50,
          mapTypeId: 1, // Standard Map-Typ
          mapData: this.generateMapData()
        };

        let savedMap;
        const isUpdate = this.selectedMapId !== 'new';
        
        if (isUpdate) {
          // Map aktualisieren
          const response = await apiClient.put(`/api/taxi-maps/maps/${this.selectedMapId}`, mapData);
          savedMap = response.data.data;
        } else {
          // Neue Map erstellen
          const response = await apiClient.post('/api/taxi-maps/maps', mapData);
          savedMap = response.data.data;
        }

        this.editingMap = null;
        this.selectedMapId = 'new';
        this.selectedCellKey = null;
        this.selectedTileType = null;
        this.loadMaps();
        
        // Erfolgsmeldung anzeigen
        const message = isUpdate ? 'admin.taxiTools.mapEditor.updateSuccess' : 'admin.taxiTools.mapEditor.createSuccess';
        this.$refs.messageDialog.open(`tr:${message}`);
      } catch (error) {
        console.error('Fehler beim Speichern der Map:', error);
        alert('Fehler beim Speichern der Map');
      }
    },

    async deleteMap(mapId) {
      if (confirm('Möchtest du diese Map wirklich löschen?')) {
        try {
          await apiClient.delete(`/api/taxi-maps/maps/${mapId}`);
          this.loadMaps();
          
          // Erfolgsmeldung anzeigen
          this.$refs.messageDialog.open('tr:admin.taxiTools.mapEditor.deleteSuccess');
        } catch (error) {
          console.error('Fehler beim Löschen der Map:', error);
        }
      }
    }
  }
};
</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;
}

.taxi-tools-admin {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

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

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

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

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

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

.map-dropdown {
  display: flex;
  justify-content: center;
}

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

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

/* Map Details & Form */
.map-details,
.map-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;
}

.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,
.form-group select {
  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,
.form-group select:focus {
  outline: none;
  border-color: #F9A22C;
}

/* Map Editor Container */
.map-editor-container {
  display: flex;
  gap: 20px;
  margin-top: 10px;
}

/* Game Board (links) */
.game-board {
  flex: 1;
  max-width: 600px;
}


.board-grid {
  border: 2px solid #333;
  padding: 10px;
  background: #f5f5f5;
  min-height: 200px;
}

.board-row {
  display: contents;
}

.board-cell {
  width: 50px;
  height: 50px;
  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 #ffd700; /* Gelb für ausgewählte Zelle */
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.board-cell.empty {
  background: #f9f9f9;
}

.board-cell.has-tile {
  background: #e8f5e8;
}

.board-cell.green {
  border-color: #4CAF50;
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}

.board-cell.red {
  border-color: #F44336;
  box-shadow: 0 0 5px rgba(244, 67, 54, 0.5);
}

.board-cell.orange {
  border-color: #FF9800;
  box-shadow: 0 0 5px rgba(255, 152, 0, 0.5);
}

.tile-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Tile Palette (rechts) */
.tile-palette {
  flex: 0 0 300px;
}

.tile-palette h4 {
  margin-bottom: 15px;
  color: #F9A22C;
  font-size: 18px;
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 50px);
  grid-template-rows: repeat(4, 50px);
  gap: 5px;
  border: 2px solid #ddd;
  padding: 10px;
  background: #f9f9f9;
  border-radius: 8px;
}

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

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

.tile-option.selected {
  border-color: #F9A22C;
  background: #fff3cd;
  box-shadow: 0 0 10px rgba(249, 162, 44, 0.5);
}

/* 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: 1200px) {
  .map-editor-container {
    flex-direction: column;
  }
  
  .tile-palette {
    flex: none;
    max-width: none;
  }
  
  .tile-grid {
    grid-template-columns: repeat(4, 50px);
    grid-template-rows: repeat(4, 50px);
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .taxi-tools-admin {
    padding: 15px;
  }
  
  .form-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .map-select {
    min-width: 250px;
  }
  
  .board-grid {
    grid-template-columns: repeat(auto-fit, 40px) !important;
    grid-template-rows: repeat(auto-fit, 40px) !important;
  }
  
  .board-cell {
    width: 40px;
    height: 40px;
  }
  
  .tile-grid {
    grid-template-columns: repeat(4, 40px);
    grid-template-rows: repeat(4, 40px);
  }
  
  .tile-option {
    width: 40px;
    height: 40px;
  }
}
</style>