<template>
  <v-dialog v-model="isVisible" max-width="1400" persistent>
    <v-card>
      <v-card-title class="d-flex align-center justify-space-between">
        <div class="d-flex align-center">
          <v-icon class="mr-2" color="primary">mdi-account-details</v-icon>
          Interest Details - {{ interest?.['Full Name'] }}
        </div>
        <v-btn
          icon="mdi-close"
          variant="text"
          @click="$emit('close')"
        ></v-btn>
      </v-card-title>

      <v-divider />

      <v-card-text class="pa-0">
        <v-container fluid class="pa-6">
          <!-- Status Tags Section -->
          <div class="mb-6">
            <div class="text-h6 mb-3">Status & Timeline</div>
            <div class="d-flex flex-wrap ga-2">
              <!-- Sales Process Status -->
              <v-chip
                :color="getSalesProcessLevelColor(interest?.['Sales Process Level'])"
                variant="tonal"
                prepend-icon="mdi-progress-clock"
              >
                {{ interest?.['Sales Process Level'] }}
              </v-chip>

              <!-- EOI Status -->
              <v-chip
                v-if="interest?.['EOI Status']"
                :color="getEOIStatusColor(interest?.['EOI Status'])"
                variant="tonal"
                prepend-icon="mdi-file-document"
              >
                {{ interest?.['EOI Status'] }}
              </v-chip>

              <!-- EOI Time Sent -->
              <v-chip
                v-if="interest?.['EOI Time Sent']"
                color="warning"
                variant="tonal"
                prepend-icon="mdi-email-send"
              >
                EOI Sent: {{ formatDate(interest?.["EOI Time Sent"]) }}
              </v-chip>

              <!-- EOI Time Created -->
              <v-chip
                v-if="interest?.['EOI Time Created'] || (interest?.['documensoID'] && !interest?.['EOI Time Created'])"
                color="primary"
                variant="tonal"
                prepend-icon="mdi-file-document-plus"
              >
                EOI Created: {{ formatDate(interest?.["EOI Time Created"] || interest?.["Created At"]) }}
              </v-chip>

              <!-- Signature Status Tags -->
              <template v-if="interest?.['documensoID']">
                <v-chip
                  v-if="isSignedByClient"
                  color="success"
                  variant="tonal"
                  prepend-icon="mdi-check-circle"
                  size="small"
                >
                  ✓ Client Signed
                </v-chip>
                <v-chip
                  v-if="isSignedByCC"
                  color="success"
                  variant="tonal"
                  prepend-icon="mdi-check-circle"
                  size="small"
                >
                  ✓ CC Signed
                </v-chip>
                <v-chip
                  v-if="isSignedByDeveloper"
                  color="success"
                  variant="tonal"
                  prepend-icon="mdi-check-circle"
                  size="small"
                >
                  ✓ Developer Signed
                </v-chip>
                <v-chip
                  v-if="!isSignedByClient && hasClientSignatureLink"
                  color="orange"
                  variant="tonal"
                  prepend-icon="mdi-clock-outline"
                  size="small"
                >
                  Client Pending
                </v-chip>
                <v-chip
                  v-if="!isSignedByCC && hasCCSignatureLink"
                  color="orange"
                  variant="tonal"
                  prepend-icon="mdi-clock-outline"
                  size="small"
                >
                  CC Pending
                </v-chip>
                <v-chip
                  v-if="!isSignedByDeveloper && hasDeveloperSignatureLink"
                  color="orange"
                  variant="tonal"
                  prepend-icon="mdi-clock-outline"
                  size="small"
                >
                  Developer Pending
                </v-chip>
              </template>

              <!-- Lead Category -->
              <v-chip
                v-if="interest?.['Lead Category']"
                color="info"
                variant="tonal"
                prepend-icon="mdi-tag"
              >
                {{ interest?.['Lead Category'] }}
              </v-chip>

              <!-- Interest Type -->
              <v-chip
                v-if="interest?.['Interest Type']"
                color="secondary"
                variant="tonal"
                prepend-icon="mdi-star"
              >
                {{ interest?.['Interest Type'] }}
              </v-chip>

              <!-- Created Date -->
              <v-chip
                v-if="interest?.['Created At']"
                color="grey"
                variant="tonal"
                prepend-icon="mdi-calendar-plus"
              >
                Created: {{ formatDate(interest?.['Created At']) }}
              </v-chip>
            </div>
          </div>

          <!-- Rest of the modal content would go here -->
          <v-row>
            <v-col cols="12" md="6">
              <div class="text-h6 mb-3">Contact Information</div>
              <v-list density="compact">
                <v-list-item>
                  <template v-slot:prepend>
                    <v-icon>mdi-account</v-icon>
                  </template>
                  <v-list-item-title>{{ interest?.['Full Name'] }}</v-list-item-title>
                  <v-list-item-subtitle>Full Name</v-list-item-subtitle>
                </v-list-item>
                <v-list-item v-if="interest?.['Email Address']">
                  <template v-slot:prepend>
                    <v-icon>mdi-email</v-icon>
                  </template>
                  <v-list-item-title>{{ interest?.['Email Address'] }}</v-list-item-title>
                  <v-list-item-subtitle>Email</v-list-item-subtitle>
                </v-list-item>
                <v-list-item v-if="interest?.['Phone Number']">
                  <template v-slot:prepend>
                    <v-icon>mdi-phone</v-icon>
                  </template>
                  <v-list-item-title>{{ interest?.['Phone Number'] }}</v-list-item-title>
                  <v-list-item-subtitle>Phone</v-list-item-subtitle>
                </v-list-item>
                <v-list-item v-if="interest?.['Address']">
                  <template v-slot:prepend>
                    <v-icon>mdi-map-marker</v-icon>
                  </template>
                  <v-list-item-title>{{ interest?.['Address'] }}</v-list-item-title>
                  <v-list-item-subtitle>Address</v-list-item-subtitle>
                </v-list-item>
              </v-list>
            </v-col>

            <v-col cols="12" md="6">
              <div class="text-h6 mb-3">Yacht Information</div>
              <v-list density="compact">
                <v-list-item v-if="interest?.['Yacht Name']">
                  <template v-slot:prepend>
                    <v-icon>mdi-sail-boat</v-icon>
                  </template>
                  <v-list-item-title>{{ interest?.['Yacht Name'] }}</v-list-item-title>
                  <v-list-item-subtitle>Yacht Name</v-list-item-subtitle>
                </v-list-item>
                <v-list-item v-if="interest?.['Length']">
                  <template v-slot:prepend>
                    <v-icon>mdi-ruler</v-icon>
                  </template>
                  <v-list-item-title>{{ interest?.['Length'] }}</v-list-item-title>
                  <v-list-item-subtitle>Length</v-list-item-subtitle>
                </v-list-item>
                <v-list-item v-if="interest?.['Width']">
                  <template v-slot:prepend>
                    <v-icon>mdi-arrow-expand-horizontal</v-icon>
                  </template>
                  <v-list-item-title>{{ interest?.['Width'] }}</v-list-item-title>
                  <v-list-item-subtitle>Width</v-list-item-subtitle>
                </v-list-item>
                <v-list-item v-if="interest?.['Depth']">
                  <template v-slot:prepend>
                    <v-icon>mdi-arrow-expand-vertical</v-icon>
                  </template>
                  <v-list-item-title>{{ interest?.['Depth'] }}</v-list-item-title>
                  <v-list-item-subtitle>Depth</v-list-item-subtitle>
                </v-list-item>
              </v-list>
            </v-col>
          </v-row>

          <!-- Additional sections can be added here -->
        </v-container>
      </v-card-text>

      <v-divider />

      <v-card-actions class="pa-4">
        <v-spacer />
        <v-btn
          color="grey"
          variant="text"
          @click="$emit('close')"
        >
          Close
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

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

const props = defineProps<{
  interest: Interest | null;
  modelValue: boolean;
}>();

const emit = defineEmits<{
  'update:modelValue': [value: boolean];
  close: [];
}>();

const isVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
});

// Signature status computed properties
const isSignedByClient = computed(() => {
  if (!props.interest) return false;
  return !!(props.interest as any)['clientSignTime'];
});

const isSignedByCC = computed(() => {
  if (!props.interest) return false;
  return !!(props.interest as any)['ccSignTime'];
});

const isSignedByDeveloper = computed(() => {
  if (!props.interest) return false;
  return !!(props.interest as any)['developerSignTime'];
});

const hasClientSignatureLink = computed(() => {
  if (!props.interest) return false;
  return !!(
    (props.interest as any)['Signature Link Client'] || 
    (props.interest as any)['EmbeddedSignatureLinkClient']
  );
});

const hasCCSignatureLink = computed(() => {
  if (!props.interest) return false;
  return !!(
    (props.interest as any)['Signature Link CC'] || 
    (props.interest as any)['EmbeddedSignatureLinkCC']
  );
});

const hasDeveloperSignatureLink = computed(() => {
  if (!props.interest) return false;
  return !!(
    (props.interest as any)['Signature Link Developer'] || 
    (props.interest as any)['EmbeddedSignatureLinkDeveloper']
  );
});

// Status color functions
const getSalesProcessLevelColor = (level: string | undefined) => {
  switch (level) {
    case 'General Qualified Interest':
      return 'info';
    case 'Specific Qualified Interest':
      return 'primary';
    case 'LOI and NDA Sent':
      return 'warning';
    case 'Signed LOI and NDA':
      return 'success';
    case 'Made Reservation':
      return 'success';
    case 'Contract Negotiation':
      return 'orange';
    case 'Final Negotiations Finalized':
      return 'green';
    case 'Contract Signed':
      return 'success';
    default:
      return 'grey';
  }
};

const getEOIStatusColor = (status: string | undefined) => {
  switch (status) {
    case 'Awaiting Further Details':
      return 'grey';
    case 'Waiting for Signatures':
      return 'warning';
    case 'Signed':
      return 'success';
    default:
      return 'grey';
  }
};

// Date formatting function
const formatDate = (dateString: string | undefined) => {
  if (!dateString) return '';
  
  try {
    const date = new Date(dateString);
    if (isNaN(date.getTime())) {
      return dateString;
    }
    
    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;
  }
};
</script>
