<template>
  <div class="space-y-8">
    <div class="flex items-center justify-between">
      <h1 class="text-2xl font-semibold">Dashboard</h1>
      <div class="text-sm text-gray-600">
        Mode: {{ currentMode }}
      </div>
    </div>

    <!-- Simple Core Metrics -->
    <UCard>
      <template #header>
        <h3 class="text-lg font-medium">Core Metrics</h3>
      </template>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="text-center">
          <div class="text-3xl font-bold text-green-600">{{ runwayDisplay }}</div>
          <div class="text-sm text-gray-600">Runway</div>
        </div>
        <div class="text-center">
          <div class="text-3xl font-bold text-blue-600">{{ coverageDisplay }}</div>
          <div class="text-sm text-gray-600">Coverage</div>
        </div>
        <div class="text-center">
          <div class="text-3xl font-bold text-purple-600">{{ streamCount }}</div>
          <div class="text-sm text-gray-600">Revenue Streams</div>
        </div>
      </div>
    </UCard>

    <!-- Simple Member List -->
    <UCard>
      <template #header>
        <h3 class="text-lg font-medium">Members ({{ memberCount }})</h3>
      </template>
      <div class="space-y-2">
        <div v-for="(member, index) in membersList" :key="index" class="flex items-center justify-between p-2 border border-gray-200 rounded">
          <span class="font-medium">{{ member.name }}</span>
          <span class="text-sm text-gray-600">{{ member.relationship }}</span>
        </div>
        <div v-if="memberCount === 0" class="text-sm text-gray-500 italic p-4">
          No members configured yet.
        </div>
      </div>
    </UCard>
  </div>
</template>

<script setup lang="ts">
// Simple reactive data without complex computations
const currentMode = ref('minimum')
const runwayDisplay = ref('∞')
const coverageDisplay = ref('100%')
const streamCount = ref(0)
const memberCount = ref(0)
const membersList = ref([])

// Try to initialize with store data
onMounted(async () => {
  try {
    // Simple store access without composable
    const membersStore = useMembersStore()
    const streamsStore = useStreamsStore()
    const policiesStore = usePoliciesStore()
    
    // Update reactive values
    currentMode.value = 'target' // Simplified - always use target mode
    memberCount.value = membersStore.members?.length || 0
    streamCount.value = streamsStore.streams?.length || 0
    
    // Simple member list
    membersList.value = membersStore.members?.map(m => ({
      name: m.displayName || 'Unknown',
      relationship: m.payRelationship || 'Unknown'
    })) || []
    
    console.log('Dashboard initialized:', {
      mode: currentMode.value,
      members: memberCount.value,
      streams: streamCount.value
    })
    
  } catch (error) {
    console.error('Error initializing simple dashboard:', error)
  }
})
</script>