<script setup lang="ts">
import { computed, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useDisplay } from 'vuetify'
import { usePeopleStore } from '@/stores/peopleStore'
import CollectionList from '@/components/CollectionList.vue'

const display = useDisplay()
const isMobile = computed(() => display.mdAndDown.value)

const peopleStore = usePeopleStore()

const {
  sidebarVisible,
  loading,
  collections,
  selectedCollection,
} = storeToRefs(peopleStore)

const {
  selectCollection,
  openEditCollection,
  openCreateCollection,
  createEntity,
  openImport,
} = peopleStore

const createOptions = [
  { type: 'individual', label: 'Individual', icon: 'mdi-account-plus' },
  { type: 'organization', label: 'Organization', icon: 'mdi-domain-plus' },
  { type: 'group', label: 'Group', icon: 'mdi-account-group' },
]

// VCF import file picker
const fileInputRef = ref<HTMLInputElement | null>(null)

function triggerFileInput() {
  fileInputRef.value?.click()
}

async function onFilesSelected(event: Event) {
  const input = event.target as HTMLInputElement
  const files = Array.from(input.files ?? [])
  input.value = '' // allow re-selecting the same file later
  if (files.length > 0) {
    await openImport(files)
  }
}

// Settings placeholder (no settings dialog exists for this module yet)
const showSettingsDialog = ref(false)
</script>

<template>
  <v-navigation-drawer
    v-model="sidebarVisible"
    contained
    :permanent="sidebarVisible && !isMobile"
    :temporary="isMobile"
    width="280"
    class="people-sidebar"
  >
    <div class="pa-3 d-flex flex-column h-100">
      <!-- Primary action -->
      <v-menu>
        <template #activator="{ props: menuProps }">
          <v-btn
            block
            color="primary"
            variant="tonal"
            prepend-icon="mdi-account-plus"
            append-icon="mdi-chevron-down"
            class="mb-4 justify-start"
            v-bind="menuProps"
          >
            New Contact
          </v-btn>
        </template>
        <v-list density="compact">
          <v-list-item
            v-for="option in createOptions"
            :key="option.type"
            :disabled="!selectedCollection"
            @click="createEntity(option.type)"
          >
            <template #prepend>
              <v-icon :icon="option.icon" />
            </template>
            <v-list-item-title>{{ option.label }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>

      <!-- Collections -->
      <CollectionList
        :collections="collections"
        :loading="loading"
        :selected-collection="selectedCollection"
        @create="openCreateCollection"
        @select="selectCollection"
        @edit="openEditCollection"
      />
    </div>

    <!-- Pinned utility footer -->
    <template #append>
      <v-divider />
      <div class="pa-2">
        <v-btn
          block
          variant="text"
          size="small"
          prepend-icon="mdi-database-import"
          class="justify-start text-medium-emphasis"
          @click="triggerFileInput"
        >
          Import VCF
        </v-btn>
        <v-btn
          block
          variant="text"
          size="small"
          prepend-icon="mdi-cog"
          class="justify-start text-medium-emphasis"
          @click="showSettingsDialog = true"
        >
          Settings
        </v-btn>
        <input
          ref="fileInputRef"
          type="file"
          accept=".vcf,text/vcard,text/x-vcard"
          multiple
          class="d-none"
          @change="onFilesSelected"
        />
      </div>
    </template>
  </v-navigation-drawer>

  <!-- Settings placeholder dialog -->
  <v-dialog v-model="showSettingsDialog" max-width="480">
    <v-card>
      <v-card-title class="d-flex align-center">
        <v-icon icon="mdi-cog" size="small" class="mr-2" />
        People Settings
      </v-card-title>
      <v-card-text class="text-medium-emphasis">
        No settings are available for this module yet.
      </v-card-text>
      <v-card-actions>
        <v-spacer />
        <v-btn variant="text" @click="showSettingsDialog = false">Close</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<style scoped>
.people-sidebar {
  border-right: 1px solid rgb(var(--v-border-color)) !important;
  overflow-y: auto;
}
</style>
