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

<template>
  <div>
    <v-card-title class="text-h6 d-flex align-center pb-4">
      <v-icon class="mr-2" color="primary">mdi-file-document-edit</v-icon>
      EOI Management
    </v-card-title>
    <v-card-text class="pt-0">
      
      <!-- EOI Documents Section -->
      <div v-if="hasEOIDocuments" class="mb-4">
        <div class="text-subtitle-1 mb-2">EOI Documents</div>
        <div class="d-flex flex-wrap ga-2">
          <v-chip
            v-for="(doc, index) in eoiDocuments"
            :key="index"
            color="primary"
            variant="tonal"
            prepend-icon="mdi-file-pdf-box"
            :href="doc.url"
            target="_blank"
            component="a"
            clickable
            closable
            @click:close="removeDocument(index)"
          >
            {{ doc.title || `EOI Document ${index + 1}` }}
          </v-chip>
        </div>
      </div>
      
      <!-- Generate EOI Button - Only show if no documents uploaded -->
      <div v-if="!hasEOI && !hasEOIDocuments" class="mb-4">
        <v-btn
          @click="generateEOI"
          :loading="isGenerating"
          color="primary"
          variant="flat"
          :prepend-icon="!mobile ? 'mdi-file-document-plus' : undefined"
          :icon="mobile ? 'mdi-file-document-plus' : undefined"
          :size="mobile ? 'default' : 'default'"
        >
          <span v-if="!mobile">Generate EOI</span>
        </v-btn>
      </div>
      
      <!-- Upload EOI Button -->
      <div class="mb-4">
        <v-btn
          @click="showUploadDialog = true"
          :variant="hasEOI ? 'tonal' : 'outlined'"
          :color="hasEOI ? 'success' : 'primary'"
          :prepend-icon="!mobile ? 'mdi-upload' : undefined"
          :disabled="isUploading"
          :size="mobile ? 'default' : 'large'"
        >
          {{ mobile ? 'Upload EOI' : (hasEOI ? 'Upload Signed EOI' : 'Upload EOI Document') }}
        </v-btn>
      </div>

      <!-- EOI Status Badge -->
      <div v-if="hasEOI || hasEOIDocuments" class="mb-4 d-flex align-center flex-wrap">
        <v-chip
          :color="getStatusColor(interest['EOI Status'])"
          variant="tonal"
          :prepend-icon="!mobile ? 'mdi-file-document-check' : undefined"
          :size="mobile ? 'small' : 'default'"
          class="mb-1"
        >
          {{ interest['EOI Status'] }}
        </v-chip>
        <span v-if="interest['EOI Time Sent']" class="text-caption text-grey-darken-1 ml-3">
          {{ mobile ? '' : 'Sent: ' }}{{ formatDate(interest['EOI Time Sent']) }}
        </span>
      </div>

      <!-- Signature Links - Only show if EOI is generated but not uploaded/signed -->
      <v-list v-if="hasEOI && !isEOISigned" :density="mobile ? 'compact' : 'comfortable'">
        <v-list-item class="mb-2">
          <template v-slot:prepend>
            <v-avatar color="primary" :size="mobile ? 32 : 40">
              <v-icon :size="mobile ? 'small' : 'default'">mdi-account</v-icon>
            </v-avatar>
          </template>
          <v-list-item-title :class="mobile ? 'text-body-2' : ''">Client Signature Link</v-list-item-title>
          <v-list-item-subtitle :class="mobile ? 'text-caption' : ''">{{ interest['Full Name'] }}</v-list-item-subtitle>
          <template v-slot:append>
            <v-btn
              icon="mdi-content-copy"
              variant="text"
              :size="mobile ? 'small' : 'default'"
              @click="copyLink(interest['Signature Link Client'])"
            ></v-btn>
          </template>
        </v-list-item>

        <v-list-item class="mb-2">
          <template v-slot:prepend>
            <v-avatar color="success" :size="mobile ? 32 : 40">
              <v-icon :size="mobile ? 'small' : 'default'">mdi-account-check</v-icon>
            </v-avatar>
          </template>
          <v-list-item-title :class="mobile ? 'text-body-2' : ''">CC Signature Link</v-list-item-title>
          <v-list-item-subtitle :class="mobile ? 'text-caption' : ''">Oscar Faragher</v-list-item-subtitle>
          <template v-slot:append>
            <v-btn
              icon="mdi-content-copy"
              variant="text"
              :size="mobile ? 'small' : 'default'"
              @click="copyLink(interest['Signature Link CC'])"
            ></v-btn>
          </template>
        </v-list-item>

        <v-list-item class="mb-2">
          <template v-slot:prepend>
            <v-avatar color="secondary" :size="mobile ? 32 : 40">
              <v-icon :size="mobile ? 'small' : 'default'">mdi-account-tie</v-icon>
            </v-avatar>
          </template>
          <v-list-item-title :class="mobile ? 'text-body-2' : ''">Developer Signature Link</v-list-item-title>
          <v-list-item-subtitle :class="mobile ? 'text-caption' : ''">David Mizrahi</v-list-item-subtitle>
          <template v-slot:append>
            <v-btn
              icon="mdi-content-copy"
              variant="text"
              :size="mobile ? 'small' : 'default'"
              @click="copyLink(interest['Signature Link Developer'])"
            ></v-btn>
          </template>
        </v-list-item>
      </v-list>

      <!-- Regenerate Button - Only show if EOI is generated but not uploaded/signed -->
      <div v-if="hasEOI && !isEOISigned" class="mt-4">
        <v-btn
          @click="generateEOI"
          :loading="isGenerating"
          variant="text"
          size="small"
          prepend-icon="mdi-refresh"
        >
          Regenerate EOI
        </v-btn>
      </div>
      
      <!-- Delete EOI Button - Only show if EOI is uploaded/signed -->
      <div v-if="isEOISigned" class="mt-4">
        <v-btn
          @click="showDeleteConfirmDialog = true"
          color="error"
          variant="outlined"
          size="small"
          prepend-icon="mdi-delete"
        >
          Delete EOI
        </v-btn>
      </div>
      
      <!-- Reminder Settings - Only show if EOI is generated but not uploaded/signed -->
      <v-divider v-if="hasEOI && !isEOISigned" class="mt-4 mb-4" />
      <v-row v-if="hasEOI && !isEOISigned" dense align="center">
        <v-col :cols="mobile ? 12 : 'auto'">
          <v-switch
            v-model="remindersEnabled"
            @update:model-value="updateReminderSettings"
            color="primary"
            hide-details
            density="compact"
          >
            <template v-slot:label>
              <span :class="mobile ? 'text-caption' : 'text-body-2'">
                Automatic Reminders
                <v-icon 
                  v-if="mobile"
                  size="x-small" 
                  class="ml-1"
                  @click.stop="showReminderInfo = true"
                >
                  mdi-information-outline
                </v-icon>
                <v-tooltip v-else activator="parent" location="top">
                  <div style="max-width: 300px">
                    When enabled, automatic reminders will be sent at 9am and 4pm daily to unsigned recipients
                  </div>
                </v-tooltip>
              </span>
            </template>
          </v-switch>
        </v-col>
      </v-row>
    </v-card-text>
    
    <!-- Upload Dialog -->
    <v-dialog 
      v-model="showUploadDialog" 
      :max-width="mobile ? '100%' : '600'"
      :fullscreen="mobile"
      :transition="mobile ? 'dialog-bottom-transition' : 'dialog-transition'"
    >
      <v-card>
        <v-card-title class="d-flex align-center">
          <v-icon class="mr-2" color="primary">mdi-upload</v-icon>
          Upload EOI Document
          <v-spacer />
          <v-btn icon="mdi-close" variant="text" @click="closeUploadDialog"></v-btn>
        </v-card-title>
        
        <v-divider />
        
        <v-card-text :class="mobile ? 'pa-4' : 'pa-6'">
          <div class="text-center" :class="mobile ? 'mb-4' : 'mb-6'">
            <v-icon :size="mobile ? 60 : 80" color="primary" class="mb-4">mdi-file-pdf-box</v-icon>
            <div :class="mobile ? 'text-body-1 mb-2' : 'text-h6 mb-2'">Choose how to upload your EOI</div>
            <div :class="mobile ? 'text-caption' : 'text-body-2'" class="text-grey">Upload a signed PDF document</div>
          </div>

          <v-file-input
            v-model="selectedFile"
            :label="mobile ? 'Select PDF file' : 'Drop your PDF here or click to browse'"
            accept=".pdf"
            prepend-icon=""
            variant="outlined"
            :density="mobile ? 'compact' : 'comfortable'"
            :rules="[v => !!v || 'Please select a file']"
            :show-size="!mobile"
            class="mt-4"
          >
            <template v-slot:prepend-inner>
              <v-icon color="primary" :size="mobile ? 'small' : 'default'">mdi-file-pdf-box</v-icon>
            </template>
          </v-file-input>
        </v-card-text>
        
        <v-divider />
        
        <v-card-actions class="pa-4">
          <v-spacer />
          <v-btn @click="closeUploadDialog" variant="text" :size="mobile ? 'default' : 'large'">
            Cancel
          </v-btn>
          <v-btn
            color="primary"
            variant="flat"
            @click="handleUpload"
            :loading="isUploading"
            :disabled="!selectedFile"
            :size="mobile ? 'default' : 'large'"
            :prepend-icon="!mobile ? 'mdi-upload' : undefined"
          >
            Upload{{ mobile ? '' : ' EOI' }}
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    
    <!-- Delete Confirmation Dialog -->
    <v-dialog 
      v-model="showDeleteConfirmDialog" 
      :max-width="mobile ? '100%' : '400'"
      :transition="mobile ? 'dialog-bottom-transition' : 'dialog-transition'"
    >
      <v-card>
        <v-card-title class="d-flex align-center">
          <v-icon class="mr-2" color="error">mdi-alert</v-icon>
          Confirm EOI Deletion
        </v-card-title>
        
        <v-card-text>
          Are you sure you want to delete the EOI document? This will:
          <ul class="mt-2">
            <li>Remove the uploaded EOI document</li>
            <li>Reset the Sales Process Level to "Specific Qualified Interest"</li>
            <li>Reset the EOI Status to "Awaiting Further Details"</li>
            <li>Allow a new EOI to be generated</li>
          </ul>
          <div class="mt-3 text-error">This action cannot be undone.</div>
        </v-card-text>
        
        <v-card-actions>
          <v-spacer />
          <v-btn
            @click="showDeleteConfirmDialog = false"
            variant="text"
          >
            Cancel
          </v-btn>
          <v-btn
            color="error"
            variant="flat"
            @click="deleteEOI"
            :loading="isDeleting"
          >
            Delete EOI
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    
    <!-- Mobile Reminder Info Dialog -->
    <v-dialog v-if="mobile" v-model="showReminderInfo" max-width="300">
      <v-card>
        <v-card-title class="text-h6">
          Automatic Reminders
        </v-card-title>
        <v-card-text>
          When enabled, automatic reminders will be sent at 9am and 4pm daily to unsigned recipients.
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn color="primary" variant="text" @click="showReminderInfo = false">
            Got it
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script setup lang="ts">
import type { Interest } from '~/utils/types';

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

const emit = defineEmits<{
  'eoi-generated': [data: { signingLinks: Record<string, string> }];
  'update': [];
}>();

const { mobile } = useDisplay();
const toast = useToast();
const isGenerating = ref(false);
const showUploadDialog = ref(false);
const isUploading = ref(false);
const selectedFile = ref<File | null>(null);
const showDeleteConfirmDialog = ref(false);
const isDeleting = ref(false);
const showReminderInfo = ref(false);

// Reminder settings
const remindersEnabled = ref(true);

// Initialize reminder state from interest data
watch(() => props.interest, (newInterest) => {
  if (newInterest) {
    remindersEnabled.value = (newInterest as any)['reminder_enabled'] !== false;
  }
}, { immediate: true });

const hasEOI = computed(() => {
  return !!(props.interest['Signature Link Client'] || 
           props.interest['Signature Link CC'] || 
           props.interest['Signature Link Developer']);
});

const eoiDocuments = computed(() => {
  return props.interest['EOI Document'] || [];
});

const hasEOIDocuments = computed(() => {
  return eoiDocuments.value.length > 0;
});

const isEOISigned = computed(() => {
  return props.interest['EOI Status'] === 'Signed';
});

const generateEOI = async (retryCount = 0) => {
  isGenerating.value = true;
  
  try {
    const response = await $fetch<{
      success: boolean;
      documentId: string | number;
      clientSigningUrl: string;
      signingLinks: Record<string, string>;
    }>('/api/email/generate-eoi-document', {
      method: 'POST',
      headers: {
        'x-tag': '094ut234'
      },
      body: {
        interestId: props.interest.Id.toString()
      }
    });
    
    if (response.success) {
      toast.success(response.documentId === 'existing' 
        ? 'EOI already exists - signature links retrieved' 
        : 'EOI generated successfully');
      
      emit('eoi-generated', { signingLinks: response.signingLinks });
      emit('update'); // Trigger parent to refresh data
    } else {
      throw new Error('EOI generation failed');
    }
  } catch (error: any) {
    console.error('Failed to generate EOI:', error);
    
    // Retry logic
    if (retryCount < 3) {
      console.log(`Retrying EOI generation... Attempt ${retryCount + 2}/4`);
      await new Promise(resolve => setTimeout(resolve, (retryCount + 1) * 1000));
      return generateEOI(retryCount + 1);
    }
    
    // Show error message after all retries failed
    toast.error(error.data?.statusMessage || error.message || 'Failed to generate EOI after multiple attempts');
  } finally {
    isGenerating.value = false;
  }
};

const copyLink = async (link: string | undefined) => {
  if (!link) return;
  
  try {
    await navigator.clipboard.writeText(link);
    toast.success('Signature link copied to clipboard');
    
    // Update EOI Time Sent if not already set
    if (!props.interest['EOI Time Sent']) {
      try {
        await $fetch('/api/update-interest', {
          method: 'POST',
          headers: {
            'x-tag': '094ut234'
          },
          body: {
            id: props.interest.Id.toString(),
            data: {
              'EOI Time Sent': new Date().toISOString()
            }
          }
        });
        emit('update'); // Refresh parent data
      } catch (error) {
        console.error('Failed to update EOI Time Sent:', error);
      }
    }
  } catch (error) {
    toast.error('Failed to copy link');
  }
};

const formatDate = (dateString: string) => {
  if (!dateString) return '';
  
  try {
    const date = new Date(dateString);
    // Check if date is valid
    if (isNaN(date.getTime())) {
      return dateString; // Return original if parsing fails
    }
    
    return date.toLocaleString('en-GB', {
      day: '2-digit',
      month: '2-digit', 
      year: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
      hour12: false
    });
  } catch (error) {
    console.error('Date formatting error:', error);
    return dateString;
  }
};

const getStatusColor = (status: string) => {
  switch (status) {
    case 'Waiting for Signatures':
      return 'warning';
    case 'Signed':
      return 'success';
    default:
      return 'grey';
  }
};

const removeDocument = async (index: number) => {
  // For now, we'll just show a message since removing documents 
  // would require updating the database
  toast.warning('Document removal is not yet implemented');
};

const uploadEOI = async (file: File) => {
  isUploading.value = true;
  
  try {
    const formData = new FormData();
    formData.append('file', file);
    
    const response = await $fetch<{ success: boolean; document: any; message: string }>('/api/eoi/upload-document', {
      method: 'POST',
      headers: {
        'x-tag': '094ut234'
      },
      query: {
        interestId: props.interest.Id.toString()
      },
      body: formData
    });
    
    if (response.success) {
      toast.success('EOI document uploaded successfully');
      showUploadDialog.value = false;
      selectedFile.value = null; // Reset file selection
      emit('update'); // Refresh parent data
    }
  } catch (error: any) {
    console.error('Failed to upload EOI:', error);
    toast.error(error.data?.statusMessage || 'Failed to upload EOI document');
  } finally {
    isUploading.value = false;
  }
};

const handleUpload = () => {
  if (selectedFile.value) {
    uploadEOI(selectedFile.value);
  }
};

const updateReminderSettings = async (value: boolean | null) => {
  if (value === null) return;
  
  try {
    await $fetch('/api/update-interest', {
      method: 'POST',
      headers: {
        'x-tag': '094ut234'
      },
      body: {
        id: props.interest.Id.toString(),
        data: {
          'reminder_enabled': value
        }
      }
    });
    
    toast.success(`Automatic reminders ${value ? 'enabled' : 'disabled'}`);
    emit('update'); // Refresh parent data
  } catch (error) {
    console.error('Failed to update reminder settings:', error);
    toast.error('Failed to update reminder settings');
    // Revert the switch on error
    remindersEnabled.value = !value;
  }
};

const closeUploadDialog = () => {
  showUploadDialog.value = false;
  selectedFile.value = null;
};

const deleteEOI = async () => {
  isDeleting.value = true;
  
  try {
    const response = await $fetch<{ success: boolean; message: string }>('/api/eoi/delete-document', {
      method: 'POST',
      headers: {
        'x-tag': '094ut234'
      },
      body: {
        interestId: props.interest.Id.toString()
      }
    });
    
    if (response.success) {
      toast.success('EOI deleted successfully');
      showDeleteConfirmDialog.value = false;
      emit('update'); // Refresh parent data
    }
  } catch (error: any) {
    console.error('Failed to delete EOI:', error);
    toast.error(error.data?.statusMessage || 'Failed to delete EOI');
  } finally {
    isDeleting.value = false;
  }
};
</script>