<template>
  <v-alert
    v-if="showBanner && duplicateCount > 0"
    type="warning"
    variant="tonal"
    closable
    @click:close="dismissBanner"
    class="ma-4"
  >
    <template #prepend>
      <v-icon>mdi-content-duplicate</v-icon>
    </template>
    
    <div class="d-flex align-center justify-space-between">
      <div>
        <div class="text-subtitle-1 font-weight-medium">
          {{ duplicateCount }} duplicate interest record{{ duplicateCount > 1 ? 's' : '' }} detected
        </div>
        <div class="text-body-2">
          Duplicate interest records can affect data integrity and client communication.
        </div>
      </div>
      
      <v-btn
        color="warning"
        variant="elevated"
        size="small"
        :to="'/dashboard/admin/duplicates'"
        prepend-icon="mdi-wrench"
      >
        Clean Up Duplicates
      </v-btn>
    </div>
  </v-alert>
</template>

<script setup>
const { hasRole } = useAuthorization();

const showBanner = ref(true);
const duplicateCount = ref(0);
const loading = ref(false);

// Check for duplicates on mount (sales/admin users)
const checkForDuplicates = async () => {
  if (loading.value) return;
  
  console.log('[InterestDuplicateNotification] Checking for interest duplicates...');
  
  try {
    loading.value = true;
    
    // Check roles with better error handling
    let canViewDuplicates = false;
    try {
      canViewDuplicates = await hasRole(['sales', 'admin']);
      console.log('[InterestDuplicateNotification] Role check result:', canViewDuplicates);
    } catch (roleError) {
      console.error('[InterestDuplicateNotification] Role check failed:', roleError);
      // Try to get user info directly as fallback
      const { isAdmin } = useAuthorization();
      canViewDuplicates = isAdmin();
      console.log('[InterestDuplicateNotification] Fallback admin check:', canViewDuplicates);
    }
    
    if (!canViewDuplicates) {
      console.log('[InterestDuplicateNotification] User does not have sales/admin role');
      return;
    }
    
    const response = await $fetch('/api/interests/duplicates/find', {
      method: 'GET',
      query: { 
        threshold: 0.8,
        dateRange: 365 // Check last year
      }
    });
    
    console.log('[InterestDuplicateNotification] API Response:', response);
    
    if (response.success && response.data?.duplicateGroups) {
      duplicateCount.value = response.data.duplicateGroups.length;
      console.log('[InterestDuplicateNotification] Found', duplicateCount.value, 'duplicate groups');
    }
  } catch (error) {
    console.error('[InterestDuplicateNotification] Failed to check for duplicates:', error);
    // Silently fail - this is just a notification banner
  } finally {
    loading.value = false;
  }
};

// Dismiss the banner for this session
const dismissBanner = () => {
  showBanner.value = false;
  // Store dismissal in session storage
  if (process.client) {
    sessionStorage.setItem('interest-duplicates-banner-dismissed', 'true');
  }
};

// Check if banner was already dismissed this session
onMounted(() => {
  // Always check for duplicates - remove session storage blocking for debugging
  console.log('[InterestDuplicateNotification] Component mounted, checking for duplicates...');
  
  // Clear any previous dismissal for debugging
  if (process.client) {
    sessionStorage.removeItem('interest-duplicates-banner-dismissed');
  }
  
  // Check for duplicates for sales/admin users immediately
  checkForDuplicates();
});
</script>
