<script setup lang="ts">
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useMosaicStore } from '@/stores/mosaic'
import mozaicLogo from '@/assets/mozaic-logo.svg'

defineEmits<{ resetViewport: [] }>()
const store = useMosaicStore()
const { hasImage, canUndo, canRedo, regions } = storeToRefs(store)
const imageInput = ref<HTMLInputElement | null>(null)
const projectInput = ref<HTMLInputElement | null>(null)

function loadImage(files: FileList | null): void {
  const file = files?.[0]
  if (file) void store.loadImage(file, file.name)
}

function importProject(files: FileList | null): void {
  const file = files?.[0]
  if (file) void store.importProjectFile(file)
}
</script>

<template>
  <header class="toolbar">
    <div class="brand"><img class="brand-mark" :src="mozaicLogo" alt="" width="32" height="32" /><span>Mozaic</span></div>
    <div class="toolbar-actions">
      <button class="button primary" type="button" @click="imageInput?.click()">Načítať obrázok</button>
      <button class="icon-button" type="button" :disabled="!canUndo" title="Späť (Ctrl+Z)" @click="store.undo">↶</button>
      <button class="icon-button" type="button" :disabled="!canRedo" title="Znova (Ctrl+Y)" @click="store.redo">↷</button>
      <button class="button" type="button" :disabled="!hasImage" @click="$emit('resetViewport')">Prispôsobiť</button>
      <span class="divider" />
      <button class="button" type="button" @click="projectInput?.click()">Import JSON</button>
      <button class="button danger-quiet" type="button" :disabled="!regions.length" @click="store.clearResults">Vymazať výsledky</button>
    </div>
    <input ref="imageInput" hidden type="file" accept="image/png,image/jpeg,image/webp" @change="loadImage(($event.target as HTMLInputElement).files)" />
    <input ref="projectInput" hidden type="file" accept="application/json,.json" @change="importProject(($event.target as HTMLInputElement).files)" />
  </header>
</template>

<style scoped>
.toolbar { position: sticky; top: 0; z-index: 10; display: flex; min-height: 58px; align-items: center; gap: 24px; padding: 8px 16px; border-bottom: 1px solid #dbe1e8; background: rgba(255,255,255,.96); }
.brand { display: flex; align-items: center; gap: 9px; color: #172033; font-weight: 760; letter-spacing: -.02em; }
.brand-mark { display: block; width: 32px; height: 32px; flex: 0 0 32px; }
.toolbar-actions { display: flex; min-width: 0; align-items: center; gap: 7px; overflow-x: auto; }
.divider { width: 1px; height: 26px; margin: 0 2px; background: #dbe1e8; }
@media (max-width: 700px) { .toolbar { align-items: flex-start; gap: 10px; padding: 8px 10px; } .brand span:last-child { display: none; } }
</style>
