<template>
  <div class="view-container email-view">
    <div class="email-layout">
      <!-- Folder sidebar -->
      <aside class="email-sidebar">
        <div v-for="account in accounts" :key="account.id" class="account-group">
          <div class="account-header">
            <i class="pi pi-envelope"></i>
            <span>{{ account.display_name }}</span>
          </div>
          <div v-for="folder in account.folders || []" :key="folder.name"
               class="folder-item" :class="{ active: activeFolder === `${account.id}:${folder.name}` }"
               @click="selectFolder(account, folder)">
            <i :class="folderIcon(folder.name)"></i>
            <span>{{ folder.name }}</span>
          </div>
        </div>
        <Button icon="pi pi-cog" label="Konten verwalten" text size="small" class="manage-btn"
                @click="$router.push('/settings')" />
      </aside>

      <!-- Message list -->
      <div class="message-list-panel">
        <div class="list-header">
          <span class="folder-title">{{ currentFolderName }}</span>
          <Button icon="pi pi-refresh" text size="small" @click="loadMessages" />
          <Button icon="pi pi-pencil" label="Neue E-Mail" size="small" @click="openCompose" />
        </div>
        <div v-if="loadingMessages" class="loading-center">
          <i class="pi pi-spin pi-spinner"></i>
        </div>
        <div v-else class="message-list">
          <div v-for="msg in messages" :key="msg.uid"
               class="message-item" :class="{ unread: !msg.seen, active: selectedMessage?.uid === msg.uid }"
               @click="selectMessage(msg)">
            <div class="msg-from">{{ msg.from }}</div>
            <div class="msg-subject">{{ msg.subject || '(Kein Betreff)' }}</div>
            <div class="msg-date">{{ formatDate(msg.date) }}</div>
          </div>
          <div v-if="!messages.length" class="empty">Keine Nachrichten</div>
        </div>
      </div>

      <!-- Message view -->
      <div class="message-view-panel">
        <div v-if="selectedMessage && messageDetail">
          <div class="msg-header">
            <h3>{{ messageDetail.subject }}</h3>
            <div class="msg-meta">
              <div><strong>Von:</strong> {{ messageDetail.from }}</div>
              <div><strong>An:</strong> {{ messageDetail.to }}</div>
              <div v-if="messageDetail.cc"><strong>CC:</strong> {{ messageDetail.cc }}</div>
              <div><strong>Datum:</strong> {{ messageDetail.date }}</div>
            </div>
            <div class="msg-actions">
              <Button icon="pi pi-reply" label="Antworten" size="small" outlined @click="replyTo" />
              <Button icon="pi pi-trash" size="small" severity="danger" text @click="confirmDeleteMsg = true" />
            </div>
          </div>
          <div v-if="messageDetail.html_body" class="msg-body" v-html="messageDetail.html_body"></div>
          <pre v-else-if="messageDetail.text_body" class="msg-body-text">{{ messageDetail.text_body }}</pre>
          <div v-if="messageDetail.attachments?.length" class="msg-attachments">
            <strong>Anhaenge:</strong>
            <span v-for="a in messageDetail.attachments" :key="a.filename" class="attachment">
              <i class="pi pi-paperclip"></i> {{ a.filename }}
            </span>
          </div>
        </div>
        <div v-else class="empty-message">
          <i class="pi pi-envelope" style="font-size: 2rem; color: var(--p-surface-400)"></i>
          <p>Nachricht auswaehlen</p>
        </div>
      </div>
    </div>

    <!-- Compose Dialog -->
    <Dialog v-model:visible="showCompose" header="Neue E-Mail" modal :style="{ width: '700px' }">
      <div v-if="accounts.length > 1" class="field">
        <label>Von</label>
        <Select v-model="composeForm.account_id" :options="accounts" optionLabel="email_address" optionValue="id" fluid />
      </div>
      <div class="field">
        <label>An</label>
        <InputText v-model="composeForm.to" fluid />
      </div>
      <div class="field">
        <label>CC</label>
        <InputText v-model="composeForm.cc" fluid />
      </div>
      <div class="field">
        <label>Betreff</label>
        <InputText v-model="composeForm.subject" fluid />
      </div>
      <div class="field">
        <label>Nachricht</label>
        <Textarea v-model="composeForm.body_text" rows="12" fluid />
      </div>
      <template #footer>
        <Button label="Abbrechen" text @click="showCompose = false" />
        <Button label="Senden" icon="pi pi-send" @click="sendEmail" :loading="sending" />
      </template>
    </Dialog>

    <!-- Delete message confirm -->
    <Dialog v-model:visible="confirmDeleteMsg" header="Nachricht loeschen" modal :style="{ width: '400px' }">
      <p>Moechtest du diese Nachricht wirklich loeschen?</p>
      <p v-if="messageDetail" class="msg-subject-preview"><strong>{{ messageDetail.subject }}</strong></p>
      <template #footer>
        <Button label="Abbrechen" text @click="confirmDeleteMsg = false" />
        <Button label="Loeschen" severity="danger" @click="deleteMessage(); confirmDeleteMsg = false" />
      </template>
    </Dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useToast } from 'primevue/usetoast'
import { useAuthStore } from '../stores/auth'
import apiClient from '../api/client'
import Button from 'primevue/button'
import Dialog from 'primevue/dialog'
import InputText from 'primevue/inputtext'
import Textarea from 'primevue/textarea'
import Select from 'primevue/select'

const toast = useToast()
const auth = useAuthStore()
const accounts = ref([])
const messages = ref([])
const selectedMessage = ref(null)
const messageDetail = ref(null)
const activeFolder = ref('')
const currentFolderName = ref('INBOX')
const currentAccount = ref(null)
const loadingMessages = ref(false)

const confirmDeleteMsg = ref(false)
const showCompose = ref(false)
const sending = ref(false)
const composeForm = ref({ account_id: null, to: '', cc: '', subject: '', body_text: '' })

function getEncKey() { return auth.masterKeySalt || '' }

function folderIcon(name) {
  const n = name.toLowerCase()
  if (n === 'inbox') return 'pi pi-inbox'
  if (n.includes('sent') || n.includes('gesendet')) return 'pi pi-send'
  if (n.includes('draft') || n.includes('entwu')) return 'pi pi-file-edit'
  if (n.includes('trash') || n.includes('papier') || n.includes('gelöscht')) return 'pi pi-trash'
  if (n.includes('spam') || n.includes('junk')) return 'pi pi-ban'
  return 'pi pi-folder'
}

function formatDate(dateStr) {
  if (!dateStr) return ''
  try {
    return new Date(dateStr).toLocaleString('de-DE', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' })
  } catch { return dateStr }
}

async function loadAccounts() {
  const res = await apiClient.get('/email/accounts')
  accounts.value = res.data

  for (const acc of accounts.value) {
    try {
      const fRes = await apiClient.get(`/email/accounts/${acc.id}/folders`, {
        headers: { 'X-Encryption-Key': getEncKey() }
      })
      acc.folders = fRes.data
    } catch { acc.folders = [{ name: 'INBOX', flags: [], delimiter: '/' }] }
  }

  if (accounts.value.length) {
    selectFolder(accounts.value[0], { name: 'INBOX' })
  }
}

function selectFolder(account, folder) {
  currentAccount.value = account
  activeFolder.value = `${account.id}:${folder.name}`
  currentFolderName.value = `${account.display_name} - ${folder.name}`
  loadMessages()
}

async function loadMessages() {
  if (!currentAccount.value) return
  loadingMessages.value = true
  selectedMessage.value = null
  messageDetail.value = null
  try {
    const folder = activeFolder.value.split(':')[1]
    const res = await apiClient.get(
      `/email/accounts/${currentAccount.value.id}/folders/${encodeURIComponent(folder)}/messages`,
      { headers: { 'X-Encryption-Key': getEncKey() } }
    )
    messages.value = res.data.messages
  } catch (err) {
    toast.add({ severity: 'error', summary: 'Fehler', detail: err.response?.data?.error, life: 5000 })
    messages.value = []
  } finally {
    loadingMessages.value = false
  }
}

async function selectMessage(msg) {
  selectedMessage.value = msg
  try {
    const folder = activeFolder.value.split(':')[1]
    const res = await apiClient.get(
      `/email/accounts/${currentAccount.value.id}/messages/${msg.uid}`,
      { params: { folder }, headers: { 'X-Encryption-Key': getEncKey() } }
    )
    messageDetail.value = res.data
    msg.seen = true
  } catch (err) {
    toast.add({ severity: 'error', summary: 'Fehler', detail: err.response?.data?.error, life: 5000 })
  }
}

function openCompose() {
  composeForm.value = {
    account_id: currentAccount.value?.id || accounts.value[0]?.id,
    to: '', cc: '', subject: '', body_text: '',
  }
  showCompose.value = true
}

function replyTo() {
  if (!messageDetail.value) return
  composeForm.value = {
    account_id: currentAccount.value?.id,
    to: messageDetail.value.from,
    cc: '',
    subject: `Re: ${messageDetail.value.subject}`,
    body_text: `\n\n--- Urspruengliche Nachricht ---\n${messageDetail.value.text_body || ''}`,
  }
  showCompose.value = true
}

async function sendEmail() {
  sending.value = true
  try {
    await apiClient.post('/email/send', composeForm.value, {
      headers: { 'X-Encryption-Key': getEncKey() }
    })
    showCompose.value = false
    toast.add({ severity: 'success', summary: 'E-Mail gesendet', life: 3000 })
  } catch (err) {
    toast.add({ severity: 'error', summary: 'Sendefehler', detail: err.response?.data?.error, life: 5000 })
  } finally {
    sending.value = false
  }
}

async function deleteMessage() {
  if (!selectedMessage.value || !currentAccount.value) return
  const folder = activeFolder.value.split(':')[1]
  try {
    await apiClient.delete(
      `/email/accounts/${currentAccount.value.id}/messages/${selectedMessage.value.uid}`,
      { params: { folder }, headers: { 'X-Encryption-Key': getEncKey() } }
    )
    selectedMessage.value = null
    messageDetail.value = null
    await loadMessages()
  } catch (err) {
    toast.add({ severity: 'error', summary: 'Fehler', detail: err.response?.data?.error, life: 5000 })
  }
}

onMounted(loadAccounts)
</script>

<style scoped>
.view-container { padding: 0; height: calc(100vh - 0px); }
.email-layout { display: flex; height: 100%; }
.email-sidebar { width: 220px; border-right: 1px solid var(--p-surface-200); overflow-y: auto; padding: 0.5rem; flex-shrink: 0; }
.account-group { margin-bottom: 0.5rem; }
.account-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; font-weight: 600; font-size: 0.85rem; }
.folder-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem 0.375rem 1.5rem; font-size: 0.825rem; cursor: pointer; border-radius: 4px; }
.folder-item:hover { background: var(--p-surface-100); }
.folder-item.active { background: var(--p-primary-50); color: var(--p-primary-color); }
.manage-btn { margin-top: 0.5rem; }
.message-list-panel { width: 350px; border-right: 1px solid var(--p-surface-200); display: flex; flex-direction: column; flex-shrink: 0; }
.list-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem; border-bottom: 1px solid var(--p-surface-200); }
.folder-title { font-weight: 600; font-size: 0.875rem; flex: 1; }
.message-list { flex: 1; overflow-y: auto; }
.message-item { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--p-surface-100); cursor: pointer; }
.message-item:hover { background: var(--p-surface-50); }
.message-item.active { background: var(--p-primary-50); }
.message-item.unread { font-weight: 600; }
.msg-from { font-size: 0.8rem; color: var(--p-text-muted-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-subject { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-date { font-size: 0.7rem; color: var(--p-text-muted-color); }
.message-view-panel { flex: 1; overflow-y: auto; padding: 1rem; }
.msg-header h3 { margin: 0 0 0.75rem; }
.msg-meta { font-size: 0.85rem; margin-bottom: 0.75rem; line-height: 1.6; }
.msg-actions { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.msg-body { border: 1px solid var(--p-surface-200); border-radius: 6px; padding: 1rem; background: white; }
.msg-body-text { white-space: pre-wrap; font-size: 0.875rem; }
.msg-attachments { margin-top: 1rem; font-size: 0.85rem; }
.attachment { display: inline-flex; align-items: center; gap: 0.25rem; margin-right: 0.75rem; }
.empty-message { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 0.5rem; color: var(--p-text-muted-color); }
.empty { text-align: center; padding: 2rem; color: var(--p-text-muted-color); }
.loading-center { display: flex; justify-content: center; padding: 2rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; margin-bottom: 0.5rem; font-weight: 500; font-size: 0.875rem; }
</style>
