daily-notification-plugin/test-apps/daily-notification-test/src/views/HomeView.vue

<!--
/**
 * Home View - Main Dashboard
 * 
 * Platform-neutral home view with quick actions and plugin diagnostics
 * 
 * @author Matthew Raymer
 * @version 1.0.0
 */
-->

<template>
  <div class="home-view">
    <!-- Welcome Section -->
    <div class="welcome-section">
      <h1 class="welcome-title">
        🔔 Daily Notification Test
      </h1>
      <p class="welcome-subtitle">
        Vue 3 + Capacitor + DailyNotification Plugin
      </p>
      <div class="platform-info">
        <span class="platform-badge" :class="platformClass">
          {{ platformName }}
        </span>
        <span class="status-badge" :class="statusClass">
          {{ statusText }}
        </span>
      </div>
    </div>
    
    <!-- Quick Actions -->
    <div class="quick-actions">
      <h2 class="section-title">Quick Actions</h2>
      <div class="action-grid">
        <ActionCard
          icon="📅"
          title="Schedule Notification"
          description="Schedule a new daily notification"
          @click="navigateToSchedule"
          :loading="isScheduling"
        />
        <ActionCard
          icon="📊"
          title="Check Status"
          description="View notification system status"
          @click="checkSystemStatus"
          :loading="isCheckingStatus"
        />
        <ActionCard
          icon="🔔"
          title="View Notifications"
          description="Manage scheduled notifications"
          @click="navigateToNotifications"
        />
        <ActionCard
          icon="📋"
          title="View History"
          description="Check notification history"
          @click="navigateToHistory"
        />
        <ActionCard
          icon="📜"
          title="View Logs"
          description="Check system logs and debug info"
          @click="navigateToLogs"
        />
        <ActionCard
          icon="⚙️"
          title="Settings"
          description="Configure app preferences"
          @click="navigateToSettings"
        />
      </div>
    </div>
    
    <!-- System Status -->
    <div class="system-status">
      <h2 class="section-title">System Status</h2>
      <div class="status-grid">
        <StatusCard
          v-for="item in systemStatus"
          :key="item.label"
          :title="item.label"
          :status="getStatusType(item.status)"
          :value="item.value"
          :description="getStatusDescription(item.label)"
          @refresh="refreshSystemStatus"
        />
      </div>
      
      <!-- Diagnostic Actions -->
      <div class="section">
        <h2 class="section-title">🔧 Diagnostics</h2>
        <ActionCard
          title="Plugin Diagnostics"
          description="Check plugin loading and availability"
          button-text="Run Diagnostics"
          @click="runPluginDiagnostics"
        />
        <ActionCard
          title="View Console Logs"
          description="Open browser console for detailed logs"
          button-text="Open Console"
          @click="openConsole"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAppStore } from '@/stores/app'
import ActionCard from '@/components/cards/ActionCard.vue'
import StatusCard from '@/components/cards/StatusCard.vue'
import { Capacitor } from '@capacitor/core'
import { DailyNotification } from '@timesafari/daily-notification-plugin'
import { TEST_USER_ZERO_CONFIG, generateEndorserJWT } from '@/config/test-user-zero'
import { logger } from '@/lib/logger'

const router = useRouter()
const appStore = useAppStore()

const isScheduling = ref(false)
const isCheckingStatus = ref(false)
const isRequestingPermissions = ref(false)
const nativeFetcherConfigured = ref(false)

const platformName = computed(() => {
  const platform = appStore.platform
  return platform.charAt(0).toUpperCase() + platform.slice(1)
})

const platformClass = computed(() => `platform-${appStore.platform}`)

const statusClass = computed(() => {
  const status = appStore.notificationStatus
  if (!status) return 'unknown'
  if (status.canScheduleNow) return 'ready'
  return 'not-ready'
})

const statusText = computed(() => {
  const status = appStore.notificationStatus
  if (!status) return 'Unknown'
  if (status.canScheduleNow) return 'Ready'
  return 'Not Ready'
})

const systemStatus = computed(() => {
  const status = appStore.notificationStatus
  if (!status) {
    return [
      { label: 'Platform', value: platformName.value, status: 'info' },
      { label: 'Plugin', value: 'Not Available', status: 'error' }
    ]
  }
  
  return [
    { label: 'Platform', value: platformName.value, status: 'info' },
    { label: 'Plugin', value: 'Available', status: 'success' },
    { label: 'Permissions', value: status.postNotificationsGranted ? 'Granted' : 'Not Granted', status: status.postNotificationsGranted ? 'success' : 'warning' },
    { label: 'Can Schedule', value: status.canScheduleNow ? 'Yes' : 'No', status: status.canScheduleNow ? 'success' : 'warning' },
    { label: 'Next Scheduled', value: status.nextScheduledAt ? new Date(status.nextScheduledAt).toLocaleTimeString() : 'None', status: 'info' }
  ]
})

const navigateToSchedule = (): void => {
  console.log('🔄 CLICK: Navigate to Schedule')
  router.push('/schedule')
}

const navigateToNotifications = (): void => {
  console.log('🔄 CLICK: Navigate to Notifications')
  router.push('/notifications')
}

const navigateToHistory = (): void => {
  console.log('🔄 CLICK: Navigate to History')
  router.push('/history')
}

const navigateToLogs = (): void => {
  console.log('🔄 CLICK: Navigate to Logs')
  router.push('/logs')
}

const navigateToSettings = (): void => {
  console.log('🔄 CLICK: Navigate to Settings')
  router.push('/settings')
}

const checkSystemStatus = async (): Promise<void> => {
  console.log('🔄 CLICK: Check System Status')
  isCheckingStatus.value = true
  
  try {
    console.log('🔧 Checking system status...')
    
    // Use the same detection logic as runPluginDiagnostics
    const { Capacitor } = await import('@capacitor/core')
    const platform = Capacitor.getPlatform()
    const isNative = platform !== 'web'
    
    if (isNative) {
      console.log('🔧 Native platform detected, checking plugin availability...')
      
      // Check if DailyNotification plugin is available
      const { DailyNotification } = await import('@timesafari/daily-notification-plugin')
      const plugin = DailyNotification
      const isPluginAvailable = plugin && typeof plugin.getNotificationStatus === 'function'
      console.log('🔧 DailyNotification plugin check:', isPluginAvailable ? 'Available' : 'Not Available')
      console.log('🔧 Plugin object:', plugin)
      
      if (plugin) {
        console.log('✅ Plugin available, checking status...')
        try {
          const status = await plugin.getNotificationStatus()
          const permissions = await plugin.checkPermissions()
          const exactAlarmStatus = await plugin.getExactAlarmStatus()
          
          console.log('📊 Plugin status object:', status)
          console.log('📊 Status values:')
          console.log('  - isEnabled:', status.isEnabled)
          console.log('  - isScheduled:', status.isScheduled)
          console.log('  - lastNotificationTime:', status.lastNotificationTime)
          console.log('  - nextNotificationTime:', status.nextNotificationTime)
          console.log('  - pending:', status.pending)
          console.log('  - error:', status.error)
          
          console.log('📊 Plugin permissions:', permissions)
          console.log('📊 Permissions details:')
          console.log('  - notifications:', permissions.notifications)
          console.log('  - notificationsEnabled:', (permissions as unknown as Record<string, unknown>).notificationsEnabled)
          console.log('  - exactAlarmEnabled:', (permissions as unknown as Record<string, unknown>).exactAlarmEnabled)
          console.log('  - wakeLockEnabled:', (permissions as unknown as Record<string, unknown>).wakeLockEnabled)
          console.log('  - allPermissionsGranted:', (permissions as unknown as Record<string, unknown>).allPermissionsGranted)
          console.log('📊 Exact alarm status:', exactAlarmStatus)
          
          // Map plugin response to app store format
          const mappedStatus = {
            canScheduleNow: status.isEnabled ?? false,
            postNotificationsGranted: permissions.notifications === 'granted',
            channelEnabled: true, // Default for now
            channelImportance: 3, // Default for now
            channelId: 'daily-notifications',
            exactAlarmsGranted: exactAlarmStatus.enabled,
            exactAlarmsSupported: exactAlarmStatus.supported,
            androidVersion: 33, // Default for now
            nextScheduledAt: typeof status.nextNotificationTime === 'number' 
              ? status.nextNotificationTime 
              : await status.nextNotificationTime
          }
          
          // Update the app store status - even if permissions aren't granted
          appStore.setNotificationStatus(mappedStatus)
          console.log('✅ System status updated successfully')
          
          // Log permission status for debugging
          if (!mappedStatus.postNotificationsGranted) {
            console.warn('⚠️ Notification permissions not granted - user needs to enable in settings')
            
            // Only request permissions if not already requesting
            if (!isRequestingPermissions.value) {
              console.log('🔧 Testing permission request...')
              isRequestingPermissions.value = true
              
              // Enhanced debugging for permission request
              console.log('🔍 DEBUG: Plugin object:', plugin)
              console.log('🔍 DEBUG: Plugin type:', typeof plugin)
              console.log('🔍 DEBUG: requestPermissions method:', typeof plugin.requestPermissions)
              console.log('🔍 DEBUG: Available methods:', Object.getOwnPropertyNames(plugin))
              
              try {
                console.log('🔍 DEBUG: About to call plugin.requestPermissions()')
                const result = await plugin.requestPermissions()
                console.log('✅ Permission request completed, result:', result)
                
                // After permission request, refresh the status
                console.log('🔄 Refreshing status after permission request...')
                await checkSystemStatus()
              } catch (permError) {
                console.error('❌ Permission request failed:', permError)
                console.error('❌ Error details:', {
                  name: permError.name,
                  message: permError.message,
                  stack: permError.stack
                })
              } finally {
                isRequestingPermissions.value = false
              }
            } else {
              console.log('⏳ Permission request already in progress, skipping...')
            }
          }
        } catch (error) {
          console.error('❌ Plugin status check failed:', error)
          // Keep existing status or set error state
        }
      } else {
        console.warn('⚠️ DailyNotification plugin not available')
        // Reset to error state
        appStore.setNotificationStatus(null)
      }
    } else {
      console.log('🌐 Web platform - plugin not available')
      appStore.setNotificationStatus(null)
    }
    
    console.log('🔧 System status check completed')
  } catch (error) {
    console.error('❌ System status check failed:', error)
  } finally {
    isCheckingStatus.value = false
  }
}

const getStatusType = (status: string): 'success' | 'warning' | 'error' | 'info' => {
  switch (status) {
    case 'success':
    case 'warning':
    case 'error':
    case 'info':
      return status
    default:
      return 'info'
  }
}

const getStatusDescription = (label: string): string => {
  switch (label) {
    case 'Platform':
      return 'Current platform information'
    case 'Plugin':
      return 'DailyNotification plugin availability'
    case 'Permissions':
      return 'Notification permission status'
    case 'Can Schedule':
      return 'Ready to schedule notifications'
    case 'Next Scheduled':
      return 'Next scheduled notification time'
    default:
      return 'System status information'
  }
}

const refreshSystemStatus = async (): Promise<void> => {
  console.log('🔄 CLICK: Refresh System Status')
  await checkSystemStatus()
}

const runPluginDiagnostics = async (): Promise<void> => {
  console.log('🔄 CLICK: Plugin Diagnostics - METHOD CALLED!')
  console.log('🔄 FUNCTION START: runPluginDiagnostics called at', new Date().toISOString())
  try {
    console.log('🔧 Running plugin diagnostics...')
    console.log('🔧 BUTTON CLICKED - METHOD CALLED!')
    
    // Check if we're on a native platform
    const { Capacitor } = await import('@capacitor/core')
    const platform = Capacitor.getPlatform()
    const isNative = Capacitor.isNativePlatform()
    
    console.log('📱 Platform:', platform)
    console.log('🔧 Native Platform:', isNative)
    
    if (isNative) {
      // Use proper plugin import
      const { DailyNotification } = await import('@timesafari/daily-notification-plugin')
      const plugin = DailyNotification
      const isPluginAvailable = plugin && typeof plugin.getNotificationStatus === 'function'

      console.log('🔍 Plugin detection debug:')
      console.log('  - DailyNotification plugin:', isPluginAvailable ? 'Available' : 'Not Available')
      console.log('  - Plugin object:', plugin)

      if (plugin) {
        console.log('✅ DailyNotification plugin available')
        
        // Get all available plugins
        const allPlugins = Object.keys((window as Window & { Capacitor?: { Plugins?: Record<string, unknown> } }).Capacitor?.Plugins || {})
        console.log('📋 All available plugins:', allPlugins)
        
        // Test the checkStatus method
        try {
          const status = await plugin.getNotificationStatus()
          console.log('📊 Plugin status check result:', status)
          
          // Create detailed plugin report
          const pluginReport = {
            platform: platform,
            nativePlatform: isNative,
            dailyNotificationAvailable: true,
            allAvailablePlugins: allPlugins,
            dailyNotificationStatus: status,
            capacitorVersion: (window as Window & { Capacitor?: { getPlatform?: () => string } }).Capacitor?.getPlatform ? 'Available' : 'Unknown',
            webViewInfo: {
              userAgent: navigator.userAgent,
              platform: navigator.platform
            }
          }
          
          alert(`✅ Plugin Diagnostics Complete!\n\n` +
                `Platform: ${platform}\n` +
                `Native Platform: ${isNative}\n` +
                `DailyNotification Plugin: Available\n` +
                `All Plugins (${allPlugins.length}): ${allPlugins.join(', ')}\n\n` +
                `DailyNotification Status:\n${JSON.stringify(status, null, 2)}\n\n` +
                `Full Report:\n${JSON.stringify(pluginReport, null, 2)}`)
        } catch (error) {
          console.error('❌ Plugin status check failed:', error)
          alert(`⚠️ Plugin Diagnostics Complete!\n\nPlatform: ${platform}\nPlugin Available: Yes\nStatus Check Failed: ${error}\n\nAll Available Plugins: ${allPlugins.join(', ')}`)
        }
      } else {
        console.warn('⚠️ DailyNotification plugin not available')
        const allPlugins = Object.keys((window as Window & { Capacitor?: { Plugins?: Record<string, unknown> } }).Capacitor?.Plugins || {})
        alert(`❌ Plugin Diagnostics Complete!\n\nPlatform: ${platform}\nDailyNotification Plugin: Not Available\n\nAll Available Plugins (${allPlugins.length}):\n${allPlugins.join(', ')}\n\nCapacitor Plugins Object:\n${JSON.stringify((window as Window & { Capacitor?: { Plugins?: Record<string, unknown> } }).Capacitor?.Plugins || {}, null, 2)}`)
      }
    } else {
      console.log('🌐 Running in web mode - plugin not available')
      alert(`ℹ️ Plugin Diagnostics Complete!\n\nPlatform: ${platform}\nNative Platform: No\nPlugin Available: No (Web mode)`)
    }
  } catch (error) {
    console.error('❌ Plugin diagnostics failed:', error)
    alert(`❌ Plugin Diagnostics Failed!\n\nError: ${error}`)
  }
}

const openConsole = (): void => {
  console.log('🔄 CLICK: Open Console - METHOD CALLED!')
  console.log('📖 Console opened - check browser developer tools for detailed logs')
  alert('📖 Console Logs\n\nOpen your browser\'s Developer Tools (F12) and check the Console tab for detailed diagnostic information.')
}

// Configure native fetcher for background workers
const configureNativeFetcher = async (): Promise<void> => {
  // Only configure once
  if (nativeFetcherConfigured.value) {
    console.log('⏭️ HomeView: Native fetcher already configured, skipping')
    return
  }

  // Only configure on native platforms
  if (!Capacitor.isNativePlatform()) {
    console.log('⏭️ HomeView: Web platform - skipping native fetcher configuration')
    return
  }

  try {
    console.log('🚀 HomeView: Starting native fetcher configuration...')
    console.log('👤 HomeView: Using User Zero identity:', TEST_USER_ZERO_CONFIG.identity.name)
    console.log('🔑 HomeView: User Zero DID:', TEST_USER_ZERO_CONFIG.identity.did)
    logger.info('Configuring native fetcher from HomeView using User Zero identity...')

    // Get API server URL
    const apiBaseUrl = TEST_USER_ZERO_CONFIG.getApiServerUrl()
    console.log('🔧 HomeView: API Base URL:', apiBaseUrl)
    console.log('🔧 HomeView: Server Mode:', TEST_USER_ZERO_CONFIG.api.serverMode)

    // Skip configuration if in mock mode
    if (TEST_USER_ZERO_CONFIG.api.serverMode === 'mock') {
      console.log('⏭️ HomeView: Mock mode - skipping configuration')
      logger.warn('Mock mode enabled - native fetcher will not be configured')
      nativeFetcherConfigured.value = true // Mark as "configured" to prevent retries
      return
    }

    console.log('🔧 HomeView: Generating ES256K JWT token for User Zero...')
    // Generate JWT token for authentication using User Zero's DID and seed phrase
    // This uses TEST_USER_ZERO_CONFIG.identity.did and TEST_USER_ZERO_CONFIG.identity.seedPhrase
    const jwtToken = await generateEndorserJWT()
    console.log('✅ HomeView: JWT token generated for User Zero, length:', jwtToken.length)

    console.log('🔧 HomeView: Configuring native fetcher with User Zero credentials:', {
      apiBaseUrl,
      activeDid: TEST_USER_ZERO_CONFIG.identity.did,
      userZeroName: TEST_USER_ZERO_CONFIG.identity.name,
      jwtTokenLength: jwtToken.length
    })

    // Configure native fetcher with User Zero's credentials
    // This passes User Zero's DID and JWT token (signed with User Zero's private key)
    await DailyNotification.configureNativeFetcher({
      apiBaseUrl: apiBaseUrl,
      activeDid: TEST_USER_ZERO_CONFIG.identity.did, // User Zero's DID
      jwtToken: jwtToken // JWT signed with User Zero's private key derived from seed phrase
    })

    console.log('✅ HomeView: Native fetcher configured successfully!')
    logger.info('Native fetcher configured successfully', {
      apiBaseUrl: apiBaseUrl.substring(0, 50) + '...',
      activeDid: TEST_USER_ZERO_CONFIG.identity.did.substring(0, 30) + '...'
    })

    // Update starred plan IDs from config (non-blocking - if this fails, fetcher is still configured)
    try {
      console.log('🔧 HomeView: Updating starred plan IDs...')
      const planIds = [...TEST_USER_ZERO_CONFIG.starredProjects.planIds]
      console.log('🔧 HomeView: Plan IDs to update:', planIds.length, 'plans')
      console.log('🔧 HomeView: Plan IDs array:', JSON.stringify(planIds))

      const updateResult = await DailyNotification.updateStarredPlans({
        planIds: planIds
      })

      console.log('✅ HomeView: Starred plans updated:', {
        count: updateResult.planIdsCount,
        updatedAt: new Date(updateResult.updatedAt).toISOString()
      })
    } catch (starredPlansError) {
      // Non-critical error - native fetcher is already configured
      console.warn('⚠️ HomeView: Failed to update starred plans (non-critical):', starredPlansError)
      logger.warn('Starred plans update failed (native fetcher is still configured)', {
        error: starredPlansError instanceof Error ? starredPlansError.message : String(starredPlansError)
      })
    }

    // Mark as configured to prevent duplicate configuration
    nativeFetcherConfigured.value = true
  } catch (error) {
    console.error('❌ HomeView: Failed to configure native fetcher:', error)
    console.error('❌ HomeView: Error details:', error instanceof Error ? error.stack : String(error))
    logger.error('Failed to configure native fetcher from HomeView:', error)
    // Don't mark as configured on error, so it can retry on next mount
  }
}

// Initialize system status and native fetcher when component mounts
onMounted(async () => {
  console.log('🏠 HomeView mounted - checking initial system status and configuring native fetcher...')
  
  // Configure native fetcher first (needed for background workers)
  await configureNativeFetcher()
  
  // Then check system status
  await checkSystemStatus()
})
</script>

<style scoped>
.home-view {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.welcome-section {
  text-align: center;
  margin-bottom: 40px;
}

.welcome-title {
  font-size: 32px;
  font-weight: 700;
  color: white;
  margin: 0 0 8px 0;
}

.welcome-subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 20px 0;
}

.platform-info {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.platform-badge {
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-badge {
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
}

.quick-actions {
  margin-bottom: 40px;
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  color: white;
  margin: 0 0 20px 0;
  text-align: center;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.system-status {
  margin-bottom: 40px;
}

.section {
  margin-bottom: 30px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .home-view {
    padding: 16px;
  }
  
  .welcome-title {
    font-size: 24px;
  }
  
  .action-grid {
    grid-template-columns: 1fr;
  }
  
  .platform-info {
    flex-direction: column;
    align-items: center;
  }
}
</style>