<template>
  <div v-if="villageData && villageData.tiles" class="village-container">
    <div :class="villageGridWrapperClass">
      <!-- Empty corner for alignment -->
      <div class="empty-corner"></div>

      
      <!-- The actual grid -->
      <div class="village-grid" :style="gridStyle">
        <div
          v-for="tile in villageData.tiles"
          :key="tile.id"
          class="tile"
          :class="tileClasses(tile)"
          :style="{ 'grid-column': tile.x + 1, 'grid-row': gridHeight - tile.y }"
          @click="$emit('tile-click', tile)"
        >
          <span class="tile-content">{{ getTileEmoji(tile) }}</span>
        </div>
      </div>
    </div>
  </div>
  <div v-else class="loading">
    Загрузка деревни...
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

// --- Props & Emits ---
const props = defineProps({
  villageData: {
    type: Object,
    required: true,
  },
  isOnboarding: {
    type: Boolean,
    default: false,
  },
  selectedTile: {
    type: Object,
    default: null,
  },
});

const villageGridWrapperClass = computed(() => ({
  'village-grid-wrapper': true,
  'is-onboarding': props.isOnboarding,
}));

defineEmits(['tile-click']);

// --- Grid Dimensions ---
const gridWidth = computed(() => {
  if (!props.villageData?.tiles || props.villageData.tiles.length === 0) return 5; // Default
  return Math.max(...props.villageData.tiles.map(t => t.x)) + 1;
});

const gridHeight = computed(() => {
  if (!props.villageData?.tiles || props.villageData.tiles.length === 0) return 7; // Default
  return Math.max(...props.villageData.tiles.map(t => t.y)) + 1;
});



const gridStyle = computed(() => ({
  'grid-template-columns': `repeat(${gridWidth.value}, var(--tile-size))`,
  'grid-template-rows': `repeat(${gridHeight.value}, var(--tile-size))`,
}));

// --- Labels ---
const colLabels = computed(() => {
  return Array.from({ length: gridWidth.value }, (_, i) => String.fromCharCode(65 + i));
});

const rowLabels = computed(() => {
  return Array.from({ length: gridHeight.value }, (_, i) => gridHeight.value - i);
});


// --- Tile Display Logic ---
const getTileEmoji = (tile) => {
  if (tile.terrainState === 'CLEARING') return '⏳';
  if (tile.object) {
    switch (tile.object.type) {
      case 'HOUSE': return '🏠';
      case 'FIELD': return '🌱';
      case 'LUMBERJACK': return '🪓';
      case 'QUARRY': return '⛏️';
      case 'WELL': return '💧';
      default: return '❓';
    }
  }
  switch (tile.terrainType) {
    case 'BLOCKED_TREE': return '🌳';
    case 'BLOCKED_STONE': return '🪨';
    case 'EMPTY': return '';
    default: return '❓';
  }
};

const tileClasses = (tile) => {
  return {
    'tile-blocked': tile.terrainType === 'BLOCKED_TREE' || tile.terrainType === 'BLOCKED_STONE',
    'tile-object': !!tile.object,
    'tile-empty': tile.terrainType === 'EMPTY' && !tile.object,
    'tile-clearing': tile.terrainState === 'CLEARING',
    'selected': props.selectedTile && props.selectedTile.id === tile.id,
  };
};
</script>

<style scoped>
.village-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
  --tile-size: clamp(40px, 10vw, 55px);
  padding: 0 16px; /* Add padding for mobile */
  box-sizing: border-box;
}

.village-grid-wrapper {
  display: grid;
  gap: 8px; /* Increased gap */
  border-radius: 16px; /* Rounded wrapper */
  background-color: var(--container-bg-color);
  padding: 12px; /* Increased padding */
  width: fit-content;
  max-width: 100%; /* Ensure it doesn't overflow parent */
  margin: 0 auto;
  box-shadow: 0 8px 30px rgba(0,0,0,0.06);
}

.empty-corner, .col-labels, .row-labels {
  opacity: 0.6;
  font-size: 0.8rem;
}

.col-labels {
  grid-column: 2 / -1; /* Dynamic spanning */
  grid-row: 8;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 20px;
}

.col-label {
  width: var(--tile-size);
  text-align: center;
  line-height: 20px;
}

.row-labels {
  grid-column: 1;
  grid-row: 1 / -1; /* Dynamic spanning */
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 20px;
}

.row-label {
  height: var(--tile-size);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 20px;
}

.village-grid {
  grid-column: 2 / -1; /* Dynamic spanning */
  grid-row: 1 / -1; /* Dynamic spanning */
  display: grid;
  gap: 8px; /* Increased gap */
}

.tile {
  width: var(--tile-size);
  height: var(--tile-size);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative; /* For selection pseudo-elements */
}

.tile.tile-empty {
  background-color: rgba(0,0,0,0.02);
  border: 2px dashed var(--border-color);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.03);
}
.tile.tile-empty:hover {
  background-color: rgba(0,0,0,0.04);
  border-color: var(--primary-color-light);
}

.tile.tile-blocked {
  background-color: #EBE5D7; /* A soft, earthy tone */
  border: 1px solid #DCD5C6;
}
.tile.tile-blocked:hover {
  transform: translateY(-2px);
}

.tile.tile-object {
    background-color: #c8ffcf;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
    border: 1px solid #39af50;
}
.tile.tile-object:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.tile.tile-clearing {
  background-color: #ffe0b2; /* A soft orange/yellow for "in progress" */
  border: 1px solid #ffcc80;
}

.tile.selected {
  box-shadow: 0 0 0 3px var(--primary-color);
  transform: scale(1.05);
}

.tile-content {
  font-size: calc(var(--tile-size) * 0.5); /* Make emoji scale with tile */
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.village-grid-wrapper.is-onboarding {
  padding: 8px;
  gap: 4px;
}

.village-grid-wrapper.is-onboarding .col-label,
.village-grid-wrapper.is-onboarding .row-label {
  font-size: 0.7rem;
}

@media (max-width: 480px) {
  .village-grid-wrapper {
    gap: 4px;
    padding: 8px;
  }
  .village-grid {
    gap: 4px;
  }
}

@media (max-width: 768px) {
  /* On mobile, we calculate a tile size that fits the screen.
     7 columns (5 tiles + 2 labels) and 6 gaps.
     The parent .village-container has 16px padding on each side.
     So, (100vw - 32px - (6 * 4px)) / 7 = tile size
     We'll use a simplified version with vw units. */
  .village-container {
    --tile-size: clamp(35px, 11vw, 50px);
  }

  .tile {
    /* aspect-ratio: 1 / 1; 
    height: auto;  */
    /* Disabling aspect ratio for now to prevent massive height on narrow screens */
  }

  .tile.tile-empty:hover {
    background-color: rgba(0,0,0,0.02); /* Reset to non-hover state */
    border-color: var(--border-color); /* Reset to non-hover state */
  }

  .tile.tile-blocked:hover {
    transform: translateY(0); /* Reset to non-hover state */
  }

  .tile.tile-object:hover {
    transform: translateY(0); /* Reset to non-hover state */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07); /* Reset to non-hover state */
  }
}
</style>

