<template>
  <div class="flex flex-col gap-6">
    <!-- Upload Card -->
    <div class="bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <div class="flex items-center justify-between p-4 bg-gray-700 border-b border-gray-600">
        <div class="flex items-center gap-2 text-lg font-semibold">
          <i class="fas fa-upload text-blue-500"></i>
          <span>Upload sprites</span>
        </div>
      </div>
      <div class="p-6">
        <drop-zone @files-uploaded="handleUpload" />
      </div>
    </div>

    <!-- Quick Actions -->
    <div class="bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <div class="flex items-center justify-between p-4 bg-gray-700 border-b border-gray-600">
        <div class="flex items-center gap-2 text-lg font-semibold">
          <i class="fas fa-bolt text-blue-500"></i>
          <span>Quick Actions</span>
        </div>
      </div>
      <div class="p-6">
        <div class="flex flex-col gap-3">
          <button @click="openSpritesModal" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500">
            <i class="fas fa-images"></i> Manage sprites
            <span v-if="sprites.length > 0" class="ml-auto bg-blue-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
              {{ sprites.length }}
            </span>
          </button>

          <button @click="openSettingsModal" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500"><i class="fas fa-cog"></i> Settings & tools</button>

          <button @click="openPreviewModal" :disabled="sprites.length === 0" class="flex items-center gap-2 bg-blue-500 border border-blue-500 text-white rounded px-4 py-2 text-sm transition-colors disabled:opacity-60 disabled:cursor-not-allowed hover:bg-blue-600 hover:border-blue-600">
            <i class="fas fa-play"></i> Preview animation
          </button>
        </div>
      </div>
    </div>

    <!-- Stats Card -->
    <div v-if="sprites.length > 0" class="bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <div class="flex items-center justify-between p-4 bg-gray-700 border-b border-gray-600">
        <div class="flex items-center gap-2 text-lg font-semibold">
          <i class="fas fa-chart-bar text-blue-500"></i>
          <span>Stats</span>
        </div>
      </div>
      <div class="p-4">
        <div class="grid grid-cols-2 gap-4">
          <div class="bg-gray-700 p-3 rounded">
            <div class="text-sm text-gray-400">Sprites</div>
            <div class="text-xl font-semibold">{{ sprites.length }}</div>
          </div>
          <div class="bg-gray-700 p-3 rounded">
            <div class="text-sm text-gray-400">Cell Size</div>
            <div class="text-xl font-semibold">{{ cellSize.width }}×{{ cellSize.height }}</div>
          </div>
          <div class="bg-gray-700 p-3 rounded">
            <div class="text-sm text-gray-400">Zoom</div>
            <div class="text-xl font-semibold">{{ Math.round(zoomLevel * 100) }}%</div>
          </div>
          <div class="bg-gray-700 p-3 rounded">
            <div class="text-sm text-gray-400">Columns</div>
            <div class="text-xl font-semibold">{{ columns }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue';
  import { type Sprite, useSpritesheetStore } from '../composables/useSpritesheetStore';
  import DropZone from './DropZone.vue';

  const store = useSpritesheetStore();
  const sprites = computed(() => store.sprites.value);
  const cellSize = computed(() => store.cellSize);
  const zoomLevel = computed(() => store.zoomLevel.value);
  const columns = computed(() => store.columns.value);

  const handleUpload = (sprites: Sprite[]) => {
    // The dropzone component handles adding sprites to the store
    // This is just for event handling if needed
  };

  const openPreviewModal = () => {
    if (store.sprites.value.length === 0) {
      store.showNotification('Please add sprites first', 'error');
      return;
    }

    store.isModalOpen.value = true;
  };

  const openSpritesModal = () => {
    store.isSpritesModalOpen.value = true;
  };

  const openSettingsModal = () => {
    store.isSettingsModalOpen.value = true;
  };
</script>
