<!--
/**
 * 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>
      <StatusCard :status="systemStatus" @refresh="refreshSystemStatus" />
      
      <!-- 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'

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

const isScheduling = ref(false)
const isCheckingStatus = 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('📊 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')
            console.log('🔧 Testing permission request...')
            try {
              await plugin.requestPermissions()
              console.log('✅ Permission request completed')
            } catch (permError) {
              console.error('❌ Permission request failed:', permError)
            }
          }
        } 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 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.')
}

// Initialize system status when component mounts
onMounted(async () => {
  console.log('🏠 HomeView mounted - checking initial 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>
