<script setup lang="ts">
import { ref, computed } from 'vue'
import { useCollectionsStore } from '@MailManager/stores/collectionsStore'
import { useServicesStore } from '@MailManager/stores/servicesStore'
import { useMailStore } from '@/stores/mailStore'
import { useUser } from '@KTXC'
import FolderTreeView from './FolderTreeView.vue'
import FolderPageView from './FolderPageView.vue'
import CreateFolderDialog from './CreateFolderDialog.vue'
import RenameFolderDialog from './RenameFolderDialog.vue'
import type { CollectionObject } from '@MailManager/models/collection'
import type { ServiceObject } from '@MailManager/models'

type FolderViewMode = 'tree' | 'page'

const props = defineProps<{
  selectedFolder?: CollectionObject | null
}>()

// Emits
const emit = defineEmits<{
  select: [folder: CollectionObject]
  folderCreated: [folder: CollectionObject]
}>()

// Stores
const collectionsStore = useCollectionsStore()
const servicesStore = useServicesStore()
const mailStore = useMailStore()

// User settings
const { settings } = useUser()

// Folder view mode from user settings
const folderViewMode = computed(() => {
  return (settings.value.get('mail.folderViewMode') as FolderViewMode) || 'tree'
})

// Create folder dialog state
const createDialogVisible = ref(false)
const createDialogService = ref<ServiceObject | null>(null)
const createDialogParent = ref<CollectionObject | null>(null)
const renameDialogVisible = ref(false)
const renameDialogService = ref<ServiceObject | null>(null)
const renameDialogFolder = ref<CollectionObject | null>(null)

// Handle create folder event from child components
const handleCreateFolder = (service: ServiceObject, parentFolder: CollectionObject | null = null) => {
  createDialogService.value = service
  createDialogParent.value = parentFolder
  createDialogVisible.value = true
}

// Handle folder created
const handleFolderCreated = (newFolder: CollectionObject) => {
  emit('folderCreated', newFolder)
  emit('select', newFolder)
}

const handleEditFolder = (service: ServiceObject, folder: CollectionObject) => {
  renameDialogService.value = service
  renameDialogFolder.value = folder
  renameDialogVisible.value = true
}

const handleFolderRenamed = (updatedFolder: CollectionObject) => {
  emit('select', updatedFolder)
}

// Computed: all folders for validation
const allFolders = computed(() => 
  servicesStore.services.flatMap(service =>
    collectionsStore.collectionsForService(service.provider, service.identifier),
  )
)

interface ServiceGroup {
  service: ServiceObject
  loading: boolean
  loaded: boolean
  error: string | null
}
const serviceGroups = computed(() => {
  const groups: ServiceGroup[] = []

  servicesStore.services.forEach(service => {
    groups.push({
      service,
      loading: mailStore.isServiceFolderLoading(service.provider, service.identifier),
      loaded: mailStore.hasServiceFoldersLoaded(service.provider, service.identifier),
      error: mailStore.getServiceFolderError(service.provider, service.identifier),
    })
  })

  return groups
})
</script>

<template>
  <v-list density="compact" nav>
    <!-- Tree View -->
    <FolderTreeView
      v-if="folderViewMode === 'tree'"
      :selected-folder="selectedFolder"
      :service-groups="serviceGroups"
      @select="emit('select', $event)"
      @create-folder="handleCreateFolder"
      @edit-folder="handleEditFolder"
    />

    <!-- Page-based View -->
    <FolderPageView
      v-else
      :selected-folder="selectedFolder"
      :service-groups="serviceGroups"
      @select="emit('select', $event)"
      @create-folder="handleCreateFolder"
      @edit-folder="handleEditFolder"
    />

    <!-- Empty state -->
    <v-list-item v-if="servicesStore.services.length === 0">
      <v-list-item-title class="text-center text-medium-emphasis">
        No mail accounts configured
      </v-list-item-title>
    </v-list-item>
  </v-list>
  
  <!-- Create Folder Dialog -->
  <CreateFolderDialog
    v-if="createDialogService"
    v-model="createDialogVisible"
    :service="createDialogService"
    :parent-folder="createDialogParent"
    :all-folders="allFolders"
    @created="handleFolderCreated"
  />

  <RenameFolderDialog
    v-if="renameDialogService && renameDialogFolder"
    v-model="renameDialogVisible"
    :service="renameDialogService"
    :folder="renameDialogFolder"
    :all-folders="allFolders"
    @updated="handleFolderRenamed"
  />
</template>

<style scoped>
.v-list-item--active {
  background-color: rgba(var(--v-theme-primary), 0.12);
}
</style>
