<!--
/**
 * Request Permissions View - Permission Management Interface
 * 
 * Platform-neutral permissions view with status display and request functionality
 * 
 * @author Matthew Raymer
 * @version 1.0.0
 */
-->

<template>
  <div class="request-permissions-view">
    <div class="view-header">
      <div class="header-title-row">
        <button class="back-button" @click="goBack" aria-label="Go back to home">
          ←
        </button>
        <h1 class="page-title">🔐 Request Permissions</h1>
      </div>
      <p class="page-subtitle">Check and request notification permissions</p>
    </div>
    
    <!-- Status Display -->
    <div class="status-section">
      <div class="status-card" :class="statusCardClass">
        <div class="status-content">
          <div class="status-icon">{{ statusIcon }}</div>
          <div class="status-text">{{ statusText }}</div>
          <div v-if="statusDetails" class="status-details">{{ statusDetails }}</div>
        </div>
      </div>
    </div>
    
    <!-- Permission Details -->
    <div class="permissions-section">
      <h2 class="section-title">Permission Status</h2>
      <div class="permissions-grid">
        <div class="permission-item">
          <span class="permission-label">🔔 Notifications:</span>
          <span class="permission-value" :class="notificationStatusClass">
            {{ notificationStatusText }}
          </span>
        </div>
        <div v-if="exactAlarmStatusText" class="permission-item">
          <span class="permission-label">⏰ Exact Alarm:</span>
          <span class="permission-value" :class="exactAlarmStatusClass">
            {{ exactAlarmStatusText }}
          </span>
        </div>
        <div v-if="backgroundRefreshStatusText" class="permission-item">
          <span class="permission-label">🔄 Background Refresh:</span>
          <span class="permission-value" :class="backgroundRefreshStatusClass">
            {{ backgroundRefreshStatusText }}
          </span>
        </div>
      </div>
    </div>
    
    <!-- Action Button -->
    <div class="action-section">
      <button 
        class="action-button primary" 
        @click="requestPermissions" 
        :disabled="isRequesting"
      >
        {{ isRequesting ? 'Requesting...' : 'Request Permissions' }}
      </button>
      
      <button 
        class="action-button secondary" 
        @click="refreshStatus" 
        :disabled="isRefreshing"
      >
        {{ isRefreshing ? 'Refreshing...' : 'Refresh Status' }}
      </button>
    </div>
    
    <!-- Additional Actions -->
    <div class="additional-actions">
      <button 
        class="action-button tertiary" 
        @click="openNotificationSettings"
      >
        Open Notification Settings
      </button>
      <button 
        v-if="showBackgroundRefreshButton"
        class="action-button tertiary" 
        @click="openBackgroundRefreshSettings"
      >
        Open Background Refresh Settings
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Capacitor } from '@capacitor/core'
import { DailyNotification } from '@timesafari/daily-notification-plugin'

const router = useRouter()

const isRequesting = ref(false)
const isRefreshing = ref(false)
const statusText = ref('Ready to check permissions...')
const statusDetails = ref('')
const notificationGranted = ref(false)
const exactAlarmGranted = ref(false)
const backgroundRefreshEnabled = ref(false)
const showBackgroundRefreshButton = ref(false)

const statusCardClass = computed(() => {
  if (isRequesting.value || isRefreshing.value) return 'status-yellow'
  if (notificationGranted.value) return 'status-green'
  return 'status-gray'
})

const statusIcon = computed(() => {
  if (isRequesting.value || isRefreshing.value) return '⏳'
  if (notificationGranted.value) return '✅'
  return '⚠️'
})

const notificationStatusClass = computed(() => {
  return notificationGranted.value ? 'status-success' : 'status-error'
})

const notificationStatusText = computed(() => {
  return notificationGranted.value ? 'Granted' : 'Not Granted'
})

const exactAlarmStatusClass = computed(() => {
  return exactAlarmGranted.value ? 'status-success' : 'status-warning'
})

const exactAlarmStatusText = computed(() => {
  if (!exactAlarmGranted.value && Capacitor.getPlatform() === 'android') {
    return 'Not Granted'
  }
  return null
})

const backgroundRefreshStatusClass = computed(() => {
  return backgroundRefreshEnabled.value ? 'status-success' : 'status-warning'
})

const backgroundRefreshStatusText = computed(() => {
  if (Capacitor.getPlatform() === 'ios') {
    return backgroundRefreshEnabled.value ? 'Enabled' : 'Not Enabled'
  }
  return null
})

const checkStatus = async (): Promise<void> => {
  isRefreshing.value = true
  statusText.value = 'Checking permissions...'
  statusDetails.value = ''
  
  try {
    if (!Capacitor.isNativePlatform()) {
      statusText.value = 'Web platform - permissions not available'
      statusDetails.value = 'This feature requires a native platform (iOS or Android)'
      notificationGranted.value = false
      return
    }
    
    const plugin = DailyNotification
    if (!plugin) {
      statusText.value = 'Plugin not available'
      statusDetails.value = 'DailyNotification plugin could not be loaded'
      notificationGranted.value = false
      return
    }
    
    // Check permission status
    const permissionStatus = await plugin.checkPermissionStatus()
    notificationGranted.value = permissionStatus.notificationsEnabled ?? false
    
    // Check exact alarm status (Android only)
    if (Capacitor.getPlatform() === 'android') {
      try {
        const exactAlarmStatus = await plugin.getExactAlarmStatus()
        exactAlarmGranted.value = exactAlarmStatus.enabled ?? false
      } catch (error) {
        console.warn('Could not check exact alarm status:', error)
      }
    }
    
    // Check background refresh status (iOS only)
    if (Capacitor.getPlatform() === 'ios') {
      try {
        if (typeof (plugin as any).getBackgroundTaskStatus === 'function') {
          const backgroundStatus = await (plugin as any).getBackgroundTaskStatus()
          // Check if tasks are registered (either fetchTaskRegistered or notifyTaskRegistered)
          const tasksRegistered = backgroundStatus.tasksRegistered ?? 
                                  backgroundStatus.fetchTaskRegistered ?? 
                                  backgroundStatus.notifyTaskRegistered ?? 
                                  false
          backgroundRefreshEnabled.value = tasksRegistered
          showBackgroundRefreshButton.value = true
        }
      } catch (error) {
        console.warn('Could not check background refresh status:', error)
      }
    }
    
    if (notificationGranted.value) {
      statusText.value = 'Permission request completed! Check your device settings if needed.'
      statusDetails.value = 'Notifications are enabled and ready to use.'
    } else {
      statusText.value = 'Permissions not granted'
      statusDetails.value = 'Tap "Request Permissions" to enable notifications.'
    }
    
  } catch (error) {
    console.error('❌ Failed to check permissions:', error)
    statusText.value = `Status check failed: ${(error as Error).message}`
    statusDetails.value = 'Please try again or check the console for details.'
    notificationGranted.value = false
  } finally {
    isRefreshing.value = false
  }
}

const requestPermissions = async (): Promise<void> => {
  if (isRequesting.value) {
    console.log('⏳ Permission request already in progress')
    return
  }
  
  isRequesting.value = true
  statusText.value = 'Requesting permissions...'
  statusDetails.value = ''
  
  try {
    if (!Capacitor.isNativePlatform()) {
      statusText.value = 'Web platform - permissions not available'
      statusDetails.value = 'This feature requires a native platform (iOS or Android)'
      return
    }
    
    const plugin = DailyNotification
    if (!plugin) {
      statusText.value = 'Plugin not available'
      statusDetails.value = 'DailyNotification plugin could not be loaded'
      return
    }
    
    // Request permissions - try iOS-specific method first, fallback to generic
    if (typeof (plugin as any).requestNotificationPermissions === 'function') {
      await (plugin as { requestNotificationPermissions: () => Promise<any> }).requestNotificationPermissions()
    } else if (typeof (plugin as any).requestPermissions === 'function') {
      await (plugin as { requestPermissions: () => Promise<any> }).requestPermissions()
    } else {
      throw new Error('Permission request method not available')
    }
    
    statusText.value = 'Permission request completed! Check your device settings if needed.'
    statusDetails.value = 'Refreshing status...'
    
    // Wait a moment for system to update, then refresh status
    await new Promise(resolve => setTimeout(resolve, 1000))
    await checkStatus()
    
  } catch (error) {
    console.error('❌ Permission request failed:', error)
    statusText.value = `Permission request failed: ${(error as Error).message}`
    statusDetails.value = 'Please check your device settings or try again.'
  } finally {
    isRequesting.value = false
  }
}

const refreshStatus = async (): Promise<void> => {
  await checkStatus()
}

const openNotificationSettings = async (): Promise<void> => {
  try {
    const plugin = DailyNotification
    if (!plugin) {
      alert('Plugin not available')
      return
    }
    
    if (typeof (plugin as any).openNotificationSettings === 'function') {
      await (plugin as any).openNotificationSettings()
    } else {
      alert('Open notification settings not available on this platform')
    }
  } catch (error) {
    console.error('❌ Failed to open notification settings:', error)
    alert(`Failed to open settings: ${(error as Error).message}`)
  }
}

const openBackgroundRefreshSettings = async (): Promise<void> => {
  try {
    const plugin = DailyNotification
    if (!plugin) {
      alert('Plugin not available')
      return
    }
    
    if (typeof (plugin as any).openBackgroundAppRefreshSettings === 'function') {
      await (plugin as any).openBackgroundAppRefreshSettings()
    } else {
      alert('Open background refresh settings not available on this platform')
    }
  } catch (error) {
    console.error('❌ Failed to open background refresh settings:', error)
    alert(`Failed to open settings: ${(error as Error).message}`)
  }
}

const goBack = (): void => {
  router.push('/')
}

// Check status when component mounts
onMounted(async () => {
  await checkStatus()
})
</script>

<style scoped>
.request-permissions-view {
  max-width: 600px;
  margin: 0 auto;
}

.view-header {
  text-align: center;
  margin-bottom: 30px;
}

.header-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}

.back-button {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
}

.back-button:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateX(-2px);
}

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

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

/* Status Section */
.status-section {
  margin-bottom: 24px;
}

.status-card {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 24px;
  backdrop-filter: blur(10px);
  text-align: center;
}

.status-card.status-yellow {
  background: rgba(255, 255, 0, 0.3);
  border-color: rgba(255, 255, 0, 0.5);
}

.status-card.status-green {
  background: rgba(0, 255, 0, 0.3);
  border-color: rgba(0, 255, 0, 0.5);
}

.status-card.status-gray {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.status-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.status-icon {
  font-size: 48px;
}

.status-text {
  font-size: 18px;
  font-weight: 600;
  color: white;
}

.status-details {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 4px;
}

/* Permissions Section */
.permissions-section {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  backdrop-filter: blur(10px);
}

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

.permissions-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.permission-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.permission-label {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.permission-value {
  font-size: 14px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 12px;
}

.permission-value.status-success {
  background: rgba(34, 197, 94, 0.3);
  color: #86efac;
}

.permission-value.status-error {
  background: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

.permission-value.status-warning {
  background: rgba(251, 191, 36, 0.3);
  color: #fde047;
}

/* Action Section */
.action-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.action-button {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-button.primary {
  background: #1976d2;
  color: white;
}

.action-button.primary:hover:not(:disabled) {
  background: #1565c0;
}

.action-button.secondary {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
}

.action-button.secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.3);
}

.action-button.tertiary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
}

.action-button.tertiary:hover {
  background: rgba(255, 255, 255, 0.1);
}

.action-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.additional-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .request-permissions-view {
    padding: 16px 0;
  }
  
  .status-card,
  .permissions-section {
    padding: 20px;
  }
  
  .header-title-row {
    gap: 8px;
  }
  
  .back-button {
    min-width: 36px;
    height: 36px;
    font-size: 16px;
  }
}
</style>

