<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useDisplay } from 'vuetify'
import { useModuleStore } from '@KTXC/stores/moduleStore'
import { usePeopleStore } from '@/stores/peopleStore'
import CollectionList from '@/components/CollectionList.vue'
import CollectionEditor from '@/components/CollectionEditor.vue'
import PersonList from '@/components/PersonList.vue'
import PersonEditor from '@/components/PersonEditor.vue'

// Vuetify display
const display = useDisplay()

// Check if people manager is available
const moduleStore = useModuleStore()
const isPeopleManagerAvailable = computed(() => {
  return moduleStore.has('people_manager') || moduleStore.has('PeopleManager')
})

// Store
const peopleStore = usePeopleStore()

const {
  sidebarVisible,
  loading,
  selectedCollection,
  selectedEntity,
  entityEditorMode,
  showCollectionEditor,
  editingCollection,
  collectionEditorMode,
  collections,
} = storeToRefs(peopleStore)

const {
  initialize,
  selectCollection,
  openEditCollection,
  openCreateCollection,
  selectEntity,
  createEntity,
  startEditingEntity,
  cancelEditingEntity,
  closeEntityEditor,
  saveEntity,
  deleteEntity,
  saveCollection,
  deleteCollection,
} = peopleStore

onMounted(async () => {
  try {
    await initialize()
  } catch (error) {
    console.error('[People] - Failed to load data from PeopleManager:', error)
  }
})
</script>

<template>
  <div class="people-container">
    <!-- Top Navigation Bar -->
    <v-app-bar elevation="0" class="people-toolbar border-b">
      <template #prepend>
        <v-btn
          icon="mdi-menu"
          variant="text"
          @click="sidebarVisible = !sidebarVisible"
        ></v-btn>
      </template>

      <v-app-bar-title class="d-flex align-center">
        <v-icon size="28" color="primary" class="mr-2">mdi-account-multiple</v-icon>
        <span class="text-h6 font-weight-bold">People Manager</span>
      </v-app-bar-title>

      <v-spacer></v-spacer>
    </v-app-bar>

    <!-- Main Content Area -->
    <div class="people-content">
      <!-- Sidebar Navigation Drawer -->
      <v-navigation-drawer
        v-model="sidebarVisible"
        :permanent="display.mdAndUp.value"
        :temporary="display.smAndDown.value"
        width="280"
        class="people-sidebar"
      >
        <div class="pa-4 d-flex flex-column h-100">
          <CollectionList
            :collections="collections"
            :loading="loading"
            :selected-collection="selectedCollection"
            @select="selectCollection"
            @edit="openEditCollection"
          />
          
          <v-divider class="my-2" />
          
          <div class="sidebar-footer">
            <div class="d-flex align-center mb-2">
              <v-icon icon="mdi-plus-circle" size="small" class="mr-2" />
              <span class="text-subtitle-2 font-weight-bold">Create</span>
            </div>
            <v-btn
              variant="text"
              prepend-icon="mdi-account-plus"
              size="small"
              block
              class="justify-start"
              :disabled="!selectedCollection"
              @click="createEntity('individual')"
            >
              Individual
            </v-btn>
            <v-btn
              variant="text"
              prepend-icon="mdi-domain-plus"
              size="small"
              block
              class="justify-start"
              :disabled="!selectedCollection"
              @click="createEntity('organization')"
            >
              Organization
            </v-btn>
            <v-btn
              variant="text"
              prepend-icon="mdi-account-group"
              size="small"
              block
              class="justify-start"
              :disabled="!selectedCollection"
              @click="createEntity('group')"
            >
              Group
            </v-btn>
            <v-btn
              variant="text"
              prepend-icon="mdi-book-plus"
              size="small"
              block
              class="justify-start"
              @click="openCreateCollection"
            >
              Address Book
            </v-btn>
          </div>
        </div>
      </v-navigation-drawer>

      <!-- Main View -->
      <div class="people-main">
        <v-alert
          v-if="!isPeopleManagerAvailable"
          type="warning"
          variant="tonal"
          closable
          class="mb-4"
        >
          <v-alert-title class="d-flex align-center">
            <v-icon icon="mdi-alert-circle" class="mr-2" />
            People Manager Not Available
          </v-alert-title>
          <div class="mt-2">
            <p>
              The People Manager module is not installed or enabled. 
              This module requires the <strong>people_manager</strong> module to function properly.
            </p>
            <p class="mt-2 mb-0">
              Please contact your system administrator to install and enable the 
              <code>people_manager</code> module.
            </p>
          </div>
        </v-alert>
        
        <div v-if="isPeopleManagerAvailable" class="people-wrapper">
          <div class="people-list-panel">
            <PersonList
              :selected-collection="selectedCollection"
              :selected-entity="selectedEntity"
              @select="selectEntity"
              @fresh="createEntity"
            />
          </div>
          <div class="people-editor-panel">
            <PersonEditor
              :mode="entityEditorMode"
              :selected-collection="selectedCollection"
              :selected-entity="selectedEntity"
              @save="saveEntity"
              @delete="deleteEntity"
              @edit="startEditingEntity"
              @cancel="cancelEditingEntity"
              @close="closeEntityEditor"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- Collection Editor Dialog -->
    <CollectionEditor
      v-model="showCollectionEditor"
      :collection="editingCollection"
      :mode="collectionEditorMode"
      @save="saveCollection"
      @delete="deleteCollection"
    />
  </div>
</template>

<style scoped lang="scss">
.people-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  isolation: isolate; /* Create stacking context to prevent style leakage */
}

.people-toolbar {
  border-bottom: 1px solid rgb(var(--v-border-color)) !important;
}

.people-content {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}

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

.people-main {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.people-wrapper {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.people-list-panel {
  width: 300px;
  min-width: 250px;
  max-width: 400px;
  border-right: 1px solid rgb(var(--v-border-color));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background-color: rgba(var(--v-theme-on-surface), 0.04);
}

.people-editor-panel {
  flex: 1;
  border-left: 1px solid rgb(var(--v-border-color));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: rgba(var(--v-theme-on-surface), 0.04);
  min-height: 0;
}

/* Responsive adjustments */
@media (max-width: 960px) {
  .people-wrapper {
    flex-direction: column;
  }

  .people-list-panel {
    width: 100%;
    max-width: none;
    height: 40%;
    border-right: none;
    border-bottom: 1px solid rgb(var(--v-border-color));
  }

  .people-editor-panel {
    border-left: none;
    border-top: 1px solid rgb(var(--v-border-color));
  }
}
</style>
