<script setup lang="ts">
import { MessageObject } from '@MailManager/models/message'

interface Props {
  message: MessageObject
}

const props = defineProps<Props>()

// Format date for display
const formatDate = (date: Date | string | null | undefined): string => {
  if (!date) return ''
  
  const messageDate = new Date(date)
  return messageDate.toLocaleString('en-US', {
    weekday: 'short',
    year: 'numeric',
    month: 'short',
    day: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    hour12: true
  })
}

// Format file size for display
const formatFileSize = (bytes: number | undefined): string => {
  if (!bytes) return ''
  
  if (bytes < 1024) return bytes + ' B'
  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
  return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
}
</script>

<template>
  <div class="message-header pa-6">
    <div class="text-h5 mb-4">{{ message?.subject || '(No subject)' }}</div>
    
    <div class="d-flex align-center mb-3">
      <v-avatar size="48" color="primary" class="mr-3">
        <span class="text-white text-h6">
          {{ (message?.from?.label || message?.from?.address || 'U')[0].toUpperCase() }}
        </span>
      </v-avatar>
      
      <div class="flex-grow-1">
        <div class="text-body-1 font-weight-medium">
          {{ message?.from?.label || message?.from?.address || 'Unknown Sender' }}
        </div>
        <div class="text-caption text-medium-emphasis">
          {{ formatDate(message?.date) }}
        </div>
      </div>
    </div>

    <!-- Recipients -->
    <div v-if="message?.to && message?.to.length > 0" class="text-body-2 mb-1">
      <span class="text-medium-emphasis">To:</span>
      {{ message?.to.map(t => t.label || t.address).join(', ') }}
    </div>

    <div v-if="message?.cc && message?.cc.length > 0" class="text-body-2 mb-1">
      <span class="text-medium-emphasis">Cc:</span>
      {{ message?.cc.map(c => c.label || c.address).join(', ') }}
    </div>

    <!-- Attachments -->
    <div v-if="message?.attachments && message?.attachments.length > 0" class="mt-4">
      <div class="text-body-2 text-medium-emphasis mb-2">
        Attachments ({{ message?.attachments.length }})
      </div>
      <div class="d-flex flex-wrap gap-2">
        <v-chip
          v-for="(attachment, index) in message?.attachments"
          :key="index"
          prepend-icon="mdi-paperclip"
          size="small"
          variant="outlined"
          class="attachment-chip"
        >
          <span class="attachment-name">{{ attachment.name || 'Untitled' }}</span>
          <span v-if="attachment.size" class="text-caption text-medium-emphasis ml-1">
            ({{ formatFileSize(attachment.size) }})
          </span>
        </v-chip>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.message-header {
  background-color: rgba(var(--v-theme-surface));
}

.gap-2 {
  gap: 0.5rem;
}

.attachment-chip {
  max-width: 300px;
  
  .attachment-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
