port-nimara-client-portal/components/ClientEmailSection.vue

<template>
  <div>
    <v-card-title class="text-h6 d-flex align-center pb-4">
      <v-icon class="mr-2" color="primary">mdi-email</v-icon>
      Email Communication
    </v-card-title>
    <v-card-text class="pt-0">
      
      <!-- Email Credentials Setup -->
      <EmailCredentialsSetup 
        v-if="!hasEmailCredentials"
        @credentials-saved="onCredentialsSaved"
      />
      
      <div v-else>
      
      <!-- Email Controls -->
      <div class="mb-4 d-flex align-center gap-2 flex-wrap">
        <v-btn
          @click="showComposer = true"
          color="primary"
          variant="flat"
          prepend-icon="mdi-email-edit"
        >
          Compose Email
        </v-btn>
        <v-btn
          @click="loadEmailThread"
          variant="text"
          icon="mdi-refresh"
          :loading="isRefreshing"
          size="small"
        >
          <v-tooltip activator="parent">Refresh Emails</v-tooltip>
        </v-btn>
        <v-spacer />
        <v-btn
          @click="reconnectEmail"
          variant="text"
          size="small"
          prepend-icon="mdi-connection"
        >
          Reconnect
        </v-btn>
        <v-btn
          @click="disconnectEmail"
          variant="text"
          size="small"
          color="error"
          prepend-icon="mdi-logout"
        >
          Disconnect
        </v-btn>
      </div>

      <!-- Email Thread List -->
      <div v-if="emailThreads.length > 0" class="email-threads">
        <div class="text-subtitle-1 mb-3">Email History</div>
        <v-timeline side="end" density="comfortable">
          <v-timeline-item
            v-for="(email, index) in emailThreads"
            :key="index"
            :dot-color="email.direction === 'sent' ? 'primary' : 'success'"
            :icon="email.direction === 'sent' ? 'mdi-email-send' : 'mdi-email-receive'"
            size="small"
          >
            <template v-slot:opposite>
              <div class="text-caption">
                {{ formatDate(email.timestamp) }}
              </div>
            </template>
            
            <v-card variant="outlined">
              <v-card-subtitle class="d-flex align-center">
                <span class="text-body-2">
                  {{ email.direction === 'sent' ? 'To' : 'From' }}: 
                  {{ email.direction === 'sent' ? email.to : email.from }}
                </span>
              </v-card-subtitle>
              
              <v-card-text>
                <div class="text-body-2 font-weight-medium mb-2">{{ email.subject }}</div>
                <div class="email-content" v-html="formatEmailContent(email.content)"></div>
                
                <!-- Attachments -->
                <div v-if="email.attachments && email.attachments.length > 0" class="mt-3">
                  <v-chip
                    v-for="(attachment, i) in email.attachments"
                    :key="i"
                    size="small"
                    color="primary"
                    variant="tonal"
                    prepend-icon="mdi-paperclip"
                    class="mr-2"
                  >
                    {{ attachment.name }}
                  </v-chip>
                </div>
              </v-card-text>
            </v-card>
          </v-timeline-item>
        </v-timeline>
      </div>
      
        <!-- Empty State -->
        <div v-else class="text-center py-8 text-grey">
          <v-icon size="48" class="mb-3">mdi-email-outline</v-icon>
          <div>No email communication yet</div>
        </div>
      </div>
    </v-card-text>

    <!-- Email Composer Dialog -->
    <v-dialog v-model="showComposer" max-width="800" persistent>
      <v-card>
        <v-card-title class="d-flex align-center">
          <v-icon class="mr-2">mdi-email-edit</v-icon>
          Compose Email
          <v-spacer />
          <v-btn icon="mdi-close" variant="text" @click="closeComposer"></v-btn>
        </v-card-title>
        
        <v-divider />
        
        <v-card-text>
          <!-- Recipient Info -->
          <v-alert type="info" variant="tonal" class="mb-4">
            <div class="d-flex align-center">
              <v-icon class="mr-2">mdi-account</v-icon>
              <div>
                <div class="font-weight-medium">{{ interest['Full Name'] }}</div>
                <div class="text-caption">{{ interest['Email Address'] }}</div>
              </div>
            </div>
          </v-alert>

          <!-- Subject -->
          <v-text-field
            v-model="emailDraft.subject"
            label="Subject"
            variant="outlined"
            density="comfortable"
            class="mb-4"
          />

          <!-- Quick Actions -->
          <div class="mb-3">
            <span class="text-body-2 mr-2">Quick Insert:</span>
            <v-btn
              v-if="hasEOI"
              @click="insertEOILink"
              size="small"
              variant="tonal"
              prepend-icon="mdi-file-document"
            >
              EOI Link
            </v-btn>
            <v-btn
              v-if="hasBerth"
              @click="insertBerthInfo"
              size="small"
              variant="tonal"
              prepend-icon="mdi-anchor"
              class="ml-2"
            >
              Berth Info
            </v-btn>
          </div>

          <!-- Email Content -->
          <v-textarea
            v-model="emailDraft.content"
            label="Email Content"
            variant="outlined"
            rows="12"
            placeholder="Write your email here..."
            ref="contentTextarea"
          />

          <!-- Signature Settings -->
          <v-expansion-panels variant="accordion" class="my-4">
            <v-expansion-panel>
              <v-expansion-panel-title>
                <v-icon class="mr-2">mdi-draw-pen</v-icon>
                Email Signature Settings
              </v-expansion-panel-title>
              <v-expansion-panel-text>
                <v-checkbox
                  v-model="includeSignature"
                  label="Include signature"
                  hide-details
                  class="mb-3"
                />
                <div v-if="includeSignature">
                  <v-text-field
                    v-model="signatureConfig.name"
                    label="Your Name"
                    variant="outlined"
                    density="compact"
                    class="mb-2"
                  />
                  <v-text-field
                    v-model="signatureConfig.title"
                    label="Job Title"
                    variant="outlined"
                    density="compact"
                    class="mb-2"
                  />
                  <v-text-field
                    v-model="signatureConfig.company"
                    label="Company"
                    variant="outlined"
                    density="compact"
                    class="mb-2"
                  />
                  <v-text-field
                    v-model="signatureConfig.email"
                    label="Email"
                    variant="outlined"
                    density="compact"
                    class="mb-2"
                  />
                  <v-textarea
                    v-model="signatureConfig.contactInfo"
                    label="Additional Contact Info"
                    variant="outlined"
                    density="compact"
                    rows="2"
                  />
                </div>
              </v-expansion-panel-text>
            </v-expansion-panel>
          </v-expansion-panels>

          <!-- Attachments -->
          <div class="mt-4">
            <div class="text-body-2 mb-2">Attachments</div>
            
            <!-- Attachment Options -->
            <v-btn-toggle v-model="attachmentMode" mandatory class="mb-3">
              <v-btn value="upload" size="small">
                <v-icon start>mdi-upload</v-icon>
                Upload Files
              </v-btn>
              <v-btn value="browse" size="small">
                <v-icon start>mdi-folder-open</v-icon>
                Browse Files
              </v-btn>
            </v-btn-toggle>

            <!-- Upload Mode -->
            <v-file-input
              v-if="attachmentMode === 'upload'"
              v-model="emailDraft.attachments"
              label="Select files to attach"
              variant="outlined"
              density="comfortable"
              multiple
              chips
              prepend-icon="mdi-paperclip"
              show-size
            />
            
            <!-- Browse Mode -->
            <div v-else>
              <v-btn
                @click="openFileBrowser"
                variant="outlined"
                block
                size="large"
                prepend-icon="mdi-folder-open"
              >
                Browse Files
              </v-btn>
            </div>

            <!-- All Attachments Preview -->
            <div v-if="allAttachments.length > 0" class="mt-3">
              <div class="text-caption mb-2">Attachments ({{ allAttachments.length }}):</div>
              <v-chip
                v-for="(attachment, i) in allAttachments"
                :key="`${attachment.type}-${i}`"
                size="small"
                color="primary"
                variant="tonal"
                closable
                @click:close="removeAttachment(attachment)"
                class="mr-2 mb-2"
              >
                <v-icon start size="small">{{ attachment.type === 'uploaded' ? 'mdi-upload' : 'mdi-file' }}</v-icon>
                {{ attachment.name }}
              </v-chip>
            </div>
          </div>
        </v-card-text>
        
        <v-divider />
        
        <v-card-actions>
          <v-spacer />
          <v-btn @click="closeComposer" variant="text">Cancel</v-btn>
          <v-btn
            @click="sendEmail"
            color="primary"
            variant="flat"
            prepend-icon="mdi-send"
            :loading="isSending"
          >
            Send Email
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <!-- File Browser Dialog -->
    <v-dialog v-model="showFileBrowser" max-width="1200" height="80vh">
      <v-card height="80vh">
        <v-card-title class="d-flex align-center">
          <v-icon class="mr-2">mdi-folder-open</v-icon>
          Select Files from Browser
          <v-spacer />
          <v-btn icon="mdi-close" variant="text" @click="showFileBrowser = false"></v-btn>
        </v-card-title>
        <v-divider />
        <v-card-text class="pa-0" style="height: calc(100% - 64px - 72px);">
          <FileBrowser
            selection-mode
            @file-selected="handleFileSelected"
          />
        </v-card-text>
        <v-divider />
        <v-card-actions>
          <div class="text-caption" v-if="tempSelectedFiles.length > 0">
            {{ tempSelectedFiles.length }} file(s) selected
          </div>
          <v-spacer />
          <v-btn @click="cancelFileBrowser" variant="text">Cancel</v-btn>
          <v-btn 
            @click="confirmFileSelection" 
            color="primary" 
            variant="flat"
            :disabled="tempSelectedFiles.length === 0"
          >
            Attach Selected Files
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script setup lang="ts">
import type { Interest } from '~/utils/types';
import FileBrowser from '~/pages/dashboard/file-browser.vue';

const props = defineProps<{
  interest: Interest;
}>();

const emit = defineEmits<{
  'email-sent': [];
  'update': [];
}>();

const toast = useToast();
const showComposer = ref(false);
const isSending = ref(false);
const emailThreads = ref<any[]>([]);
const contentTextarea = ref<any>(null);
const isRefreshing = ref(false);
const attachmentMode = ref('upload');
const selectedBrowserFiles = ref<any[]>([]);
const hasEmailCredentials = ref(false);
const sessionId = ref<string>('');
const includeSignature = ref(true);
const signatureConfig = ref<any>({});
const showFileBrowser = ref(false);
const tempSelectedFiles = ref<any[]>([]);

const emailDraft = ref<{
  subject: string;
  content: string;
  attachments: File[];
}>({
  subject: '',
  content: '',
  attachments: []
});

// Combined attachments from both upload and browser
const allAttachments = computed(() => {
  const uploaded = emailDraft.value.attachments.map((file, index) => ({
    type: 'uploaded',
    file,
    name: file.name,
    index
  }));
  
  const browser = selectedBrowserFiles.value.map((file, index) => ({
    type: 'browser',
    file,
    name: file.displayName || file.name,
    index
  }));
  
  return [...uploaded, ...browser];
});

// Check for stored session on mount
onMounted(() => {
  const storedSession = localStorage.getItem('emailSessionId');
  if (storedSession) {
    sessionId.value = storedSession;
    hasEmailCredentials.value = true;
  }
  
  // Load signature config
  const storedSignature = localStorage.getItem('emailSignature');
  if (storedSignature) {
    signatureConfig.value = JSON.parse(storedSignature);
  }
  
  loadEmailThread();
  
  // Auto-refresh every 30 seconds
  const refreshInterval = setInterval(() => {
    loadEmailThread();
  }, 30000);
  
  // Clean up interval on unmount
  onUnmounted(() => {
    clearInterval(refreshInterval);
  });
});

// Check if interest has EOI or berth
const hasEOI = computed(() => {
  const eoiDocs = props.interest['EOI Document'];
  const hasEOIDocs = Array.isArray(eoiDocs) && eoiDocs.length > 0;
  return !!(props.interest['Signature Link Client'] || hasEOIDocs);
});

const hasBerth = computed(() => {
  const berths = props.interest.Berths;
  const hasBerthsArray = Array.isArray(berths) && berths.length > 0;
  return !!(hasBerthsArray || props.interest['Berth Number']);
});

// Watch for interest changes
watch(() => props.interest.Id, () => {
  loadEmailThread();
});

const loadEmailThread = async () => {
  if (!sessionId.value) {
    console.log('[ClientEmailSection] No sessionId available, skipping email thread load');
    return;
  }
  
  isRefreshing.value = true;
  try {
    console.log('[ClientEmailSection] Loading email thread for:', props.interest['Email Address']);
    const response = await $fetch<{
      success: boolean;
      emails: any[];
      threads?: any[];
    }>('/api/email/fetch-thread', {
      method: 'POST',
      headers: {
        'x-tag': '094ut234'
      },
      body: {
        clientEmail: props.interest['Email Address'],
        interestId: props.interest.Id.toString(),
        sessionId: sessionId.value
      }
    });
    
    if (response.success) {
      console.log('[ClientEmailSection] Successfully loaded', response.emails?.length || 0, 'emails');
      emailThreads.value = response.emails || [];
      
      // Check if we have threads from the API response
      if (response.threads) {
        console.log('[ClientEmailSection] Threads available:', response.threads.length);
        // For now, still use emails until we implement thread UI
      }
    }
  } catch (error) {
    console.error('[ClientEmailSection] Failed to load email thread:', error);
  } finally {
    isRefreshing.value = false;
  }
};

const insertEOILink = () => {
  if (!contentTextarea.value) return;
  
  const link = props.interest['Signature Link Client'] || 
               props.interest['EOI Client Link'] ||
               'EOI document has been generated for your review';
  
  const insertText = `\n\nPlease review and sign your Expression of Interest (EOI) document:\n${link}\n\n`;
  
  insertAtCursor(insertText);
};

const insertFormLink = () => {
  const formLink = `https://form.portnimara.com/interest/${props.interest.Id}`;
  const insertText = `\n\nPlease complete your interest form:\n${formLink}\n\n`;
  
  insertAtCursor(insertText);
};

const insertBerthInfo = () => {
  let berthNumber = props.interest['Berth Number'];
  
  // Check if Berths is an array and has items
  if (!berthNumber && Array.isArray(props.interest.Berths) && props.interest.Berths.length > 0) {
    berthNumber = props.interest.Berths[0]['Berth Number'];
  }
  
  const insertText = `\n\nBerth Information:\nBerth Number: ${berthNumber || 'TBD'}\n\n`;
  
  insertAtCursor(insertText);
};

const insertAtCursor = (text: string) => {
  const textarea = contentTextarea.value.$el.querySelector('textarea');
  if (!textarea) return;
  
  const start = textarea.selectionStart;
  const end = textarea.selectionEnd;
  const current = emailDraft.value.content;
  
  emailDraft.value.content = current.substring(0, start) + text + current.substring(end);
  
  // Set cursor position after inserted text
  nextTick(() => {
    textarea.focus();
    textarea.setSelectionRange(start + text.length, start + text.length);
  });
};

const sendEmail = async () => {
  if (!emailDraft.value.subject || !emailDraft.value.content) {
    toast.error('Please enter a subject and message');
    return;
  }
  
  if (!sessionId.value) {
    toast.error('Please set up email credentials first');
    hasEmailCredentials.value = false;
    return;
  }
  
  isSending.value = true;
  
  try {
    // First, upload any attachments to MinIO
    const uploadedAttachments = [];
    
    // Handle regular file attachments
    if (emailDraft.value.attachments && emailDraft.value.attachments.length > 0) {
      for (const file of emailDraft.value.attachments) {
        try {
          console.log('[ClientEmailSection] Uploading file:', file.name, 'size:', file.size);
          
          const formData = new FormData();
          formData.append('file', file);
          
          // Use the current user's username/email for the attachment folder
          // Get email from stored signature config or session
          const userEmail = signatureConfig.value?.email || 'unknown';
          const username = userEmail.split('@')[0]
            .toLowerCase()
            .replace(/[^a-z0-9-]/g, '');
          
          console.log('[ClientEmailSection] Upload path:', `${username}-attachments/`, 'bucket: client-emails');
          
          const uploadResponse = await $fetch<{ 
            success: boolean; 
            path: string; 
            fileName: string 
          }>('/api/files/upload', {
            method: 'POST',
            headers: {
              'x-tag': '094ut234'
            },
            query: {
              path: `${username}-attachments/`,
              bucket: 'client-emails'
            },
            body: formData
          });
          
          console.log('[ClientEmailSection] Upload response:', uploadResponse);
          
          if (uploadResponse.success) {
            const attachmentPath = uploadResponse.path || uploadResponse.fileName;
            console.log('[ClientEmailSection] Successfully uploaded, path:', attachmentPath);
            
            uploadedAttachments.push({
              name: file.name,
              path: attachmentPath,
              bucket: 'client-emails'
            });
          } else {
            console.error('[ClientEmailSection] Upload failed, response:', uploadResponse);
            toast.error(`Failed to upload ${file.name}`);
          }
        } catch (uploadError: any) {
          console.error('[ClientEmailSection] Failed to upload attachment:', file.name, uploadError);
          console.error('[ClientEmailSection] Upload error details:', uploadError.data || uploadError.message);
          toast.error(`Failed to upload ${file.name}: ${uploadError.data?.statusMessage || uploadError.message || 'Unknown error'}`);
        }
      }
    }
    
    // Handle files selected from browser
    if (selectedBrowserFiles.value.length > 0) {
      for (const file of selectedBrowserFiles.value) {
        // Files from browser are already in MinIO
        // Include bucket information
        uploadedAttachments.push({
          name: file.displayName || file.name,
          path: file.name,
          bucket: file.bucket || 'client-portal' // Include bucket info
        });
      }
    }
    
    // Prepare email data with the correct structure
    const emailData = {
      to: props.interest['Email Address'],
      subject: emailDraft.value.subject,
      body: emailDraft.value.content, // Use 'body' not 'html'
      interestId: props.interest.Id.toString(),
      sessionId: sessionId.value,
      includeSignature: includeSignature.value,
      signatureConfig: signatureConfig.value,
      attachments: uploadedAttachments
    };
    
    // Send email
    const response = await $fetch<{
      success: boolean;
      messageId?: string;
    }>('/api/email/send', {
      method: 'POST',
      headers: {
        'x-tag': '094ut234'
      },
      body: emailData
    });
    
    if (response.success) {
      toast.success('Email sent successfully');
      
      // Save signature config
      if (includeSignature.value) {
        localStorage.setItem('emailSignature', JSON.stringify(signatureConfig.value));
      }
      
      // Add to thread with all attachments info
      const allAttachmentNames = [
        ...emailDraft.value.attachments.map((f: File) => ({ name: f.name })),
        ...selectedBrowserFiles.value.map((f: any) => ({ name: f.displayName || f.name }))
      ];
      
      emailThreads.value.unshift({
        direction: 'sent',
        to: props.interest['Email Address'],
        subject: emailDraft.value.subject,
        content: emailDraft.value.content,
        timestamp: new Date().toISOString(),
        attachments: allAttachmentNames
      });
      
      // Close composer and reset
      closeComposer();
      emit('email-sent');
      emit('update');
    }
  } catch (error: any) {
    console.error('Failed to send email:', error);
    toast.error(error.data?.statusMessage || 'Failed to send email');
  } finally {
    isSending.value = false;
  }
};

const closeComposer = () => {
  showComposer.value = false;
  // Reset draft
  emailDraft.value = {
    subject: '',
    content: '',
    attachments: []
  };
  attachmentMode.value = 'upload';
  selectedBrowserFiles.value = [];
};

const removeBrowserFile = (index: number) => {
  selectedBrowserFiles.value = selectedBrowserFiles.value.filter((_, i) => i !== index);
};

const removeAttachment = (attachment: any) => {
  if (attachment.type === 'uploaded') {
    // Remove from uploaded files
    emailDraft.value.attachments = emailDraft.value.attachments.filter((_, i) => i !== attachment.index);
  } else if (attachment.type === 'browser') {
    // Remove from browser-selected files
    selectedBrowserFiles.value = selectedBrowserFiles.value.filter((_, i) => i !== attachment.index);
  }
};

const onCredentialsSaved = (data: { sessionId: string }) => {
  sessionId.value = data.sessionId;
  localStorage.setItem('emailSessionId', data.sessionId);
  hasEmailCredentials.value = true;
  toast.success('Email credentials saved successfully');
};

const disconnectEmail = () => {
  // Clear stored credentials
  localStorage.removeItem('emailSessionId');
  localStorage.removeItem('emailSignature');
  sessionId.value = '';
  hasEmailCredentials.value = false;
  emailThreads.value = [];
  toast.success('Email disconnected');
};

const reconnectEmail = () => {
  // Clear current session to force re-authentication
  localStorage.removeItem('emailSessionId');
  sessionId.value = '';
  hasEmailCredentials.value = false;
  toast.info('Please enter your email credentials');
};

const formatDate = (dateString: string) => {
  if (!dateString) return '';
  
  const date = new Date(dateString);
  return date.toLocaleString('en-GB', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  });
};

const formatEmailContent = (content: string) => {
  // Ensure HTML content is properly formatted
  if (content.includes('<p>') || content.includes('<br>')) {
    return content;
  }
  // Convert plain text to HTML
  return content.split('\n').map(line => `<p>${line}</p>`).join('');
};

const openFileBrowser = () => {
  tempSelectedFiles.value = [...selectedBrowserFiles.value]; // Clone existing selections
  showFileBrowser.value = true;
};

const handleFileSelected = (file: any) => {
  // Check if file is already selected in temp list
  const existsIndex = tempSelectedFiles.value.findIndex(f => f.name === file.name);
  if (existsIndex > -1) {
    // Remove if already selected (toggle behavior)
    tempSelectedFiles.value.splice(existsIndex, 1);
    toast.info(`Removed ${file.displayName || file.name} from selection`);
  } else {
    // Add to temp selection
    tempSelectedFiles.value.push(file);
    toast.success(`Selected ${file.displayName || file.name}`);
  }
};

const confirmFileSelection = () => {
  selectedBrowserFiles.value = [...tempSelectedFiles.value];
  showFileBrowser.value = false;
  tempSelectedFiles.value = [];
  toast.success(`${selectedBrowserFiles.value.length} file(s) attached`);
};

const cancelFileBrowser = () => {
  showFileBrowser.value = false;
  tempSelectedFiles.value = [];
};
</script>

<style scoped>
.email-content {
  max-height: 200px;
  overflow-y: auto;
  line-height: 1.6;
}

.email-content :deep(p) {
  margin: 0 0 0.5em 0;
}

.email-content :deep(br) {
  display: block;
  content: "";
  margin: 0.5em 0;
}

.email-threads {
  max-height: 600px;
  overflow-y: auto;
}
</style>