<template>
  <v-app-bar color="primary" app>
    <v-app-bar-title>Inventory Manager</v-app-bar-title>
    <v-spacer></v-spacer>
    <v-btn
      prepend-icon="mdi-plus"
      @click="openAddStorageDialog"
    >
      Add Storage Space
    </v-btn>
    
    <!-- Dialog for adding new storage space -->
    <v-dialog v-model="showDialog" max-width="500px">
      <v-card>
        <v-card-title>Add New Storage Space</v-card-title>
        <v-card-text>
          <v-form @submit.prevent="addStorageSpace">
            <v-text-field
              v-model="newStorage.location"
              label="Location"
              required
              :error-messages="locationError"
            ></v-text-field>
            
            <v-select
              v-model="newStorage.parentId"
              :items="storageSpaces"
              item-title="location"
              item-value="id"
              label="Parent Storage (optional)"
              clearable
            >
              <template v-slot:item="{ item, props }">
                <v-list-item v-bind="props" :title="item.raw.location || `Storage #${item.raw.id}`"></v-list-item>
              </template>
            </v-select>
            
            <v-alert
              v-if="error"
              type="error"
              variant="tonal"
              class="mt-3"
            >
              {{ error }}
            </v-alert>
          </v-form>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="grey" variant="text" @click="showDialog = false">Cancel</v-btn>
          <v-btn 
            color="primary" 
            variant="elevated" 
            @click="addStorageSpace"
            :loading="loading"
          >
            Save
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-app-bar>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { useStorageStore } from '@/stores/storage';

const storageStore = useStorageStore();
const showDialog = ref(false);
const loading = ref(false);
const error = ref<string | null>(null);
const locationError = ref<string>('');

const newStorage = ref({
  location: '',
  parentId: null as number | null
});

const storageSpaces = computed(() => storageStore.storageSpaces);

function openAddStorageDialog() {
  // Reset form
  newStorage.value = {
    location: '',
    parentId: null
  };
  error.value = null;
  locationError.value = '';
  showDialog.value = true;
}

async function addStorageSpace() {
  // Validate
  if (!newStorage.value.location.trim()) {
    locationError.value = 'Location is required';
    return;
  }
  
  locationError.value = '';
  loading.value = true;
  error.value = null;
  
  try {
    await storageStore.createStorageSpace({
      location: newStorage.value.location,
      parentId: newStorage.value.parentId
    });
    
    showDialog.value = false;
  } catch (err: any) {
    error.value = err.message || 'Failed to create storage space';
  } finally {
    loading.value = false;
  }
}
</script>
