<script setup>
import {
  EyeIcon,
  ArrowPathIcon,
  BeakerIcon,
  ArrowDownOnSquareIcon,
  ArrowDownTrayIcon,
} from "@heroicons/vue/24/outline";
import { Button } from "@/Components/ui/button";
import { Badge } from "@/Components/ui/badge";

const props = defineProps({
  importId: [Number, String],
  isCompleted: Boolean,
  processing: Boolean,
  savingMappings: Boolean,
  canProcess: Boolean,
  selectedMappingsCount: Number,
});
const emits = defineEmits([
  "preview",
  "save-mappings",
  "process-import",
  "simulate",
  "download",
]);
</script>
<template>
  <div class="flex flex-wrap gap-2 items-center">
    <!-- Download button - always visible -->
    <Button
      variant="secondary"
      @click.prevent="$emit('download')"
      :disabled="!importId"
      title="Preznesi originalno uvozno datoteko"
    >
      <ArrowDownTrayIcon class="h-4 w-4" />
      Prenos datoteko
    </Button>

    <!-- Other action buttons - only when not completed -->
    <div class="flex flex-wrap gap-2 items-center" v-if="!isCompleted">
      <Button variant="secondary" @click.prevent="$emit('preview')" :disabled="!importId">
        <EyeIcon class="h-4 w-4 mr-2" />
        Predogled vrstic
      </Button>
      <Button
        variant="default"
        class="bg-orange-600 hover:bg-orange-700"
        @click.prevent="$emit('save-mappings')"
        :disabled="!importId || processing || savingMappings || isCompleted"
        title="Shrani preslikave za ta uvoz"
      >
        <span
          v-if="savingMappings"
          class="inline-block h-4 w-4 mr-2 border-2 border-white/70 border-t-transparent rounded-full animate-spin"
        ></span>
        <ArrowPathIcon v-else class="h-4 w-4 mr-2" />
        <span>Shrani preslikave</span>
        <Badge v-if="selectedMappingsCount" variant="secondary" class="ml-2 text-xs">{{
          selectedMappingsCount
        }}</Badge>
      </Button>
      <Button
        variant="default"
        class="bg-purple-600 hover:bg-purple-700"
        @click.prevent="$emit('process-import')"
        :disabled="!canProcess"
      >
        <BeakerIcon class="h-4 w-4 mr-2" />
        {{ processing ? "Obdelava…" : "Obdelaj uvoz" }}
      </Button>
      <Button
        variant="default"
        class="bg-blue-600 hover:bg-blue-700"
        @click.prevent="$emit('simulate')"
        :disabled="!importId || processing"
      >
        <ArrowDownOnSquareIcon class="h-4 w-4 mr-2" />
        Simulacija vnosa
      </Button>
    </div>
  </div>
</template>
