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="mdi-file-document-plus"
        >
          Generate EOI
        </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="mdi-upload"
          :disabled="isUploading"
          size="large"
        >
          {{ hasEOI ? 'Upload Signed EOI' : 'Upload EOI Document' }}
        </v-btn>
      </div>

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

      <!-- Signature Links -->
      <v-list v-if="hasEOI" density="comfortable">
        <v-list-item class="mb-2">
          <template v-slot:prepend>
            <v-avatar color="primary" size="40">
              <v-icon>mdi-account</v-icon>
            </v-avatar>
          </template>
          <v-list-item-title>Client Signature Link</v-list-item-title>
          <v-list-item-subtitle>{{ interest['Full Name'] }}</v-list-item-subtitle>
          <template v-slot:append>
            <v-btn
              icon="mdi-content-copy"
              variant="text"
              @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="40">
              <v-icon>mdi-account-check</v-icon>
            </v-avatar>
          </template>
          <v-list-item-title>CC Signature Link</v-list-item-title>
          <v-list-item-subtitle>Oscar Faragher</v-list-item-subtitle>
          <template v-slot:append>
            <v-btn
              icon="mdi-content-copy"
              variant="text"
              @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="40">
              <v-icon>mdi-account-tie</v-icon>
            </v-avatar>
          </template>
          <v-list-item-title>Developer Signature Link</v-list-item-title>
          <v-list-item-subtitle>David Mizrahi</v-list-item-subtitle>
          <template v-slot:append>
            <v-btn
              icon="mdi-content-copy"
              variant="text"
              @click="copyLink(interest['Signature Link Developer'])"
            ></v-btn>
          </template>
        </v-list-item>
      </v-list>

      <!-- Regenerate Button -->
      <div v-if="hasEOI && interest['EOI Status'] !== 'Signed'" class="mt-4">
        <v-btn
          @click="generateEOI"
          :loading="isGenerating"
          variant="text"
          size="small"
          prepend-icon="mdi-refresh"
        >
          Regenerate EOI
        </v-btn>
      </div>
      
      <!-- Reminder Settings -->
      <v-divider v-if="hasEOI" class="mt-4 mb-4" />
      <v-row v-if="hasEOI" dense align="center">
        <v-col cols="auto">
          <v-switch
            v-model="remindersEnabled"
            @update:model-value="updateReminderSettings"
            color="primary"
            hide-details
            density="compact"
          >
            <template v-slot:label>
              <span class="text-body-2">
                Automatic Reminders
                <v-tooltip 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="600">
      <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="pa-6">
          <div class="text-center mb-6">
            <v-icon size="80" color="primary" class="mb-4">mdi-file-pdf-box</v-icon>
            <div class="text-h6 mb-2">Choose how to upload your EOI</div>
            <div class="text-body-2 text-grey">Upload a signed PDF document</div>
          </div>

          <v-tabs v-model="uploadTab" class="mb-4">
            <v-tab value="upload">
              <v-icon start>mdi-upload</v-icon>
              Upload File
            </v-tab>
            <v-tab value="browse">
              <v-icon start>mdi-folder-open</v-icon>
              Browse Files
            </v-tab>
          </v-tabs>

          <v-window v-model="uploadTab">
            <v-window-item value="upload">
              <v-file-input
                v-model="selectedFile"
                label="Drop your PDF here or click to browse"
                accept=".pdf"
                prepend-icon=""
                variant="outlined"
                density="comfortable"
                :rules="[v => !!v || 'Please select a file']"
                show-size
                class="mt-4"
              >
                <template v-slot:prepend-inner>
                  <v-icon color="primary">mdi-file-pdf-box</v-icon>
                </template>
              </v-file-input>
            </v-window-item>
            
            <v-window-item value="browse">
              <div class="text-center py-8 text-grey">
                <v-icon size="48" class="mb-3">mdi-folder-open</v-icon>
                <div>File browser integration coming soon</div>
              </div>
            </v-window-item>
          </v-window>
        </v-card-text>
        
        <v-divider />
        
        <v-card-actions class="pa-4">
          <v-spacer />
          <v-btn @click="closeUploadDialog" variant="text" size="large">
            Cancel
          </v-btn>
          <v-btn
            color="primary"
            variant="flat"
            @click="handleUpload"
            :loading="isUploading"
            :disabled="!selectedFile && uploadTab === 'upload'"
            size="large"
            prepend-icon="mdi-upload"
          >
            Upload EOI
          </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 toast = useToast();
const isGenerating = ref(false);
const showUploadDialog = ref(false);
const isUploading = ref(false);
const selectedFile = ref<File | null>(null);
const uploadTab = ref('upload');

// 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 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',
      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;
  uploadTab.value = 'upload';
};
</script>