<template>
  <div class="max-w-6xl mx-auto px-4 py-6 space-y-8" data-ui="dashboard_v1">
    <!-- Header -->
    <div class="flex items-center justify-between">
      <h1 class="text-2xl font-semibold">Dashboard</h1>
      <div class="flex items-center gap-3">
        <span class="text-sm text-gray-600">Min</span>
        <UToggle
          :model-value="operatingMode === 'target'"
          @update:model-value="(value) => setOperatingMode(value ? 'target' : 'min')"
        />
        <span class="text-sm text-gray-600">Target</span>
      </div>
    </div>

    <!-- Core Metrics -->
    <DashboardCoreMetrics />

    <!-- Member Coverage -->
    <MemberCoveragePanel />

  </div>
</template>

<script setup lang="ts">
// Import components explicitly to avoid auto-import issues
import DashboardCoreMetrics from '~/components/dashboard/DashboardCoreMetrics.vue'
import MemberCoveragePanel from '~/components/dashboard/MemberCoveragePanel.vue'

// Access composable data
const { operatingMode, setOperatingMode } = useCoopBuilder()
</script>