<script setup lang="ts">
import { computed, onMounted, ref, unref } from 'vue'
import { storeToRefs } from 'pinia'
import { useDisplay } from 'vuetify'
import { useModuleStore } from '@KTXC'
import { useCollectionsStore } from '@MailManager/stores/collectionsStore'
import { useMailOperationsStore } from '@/stores/mailOperationsStore'
import { useMailSettingsStore } from '@/stores/mailSettingsStore'
import { useMailUiStore } from '@/stores/mailUiStore'
import type { CollectionObject, EntityObject } from '@MailManager/models'
import { ComposerMode } from '@/types/composer'
import MessageList from '@/components/MessageList.vue'
import MessageReader from '@/components/MessageReader.vue'
import MessageComposer from '@/components/MessageComposer.vue'
import CreateFolderDialog from '@/components/CreateFolderDialog.vue'
import DeleteFolderDialog from '@/components/DeleteFolderDialog.vue'
import FolderSelectionDialog from '@/components/FolderSelectionDialog.vue'
import RenameFolderDialog from '@/components/RenameFolderDialog.vue'
import SettingsDialog from '@/components/settings/SettingsDialog.vue'
import Sidebar from '@/components/Sidebar.vue'

// Vuetify display for responsive behavior
const display = useDisplay()
const isMobile = computed(() => display.mdAndDown.value)

// Check if mail manager is available
const moduleStore = useModuleStore()
const isManagerAvailable = computed(() => {
  return moduleStore.has('mail_manager') || moduleStore.has('MailManager')
})
const collectionsStore = useCollectionsStore()

// Mail module store
const mailOperationsStore = useMailOperationsStore()
const mailUiStore = useMailUiStore()
const mailSettingsStore = useMailSettingsStore()
const { messageListWidth } = storeToRefs(mailSettingsStore)

// storeToRefs preserves reactivity for state and computed properties
const {
  loading,
  selectedMessage,
  currentMessages,
} = storeToRefs(mailOperationsStore)

const {
  settingsDialogVisible,
  selectedFolder,
  composerMode,
  composerSource,
  composerVisible,
  selectionList,
  selectionMode,
  moveMessagesDialogVisible,
  moveMessagesDialogService,
  createFolderDialogVisible,
  createFolderDialogService,
  createFolderDialogLoading,
  createFolderDialogError,
  renameFolderDialogVisible,
  renameFolderDialogService,
  renameFolderDialogFolder,
  renameFolderDialogLoading,
  renameFolderDialogError,
  moveFolderDialogVisible,
  moveFolderDialogService,
  deleteFolderDialogVisible,
  deleteFolderDialogService,
  deleteFolderDialogFolder,
  deleteFolderDialogLoading,
  deleteFolderDialogError,
} = storeToRefs(mailUiStore)

// Complex store/composable objects accessed directly (not simple refs)
const { mailSync, entitiesStore } = mailOperationsStore

// Message search (filters the current message list by subject/sender)
const searchQuery = ref('')

const filteredMessages = computed(() => {
  const query = (searchQuery.value ?? '').trim().toLowerCase()
  if (!query) return currentMessages.value

  return currentMessages.value.filter((message: EntityObject) => {
    const subject = (message.properties.subject || '').toLowerCase()
    const fromLabel = (message.properties.from?.label || '').toLowerCase()
    const fromAddress = (message.properties.from?.address || '').toLowerCase()
    return subject.includes(query) || fromLabel.includes(query) || fromAddress.includes(query)
  })
})

const lastSyncLabel = computed(() => {
  const lastSync = unref(unref(mailSync.lastSync))

  if (!(lastSync instanceof Date)) return ''
  return `(Last: ${lastSync.toLocaleTimeString()})`
})

// Initialize
onMounted(async () => {
  if (!isManagerAvailable.value) return
  await mailUiStore.initialize()
})

// Handlers — thin wrappers that delegate to the store
const {
  validateCreateFolderName,
  validateRenameFolderName,
} = mailUiStore

const sidebarToggle = () => mailUiStore.sidebarToggle()

const handleFolderSelect = (folder: CollectionObject) => mailUiStore.selectFolder(folder)

const handleFolderCreateConfirm = async (folderName: string) => {
  try {
    const mutatedFolder = await mailUiStore.confirmCreateFolder(folderName)

    if (mutatedFolder) {
      handleFolderSelect(mutatedFolder)
    }
  } catch (error: unknown) {
    console.error('[MailPage] Failed to create folder:', error)
  }
}

const handleFolderEditConfirm = async (folderName: string) => {
  try {
    const mutatedFolder = await mailUiStore.confirmRenameFolder(folderName)

    if (mutatedFolder) {
      handleFolderSelect(mutatedFolder)
    }
  } catch (error: unknown) {
    console.error('[MailPage] Failed to rename folder:', error)
  }
}

const handleFolderDeleteConfirm = async () => {
  try {
    await mailUiStore.confirmDeleteFolder()
  } catch (error: unknown) {
    console.error('[MailPage] Failed to delete folder:', error)
  }
}

const handleFolderMoveConfirm = async (targetFolder: CollectionObject) => {
  try {
    await mailUiStore.confirmMoveFolder(targetFolder)
  } catch (error: unknown) {
    console.error('[MailPage] Failed to move folder:', error)
  }
}

const handleFolderMoveCancel = () => mailUiStore.closeMoveFolderDialog()


const handleMessageOpen = (message: EntityObject) => {
  mailOperationsStore.selectMessage(message)

  if (isMobile.value) {
    mailUiStore.sidebarHide()
  }
}

const handleMessageComposeFresh = () => mailUiStore.openComposer()

const handleMessageComposeReply = (message: EntityObject) => mailUiStore.openComposer(message, ComposerMode.Reply)

const handleMessageComposeForward = (message: EntityObject) => mailUiStore.openComposer(message, ComposerMode.Forward)

const handleMessageComposeClose = () => mailUiStore.closeComposer()

const handleMessageFlag = async (message: EntityObject, flag: string, value: boolean) => {
  await mailUiStore.flagMessage(message, flag, value)
}

const handleMessageDelete = async (message: EntityObject) => {
  await mailUiStore.deleteMessages([message.identifier])
}

const handleMessageMove = (message: EntityObject) => mailUiStore.openMoveMessagesDialog(message)

const handleMessageMoveConfirm = async (target: CollectionObject) => { await mailUiStore.confirmMoveMessages(target) }

const handleMessageMoveCancel = () => mailUiStore.closeMoveMessagesDialog()

const handleMessageSelectionMode = (message: EntityObject) => mailUiStore.messageSelectionModeActivate(message)

const handleMessageSelectionToggleOne = (message: EntityObject) => mailUiStore.messageSelectionToggleOne(message)

const handleMessageSelectionToggleAll = (value: boolean) => {
  mailUiStore.messageSelectionToggleAll(value)
}

const handleMessageSelectionClear = () => mailUiStore.messageSelectionModeDeactivate()

const handleMessageSelectionMove = () => mailUiStore.openMoveMessagesDialog()

const handleMessageSelectionFlag = (flag: string, value: boolean) => mailUiStore.flagSelectedMessages(flag, value)

const handleMessageSelectionDelete = () => mailUiStore.deleteSelectedMessages()

</script>

<template>
  <!-- Manager Unavailable -->
  <div v-if="!isManagerAvailable" class="mail-unavailable">
    <v-alert
      type="warning"
      variant="outlined"
      class="mail-unavailable-alert"
    >
      <v-icon size="64" color="warning" class="mb-6">mdi-email-off-outline</v-icon>
      <h2 class="text-h5 font-weight-bold mb-4">Mail Manager Not Available</h2>
      <p>
        The Mail Manager module is not installed or enabled.
        This module requires the <strong>mail_manager</strong> module to function properly.
      </p>
      <p class="mb-0 mt-2">
        Please contact your system administrator to install and enable the
        <code>mail_manager</code> module.
      </p>
    </v-alert>
  </div>

  <!-- Normal UI -->
  <div v-else class="mail-container">
    <!-- Top toolbar -->
    <v-toolbar class="mail-toolbar" elevation="0" density="compact">
      <template #prepend>
        <v-btn
          icon="mdi-menu"
          variant="text"
          @click="sidebarToggle"
        />
      </template>

      <v-toolbar-title class="d-flex align-center">
        <v-icon size="24" color="primary" class="mr-2">mdi-email</v-icon>
        <span class="text-subtitle-1 font-weight-bold">Mail</span>
      </v-toolbar-title>

      <v-spacer />

      <!-- Search -->
      <v-text-field
        v-model="searchQuery"
        density="compact"
        variant="outlined"
        placeholder="Search messages..."
        prepend-inner-icon="mdi-magnify"
        hide-details
        single-line
        clearable
        class="mail-toolbar-search mx-4"
      />

      <v-btn
        icon="mdi-pencil"
        @click="handleMessageComposeFresh()"
        color="primary"
        variant="text"
      >
        <v-icon>mdi-pencil</v-icon>
        <v-tooltip activator="parent" location="bottom">Compose</v-tooltip>
      </v-btn>
      
      <v-btn
        icon="mdi-refresh"
        @click="mailSync.sync()"
        :loading="mailSync.isRunning && entitiesStore.transceiving"
        variant="text"
      >
        <v-icon>mdi-refresh</v-icon>
        <v-tooltip activator="parent" location="bottom">
          Refresh {{ lastSyncLabel }}
        </v-tooltip>
      </v-btn>
      
      <v-icon 
        v-if="mailSync.isRunning" 
        color="success" 
        size="small"
        class="ml-2"
      >
        mdi-sync
      </v-icon>
    </v-toolbar>

    <!-- Main content area -->
    <div class="mail-content">
      <!-- Folder tree sidebar -->
      <Sidebar />

      <!-- Main area with message list and reader -->
      <div class="mail-main">
        <div class="mail-wrapper">
          <!-- Message list panel -->
          <div
            class="mail-list-panel"
            :style="{ '--mail-list-width': messageListWidth + '%' }"
          >
            <MessageList
              :messages="filteredMessages"
              :selected-collection="selectedFolder"
              :selected-message="selectedMessage"
              :selection-list="selectionList"
              :selection-mode="selectionMode"
              :loading="loading"
              @open="handleMessageOpen"
              @reply="handleMessageComposeReply"
              @forward="handleMessageComposeForward"
              @move="handleMessageMove"
              @delete="handleMessageDelete"
              @flag="handleMessageFlag"
              @selection-mode="handleMessageSelectionMode"
              @selection-toggle-one="handleMessageSelectionToggleOne"
              @selection-toggle-all="handleMessageSelectionToggleAll"
              @selection-clear="handleMessageSelectionClear"
              @selection-flag="handleMessageSelectionFlag"
              @selection-move="handleMessageSelectionMove"
              @selection-delete="handleMessageSelectionDelete"
            />
          </div>

          <!-- Reader/Composer panel -->
          <div class="mail-reader-panel">
            <MessageComposer
              v-if="composerVisible"
              :mode="composerMode"
              :source="composerSource"
              :folder="selectedFolder"
              @close="handleMessageComposeClose"
            />
            
            <MessageReader
              v-else
              :entity="selectedMessage"
              @compose="handleMessageComposeFresh"
              @reply="handleMessageComposeReply"
              @forward="handleMessageComposeForward"
              @move="handleMessageMove"
              @delete="handleMessageDelete"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- Settings Dialog -->
    <SettingsDialog v-model="settingsDialogVisible" />

    <FolderSelectionDialog
      v-if="moveMessagesDialogService"
      v-model="moveMessagesDialogVisible"
      :service="moveMessagesDialogService"
      :loading="loading"
      title="Move Messages To"
      confirm-text="Move"
      empty-text="No other folders are available in this account."
      @select="handleMessageMoveConfirm"
      @cancel="handleMessageMoveCancel"
    />

    <FolderSelectionDialog
      v-if="moveFolderDialogService"
      v-model="moveFolderDialogVisible"
      :service="moveFolderDialogService"
      :loading="collectionsStore.transceiving"
      title="Move Folder To"
      confirm-text="Move"
      empty-text="No other folders are available in this account."
      :disabled-folder-keys="mailUiStore.moveFolderDialogInvalidFolderKeys"
      @select="handleFolderMoveConfirm"
      @cancel="handleFolderMoveCancel"
    />

    <CreateFolderDialog
      v-if="createFolderDialogService"
      v-model="createFolderDialogVisible"
      :service="createFolderDialogService"
      :parent-folder-label="mailUiStore.createFolderDialogParentLabel"
      :validate-name="validateCreateFolderName"
      :loading="createFolderDialogLoading"
      :error-message="createFolderDialogError"
      @confirm="handleFolderCreateConfirm"
    />

    <RenameFolderDialog
      v-if="renameFolderDialogService && renameFolderDialogFolder"
      v-model="renameFolderDialogVisible"
      :service="renameFolderDialogService"
      :folder="renameFolderDialogFolder"
      :parent-folder-label="mailUiStore.renameFolderDialogParentLabel"
      :validate-name="validateRenameFolderName"
      :loading="renameFolderDialogLoading"
      :error-message="renameFolderDialogError"
      @confirm="handleFolderEditConfirm"
    />

    <DeleteFolderDialog
      v-if="deleteFolderDialogService && deleteFolderDialogFolder"
      v-model="deleteFolderDialogVisible"
      :service="deleteFolderDialogService"
      :folder="deleteFolderDialogFolder"
      :loading="deleteFolderDialogLoading"
      :error-message="deleteFolderDialogError"
      @confirm="handleFolderDeleteConfirm"
    />
  </div>
</template>

<style scoped lang="scss">
.mail-unavailable {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 0;
  padding: 48px;
  text-align: center;
  width: 100%;
}

.mail-unavailable-alert {
  width: 100%;
  text-align: left;
}

.mail-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  isolation: isolate;
}

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

.mail-toolbar-search {
  max-width: 300px;
}

@media (max-width: 960px) {
  .mail-toolbar-search {
    max-width: 180px;
    margin-inline: 8px !important;
  }
}

.mail-content {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.mail-main {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
  min-width: 0;
}

.mail-wrapper {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  overflow: hidden;
}

.mail-list-panel {
  flex: 0 0 var(--mail-list-width, 35%);
  width: var(--mail-list-width, 35%);
  min-width: 280px;
  max-width: 70%;
  border-right: 1px solid rgb(var(--v-border-color));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.mail-reader-panel {
  flex: 1;
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Responsive adjustments */
@media (max-width: 960px) {
  .mail-wrapper {
    flex-direction: column;
  }
  
  .mail-list-panel {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    border-right: none;
    border-bottom: 1px solid rgb(var(--v-border-color));
    max-height: 50%;
  }
  
  .mail-reader-panel {
    width: 100%;
  }
}
</style>
